<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Voto Electronico 2016</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="public/css/main.css">
</head>
<body class="home">
	<section class="home__content">
		<h1 class="home__title--vote">Voto</h1>
		<h3 class="home__title--electronic">Electrónico</h3>
		<h3 class="home__title--year">2016</h3>
		<span class="home__title--name">Ingresa tu nombre:</span>
		<input class="home__title--input" type="text">
		<a class="home__title--button" 
       >Inciar votación</a>
	</section>
	<footer class="row right middle footer__home">
		<figure class="logo">
			<img class="logo--img" src="https://s3-us-west-2.amazonaws.com/devcode/img/logo.png" alt="">
		</figure>
		<h3 class="logo__footer">DevCode</h3>
	</footer>
</body>
</html>
* {
	box-sizing: border-box;
}

html {
	font-size: 15px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 200;
}

body {
	margin: 0;
}

.row {
	display: flex;
}

.center {
	justify-content: center;
}

.left {
	justify-content: flex-start;
}

.right {
	justify-content: flex-end;
}

.between {
	justify-content: space-between;
}

.around {
	justify-content: space-around;
}

.middle {
	align-items: center;
}

.top {
	align-items: flex-start;
}

.column {
	flex-direction: column;
}

.home {
	background-image: linear-gradient(90deg, #1D406D, #3F67A9);
	background-attachment: fixed;
	text-align: center;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}
.home__content {
	text-align: center;
	margin: 8rem 0 4rem 0;
}

.home__title--vote {
	color: #fff;
	font-size: 80px;
	font-weight: 600;
	margin: 0;
	text-transform: uppercase;
}

.home__title--electronic {
	color: #F5A623;
	font-size: 40px;
	text-transform: uppercase;
	margin:  1rem 0;
}

.home__title--year {
	color: #fff;
	font-size: 40px;
}

.home__title--name {
	display: block;
	font-weight: 30px;
	text-align: center;
	font-weight: 200;
	color: #fff;
}

.home__title--input {
	height: 40px;
	width: 400px;
	text-align: center;
	margin: .5rem;
	font-size: 16px;
	font-weight: 500;
	margin: 2rem 0 2rem 0;
}

.home__title--button {
	text-decoration: none;
	border: 0px;
	border-radius: 2px;
	background-color: rgba(255,255,255, .25);
	display: block;
	height: 40px;
	width: 400px;
	text-align: center;
	margin: 0 auto;
	line-height: 40px;
	color: #fff;
	font-size: 16px;
}

.logo {
	height: 25px;
	width: 25px;
	margin: 0;
}

.logo--img {
	height: 25px;
	width: 25px;
}

.footer__home {
	padding: 0 4rem;
}

.logo__footer {
	margin-left: .25rem;
	color: #fff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.