1.In the
header, add five items for:- Adoptly
- About
- Animals
- Blog
- Events
<ul>
<li class="main">Adoptly</li>
<li>About</li>
<li>Animals</li>
<li>Blog</li>
<li>Events</li>
</ul>
/* Header */
.header {
background-color:#30627E;
}
.header ul {
list-style: none;
text-align: center;
margin: 0;
padding: 0;
}
.header li {
color: #fff;
display: inline-block;
font-size: 20px;
text-align: center;
padding: 20px 30px;
margin: 0;
}
.header .main {
font-size: 28px;
background-color: #e52364;
}
2.In the
jumbotron, add text for the heading and change the background image. Here's the image we used.
<h1>Meet your new best friend.</h1>
/* Jumbotron */
.jumbotron {
background: url(https://s3.amazonaws.com/codecademy-content/projects/adoptly/bg.jpg) no-repeat center center;
background-size: cover;
height: 500px;
text-align: center;
margin-bottom: 0;
}
.jumbotron h1 {
color: #e52364;
font-weight: 700;
}
.jumbotron {
background: url(https://s3.amazonaws.com/codecademy-content/projects/adoptly/bg.jpg) no-repeat center center;
background-size: cover;
height: 500px;
text-align: center;
margin-bottom: 0;
}
.jumbotron h1 {
color: #e52364;
font-weight: 700;
}
3.In the
supporting
section, use Bootstrap's grid to add columns for each piece of content.
Each piece of content is made up of a heading, a paragraph, and a link
styled as a button.
<div class="row">
<div class="col-md-4">
<h2>Search</h2>
<p>Find a pet based on location, type, breed, age, and gender. We look through hundreds of shelters, agencies, and rescue sites. </p>
<a href="#" class="btn">Go</a>
</div>
<div class="col-md-4">
<h2>Learn</h2>
<p>Read articles on feeding, training, grooming, and more. Our resources ensure that you are fully prepared as a new pet owner.</p>
<a href="#" class="btn">Go</a>
</div>
<div class="col-md-4">
<h2>Help</h2>
<p>Get involved to help pets in need. You can make a difference through volunteering, social media, and donations.</p>
<a href="#" class="btn">Go</a>
</div>
</div>
<div class="col-md-4">
<h2>Search</h2>
<p>Find a pet based on location, type, breed, age, and gender. We look through hundreds of shelters, agencies, and rescue sites. </p>
<a href="#" class="btn">Go</a>
</div>
<div class="col-md-4">
<h2>Learn</h2>
<p>Read articles on feeding, training, grooming, and more. Our resources ensure that you are fully prepared as a new pet owner.</p>
<a href="#" class="btn">Go</a>
</div>
<div class="col-md-4">
<h2>Help</h2>
<p>Get involved to help pets in need. You can make a difference through volunteering, social media, and donations.</p>
<a href="#" class="btn">Go</a>
</div>
</div>
.supporting {
text-align: center;
padding: 60px 30px 80px;
}
.supporting h2 {
color:#333;
font-size: 30px;
margin-top: 0;
}
.supporting p {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
min-height: 80px;
}
.btn {
font-size:16px;
border-radius:0px;
margin: 20px auto 60px;
padding: 10px 20px;
color: #30627E;
width: 200px;
border: 1px solid #30627E;
text-transform: uppercase;
}
4.In the
footer,
use Bootstrap's grid to add columns for each piece of content. There is
one piece of content for the copyright, and another piece of content
for the menu. Color the background #e52364.
/* Footer */
.footer {
color:#fff;
background-color: #e52364;
padding: 20px;
}
.copy {
padding-top: 10px;
}
.nav li a {
color: #fff;
}
.footer {
color:#fff;
background-color: #e52364;
padding: 20px;
}
.copy {
padding-top: 10px;
}
.nav li a {
color: #fff;
}
<div class="row">
<div class="col-md-2">
<div class="copy">©
Adoptly
</div>
</div>
<div class="col-md-10">
<ul class="nav nav-pills pull-right">
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div class="col-md-2">
<div class="copy">©
Adoptly
</div>
</div>
<div class="col-md-10">
<ul class="nav nav-pills pull-right">
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
