A sign up form

A sign up form.markdown

A sign up form

Simple sign up

A Pen by Arjun Kannan on CodePen.

License.

index.html

<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>

script.js

($(window).load(function() {
  document.querySelector('input[autofocus]').focus();
}))();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

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;
  }
}

styles

<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" />