Answered: MY QUESTION: How do I add the font…

Database System Concepts

7th Edition

ISBN:9780078022159

Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Chapter1: Introduction

Section: Chapter Questions

Problem 1PE

See similar textbooks

Related questions

Question

Open fonts.google.com in your browser, search for and select the Emblema One and Lora fonts. Copy and paste the link element provided by Google Fonts within the head element in the index.html, about.html, contact.html, and template.html files.

In the styles.css file, create the following style rules:

Create a style rule for the h1 selector within the mobile class and copy and paste the Google Font CSS declaration for the Emblema One font.
Create a style rule for the h3 selector within the mobile class and copy and paste the Google Font CSS declaration for the Lora font.
Copy and paste the Google Font CSS declaration for the Lora font and add it as a new declaration to the main style rule

MY CSS

/*CSS Reset*/

body, header, nav, main, footer, img, h1, h3, ul {

margin: 0;

padding: 0;

border: 0;

}

/*Style rules for body and images*/

body {

background-color: #f6eee4;

}

img {

max-width: 100%;

display: block;

}

/* Style rules for mobile viewport */

/* Style rules to show mobile class and hide tab-desk class */

.mobile {

display: block;

}

.tab-desk {

display: none;

}

/* Style rules for header area */

.mobile h1 {

padding:2%;

text-align:center;

font-family:'Emblema One', cursive;

}

.mobile h3 {

padding:2%;

text-align:center;

font-family:'Lora', serif;

}

/*Style rules for navigation area*/

nav {

background-color: #2a1f14;

}

nav ul {

list-style: none;

text-align: center;

}

nav li {

display: block;

font-size: 1.5em;

font-family: Geneva, Arial, sans-serif;

font-weight: bold;

border-top: solid;

border-width:0.5px;

border-color:#f6eee4;

}

nav li a {

display: block;

color: #f6eee4;

padding-top: 0.5em;

padding-bottom: 0.5em;

padding-left: 2em;

padding-right: 2em;

text-decoration: none;

}

/*Style rules for main content*/

main {

padding: 2%;

font-family: 'Lora', sans-serif;

}

main p {

font-size: 1.25em;

}

main h3 {

padding-top: 2%;

}

main ul {

list-style: square;

}

/*Style rules for class and id selectors*/

.link {

color: #4d3319;

text-decoration: none;

font-weight: bold;

font-style: italic;

}

.action {

font-size: 1.75em;

font-weight: bold;

text-align: center;

}

#contact {

text-align: center;

}

/*Style fules for footer content*/

footer {

text-align: center;

font-size: 0.85em;

background-color: #2a1f14;

color: #f6eee4;

padding: 1% 0;

}

footer a {

color: #f3e6d8;

text-decoration: none;

}

MY INDEX.HTML

<!DOCTYPE html>

<head>

<title>Wild Rescues: Home</title>

400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">

</head>

<body>

<h1>🐾 Wild Rescues</h1> <h3>Rescue. Rehabilitate. Release.</h3>

</div>

</header>

<nav>

<ul>

<li><a href="about.html">About Us</a></li>

<li><a href="partnership.html">Partnership</a><li

<li><a href="gallery.html">Gallery</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</nav>

<main>

<p>Welcome to Wild Rescues. Our mission is to rescue, rehabilitate, and

release wildlife back into their natural environment. We are a nonprofit

organization dedicated to helping injured wildlife.</p>

<p>Our staff provides around-the-clock care for wildlife in need. We also

provide long-term care for wildlife that cannot be released back into

their natural environment.</p>

<p>Will you partner with us? We need caring volunteers to help care for

our animals. You can also donate, become a member, or become a

sponsor. Contact us today.</p>

</div>

<h2>Our Latest Rescue: Baby Raccoons</h2>

<a href="index.html"><img src="images/baby-raccoons.jpg"

alt="hands holding three baby raccoons"></a>

<p> Meet our latest rescues, Fizz, Bandit, and Mohawk.

These three little guys were found abandoned near a

home.</p>

</div>

</main>

<p> <a href="mailto:contact@wildrescues.net">contact@wildrescues.net</a></p>

</footer>

</body>

</html>

MY QUESTION:
How do I add the font "lora" to the main style rule?

Expert Solution

Trending now

This is a popular solution!

Step by step

Solved in 2 steps

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.

MY QUESTION: How do I add the font "lora" to the main style rule?