Login Form

by Taqi_Shah

HTML

<div id="DIV_1">
	<div id="DIV_2">
		<section id="SECTION_3">
			<header id="HEADER_4">
				<h2 id="H2_5">
					<i id="I_6"></i>Log in
				</h2>
			</header>
			<ul id="UL_9">
				<li id="LI_10">
					 <a href="/users/create/?next=/users/create/?next=/" id="A_11">New User? Sign up</a>
				</li>
				<li id="LI_15">
					<p id="P_16">
						<strong id="STRONG_17">Login using</strong>
					</p>
					<p id="P_20">
						 <a href="/login/twitter/" title="Twitter" id="A_21"><i id="I_22"></i></a> <a href="/login/google-oauth/" title="Google" id="A_23"><i id="I_24"></i></a> <a href="/login/facebook/" title="Facebook" id="A_25"><i id="I_26"></i></a> <a href="/login/github/" title="GitHub" id="A_27"><i id="I_28"></i></a>
					</p>
				</li>
				<li id="LI_29">
					<form method="post" action="/users/login/" id="FORM_30">
						<input type="hidden" name="csrfmiddlewaretoken" value="a1RPtPvCkOC4VUgaJZvxs3Hvdvi2Gx4o" id="INPUT_31" />
						<div id="DIV_32">
							<label for="id_username" id="LABEL_33">
								Username <span id="SPAN_36">*</span>
							</label>
							<div id="DIV_39">
								<input id="INPUT_40" maxlength="254" name="username" type="text" />
							</div>
						</div>
						<div id="DIV_41">
							<label for="id_password" id="LABEL_42">
								Password <span id="SPAN_45">*</span>
							</label>
							<div id="DIV_48">
								<input id="INPUT_49" name="password" type="password" />
							</div>
						</div> <input type="submit" value="Log in " id="INPUT_52" />
						<form method="post" action="/users/login/" id="FORM_53">
							<a href="/users/password_reset/?next=/users/create/?next=/" id="A_54">Forgot your password?</a>
						</form>
						<input type="hidden" name="next" value="/users/create/?next=/" id="INPUT_56" />
						<input type="hidden" name="is_iframe" value="0" id="INPUT_57" /> <a href="/users/password_reset/?next=/users/create/?next=/" id="A_58"></a>
					</form>
				</li>
			</ul>
		</section>
	</div>
</div>

CSS

#DIV_1 {
    color: rgb(70, 69, 69);
    direction: rtl;
    height: 534.666687011719px;
    text-align: right;
    width: 1200px;
    perspective-origin: 600px 267.333343505859px;
    transform-origin: 600px 267.333343505859px;
    border: 0px none rgb(70, 69, 69);
    font: normal normal normal normal 16px/20px Alef, Arial;
    margin: 0px -30px 16px 0px;
    outline: rgb(70, 69, 69) none 0px;
}/*#DIV_1*/

#DIV_1:after {
    clear: both;
    color: rgb(70, 69, 69);
    direction: rtl;
    display: table;
    text-align: right;
    width: 1.33333337306976px;
    perspective-origin: 0.666666686534882px 0px;
    transform-origin: 0.666666686534882px 0px;
    content: '';
    border: 0px none rgb(70, 69, 69);
    font: normal normal normal normal 16px/0px Alef, Arial;
    outline: rgb(70, 69, 69) none 0px;
}/*#DIV_1:after*/

#DIV_1:before {
    color: rgb(70, 69, 69);
    direction: rtl;
    display: table;
    text-align: right;
    width: 1.33333337306976px;
    perspective-origin: 0.666666686534882px 0px;
    transform-origin: 0.666666686534882px 0px;
    content: '';
    border: 0px none rgb(70, 69, 69);
    font: normal normal normal normal 16px/0px Alef, Arial;
    outline: rgb(70, 69, 69) none 0px;
}/*#DIV_1:before*/

#DIV_2 {
    color: rgb(70, 69, 69);
    direction: rtl;
    float: right;
    height: 534.666687011719px;
    min-height: 1px;
    text-align: right;
    width: 370px;
    perspective-origin: 185px 267.333343505859px;
    transform-origin: 185px 267.333343505859px;
    border: 0px none rgb(70, 69, 69);
    font: normal normal normal normal 16px/20px Alef, Arial;
    margin: 0px 430px 0px 0px;
    outline: rgb(70, 69, 69) none 0px;
}/*#DIV_2*/

#SECTION_3 {
    box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px;
    color: rgb(70, 69, 69);
    direction: rtl;
    height: 478px;
    position: relative;
    text-align: right;
    width: 369.333343505859px;
    perspective-origin: 186px 240.33332824707px;
    transform-origin: 186px...