-
Notifications
You must be signed in to change notification settings - Fork 0
/
cards.html
335 lines (308 loc) · 18.9 KB
/
cards.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://kit.fontawesome.com/75daf6b927.js" crossorigin="anonymous"></script>
<link href="https://fonts.cdnfonts.com/css/sf-pro-display" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Cards</title>
</head>
<body style="font-family: 'SF Pro Display', sans-serif;" class="">
<div class="flex place-content-center">
<div class="flex flex-col md:flex-row gap-12 mx-12">
<!--Card 1-->
<div id="button1"
class="grid grid-rows-2 bg-slate-200 rounded-2xl w-full h-80 px-8 hover:cursor-pointer card drop-shadow button-1">
<!--Icon-->
<div class="mt-4 place-self-start">
<i class="fa-solid fa-thumbs-up text-4xl icon"></i>
</div>
<!--Name + Description-->
<div for="" class="self-end pb-6">
<h1 class="font-bold text-2xl mb-2">Best Things To Do</h1>
<p class="font-medium text-gray-700">Discover some of the most unique and fulfilling experiences
your next destination has to offer.
<i class="fa-sharp fa-solid fa-arrow-right arrow"></i>
</p>
</div>
</div>
<!--Card 2-->
<div id="button2"
class="grid grid-rows-2 bg-slate-200 rounded-2xl w-full h-80 px-8 hover:cursor-pointer card drop-shadow-lg">
<!--Icon-->
<div class="mt-4 place-self-start">
<i class="fa-solid fa-clock text-4xl icon"></i>
</div>
<!--Name + Description-->
<div class="self-end pb-6">
<h1 class="font-bold text-2xl mb-2">When to Visit</h1>
<p class="font-medium text-gray-700">Tips & Travel trends to help you pick the perfect time to visit
this destination.
<i
class="fa-sharp fa-solid fa-arrow-right arrow"></i>
</p>
</div>
</div>
<!--Card 3-->
<div id="button3"
class="grid grid-rows-2 bg-slate-200 rounded-2xl w-full h-80 px-8 hover:cursor-pointer card drop-shadow-lg">
<!--Icon-->
<div class="mt-4 place-self-start">
<i class="fa-solid fa-earth-americas text-4xl icon"></i>
</div>
<!--Name + Description-->
<div class="self-end pb-6">
<h1 class="font-bold text-2xl mb-2">Best Places to Visit</h1>
<p class="font-medium text-gray-700">Put these must-see destinations on your next travel wish
list for an unforgettable experience.
<i
class="fa-sharp fa-solid fa-arrow-right arrow"></i>
</p>
</div>
</div>
<!--Card 4-->
<div id="button4"
class="grid grid-rows-2 bg-slate-200 rounded-2xl w-full h-80 px-8 hover:cursor-pointer card drop-shadow-lg">
<!--Icon-->
<div class="mt-4 place-self-start">
<i class="fa-solid fa-map text-4xl icon"></i>
</div>
<!--Name + Description-->
<div class="self-end pb-6">
<h1 class="font-bold text-2xl mb-2">Ways to Get Around</h1>
<p class="font-medium text-gray-700">Browse the various transportation options to make your trip
that much easier when you arrive.
<i
class="fa-sharp fa-solid fa-arrow-right arrow"></i>
</p>
</div>
</div>
</div>
</div>
<!--Box 1-->
<div id="article1" style="display: none" ; class="h-full border-slate-300 border-l-2 mt-12 relative mx-2 md:mx-60">
<!-- Title -->
<div class="flex flex-row mx-10 gap-8 mt-8">
<!-- Icon -->
<div><i class="fa-solid fa-thumbs-up text-4xl icon"></i></div>
<!-- Title -->
<h1 class="flex-1 text-4xl font-black">Best Things To Do</h1>
</div>
<!-- Paragraph -->
<div class="mx-10 mt-8 pr-0 md:pr-52">
<p class="tracking-wide text-gray-800">Algeria is a fascinating North African country with a rich
history,
vibrant culture, and diverse natural
beauty that makes it an exciting destination to visit. When planning a trip to Algeria, there are many
things to consider in order to make the most of your experience.
One of the top attractions when visiting Algeria is the ancient city of Algiers. This city is the
capital of Algeria and is known for its stunning architecture, vibrant street life, and bustling
markets. Algiers is home to the Kasbah, which is a UNESCO World Heritage site and an excellent place to
discover the city's rich history and culture. The city also boasts beautiful beaches, museums, and art
galleries.
Another must-see destination when visiting Algeria is the Sahara Desert. This vast expanse of sand dunes
is one of the most impressive natural wonders in the world. Visitors can experience the breathtaking
beauty of the desert by taking a camel ride, trekking across the dunes, or camping under the stars. The
Sahara is a magical place that will leave a lasting impression on anyone who visits.</p>
</div>
<!-- Image -->
<div class="mx-10 mt-4">
<img class="w-full h-80 object-cover"
src="https://media-cdn.tripadvisor.com/media/attractions-splice-spp-720x480/09/2b/2a/24.jpg">
</div>
<div class="mx-10 mt-8 pr-0 md:pr-52 mb-8">
<p class="tracking-wide text-base text-gray-800">For history buffs, Timgad is an unforgettable experience.
This
well-preserved Roman city was founded in 100 AD and is an excellent example of Roman urban planning.
Timgad
features impressive ruins, including a theater, a triumphal arch, and a basilica. It's an excellent
destination for anyone interested in history, architecture, or archaeology.
Meanwhile, the coastal city of Oran offers a blend of French colonial architecture, traditional Algerian
culture, and stunning Mediterranean views. Visitors can stroll along the beach, explore the old town, or
visit the Santa Cruz Fort, which was built by the Spanish in the 16th century. Oran is a city with a
rich
cultural heritage, and it's an excellent place to discover Algerian culture and traditions.
Finally, food lovers will appreciate the local cuisine when visiting Algeria. Algerian cuisine is a
blend of
North African and Mediterranean influences and features delicious dishes like couscous, tagine, and
baklava.
Algerian food is known for its bold flavors, fresh ingredients, and rich spices, and it's a must-try for
anyone visiting Algeria.
In conclusion, Algeria is an exciting destination that offers something for everyone. Whether you're
interested in history, culture, or nature, there are many exciting things to see and do in Algeria. The
ancient city of Algiers, the Sahara Desert, Timgad, Oran, and Algerian cuisine are just a few of the
many
highlights that await visitors to this fascinating country.</p>
</div>
</div>
<!-- Box 2 -->
<div id="article2" style="display: none" ; class="h-full border-slate-300 border-l-2 mt-12 relative mx-2 md:mx-60">
<!-- Title -->
<div class="flex flex-row mx-10 gap-8 mt-8">
<!-- Icon -->
<div><i class="fa-solid fa-clock text-4xl icon"></i></div>
<!-- Title -->
<h1 class="flex-1 text-4xl font-black">When to Visit</h1>
</div>
<!-- Paragraph -->
<div class="mx-10 mt-8 pr-0 md:pr-52">
<p class="tracking-wide text-base text-gray-800">When planning a trip to Algeria, it's essential to consider
both the tips and travel trends to help you choose the perfect time to visit this destination. Algeria
has a Mediterranean climate, which means that the best time to visit is during the spring and fall when
temperatures are mild, and the weather is pleasant. During the summer months, temperatures can reach up
to 40°C, making it uncomfortable to explore the country's many attractions. The winter months can be
rainy and cool, but the Sahara Desert is an excellent place to visit during this time, as temperatures
are milder compared to the rest of the country.</p>
</div>
<!-- Image -->
<div class="mx-10 mt-4">
<img class="w-full h-80 object-cover"
src="https://www.afrik21.africa/wp-content/uploads/2021/05/shutterstock_1119526982-1-800x400.jpg">
</div>
<div class="mx-10 mt-8 pr-0 md:pr-52 mb-8">
<p class="tracking-wide text-base text-gray-800">Another trend to consider when traveling to Algeria is the
peak tourist season. Algeria's peak tourist season is from June to August, where many travelers visit
the country to enjoy the beaches and other attractions. During this time, prices for accommodation and
transportation tend to be higher, and it's advisable to book in advance to secure your preferred
options.
On the other hand, traveling during the off-peak season, such as during September to May, can be a more
affordable option. This is when you can experience the country's attractions with fewer crowds, which
means shorter queues, lower accommodation rates, and an overall more relaxed atmosphere.
It's also essential to be mindful of local festivals and events when planning your trip to Algeria. The
most popular festival is the International Festival of Algiers, which takes place in July and attracts
visitors from all over the world. Another festival to consider is the Tlemcen National Festival of
Popular Arts and Traditions, which takes place in June and celebrates traditional Algerian music, dance,
and handicrafts.
In conclusion, choosing the right time to visit Algeria is crucial for an enjoyable and memorable trip.
Considering the country's climate, peak tourist season, off-peak season, and local festivals and events
can help you make an informed decision and ensure that you get the most out of your visit to Algeria.
</p>
</div>
</div>
<!-- Box 3 -->
<div id="article3" style="display: none" ; class="h-full border-slate-300 border-l-2 mt-12 relative mx-2 md:mx-60">
<!-- Title -->
<div class="flex flex-row mx-10 gap-8 mt-8">
<!-- Icon -->
<div><i class="fa-solid fa-earth-americas text-4xl icon"></i></div>
<!-- Title -->
<h1 class="flex-1 text-4xl font-black">Best Places to Visit</h1>
</div>
<!-- Paragraph -->
<div class="mx-10 mt-8 pr-0 md:pr-52">
<p class="tracking-wide text-base text-gray-800">Algeria is a beautiful and diverse country that offers a
range of unique and exciting destinations for travelers. The following are some of the best places to
visit in Algeria:
Algiers: The capital city of Algeria is a must-visit destination for its stunning architecture, vibrant
street life, and bustling markets. The Kasbah, a UNESCO World Heritage site, is a perfect place to
discover the city's rich history and culture.
Tassili n'Ajjer National Park: This UNESCO World Heritage site features stunning rock formations,
ancient cave paintings, and breathtaking landscapes. It's an excellent destination for hiking and
trekking enthusiasts.
Oran: This coastal city is known for its blend of French colonial architecture, traditional Algerian
culture, and stunning Mediterranean views. Visitors can stroll along the beach, explore the old town, or
visit the Santa Cruz Fort.</p>
</div>
<!-- Image -->
<div class="mx-10 mt-4">
<img class="w-full h-80 object-cover" src="https://www.algerianembassy.org/images/mosaique2021-newv.jpg">
</div>
<div class="mx-10 mt-8 pr-0 md:pr-52 mb-8">
<p class="tracking-wide text-base text-gray-800">Sahara Desert: This vast expanse of sand dunes is one of
the most impressive natural wonders in the world. Visitors can experience the breathtaking beauty of the
desert by taking a camel ride, trekking across the dunes, or camping under the stars.
Tlemcen: This historic city is known for its beautiful Islamic architecture, traditional handicrafts,
and vibrant music scene. It's an excellent destination for culture and history buffs.
Djémila: This ancient Roman city features impressive ruins, including a theater, a triumphal arch, and a
basilica. It's an excellent destination for anyone interested in history, architecture, or archaeology.
In conclusion, Algeria offers a range of unique and exciting destinations for travelers. Whether you're
interested in history, culture, nature, or adventure, Algeria has something to offer. Algiers, Tassili
n'Ajjer National Park, Oran, the Sahara Desert, Tlemcen, and Djémila are just a few of the many
highlights that await visitors to this fascinating country.
</p>
</div>
</div>
<!-- Box 4 -->
<div id="article4" style="display: none" ; class="h-full border-slate-300 border-l-2 mt-12 relative mx-2 md:mx-60">
<!-- Title -->
<div class="flex flex-row mx-10 gap-8 mt-8">
<!-- Icon -->
<div><i class="fa-solid fa-map text-4xl icon"></i></div>
<!-- Title -->
<h1 class="flex-1 text-4xl font-black">Ways to Get Around</h1>
</div>
<!-- Paragraph -->
<div class="mx-10 mt-8 pr-0 md:pr-52">
<p class="tracking-wide text-base text-gray-800">Getting around Algeria is relatively easy, and there are
several transportation options available to visitors. The following are some of the best ways to get
around Algeria and browse various transportation options to make your trip more comfortable:
Taxis: Taxis are widely available in Algeria and are a convenient and affordable way to get around the
cities. Visitors should negotiate the fare before getting in the taxi to avoid any surprises.
Buses: Buses are another affordable way to get around Algeria. There are several bus companies that
operate in the country, and visitors can purchase tickets at the bus station.
Trains: Algeria has an extensive railway network that connects the major cities. Train travel is
comfortable and affordable, and tickets can be purchased at the station.</p>
</div>
<!-- Image -->
<div class="mx-10 mt-4">
<img class="w-full h-80 object-cover"
src="https://upload.wikimedia.org/wikipedia/commons/3/32/Situation_R%C3%A9seau_Autoroutier_Alg%C3%A9rier_-_Mai_2015_-_V.03.png">
</div>
<div class="mx-10 mt-8 pr-0 md:pr-52 mb-8">
<p class="tracking-wide text-base text-gray-800">Car rental: Visitors who want to explore Algeria
independently can rent a car. Rental agencies are available at the major airports and cities, and
visitors will need an international driver's license to rent a car.
Shared taxis: Shared taxis are a popular mode of transportation in Algeria. They are generally cheaper
than regular taxis but can be crowded and uncomfortable.
Domestic flights: Domestic flights are available in Algeria, but they can be expensive compared to other
modes of transportation. However, they are a convenient way to travel long distances quickly.
When traveling around Algeria, visitors should be aware of their surroundings and take appropriate
safety precautions. It's also a good idea to carry cash as not all transportation options accept credit
cards. By considering the various transportation options available and taking the necessary precautions,
visitors can make their trip to Algeria more comfortable and enjoyable.
</p>
</div>
</div>
</body>
<script>
const btn1 = document.getElementById("button1");
const btn2 = document.getElementById("button2");
const btn3 = document.getElementById("button3");
const btn4 = document.getElementById("button4");
const art1 = document.getElementById("article1");
const art2 = document.getElementById("article2");
const art3 = document.getElementById("article3");
const art4 = document.getElementById("article4");
function showArticle(article){
article.style.display = "block";
}
function hideArticle(article){
article.style.display = "none";
}
btn1.addEventListener("click", (e) => {
showArticle(art1);
hideArticle(art2);
hideArticle(art3);
hideArticle(art4);
})
btn2.addEventListener("click", (e) => {
showArticle(art2);
hideArticle(art1);
hideArticle(art3);
hideArticle(art4);
})
btn3.addEventListener("click", (e) => {
showArticle(art3);
hideArticle(art2);
hideArticle(art1);
hideArticle(art4);
})
btn4.addEventListener("click", (e) => {
showArticle(art4);
hideArticle(art2);
hideArticle(art3);
hideArticle(art1);
})
</script>
</html>