Skip to content

Instantly share code, notes, and snippets.

@SonyaMoisset

SonyaMoisset/Armando Pérez | Codecademy | My solution.markdown

Created September 8, 2015 12:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save SonyaMoisset/cb58e2c0d7a5a7a5aa76 to your computer and use it in GitHub Desktop.
Save SonyaMoisset/cb58e2c0d7a5a7a5aa76 to your computer and use it in GitHub Desktop.
Download ZIP
Armando Pérez | Codecademy | My solution
Raw
index.html
<html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
<link rel='stylesheet' href='style.css' />
</head>
<body>
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-4">
<h1>Armando Pérez</h1>
</div>
<div class="pull-right">
<ul class="nav nav-pills">
<li class="active"><a href="#">All</a></li>
<li><a href="#">Consumer</a></li>
<li><a href="#">Mobile</a></li>
<li><a href="#">Commerce</a></li>
<li><a href="#">Enterprise</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="main">
<div class="container">
<div class="row">
<div class="col-md-4">
<a class="thumbnail" href="#">
<img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p1.jpg">
</a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#">
<img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p2.jpg">
</a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#">
<img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p3.jpg">
</a>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a class="thumbnail" href="#">
<img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p4.jpg">
</a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#">
<img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p5.jpg">
</a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#">
<img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p6.jpg">
</a>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a class="thumbnail" href="#">
<img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p7.jpg">
</a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#">
<img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p8.jpg">
</a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#">
<img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p9.jpg">
</a>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-4">
<ul>
<li>email</li>
<li>linkedin</li>
<li>twitter</li>
<li>blog</li>
</ul>
</div>
<div class="pull-right">
<p>© 2014</p>
</div>
</div>
</div>
</body>
</html>
Raw
style.css
html,
body {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
body {
background: url("https://s3.amazonaws.com/codecademy-content/projects/armando-perez/brand.jpg") no-repeat fixed;
background-size: 100%;
}
.header,
.footer {
padding: 30px 0;
color: #444;
}
.header ul,
.footer ul {
padding: 0 20px;
margin: 0;
list-style: none;
}
/* Header */
.header h1 {
color: #fff;
margin: 0 0 30px;
font-size: 30px;
text-transform: uppercase;
}
.header li {
display: inline;
width: 100px;
text-align: center;
margin: 6px;
}
.header li.active a {
background-color: #f01251;
}
.header li a {
color: #f01251;
}
/* Main */
.main {
margin-bottom: 30px;
}
.thumbnail {
padding: 0;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
border-radius: 0px;
border: 0px;
}
.thumbnail img {
width: 100%;
display: block;
}
/* Footer */
.footer li {
display: inline;
margin-right: 40px;
}
.footer p {
margin: 0 30px 0 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment