HTML and CSS Reference
In-Depth Information
A close look at the elixirs HTML
Alice sure has asked for a tall order, hasn't she? She wants us to take the existing lounge HTML
and make it look like the handout menu. Hmmm…that looks challenging, but
we do
have CSS
on our side, so let's give it a try. But before we jump right into styling, let's get an overview
of the existing HTML. Here's just the HTML snippet for the elixir specials; you'll find it in
“lounge.html” in the “chapter10/lounge” folder:
The
elixir sp
ecials se
ction be
gins
with
an <h2
> headi
ng.
<h2>
Weekly Elixir Specials
</h2>
Ea
ch elixir
has
an
image in
a
<p
> elemen
t.
…a name, in
an
<h3> headi
ng…
<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">
A
nd this
structur
e is
repeated
for
each elix
ir.
</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>
An
d, fi
nally,
at th
e
bo
ttom
, ther
e is
<p>
an
othe
r para
graph
, wit
h
Join us any evening for these and all our
so
me t
ext a
nd a l
ink to
t
he rea
l elix
irs pa
ge.
other wonderful
<a href="beverages/elixir.html"
title="Head First Lounge Elixirs">
elixirs
</a>.
</p>
