-
-
Save codecademydev/10ae1405fb842d214c37a1527028b0da 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="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/p7.jpg"> | |
</div> | |
<div class="col-md-4"> | |
<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 class="footer"> | |
<div class="container"> | |
<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{ | |
} | |
@media (max-width: 992px) { | |
.col-md-4 { | |
margin: 0 auto 0; | |
text-align: center; | |
width: 100%; | |
} | |
.cards{ | |
height:2500px; } | |
.cards img { | |
width: 60%; | |
} | |
} | |
@media (max-width: 500px) { | |
.header h1 { | |
text-align: center; | |
} | |
.nav li { | |
text-align: center; | |
width: 100%; | |
} | |
.cards img { | |
width: 100%; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment