Just created a simple login form, nothing professional, just started out, so you know what to expect :)
A Pen by Dylan Dsouza on CodePen.
<div id="top-container"> | |
<span id="brand">Brand</span> | |
</div> | |
<form id="form-container"> | |
<span id="mast-head">Sign In</span> | |
<input type="text" placeholder="Username"> | |
<input type="password" placeholder="Password"> | |
<button>Log In</button> | |
</form> |
Just created a simple login form, nothing professional, just started out, so you know what to expect :)
A Pen by Dylan Dsouza on CodePen.
@import url(http://fonts.googleapis.com/css?family=Poiret+One); | |
@import url(http://fonts.googleapis.com/css?family=Dosis); | |
html{ | |
font-family: 'Poiret One', cursive; | |
background-color: #3498db; | |
} | |
body{ | |
margin: 0; | |
} | |
#top-container{ | |
color: #95a5a6; | |
height: 480px; | |
background: #ffffff; | |
text-align: center; | |
margin-bottom: -200px; | |
box-sizing: border-box; | |
padding-top: 80px; | |
} | |
#brand{ | |
font-size: 72pt; | |
} | |
#form-container{ | |
width: 400px; | |
margin: 0px auto; | |
text-align: center; | |
display: block; | |
background-color: #3498db; | |
box-sizing: border-box; | |
padding-top: 50px; | |
box-shadow: 0px 0px 10px black; | |
overflow: hidden; | |
} | |
#mast-head{ | |
color: #ffffff; | |
text-transform: capital; | |
font-size: 36px; | |
font-family: 'Dosis', sans-serif; | |
} | |
input{ | |
color: #bdc3c7; | |
font-size: 18px; | |
display: block; | |
width: 80%; | |
margin: 20px auto; | |
text-align: center; | |
height: 50px; | |
border: none; | |
border-bottom: 2px solid #bdc3c7; | |
} | |
button{ | |
color: #ffffff; | |
margin-top: 20px; | |
font-family: 'Dosis', sans-serif; | |
width: 100%; | |
font-size: 24px; | |
height: 60px; | |
border: none; | |
border-bottom: 2px solid #1abc9c; | |
background-color: #2ecc71; | |
text-transform: uppercase; | |
-webkit-transition: background-color 1s, border-bottom 1s; | |
} | |
button:hover{ | |
background-color: #e74c3c; | |
border-bottom: 2px solid #c0392b; | |
} |