A Pen by Sonya Moisset on CodePen.
Created
August 17, 2015 04:21
-
-
Save SonyaMoisset/6eeb48f5f837a3856239 to your computer and use it in GitHub Desktop.
Broadway | Codecademy | My solution
This file contains hidden or 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=Raleway:400, 600' rel='stylesheet' type='text/css'> | |
| <link rel='stylesheet' href='style.css'/> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <div class="container"> | |
| <ul class="nav"> | |
| <li>About</li> | |
| <li>Work</li> | |
| <li>Team</li> | |
| <li>Contact</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="jumbotron"> | |
| <div class="container"> | |
| <div class="main"> | |
| <h1>We are Broadway</h1> | |
| <a href="#" class="btn-main">Get Started</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="supporting"> | |
| <div class="container"> | |
| <div class="col"> | |
| <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/design.svg"> | |
| <h2>Design</h2> | |
| <p>Make your projects look great and interact beautifully.</p> | |
| <a href="#" class="btn-default">Learn more</a> | |
| </div> | |
| <div class="col"> | |
| <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/develop.svg"> | |
| <h2>Develop</h2> | |
| <p>Use modern tools to turn your design into a web site</p> | |
| <a href="#" class="btn-default">Learn more</a> | |
| </div> | |
| <div class="col"> | |
| <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/deploy.svg"> | |
| <h2>Deploy</h2> | |
| <p>Use modern tools to turn your design into a web site</p> | |
| <a href="#" class="btn-default">Learn more</a> | |
| </div> | |
| </div> | |
| <div class="clearfix"></div> | |
| </div> | |
| <div class="footer"> | |
| <div class="container"> | |
| <p>© Broadway 2015</p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or 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; | |
| } | |
| .container { | |
| max-width: 940px; | |
| margin: 0 auto; | |
| padding: 0 10px; | |
| } | |
| .header { | |
| background-color: #333333; | |
| } | |
| .jumbotron { | |
| background-image: url('http://s3.amazonaws.com/codecademy-content/projects/broadway/bg.jpg'); | |
| background-size: cover; | |
| background-position: center center; | |
| background-repeat: no-repeat; | |
| height: 800px; | |
| } | |
| .nav { | |
| margin: 0; | |
| padding: 20px 0; | |
| } | |
| .nav li { | |
| display: inline; | |
| color: #fff; | |
| font-family: 'Raleway', sans-serif; | |
| font-weight: 600; | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| margin-right: 25px; | |
| } | |
| .main { | |
| position: relative; | |
| top: 180px; | |
| text-align: center; | |
| } | |
| .main h1 { | |
| color: #333; | |
| font-family: 'Raleway', sans-serif; | |
| font-weight: 600; | |
| font-size: 70px; | |
| margin-top: 0; | |
| margin-bottom: 80px; | |
| text-transform: uppercase; | |
| } | |
| .btn-main { | |
| background-color: #333; | |
| color: #fff; | |
| font-family: 'Raleway', sans-serif; | |
| font-weight: 600; | |
| font-size: 18px; | |
| letter-spacing: 1.3px; | |
| padding: 16px 40px; | |
| text-decoration: none; | |
| text-transform: uppercase; | |
| } | |
| .supporting { | |
| padding-top: 80px; | |
| padding-bottom: 100px; | |
| } | |
| .supporting .col { | |
| float: left; | |
| width: 33%; | |
| font-family: 'Raleway', sans-serif; | |
| text-align: center; | |
| } | |
| .supporting img { | |
| height: 32px; | |
| } | |
| .supporting h2 { | |
| font-weight: 600; | |
| font-size: 23px; | |
| text-transform: uppercase; | |
| } | |
| .supporting p { | |
| font-weight: 400; | |
| font-size: 14px; | |
| line-height: 20px; | |
| padding: 0 50px; | |
| margin-bottom: 40px; | |
| } | |
| .btn-default { | |
| border: 1px solid #333333; | |
| color: #333; | |
| font-family: 'Raleway', sans-serif; | |
| font-weight: 600; | |
| font-size: 10px; | |
| letter-spacing: 1.3px; | |
| text-decoration: none; | |
| text-transform: uppercase; | |
| display: inline-block; | |
| margin-bottom: 20px; | |
| padding: 15px 50px; | |
| } | |
| .clearfix { | |
| clear: both; | |
| } | |
| .footer { | |
| background-color: #333; | |
| color: #fff; | |
| padding: 30px 0; | |
| } | |
| .footer p { | |
| font-family: 'Raleway', sans-serif; | |
| text-transform: uppercase; | |
| font-size: 11px; | |
| } | |
| @media (max-width: 500px) { | |
| .main h1 { | |
| font-size: 50px; | |
| padding: 0 40px; | |
| } | |
| .supporting .col { | |
| width: 100%; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Nice job! The text-decoration property saved me.