-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
212 lines (209 loc) · 12.6 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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home | Leopolds Ice Cream</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="Images/Leopolds-Favicon.ico" type="image/png">
<link rel="preload" href="Fonts/Ageo-Bold.woff2" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="Fonts/Cooper-Medium.woff2" as="font" type="font/ttf" crossorigin>
<link rel="preload" as="image" href="Images/Leopolds-Logo.webp">
<meta name="description" content="The landing page of Leopolds Ice Cream">
</head>
<body>
<header>
<div class="logo">
<div id="oval" aria-hidden="true"></div>
<img src="Images/Leopolds-Logo.webp" alt="Leopolds-Logo, oval shape. Curved stylized text: Leopolds, below is date of founding: 1919" width="264" height="148">
</div>
<section aria-label="Navigation Bar">
<nav id="initialNavigation">
<a aria-description="Link to Ice Cream Menu" class="button">Menu</a>
<button aria-description="Opens hidden altnerate menu" class="button" id="expandBtn">Explore</button>
<a aria-description="Link to shipping options for merchandise and ice cream" class="button">Ship</a>
</nav>
<nav id="hiddenNavigation" class="hidden">
<img id="back" src="Images/Back-Arrow.svg" title="Back arrow"
loading="lazy" decoding="async">
<div class="navWrapper">
<a aria-description="Links to description of Stratton Leopold, founder of Leopolds">Our Founder</a>
<a aria-description="Link to Leopold's blog" >Blog</a>
<a aria-description="Link to Merchandise shop" >Shop</a>
<a aria-description="Link to Leopold's locations addresses">Locations</a>
<a aria-description="Link to catering and events">Ice Cream Socials</a>
<a aria-description="Link to about page">About</a>
</div>
</nav>
</section>
</header>
<main>
<section aria-label="Hours by Location">
<h3>Hours of Deliciousness</h3>
<h4 id="main"><span>Broughton:</span></h4>
<h5>Sunday - Thursday: 11AM - 10PM</h5>
<h5>Friday - Saturday: 11AM - 11PM</h5>
<h4 class="other">Airport Kiosk: <span>Daily 11AM - 7PM</span></h4>
<h4 class="other">Airport Shop: <span>Daily Noon - 8PM</span></h4>
</section>
<section aria-label="Order Ahead">
<h2>Want to skip the line?</h2>
<h3>(Limited Menu Only)</h3>
<a>Order Ahead!</a>
</section>
<section aria-label="About Leopolds">
<h2>About Us</h2>
<p>For over a century, we have been serving up
"Good Things to Eat, Good Things to Drink" in
beautiful, historic Savannah, Georgia. From our
award-winning, homemade super-premium ice
cream, unchanged since 1919, to our fresh
squeezed fruit drinks, coffees and freshly baked
treats, you're sure to find something memorable at
Leopold's.</p>
<a aria-description="Link to about page with more information">Learn more</a>
</section>
<section aria-label="Famous People at Leopolds">
<h2>Famously Good!</h2>
<div id="image-track" data-mouse-down-at="0" data-prev-percentage="0">
<div class="imageContainer">
<img class="image" src="Images/Miley-Cyrus-Leopolds.webp" title="Miley-Cyrus with Ice Cream" alt="Miley-Cyrus with Ice Cream in hand"
loading="lazy" decoding="async" width="244" height="244" draggable="false" />
<h3>Miley Cyrus</h3>
</div>
<div class="imageContainer">
<img class="image" src="Images/Tom-Cruise-Leopolds.webp" title="Tom Cruise and Stratton" alt="Tom Cruise and Stratton Leopold sharing ice cream"
loading="lazy" decoding="async" width="244" height="244" draggable="false" />
<h3>Tom Cruise</h3>
</div>
<div class="imageContainer">
<img class="image" src="Images/William-Macy-Leopolds.webp" title="William Macy and Stratton" alt="William Macy and Stratton Leopold pictured in the shop"
loading="lazy" decoding="async" width="244" height="244" draggable="false" />
<h3>William Macy</h3>
</div>
<div class="imageContainer">
<img class="image" src="Images/Paula-Deen-Leopolds.webp" title="Paula Deen and Stratton" alt="Paula Deen and Stratton Leopold locked in a side embrace, looking into the camera with ice cream in frame"
loading="lazy" decoding="async" width="244" height="244" draggable="false" />
<h3>Paula Deen</h3>
</div>
<div class="imageContainer">
<img class="image" src="Images/Mini-Anden-Niki-Taylor-Leopolds.webp" title="Mini Anden and Niki Taylor" alt="Mini Anden and Niki Taylor pictured in front of the store window licking ice cream"
loading="lazy" decoding="async" width="244" height="244" draggable="false" />
<h3 style="bottom: -9.5%;">Mini Anden & Niki Taylor</h3>
</div>
<div class="imageContainer">
<img class="image" src="Images/Alan-Rickman-Leopolds.webp" title="Alan Rickman in Leopolds" alt="Alan Rickman pictured finishing ice cream in the shop"
loading="lazy" decoding="async" width="244" height="244" draggable="false" />
<h3>Alan Rickman</h3>
</div>
<div class="imageContainer">
<img class="image" src="Images/Kimberly-Schlapman-Leopolds.webp" title="Kimberly Schlapman in Leopolds" alt="Kimberly Schlapman and Stratton Leopold locked in a side embrace in the shop"
loading="lazy" decoding="async" width="244" height="244" draggable="false" />
<h3 style="bottom: -9.5%;">Kimberly Schlapman</h3>
</div>
<div class="imageContainer">
<img class="image" src="Images/Patti-LuPone-Leopolds.webp" title="Patti Lupone outside Leopolds" alt="Patti LuPone and Stratton Leopold locked in a side embrace outside the shop"
loading="lazy" decoding="async" width="244" height="244" draggable="false" />
<h3>Patti LuPone</h3>
</div>
<div class="imageContainer">
<img class="image" src="Images/Philip-Hoffman-Leopolds.webp" title="Phillip Hoffman" alt="Phillip Hoffman enjoying Leopolds Ice Cream"
loading="lazy" decoding="async" width="244" height="244" draggable="false" />
<h3>Philip Hoffman</h3>
</div>
</div>
</section>
<section aria-label="Catering Information">
<h2>Sprinkle some fun into your next event!</h2>
<div class="cartWrapper">
<img src="Images/Cart.webp" title="Leopold's Catering Cart" alt="Friendly leopolds worker serving ice cream from catering cart"
loading="lazy" decoding="async" width="600" height="594">
<strong>From corporate functions to birthday parties, we do it all. Want to make it more unique? Help us make a flavor just for you!</strong>
<a>Get Started</a>
</div>
</section>
<section aria-label="Shipping">
<img src="Images/Shipping-Image.webp" title="Leopold's Shipping Van" alt="Leopolds shipping van pictured on a highway, smeared lights surround it."
loading="lazy" decoding="async" width="748" height="477">
<div class="shippingTextWrapper">
<h2>Shipping Nationwide</h2>
<a>More Details</a>
</div>
</section>
<section aria-label="Girl Scout Catering Information">
<h2>Is Your Troop Visiting Savannah?</h2>
<div class="logoWrapper">
<img loading="lazy" decoding="async" src="Images/Girl-Scouts-Logo.svg" width="864" height="864" alt="Girl Scout Logo">
<h3>©Girl Scouts</h3>
</div>
<strong>Help us give them a picnic to remember. Leopolds and the Girl Scouts - A true Savannah Tradition!</strong>
</section>
<form aria-label="Sign up for Newsletter">
<h2>Sign up for Updates & Special Offers</h2>
<div id="emailSubmit">
<input type="email" id="email" name="email" placeholder="Email address">
<input type="submit" id="submit" value="Submit">
</div>
</form>
<section aria-label="Social Media">
<h2>Join our Family</h2>
<div id="social-wrapper">
<img loading="lazy" decoding="async" src="Images/Facebook-Icon.svg" width="125" height="123" alt="Facebook Icon">
<img loading="lazy" decoding="async" src="Images/X-Icon.svg" width="100" height="100" alt="X Icon">
<img loading="lazy" decoding="async" src="Images/Flickr-Icon.svg" width="96" height="96" alt="Flickr Icon">
<img loading="lazy" decoding="async" src="Images/Pinterest-Icon.svg" width="124" height="124" alt="Pinterest Icon">
<img loading="lazy" decoding="async" src="Images/Instagram-Icon.svg" width="132" height="132" alt="Instagram Icon">
</div>
</section>
</main>
<footer>
<div class="awards">
<img loading="lazy" decoding="async" src="Images/Bizzie-Award.png" width="130" height="156" alt="Bizzie Award">
<img loading="lazy" decoding="async" src="Images/Pledge-Project.png" width="121" height="123" alt="I pledge project certification" style="flex-basis: 110%;">
<img loading="lazy" decoding="async" id="tripadvisor" src="Images/Travelers-Choice.png" width="255" height="300" alt="Trip advisors travelers choice">
</div>
<strong>© 2023 Leopold's Ice Cream. All Rights Reserved.</strong>
</footer>
<script src="track.js" defer></script>
<script>
var buttons = Array.from(document.getElementsByClassName('button'));
document.getElementById("expandBtn").addEventListener("click", function() {
buttons.forEach(button => {
button.classList.add("hide");
button.addEventListener('transitionend', function() {
this.style.display = "none";
document.getElementById("hiddenNavigation").style.minHeight = '55px';
})
});
setTimeout(function() {
document.getElementById("hiddenNavigation").classList.add("show");
document.getElementById("back").classList.add("show");
let listItems = document.querySelectorAll('.navWrapper a');
listItems.forEach((item, index) => {
item.style.transitionDelay = `${index * 0.1}s`;
});
}, 250);
});
document.getElementById("back").addEventListener("click", function() {
document.getElementById("back").classList.remove("show");
document.getElementById("hiddenNavigation").style.minHeight = '0px';
document.getElementById("hiddenNavigation").classList.remove("show");
let listItems = document.querySelectorAll('.navWrapper a');
let length = listItems.length;
for (let index = length - 1; index >= 0; index--) {
let item = listItems[index];
item.style.transitionDelay = `${(length - 1 - index) * 0.08}s`;
console.log(index);
}
setTimeout(function() {
document.getElementById("initialNavigation").style.minHeight = 'auto';
buttons.forEach(button => {
button.style.display = 'flex';
button.classList.remove("hide");
});
}, 250);
});
</script>
</body>
</html>