Here is my current code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Eggbeater Documentation Page</title>
</head>
<body>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<p> In this project I am going to build a Technical Documentation site for an Oster eggbeater.</p>
<p> I am going to use the following code elements to do this: </p>
<code>Nav,</code>
<code>P,</code>
<code>Li (both OL and UL),</code>
<code>Code,</code>
<code>Section,</code>
<code>Header,</code>
<code>Main,</code>
<code> and a.</code>
</section>
<section class="main-section" id="Eggbeater">
<header>Eggbeater</header>
<p> Welcome to the user manual for the Oster Hand Mixer with Retractable Cord.</p>
<p> Model Numver: FPSTHM2578</p>
</section>
<section class="main-section" id="Safety">
<header>Safety<header>
<p> Please adhere to the following safety precaustions to ensure proper use and safety with this machine. </p>
<ul>
<li>To protect against risk of electrical shock, do not put hand mixer in water or
other liquid. This may cause personal injury and/or damage to the product.</li>
<li>To disconnect, turn off controls and unplug from outlet.</li>
<li>lose supervision is necessary when any appliance is used by or near children.</li>
<li>nplug from outlet while not in use, before putting on or taking off parts and
before cleaning.</li>
<li>Avoid contact with moving parts. Keep hands, hair, clothing, as well as spatulas
and other utensils away from beaters during operation to reduce the risk of
injury to persons and/or damage to the hand mixer.</li>
<li>Do not operate hand mixer with a damaged cord or plug, after the appliance
malfunctions, or if it is dropped or damaged in any manner. Return appliance
to the nearest Authorized Sunbeam Service Center for examination, repair or
electrical or mechanical adjustment.</li>
<li>Do not use with an extension cord.</li>
<li>The use of attachments not recommended or sold by the manufacturer may
cause fire, electrical shock or injury.</li>
<li>Do not let cord hang over edge of table or countertop.</li>
<li>Do not let cord touch hot surfaces, including a stove. </li>
<li>Do not use outdoors or for commercial purposes.</li>
<li>Remove beaters from hand mixer before washing them.</li>
<li>Do not place hand mixer on or near a hot burner or in a heated oven.</li>
<li>Do not use hand mixer for other than intended use.</li>
<li>Do not leave hand mixer unattended while it is operating.</li>
<li>THIS UNIT IS FOR HOUSEHOLD USE ONLY</li>
<li>This appliance has a polarized plug (one blade is wider than the other). To reduce
the risk of electric shock, this plug will fit in a polarized outlet only one way. If the
plug does not fit fully in the outlet, reverse the plug. If it still does not fit, contact a
qualified electrician. Do not modify the plug in any way.</li>
</ul>
</section>
<section class="main-section" id="Heel_And_Bowl">
<header>Heel And Bowl</header>
<p>The heel & bowl rest keep the mixer resting on the
bowl or sitting upright on your counter</p>
</section>
<section class="main-section" id="Retractable_Cord">
<header>Retractable Cord</header>
<p>The cord has been designed to retract into the mixer
housing for convenient storage when not in use.
Button located on side of unit (see figure B). Retract
cord until you see the green part of the cord show up.
Do not retract beyond the red part of the cord.</p>
</section>
<section class="main-section" id="Eject_Button">
<header>Eject Button</header>
<p>This Oster® Hand Mixer features a convenient beater
eject button. The design allows for a smooth push
of the thumb to release the beaters or dough hooks. There will not be a noticeable
“click”.</p>
<p>Note: Make sure the mixer is turned off and unplugged before inserting or
removing attachments.</p>
</section>
<section class="main-section" id="Burst_Of_Power">
<header>Burst Of Power</header>
<p>The Burst of Power® feature allows for an added
boost to the selected speed setting at the press of the
button. During especially heavy mixing tasks, press
the button to drive through the mixture with ease.
Once the button is released, the mixer will return to
the original speed setting.</p>
</section>
<section class="main-section" id="Beaters">
<header>Beaters</header>
<p>The beater design allows for thorough, fast mixing
results for all types of batters. The beaters are
dishwasher safe.</p>
</section>
<section class="main-section" id="Whisk">
<header>Whisk</header>
<p>The whisk is used to beat air into mixtures such as
egg whites, yolks or cream.</p>
</section>
<section class="main-section" id="Use">
<header>Use</header>
<p>Before using your mixer for the first time, wash the beaters and whisk in hot/soapy
water, or the dishwasher. Rinse and dry.
Be sure speed control is in the “OFF” position and power cord is unplugged from
an electrical outlet. Insert beaters one at a time, by placing stem end of beaters into the opening drive holes on the bottom of the mixer. Turn beater slightly and push
in until beater clicks into position.
Note that the beaters are interchangeable.
Firmly pull out a suitable length of cord and plug into an appropriate outlet.
DO NOT pull the cord out beyond the red mark or you may damage the cord.</p>
</section>
<section class="main-section" id="Mixing">
<header>Mixing</header>
<p>Slowly guide mixer around sides and through center of bowl, going in the same
direction. Be careful not to overbeat the mixture. Overbeating tends to make some
mixtures tough.
Whenever scraping of the bowl is required, stop the mixer and scrape sides and
bottom of bowl with a rubber spatula as needed. Turn speed control to “OFF” and
rest mixer on its heel rest while adding ingredients. Be sure to position beaters over
mixing bowl so any drippings will fall back into mixing bowl.
When mixing is complete, set speed control to “1” and raise beaters slowly from
batter to clean off clinging food. Be sure to turn unit to “off” before raising beaters
completely out of mixing bowl.</p>
</section>
<section class="main-section" id="Adjust_Speed">
<header>Adjust Speed</header>
<p>You can select a speed by turning the position selector to the speed required,
from Speed 1 to Speed 6.</p>
<p>No matter where the position selector is situated, you can get a higher speed
immediately by pressing the “Burst” button.
</p>
<p>Note: Do not press the “Burst” button if the position selector is at the “0”
position. This may damage the mechanism.</p>
</section>
<section class="main-section" id="Select_Speeds">
<header>Select Speeds</header>
<p>Speeds 1 through 6: For continuous use of stirring, beating or mixing of ingredients
and thin batters. May also be useful for whipping egg whites or flour into various
doughs. May be used in mixing cake dough, making sauces and even heavy
doughs</p>
</section>
<section class="main-section" id="Ejecting">
<header>Ejecting</header>
<p>Be sure speed control is at the “OFF” position and cord is removed from electrical
outlet. Scrape off any excess batter with a rubber spatula. Grasp the stems of the
beaters with your hand and press the beater eject button. Beaters will release into
your hand.</p>
</section>
<section class="main-section" id="Tool_Use">
<header>Tool Use</header>
<p>Two mixer tools are used as follows:</p>
<p>Beaters: For easy mixing of dough, eggs, cream, mayonnaise and for
mixing or stirring sauces and pudding powders.</p>
<p>Whisk: Used for beating air into mixture such as egg whites, meringue,
scrambled eggs, or cream.</p>
</section>
<section class="main-section" id="Care">
<header>Care</header>
<ol>
<li>Before cleaning any part of the mixer, set the position selector to the “OFF”
position, then unplug the cord from the outlet and eject the beaters.</li>
<li>Wash the beaters before and after every use. The beaters may be washed in hot,
soapy water or in a dishwasher.</li>
<li>The mixer and the cord can be cleaned with a damp cloth but the final clean
must be with a dry cloth.</li>
<li>To remove stubborn spots, wipe surfaces with a piece of cloth, slightly
dampened, in soapy water or a mild, non-abrasive cleaner.</li>
<li>Do not use any abrasive cleaner or material to clean any part of the hand mixer,
as it can harm the body of the product.</li>
<li>After removing cord from electrical outlet, clean mixer head with a damp
cloth. Dry all parts thoroughly before using them again. DO NOT IMMERSE
MIXER IN WATER. This may cause electric shock, injury, or damage to the
product. Avoid the use of abrasive cleaners that will damage the finish of your
mixer.</li>
</ol>
</section>
<section class="main-section" id="Storage">
<header>Storage</header>
<p>Hold the plug end by hand and press the cord retract button to reel the cord into
the mixer housing (failure to hold plug may cause plug to whip around). Note
that the last few inches of cord may need to be pushed into the housing while the
release button is depressed. Store the hand mixer on its heel rest in a clean, dry
location such as a cabinet or shelf. Store beaters in a drawer.</p>
</section>
<section class="main-section" id="Maintenence">
<header>Maintenence</header>
<p>Other than the recommended cleaning, no further user maintenance should be
necessary. If for any reason your hand mixer should require repairs, do not try to
fix it yourself. Send it to the nearest Authorized Sunbeam Appliance Service Center.</p>
<p>Caution: The speed of the cord reel is high. Please hold the plug end by hand
before pressing the release button.</p>
<p>Do Not Allow Children To Use Retractable
Cord Feature as the Cord May Cause Injury.</p>
<p>All other servicing should be performed by an Authorized Service Representative.</p>
</section>
<section class="main-section" id="Warranty">
<header>Warranty</header>
<p>Sunbeam Products, Inc. doing business as Jarden Consumer Solutions, or if in Canada, Sunbeam
Corporation (Canada) Limited doing business as Jarden Consumer Solutions (collectively “JCS”)
warrants that for a period of one year from the date of purchase, this product will be free from defects
in material and workmanship. JCS, at its option, will repair or replace this product or any component
of the product found to be defective during the warranty period. Replacement will be made with a new
or remanufactured product or component. If the product is no longer available, replacement may be
made with a similar product of equal or greater value. This is your exclusive warranty.
This warranty is valid for the original retail purchaser from the date of initial retail purchase and
is not transferable. Keep the original sales receipt. Proof of purchase is required to obtain warranty
performance. JCS dealers, service centers, or retail stores selling JCS products do not have the right
to alter, modify or any way change the terms and conditions of this warranty.
This warranty does not cover normal wear of parts or damage resulting from any of the following:
negligent use or misuse of the product, use on improper voltage or current, use contrary to the
operating instructions, disassembly, repair or alteration by anyone other than JCS or an authorized
Sunbeam service center. Further, the warranty does not cover: Acts of God, such as fire, flood,
hurricanes and tornadoes.</p>
</section>
<section class="main-section" id="Reference">
<header>Reference</header>
<p> All of the documentation in this page is taken from <a href="https://www.oster.ca">Oster.ca</a></p>
</section>
</main>
<nav id="navbar">
<header>Eggbeater Documentation</header>
<ul>
<li><a href="#Introduction" class="nav-link">Introduction</a></li>
<li><a href="#Eggbeater" class="nav-link">Eggbeater</a></li>
<li><a href="#Safety" class="nav-link">Safety</a></li>
<li><a href="#Heel_And_Bowl" class="nav-link">Heel And Bowl</a></li>
<li><a href="#Retractable_Cord" class="nav-link">Retractable Cord</a></li>
<li><a href="#Eject_Button" class="nav-link">Eject Button</a></li>
<li><a href="#Burst_Of_Power" class="nav-link">Burst Of Power</a></li>
<li><a href="#Beaters" class="nav-link">Beaters </a></li>
<li><a href="#Whisk" class="nav-link">Whisk</a></li>
<li><a href="#Use" class="nav-link">Use</a></li>
<li><a href="#Mixing" class="nav-link">Mixing</a></li>
<li><a href="#Adjust_Speed" class="nav-link">Adjust Speed</a></li>
<li><a href="#Select_Speeds" class="nav-link">Select Speeds</a></li>
<li><a href="#Ejecting" class="nav-link">Ejecting</a></li>
<li><a href="#Tool_Use" class="nav-link">Tool Use</a></li>
<li><a href="#Care" class="nav-link">Care</a></li>
<li><a href="#Storage" class="nav-link">Storage </a></li>
<li><a href="#Maintenence" class="nav-link">Maintenence</a></li>
<li><a href="#Warranty" class="nav-link">Warranty</a></li>
<li><a href="#Reference" class="nav-link">Reference</a></li>
</ul>
</nav>
</body>
</html>
And here is the CSS:
html,
body {
min-width: 290px;
color: black;
background-color: white;
font-family: Calibri, sans-serif;
line-height: 1.5;
}
#navbar {
position: fixed;
min-width: 290px;
top: 0px;
left: 0px;
width: 300px;
height: 100%;
border-right: solid;
border-color: grey;
}
header {
color: black;
margin: 10px;
text-align: center;
font-size: 1.8em;
font-weight: bold;
}
#main-doc header {
text-align: center;
margin: 0px;
}
#navbar ul {
height: 75%;
padding: 0;
overflow-x: hidden;
}
#navbar li {
color: black;
border-top: 1px solid;
list-style: none;
position: relative;
width: 100%;
}
#navbar a {
display: block;
padding: 10px 30px;
color: #4d4e53;
text-decoration: none;
cursor: pointer;
}
#main-doc {
position: absolute;
margin-left: 310px;
padding: 20px;
margin-bottom: 110px;
}
section article {
color: black;
margin: 15px;
font-size: 15rem;
}
section li {
margin: 15px 0px 0px 20px;
}
code {
display: block;
text-align: left;
white-space: pre-line;
position: relative;
word-break: normal;
word-wrap: normal;
line-height: 2;
background-color: grey;
padding: 15px;
margin: 10px;
border-radius: 5px;
}
@media only screen and (max-width: 815px) {
#navbar ul {
border: 1px solid;
height: 207px;
}
#navbar {
background-color: white;
position: absolute;
top: 0;
padding: 0;
margin: 0;
width: 100%;
max-height: 275px;
border: none;
z-index: 1;
border-bottom: 2px solid;
}
#main-doc {
position: relative;
margin-left: 0px;
margin-top: 120px;
}
}
code {
margin-left: -20px;
width: 100%;
padding: 15px;
padding-left: 10px;
padding-right: 45px;
min-width: 233px;
}
}
#safety ul {
font-size: 12px;;
}
Now every one of the tests are passing except for two, and I’ve corss checked them a million times and cannot seem to figure it out.
Functionally everything works. But I can’ figure out what is causing it to flunk.
This is also a cert project, so I DEFINATELY want to get it submitted to a 100% pass.
These are tests it’s flunking:
1) Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_) for the id’s.
2) Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).
Any help would be appreciated.
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:105.0) Gecko/20100101 Firefox/105.0
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge:
