-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
354 lines (333 loc) · 13.2 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
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Little Fox and Friends</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat%7CPacifico&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<!-- Small CSS Reset -->
<link rel="stylesheet" href="css/reset.css">
<!-- Font Style Sheet -->
<link rel="stylesheet" href="css/fonts.css">
<!-- My Stylesheet -->
<link rel="stylesheet" href="css/style.css">
<!-- Fontawesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="wrapper">
<!-- Left fixed: Webpage Title Home -->
<div>
<a class="home" href="index.html">
<h2 class="hide-small">Little Fox</h2>
<h3 class="hide-small">Meditation</h3>
<i class="fas fa-home hide-big"></i>
</a>
</div>
<!-- Header fixed: Hero image -->
<header>
<div class="hero-img" id="head-home-page">
<h1>Little Fox</h1>
<h2>Meditation with children</h2>
</div>
</header>
<!-- Right fixed: Navigation controls-->
<div class="mini-nav">
<ul id="menu-tag">
<li><a href="#">MENU</a></li>
<li class="hidden"><a href="#">CLOSE</a></li>
</ul>
<ul id="nav-tag">
<li><a href="html/about.html">About</a></li>
<li><a href="html/contact.html">Contact</a></li>
<li><a href="html/blog.html">Blog</a></li>
</ul>
<div id="burger-tag">
<a href="#"><i class="fas fa-bars"></i></a>
</div>
</div>
<!-- Menu Navigation overlay -->
<nav class="menu red slide-out hidden">
<ul>
<li><a href="index.html">
<div class="white-band">Home</div>Home
</a></li>
<li><a href="html/about.html">
<div class="white-band">About</div>About
</a></li>
<li><a href="html/team.html">
<div class="white-band">Team</div>Team
</a></li>
<li><a href="html/gallery.html">
<div class="white-band">Gallery</div>Gallery
</a></li>
<li><a href="html/membership.html">
<div class="white-band">Membership</div>Membership
</a></li>
<li><a href="html/contact.html">
<div class="white-band">Contact</div>Contact
</a></li>
<li><a href="html/blog.html">
<div class="white-band">Blog</div>Blog
</a></li>
</ul>
</nav>
</div>
<!-- ................. Main Sections ................. -->
<!-- ................................................. -->
<main>
<!-- header overlay -->
<section class="main-top-padding plain">
<!-- <div class="section-content"></div> -->
</section>
<!-- About Section -->
<!-- coloured background-->
<section class="plain">
<h2>The Foundation</h2>
<h3>OUR MISSION</h3>
<p>We believe that equipping children with key mindfulness based social emotional skills will not only help them
perform better academically and in their careers but also help them become more compassionate, empathetic,
caring members of society. Children growing up with skills to regulate their emotions, to better understand
their own needs, to recognize other’s needs, to value nature, to problem solve compassionately will help usher
in a more peaceful, healthy, happy and thriving future.</p>
<a href="html/about.html">LEARN MORE</a>
</section>
<!-- Courses Section -->
<!-- light background-->
<section class="red coloured">
<h2>About Us</h2>
<h3>OUR COURSES</h3>
<p>Little Fox and Friends offers mindfulness based programs for students aged 6–16. Our programs vary in length,
scope and approach: from light short introductory programs in nature, to regular meditation sessions focusing on
specific issues (concentration, stress and emotion management, etc.), and immersive camps/retreats.</p>
<p>For our youngest students we offer combined parents-children programs too.</p>
<a href="html/membership.html">LEARN MORE</a>
</section>
<!-- Team Section -->
<!-- light background-->
<section class="plain team-section">
<h2>Our Team</h2>
<h3>MEET OUR STAFF</h3>
<p>Our staff comes from many different backgrounds, but we are all passionate about mindfulness, meditation and
teaching everyone—little and big—how a little bit of mindfulness applied consistently can improve their lives
and the lives of people around them. And foxes. We are also quite fond of foxes, especially cute little fox
cubs.</p>
<p>Most of our staff have certifications in either psychology or pedagogy (or both). We speak Swiss German, High
German, English, Italian and Spanish, so don't hesitate to contact us in any of these!</p>
<div class="card-container">
<div class="card">
<a href="html/team.html#jana">
<img src="images/woman-glasses-flowers.jpg" alt="Photo of woman with glasses and flowers">
</a>
<p>Jana Morrison</p>
<p>Assistant</p>
</div>
<div class="card">
<a href="html/team.html#patrick">
<img src="images/man-blond-beard.jpg" alt="Photo of a blond man with beard">
</a>
<p>Patrick Hofstadter</p>
<p>Founder</p>
</div>
<div class="card">
<a href="html/team.html#marie">
<img src="images/woman-brown-hair.jpg" alt="Photo of a woman with brown hair">
</a>
<p>Marie-Claire Jäger</p>
<p>Co-Founder</p>
</div>
<div class="card">
<a href="html/team.html#hugo">
<img src="images/man-beach.jpg" alt="Photo of a man on a beach">
</a>
<p>Hugo Ullmann</p>
<p>Instructor</p>
</div>
</div>
</section>
<!-- Gallery Section -->
<!-- coloured background-->
<section class="gallery-section yellow coloured">
<h2>Gallery</h2>
<!-- <h3>TIME WITH US</h3> -->
<!-- Photos -->
<div class="card-container">
<img id="main-img" src="images/girl-sunflower.jpg" alt="young girls with sunflower">
<img class="thumb" src="images/girl-sunflower.jpg" alt="young girl with sunflower">
<img class="thumb" src="images/boy-blowing.jpg" alt="young boy blowing a dandelion">
<img class="thumb" src="images/girl-reading.jpg" alt="young girl reading">
<img class="thumb" src="images/boy-leaves.jpg" alt="young boy with leaves">
<img class="thumb" src="images/boy-blowing.jpg" alt="young boy blowing a dandelion">
<img class="thumb" src="images/boy-stairs.jpg" alt="young boy on stairs">
<img class="thumb" src="images/boy-leaves.jpg" alt="young boy with leaves">
<img class="thumb" src="images/girl-reading.jpg" alt="young girl reading">
</div>
<a href="html/gallery.html">SEE MORE</a>
</section>
<!-- Testimonials Section -->
<!-- light background-->
<section class="plain testim-section">
<h2>Testimonials</h2>
<h3>YOU SAID ABOUT US</h3>
<div class="slider-container">
<div class="slide">
<p> “I feel transformed – I feel empowered and invigorated by undergoing the mindfulness practices. I feel a
new sense of optimism and a refocusing of thinking on work.”</p>
</div>
<div class="slide">
<p>“You guys are amazing! Keep up the great work.”</p>
</div>
<div class="slide">
<p>"The Course has had a powerful effect on me and my colleagues. As a shared experience, we have developed a
sense of community around these exercises. Together we have learned effective strategies for focus and
relieving tension in our environment."</p>
</div>
<div class="slide">
<p>"In the short time that I have taken the Little Fox courses, I have seen the benefits on a daily basis by
learning and by hanging out with friends. I wanted to thank you for putting together such an effective
program. Honestly, I think that this program could be implemented in the classroom in our school."</p>
</div>
<div class="slide">
<p>"Our emotions go from wild like waves to still and peaceful. We learn to focus and concentrate through
breathing. We just calm down.</p>
</div>
<span class="prev">❮</span>
<span class="next">❯</span>
</div>
<div class="pagi">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<a href="html/membership.html">JOIN US TODAY</a>
</section>
<!-- Membership Section -->
<!-- coloured background-->
<section class="memb-section blue coloured">
<h2>Membership</h2>
<h3>JOIN US NOW</h3>
<p>
It's not enough to read about meditation. It's not enough to talk or think about meditation. Meditation is all
about the experience.
Sign up for our trial or a single course package to experience meditation firsthand and decide for yourself.
<br>
Meditation is also about consistency. Choose one of our course packages to get the full benefits of mindfulness
practice.
</p>
<div class="card-container">
<div class="card">
<div class="headline">
<h3>TRIAL</h3>
</div>
<div class="panel">
<div>
<p>3 times 60 CHF</p>
</div>
<div>
<p>For everyone</p>
</div>
<div>
<p>Easy</p>
</div>
<div><a href="html/membership.html">GET IT</a></div>
</div>
</div>
<div class="card">
<div class="headline">
<h3>ONE COURSE</h3>
</div>
<div class="panel">
<div>
<p>120 CHF/month</p>
</div>
<div>
<p>Best value</p>
</div>
<div>
<p>Reliable</p>
</div>
<div><a href="html/membership.html">GET IT</a></div>
</div>
</div>
<div class="card">
<div class="headline">
<h3>ALL COURSES</h3>
</div>
<div class="panel">
<div>
<p>240 CHF/month</p>
</div>
<div>
<p>Unlimited Power</p>
</div>
<div>
<p>Best option</p>
</div>
<div><a href="html/membership.html">GET IT</a></div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<!-- light background -->
<section class="plain contact-section">
<h2>Contact Us</h2>
<h3>VISIT OR DROP US A LINE</h3>
<div class="card-container">
<div class="card left up address">
<h4>Little Fox and Friends</h4>
<p><i class="fas fa-map-marker-alt"></i> 8048 Zürich Buckhauerstrasse 24</p>
<p><i class="far fa-envelope"></i> [email protected]</p>
<p><i class="fas fa-phone"></i> +41 44 234 9876</p>
</div>
<div class="card">
<div class="form-container">
<form>
<label for="name">Your Name:</label>
<input type="text" name="name" id="name">
<label for="email">Your email address:</label>
<input type="email" name="email" id="email">
<label for="message">Your message:</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
<label for="checkboxAGB" class="agb">
<input type="checkbox" name="checkboxAGB" id="checkboxAGB">
I have read and accept the conditions!
</label>
<label for="checkboxNews" class="news">
<input type="checkbox" name="checkboxNews" id="checkboxNews">
I want to receive Newsletter from Little Fox!
</label>
<a href="#" id="subm-index-page" class="submit-button">Send</a>
</form>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="n-red">
<h2>Follow Us</h2>
<h4>ON SOCIAL MEDIA</h4>
<div id="icon-container">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
</div>
<small>© Created by Olivabigyo 2020</small>
</footer>
<!-- Script -->
<script src="js/navi-with-scroll.js"></script>
<script src="js/tumbs.js"></script>
<script src="js/slider.js"></script>
<script src="js/accordion.js"></script>
<script src="js/validate-contact.js"></script>
</body>
</html>