Question: Figure 382 shows a completed web page that uses CSS to design the page layout. Please help me. code3-4.css @charset utf-8; /* New Perspectives on
Figure 382 shows a completed web page that uses CSS to design the page layout. Please help me. 


code3-4.css
@charset "utf-8";
/*
New Perspectives on HTML5 and CSS3, 8th Edition
Tutorial 3
Coding Challenge 4
Author:
Date:
Filename: code3-4.css
*/
body {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
ul {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
nav.horizontal {
background-color:rgba(154,20,23,1.00);
height: 30px;
}
nav.horizontal a {
color: white;
}
nav.vertical ul {
line-height: 2em;
}
article p {
font-size: 1.2em;
font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
}
aside ul li {
margin: 15px 5px;
background-color:rgba(229,129,131,1.00);
padding: 5px;
}
a {
text-decoration: none;
color: rgb(101, 101, 101);
}
section div h1 {
font-size: 1em;
text-align: center;
background-color:rgba(154,20,23,1.00);
color: white;
margin: 0;
}
section div {
padding-bottom: 20px;
}
section div p {
font-size: 0.9em;
text-align: center;
}
section div p:last-of-type {
font-size: 0.65em;
text-align: right;
color:rgba(154,20,23,1.00);
}
aside h1 {
text-align: center;
font-size: 1.2em;
font-weight: normal;
}
footer {
text-align: center;
color: white;
font-size: 1em;
height: 30px;
line-height: 30px;
background-color:rgba(154,20,23,1.00);
}
code3-4.html:
- Home
- Menu
- Locations
- Catering
- About Us
- Pizza
- Salad
- Pasta
- Sandwiches
- Appetizers
- Pocket Pizzas
- Fish & Shrimp
- Chicken & Wings
- Beverages
- Dessert
- Catering
- Download Menu
- Catering Menu
At Red Ball Pizza, we want to satisfy every appetite. That's
why our menu contains a variety of different items. With
so many choices, everyone's favorites are available!
Red Ball Pizza is NOT a franchise, a chain, or a corporation.
It is 100% locally owned and operated. Red Ball Pizza is
devoted to providing the highest quality and the best service
possible. Our only goal is to provide you with a great
pizza … EVERY TIME!
Classic Combo
16" 1-Topping Pizza
& a 2-Liter of Your Choice
For Only $14.99
Expires 3/14
not valid with other offers
Pizza & Stix
16" Specialty Pizza
Reg. Cheese Stix & a 2-Liter
For Only $21.99
Expires 3/14
not valid with other offers
1/2 Price
Buy any 16" Specialty Pizza
at Reg. Price & Get a 2nd
Pizza For Half Price
Expires 3/14
not valid with other offers
Pizza & Wings
14" 2-Topping Pizza
& 12 Wings
For Only $15.99
Expires 3/31
not valid with other offers
$3.00 Off
Get $3.00 Off
any 16" Pizza at
Menu Price
Expires 3/31
not valid with other offers
Sub Dinner
1 Toasted Sub & Chips
& 1 20oz Soda
For Only $6.99
Expires 3/31
not valid with other offers
Pizza Pizzazz
- 93% of Americans eat pizza at least once a month.
- Mozzarella was originally made from the milk of Indian
water buffalo in the 7th century.
- The tomato was brought back to Italy by Spaniards returning
from Mexico in the 16th century.
- The busiest night for take-out pizza orders is
Halloween.
- The first pizzeria opened in 1830 in Naples, Italy and is
still operating today. We've been open since 1982 and
we're happy to serve you today and tomorrow!
Red Ball Pizza •
811 Beach Drive •
Ormond Beach, FL 32175 •
(386) 555 - 7499
debug3-4.css:
@charset "utf-8";
/*
New Perspectives on HTML5 and CSS3, 8th Edition
Tutorial 3
Coding Challenge 4
Author:Fabio dos Santos
Date: 02/22/2021
Filename: debug3-4.css
*/
/* Page Body Styles */
body {
width: 90%;
min-width: 600px;
max-width: 1024px;
margin: 10px auto;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-areas:
'header header header'
'link link link'
'nav main side'
'nav coupons side'
'footer footer footer';
gap: 10px 25px;
}
/* Grid Areas */
header {grid-area: headers;}
nav.horizontal {grid-area: links;}
nav.vertical {grid-area: navs;}
article {grid-area: main;}
section {grid-area: coupons}
aside {grid-area: sides;}
footer {grid-area: footers;}
/* Image Styles */
header img {
display: block;
width: 100%;
}
/* Horizontal Navigation List Styles */
nav.horizontal ul {
width: 100%;
display: grid;
grid-template-columns: repeat 5/1fr;
}
nav.horizontal ul li {
display: block;
text-align: center;
}
/* Coupon Section Styles */
section {
display: grid;
grid-template-columns: repeat 3/1fr;
grid-gap: 20px;
}
section div {
outline: 4px dashed gray;
position: relative;
}
section div p.last-of-type {
position: absolute;
bottom: 1px;
right: 5px;
}
Summary Figure 3-82 shows a completed web page that uses CSS to design the page layout. You've been given the initial HTML and CSS code for this web page, but there are several errors in the CSS stylesheet. Use your knowledge of CSS to locate and fix the errors. 811 Beach Drive Ormond Beach, FL 3213 (586) 655.7499 Red Ball Pizza Home Menu Locations Catering About Us Pizza Salad Pizza Pizzazz 93% of Americans en pizza at least once a month At Red Ball Pizza, we want to satisfy every appetite. That's why our menu contains a variety of different items. With so many choices, everyone's favorites are available! Red Ball Pizza is NOT a franchise, a chain, or a corporation. It is 100% locally owned and operated. Red Ball Pizza is devoted to providing the highest quality and the best service possible. Our only goal is to provide you with a great pizza ... EVERY TIME! Mozzarella was original made from the milk of Indian water buffalo in the 7th century Pasta Sandwiches Appetizers Pocket Pizza Fish & Shrimp Chicken & Wings Beverages Dessert Catering Download Menu Catering Menu The tomato was brought back to Italy by Spaniards returning from Mexico in the 10th century 161. Topping Pizza & a 2.16 Specialty Pizza Reg Only $14.99 Buy any 16' Specialty Pizza a Reg Price & Geta 2nd Puzza For Price Expires Expres 34 The busiest night for take-out pizza orders is Halloween P & 12 For Only $1599 Sub Dinner any 16" Pizza! 1 Toasted Sub & Chips & 11 Menu Price z Soda For Only $6.99 Expues 31 Expires 31 The first pizzeria opened in 1830 in Naples, Italy and is still operating today. We ve been open 2 and we're happy to serve you today and tomorrow Expres Red Ball Pizza - 811 Beach Drive-Ormond Beach, FL 32175. (386) 555 - 7499 Figure 3-82 Do the following: > Open the debug3-4.css file. The body element should have a width that is 90% of the width of the browser window ranging from a minimum of 600 pixels up to a maximum of 1024 pixels. Fix the syntax errors in the body style rule that defines the width of the web page. The style rule for the body element sets up a grid layout for the page. However, there are several errors in defining the grid areas, grid columns, and grid gaps. Fix the syntax errors in the style rule. There are issues with grid column styles globally in debug3-4.css. > Go to the style rules in the "Grid Areas" section that assigns page elements to areas of the grid. Locate and fix the errors in > Go to the style rules in the "Grid Areas" section that assigns page elements to areas of the grid. Locate and fix the errors in assigning elements to grid areas. > The style rules for the horizontal navigation list and the section element also define grid styles for those elements. Locate and fix errors in the code that set up the grid columns. > The last paragraph within the section div selector should be placed with absolute positioning 1 pixel and 5 pixels from the bottom right corner of the container element. However, there is an error in defining the selector. Find and fix the error. Open the website in the browser preview and verify that design of the page resembles that shown in Figure 3-82
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
