-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
158 lines (158 loc) · 8.57 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cam's Favorite Candy</title>
<meta name="description" content="Cameron MacDonald's Webpage for Assignment 3 - How Sweet Is This!">
<meta name="robots" content="noindex, nofollow">
<link rel="stylesheet" href="./css/css.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Josefin+Sans:wght@500&family=Lato&family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div>
<a href="index.html"><img src="./img/Kit-Kat-Logo.png" alt="candy logo"></a>
</div>
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
</div>
<nav>
<menu>
<li><a href="index.html">Home</a></li>
<li><a href="#fun-facts">Fun Facts</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#footer">Bottom</a></li>
</menu>
</nav>
</header>
<main>
<section id="fun-facts">
<h2>Some fun trivia facts about Kit Kat! Hover over the images to see them!</h2>
</section>
<section class="images">
<div>
<span class="mask">
<h3>They were originally boxes of chocolates!</h3>
<h4>in the 1920s, Joseph Rowntree, co-founder of the Rowntree's candy company
created a line of Kit Cat chocolate boxes. They were sold for several years before
being discontinued. During World War II, a shortage of milk forced Rowntree's to switch
from milk chocolate to dark chocolate in its Kit Kat bars. To signify the change, the
company changed the wrapper from red to blue and dropped “Chocolate Crisp” from its title.</h4>
</span>
</div>
<div>
<span class="mask">
<h3>Japan has over 200 variants!</h3>
<h4> In Japan, Kit Kats come in regional flavors like yubari melon, corn, green beans, cherry, ginger ale, baked potato, butter, creme brulee, and banana.
They also have national staples such as miso, green tea, and the most popular flavor of all: soy sauce.
Japan even has "bakeable" Kit Kat bars. They're essentially mini bars covered in dough, and infused with
flavors like cheesecake and pudding. Part of the appeal stems from Kit Kat's completely unintentional similarity
to the phrase Kitto Katsu, which translates as “You will surely win.” Because of that, Kit Kats are mailed as a good luck charm for students ahead of university exams. </h4>
</span>
</div>
<div>
<span class="mask">
<h3>The size and number of fingers in a bar varies throughout the world!</h3>
<h4>For years, Nestle has sold a three-fingered Kit Kat in the Middle East
to align with local currency, while in Japan there's an extra-long “stick”
as well as a half-finger “petite” variety. In Australia and New Zealand,
there's a 12-finger Kit Kat Block built for sharing. </h4>
</span>
</div>
</section>
<section id="products">
<h2>Here are some of Kit Kat's flavors ranked worst to best!</h2>
<article class="bars">Wasabi
<img src="../assignment3/img/bars/wasabi.png" alt="wasabi kit kat bar">
</article>
<article class="bars"><img src="../assignment3/img/bars/cough.png" alt="cough drop kit kat bar">
Cough Drop
</article>
<article class="bars">Whole Grain Biscuit
<img src="../assignment3/img/bars/biscuit.png" alt="biscuit kit kat bar">
</article>
<article class="bars"><img src="../assignment3/img/bars/bakedpotato.jpg" alt="baked potato kit kat bar">
Baked Potato
</article>
<article class="bars">Red Bean Paste
<img src="../assignment3/img/bars/bean.jpg" alt="red bean paste kit kat bar">
</article>
<article class="bars"><img src="../assignment3/img/bars/tea.png" alt="hojicha tea kit kat bar">
Hojicha Tea
</article>
<article class="bars">Sake
<img src="../assignment3/img/bars/sake.jpg" alt="sake kit kat bar">
</article>
<article class="bars"><img src="../assignment3/img/bars/mocha.png" alt="mocha + chocolate kit kat bar">
Mocha + Chocolate
</article>
<article class="bars">Passion Fruit
<img src="../assignment3/img/bars/passion.jpg" alt="passion fruit kit kat bar">
</article>
<article class="bars"><img src="../assignment3/img/bars/maple.jpeg" alt="maple kit kat bar">
Maple
</article>
<article class="bars">Melon
<img src="../assignment3/img/bars/melon.png" alt="melon kit kat bar">
</article>
<article class="bars"><img src="../assignment3/img/bars/sakura.jpg" alt="sakura kit kat bar">
Sakura
</article>
<article class="bars">Cranberry and Almond
<img src="../assignment3/img/bars/cran.png" alt="cranberry and almond kit kat bar">
</article>
<article class="bars"><img src="../assignment3/img/bars/raspberry.jpg" alt="raspberry kit kat bar">
Raspberry
</article>
<article class="bars">Matcha Tiramisu
<img src="../assignment3/img/bars/matchatiramisu.jpg" alt="matcha tiramisu kit kat bar">
</article>
<article class="bars"><img src="../assignment3/img/bars/strawberrycheesecake.jpeg" alt="strawberry cheesecake kit kat bar">
Strawberry Cheesecake
</article>
<article class="bars">Banana Caramel
<img src="../assignment3/img/bars/bananacaramel.jpg" alt="banana caramel kit kat bar">
</article>
<article class="bars"><img src="../assignment3/img/bars/dark.png" alt="dark chocolate kit kat bar">
Dark Chocolate
</article>
<article class="bars">Matcha Green Tea
<img src="../assignment3/img/bars/greentea.jpg" alt="matcha green tea kit kat bar">
</article>
<article class="bars"><img src="../assignment3/img/bars/white.png" alt="white creme kit kat bar">
White Creme
</article>
<article class="bars">Peach Parfait
<img src="../assignment3/img/bars/peach.png" alt="peach parfait kit kat bar">
</article>
<article class="bars"><img src="../assignment3/img/bars/mint.jpg" alt="mint + dark chocolate kit kat bar">
Mint + Dark Chocolate
</article>
<article class="bars">Lemon Crisp
<img src="../assignment3/img/bars/lemoncrisp.png" alt="lemon crisp kit kat bar">
</article>
<article class="bars"><img src="../assignment3/img/bars/OG.png" alt="kit kat bar">
The original we all know and love.
</article>
<h2>That was quite a lot of different flavors, and that only barely scratches the surface of
how far Kit Kat's legacy and success has spread! Which flavor do you want to try the most?</h2>
</section>
</main>
<footer>
<section id="footer">
<div>
<a href="#index.html"><img src="./img/Kit-Kat-Logo.png" alt="candy logo"></a>
<h3>Follow us on our Social Media!</h3>
<h4>Twitter - KITKAT</h4>
<h4>Instagram - KitKat</h4>
<h4>Facebook - @KitKatCanada</h4>
</div>
</section>
</footer>
</body>
</html>