-
-
Save codecademydev/4d7ddf7429bfa5e38b1c to your computer and use it in GitHub Desktop.
Codecademy export
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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><span>Innovation Cloud</span></h1> | |
<p><span>Connect your ideas globaly</span></p> | |
<a class="btn" href="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/index.html#">Learn more</a> | |
</div> | |
</div> | |
<div class="nav"> | |
<div class="container"> | |
<ul> | |
<li class="btnnav">Register</li> | |
<li class="btnnav">Scheldule</li> | |
<li class="btnnav">Sponsors</li> | |
<li class="btnnav">About</li> | |
<li class="btnnav">Contact</li> | |
</ul> | |
</div> | |
</div> | |
<div class="main"> | |
<div class="container"> | |
<img src="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg" width="200px" height="200px"/> | |
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
background: url(https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg) no-repeat center center fixed; | |
background-size: cover; | |
} | |
.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{ | |
background-color: black; | |
color:white; | |
text-decoration: none; | |
font-family: "Roboto", serif; | |
} | |
.header .btn{ | |
padding: 20px 60px; | |
} | |
.btn:hover { | |
background: #117bff; | |
cursor: pointer; | |
transition: background .5s; | |
} | |
.btnnav:hover{ | |
background: #117bff; | |
cursor: pointer; | |
transition: background .5s; | |
} | |
/* Nav */ | |
.nav{ | |
background-color: black; | |
} | |
.nav ul { | |
list-style: none; | |
margin: 0 auto; | |
padding: 30px 0; | |
text-align: left; | |
} | |
.nav li{ | |
display:inline; | |
margin-right: 5px; | |
margin-left:5px; | |
color: white; | |
padding-top:30px; | |
padding-bottom: 30px; | |
padding-right:10px; | |
padding-left:10px; | |
} | |
/* Main */ | |
.main .container { | |
margin: 80px auto; | |
} | |
/* 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%; | |
float:right; | |
} | |
} | |
span{ | |
color: white; | |
text-transform: uppercase; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment