Database System Concepts
7th Edition
ISBN: 9780078022159
Author: Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher: McGraw-Hill Education
expand_more
expand_more
format_list_bulleted
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>
<html lang="en">
<head>
<title>Wild Rescues: Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Emblema+One&family=Lora:ital,wght@0,
400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="tab-desk">
<div class="mobile">
<h1>🐾 Wild Rescues</h1> <h3>Rescue. Rehabilitate. Release.</h3>
<a href="index.html"> <img src="images/baby-hawk.jpg" alt="rescued baby hawk"> </a>
</div>
</div>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<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="faqs.html">FAQs</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<!-- Use the main area to add the main content to the webpage -->
<main>
<div id="welcome">
<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>
<div id="latest">
<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>
<footer>
<p>© Copyright 2021. All Rights Reserved.</p>
<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?
MY QUESTION:
How do I add the font "lora" to the main style rule?
Expert Solution
This question has been solved!
Explore an expertly crafted, step-by-step solution for a thorough understanding of key concepts.
This is a popular solution
Trending nowThis is a popular solution!
Step by stepSolved in 2 steps
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.Similar questions
- Within the page body insert a table element and add a table header row group containing one row. Within that row insert a table heading cell that spans 8 columns and contains the text Daily Crossword. Add the table body section and within the table body, create the layout of the crossword puzzle subject to the following conditions: The table will contain 9 rows and 8 columns. Within each row will be a number of table data cells. If the cell is a blank cell shown in Figure 6–49, assign it the class name blank. If a blank cell covers multiple rows and/or columns, make that cell a spanning cell and adjust the number of cells in subsequent rows and columns accordingly to preserve the table layout. Several cells contain numbers that will be used as crossword puzzle clues. Number the appropriate cells from 1 up to 26 to match the layout in Figure 6–49. Open code6-2_table.css and create the following style rules for the indicated elements: For the table element: Add a 20…arrow_forwardImmediately following the tel-link round mobile p element, Insert a new paragraph element with the tab-desk class. Wrap the phone number, (814) 555-8989, within this paragraph elementarrow_forwardCreate a file named part_2.html which displays the table shown on the next page. Place the following styles in the Head element of part 2.html to add borders to your table elements: td, th { border: 1px solid gray; }arrow_forward
- QUESTION 12 Write full HTML code to create the following table with required syntax. •Use the correct HTML elements for each part of the table .Add internal CSS to style the table head as "lightblue" color with 50px height -Add intermal CSS to style the all table border as solid 2px with color #666666 Omani Wilayat Name City Al DakhiliahNizwa Wilayat Muscat Muscat Dhofar Salalaharrow_forwardi need this assignment solved. below is index.html and styles.css tasks Link the index.html file to the styles.css style sheet, located in the css subfolder. Open the file in Google Chrome’s device mode to display the page in a mobile viewport. In the index.html file, add a class attribute with the value tablet-desk to the second div element within the main element. In styles.css, below the body style rule, create a new style rule for the img selector the sets a maximum width of 100% and sets the display value to block. Add two blank lines after the img style rule, add a comment with the text, Style rules for mobile viewport. Add two blank lines after the mobile viewport comment, add another comment with the text, Style rule to hide tablet-desk class, and then create a style rule that hides the tablet-desk class. Add the following declarations to the nav style rule: Specify a sticky position compatible with all modern browsers. (Hint: Use two position…arrow_forwardIn the styles.css file, add the ul selector to the CSS reset style rule. Remove the declaration for the margin property in the nav ul style rule. Modify the nav li style rule by changing the display value to block and add a top border that specifies a solid border width of 0.5px with the color value #f6eee4. My CSS nav li { display: block; font-size: 1.5em; font-family: Geneva, Arial, sans-serif; font-weight: bold; border-top: solid border;arrow_forward
arrow_back_ios
arrow_forward_ios
Recommended textbooks for you
- Database System ConceptsComputer ScienceISBN:9780078022159Author:Abraham Silberschatz Professor, Henry F. Korth, S. SudarshanPublisher:McGraw-Hill EducationStarting Out with Python (4th Edition)Computer ScienceISBN:9780134444321Author:Tony GaddisPublisher:PEARSONDigital Fundamentals (11th Edition)Computer ScienceISBN:9780132737968Author:Thomas L. FloydPublisher:PEARSON
- C How to Program (8th Edition)Computer ScienceISBN:9780133976892Author:Paul J. Deitel, Harvey DeitelPublisher:PEARSONDatabase Systems: Design, Implementation, & Manag...Computer ScienceISBN:9781337627900Author:Carlos Coronel, Steven MorrisPublisher:Cengage LearningProgrammable Logic ControllersComputer ScienceISBN:9780073373843Author:Frank D. PetruzellaPublisher:McGraw-Hill Education
Database System Concepts
Computer Science
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:McGraw-Hill Education
Starting Out with Python (4th Edition)
Computer Science
ISBN:9780134444321
Author:Tony Gaddis
Publisher:PEARSON
Digital Fundamentals (11th Edition)
Computer Science
ISBN:9780132737968
Author:Thomas L. Floyd
Publisher:PEARSON
C How to Program (8th Edition)
Computer Science
ISBN:9780133976892
Author:Paul J. Deitel, Harvey Deitel
Publisher:PEARSON
Database Systems: Design, Implementation, & Manag...
Computer Science
ISBN:9781337627900
Author:Carlos Coronel, Steven Morris
Publisher:Cengage Learning
Programmable Logic Controllers
Computer Science
ISBN:9780073373843
Author:Frank D. Petruzella
Publisher:McGraw-Hill Education