Make a Website: CSS Styling-Congratulations! 10/10
Congratulations!
Congratulations! Using CSS, you transformed the appearance of your web page.
Currently the elements sit one on top of the other. It’s possible with CSS to change where elements sit on the page and create good looking page layouts. Let’s see how to do this next.
Instructions
Click Save & Submit Code to continue.
<!DOCTYPE html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="nav">
<div class="container">
<ul>
<li><a href="#">Airbnb logo</a></li>
<li><a href="#">Browse</a></li>
</ul>
<ul>
<li><a href="#">Sign Up</a></li>
<li><a href="#">Log In</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Find a place to stay.</h1>
<p>Rent from people in over 34,000 cities and 192 countries.</p>
</div>
</div>
<div class="learn-more">
<div>
<div>
<div>
<h3>Travel</h3>
<p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
<p><a href="#">See how to travel on Airbnb</a></p>
</div>
<div>
<h3>Host</h3>
<p>Renting out your unused space could pay your bills or fund your next vacation.</p>
<p><a href="#">Learn more about hosting</a></p>
</div>
<div>
<h3>Trust and Safety</h3>
<p>From Verified ID to our worldwide customer support team, we've got your back.</p>
<p><a href="#">Learn about trust at Airbnb</a></p>
</div>
</div>
</div>
</div>
</body>
</html>.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding-top: 14px;
padding-bottom: 14px;
padding-left: 10px;
padding-right: 10px;
text-transform: uppercase;
}
.jumbotron {
height: 500px;
background-image: url('https://goo.gl/04j7Nn');
}
.jumbotron h1 {
color: #fff;
font-family: 'Shift', sans-serif;
font-size: 48px;
font-weight: bold;
}
.jumbotron p {
color: #fff;
font-size: 20px;
}
.learn-more {
background-color: #f7f7f7;
}
.learnn-more h3 {
font-family: 'Shift', sans-serif ;
font-weight: bold ;
}
.learn-more a {
color: #00b0ff ;
}
Comments
Post a Comment