Skip to content

Commit 530447d

Browse files
matowdevmatowdev
committed
[proj. Lounge] Add wrap, states for links
Adding wrapping for a specific block, styling.. states for links. LP from Books
1 parent d1fe49a commit 530447d

3 files changed

Lines changed: 91 additions & 33 deletions

File tree

‎Learning_HTML_CSS_Freeman_E/Lounge/beverages/elixir.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,28 +13,28 @@ <h1>Our Elixirs</h1>
1313

1414
<h2>Green Tea Cooler</h2>
1515
<p class="green-tea">
16-
<img src="../img/green.jpg" alt="Image: Green Tea Cooler">
16+
<img src="../images/green.jpg" alt="Image: Green Tea Cooler">
1717
Chock full of vitamins and minerals, this elixir combines the healthful benefits of green tea with a twist of
1818
chamomile blossoms and ginger root.
1919
</p>
2020

2121
<h2>Raspberry Ice Concentration</h2>
2222
<p class="raspberry-ice">
23-
<img src="../img/lightblue.jpg" alt="Image: Raspberry Ice Concentration">
23+
<img src="../images/lightblue.jpg" alt="Image: Raspberry Ice Concentration">
2424
Combining raspberry juice with lemon grass, citrus peel and rosehips, this icy drink will make your mind feel and
2525
crisp.
2626
</p>
2727

2828
<h2>Blueberry Bliss Elixir</h2>
2929
<p class="blueberry-bliss">
30-
<img src="../img/blue.jpg" alt="Image: Blueberry Bliss Elixir">
30+
<img src="../images/blue.jpg" alt="Image: Blueberry Bliss Elixir">
3131
Blueberries and cherry essence mixed into a base of elderflower herb tea will put you in a relaxed state of bliss in
3232
no time.
3333
</p>
3434

3535
<h2>Cranberry Antioxidant Blast</h2>
3636
<p class="cranberry-antioxidant">
37-
<img src="../img/red.jpg" alt="Image: Cranberry Antioxidant Blast">
37+
<img src="../images/red.jpg" alt="Image: Cranberry Antioxidant Blast">
3838
Wake up to the flavors of cranberry and hibiscus in this vitamin C rich elixir.
3939
</p>
4040

‎Learning_HTML_CSS_Freeman_E/Lounge/css/style.css‎

Lines changed: 61 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
body {
2-
font-family: Verdana, Helvetica, Arial, sans-serif;
32
font-size: small;
43
line-height: 1.6em;
4+
font-family: Verdana, Helvetica, Arial, sans-serif;
55
}
66

77
h1,
@@ -23,11 +23,66 @@ h2 {
2323
border: 2px dashed white;
2424
padding: 25px;
2525
padding-left: 80px;
26-
font-family: Georgia, Times, serif;
2726
line-height: 1.9em;
27+
font-family: Georgia, Times, serif;
2828
color: #444;
29-
background-color: #a7cece;
30-
background-image: url("../images/background.gif");
31-
background-repeat: no-repeat;
32-
background-position: top left;
29+
background: #a7cece url("../images/background.gif") no-repeat top left;
30+
}
31+
32+
a:link {
33+
color: green;
34+
}
35+
36+
a:visited {
37+
color: red;
38+
}
39+
40+
a:hover {
41+
color: orange;
42+
}
43+
44+
#elixirs {
45+
margin-left: 20px;
46+
border: 1px solid #007e7e;
47+
padding: 0 20px 20px;
48+
width: 200px;
49+
line-height: 1.1;
50+
text-align: center;
51+
background: white url("../images/cocktail.gif") repeat-x;
52+
}
53+
54+
#elixirs h2 {
55+
color: black;
56+
}
57+
58+
#elixirs h3 {
59+
color: #d12c47;
60+
}
61+
62+
#elixirs a:link {
63+
color: #007e7e;
64+
}
65+
66+
#elixirs a:visited {
67+
color: #333;
68+
}
69+
70+
#elixirs a:hover {
71+
background: #f88396;
72+
color: #0d5353;
73+
}
74+
75+
.cd {
76+
font-style: italic;
77+
}
78+
79+
.artist {
80+
font-weight: bold;
81+
}
82+
83+
#footer {
84+
margin-top: 30px;
85+
font-size: 70%;
86+
line-height: normal;
87+
text-align: center;
3388
}

‎Learning_HTML_CSS_Freeman_E/Lounge/lounge.html‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -40,41 +40,44 @@ <h1>Welcome to the Head First Lounge</h1>
4040
title="Detailed Directions to the Lounge">detailed directions</a> to get you here in record time. No reservations
4141
necessary; come and join us anytime.</p>
4242

43-
<h2>Weekly Elixir Specials</h2>
44-
<p><img src="images/yellow.gif" alt="Lemon Breeze Elixir"></p>
43+
<div id="elixirs">
44+
<h2>Weekly Elixir Specials</h2>
4545

46-
<h3>Lemon Breeze</h3>
47-
<p class="text">The ultimate healthy drink, this elixir combines herbal botanicals, minerals, and vitamins with
48-
a twist of lemon into a smooth citrus wonder that will keep your immune system going all day and all night.</p>
46+
<p><img src="images/yellow.gif" alt="Lemon Breeze Elixir"></p>
47+
<h3>Lemon Breeze</h3>
48+
<p class="text">The ultimate healthy drink, this elixir combines herbal botanicals, minerals, and vitamins with
49+
a twist of lemon into a smooth citrus wonder that will keep your immune system going all day and all night.</p>
4950

50-
<p><img src="images/chai.gif" alt="Chai Chiller Elixir"></p>
51+
<p><img src="images/chai.gif" alt="Chai Chiller Elixir"></p>
52+
<h3>Chai Chiller</h3>
53+
<p class="text">Not your traditional chai, this elixir mixes mat&eacute; with chai spices and adds an extra
54+
chocolate kick for a caffeinated taste sensation on ice.</p>
5155

52-
<h3>Chai Chiller</h3>
53-
<p class="text">Not your traditional chai, this elixir mixes mat&eacute; with chai spices and adds an extra chocolate
54-
kick for a caffeinated taste sensation on ice.</p>
56+
<p><img src="images/black.gif" alt="Black Brain Brew Elixir"></p>
57+
<h3>Black Brain Brew</h3>
58+
<p class="text">Want to boost your memory? Try our Black Brain Brew elixir, made with black oolong tea and just a
59+
touch of espresso. Your brain will thank you for the boost.</p>
5560

56-
<p><img src="images/black.gif" alt="Black Brain Brew Elixir"></p>
57-
58-
<h3>Black Brain Brew</h3>
59-
<p class="text">Want to boost your memory? Try our Black Brain Brew elixir, made with black oolong tea and just a
60-
touch of espresso. Your brain will thank you for the boost.</p>
61-
<p class="text">Join us any evening for these and all our other wonderful <a href="beverages/elixir.html"
62-
title="Head First Lounge Elixirs">elixirs</a>.</p>
61+
<p class="text">Join us any evening for these and all our other wonderful <a href="beverages/elixir.html"
62+
title="Head First Lounge Elixirs">elixirs</a>.</p>
63+
</div>
6364

6465
<h2>What's playing at the Lounge</h2>
6566
<p class="text">We're frequently asked about the music we play at the lounge, and no wonder, it's great stuff. Just
6667
for you, we keep a list here on the site, updated weekly. Enjoy.</p>
6768

6869
<ul>
69-
<li>Buddha Bar, Claude Challe</li>
70-
<li>When It Falls, Zero 7</li>
71-
<li>Earth 7, L.T.J. Bukem</li>
72-
<li>Le Roi Est Mort, Vive Le Roi!, Enigma</li>
73-
<li>Music for Airports, Brian Eno</li>
70+
<li><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></li>
71+
<li><span class="cd">When It Falls</span>, <span class="artist">Zero 7</span></li>
72+
<li><span class="cd">Earth 7</span>, <span class="artist">L.T.J. Bukem</span></li>
73+
<li><span class="cd">Le Roi Est Mort</span>, <span class="artist">Vive Le Roi!, Enigma</span></li>
74+
<li><span class="cd">Music for Airports</span>, <span class="artist">Brian Eno</span></li>
7475
</ul>
7576

76-
<p class="text">&copy; 2012, Head First Lounge<br> All trademarks and registered trademarks appearing on this site are
77-
the property of their respective owners.</p>
77+
<div id="footer">
78+
<p class="text">&copy; 2012, Head First Lounge<br> All trademarks and registered trademarks appearing on
79+
this site are the property of their respective owners.</p>
80+
</div>
7881
</body>
7982

8083
</html>

0 commit comments

Comments
 (0)