Landing Page - Daily UI #003

index.html

<div class="content">
	<div class="row">
		<div class="title">
			Get your design hat on with <span class="company">Daily UI <i class="fa fa-code"></i></span></div>
	</div>
	<div class="row">
		<div class="col-md-6 description">
			<b>How It Works:</b>
			<ol>
				<li>We send you a daily prompt (M-F) for 100 days</li>
				<li>You interpret and design the UI element</li>
				<li>Share design on Dribbble or Twitter with #dailyui</li>
				<li>Get feedback from others and improve your skills</li>
			</ol>
		</div>
		<div class="col-md-6 learn-more">
			<form action="">
				<div class="form-group">
					<label for="">Name</label>
					<input autofocus type="text" class="form-control" value="Peter Parker"></input>
				</div>
				<div class="form-group">
					<label for="">Email</label>
					<input type="text" class="form-control" value="[email protected]"></input>
				</div>
			</form>
			<button class="btn">Start designing!&nbsp;&nbsp;<i class="fa fa-arrow-circle-right"></i></button>
		</div>
	</div>
</div>

Landing Page - Daily UI #003.markdown

Landing Page - Daily UI #003

A landing page - Daily UI #003

A Pen by Arjun Kannan on CodePen.

License.

style.css

body {
  font-family: 'Abel', sans-serif;
  background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;
  padding: 10px;
}
.content {
	z-index: 1;
	padding: 0 5em;
  color: #ccc;
  font-size: 1.5em;
  .title {
    font-size: 3em;
    text-align: center;
    padding: 1em 0;
  }
	.company {
		color: green;
		&:hover {
			color: #37b34a;
		}
	}
  .row {
    padding: 0 2em;
  }
  .description {
    li {
      padding: 0.5em 0;
    }
  }
 .form-group {
	 padding: 10px 0;
 }
 label {
	 font-weight: normal;
	 color: green;
 }
 input[type=text] {
	 font-size: 1.1em;
	 box-shadow: none;
	 border: none;
	 border-radius: 0;
	 border-bottom: 1px solid white;
	 background-color: transparent;
	 color: inherit;
	&:hover, &:focus {
		border-color: green;
	}
 }
 .btn {
	 transition: 0.15s linear all;
	 font-size: 1.5em;
	 background-color: transparent;
	 border: 1px solid white;
	 width: 100%;
	 &:hover {
		border-color: #37b34a;
		color: #37b34a;
	 }
 }
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />