te that Fve used a next-sibling selector (h2 + p) to ph that follows an ha. xt, add a softer color to the menu item names (in de osen "sienna," ane of the names from the CSS3 colo at the strong elements in those dt elements stay "ta =color applied to the strong elaments overrides the ir parants.

Computer Networking: A Top-Down Approach (7th Edition)
7th Edition
ISBN:9780133594140
Author:James Kurose, Keith Ross
Publisher:James Kurose, Keith Ross
Chapter1: Computer Networks And The Internet
Section: Chapter Questions
Problem R1RQ: What is the difference between a host and an end system? List several different types of end...
icon
Related questions
Question

<style>
body {
    font-family: Georgia, serif;
    font-size: 100%;
    line-height: 175%;
    margin: 0 15% 0;
    background-color:rgb(210,220,157);
    }
    header {
    margin-top: 0;
    padding: 3em 1em 2em 1em;
    text-align: center;
    border-radius: 4px;
    }
   
    a {
    text-decoration: none;
    color:rgb(153,51,153);
    }
    a:hover{
        background-color: #fff;
    }
    a:focus{
        background-color: #fff;
    }
    a:visited{
        color: hsl(300, 13%, 51%);
    }
    a:active{
        color:#ff00ff;
    }
   
    h1 {
    font: bold 1.5em Georgia, serif;
    text-shadow: 0.1em 0.1em 0.2em gray;
    color: rgb(153,51,153);
    }
    h2 {
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    text-align: center;
    color:rgb(204,102,0);
    background-color:hsl(0, 14%, 95%);
    opacity:0.5;
    }
    dt {
    font-weight: bold;
    }
    strong {
    font-style: italic;
    }
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    #info p {
    font-style: italic;
    }
    .price {
    font-family: Georgia, serif;
    font-style: italic;
    }
    p.warning,
    sup {
    font-size: small;
    }
    .label {
    font-weight: bold;
    font-variant: small-caps;
    font-style: normal;
    }
   
    h2 + p {
    text-align: center;
    font-style: italic;
    }


</style>

<html>
<head>
<link rel="stylesheet" href="main-styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Marko+One&display=swap" rel="stylesheet">
<title>Summer Menu</title>
</head>
<body>

<header>
<h1>Black Goose Bistro &bull; Summer Menu</h1>

<div id="info">
<p>Baker's Corner, Seekonk, Massachusetts<br>
<span class="label">Hours: Monday through Thursday:</span> 11 to 9, <span class="label">Friday and Saturday;</span> 11 to midnight</p>
<ul>
<li><a href="#appetizers">Appetizers</a></li>
<li><a href="#entrees">Main Courses</a></li>
<li><a href="#toast">Traditional Toasts</a></li>
<li><a href="#dessert">Dessert Selection</a></li>
</ul>
</div>
</header>

<section id="appetizers">
<h2>Appetizers</h2>
<p>This season, we explore the spicy flavors of the southwest in our appetizer collection.</p>

<dl>
<dt>Black bean purses</dt>
<dd>Spicy black bean and a blend of mexican cheeses wrapped in sheets of phyllo and baked until golden. <span class="price">$3.95</span></dd>

<dt class="newitem">Southwestern napoleons with

lump crab &mdash; <strong>new item!</strong></dt>
<dd>Layers of light lump crab meat, bean and corn salsa, and our handmade flour tortillas. <span class="price">$7.95</span></dd>
</dl>
</section>

<section id="entrees">

<h2>Main courses</h2>
<p>Big, bold flavors are the name of the game this summer. Allow us to assist you with finding the perfect wine.</p>


<dl>

<dt class="newitem">Jerk rotisserie chicken with fried plantains &mdash; <strong>new item!</strong></dt>
<dd>Tender chicken slow-roasted on the rotisserie, flavored with spicy and fragrant jerk sauce and served with fried plantains and fresh mango. <strong>Very spicy.</strong> <span class="price">$12.95</span></dd>

<dt>Shrimp sate kebabs with peanut sauce</dt>
<dd>Skewers of shrimp marinated in lemongrass, garlic, and fish sauce then grilled to perfection. Served with spicy peanut sauce and jasmine rice. <span class="price">$12.95</span></dd>

<dt>Grilled skirt steak with mushroom fricasee</dt>
<dd>Flavorful skirt steak marinated in asian flavors grilled as you like it<sup>*</sup>. Served over a blend of sauteed wild mushrooms with a side of blue cheese mashed potatoes. <span class="price">$16.95</span></dd>
</dl>

</section>

<section id="toast">
<h2>Traditional Toasts</h2>
<p>The ultimate comfort food, our traditional toast recipes are adapted from <a href="http://www.gutenberg.org/files/13923/13923-h/13923-h.htm"><cite>The Whitehouse Cookbook</cite></a> published in 1887.</p>

<dl>
<dt>Cream toast</dt>
<dd>Simple cream sauce over highest quality toasted bread, baked daily. <span class="price">$3.95</span></dd>

<dt>Mushroom toast</dt>
<dd>Layers of light lump crab meat, bean and corn salsa, and our handmade flour tortillas. <span class="price">$6.95</span></dd>

<dt>Nun's toast</dt>
<dd>Onions and hard-boiled eggs in a cream sauce over buttered hot toast. <span class="price">$6.95</span></dd>

<dt>Apple toast</dt>
<dd>Sweet, cinnamon stewed apples over delicious buttery grilled bread. <span class="price">$6.95</span></dd>
</dl>
</section>

<section id="dessert">
<h2>Dessert Selection</h2>
<p>Be sure to save room for our desserts, made daily by our own <a href="http://www.jwu.edu/college.aspx?id=19510">Johnson & Wales</a> trained pastry chef.</p>

<dl>
<dt class="newitem">Lemon chiffon cake &mdash; <strong>new item!</strong></dt>
<dd>Light and citrus flavored sponge cake with buttercream frosting as light as a cloud. <span class="price">$2.95</span></dd>

 

1. First, I have a few global changes to the body element in mind. I've had a
change of heart about the font-family. I think that a serif font such as
Georgia would be more sophisticated and appropriate for a bistro
menu. Let's also use the line-height property to open up the text lines
and make them easier to read. Make these updates to the body style rule,
as shown:
bady {
font- family: Georgia, serif; font size: small; li
2. I also want to redesign the "info" section of the document. Remove the
teal color setting by deleting that whole rule. Once that is done, make
the hl olive green and the paragraph in the header gray. Add color dec-
larations to the existing rules:
*infeteeior teni " delete */hi {
font: bold 1. Sei
3. Next, to imitate a fancy restaurant menu, I'm going to center a few kay
elements on the page with the text-align property. Write a rule with a
grouped selector to center the headings and the "info" section:
h1, h2, sinfo {
text-align: center;}
4. I want to maks the "Appetizer" and "Main Courses" h2 headings more
eys-catching. Instead of large, bold typs, I'm going to use all uppercase
ktters, extra letter spacing, and color to call attention to the headings.
Here's the new rule for h2 elements that includes all of these changes:
h2 (
font-size: len; text-transforn: uppercase; letter-s
5. We're really close now; just a few more tweaks to those paragraphs
right after the h2 headings. Let's center those too and make them italic:
h2 + p{ text-align: center; font-style: italic;}
Note that I've used a next-sibling selector (h2 + p) to salect any para-
graph that follows an h2.
6. Next, add a softer color to the menu item names (in dt slements). I've
chosen "sienna," one of the names from the CSS3 color module. Note
that the strong elements in those dt elaments stay "tomato" red because
the color applied to the strong elements overrides the color inherited by
their parents.
dt (
font-weight: bold;
color: sienna; }
7. Finally, for kicks, add a drop shadow under the hl heading. You can play
around with the valuss a little to see how it works. I find it to look a lit-
tle clunky against a white background, but when you have a patterned
background image, sometimes a drop shadow provides the little punch
you need to make the text stand out. Notice how small the shadow val-
ues are-a little goes a long way!
Transcribed Image Text:1. First, I have a few global changes to the body element in mind. I've had a change of heart about the font-family. I think that a serif font such as Georgia would be more sophisticated and appropriate for a bistro menu. Let's also use the line-height property to open up the text lines and make them easier to read. Make these updates to the body style rule, as shown: bady { font- family: Georgia, serif; font size: small; li 2. I also want to redesign the "info" section of the document. Remove the teal color setting by deleting that whole rule. Once that is done, make the hl olive green and the paragraph in the header gray. Add color dec- larations to the existing rules: *infeteeior teni " delete */hi { font: bold 1. Sei 3. Next, to imitate a fancy restaurant menu, I'm going to center a few kay elements on the page with the text-align property. Write a rule with a grouped selector to center the headings and the "info" section: h1, h2, sinfo { text-align: center;} 4. I want to maks the "Appetizer" and "Main Courses" h2 headings more eys-catching. Instead of large, bold typs, I'm going to use all uppercase ktters, extra letter spacing, and color to call attention to the headings. Here's the new rule for h2 elements that includes all of these changes: h2 ( font-size: len; text-transforn: uppercase; letter-s 5. We're really close now; just a few more tweaks to those paragraphs right after the h2 headings. Let's center those too and make them italic: h2 + p{ text-align: center; font-style: italic;} Note that I've used a next-sibling selector (h2 + p) to salect any para- graph that follows an h2. 6. Next, add a softer color to the menu item names (in dt slements). I've chosen "sienna," one of the names from the CSS3 color module. Note that the strong elements in those dt elaments stay "tomato" red because the color applied to the strong elements overrides the color inherited by their parents. dt ( font-weight: bold; color: sienna; } 7. Finally, for kicks, add a drop shadow under the hl heading. You can play around with the valuss a little to see how it works. I find it to look a lit- tle clunky against a white background, but when you have a patterned background image, sometimes a drop shadow provides the little punch you need to make the text stand out. Notice how small the shadow val- ues are-a little goes a long way!
Expert Solution
steps

Step by step

Solved in 2 steps

Blurred answer
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Concepts of Database Management
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY