A Pen by Sonya Moisset on CodePen.
Created
September 3, 2015 14:18
-
-
Save SonyaMoisset/0b8d46226c7e015ba244 to your computer and use it in GitHub Desktop.
Headlines | 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 rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css"> | |
| <link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-3"> | |
| <h1>Headlines.</h1> | |
| </div> | |
| <div class="col-md-9"> | |
| <ul class="nav nav-tabs pull-right"> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Our Services</a></li> | |
| <li><a href="#">Our Team</a></li> | |
| <li><a href="#">Contact Us</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="jumbotron"> | |
| <div class="container"> | |
| <h2>We <span>collect and curate</span><br> | |
| articles, opinions, and images<br> | |
| from around the world.</h2> | |
| </div> | |
| </div> | |
| <div class="banner"> | |
| <div class="container"> | |
| <h1>The Bottom Line.</h1> | |
| <p> We deliver the news that is relevant to you.</p> | |
| <p> </p> | |
| </div> | |
| </div> | |
| <div class="cards"> | |
| <div class="container"> | |
| <h2>Our Expertise.</h2> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p1.jpg"> | |
| <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p2.jpg"> | |
| <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p3.jpg"> | |
| </div> | |
| <div class="col-md-4"> | |
| <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p6.jpg"> | |
| <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p5.jpg"> | |
| <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p4.jpg"> | |
| </div> | |
| <div class="col-md-4"> | |
| <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p7.jpg"> | |
| <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p8.jpg"> | |
| <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p9.jpg"> | |
| <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p10.jpg"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="align-leftt col-md-4"> | |
| <h3>Headlines.</h3> | |
| <p>1000 7th Avenue</p> | |
| <p>New York, NY</p> | |
| <p>(484) 192 - 8372</p> | |
| <a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/email.svg"></a> | |
| <a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/fb.svg"></a> | |
| <a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/twitter.svg"></a> | |
| </div> | |
| </div> | |
| </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; | |
| font-family: 'Libre Baskerville', sans-serif; | |
| } | |
| .container { | |
| max-width: 940px; | |
| margin: 0 auto; | |
| } | |
| .jumbotron { | |
| background-color: #fff; | |
| } | |
| @media (max-width: 992px) { | |
| .col-md-4 { | |
| margin: 0 auto 0; | |
| text-align: center; | |
| width: 100%; | |
| } | |
| .cards img { | |
| width: 60%; | |
| } | |
| } | |
| @media (max-width: 500px) { | |
| .header h1 { | |
| text-align: center; | |
| } | |
| .nav li { | |
| text-align: center; | |
| width: 100%; | |
| } | |
| .cards img { | |
| width: 100%; | |
| } | |
| } | |
| /* Header */ | |
| .header { | |
| padding: 30px 0 80px; | |
| } | |
| .header h1 { | |
| font-size: 20px; | |
| } | |
| .nav li a { | |
| color: #333; | |
| margin: 0; | |
| border: 0px; | |
| } | |
| /* Jumbotron */ | |
| .jumbotron h2 { | |
| font-size: 50px; | |
| margin-bottom: 120px; | |
| } | |
| .jumbotron h2 span { | |
| color: #ffc200; | |
| } | |
| /* Banner */ | |
| .banner { | |
| background-color: #333; | |
| color: #fff; | |
| padding: 20px; | |
| text-align: center; | |
| } | |
| /* Cards */ | |
| .cards { | |
| background: #ffc200; | |
| padding: 80px 0; | |
| } | |
| .cards h2 { | |
| margin: 20px 0 60px 0; | |
| text-align: center; | |
| } | |
| .cards img { | |
| margin-bottom: 25px; | |
| } | |
| /* Footer */ | |
| .footer { | |
| padding: 60px 0; | |
| background-color: #000; | |
| color: #fff; | |
| } | |
| .footer h3 { | |
| font-size: 20px; | |
| } | |
| .footer p { | |
| font-size: 12px; | |
| margin-bottom: 0; | |
| } | |
| .footer img { | |
| width: 24px; | |
| margin-top: 10px; | |
| margin-right: 10px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment