Simple sign up
A Pen by Arjun Kannan on CodePen.
Simple sign up
A Pen by Arjun Kannan on CodePen.
<div id='container'> | |
<div class="content row"> | |
<div class='signup col-md-6'> | |
<form> | |
<label for="">First Name</label> | |
<input autofocus type='text' placeholder='John' /> | |
<label for="">Last Name</label> | |
<input type='text' placeholder='Blake' /> | |
<label for="">Email</label> | |
<input type='text' placeholder='jb@gmail.com' /> | |
<label for="">Phone</label> | |
<input type='text' placeholder='919-444-9199' /> | |
</form> | |
</div> | |
<div class='whysign col-md-6'> | |
<h1 class="title">Learn code, one pen at a time</h1> | |
<p>Codepen lets you experiment and learn in seconds!</p> | |
<p class="tag-container">Learn: | |
<span>HTML</span> | |
<span>CSS</span> | |
<span>JavaScript</span> | |
<span>and many more</span> | |
</p> | |
</div> | |
<form action="" class="col-md-12"> | |
<button class="btn btn-default submit-button">Sign me up!</button> | |
</form> | |
</div> | |
</div> |
($(window).load(function() { | |
document.querySelector('input[autofocus]').focus(); | |
}))(); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
body { | |
background-color: white; | |
font: 2em Roboto; | |
padding: 10px 15px; | |
color: #777; | |
} | |
.content { | |
background-color: white; | |
margin: auto; | |
padding: 10px 40px; | |
} | |
label { | |
font-weight: normal; | |
color: #808080; | |
} | |
input { | |
transition: 0.2s linear all; | |
} | |
.title { | |
color: #53CACE; | |
} | |
[type=text] { | |
display: block; | |
margin: 0 auto; | |
width: 100%; | |
border: 0; | |
border-bottom: 1px solid rgba(0,0,0,.2); | |
height: 45px; | |
margin-bottom: 10px; | |
font-size: 1em; | |
&:hover, &:focus { | |
outline: none; | |
border-color: #53CACE; | |
} | |
} | |
.submit-button { | |
margin: 0 10%; | |
margin-top: 25px; | |
width: 80%; | |
border: 0; | |
background-color: #53CACE; | |
border-radius: 4px; | |
height: 50px; | |
color: white; | |
font-weight: normal; | |
font-size: 1em; | |
&:hover { | |
background-color: #42AAAE; | |
color: white; | |
} | |
} | |
p.tag-container { | |
margin: 40px 0; | |
span { | |
font-size: .75em; | |
background-color: #ebebeb | |
padding: 4px 8px; | |
border-radius: 4px; | |
} | |
span:hover { | |
cursor: pointer; | |
background-color: #999; | |
color: white; | |
} | |
} |
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> | |
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" /> |