volpeo/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Stylus</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href='http://fonts.googleapis.com/css?family=Marck+Script|Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <link href="https://fontastic.s3.amazonaws.com/UmPG4yaSph748R9A6waoX7/icons.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <link rel="stylesheet" href="style.css">

  </head>
  <body>

    <div id="header">
      <h1>Styl.us</h1>
      <p>
        Turn your pen into you best friend <br>
        Make every line you write count
      </p>
      <a href="#">Get Stylus now</a>
    </div>


    <div id="features">
      <div class="feature">
        <i class="icon-pencil"></i>
        <h2>Natural writing</h2>
        <p>Don't change your habits, write with a pen on paper notebooks</p>
      </div>

      <div class="feature">
        <i class="icon-refresh"></i>
        <h2>Sync. copy</h2>
        <p>Stylus instantaneously copy your text on your computer, in real-time</p>
      </div>

      <div class="feature">
        <i class="icon-graph"></i>
        <h2>Analytics</h2>
        <p>Get feedbacks on the way you write, your favorite words, your frequent mistakes</p>
      </div>

      <div class="feature">
        <i class="icon-database"></i>
        <h2>Storing your texts</h2>
        <p>Everything line writen with your stylus is stored in the cloud, so that it's never lost</p>
      </div>
    </div>

    <div id="newsletter">
      <h2>Get news from stylus</h2>
      <p>Leave us your mail and get stylus news</p>
    </div>

    <div id="footer">
      <p>Stylus is a fictive product by LeWagon</p>
    </div>
  </body>
</html>

## style.css

body {
  font-family: 'Open Sans', sans-serif;
}


h1 {
  font-family: 'Marck Script', cursive;
}

#header {
  background: url(images/header-bg.jpg);
  background-size: cover;
  padding: 200px 0;
  color: white;
}

#features {
  background: #0084C9;
  color: white;
  padding: 100px 0;
  text-align: center;
}

#features i {
  font-size: 50px;
}

#newsletter {
  padding: 150px 0;
}

#footer {
  background: #414141;
  color: white;
  padding: 50px 0;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Stylus</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link href='http://fonts.googleapis.com/css?family=Marck+Script\|Open+Sans:400,700' rel='stylesheet' type='text/css'>
	<link href="https://fontastic.s3.amazonaws.com/UmPG4yaSph748R9A6waoX7/icons.css" rel="stylesheet">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

	<link rel="stylesheet" href="style.css">

	</head>
	<body>

	<div id="header">
	<h1>Styl.us</h1>
	<p>
	Turn your pen into you best friend <br>
	Make every line you write count
	</p>
	<a href="#">Get Stylus now</a>
	</div>



	<div id="features">
	<div class="feature">
	<i class="icon-pencil"></i>
	<h2>Natural writing</h2>
	<p>Don't change your habits, write with a pen on paper notebooks</p>
	</div>

	<div class="feature">
	<i class="icon-refresh"></i>
	<h2>Sync. copy</h2>
	<p>Stylus instantaneously copy your text on your computer, in real-time</p>
	</div>

	<div class="feature">
	<i class="icon-graph"></i>
	<h2>Analytics</h2>
	<p>Get feedbacks on the way you write, your favorite words, your frequent mistakes</p>
	</div>

	<div class="feature">
	<i class="icon-database"></i>
	<h2>Storing your texts</h2>
	<p>Everything line writen with your stylus is stored in the cloud, so that it's never lost</p>
	</div>
	</div>

	<div id="newsletter">
	<h2>Get news from stylus</h2>
	<p>Leave us your mail and get stylus news</p>
	</div>

	<div id="footer">
	<p>Stylus is a fictive product by LeWagon</p>
	</div>
	</body>
	</html>

	body {
	font-family: 'Open Sans', sans-serif;
	}


	h1 {
	font-family: 'Marck Script', cursive;
	}

	#header {
	background: url(images/header-bg.jpg);
	background-size: cover;
	padding: 200px 0;
	color: white;
	}

	#features {
	background: #0084C9;
	color: white;
	padding: 100px 0;
	text-align: center;
	}

	#features i {
	font-size: 50px;
	}

	#newsletter {
	padding: 150px 0;
	}

	#footer {
	background: #414141;
	color: white;
	padding: 50px 0;
	}