Skip to content

Instantly share code, notes, and snippets.

@codecademydev
Created November 19, 2015 16:23
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/a6d425b2bfcb43844890 to your computer and use it in GitHub Desktop.
Save codecademydev/a6d425b2bfcb43844890 to your computer and use it in GitHub Desktop.
Codecademy export
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,100' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="header">
<div class="container">
<h1>Innovation cloud</h1>
<p>Connect your ideas globally</p>
<a class="btn" href="">Learn More</a>
</div>
</div>
<div class="nav">
<div class="container">
<ul>
<a href="">Register</a>
<a href="">Schedule</a>
<a href="">Sponsors</a>
<a href="">About</a>
<a href="">Contact</a>
</ul>
</div>
</div>
<div class="main">
<img class="cloud" src="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg" />
<div class="container">
<h2>The Innovation Cloud Conference</h2>
<p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p>
<p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p>
<p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>
</div>
</div>
</body>
</html>
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.container {
margin: 0 auto;
max-width: 940px;
padding: 0 10px;
}
/* Header */
.header {
height: 800px;
text-align: center;
color: white;
text-transform: uppercase;
background: url(https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg) no-repeat center center;
background-size: cover;
margin-bottom: 0px;
}
.header .container {
position: relative;
top: 200px;
}
.header h1 {
font-size: 80px;
line-height: 100px;
margin-top: 0;
margin-bottom: 80px;
}
@media (min-width:850px) {
.header h1 {
font-size: 120px;
}
}
.header p {
font-weight: 500;
letter-spacing: 8px;
margin-bottom: 40px;
margin-top: 0;
}
.btn {
text-decoration: none;
padding: 10px 40px 10px 40px;
background-color: #000000;
margin: auto;
color: white;
text-transform: none;
}
.btn:hover {
background: #117bff;
cursor: pointer;
transition: background .5s;
}
/* Nav */
.nav {
margin-top: 0px;
padding: 1px;
width: 100%;
background-color: black;
}
.nav a {
margin-top: 1px;
padding: 30px 5px;
display: inline-block;
background-color: black;
color: white;
text-decoration: none;
}
.nav a:hover {
background: #117bff;
cursor: pointer;
transition: background .5s;
}
/* Main */
.main {
margin: auto;
max-width: 940px;
}
.main .cloud {
float: left;
width: 33%;
margin: auto;
padding: 30px;
}
/* Jumbotron */
.jumbotron {
height: 600px;
text-align: right;
}
.jumbotron .container {
position: relative;
top: 220px;
}
/* Footer */
.footer {
font-size: 14px;
}
/* Media Queries */
@media (max-width: 500px) {
.header h1 {
font-size: 50px;
line-height: 64px;
}
.main, .jumbotron {
padding: 0 30px;
}
.main img {
width: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment