Essential Question: How can I use CSS to import fonts and change the typography of my web page?
Mastery Objectives:
SWBAT import fonts from the web.
SWBAT import google friendly fonts.
SWBAT format typography in CSS.
Resources:
Directions:
The header section of the Morocco site contains the author’s name, along with the text “Travels”, “Fiction”, and “Contact”.
Change the font-weight of the header so that the text appears bold.
Moving down the page, the section contains a stunning image, two blocks of text, a tag with the text “DEC 20XX”, and an tag with the text “Morocco”. banner h2 h1
Give the h2 tag a font weight of 500 and the tag h1 a font weight of 900.
Set the line-height for the selector .journal to 1.4
Set the first letter of the journal section to line-height of .87
The quote should have a line height of 1.2
The footer content should have a line height of 1.5
The site currently uses common fonts and fonts found on users’ computers. A number of new font libraries have been created fonts that would be a better fit for the site.
Using the Google Fonts API, add the following fonts to the index.html file:
Cute
Excited
Awkward
hint: <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
You can now use the newly added fonts from Google Fonts within our project. Moving down the page again, set the font-family and property as recommended:
Set the typeface of the tag in the section to h2 banner "Awkward"
Set the typeface of the tag in the section to h1 banner "Cute"
Set the typeface of the journal section to Awkward
Set the typeface of the photo caption to Excited
9. The page looks great, but you also have to account for users who may not be able to access the Google Fonts. Find them several fallback fonts to use in case they are restricted from accessing fonts from a third party:
Set the fallback fonts as follows:
h2 tag in the section: and banner "Arial" sans-serif
h1 tag in the section: banner sans-serif
The journal section: serif
The photo caption: serif
10. Looking at the page, the author suggests the page would really come together if we used a specific font, Cute, in the footer. Download the file and add them to your project within the fonts directory within the styles/ directory where our CSS files are stored. Cute-Regular.ttf
To complete the task you need to use the property to make these fonts accessible in the stylesheets. Name the font . @font-face "Cute"
11. Now that you have a rule, set the property of the footer to Cute with Awkward and Excited as the fallback fonts.
html {
font-size: 18px;
}
@media only screen and (max-width: 1000px) {
html {
font-size: 16px;
}
}
@media only screen and (max-width: 680px) {
html {
font-size: 14px;
}
}
/* Header */
.header {
display: flex;
justify-content: space-around;
align-items: center;
height: 4.44rem;
padding: 0 12%;
background-color: white;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05);
font-family: Verdana, sans-serif;
font-size: .77rem;
}
.header .logo {
flex-grow: 1;
color: #ffb78c;
}
.header li {
display: inline;
padding-right: 2.22rem;
}
.header li a {
text-decoration: none;
color: #4a4a4a;
}
@media only screen and (max-width: 550px) {
.header {
flex-direction: column;
}
.header .logo {
flex-grow: 0;
}
}
/* Banner */
.banner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 50rem;
background: url("https://upload.wikimedia.org/wikipedia/commons/5/5b/29610-Fez_%2828134041211%29_%28qarawiyyin_crop%29.jpg") center center no-repeat;
background-size: cover;
color: #ffb78c;
}
.banner h2 {
padding: .55rem 0;
border-top: 4px solid #ffb78c;
border-bottom: 4px solid #ffb78c;
font-size: 1.44rem;
letter-spacing: 2px;
}
.banner h1 {
padding-top: 1.11rem;
font-size: 11rem;
}
@media only screen and (max-width: 750px) {
.banner {
height: 40rem;
}
.banner h1 {
font-size: 8rem;
}
}
@media only screen and (max-width: 530px) {
.banner {
height: 30rem;
}
.banner h1 {
font-size: 6rem;
}
}
/* Journal */
.journal {
padding: 0 25% 4rem 25%;
background-color: rgb(254, 231, 218);
color: #4a4a4a;
}
.photo {
width: 75%;
padding: 1.11rem;
border-radius: 5px;
margin: 0 auto 4.44rem auto;
background-color: white;
}
.photo .image-container {
overflow: hidden;
margin-bottom: 1.11rem;
}
.photo .image-container img {
width: 100%;
}
.photo .caption {
font-style: italic;
}
.photo.first {
position: relative;
top: -2.77rem;
margin-bottom: 1.67rem;
}
.journal p {
padding-bottom: 2.77rem;
font-size: 1.5rem;
}
.journal .first-letter {
float: left;
padding-right: 1.4rem;
font-family: "Abril Fatface", serif;
font-size: 7.44rem;
color: #10b0d8;
}
.quote {
display: block;
padding: 4.44rem 0;
margin-bottom: 3.33rem;
border-top: 4px solid black;
border-bottom: 4px solid black;
text-align: center;
font-size: 3.55rem;
font-weight: 800;
}
@media only screen and (max-width: 680px) {
.journal {
padding: 0 10% 4rem 10%;
}
}
/* Footer */
footer {
display: flex;
align-items: center;
padding: 0 1%;
background-color: #212121;
}
footer .image-container {
width: 400px;
}
footer .content {
flex-grow: 1;
font-style: italic;
color: #9b9b9b;
}
footer p {
padding-bottom: 1.66rem;
}
footer p:last-child {
padding-bottom: 0;
}
footer .author {
color: #ffb78c;
}
footer em {
color: #cfcfcf;
}
@media only screen and (max-width: 750px) {
footer {
flex-direction: column;
padding: 0 10% 2rem 10%;
}
footer .image-container {
height: 300px;
margin-bottom: 2rem;
overflow: hidden;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Morocco</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Header -->
<nav class="header">
<span class="logo"Wikipedia</span>
<ul>
<li><a href="#">TRAVELS</a></li>
<li><a href="#">FICTION</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<!-- Banner -->
<div class="banner">
<h2>DEC 20XX</h2>
<h1>Morocco</h1>
</div>
<!-- Journal -->
<div class="journal">
<div class="first photo">
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Merzouga_sahara.jpg/1280px-Merzouga_sahara.jpg">
</div>
<span class="caption">A convoy of camels traveling the Sahara</span>
</div>
<p>
<span class="first-letter">I</span> went to Morocco in 1998. It is such a beautiful country full of wonderful people. My favorite places to visit were the markets, beaches, and restaurants.
</p>
<p>
There
</p>
<p>
"We won't see anything. That's my point!"
</p>
<p>
How did we get here?
</p>
<p>
It started eight days ago when I arrived in Malilla on the boat from Malaga. The sun hit me like a judgement as I stepped onto the gangplank. A bit about Morocco:
</p>
<div class="photo">
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Djebel_Toubkal_01.jpg/1024px-Djebel_Toubkal_01.jpg">
</div>
<span class="caption">The Atlas Mountains</span>
</div>
<p>
Morocco has a population of over 33.8 million and an area of 446,550 km2 (172,410 sq mi). Its capital is Rabat, and the largest city is Casablanca. Other major cities include Marrakesh, Tangier, Tetouan, Sale, Fes, Agadir, Meknes, Oujda, Kenitra, and Nador. A historically prominent regional power, Morocco has a history of independence not shared by its neighbours.
</p>
<span class="quote">"Navigating by night is always easier."</span>
<p>
The Constitution of Morocco provides for a monarchy with a Parliament and an independent judiciary. With the 2011 constitutional reforms, the King of Morocco retains less executive powers whereas those of the prime minister have been enlarged. The constitution grants the king honorific powers (among other powers); he is both the secular political leader and the "Commander of the Faithful" as a direct descendant of the Prophet Mohammed. He presides over the Council of Ministers; appoints the Prime Minister from the political party that has won the most seats in the parliamentary elections, and on recommendations from the latter, appoints the members of the government.
</p>
<p>
Since the constitutional reform of 1996, the bicameral legislature consists of two chambers. The Assembly of Representatives of Morocco (Majlis an-Nuwwâb/Assemblée des Répresentants) has 395 members elected for a five-year term, 305 elected in multi-seat constituencies and 90 in national lists consisting of women and youth.
</p>
<div class="photo">
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Volubilis_Longshot_II.jpg/1280px-Volubilis_Longshot_II.jpg">
</div>
<span class="caption">Roman Ruins</span>
</div>
<p>
The status of the Saguia el-Hamra and Río de Oro regions is disputed. The Western Sahara War saw the Polisario Front, the Sahrawi rebel national liberation movement, battling both Morocco and Mauritania between 1976 and a ceasefire in 1991. The Moroccan government has stated that their claimed area of Western Sahara is referred to as the "Southern Provinces". A United Nations mission, MINURSO, is tasked with organizing a referendum on whether the territory should become independent or recognized as a part of Morocco.
</p>
<p>
According to the 2022 Economist Democracy Index, Morocco is ruled under a hybrid regime, scoring #3 in the Middle East and North Africa, and #95 in the world. Morocco has a "difficult" ranking on the 2023 World Press Freedom Index.
Following the March 1998 elections, a coalition government headed by opposition socialist leader Abderrahmane Youssoufi and composed largely of ministers drawn from opposition parties, was formed. Prime Minister Youssoufi's government was the first ever government drawn primarily from opposition parties, and also represents the first opportunity for a coalition of socialists, left-of-centre, and nationalist parties to be included in the government until October 2002. It was also the first time in the modern political history of the Arab world that the opposition assumed power following an election. The current government is headed by Aziz Akhannouch.
</p>
<span class="quote">“Navigating by night is always easier.”</span>
<p>
The religious affiliation in the country was estimated by the Pew Forum in 2010 as 99% Muslim, with all remaining groups accounting for less than 1% of the population. Of those affiliated with Islam, virtually all are Sunni Muslims, with Shia Muslims accounting for less than 0.1%. However, nearly 15% of Moroccans nonetheless describe themselves as non religious according to a 2018 survey conducted by the research network Arab Barometer; the same survey saw nearly 100 percent of respondents identify as Muslims. Another 2021 Arab Barometer survey found that 67.8% of Moroccans identified as religious, 29.1% as somewhat religious, and 3.1% as non religious. The 2015 Gallup International poll reported that 93% of Moroccans considered themselves to be religious.
</p>
<div class="photo">
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Palais_El_Badii_-_panoramio.jpg/1280px-Palais_El_Badii_-_panoramio.jpg">
</div>
<span class="caption">The remains of the Saadi sultan Ahmad al-Mansur's 16th century Badi' Palace </span>
</div>
</div>
<!-- Footer -->
<footer>
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Mohammed_V_Morocco_1957.lowres.jpeg">
</div>
<div class="content">
<p>
<span class="author">Wikipedia</span> has organized this information page on Morocco.
The content of this page came from <em>Wikipedia</em>, and all contributors. <em>Wikipedia</em>, is a wiki and depends on the contributions of its members to write content.
</p>
</div>
</footer>
</body>
</html>