-
-
Save codecademydev/d9218a88e4f5680e43108751ef7e881e 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-3"> | |
<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-3"> | |
<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-3"> | |
<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-3"> | |
<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
*{ | |
border:1px solid black; | |
} | |
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; | |
} | |
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 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