-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
311 lines (254 loc) · 14.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EcoEcho</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="media/images/ecoechologo-removebg-preview.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
</head>
<body>
<div class="background-container">
<header>
<nav aria-label="Main Navigation" class="mainNav">
<div class="logoWrapper">
<img src="media/images/ecoecho.png" alt="Ecoecho Logo">
</div>
<!-- Hamburger Icon for Mobile -->
<a href="javascript:void(0)" id="hamburger-btn">
<i class="menuBar mobile-menu">≡</i>
</a>
<!-- Navigation Menu -->
<ul id="nav-menu" class="menuBar desktop-menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#team">The Team</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="home">
<h1>Bringing a forest into VR world</h1>
</section>
</div>
<main>
<section id="about">
<h2>About Our Agency</h2>
<div class="about-content">
<!-- Who We Are -->
<div class="text-wrapper">
<img class="about-img" src="media/images/eco4.jpg"
alt="Man using VR headset in the living room, standing in front of a TV.">
<div class="text-content">
<h3>Who We Are?</h3>
<p>In the chaos of city life, many seek the calming embrace of nature. At EcoEcho, we don’t just
understand this desire – we deeply feel it. We're more than just a tech company; we're a
place of real human connection in today's fast-paced world.</p>
<p>As leaders in combining technology with mental wellness, we aim to ease the challenges of
urban life by offering a peaceful escape. For us, it's not only about the virtual world;
it's about truly understanding what people need, building genuine connections, and promoting
overall mental well-being.</p>
<p>When you experience EcoEcho, it's more than just a brief getaway; it's a chance to transform
and find a new beginning.</p>
</div>
</div>
<!-- Services We Provide -->
<div class="text-wrapper reverse">
<img class="about-img" src="media/images/eco5.jpg"
alt="Woman from the waist up wearing a VR headset with nature images projected onto her chest and arms.">
<div class="text-content">
<h3>Services We Provide:</h3>
<p>Bringing you to the forest, even when you're surrounded by skyscrapers. At EcoEcho, we
specialize in:</p>
<ul>
<li><strong>Virtual Nature Retreats:</strong> Transporting you to serene landscapes, helping
you find peace amidst urban chaos.</li>
<li><strong>Guided VR Meditation:</strong> Experience tranquility with sessions set in
beautiful virtual forests, meadows, and beaches.</li>
<li><strong>Urban Stress Relief Sessions:</strong> Tailored VR experiences designed
specifically to combat urban stressors and rejuvenate the mind.</li>
<li><strong>Custom Nature Soundscapes:</strong> Personalized auditory backgrounds to enhance
relaxation, from gentle bird songs to soothing water streams.</li>
<li><strong>Community VR Gatherings:</strong> Join group sessions and connect with
like-minded individuals, sharing peaceful moments together.</li>
</ul>
</div>
</div>
<!-- Our Mission -->
<div class="text-wrapper">
<img class="about-img" src="media/images/eco3.jpg"
alt="Man using a VR headset while walking on a treadmill">
<div class="text-content mission-text">
<p><strong>Our mission</strong> is to harness the power of technology to bring nature's healing
touch closer to urban dwellers. With EcoEcho, you're not just entering a virtual world;
you're embarking on a journey to mental well-being.</p>
<button id="teaserButton">Watch teaser to feel the experience</button>
</div>
</div>
<!-- Video Modal -->
<div id="videoModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<video controls preload="metadata" id="forest-videor">
<source src="media/videos/forest.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
</section>
</main>
<section id="team">
<video id="background-video" autoplay loop preload="metadata" muted>
<source src="media/videos/bird.mp4">
</video>
<h2>Meet The Team</h2>
<div class="team-section">
<div class="team-member">
<img src="media/images/marikaAI.jpg" alt="Marika's portrait">
<p><strong>Marika</strong></p>
<p><em>Client Immersion Specialist</em></p>
<br>
<p><span>Marika</span> specializes in guiding clients through the initial immersion process. She is
trained in
using VR technology and is skilled in understanding individual preferences and sensitivities.
Whether it's a client's first VR experience or they're well-versed, Marika ensures a smooth and
personalized journey, setting the tone for relaxation and rejuvenation.</p>
</div>
<div class="team-member">
<img src="media/images/mark.jpg" alt="Makr's portrait">
<p><strong>Mark</strong></p>
<p><em>Technical Support Lead</em></p>
<br>
<p><span>Mark</span> is the go-to expert for any technical queries or concerns. From ensuring
optimal VR
performance to troubleshooting any issues, he ensures every client experiences the highest
quality immersion without interruptions.</p>
</div>
<div class="team-member">
<img src="media/images/berty.jpg" alt="Berty's portrait">
<p><strong>Berty</strong></p>
<p><em>EcoTherapy Counselor</em></p>
<br>
<p><span>Berty</span> is a certified therapist with a passion for ecotherapy. After each VR session,
she engages
with clients to discuss their experience, helping them process emotions and offering techniques
to incorporate the peace they felt in the virtual world into their daily lives.</p>
</div>
<div class="team-member">
<img src="media/images/andyAI.jpg" alt="Andy's portrait">
<p><strong>Andy</strong></p>
<p><em>Nature Soundscape Designer</em></p>
<br>
<p><span>Andy</span> crafts the auditory experiences accompanying each VR scenario. Using his
background in audio
engineering and his love for nature, he curates or creates the natural soundscapes that make
EcoEcho's virtual forests come alive. He also offers clients the option to customize soundscapes
based on their preferences, such as focusing on bird songs, water sounds, or rustling leaves.
</p>
</div>
<div class="team-member">
<img src="media/images/paingAI.jpg" alt="Paing's portrait">
<p><strong>Paing</strong></p>
<p><em>Post-Experience Care Coordinator</em></p>
<br>
<p><span>Paing</span> ensures that the relaxation doesn't end when the VR headset comes off. He
provides clients
with resources like nature soundtracks for meditation, tips on creating nature-like ambiences at
home, and even suggestions for real-world nature spots to visit. He's dedicated to ensuring
every client can extend the tranquillity they felt during their session into their daily
routines.</p>
</div>
</div>
</section>
<section id="testimonials">
<h2>Testimonials</h2>
<div class="testimonial-wrapper">
<div class="reviews">
<blockquote>
"As a city dweller, finding moments of tranquility can be a challenge. But with EcoEcho's
virtual nature retreats, I've rediscovered the soothing embrace of nature without leaving my
apartment. It's a game-changer for my mental well-being."
<cite>John Smith, Architect, 2017</cite>
</blockquote>
</div>
<div class="reviews">
<blockquote>
"The custom nature soundscapes from EcoEcho are simply mesmerizing. Whether it's the gentle
rustling of leaves or the calming flow of a stream, they've perfectly captured the essence of
nature. I feel rejuvenated after every session.""
<cite>Aisha R., Freelance Writer, 2022 </cite>
</blockquote>
</div>
<div class="reviews">
<blockquote>
"I was skeptical about VR meditation, but EcoEcho has transformed my perspective. The guided VR
sessions set against breathtaking natural backdrops have become my daily escape from urban
stress. Highly recommended!"
<cite>Carlos D., Marketing Manager, 2023</cite>
</blockquote>
</div>
<div class="reviews">
<blockquote>
"EcoEcho's community VR gatherings have not only allowed me to experience serene landscapes but
also connect with like-minded individuals. Sharing these peaceful moments together has been a
wonderful experience. Kudos to the team for this innovative approach to mental wellness."
<cite>Nathan J., Software Developer, 2023</cite>
</blockquote>
</div>
</div>
</section>
<section id="contact">
<h2>Contact Us</h2>
<form id="contactForm" action="https://formspree.io/f/mdorpdnr" method="POST">
<div class="input-group">
<!-- <label for="name">Name:</label> -->
<input type="text" id="name" name="name" placeholder="Your name:" required aria-required="true">
</div>
<div class="input-group">
<!-- <label for="email">Email:</label> -->
<input type="email" id="email" name="email" placeholder="Your email:" required aria-required="true">
</div>
<div class="input-group">
<!-- <label for="message">Message:</label> -->
<textarea id="message" name="message" rows="4" placeholder="Your message:" required
aria-required="true"></textarea>
</div>
<fieldset>
<legend>Who do you want to talk to?</legend>
<div class="radio-group">
<input id="team-general" type="radio" name="team-member" value="General" checked />
<label for="team-general" class="radio">Customer Service</label>
<input id="team-marika" type="radio" name="team-member" value="Marika" />
<label for="team-marika" class="radio">Marika</label>
<input id="team-mark" type="radio" name="team-member" value="Mark" />
<label for="team-mark" class="radio">Mark</label>
</div>
<div class="radio-group">
<input id="team-berty" type="radio" name="team-member" value="Berty" />
<label for="team-berty" class="radio">Berty</label>
<input id="team-andy" type="radio" name="team-member" value="Andy" />
<label for="team-andy" class="radio">Andy</label>
<input id="team-paing" type="radio" name="team-member" value="Paing" />
<label for="team-paing" class="radio">Paing</label>
</div>
</fieldset>
<button id="submit" type="submit">Submit</button>
<div id="thankYouMessage" style="display: none;">Thank you for contacting us. We will get back to you soon.
</div>
</form>
</section>
</main>
<footer>
<button id="mute-toggle" title="Toggle Sound">
<i id="sound-icon" class="fas fa-volume-up"></i>
</button>
<small>© ecoecho2023_PM</small>
</footer>
<!-- "Scroll to top" button here -->
<button id="scrollTopBtn" class="scroll-top-btn" aria-label="Scroll to top">⬆</button>
<script src="script.js"></script>
</body>
</html>