-
-
Save codecademydev/0078c252b7d2df2cc2ac2858909c66bd 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 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> | |
| <div class="header"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-9"> | |
| <ul class="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 class="col-md-4"> | |
| <h2> Headlines</h2> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="jumbotron"> | |
| <div class="container"> | |
| <p>We <span style="color:#ffc200">collect and curate </span> | |
| articles, opinions, and images | |
| from around the world.</p> | |
| </div> | |
| </div> | |
| <div class="banner"> | |
| <div class="container"> | |
| <h2>The Bottom Line.</h2> | |
| <p>We deliver the news that is relevant to you.</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"></div> | |
| <div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p2.jpg"></div> | |
| <div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p3.jpg"></div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p6.jpg"></div> | |
| <div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p5.jpg"></div> | |
| <div class="col-md-4"> <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p7.jpg"></div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-4"> <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p8.jpg"></div> | |
| <div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p9.jpg"></div> | |
| <div class="col-md-4"> <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p10.jpg"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="pull-left col-md-4"> | |
| <address> | |
| <strong>Headlines.</strong><br> | |
| 1000 7th Avenue<br> | |
| New York, NY<br> | |
| <abbr title="Phone">P:</abbr> (484) 192 - 8372 | |
| </address> | |
| <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> | |
| </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: 980px; | |
| margin: 0 auto; | |
| } | |
| .jumbotron { | |
| background-color: transparent; | |
| padding:150px; | |
| } | |
| .jumbotron .container p{ | |
| font-size:220%; | |
| } | |
| .pull-right{ | |
| display:inline; | |
| list-style:none; | |
| } | |
| .banner{ | |
| background-color:#333; | |
| text-align:center; | |
| } | |
| .banner .container h2 { | |
| color:white; | |
| } | |
| .banner .container p { | |
| color:white; | |
| } | |
| .cards{ | |
| text-align:center; | |
| background-color:#ffbf00; | |
| height:1000px; | |
| size:cover; | |
| border:1px red solid; | |
| } | |
| img{ | |
| padding:13px 0px 13px 0px; | |
| } | |
| ul{ | |
| width:400px; | |
| top:100px; | |
| } | |
| li{ | |
| display:inline; | |
| font-size:90%; | |
| float:right; | |
| border-bottom:1px solid #b3b3b3; | |
| padding:10px; | |
| } | |
| li a{ | |
| color:black; | |
| } | |
| .pull-right li:hover{ | |
| background-color:#b3b3b3; | |
| } | |
| a:hover{ | |
| text-decoration:none; | |
| color:black; | |
| } | |
| .col-md-1 { | |
| background-color:black; | |
| color:white; | |
| } | |
| .col-md-1 { | |
| background-color:black; | |
| } | |
| .addim { | |
| height:40px; | |
| width:40px; | |
| } | |
| .col-md-3 li{ | |
| } | |
| .footer{ | |
| background-color:black; | |
| color:white; | |
| } | |
| .footer img{ | |
| height:50px; | |
| width:50px; | |
| } | |
| .footer a{ | |
| padding:5px; | |
| position:relative; | |
| bottom:20px; | |
| } | |
| .footer a:hover{ | |
| text-decoration:underline; | |
| } | |
| @media (max-width: 992px) { | |
| .col-md-4 { | |
| margin: 0 auto 0; | |
| text-align: center; | |
| width: 100%; | |
| } | |
| .cards{ | |
| height:2700px; } | |
| .cards img { | |
| width: 60%; | |
| } | |
| } | |
| @media (max-width: 500px) { | |
| .header h1 { | |
| text-align: center; | |
| } | |
| .nav li { | |
| text-align: center; | |
| width: 100%; | |
| } | |
| .cards img { | |
| width: 100%; | |
| } | |
| .pull-left{ | |
| float:left; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment