2. HTMIICSS Coding Write the XHITMI and CSS code necessary to recreate the following appearance on-screen. Adaprted from the WA.B.L page of the Washington Beer Commision webrite, washingtonbeer.c...

Question

Question

2. HTMIICSS Coding Write the XHITMI and CSS code necessary to recreate the following appearance on-screen. Adaprted from the WA.B.L page of the Washington Beer Commision webrite, washingtonbeer.c...

2. HTMIICSS Coding Write the XHITMI and CSS code necessary to recreate the following appearance on-screen. Adaprted from the WA.B.L page of the Washington Beer Commision webrite, washingtonbeer.com ashington Home of the WASHINGTON BEER Commission What is WA.B.L? WA.DL, is a community of WAshington Ber Lovers celebrating the FRESH LOCAL AWARD WINNING c rah beer produced Its a Washingtion Deer Fan Club WA.B.L. Perks WABL neems, and oner businesses prometing lanty Washngton beer Each hirt with a design unique to thal year. listing all meber JOIN WA.B.L NOW! to visit breweries when Colecting stamps fhom WA broweres can get you some great prizes Most of the XHTML code is given to you; the code given may not be modified. The only change you may make to the provided XHTML code is that you may add any number of div and/or span elements, possibly with id and'or class attributes, as targets for CSS styling. Write valid code that would pass the W3C validators. Assume that the given XHTML code would appear inside the body of the page. Text on the page uses a sans-serif font. The area around the outside of the page has a yellowish color of #FFB 131 The overall central page area has a white background, and a Spx-thick solid black border on its bottom edge only. It is centered within the page and is 950px wide. without bullets, displayed all in one line, centered on the page. Each link's text is bold, spacing on either side of o not underlined, colored #FFB 131, has a line height of 2em, and has 1.Sen of honor tal it. (Between two adjacent links there is a total of 3em space.) The main content area (beneath the navigation links) has 1.5em of horizontal space on the left and right. All the headers inside of it are underlined. ·The "Join wAB.L" section is located on the right side of the main content area, with text flowing around it is font size is 190% of the font size of the rest of the page, and its background is colored PFBC57B. There is .75em of space separating its content from its edges, as well as 1em of space separating its edges from the surrounding content. Mark up the text on the next page with your divispan tags. If a tag cant fit in the space provided, write it in the margins and draw an arrow to where it should be inserted All other appearance is unspecified, and is subject to the default rendering of the browser. Write your anwer on the nexut page. 4 of 8

engineering Computer-Science

Add a comment Improve this question Transcribed image text

Answer 1

Answer #1

index.html

<div id="page">
<h1><img src="header.gif" alt="Washington Beer - Home of the WASHINGTON BEER Commission" /></h1>

<ul>
    <li><a href="">Home</a></li>
    <li><a href="">Festivals</a></li>
    <li><a href="">Breweries</a></li>
    <li><a href="">News</a></li>
    <li><a href="">WABL</a></li>
    <li><a href="">About Us</a></li>
    <li><a href="">Contact</a></li>
</ul>

<div id="content">

    <h2>What is WA.B.L?</h2>
    <p>WA.B.L. is a community of <strong>WA</strong>shington <strong>B</strong>eer <strong>L</strong>overs celebrating the <strong>FRESH, LOCAL, AWARD-WINNING</strong> craft beer produced in our state.</p>
    <p>It's a Washington Beer Fan Club!</p>

    <div id="join">
      <img src="wabl.jpg" alt="WA.B.L - Washington Beer Lovers" /><br/>
      <a href="">JOIN WA.B.L NOW!</a>
    </div>

    <h2>WA.B.L. Perks</h2>
    <p>WA.B.L.'ers enjoy monthly <strong>invitation-only</strong> events at various breweries, brewpubs, tasting rooms, and other businesses promoting tasty Washington beer.</p>
    <p>Each year, upon renewal of their membership, WA.B.L.'ers receive a <strong>cool t-shirt</strong> with a design unique to that year, listing all member breweries.</p>

    <h2>WA.B.L. Passport</h2>
    <p>WA.B.L.'ers are also encouraged to visit breweries when they're out traveling around the state. Each member is issued a <strong>passport</strong> in which they collect stamps from the breweries they visit.</p>
    <p>Collecting stamps from WA breweries can get you some great prizes!</p>
</div>
</div>

pie.html

<!DOCTYPE html>
<html>
   <head>
       <link href="recipe.css" type="text/css" rel="stylesheet" />
       <link href="https://webster.cs.washington.edu/images/pie-icon.gif" type="image/gif" rel="shortcut icon" />
       <title>Grandma's Lemon Meringue Pie</title>
   </head>

   <body>
       <h1>Grandma's Lemon Meringue Pie</h1>
       <p>
           <img src="https://webster.cs.washington.edu/images/pie.jpg" alt="lemon meringue pie" />
       </p>
       <p>
           One 9-inch pie <br />
           30 Min - Prep time <br />
           10 Min - Cook time <br />
           40 Min - Total <br />
           8 Servings
       </p>
       <hr />

       <h2>INGREDIENTS</h2>
       <ul>
           <li>1 cup white sugar</li>
           <li>2 <abbr title="tablespoons">tbsp</abbr> all-purpose flour</li>
           <li>3 <abbr title="tablespoons">tbsp</abbr> cornstarch</li>
           <li>1/4 <abbr title="teaspoon">tsp</abbr> salt</li>
           <li>1 1/2 cups water</li>
           <li>2 lemons, juiced and zested</li>
           <li>2 <abbr title="tablespoons">tbsp</abbr> butter</li>
           <li>4 egg yolks, beaten</li>
           <li>1 (9 inch) pie crust, baked</li>
           <li>4 egg whites</li>
           <li>6 <abbr title="tablespoons">tbsp</abbr> white sugar</li>
       </ul>
       <hr />

       <h2>DIRECTIONS</h2>
       <ol>
           <li><strong>Preheat Oven:</strong> Preheat oven to 350 degrees F (175 degrees C).</li>
           <li><strong>Make Lemon Filling:</strong> In a medium saucepan ...
               <ul>
                   <li>Whisk together 1 cup sugar, flour, cornstarch, and salt.</li>
                   <li>Stir in water, lemon juice and lemon zest.</li>
                   <li>Cook over medium-high heat, stirring frequently, until mixture comes to a boil.</li>
                   <li>Stir in butter.</li>
                   <li>Place egg yolks in a small bowl and gradually whisk in 1/2 cup of hot sugar mixture.</li>
                   <li>Whisk egg yolk mixture back into remaining sugar mixture.</li>
                   <li>Bring to a boil and continue to cook while stirring constantly until thick.</li>
                   <li>Remove from heat.</li>
                   <li>Pour filling into baked pastry shell.</li>
               </ul>
           </li>
           <li><strong>Make Meringue:</strong> In a large glass or metal bowl ...
               <ul>
                   <li>Whip egg whites until foamy.</li>
                   <li>Add sugar gradually, and continue to whip until stiff peaks form.</li>
                   <li>Spread meringue over pie, sealing the edges at the crust.</li>
               </ul>
           </li>
           <li><strong>Bake:</strong> Bake in preheated oven for 10 minutes, or until meringue is golden brown.</li>
       </ol>
       <p>
           This is our favorite recipe here at Granny's Pies. It has been enjoyed by pie
           fans for many years. It's Granny's favorite! We hope you'll find that this<br />
           recipe is delicious and also easy to follow; it's a piece of <del>cake</del> pie!
       </p>
       <hr />

       <h2>USER COMMENTS</h2>
       <blockquote>
           <p>
               <em>This is a very fun recipe to follow, because Grandma makes it sweet and simple.
               This pie is thickened with cornstarch and flour in <br />
               addition to egg yolks, and contains no milk.</em>
           </p>
           <p><em>- Emilie S.</em></p>
       </blockquote>
       <blockquote>
           <p>
               <em>Q: What do you call an ape who loves pie? <br />
               A: A meringue-utan.</em>
           </p>
           <p><em>- Vickie K.</em></p>
       </blockquote>
       <blockquote>
           <p>
               <em>
                   This site can really <strong>engage</strong> my interest.
                   Follow the recipe above and <strong>make it so</strong>! This
                   pie is <strong>number one</strong>. <br />
               </em>
           </p>
           <p><em>- Jean-Luc Piecard</em></p>
       </blockquote>

       <h2>LINKS</h2>
       <a href="http://www.google.com/search?q=lemon+meringue+pie+recipe&start=10">
           Search for other lemon meringue pie recipes
       </a>
       <br />
       <a href="index.html">Home</a>

<pre>
Copyright © 2012 Granny's Pies
A Granny's Pies Production
All rights reserved</pre>

recipe.css

body {
background-color: #FFB131;
font-family: sans-serif;
}

#page {
width: 950px;
margin: 0 auto;
background-color: white;
border-bottom: solid 5px black;
}

#main {
padding: 0 1.5em; /* margin also works */
}

#join {
float: right;
background-color: #FBC57B;
padding: .75em;
margin: 1em;
font-size: 190%;
font-weight: bold; /* not specified in problem */
}

ul {
text-align: center;
font-weight: bold;
padding: 0; /* will let slide */
/* list-style-type: none; -- not needed but OK */
background-color: black; /* not specified in problem */
}

li {
display: inline;
padding: 1.5em; /* margin DOES NOT work */
line-height: 2em;
/* height: 2em; -- not correct but allowed */
}

Add a comment

Answer 2

2. HTMIICSS Coding Write the XHITMI and CSS code necessary to recreate the following appearance on-screen. Adaprted from the WA.B.L page of the Washington Beer Commision webrite, washingtonbeer.c...

Homework Answers

Add Answer to:
2. HTMIICSS Coding Write the XHITMI and CSS code necessary to recreate the following appearance on-screen. Adaprted from the WA.B.L page of the Washington Beer Commision webrite, washingtonbeer.c...

Post as a guest

Earn Coins

1. Predict the Result.Draw and write a brief description of the Web page that will becreated...

CST 231 Web Systems Fall 2017 Due Friday, December 8, 2017 at 11:59pm. Choose three...

n the Labs Labs 1 and 2, which increase in difficulty, require you to create webpages based on what you learned in the...

HTML / CSS Content Requirements Create a home page with the following elements and settings: Set...

2 Apply Your Knowledge Reinforce the skills and apply the concepts you learned in this chapter Styling a Webpage Instru...

Code for the movies page: <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />...

Need help starting from question 9. I have tried multiple codes but the program says it is incorrect. Case Problem 1 Da...

In a seperate javascript file This step in brewing beer is to extract sugars from grains by soaking the grains in hot wate a different wor 3. JavaSeript/DOM Background: The first amount of sugar...

NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...

Hello, this is my code. moest of the things works but when select the price, i...

2. HTMIICSS Coding Write the XHITMI and CSS code necessary to recreate the following appearance on-screen. Adaprted from the WA.B.L page of the Washington Beer Commision webrite, washingtonbeer.c...

Homework Answers

Add Answer to: 2. HTMIICSS Coding Write the XHITMI and CSS code necessary to recreate the following appearance on-screen. Adaprted from the WA.B.L page of the Washington Beer Commision webrite, washingtonbeer.c...

Post as a guest

Earn Coins

Add Answer to:
2. HTMIICSS Coding Write the XHITMI and CSS code necessary to recreate the following appearance on-screen. Adaprted from the WA.B.L page of the Washington Beer Commision webrite, washingtonbeer.c...