Make a Website: CSS Styling-Jumbotron: Heading 4/10
.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');
color:#fff;
font-size:48px;
font-weight:bold;
}<!DOCTYPE html>
<html>
<head>
<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>
Jumbotron: Heading
Great job! The large feature section now has a background image, and the web page is starting to come together.
However this dark background image makes the heading and paragraph text difficult to see. Let's fix that with CSS, starting with theh1 element.
In index.html, the
<div class="jumbotron">..</div> groups elements that are part of the large feature section of the web page. Inside<div class="jumbotron">..</div> is the h1element we want to style.
Therefore, we can select all h1 elements inside
<div class="jumbotron">..</div> in CSS like this:.jumbotron h1 {
...
}
Instructions
- Make a new CSS rule that selects the h1element nested inside
<divclass="jumbotron">..</div>. Check out the example above. - Set the
colorto#fff - Set the
font-sizeto48px - Set the
font-weighttobold
Comments
Post a Comment