Sign in sign up page and social login page html and css project for free download

CSS CODE FREE


body<br /> {<br /> margin: 0;<br /> padding: 0;<br /> background: #E5E5E5;<br /> font-size: 16px;<br /> color: #777;<br /> font-family: sans-serif;<br /> font-weight: 300;<br /> }<br /> <br /> #login-box<br /> {<br /> position: relative;<br /> margin: 5% auto;<br /> height: 400px;<br /> width: 600px;<br /> background: #fff;<br /> box-shadow: 0 2px rgba(0, 0, 0, 0,6); <br /> }<br /> <br /> .left-box{<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> box-sizing: border-box;<br /> padding: 40px;<br /> width: 300px;<br /> height: 400px; <br /> }<br /> <br /> h1<br /> {<br /> margin: 0 0 20px 0;<br /> font-weight: 300;<br /> font-size: 28px; <br /> }<br /> <br /> input[type="text"],<br /> input[type="password"]<br /> {<br /> <br /> display: block;<br /> box-sizing: border-box;<br /> margin-bottom: 20px;<br /> padding: 4px;<br /> width: 220px;<br /> height: 32px;<br /> border: none;<br /> outline: none;<br /> border-bottom: 1px solid #aaa;<br /> font-family: sans-serif;<br /> font-weight: 400;<br /> font-size: 15px;<br /> transition: 0.2s ease;<br /> }<br /> <br /> input[type="submit"]<br /> {<br /> <br /> margin-bottom: 28px;<br /> width: 120px;<br /> height: 32px;<br /> background: #f44336;<br /> border: none;<br /> border-radius: 2px;<br /> color: #fff;<br /> font-family: sans-serif;<br /> font-weight: 500;<br /> text-transform: uppercase;<br /> transition: 0.2s ease;<br /> cursor: pointer;<br /> }<br /> <br /> input[type="submit"]:hover,<br /> input[type="submit"]:focus<br /> {<br /> background: #000000;<br /> transition: 0.2s ease;<br /> }<br /> <br /> .right-box<br /> {<br /> <br /> position: absolute;<br /> top: 0;<br /> right: 0;<br /> box-sizing: border-box;<br /> padding: 40px;<br /> width: 300px;<br /> height: 400px;<br /> background-image: url(image1.jpg);<br /> background-size: cover;<br /> background-position: center;<br /> }<br /> <br /> .or<br /> {<br /> <br /> position: absolute;<br /> top: 180px;<br /> left: 280px;<br /> width: 40px;<br /> height: 40px;<br /> background: #efefef;<br /> border-radius: 50%;<br /> box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);<br /> line-height: 40px;<br /> text-align: center;<br /> }<br /> <br /> .right-box .signinwith<br /> {<br /> <br /> display: block;<br /> margin-bottom: 40px;<br /> font-size: 28px;<br /> color: #fff;<br /> text-align: center;<br /> text-shadow: 0 4px 6px rgba(0, 0, 0, 0.6);<br /> }<br /> <br /> button.social<br /> {<br /> margin-bottom: 20px;<br /> width: 220px;<br /> height: 36px;<br /> border: none;<br /> border-radius: 2px;<br /> color: #fff;<br /> font-family: sans-serif;<br /> font-weight: 500;<br /> transition: 0.2s ease;<br /> cursor: pointer;<br /> }<br /> <br /> .facebook<br /> {<br /> background: #32508e;<br /> <br /> }<br /> .twitter<br /> {<br /> background: #55acee;<br /> }<br /> .google<br /> {<br /> background: #dd4b39;<br /> }

You have to wait 10 seconds.