Skip to content

Commit cc23a1c

Browse files
FrankLikuohaoFrankLikuohao
committed
update class5
1 parent ee24be5 commit cc23a1c

File tree

7 files changed

+210
-64
lines changed

7 files changed

+210
-64
lines changed

‎Practice/Class5/starbuzz/index.html

+62-49
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<head>
55
<meta charset="utf-8">
66
<title>Starbuzz Coffee</title>
7-
<link id="cssFile" rel="stylesheet" type="text/css" href="starbuzz.css">
7+
<link id="cssFile" rel="stylesheet" type="text/css" href="starbuzz.css">
88
<link href="./css/bootstrap.min.css" rel="stylesheet">
99
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
1010
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
@@ -55,6 +55,7 @@
5555
<option value="starbuzz-2.css">Layout 2 (sidebar right float)</option>
5656
<option value="starbuzz-3.css">Layout 3 (main left float)</option>
5757
<option value="starbuzz-4.css">Layout 4 (main left float & sidebar right float)</option>
58+
<option value="starbuzz-5.css">Layout 4 (allcontent div)</option>
5859
</select>
5960
</div>
6061
</div>
@@ -64,58 +65,70 @@
6465
</div>
6566
</div>
6667
<hr>
67-
<div id="header">
68-
<img src="images/header.gif" alt="Starbuzz Coffee header image">
69-
</div>
70-
<div id="main">
71-
<h1>QUALITY COFFEE, QUALITY CAFFEINE</h1>
72-
<p>
73-
At Starbuzz Coffee, we are dedicated to filling all your caffeine needs through our quality coffees and teas. Sure, we want you to have a great cup of coffee and a great coffee experience as well, but we're the only company that actively monitors and optimizes caffeine levels. So stop by and fill your cup, or order online with our new Bean Machine online order form, and get that quality Starbuzz coffee that you know will meet your caffeine standards.
74-
</p>
75-
<p>
76-
And, did we mention <em>caffeine</em>? We've just started funding the guys doing all the wonderful research at the <a href="http://buzz.wickedlysmart.com" title="Read all about caffeine on the Buzz">Caffeine Buzz</a>. If you want the latest on coffee and other caffeine products, stop by and pay them a visit.
77-
</p>
78-
<h1>OUR STORY</h1>
79-
<p>
80-
"A man, a plan, a coffee bean". Okay, that doesn't make a palindrome, but it resulted in a damn good cup of coffee. Starbuzz's CEO is that man, and you already know his plan: a Starbuzz on every corner.
81-
</p>
82-
<p>In only a few years he's executed that plan and today you can enjoy Starbuzz just about anywhere. And, of course, the big news this year is that Starbuzz teamed up with Head First readers to create Starbuzz's Web presence, which is growing rapidly and helping to meet the caffeine needs of a whole new set of customers.
83-
</p>
84-
<h1>STARBUZZ COFFEE BEVERAGES</h1>
85-
<p>
86-
We've got a variety of caffeinated beverages to choose from at Starbuzz, including our
87-
<a href="beverages.html#house" title="House Blend">House Blend</a>,
88-
<a href="beverages.html#mocha" title="Mocha Cafe Latte">Mocha Cafe Latte</a>,
89-
<a href="beverages.html#cappuccino" title="Cappuccino">Cappuccino</a>, and a favorite of our customers,
90-
<a href="beverages.html#chai" title="Chai Tea">Chai Tea</a>.
91-
</p>
92-
<p>
93-
We also offer a variety of coffee beans, whole or ground, for you to take home with you. Order your coffee today using our online
94-
<a href="form.html">Bean Machine</a>, and take the Starbuzz Coffee experience home.
95-
</p>
96-
</div>
97-
<div id="sidebar">
98-
<p class="beanheading">
99-
<img src="images/bag.gif" alt="Bean Machine bag">
100-
<br> ORDER ONLINE with the
101-
<a href="form.html">BEAN MACHINE</a>
102-
<br>
103-
<span class="slogan">
68+
<div id="allcontent">
69+
<div id="header">
70+
<img src="images/header.gif" alt="Starbuzz Coffee header image">
71+
</div>
72+
<div id="main">
73+
<h1>QUALITY COFFEE, QUALITY CAFFEINE</h1>
74+
<p>
75+
At Starbuzz Coffee, we are dedicated to filling all your caffeine needs through our quality coffees and teas. Sure, we want
76+
you to have a great cup of coffee and a great coffee experience as well, but we're the only company that
77+
actively monitors and optimizes caffeine levels. So stop by and fill your cup, or order online with our new
78+
Bean Machine online order form, and get that quality Starbuzz coffee that you know will meet your caffeine
79+
standards.
80+
</p>
81+
<p>
82+
And, did we mention <em>caffeine</em>? We've just started funding the guys doing all the wonderful research
83+
at the <a href="http://buzz.wickedlysmart.com" title="Read all about caffeine on the Buzz">Caffeine Buzz</a>.
84+
If you want the latest on coffee and other caffeine products, stop by and pay them a visit.
85+
</p>
86+
<h1>OUR STORY</h1>
87+
<p>
88+
"A man, a plan, a coffee bean". Okay, that doesn't make a palindrome, but it resulted in a damn good cup of coffee. Starbuzz's
89+
CEO is that man, and you already know his plan: a Starbuzz on every corner.
90+
</p>
91+
<p>In only a few years he's executed that plan and today you can enjoy Starbuzz just about anywhere. And, of course,
92+
the big news this year is that Starbuzz teamed up with Head First readers to create Starbuzz's Web presence,
93+
which is growing rapidly and helping to meet the caffeine needs of a whole new set of customers.
94+
</p>
95+
<h1>STARBUZZ COFFEE BEVERAGES</h1>
96+
<p>
97+
We've got a variety of caffeinated beverages to choose from at Starbuzz, including our
98+
<a href="beverages.html#house" title="House Blend">House Blend</a>,
99+
<a href="beverages.html#mocha" title="Mocha Cafe Latte">Mocha Cafe Latte</a>,
100+
<a href="beverages.html#cappuccino" title="Cappuccino">Cappuccino</a>, and a favorite of our customers,
101+
<a href="beverages.html#chai" title="Chai Tea">Chai Tea</a>.
102+
</p>
103+
<p>
104+
We also offer a variety of coffee beans, whole or ground, for you to take home with you. Order your coffee today using our
105+
online
106+
<a href="form.html">Bean Machine</a>, and take the Starbuzz Coffee experience home.
107+
</p>
108+
</div>
109+
<div id="sidebar">
110+
<p class="beanheading">
111+
<img src="images/bag.gif" alt="Bean Machine bag">
112+
<br> ORDER ONLINE with the
113+
<a href="form.html">BEAN MACHINE</a>
114+
<br>
115+
<span class="slogan">
104116
FAST <br>
105117
FRESH <br>
106118
TO YOUR DOOR <br>
107119
</span>
108-
</p>
109-
<p>
110-
Why wait? You can order all our fine coffees right from the Internet with our new, automated Bean Machine. How does it work? Just click on the Bean Machine link, enter your order, and behind the scenes, your coffee is roasted, ground (if you want), packaged, and shipped to your door.
111-
</p>
112-
</div>
113-
</div>
114-
</div>
115-
<div id="footer">
116-
&copy; 2012, Starbuzz Coffee
117-
<br> All trademarks and registered trademarks appearing on this site are the property of their respective owners.
120+
</p>
121+
<p>
122+
Why wait? You can order all our fine coffees right from the Internet with our new, automated Bean Machine. How does it work?
123+
Just click on the Bean Machine link, enter your order, and behind the scenes, your coffee is roasted, ground
124+
(if you want), packaged, and shipped to your door.
125+
</p>
126+
</div>
127+
<div id="footer">
128+
&copy; 2012, Starbuzz Coffee
129+
<br> All trademarks and registered trademarks appearing on this site are the property of their respective owners.
130+
</div>
118131
</div>
119132
</body>
120133

121-
</html>
134+
</html>

‎Practice/Class5/starbuzz/starbuzz-1.css

+1-3
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,7 @@ a:visited {
7979

8080

8181
#allcontent {
82-
width: 800px;
83-
margin-left: auto;
84-
margin-right: auto;
82+
8583
}
8684

8785
#award {

‎Practice/Class5/starbuzz/starbuzz-2.css

+1-3
Original file line numberDiff line numberDiff line change
@@ -81,9 +81,7 @@ a:visited {
8181

8282

8383
#allcontent {
84-
width: 800px;
85-
margin-left: auto;
86-
margin-right: auto;
84+
8785
}
8886

8987
#award {

‎Practice/Class5/starbuzz/starbuzz-3.css

+1-3
Original file line numberDiff line numberDiff line change
@@ -81,9 +81,7 @@ a:visited {
8181

8282

8383
#allcontent {
84-
width: 800px;
85-
margin-left: auto;
86-
margin-right: auto;
84+
8785
}
8886

8987
#award {

‎Practice/Class5/starbuzz/starbuzz-4.css

+1-3
Original file line numberDiff line numberDiff line change
@@ -83,9 +83,7 @@ a:visited {
8383

8484

8585
#allcontent {
86-
width: 800px;
87-
margin-left: auto;
88-
margin-right: auto;
86+
8987
}
9088

9189
#award {

‎Practice/Class5/starbuzz/starbuzz-5.css

+143
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
body {
2+
background-color: #b5a789;
3+
font-family: Georgia, "Times New Roman", Times, serif;
4+
font-size: small;
5+
margin: 0px;
6+
}
7+
8+
#main >h3 {
9+
color: #cc33ff;
10+
}
11+
12+
#header {
13+
background-color: #675c47;
14+
margin: 10px;
15+
height: 108px;
16+
}
17+
18+
#drinks {
19+
background: #efe5d0 url(images/background.gif) top left;
20+
font-size: 105%;
21+
padding: 15px;
22+
margin: 0px 10px 10px 10px;
23+
}
24+
25+
#main {
26+
background: #efe5d0 url(images/background.gif) top left;
27+
font-size: 105%;
28+
padding: 15px;
29+
margin: 0px 10px 10px 10px;
30+
width: 75%;
31+
float: left;
32+
}
33+
34+
#sidebar {
35+
background: #efe5d0 url(images/background.gif) bottom right;
36+
font-size: 105%;
37+
padding: 15px;
38+
margin: 0px 10px 10px 10px;
39+
width: 20%;
40+
float: right;
41+
}
42+
43+
#footer {
44+
background-color: #675c47;
45+
color: #efe5d0;
46+
text-align: center;
47+
padding: 15px;
48+
margin: 10px;
49+
margin-top: 0px;
50+
font-size: 90%;
51+
clear: both;
52+
}
53+
54+
h1 {
55+
font-size: 120%;
56+
color: #954b4b;
57+
}
58+
59+
.slogan {
60+
color: #954b4b;
61+
}
62+
63+
.beanheading {
64+
text-align: center;
65+
line-height: 1.8em;
66+
}
67+
68+
p:hover {
69+
color: red;
70+
}
71+
72+
a:link {
73+
color: #b76666;
74+
text-decoration: none;
75+
border-bottom: thin dotted #b76666;
76+
}
77+
78+
a:visited {
79+
color: #675c47;
80+
text-decoration: none;
81+
border-bottom: thin dotted #675c47;
82+
}
83+
84+
85+
#allcontent {
86+
width: 800px;
87+
margin-left: auto;
88+
margin-right: auto;
89+
}
90+
91+
#award {
92+
position: absolute;
93+
top: 30px;
94+
left: 300px;
95+
}
96+
97+
#ticket {
98+
position: fixed;
99+
top: 50%;
100+
left: -250px;
101+
102+
}
103+
104+
nav {
105+
position: relative;
106+
height: 1em;
107+
margin: 10px;
108+
}
109+
110+
#menu {
111+
position: absolute;
112+
top: 0;
113+
right: 0;
114+
}
115+
116+
#menu,
117+
#menu ul {
118+
list-style: none;
119+
background-color: #efe5d0;
120+
padding: 0;
121+
margin: 0;
122+
}
123+
124+
#menu li {
125+
float: left;
126+
}
127+
128+
#menu li a {
129+
display: block;
130+
padding: 4px;
131+
width: 10em;
132+
}
133+
134+
#menu li ul {
135+
position: absolute;
136+
left: -999em;
137+
width: 10em;
138+
}
139+
140+
#menu li:hover ul,
141+
#menu li ul:hover {
142+
left: auto;
143+
}

‎Practice/Class5/starbuzz/starbuzz.css

+1-3
Original file line numberDiff line numberDiff line change
@@ -76,9 +76,7 @@ a:visited {
7676

7777

7878
#allcontent {
79-
width: 800px;
80-
margin-left: auto;
81-
margin-right: auto;
79+
8280
}
8381

8482
#award {

0 commit comments

Comments
 (0)