-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
329 lines (288 loc) · 16.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
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
328
329
<!doctype html>
<html lang="en">
<head>
<title>Little Bird Toy Company</title>
<!-- Favicons -->
<link href="logos/Alternate Logo 1.png" rel="icon">
<link href="logos/Alternate Logo 1.png" rel="apple-touch-icon">
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Bootstrap CSS v5.2.1 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
<!--Custom CSS-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--Navbar-->
<header>
<nav class="navbar fixed-top navbar-expand-lg navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="logos/Alternate Logo 2.png" class="navbar-logo"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll"
aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav ms-auto my-2 my-lg-0 ">
<li class="nav-item">
<a class="nav-link nav-active" href="index.html#section-aboutUs">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="products.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="order.html">Order Form</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!--End of Navbar-->
<main>
<!--Landing Page Section-->
<div class="section-landing">
<div class="container-fluid container-landing">
<div class="row justify-content-center align-items-center landingRow">
<div class="col-lg-5 col-sm-12 text-center d-flex align-items-center justify-content-center">
<img class="img-fluid landingImg" src="logos/Main-logo-large.png" alt="Little Bird Toys Logo">
</div>
<div class="col-lg-5 col-sm-12 d-flex align-items-center">
<div class="">
<h4>Welcome to Little Bird Toys!</h4>
<p>
The joy of timeless play with Little Bird Toys, where each toy is handcrafted from
sustainable materials to spark creativity and foster connections between generations.
</p>
<button class="buttonstyle mb-2" onclick="location.href='#section-aboutUs'">Learn
More!</button>
</div>
</div>
</div>
</div>
</div>
<!--End Landing Page Section-->
<div class="section-aboutUs" id="section-aboutUs">
<div class="container container-aboutUS pt-5 bg-white">
<div class="row justify-content-center align-items-center pt-2 g-2">
<div class="col-sm-12 col-md-8 div-background border border-dark rounded p-2 m-1">
<h2 class="text-center">Our Story:</h2>
<p>
Little Bird Toys, established in 2018, brings families handcrafted wooden toys designed to
spark imagination and slow down playtime. Our heirloom-quality collection is built from
sustainable materials and made to last a lifetime, fostering connections between
generations.
</p>
</div>
</div>
<div class="row justify-content-center align-items-center pt-2">
<div class="col-sm-12 col-md-4 text-center">
<img class="img-fluid about-img w-100" src="images/block2.jpg">
</div>
<div class="col-sm-12 col-md-4 text-center">
<img class="img-fluid about-img w-100" src="images/blocks6.jpg">
</div>
</div>
<div class="row justify-content-center pt-4 g-2">
<div
class="col-sm-12 col-md-4 div-background border border-dark rounded p-2 m-1 d-flex flex-column">
<h2 class="text-center">Visit us:</h2>
<p class="flex-grow-1">
Become part of the Little Bird Toys family! We love interacting with our customers and
sharing the joy of our handcrafted toys. Visit our Toms River, NJ store to explore our
charming play space and meet the team behind the magic.<br><br>
We are located at <b><a href="https://maps.app.goo.gl/ghf6JTxTa7QKgLWo6" target="_blank">43
Main St, Toms River, NJ !</a></b>
</p>
</div>
<div
class="col-sm-12 col-md-4 div-background border border-dark rounded p-2 m-1 d-flex flex-column">
<h2 class="text-center">Store Hours:</h2>
<ul class="flex-grow-1">
<li><b>Monday:</b> CLOSED </li>
<li><b>Tuesday:</b> 9:00-4:30 </li>
<li><b>Wednesday:</b> 9:00-4:30 </li>
<li><b>Thursday:</b> 9:00-4:30 </li>
<li><b>Friday:</b> 9:00-3:00 </li>
<li><b>Saturday:</b> 10:00-3:00 </li>
<li><b>Sunday:</b> 9:00-4:30 </li>
</ul>
</div>
</div>
<div class="row justify-content-center align-items-center py-3">
<div class="col-sm-6 col-md-2 text-center">
<img class="img-fluid rounded-circle w-100 h-auto div-background border border-dark"
src="logos/Alternate Logo 1.png">
</div>
</div>
</div>
<div class="container-fluid p-0">
<div class="row justify-content-center align-items-center g-2 slideshow-row">
<div class="col-sm-12 col-md-6 p-3 h-100">
<!-- Slideshow container -->
<div class="slideshow-container p-2 mt-5">
<!-- Full-width slides/quotes -->
<div class="mySlides">
<q>Little Bird Toys are a hit in our household! The craftsmanship is impeccable, and I
love that they are made from sustainable materials. My kids spend hours playing with
the wooden train set, and I appreciate knowing it's safe and eco-friendly.</q>
<p class="author">- Emma L.
</p>
</div>
<div class="mySlides">
<q>We bought the wooden airplane for our toddler, and it has quickly become his favorite
toy. The natural finish and smooth edges are perfect for little hands, and I’m
impressed by the quality. Definitely a keepsake we’ll cherish for years.</q>
<p class="author">- James R.
</p>
</div>
<div class="mySlides">
<q>The wooden block set from Little Bird Toys is fantastic! It encourages my kids to be
creative and build anything they can imagine. The blocks are sturdy, beautifully
made, and come in a handy storage crate. Highly recommend!</q>
<p class="author">- Sophia M.
</p>
</div>
<!-- Next/prev buttons -->
<a class="prev" onclick="changeSlide(-1)">❮</a>
<a class="next" onclick="changeSlide(1)">❯</a>
</div>
<!-- Dots/bullets/indicators -->
<div class="dot-container mb-5">
<span class="dot" onclick="setCurrentSlide(1)"></span>
<span class="dot" onclick="setCurrentSlide(2)"></span>
<span class="dot" onclick="setCurrentSlide(3)"></span>
</div>
</div>
</div>
</div>
</div>
<!--End About Us section-->
<!--Card 1 Section-->
<div class="section-card d-flex align-items-center justify-content-center">
<div class="container-fluid py-5">
<div class="row justify-content-center g-3">
<div class="col-lg-5">
<div class="card text-center border-dark">
<img class="card-img-top text-center " src="images/block5.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">"Watch imagination soar with Little Bird Toys! Handcrafted from
sustainable materials, our heirloom-quality toys provide endless hours of creative
play, fostering joy, connection, and cherished childhood memories for generations.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End Card 1 Section-->
<!--Card 2 Section-->
<div class="section-card2 d-flex align-items-center justify-content-center">
<div class="container-fluid py-5">
<div class="row justify-content-center g-3">
<div class="col-lg-4 col-sm-12 d-flex">
<div class="card text-center border-dark flex-fill">
<img class="card-img-top text-center h-100" src="images/block4.jpg" alt="Card image cap">
<div class="card-body">
<h3><b>Sustainability</b></h3>
<p class="card-text">At Little Bird Toys, we are committed to eco-friendly practices.
Our wooden toys are designed for longevity, and our manufacturing process minimizes
waste and supports the US economy.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-12 d-flex">
<div class="card text-center border-dark flex-fill">
<img class="card-img-top text-center h-100" src="images/Block1 (1).png"
alt="Card image cap">
<div class="card-body">
<h3><b>Quality</b></h3>
<p class="card-text">We believe in the power of simple, safe play. Our handcrafted toys
are free from plastic and batteries, and made with sustainable Baltic birch wood.
Each piece is meticulously crafted and rigorously tested in our Toms River, NJ
workshop to meet the highest safety standards (ASTM & CA-Prop 65) and ensure
unmatched durability.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End Card 2 Section-->
</main>
<!--Main Footer-->
<footer class="footer bg-light p-3">
<div class="container">
<div class="row justify-content-center g-3">
<div class=" col-lg-3 col-md-6 col-sm-12 justify-content-center text-center">
<a href="index.html">
<img src="logos/Little Bird Toys Logo (1).png" alt="Little Bird Toys Logo"
class="logo mb-2 border border-dark rounded"></a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 justify-content-center">
<h2>Little Bird Toys Co.</h2>
<ul>
<li><a href="index.html#section-aboutUs" class="text-dark"><u>About us</u></a></li>
<li><a href="products.html" class="text-dark"><u>Products</u></a></li>
<li><a href="order.html" class="text-dark"><u>Order Form</u></a></li>
<li><a href="contact.html" class="text-dark"><u>Contact</u></a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 justify-content-center">
<h2>Follow Us!</h2>
<div class="d-flex flex-column">
<a href="#" class="text-dark mb-2"><i
class="fab fa-instagram fa-lg mr-2 instagram-icon"></i>@<u>LittleBirdToyCo</u></a>
<a href="#" class="text-dark mb-2"><i
class="fab fa-twitter fa-lg mr-2 twitter-icon"></i>@<u>LittleBirdToys</u></a>
<a href="#" class="text-dark mb-2"><i
class="fab fa-snapchat fa-lg mr-2 snapchat-icon"></i>@<u>LittleBirdToys</u></a>
<a href="#" class="text-dark"><i
class="fab fa-facebook fa-lg mr-2 facebook-icon"></i>@<u>LittleBirdToyCo</u></a>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 justify-content-center">
<h2>Get in touch!</h2>
<div class="d-flex flex-column">
<a href="#" class="text-dark mb-2"><i
class="fa-solid fa-phone fa-lg mr-2"></i><u>732-555-1234</u></a>
<a href="#" class="text-dark mb-2"><i
class="fa-regular fa-envelope fa-lg mr-2"></i><u>[email protected]</u></a>
<a href="#" class="text-dark mb-2"><i class="fa-solid fa-location-dot fa-lg mr-2"></i><u>43 Main
St, Toms River, NJ</u></a>
<a href="#" class="text-dark mb-2"><i
class="fa-solid fa-desktop fa-lg mr-2"></i><u>www.littlebirdtoys.com</u></a>
</div>
</div>
</div>
</div>
</footer>
<!--End Main Footer-->
<!--Copyright footer-->
<footer>
<div class="text-center footerCredit p-3">
<p>© Copyright Little Birds Toys Co. All Rights Reserved</p>
<p class="m-0">Created By Adam Nisenson and Daniel Bootnik</p>
</div>
</footer>
<!--End Copyright footer-->
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous">
</script>
<!--Custom JS-->
<script src="script.js"></script>
</body>
</html>