HTML and CSS Reference
In-Depth Information
Meanwhile, back at the lounge…
Enough “theory” about
<div>
s
—
let's get one into the lounge page. Remember, we're trying to get all
the elixir elements into a group and then we're going to style it to make it look like the elixir handout. So,
open up your “lounge.html” file in the “chapter10/lounge” folder, locate the elixir elements, and then
insert opening and closing
<div>
tags around them.
Her
e's th
e open
ing ta
g,
and
we've
given
it an
id of
“elix
irs” to
ident
ify it
.
Rem
ember, we're just
sho
wing a snippet of
HT
ML from the enti
re
file
. When you open
“lou
nge.html”, you'll see
all
the markup for th
e
pag
e.
<div id="elixirs">
<h2>
Weekly Elixir Specials
</h2>
<p>
<img src="images/yellow.gif" alt="Lemon Breeze Elixir">
</p>
<h3>
Lemon Breeze
</h3>
<p>
The ultimate healthy drink, this elixir combines
herbal botanicals, minerals, and vitamins with
a twist of lemon into a smooth citrus wonder
that will keep your immune system going all
day and all night.
</p>
<p>
<img src="images/chai.gif" alt="Chai Chiller Elixir">
</p>
<h3>
Chai Chiller
</h3>
<p>
Not your traditional chai, this elixir mixes maté
with chai spices and adds an extra chocolate kick for
a caffeinated taste sensation on ice.
</p>
<p>
<img src="images/black.gif" alt="Black Brain Brew Elixir">
</p>
<h3>
Black Brain Brew
</h3>
<p>
Want to boost your memory? Try our Black Brain Brew
elixir, made with black oolong tea and just a touch
of espresso. Your brain will thank you for the boost.
</p>
<p>
Join us any evening for these and all our
other wonderful
<a href="beverages/elixir.html"
title="Head First Lounge Elixirs">
elixirs
</a>.
</p>
</div>
