Skip to content

Commit 08407d2

Browse files
matowdevmatowdev
committed
[proj. Starbuzz] Add decorative img's, position
Positioning: absolute, fixed of images on the main page, styling. LP from Books
1 parent 5bc24f4 commit 08407d2

4 files changed

Lines changed: 79 additions & 230 deletions

File tree

‎Learning_HTML_CSS_Freeman_E/Starbuzz/blog-complete.html‎

Lines changed: 0 additions & 178 deletions
This file was deleted.

‎Learning_HTML_CSS_Freeman_E/Starbuzz/blog.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33

44
<head>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Starbuzz Coffee - Blog</title>
8-
<link rel="stylesheet" href="css/style.css">
8+
<link rel="stylesheet" href="css/starbuzz.css">
99
</head>
1010

1111
<body>
@@ -96,11 +96,11 @@ <h1>Most unique patron of the month </h1>
9696
How does it work? Just click on the Bean Machine link, enter your order, and behind the scenes, your coffee is
9797
roasted, ground (if you want), packaged, and shipped to your door.</p>
9898
</aside>
99-
</div> <!-- tableRow -->
100-
</div> <!-- tableContainer -->
99+
</div>
100+
</div>
101101

102102
<footer>
103-
&copy; 2012, Starbuzz Coffee<br>
103+
&copy; 2023, Starbuzz Coffee<br>
104104
All trademarks and registered trademarks appearing on
105105
this site are the property of their respective owners.
106106
</footer>

Learning_HTML_CSS_Freeman_E/Starbuzz/css/style.css renamed to Learning_HTML_CSS_Freeman_E/Starbuzz/css/starbuzz.css

Lines changed: 61 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
body {
22
margin: 0;
3+
min-width: 576px;
34
font-size: small;
45
font-family: Georgia, "Times New Roman", Times, serif;
56
background-color: #b5a789;
@@ -15,9 +16,37 @@ header.top img#headerSlogan {
1516
float: right;
1617
}
1718

19+
nav {
20+
margin: 10px 10px 0 10px;
21+
background-color: #efe5d0;
22+
}
23+
24+
nav ul {
25+
margin: 0;
26+
padding: 5px 0 5px 0;
27+
list-style-type: none;
28+
}
29+
30+
nav ul li {
31+
display: inline;
32+
padding: 5px 10px 5px 10px;
33+
}
34+
35+
nav ul li a:link,
36+
nav ul li a:visited {
37+
border-bottom: none;
38+
font-weight: bold;
39+
color: #954b4b;
40+
}
41+
42+
nav ul li.selected {
43+
background-color: #c8b99c;
44+
}
45+
1846
div#tableContainer {
1947
display: table;
2048
border-spacing: 10px;
49+
min-height: 700px;
2150
}
2251

2352
div#tableRow {
@@ -32,7 +61,15 @@ section#drinks {
3261
background-color: #efe5d0;
3362
}
3463

35-
/* added section#blog for blog */
64+
h1 {
65+
font-size: 120%;
66+
color: #954b4b;
67+
}
68+
69+
h2 {
70+
font-size: 110%;
71+
}
72+
3673
section#main,
3774
section#blog {
3875
display: table-cell;
@@ -43,38 +80,27 @@ section#blog {
4380
}
4481

4582
aside {
83+
position: relative;
4684
display: table-cell;
4785
padding: 15px;
4886
font-size: 105%;
4987
vertical-align: top;
5088
background: #efe5d0 url("../images/background.gif") bottom right;
5189
}
5290

53-
footer {
54-
margin: 0 10px 10px 10px;
55-
padding: 15px;
56-
font-size: 90%;
91+
.beanheading {
92+
line-height: 1.8em;
5793
text-align: center;
58-
color: #efe5d0;
59-
background-color: #675c47;
60-
}
61-
62-
h1 {
63-
font-size: 120%;
64-
color: #954b4b;
65-
}
66-
67-
h2 {
68-
font-size: 110%;
6994
}
7095

7196
.slogan {
7297
color: #954b4b;
7398
}
7499

75-
.beanheading {
76-
line-height: 1.8em;
77-
text-align: center;
100+
#award {
101+
position: absolute;
102+
top: 30px;
103+
right: 12%;
78104
}
79105

80106
a:link {
@@ -89,34 +115,26 @@ a:visited {
89115
color: #675c47;
90116
}
91117

92-
nav {
93-
margin: 10px 10px 0 10px;
94-
background-color: #efe5d0;
95-
}
96-
97-
nav ul {
98-
margin: 0;
99-
padding: 5px 0 5px 0;
100-
list-style-type: none;
118+
#coupon {
119+
position: fixed;
120+
top: 650px;
121+
left: -90px;
122+
overflow: clip;
101123
}
102124

103-
nav ul li {
104-
display: inline;
105-
padding: 5px 10px 5px 10px;
125+
#coupon img {
126+
border: none;
106127
}
107128

108-
nav ul li a:link,
109-
nav ul li a:visited {
110-
border-bottom: none;
111-
font-weight: bold;
112-
color: #954b4b;
113-
114-
/*
115-
text-shadow: 1px 1px 3px #e2c2c2;
116-
text-transform: uppercase;
117-
*/
129+
#coupon а {
130+
text-decoration: none;
118131
}
119132

120-
nav ul li.selected {
121-
background-color: #c8b99c;
133+
footer {
134+
margin: 0 10px 10px 10px;
135+
padding: 15px;
136+
font-size: 90%;
137+
text-align: center;
138+
color: #efe5d0;
139+
background-color: #675c47;
122140
}

0 commit comments

Comments
 (0)