HTML and CSS Reference
In-Depth Information
The code for this exercise can be found in folder 8.
1.
Open the
index.html
file in your text editor.
2.
Add a
<section>
element within the main content
<div>
and give it an ID of
feature
.
<!-- Main Content -->
<div>
<!-- Feature -->
<section id="feature">
The Main Feature Banner Goes Here
</section>
</div>
3.
Now add another
<section>
element below that one, this time with the ID of
home-text
.
<!-- Main Content -->
<div>
<!-- Feature -->
<section id="feature">...</section>
<!-- Home Text -->
<section id="home-text">
The Company Information Goes Here
</section>
</div>
4.
Finally, add a third
<section>
element with the ID of
offers
.
<!-- Main Content -->
<div>
<!-- Feature -->
<section id="feature">...</section>
<!-- Home Text -->
<section id="home-text">...</section>
<!-- Special Offers -->
<section id="offers">
The Special Offers Go Here
</section>
</div>
5.
Save the file.
6.
Open the
index.html
file in your web browser.
7.
Inspect the page using your developer tools and make sure that these
<section>
elements are displayed in the following order: feature, home text, special offers.
Figure 2-10 shows how the page should look.
