<!DOCTYPE html>
<html>
<head>
<title>Ollie Bike Sharing</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="nav">
<h2>Ollie</h2>
<ul>
<li>sign up</li>
<li>search bikes</li>
<li>reserve a bike</li>
<li>about us</li>
</ul>
</div>
<div class="main">
<h1>Ollie Bike Sharing</h1>
<h2>Share Your Pedals with the World.</h2>
<p>Need a set of wheels while you're in town? Use Ollie to pair your perfect vacation with a stylish, affordable bike rental.</p>
<p>Here is a <a href="cities.html">list</a> of cities where you can find us.</p>
<video width="320" height="240" controls>
<source src="https://content.codecademy.com/projects/make-a-website/lesson-1/ollie.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Sprout</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<h1>Mystwood Publishers Ltd.</h1>
<div class="hero">
<h2>Sprout.</h2>
<p>A book by J. Daniel Bedford</p>
<a href="#">Read now.</a>
</div>
<p id="footer">© Mystwood Publishers Limited</p>
</body>
</html>
body {
height: 100%;
margin: 0;
text-align: center;
width: 100%;
}
h1 {
font-size: 32px;
font-family: Palatino, 'Palatino Linotype', serif;
color: rgb(46,105,163);
}
h2 {
font-size: 56px;
}
.hero {
padding: 250px 0;
margin: 30px;
}
p {
font-size: 2rem;
}
.hero a {
color: #00FFAA;
font-size: 1.25em;
text-decoration: none;
}
.hero {
font-family: 'Trebuchet MS', Helvetica, sans-serif;
background-image: url("https://content.codecademy.com/projects/make-a-website/lesson-2/bg.jpg");
background-size: cover;
color: #ffffff;
}
#footer {
font-size:0.75rem;
}
<html>
<head>
<title>Tundra Gallery</title>
<meta charset="utf-8"/>
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,100,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<header>
<h1 class="page-title">TUNDRA GALLERY</h1>
<p class="page-description">The Tundra Gallery is a collection of photographs from three distinct areas: arctic tundra, alpine tundra, and antarctic tundra. In tundra, the vegetation is composed of dwarf shrubs, sedges and grasses, mosses, and lichens, making for diverse ecology and stunning photos. </p>
</header>
<div class="gallery">
<figure class="gallery-item">
<img class="thumbnail" src="https://content.codecademy.com/projects/make-a-website/lesson-3/moss1.jpg">
</figure>
<figure class="gallery-item">
<img class="thumbnail" src="https://content.codecademy.com/projects/make-a-website/lesson-3/moss2.jpg">
</figure>
<figure class="gallery-item">
<img class="thumbnail" src="https://content.codecademy.com/projects/make-a-website/lesson-3/moss3.jpg">
</figure>
<figure class="gallery-item">
<img class="thumbnail" src="https://content.codecademy.com/projects/make-a-website/lesson-3/moss4.jpg">
</figure>
<figure class="gallery-item">
<img class="thumbnail" src="https://content.codecademy.com/projects/make-a-website/lesson-3/moss5.jpg">
</figure>
<figure class="gallery-item">
<img class="thumbnail" src="https://content.codecademy.com/projects/make-a-website/lesson-3/moss6.jpg">
</figure>
</div>
<nav>
<ul>
<li><a href="#"><b>Arctic</b></a></li>
<li><a href="#">Alpine</a></li>
<li><a href="#">Antarctic</a></li>
</ul>
<div class="contact-btn"><a>Contact</a>
</div>
</nav>
</body>
</html>
html, body {
min-height: 100%;
display: flex;
flex-direction: column;
font-weight: 300;
line-height: 1.5;
}
body {
font-family: 'Lato', sans-serif;
background-image: url('https://content.codecademy.com/projects/make-a-website/lesson-3/background.jpg');
background-position: center top;
background-size: cover;
margin: 0;
}
a {
color: #204156;
text-decoration: none;
}
.page-title {
text-align: center;
font-weight: 100;
}
.page-description {
border: 1px solid #000;
margin: 2px;
text-align: center;
padding: 30px;
}
.gallery {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery-item {
margin: 20px;
}
.gallery-item .thumbnail {
border: 5px solid #fff;
}
/* FOOTER NAVIGATION */
nav {
background-color: #FFF;
}
nav li {
display: inline;
margin: 0;
padding: 0 10px;
}
nav ul {
display: inline;
}
.contact-btn {
float: right;
}
.contact-btn a {
cursor: pointer;
margin-right: 30px;
padding: 8px 18px;
border: 1px solid #204156;
position: relative;
}
.contact-btn a:active {
top: 2px;
}
nav a {
height: 60px;
line-height: 60px;
color: #204156;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Skillfair</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<header class="container">
<div class="row">
<h1 class="col-sm-4">Skillfair</h1>
<nav class="col-sm-8 text-right">
<p>newest</p>
<p>catalogue</p>
<p>contact</p>
</nav>
</div>
</header>
<section class="jumbotron">
<div class="container">
<div class="row text-center">
<h2>Homemade Goods</h2>
<h3>This Year's Best</h3>
<a class="btn btn-primary" href="#" role="button">See all</a>
</div>
</div>
</section>
<section class="container">
<div class="row">
<figure class="col-sm-6">
<p>kitchen</p>
<img src="https://content.codecademy.com/projects/make-a-website/lesson-4/kitchen.jpg"/>
</figure>
<figure class="col-sm-6">
<p>woodwork</p>
<img src="https://content.codecademy.com/projects/make-a-website/lesson-4/woodwork.jpg"/>
</figure>
</div>
<div class="row">
<figure class="col-sm-6">
<p>gifts</p>
<img src="https://content.codecademy.com/projects/make-a-website/lesson-4/gifts.jpg"/>
</figure>
<figure class="col-sm-6">
<p>antiques</p>
<img src="https://content.codecademy.com/projects/make-a-website/lesson-4/antique.jpg"/>
</figure>
</div>
</section>
<footer class="container">
<div class="row">
<p class="col-sm-4">© 2016 Skillfair</p>
<ul class="col-sm-8">
<li class="col-sm-1"><img src="https://content.codecademy.com/projects/make-a-website/lesson-4/twitter.svg"></li>
<li class="col-sm-1"><img src="https://content.codecademy.com/projects/make-a-website/lesson-4/facebook.svg"></li>
<li class="col-sm-1"><img src="https://content.codecademy.com/projects/make-a-website/lesson-4/instagram.svg"></li>
<li class="col-sm-1"><img src="https://content.codecademy.com/projects/make-a-website/lesson-4/medium.svg"></li>
</ul>
</div>
</footer>
</body>
</html>
body {
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
header {
padding: 20px 0;
}
header .row,
footer .row {
display: flex;
align-items: center;
}
header h1 {
font-weight: 700;
margin: 0;
}
header nav {
display: flex;
justify-content: flex-end;
}
header p {
padding: 0 20px;
margin: 0;
}
.jumbotron {
display: flex;
align-items: center;
background-image: url('https://content.codecademy.com/projects/make-a-website/lesson-4/jumbotron.jpg');
background-size: cover;
color: #ffffff;
height: 500px;
text-shadow: 0.25px 0.25px 0.25px #000000;
}
.jumbotron h2 {
font-size: 60px;
font-weight: 700;
margin: 0;
color: #fff;
}
.jumbotron h3 {
margin: 0 0 20px;
color: #fff;
}
section .row img {
margin: 0 0 30px;
width: 100%;
}
.col-md-6 {
margin: 0 0 30px;
}
.btn.btn-primary {
border-radius: 2px;
border: 0px;
color: #fbd1d5;
text-shadow: none;
background-color: #ffffff;
}
.btn.btn-primary:hover {
color: #ffffff;
background-color: #fbd1d5;
}
.btn-secondary {
background-color: #E8DFE0;
color: #ffffff;
margin: 0 0 30px;
}
footer {
font-size: 12px;
padding: 20px 0;
}
footer .col-sm-8 {
display: flex;
justify-content: flex-end;
}
footer ul {
list-style: none;
}
footer li img {
width: 32px;
height: 32px;
}
