Skip to content

Instantly share code, notes, and snippets.

@codecademydev
Created May 15, 2017 07:07
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/57465099fdb784c445911e1af4f49400 to your computer and use it in GitHub Desktop.
Save codecademydev/57465099fdb784c445911e1af4f49400 to your computer and use it in GitHub Desktop.
Codecademy export
<!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="main">
<div class="container">
<h1> Move </h1>
<p> Tips to take your fitness to the next level</p>
<a class="btn" href="#"> Start Now </a>
</div>
</div>
<div class="supporting">
<div class="container">
<div class="col">
<h2> Move </h2>
<p>Become more active by tracking your runs, rides, and walks.</p>
</div>
<div class="col">
<h2> Sync </h2>
<p>Set personal challenges and see how you rank against your friends</p>
</div>
<div class="col">
<h2> Compete </h2>
<p>Access your activity on your phone, tablet, or computer</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="feature">
<div class="container">
<h2>Move. Rest. Recover. Move.</h2>
</div>
</div>
<div class="supporting" >
<div class="container">
<h2>Go Premium</h2>
<p> Tips to take your fitness to the next level</p>
<a class="btn" href="#"> Learn More </a>
</div>
</div>
<div class="footer">
<div class="container">
<h2> Let's Move </h2>
<a class="btn" href="#"> Start Now </a>
</div>
</div>
</body>
</html>
*{
border:1px solid black;
}
html, body {
margin: 0;
}
h1, h2, a {
font-family: 'Oswald', sans-serif;
}
p {
font-family: Helvetica, Arial, sans-serif;
text-align: center;
font-weight: bold;
}
.btn{
margin-right: -100px;
}
.container {
width: 940px;
margin: 0 auto;
}
/* Main */
.main {
height: 600px;
background-image: url("https://s3.amazonaws.com/codecademy-content/projects/move/bg.jpg");
background-repeat:no-repeat;
background-size:2400px 700px;
text-align:center;
}
.main .btn{
background-color: #1c1c1c;
color: #fff;
font-size: 18px;
padding: 8px 30px;
text-decoration: none;
display: inline-block;
}
.main h1 {
font:3px Impact;
color: white;
text-align: center;
margin:0;
}
.main p {
font-size: 100%;
color: white;
}
.main a {
margin-right: -50px;
}
.main .container {
position: relative;
top: 100px;
}
/* Supporting */
.supporting {
text-align: center;
padding: 50px 0 80px;
background-color: #1c1c1c;
}
.supporting .col {
float: left;
width: 28%;
padding: 10px;
}
.supporting h1,
.supporting h2 {
color: #ffa800;
font-size: 20px;
margin-bottom: 10px;
}
.clearfix {
clear: both;
}
.supporting p {
color: #efefef;
margin-bottom: 20px;
line-height: 20px;
font-size: 12px;
}
.supporting .btn {
background-color: #eee;
color: #1c1c1c;
font-size: 18px;
padding: 8px 30px;
text-decoration: none;
display: inline-block;
text-align:center;
margin-left:10px;
}
.supporting .container .btn{
text-align:center;
}
/* Feature */
.feature {
height: 600px;
background-image: url("https://s3.amazonaws.com/codecademy-content/projects/move/feature.jpg");
background-repeat: y-repeat;
text-align:center;
}
.feature h1,
.feature h2 {
color: #fff;
font-size: 40px;
margin: 0;
padding:50px 0 0;
}
.feature h3{
color: white;
margin-top:20px;
}
/* Footer */
.footer {
height: 600px;
text-align:center;
margin-top:320px;
color: black;
background-size:cover;
background: url( "background: url(https://s3.amazonaws.com/codecademy-content/projects/move/footer.jpg") no-rpeat center center;
}
.footer h1,
.footer h2 {
color: #fff;
font-size: 40px;
margin: 0 0 20px 0;
padding:50px 0 0;
}
.footer p {
color: #fff;
margin: 0 0 20px 0;
font-size: 18px;
}
@media (min-width:600px) {
.main h1 {
font-size: 200px;
}
.supporting .col {
width: 30%;
}
.supporting h2 {
font-size: 40px;
}
.supporting p {
font-size: 14px;
}
.supporting .container .col h2{
display:inline;
}
.feature h2 {
font-size: 60px;
}
.col h2{
display: inline-block;
}
.feature .supporting{
background:none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment