Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created May 26, 2017 12:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save codecademydev/21f5865f44901d76434badd05d1a1b7c to your computer and use it in GitHub Desktop.
Save codecademydev/21f5865f44901d76434badd05d1a1b7c to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
index.html
<!DOCTYPE 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="jumbotron">
<div class="container">
<div class="header">
<div class="row">
<div class="col-md-3"><img class="logo" src="https://s3.amazonaws.com/codecademy-content/projects/bass/logo.svg" width="105px"/></div>
<div class="col-md-9">
<ul class="pull-right">
<li><a href="#">Features</a></li>
<li><a href="#" class="btn btn-default">Download</a></li>
</ul>
</div>
</div>
</div>
<div class="main">
<div class="row">
<div class="col-md-7">
<h1>Turn Up the Bass</h1>
<p>From the newest releases to classic albums, we have the best music for you to enjoy.</p>
</div>
</div>
</div>
</div>
</div>
<div class="supporting-1">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="https://s3.amazonaws.com/codecademy-content/projects/bass/you.svg" width="450px" height="300px"/>
</div>
<div class="col-md-6">
<h2>Music Just for You</h2>
<p>Listen to your favorite artists and albums, and make playlists of your favorite songs. Get recommendations based on your tastes to discover new music.</p>
</div>
</div>
</div>
</div>
<div class="supporting-2">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Listen Everywhere</h2>
<p>Take your music with you everywhere you go. Listen for free for free on any device - mobile, tablet, and your computer. </p>
</div>
<div class="col-md-6">
<img src="https://s3.amazonaws.com/codecademy-content/projects/bass/everywhere.svg" width="450px" height="300px"/>
</div>
</div>
</div>
</div>
<div class="supporting-3">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="https://s3.amazonaws.com/codecademy-content/projects/bass/connect.svg" width="450px" height="300px"/>
</div>
<div class="col-md-6">
<h2>Connect with Others</h2>
<p>Find the right songs for the right occassions. Let your friends know what you're listening to, and connect with others who share the music you love.
</p>
</div>
</div>
</div>
</div>
<div class="supporting-4">
<div class="container">
<h2>Try it now</h2>
<img src="https://s3.amazonaws.com/codecademy-content/projects/bass/app-store.png"/>
<img src="https://s3.amazonaws.com/codecademy-content/projects/bass/google-play.png"/>
</div>
</div>
<div class="footer">
<div class="container">
<div class="col-md-2">
<h3>BASS</h3>
<ul>
<li><a href="#">Install</a></li>
<li><a href="#">Mobile</a></li>
</ul>
</div>
<div class="col-md-2">
<h3>ABOUT</h3>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Jobs</a></li>
</ul>
</div>
<div class="col-md-2">
<h3>SUPPORT</h3>
<ul>
<li><a href="#">Help Center</a></li>
<li><a href="#">Get Started</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="col-md-2">
<h3>COMMUNITY</h3>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Google+</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Raw
style.css
html, body {
margin: 0;
padding: 0;
background-color: #161718;
color: #fff;
}
.jumbotron {
color: #fff;
background: url(https://s3.amazonaws.com/codecademy-content/projects/bass/bg.jpg) no-repeat center center;
background-size: cover;
height: 560px;
background-color: transparent;
}
.container {
width: 1000px;
}
/*
.jumbotron ul {
display: inline;
list-style: none;
margin-top: 35px;
}*/
.header li {
display: inline-block;
/*padding-right: 20px;*/
margin-left: 13px;
margin-top: 40px;
}
.header a {
padding: 15px;
font-weight: bold;
color: #fff;
}
/*
.jumbotron a:link {
color: #fff;
}*/
.header .btn {
background-color: #FF003D;
padding: 8px 30px;
color: #fff;
border-radius: 0;
border: 0;
}
.header .btn:hover {
color: #161718;
}
/*
.jumbotron .header {
margin-bottom: 60px;
}
*/
.main h1 {
padding-top: 60px;
}
.supporting-1 {
padding: 70px 30px;
}
.supporting-2 {
padding: 70px 30px;
}
.supporting-3 {
padding: 70px 30px;
}
.supporting-4 {
padding: 70px 30px;
}
/*
.supporting-1 {
height: 470px;
background-color: #161718;
color: #fff;
margin-top: -30px;
text-align: left;
}
*/
.supporting-2 {
/*height: 440px;
color: #fff;*/
background-color: #000;
}
.supporting-3 {
/*height: 440px;
color: #fff;*/
background-color: #161718;
}
.supporting-4 {
background: url(https://s3.amazonaws.com/codecademy-content/projects/bass/feature.jpg) no-repeat center center;
background-size: cover;
height: 400px;
text-align: center;
color: #fff;
/*
padding-top: 140px;*/
}
.supporting-4 h2 {
margin-top: 80px;
}
.supporting img {
display: inline;
}
/*.footer {
background-color: #000;
color: #fff;
height: 230px;
padding-top: 50px;
}*/
.footer {
background-color: #000;
color: #fff;
padding: 50px 0 35px 0;
}
.footer h3 {
text-transform: uppercase;
font-size: 15px;
}
/*
.footer .col-md-2 {
text-align: left;
}*/
.footer ul {
list-style: none;
padding: 0;
}
/*
.footer li {
color: #94AAAA;
}*/
.footer a {
color: #aaa;
font-size: 13px;
display: inline-block;
padding: 5px 0;
}
/*
.img-responsive {
max-width: 100%;
height: auto;
display: block''
}*/
/*
@media (max-width: 992px) {
.col-md-6 img {
width: 100%; }
}*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment