A Pen by Sonya Moisset on CodePen.
Created
August 17, 2015 05:15
-
-
Save SonyaMoisset/8618c921020c10b0ec01 to your computer and use it in GitHub Desktop.
Innovation Cloud | Codecademy | My solution
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> | |
| <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 href="#" class="btn">Learn more</a> | |
| </div> | |
| </div> | |
| <div class="nav"> | |
| <div class="container"> | |
| <ul> | |
| <li>Register</li> | |
| <li>Schedule</li> | |
| <li>Sponsors</li> | |
| <li>About</li> | |
| <li>Contact</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="main"> | |
| <div class="container"> | |
| <img src="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg" height="128" width="196"> | |
| <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> | |
| <div class="jumbotron"> | |
| <div class="container"> | |
| <h2>Stay connected</h2> | |
| <p>Receive weekly insights from industry insiders.</p> | |
| <a href="#" class="btn">Join</a> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <div class="container"> | |
| <p>© Innovation Cloud Conference</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 { | |
| background-image: url('https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg'); | |
| background-repeat: no-repeat; | |
| background-position: center center; | |
| background-size: cover; | |
| height: 800px; | |
| text-align: center; | |
| } | |
| .header .container { | |
| position: relative; | |
| top: 200px; | |
| } | |
| .header h1 { | |
| color: #fff; | |
| font-size: 80px; | |
| line-height: 100px; | |
| margin-top: 0; | |
| margin-bottom: 80px; | |
| text-transform: uppercase; | |
| } | |
| @media (min-width:850px) { | |
| .header h1 { | |
| font-size: 120px; | |
| } | |
| } | |
| .header p { | |
| color: #fff; | |
| font-weight: 500; | |
| letter-spacing: 8px; | |
| margin-bottom: 40px; | |
| margin-top: 0; | |
| text-transform: uppercase; | |
| } | |
| .btn { | |
| color: #fff; | |
| background: #000; | |
| padding: 10px 40px; | |
| text-decoration: none; | |
| } | |
| .btn:hover { | |
| background: #117bff; | |
| cursor: pointer; | |
| transition: background .5s; | |
| } | |
| /* Nav */ | |
| .nav { | |
| background: #000; | |
| height: 80px; | |
| width: 100%; | |
| } | |
| .nav ul { | |
| list-style: none; | |
| margin: 0 auto; | |
| padding: 0; | |
| text-align: center; | |
| } | |
| .nav ul li { | |
| color: #fff; | |
| display: inline-block; | |
| height: 80px; | |
| line-height: 80px; | |
| list-style: none; | |
| padding: 0 10px; | |
| } | |
| .nav ul li:hover { | |
| background: #117bff; | |
| cursor: pointer; | |
| transition: background .5s; | |
| } | |
| /* Main */ | |
| .main .container { | |
| margin: 80px auto; | |
| } | |
| .main img { | |
| float: left; | |
| margin: 50px 80px 50px 0; | |
| } | |
| /* Jumbotron */ | |
| .jumbotron { | |
| color: #fff; | |
| background-image: url('https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/jumbotron_bg.jpg'); | |
| background-position: center center; | |
| background-size: cover; | |
| height: 600px; | |
| text-align: right; | |
| } | |
| .jumbotron .container { | |
| position: relative; | |
| top: 220px; | |
| } | |
| /* Footer */ | |
| .footer { | |
| background: #000; | |
| } | |
| .footer p { | |
| color: #fff; | |
| height: 80px; | |
| font-size: 14px; | |
| line-height: 80px; | |
| margin: 0; | |
| } | |
| /* 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