-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
212 lines (209 loc) · 12.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
<!DOCTYPE html>
<html lang="en" onscroll="scrollFunction();">
<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"/>
<link rel="stylesheet" href="styles.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="Google-Fonts"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"/>
<script src="script.js" defer></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
<title>Egypt tours</title>
</head>
<body>
<header id="header">
<h3 class="title-name">Hassan Elgilany</h3>
<nav class="navbar">
<ul>
<li><a class="nav-link" href="#introduction">Let's meet</a></li>
<li><a class="nav-link" href="#tours">Tours</a></li>
<li><a class="nav-link" href="#additions">What you get</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</nav>
<div class="underline"></div>
</header>
<section id="explore" class="section-slide" aria-label="Explore egypt photos">
<div class="carousel" data-carousel>
<h1>Explore <span class="italic bold">Egypt</span></h1>
<button class="carousel-button prev" data-carousel-button="prev" >‹</button>
<button class="carousel-button next" data-carousel-button="next" >‹</button>
<ul data-slides>
<li class="slide" data-active>
<img src="Photos\Explore-1.jpg" alt="Explore egypt image #1"/>
</li>
<li class="slide">
<img src="Photos\Explore-2.jpg" alt="Explore egypt image #2"/>
</li>
<li class="slide">
<img src="Photos\Explore-3.jpg" alt="Explore egypt image #3"/>
</li>
<li class="slide">
<img src="Photos\Explore-4.jpg" alt="Explore egypt image #4"/>
</li>
</ul>
</div>
<svg class="waves-bottom" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 200 100" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0
58-12 88-12s
58 12 88 12
58-12 88-12
58 12 88 12
v44h-352z" />
</defs>
<g>
<use xlink:href="#gentle-wave" x="50" y="12"/>
</g>
</svg>
</section>
<section id="introduction" class="section-text" aria-label="Tour guide introduction">
<div class="guide-card">
<div>
<h3 class="stars">★ ★ ★ ★ ★</h3>
<h2 class="name">Hassan</h2>
<h2 class="surname big">Your Guide</h2>
</div>
<img src="Photos\Portrait-1.jpg" alt="Your guide portrait"/>
</div>
<div class="guide-description">
<h3>Let's meet!</h3>
<p>
My name is Hassan Elgilany Omar. My specialty are tours in southern part of Egypt - most culturally and historically rich part of the whole country.
Thanks to my tours I can show You most breathtaking and astonishing parts of Egyptian culture.<br>
I am tour guide since 2005 when I graduated tourism at Ain Shams University. During our tours I will show you places where most important events
that shaped oldest civilization unraveled. We can tour tombs and palaces of kings and queens, visit temples and see ancient religious rituals colorfully
immortalized on the walls of thousands years old constructions.
</p>
</div>
<svg class="waves-top" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 200 100" preserveAspectRatio="none" shape-rendering="auto">
<g>
<use xlink:href="#gentle-wave" x="50" y="12"/>
</g>
</svg>
</section>
<section id="tours" class="section-slide" aria-label="Example tours">
<div class="carousel tours" data-carousel>
<button class="carousel-button prev" data-carousel-button="prev" >‹</button>
<button class="carousel-button next" data-carousel-button="next" >‹</button>
<ul data-slides>
<li class="slide" data-active>
<img src="Photos\Explore-1.jpg" alt="Luxor image #1"/>
<div class="tour">
<h2>Our tours</h2>
<h3>Luxor - East Bank</h3>
<p class="tour-description">Join me on a <span class="italic">half-day trip</span> to Luxor's East Bank.<br>
Your trip will begin with a visit to the Karnak Temple, one of the largest temple complexes in the world.
Built over a period of 2000 years, the temple is an impressive display of ancient Egyptian architecture and art<br>
Next, you will visit the Luxor Temple, another impressive ancient site located in the heart of the city.
Built during the New Kingdom period, the temple is known for its beautiful carvings and hieroglyphics.
You will also have the opportunity to see the Avenue of the Sphinxes, a unique and impressive feature of the temple complex.<br>
In between exploring the temples, you can choose to take a trip on the Nile River by a small, private boat to see the city from a different perspective.
</p>
</div>
</li>
<li class="slide">
<img src="Photos\Explore-2.jpg" alt="Luxor image #2"/>
<div class="tour">
<h2>Our tours</h2>
<h3>Luxor - West Bank</h3>
<p class="tour-description">
Join me on a <span class="italic">half-day trip</span> to Luxor's West Bank.<br>
Your trip will begin with a visit to the Valley of the Kings, where you'll have the opportunity to explore the tombs of some of
ancient Egypt's most powerful rulers, including Tutankhamun and Rameses the Great.<br>
Next, you'll visit Medinet Habu, the mortuary temple of Pharaoh Rameses III. This massive temple is known for its well-preserved relief carvings,
which depict scenes of battle and daily life in ancient Egypt.<br>
After that, you'll head to the Temple of Queen Hatshepsut, one of the most significant examples of ancient Egyptian architecture.
The temple's iconic three-level terraces are carved into the cliff face, and offer stunning views of the surrounding area.<br>
Your final stop will be the Colossi of Memnon, two massive stone statues that once guarded the entrance to Amenhotep III's mortuary temple.
These imposing figures are some of the few remaining structures from the temple, which was largely destroyed over the centuries.</p>
</div>
</li>
<li class="slide">
<img src="Photos\Explore-3.jpg" alt="Luxor image #3"/>
<div class="tour">
<h2>Our tours</h2>
<h3>Dendera</h3>
<p class="tour-description">
Join me on a <span class="italic">one-day tour</span> of the ancient Egyptian temple complex of Dendera.<br>
The tour begins with a short drive to Dendera where you will have the chance to explore the temple of Hathor.
I suggest doing it on your own pace, marveling at its beautifully preserved hieroglyphics, carvings, and reliefs.<br>
After visiting the temple of Hathor, you will have some time to explore the Roman-era Birth House also known as Mammisi
which offers fascinating glimpse into the beliefs and practices of the ancient Egyptians.<br>
To wrap up our tour you will visit the Temple of Osiris. The temple is famous for its well-preserved columns and ceiling,
which are decorated with intricate carvings and hieroglyphics. As it is dedicated the god of the underworld
it features inscriptions that provide insights into the ancient beliefs about the afterlife.</p>
</div>
</li>
</ul>
</div>
<svg class="waves-bottom" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 200 100" preserveAspectRatio="none" shape-rendering="auto">
<g>
<use xlink:href="#gentle-wave" x="50" y="12"/>
</g>
</svg>
</section>
<section id="additions" class="section-header" aria-label="Additions to tours">
<div class="additions-header">
<h2>What you get</h2>
</div>
<ul class="additions">
<li class="addition">
<img src="Photos\Icon-1.png" alt="Icon #1" class="icon" />
<p class="icon-description">I can assist you in purchasing authentic, locally made souvenirs that
will serve as a unique and lasting reminder of your trip to Egypt</p>
</li>
<li class="addition">
<img src="Photos\Icon-2.png" alt="Icon #2" class="icon" />
<p class="icon-description">Let me know what you would like to see and do during your visit,
and I will help you create a personalized itinerary that meets your needs and desires.</p>
</li>
<li class="addition">
<img src="Photos\Icon-3.png" alt="Icon #3" class="icon" />
<p class="icon-description">Rest assured that I will take care of all the details and arrangements for your trip,
so you can relax and enjoy your visit</p>
</li>
</ul>
<svg class="waves-top" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 200 100" preserveAspectRatio="none" shape-rendering="auto">
<g>
<use xlink:href="#gentle-wave" x="50" y="12"/>
</g>
</svg>
</section>
<section id="contact" class="section-text" aria-label="Contact info and form">
<div class="contact-header">
<h2>Contact me!</h2>
<p>Are you interested? Contact me via e-mail or Whatsapp!</p>
</div>
<div class="contact-contents">
<form id="contact-form">
<input class="input-name" type="text" placeholder="Your name" name="input-name">
<input class="input-email" type="text" placeholder="Your email address" name="input-email">
<textarea class="input-message" type="text" placeholder="Your message" maxlength="1000" name="input-message"></textarea>
<input class="input-submit" type="submit" value="Send" onsubmit="">
</form>
<div class="contact-details">
<h3>Hassan Elgilany Omar</h3>
<h3>+20 103 287 8053</h3>
<h3>[email protected]</h3>
</div>
</div>
<footer id="footer">
<nav class="navbar">
<ul>
<li><a class="nav-link" href="#explore">Explore</a></li>
<li><a class="nav-link" href="#introduction">Let's meet</a></li>
<li><a class="nav-link" href="#tours">Tours</a></li>
<li><a class="nav-link" href="#additions">What you get</a></li>
</ul>
</nav>
</footer>
</section>
</body>
</html>