-
Notifications
You must be signed in to change notification settings - Fork 0
/
index 13.24.06.html
161 lines (132 loc) · 7.83 KB
/
index 13.24.06.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Invisible Strings Travel Agency</title>
<!-- Moved the script file to the header section -->
<script src="script.js" defer></script>
</head>
<body>
<nav class="row justify-space-between">
<div>
<a href="#header">
<img src="IST-LOGO.png" alt="Logo">
</a>
</div>
<!-- Nav Toggle Button for Smaller Screens -->
<div class="nav-toggle">☰</div>
<ul class="row">
<li><a href="#about">About Us</a></li>
<li><a href="#team">Our Team</a></li>
<li><a href="#travels">Photo Album</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>
<header id="header">
<h1>Invisible Strings Travel</h1>
<h2>Unravel the unseen threads that connect us all</h2>
</header>
<main class="center width-xl">
<section id="about">
<h2 class="about-us">About Us</h2>
<div class="row justify-space-between margin">
<p class="flex-item">At Invisible Strings Travels, we are more than just a travel agency; we are the weavers of connections across the globe. Our passion lies in organizing group tours that cater to various interests—be it the rich tapestry of historical destinations, the serene call of nature and hiking, the tranquil beauty of beach retreats, or the vibrant life of city breaks. Our aim is to leave our travelers enriched with experiences that forge lasting bonds and memories, making the world a smaller, more connected place. Join us at Invisible Strings Travels, where your journey begins with us knitting together the unseen connections that make travel truly unforgettable. </p>
<img src="https://source.unsplash.com/eoZTnFtusDs" alt="image of Petra" width="300" class="flex-image">
</div>
<blockquote id="quote" class="quote">Twenty years from now you will be more disappointed by the things that you didn't do than by the ones you did do. Explore. Dream. Discover.
<cite>-- by Mark Twain</cite>
</blockquote>
</section>
<section id="team">
<h2>Meet the Team</h2>
<div class="founders">
<div class="meet-founder-part">
<figure>
<img src="team-ameera.png" alt="Picture of Ameera">
<figcaption>Ameera - Co-Founder</figcaption>
</figure>
<h3>Hi, I'm Ameera and welcome to Invisible Strings Travel!</h3>
<p>I'm always up for trying new things, discover new foods and meet new people and I'm looking forward to be your travel coordinator.</p>
<p>On a trip you can find me relaxing on a beach with a good book though I also enjoy history so discovering an ancient city is always on my list.</p>
<p>I feel that travelling can be hugely transformative so tell me, what are you waiting for?</p>
</div>
<div class="meet-founder-part">
<figure>
<img src="team-fahan.png" alt="Picture of Fahan">
<figcaption>Fahan - Co-Founder</figcaption>
</figure>
<h3>Hi, I'm Fahan and I'm excited to discover more of the world!</h3>
<p>My favourite thing to do on a trip is pick up a map and try not to get lost in a big city or grab a compass and challenge myself to a long hike.</p>
<p>I also love exploring the local cuisine or try new activities mostly so that I can share this with my friends and family back home.</p>
<p>I have a habit of coming back to the places I have visited and I cannot wait have you join me!<p>
</div>
</div>
<blockquote id="quote" class="quote">“To travel is to take a journey into yourself.”
<cite>-- by Danny Kaye</cite>
</blockquote>
</section>
<section id="travels">
<h2>Our Photo Album</h2>
<!-- [placeholder grid of prior travels] -->
<div class="image-grid"> <!-- will be the main container for each one of our images -->
<img src="https://source.unsplash.com/BKLHxgbYFDI" alt="image to show our hiking expidition"/>
<img src="https://source.unsplash.com/Q4g0Q-eVVEg" alt="image of the colloseum"/>
<img src="https://source.unsplash.com/ecw2GLQqVus" alt="historical site in Saudi Arabia"/>
<img src="https://source.unsplash.com/g5Uh7nP60FA" alt="Bankok downtown"/>
<img src="https://source.unsplash.com/layMbSJ3YOE" alt="Tokyo Japa"/>
<img src="https://source.unsplash.com/2KZksT2BSDw" alt="Isla Mujeres Mexico"/>
</div>
</section>
<section id="contact">
<h2>We Would Love to Hear from You!</h2>
<form id="form">
<div class="form-row"> <!-- Wrap NAME and EMAIL -->
<label for="name">NAME:</label>
<input id="name" name="name" type="text" class= "border-style" required/>
<label for="email">EMAIL:</label>
<input id="email" name="email" type="email" class= "border-style" required/>
</div>
<fieldset>
<legend>FAVOURITE TRIP STYLES:</legend>
<div class="radio-container">
<input id="trip-nature" type="radio" name="trip" value="Nature" class="border-style" checked />
<label for="trip-nature" class="radio">Nature</label>
</div>
<div class="radio-container">
<input id="trip-history" type="radio" name="trip" value="history" class="border-style"/>
<label for="trip-history" class="radio">History</label>
</div>
<div class="radio-container">
<input id="trip-beach" type="radio" name="trip" value="beach" class="border-style"/>
<label for="trip-beach" class="radio">Beach</label>
</div>
<div class="radio-container">
<input id="trip-city" type="radio" name="trip" value="radio" class="border-style"/>
<label for="trip-city" class="radio">City</label>
</div>
</fieldset>
<label for="message">MESSAGE:</label>
<textarea id="message" class="border-style" name="message"></textarea>
<div class="checkbox-wrapper">
<input id="marketingConsent" name="marketingConsent" type="checkbox" class="border-style" required/>
<label for="marketingConsent" class="checkbox">I agree to receive communication from Invisible Strings Travel.</label>
</div>
<button class="border-style" type="submit">SEND</button>
</form>
</section>
</main>
<footer>
<h3>LINKS</h3>
<ul>
<li><a href="#header">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#team">Our Team</a></li>
<li><a href="#travels">Photo Album</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
<p>© 2024 <em><strong><a href="#header">Invisible Strings Travels.</a></strong></em> All rights reserved.</p>
</footer>
</body>
</html>