HTML and CSS Reference
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…
<img src="images/yellow.gif" alt="Lemon Breeze Elixir">
<h3> Lemon Breeze </h3>
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.
<img src="images/chai.gif" alt="Chai Chiller Elixir">
A nd this
structur e is
each elix ir.
<h3> Chai Chiller </h3>
Not your traditional chai, this elixir mixes maté
with chai spices and adds an extra chocolate kick for
a caffeinated taste sensation on ice.
<img src="images/black.gif" alt="Black Brain Brew Elixir">
<h3> Black Brain Brew </h3>
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.
An d, fi nally, at th e
bo ttom , ther e is
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.
title="Head First Lounge Elixirs"> elixirs </a>.