Halloween 10 Create a page that uses a table In this exercise, you\'ll create a
ID: 3774540 • Letter: H
Question
Halloween 10 Create a page that uses a table In this exercise, you'll create a page that uses a table to present a list of products. When you're through, the page should look similar to this: Haloween C 127.0.0 1 8020, HTML5%20Halloween 20Solutions/ch10/products/indexhtml The Halloween Store For the little Goblin in all of us! product List Decorating Ideas Join Email Personal Home Product List Props Category Description Price Costumes 20" Deranged cat Props $39.99 Special FX $14.99 $14.99 Masks $19.99 20" Uklier rat Plastic skeleton $12.50 Costumes Austin Powers $79.50 $49.99 Erankstein $69.99 Special Effects Eog machine $34.99 Fog i $9.99 Mini strobe lioht $14.99 Masks Freddy $44 $124. Darth Vader 2016 Ben MurachExplanation / Answer
Hi,
Pleasesee below the HTML and CSS files. Pleaselet me knoeif you need any changes. Also please share the image if you have.
Halloween.html
<htm>
<head>
<link rel="stylesheet" type="text/css" href="halloweenstyles.css">
</head>
<body>
<div id="mainContent">
<div id="header" class="header">
<h1> The Halloween Store</h1>
<h3>For the little Goblinal of us!<h3>
</div>
<div id="navBar" class="navBar">
<ul>
<li>Home</li>
<li>Product List</li>
<li>Personal</li>
<li>Decorating Ideas</li>
<li>Join Email</li>
</ul>
</div>
<div id="sideBar" class="sideBar">
<div id="sideBarElem" class="sideBarElem">
<b>Props</b>
</div>
<div id="sideBarElem" class="sideBarElem">
<b>Costumes</b>
</div>
<div id="sideBarElem" class="sideBarElem">
<b>Special Fix</b>
</div>
<div id="sideBarElem" class="sideBarElem">
<b>Masks</b>
</div>
</div>
<div id="body" class="body">
<div class="bodyHeader"><h2>Product List</h2></div>
<table class="itemstable">
<tr><td><b>Category</b></td><td><b>Description</b></td><td><b>Price</b></td></tr>
<tr>
<td><b>Props</b></td>
<td>
<table>
<tr><td><u>20" Deranged cat</u></td></tr>
<tr><td><u>Flying bats</u></td></tr>
<tr><td><u>16" Ugly rat</u></td></tr>
<tr><td><u>20" Uglier rat</u></td></tr>
<tr><td><u>Plastinc skeleton</u></td></tr>
</table>
</td>
<td>
<table>
<tr><td class="tdbg">$39.99</td></tr>
<tr><td class="tdbg">$14.99</td></tr>
<tr><td class="tdbg">$14.99</td></tr>
<tr><td class="tdbg">$19.99</td></tr>
<tr><td class="tdbg">$12.50</td></tr>
</table>
</td>
</tr>
<tr>
<td><b>Costumes</b></td>
<td>
<table>
<tr><td><u>Austin Powers</u></td></tr>
<tr><td><u>Frankstein</u></td></tr>
<tr><td><u>Martian</u></td></tr>
</table>
</td>
<td>
<table>
<tr><td class="tdbg">$79.50</td></tr>
<tr><td class="tdbg">$49.99</td></tr>
<tr><td class="tdbg">$69.99</td></tr>
</table>
</td>
</tr>
<tr>
<td><b>Special Effects</b></td>
<td>
<table>
<tr><td><u>Fog machine</u></td></tr>
<tr><td><u>Fog juice</u></td></tr>
<tr><td><u>Mini strobe light</u></td></tr>
</table>
</td>
<td>
<table>
<tr><td class="tdbg">$34.99</td></tr>
<tr><td class="tdbg">$9.99</td></tr>
<tr><td class="tdbg">$14.99</td></tr>
</table>
</td>
</tr>
<tr>
<td><b>Masks</b></td>
<td>
<table>
<tr><td>Freddy</td></tr>
<tr><td>Darth Vader</td></tr>
</table>
</td>
<td>
<table>
<tr><td class="tdbg">$44.50</td></tr>
<tr><td class="tdbg">$124.50</td></tr>
</table>
</td>
</tr>
</table>
</div>
<div id="footer" class="footer">
@ 2016 Ben Murach
</div>
</div>
</body>
</html>
holloweenstyles.css
/*halloween store style*/
.header{
background: linear-gradient(to right top,white,orange, #293f50);
float: left;
width: 100%;
height: 104px;
}
.navBar{
background: black;
}
.navBar ul{
list-style-type: none;
padding: 16px 10px 10px 10px;
}
.navBar ul li{
color: white;
margin-right:160px;
display : inline;
}
.body{
position: absolute;
margin-left: 160px;
}
.body .itemstable{
margin-left:155px;
width: 100%;
}
.sideBar{
float:left;
height:100%;
padding-left: 20px;
}
.footer{
position: absolute;
margin-top: 453px;
background: linear-gradient(to right top,black,orange, white);
width: 100%;
text-align: center;
height:30px;
}
.sideBarElem{
background: orange;
border-color: black;
border-style: solid;
margin-top: 16px;
height: 32px;
width: 100%;
padding-left: 20px;
}
.bodyHeader{
padding: 1px 0px 0px 327px;
}
.tdbg {
background:wheat;
}
Thanks,
Anita
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.