Instantly share code, notes, and snippets.

Embed
What would you like to do?
Codecademy export
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link href='https://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-4">
<h1>BestBite</h1>
</div>
<div class="col-md-4">
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active"><a href="#">About</a></li>
<li role="presentation"><a href="#">Sign Up</a></li>
<li role="presentation"><a href="#">Log In</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-3 .col-md-offset-3">
<h1 id="c1">Browse.</h1>
<h1 id="c2">Create.</h1>
<h1 id="c3">Share.</h1>
</div>
</div>
</div>
</div>
<div class="section banner">
<div class="container">
<h3>Always have the answer to "What's for dinner?"</h3>
</div>
</div>
<div class="section">
<div class="container">
<div class="page-header">
<h3>Newest Contributions</h3>
</div>
</div>
</div>
<div class="footer">
<div class="container">
</div>
</div>
</body>
</html>
html, body {
margin: 0;
padding: 0;
font-family: 'Arvo', serif;
font-size: 16px;
}
.container {
max-width: 940px;
margin: 0 auto;
}
/* Header */
.nav-pills li a {
color: #d8192f;
border: 1px solid #d8192f;
float:right;
}
.nav-pills li.active a,
.nav-pills li a:hover,
.section .btn:hover {
background-color:rgba(216,25,47,1);
box-shadow:0 2px 4px rgba(0,0,0,.5);
color:#fff;
}
/* Jumbotron */
.jumbotron {
height: 550px;
background:url("https://s3.amazonaws.com/codecademy-content/projects/bestbite/bg.jpg");
background-size:cover;
}
#c1 {
position:relative;
left:2.5em;
top:2.5em;
color:white;
}
#c2 {
position:relative;
left:2.9em;
top:2.5em;
color:white;
}
#c3 {
position:relative;
left:3.5em;
top:2.5em;
color:white;
}
/* Banner */
.banner, .supporting {
text-align: center;
padding-top: 40px;
}
.banner {
background-color:#36343f;
height:180px;
color: #fff;
}
/* Media Queries */
@media (max-width: 680px) {
.header h1 {
margin-bottom: 20px;
text-align: center;
}
}
.nav {
float: none;
margin: 0 auto;
}
.banner {
height: 220px;
}
.nav-pills li:first-child a {
margin-left: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment