Make a Website: CSS Styling-Jumbotron: Fonts 6/10
Jumbotron: Fonts
Great! The text inside the large feature section stands out.
Let's make the h1 text stand out more by changing its font. Custom fonts can be loaded from CSS, like this:
<!DOCTYPE html>
<html>
<head>
<link href="font.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
</head>
...
</html>
Inside the head element are two linkelements. The order of these link elements matters.
- The browser first sees the link for the custom font font.css, and makes the font available to use in the page.
- Next the browser sees the link for main.css. Since the browser now knows about the custom font, we can use it from main.css to style elements.
Instructions
- In index.html inside the head element add this link element:
<linkhref="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css"rel="stylesheet">. This is a CSS file that loads up the custom font for use in the page. - In main.css, inside the
.jumbotron h1selector, setfont-familyto'Shift', sans-serif
.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;
}<!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>
Comments
Post a Comment