-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
327 lines (283 loc) · 13.4 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
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
<!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>Trendy Tailors</title>
<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=Inter:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<link rel="stylesheet" href="https://unpkg.com/flickity-fade@1/flickity-fade.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script src="https://unpkg.com/flickity-fade@1/flickity-fade.js"></script>
<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=Inter:wght@900&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/ebd95e1cef.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="/css/reviews.css">
<link rel="stylesheet" href="/css/nav.css">
<link rel="stylesheet" href="/css/hero.css">
<link rel="stylesheet" href="/css/about.css">
<link rel="stylesheet" href="/css/contact.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body id="body">
<!-- #### mobile - test #### -->
<header>
<section class="nav-section">
<nav class="top-nav">
<ul class="top-nav-lists">
<li class="nav-address">
<a class="nav-address-span" href="#contact-section">
<img src="/assets/Icons/Map Marker.svg">
</a>
<a class="nav-contact-text" href="#contact-section">
60155 199 St. Edmonton AB
</a>
</li>
<li class="nav-phone">
<a class="nav-phone-span" href="tel:+17804865888">
<img src="/assets/Icons/Touchscreen.svg" href="tel:+17804865888">
</a>
<a class="nav-contact-text" href="tel:+17804865888">
780 486 5888
</a>
</li>
</ul>
</nav>
<nav class="bottom-nav">
<div class="desktop-nav">
<a href="#">
<img src="assets/Icons/logo-transparent-bg.svg" alt="">
</a>
<ul className="nav-list">
<li><a href="#about-us-section">About</a></li>
<li><a href="#contact-section">Contact</a></li>
</ul>
</div>
<!--### Overlay ### -->
<div id="myNav" class="overlay" style="height: 0%;">
<div class="overlay-content">
<a href="#about-us-section" onclick="toggleNav(true)" id="overlay-about">About</a>
<a Contact href="#contact-section" onclick="toggleNav(true)" id="overlay-contact">Contact</a>
<span class="icons">
<a class="fab fa-facebook" href="https://www.facebook.com/TrendyTailorsYEG"></a>
<!-- <a class="fa-solid fa-map-location-dot"></a> -->
<a class="fa-solid fa-mobile-screen" href="tel:+17804865888"></a>
</span>
</div>
</div>
<div class="check-btn">
<!-- <i class="fas fa-bars"></i> -->
<a class="mobile-logo" href="#">
<img src="assets/Icons/logo-transparent-bg.svg" alt="">
</a>
<input id="toggle" type="checkbox"></input>
<label onclick="toggleNav()" for="toggle" class="hamburger" id="hamburger">
<div class="top-bun"></div>
<div class="meat"></div>
<div class="bottom-bun"></div>
</label>
</div>
</nav>
</section>
</header>
<!-- ########## First Section - Hero Section ################# -->
<section class="hero-section" id="hero-section">
<div data-aos="fade-up" class="hero-section-div">
<div class="hero-text-left-column">
<div class="large-hero-text">
<h1 class="hero-text">Edmonton</h1>
<h1>based tailor</h1>
<h1>shop</h1>
</div>
<div class="small-hero-div">
<h4 data-aos="fade-up" class="small-hero-text">
Trendy Tailors <br> embodies a simple idea: <br>
to provide excellent quality custom tailoring with superior customer service at a competitive price.
</h4>
</div>
<div class="cta-button-div">
<a href="#contact-section" data-aos="fade-in" class="cta-button" type="button">Get Started</a>
</div>
</div>
<div class="hero-image-right-column">
<img data-aos="fade-up" class="wedding-dress-image" src="./assets/Images/wedding-dress-pixabay.jpg"></img>
</div>
</div>
</section>
<!-- Carousel -->
<section class="reviews-section"
data-flickity='{"cellAlign": "center", "content": true, "autoPlay": 5000, "fade": true}'>
<div class="carousel-cell">
<div class="carousel-cell-container">
<img src="/assets/Icons/“.svg" alt="">
<p>
Great service and very reasonable prices. The buttons on my suit were moved and it was also dry cleaned for the next day. Have had work done here multiple times and will use this place again in the future.
</p>
<div class="review-author">
Gary K
</div>
</div>
</div>
<div class="carousel-cell">
<div class="carousel-cell-container">
<img src="/assets/Icons/“.svg" alt="">
<p>
I got my wedding dress altered here. I was previously quoted $500-800 for alterations from other tailors. When I got my dress altered here she said it would not be anywhere near $500. I had a lot done to the dress as I had lost a lot of weight so the dress was altered to fit. Took about 2-3 weeks, every week she would get me to try it on and later whatever was needed. She did an amazing job! I was very happy! It also costed half of what I was quoted!
</p>
<div class="review-author">
Leanne Nguyen
</div>
</div>
</div>
<div class="carousel-cell">
<div class="carousel-cell-container">
<img src="/assets/Icons/“.svg" alt="">
<p>
I love this place! My family and I have gone here several times and the service has always been perfect. I have had several pants hemmed, and even my pouffy grad dress hemmed. All perfectly. Most recently I brought in a pair of jeans that had a stuck zipper and asked for it to be replaced. They were able to repair the zipper for a lower cost than I was quoted for the replacement! 💗 Amazing!
</p>
<div class="review-author">
Kaela Jane
</div>
</div>
</div>
<div class="carousel-cell">
<div class="carousel-cell-container">
<img src="/assets/Icons/“.svg" alt="">
<p>
Very good service, quick and quality repairs
</p>
<div class="review-author">
Michelle Meow
</div>
</div>
</div>
</section>
<!-- #### Second Section - About Us Section ###### -->
<section id="about-us-section" class="about-us-section">
<div data-aos="fade-up" class="about-us-large-text">affordable and quality service<span></span></div>
<div class="floating-images" data-aos="fade-up">
<img data-aos="fade-up" src="/assets/Images/suit-bundo-kim-unsplash.jpg" alt="suit display">
<img data-aos="fade-up" src="/assets/Images/before after.jpg" alt="wedding dress fix">
<img data-aos="fade-up" src="/assets/Images/inside store.jpg" alt="tailoring supplies">
</div>
<div data-aos="fade-in" class="floating-paragraph">
<img src="/assets/Icons/“.svg" alt="">
<p data-aos="fade-up">
We take pride in providing quality made clothing with professional service and attention to detail every step of the way. At Trendy Tailors we combine the unique styling of custom tailoring with quality fabric, fit and construction resulting in a garment that is truly your own
</p>
<p data-aos="fade-up">
Whether you need alterations on your existing garments, or fabrics made into new pieces, our team of experienced tailors will be happy to serve you. Our goal is to satisfy our customers with an excellent product and craftsmanship while maintaining the highest ethical standards.
</p>
</div>
<div data-aos="fade-in" class="brand-names">
<img src="/assets/Icons/Ralph_Lauren_logo 1.svg" alt="Ralph Lauren logo" class="ralph-lauren-logo" height="15">
<img src="/assets/Icons/Gucci_logo 1.svg" alt="Gucci logo" class="gucci-logo" width="60">
<img src="/assets/Icons/HUGO-BOSS_POS 1.svg" alt="Hugo Boss logo" class="hugo-boss-logo" height="20">
</div>
</section>
<!-- ######## Third Section - Contact Section ######## -->
<section id="contact-section" class="third-page-section">
<div class="third-page-left-column-container">
<div class="map-elements-container">
<div class="map-elements">
<!-- <img src="./assets/Images/maptt 1.png" alt="google map" class="google-map-image"> -->
<!-- Google Map API on I frame -->
<iframe class="google-map-iframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1037.5451346657692!2d-113.66529861180877!3d53.49271214472273!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x539f8abb13de0c3d%3A0xe2319421e5733fad!2sTrendy%20Tailors%20%26%20Dry%20Cleaning!5e1!3m2!1sen!2sca!4v1647047739469!5m2!1sen!2sca" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
<div class="address-div">
<div class="address">6015 - 199 St. Edmonton, AB</div>
</div>
</div>
<div class="get-directions-button-div" >
<a class="get-directions" href="https://www.google.com/maps/dir//Trendy+Tailors+%26+Dry+Cleaning+T6M+0M8+Alberta,+Edmonton+199+St+NW/@53.4925687,-113.6646517,18z/data=!4m8!4m7!1m0!1m5!1m1!1s0x539f8abb13de0c3d:0xe2319421e5733fad!2m2!1d-113.6646517!2d53.4925687">Get Directions</a>
</div>
<div class="socials-container">
<div class="facebook-logo-container" href="https://www.facebook.com/TrendyTailorsYEG">
<span class="facebook-icon-span">
<img src="assets/Icons/Facebook.svg" class="clock-icon-svg">
</span>
<a class="facebook-text" href="https://www.facebook.com/TrendyTailorsYEG">facebook.com/TrendyTailorsYEG</a>
</div>
<div class="cellphone-logo-container">
<span class="cellphone-icon-span">
<img src="assets/Icons/Touchscreen.svg" class="clock-icon-svg">
</span>
<a class="cellphone-text" href="tel:+17804865888">
780 486 5888
</a>
</div>
</div>
</div>
</div>
<div class="third-page-right-column-container">
<div class="store-elements-container">
<img data-aos="fade-in" src="./assets/Images/storefront.jpg" alt="" class="store-image">
<div class="hours-container">
<h2 class="hours-text">Hours</h2>
<div class="days-and-time-div">
<h2 class="days-text">Mon - Fri</h2>
<h2 class="time-text">9 am - 6 pm</h2>
</div>
<div class="days-and-time-div">
<h2 class="days-text">Saturday</h2>
<h2 class="time-text">10 am - 4 pm</h2>
</div>
<div class="sunday-div">
<h2 class="sunday-text">Sunday</h2>
<h2 class="closed-text">Closed</h2>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="copyright-section">
<div class="copyright">©</div>
<div id='copyright-date'></div>
Made with <img src="./assets/Icons/heart-svg.svg" alt="" class="heart-svg"> by Kit Tejido. All Rights
Reserved
</div>
</footer>
<script>
// ### DATE script ###
var dateTime = new Date().getFullYear();
var copyrightElement = document.getElementById('copyright-date');
var copyright = document.createTextNode(dateTime);
copyrightElement.appendChild(copyright);
// toggleNav(click) === toggleNav(true)
// can be toggleNav(click) === toggleNav(false) but this will trigger the else
// since toggleNav(click) <--- was already stated as boolean toggleNav(true),
// JS automatically assigns click as a boolean of True, but can be a string, #, array, obj etc.
function toggleNav(click) {
const navElement = document.getElementById("myNav");
const bodyElement = document.getElementById("body");
const hamburgerElement = document.getElementById("hamburger");
const checkbox = document.getElementById("toggle");
const isClose = navElement.style.height === "0%";
if (isClose) {
navElement.style.height = "100%";
bodyElement.style.overflowY = "hidden";
hamburgerElement.className = "hamburger isOpen";
} else {
navElement.style.height = "0%";
bodyElement.style.overflowY = "auto";
hamburgerElement.className = "hamburger";
// checkbox.checked = !checkbox.checked;
// alert("hi")
// hamburgerElement.classList.add("somethingNew");
}
}
</script>
<!-- Animate on Scroll Library -->
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({
duration: 1500
});
</script>
</body>
</html>