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>
<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">
<h3> Chai Chiller </h3>
Not your traditional chai, this elixir mixes mat&eacute;
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.
Join us any evening for these and all our
other wonderful
<a href="beverages/elixir.html"
title="Head First Lounge Elixirs"> elixirs </a>.
Search WWH ::

Custom Search