Skip to content

Instantly share code, notes, and snippets.

@SonyaMoisset

SonyaMoisset/Adoptly | Codecademy | My solution.markdown

Created September 1, 2015 12:46
Show Gist options
  • Save SonyaMoisset/ca32d8fbf22be52e54c7 to your computer and use it in GitHub Desktop.
Save SonyaMoisset/ca32d8fbf22be52e54c7 to your computer and use it in GitHub Desktop.
Download ZIP
Adoptly | Codecademy | My solution
Raw
index.html
<html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="container">
<ul>
<li class="main">Adoptly</li>
<li>About</li>
<li>Animals</li>
<li>Blog</li>
<li>Events</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Meet your new best friend.</h1>
</div>
</div>
<div class="supporting">
<div class="container">
<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>
</div>
<div class="footer">
<div class="container">
<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>
</div>
</body>
</html>
Raw
style.css
html,
body {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0;
}
@media (max-width: 500px) {
ul li {
width: 100%;
}
}
/* Header */
.header {
background-color: #30627E;
}
.header ul {
list-style: none;
text-align: center;
margin: 0;
padding: 0;
}
.header .main {
font-size: 28px;
background-color: #e52364;
}
.header li {
color: #fff;
display: inline-block;
font-size: 20px;
text-align: center;
padding: 20px 30px;
margin: 0;
}
/* 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;
}
/* Supporting */
.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;
}
/* Footer */
.footer {
color: #fff;
background-color: #e52364;
padding: 20px;
}
.copy {
padding-top: 10px;
}
.nav li a {
color: #fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment