-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
85 lines (74 loc) · 3.68 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- External Stylesheet -->
<link rel="stylesheet" href="styles.css">
<script src="scripts.js" defer></script>
</head>
<body>
<!-- Header Section -->
<header class="header">
<img src="istanbul.jpg" alt="Panoramic view of Istanbul" class="header-img">
<div class="header-text">
<h1 id="main-title">Visit Istanbul</h1>
<p>Discover the rich culture, history, and vibrant life of this amazing city.</p>
<button class="styled-button" onclick="changeTitle()">Change Title</button>
</div>
</header>
<!-- Activities Section -->
<section class="activities">
<h2>Explore Istanbul's Iconic Landmarks</h2>
<div class="activity-container">
<!-- Hagia Sophia Carousel -->
<article class="landmark" id="hagia-sophia">
<div class="carousel">
<button class="prev" onclick="prevImage(0)">❮</button>
<a href="https://en.wikipedia.org/wiki/Hagia_Sophia" target="_blank">
<img id="carousel-img-0" src="hagia-sophia.jpg" alt="Hagia Sophia">
</a>
<button class="next" onclick="nextImage(0)">❯</button>
</div>
<h3>Experience the Splendor of Hagia Sophia</h3>
<p>Step inside one of the world’s greatest architectural marvels. Hagia Sophia has stood the test of
time, serving as a church, a mosque, and now a museum that holds centuries of history and cultural
fusion.</p>
</article>
<!-- Maiden's Tower Carousel -->
<article class="landmark" id="maidens-tower">
<div class="carousel">
<button class="prev" onclick="prevImage(1)">❮</button>
<a href="https://en.wikipedia.org/wiki/Maiden%27s_Tower" target="_blank">
<img id="carousel-img-1" src="maidens-tower.jpg" alt="Maiden's Tower">
</a>
<button class="next" onclick="nextImage(1)">❯</button>
</div>
<h3>Experience the Romance of Maiden's Tower</h3>
<p>Sail to the Maiden’s Tower, a legendary structure that has guarded the Bosphorus for centuries. From
this romantic spot, enjoy panoramic views of Istanbul where East truly meets West.</p>
</article>
<!-- Galata Tower Carousel -->
<article class="landmark" id="galata-tower">
<div class="carousel">
<button class="prev" onclick="prevImage(2)">❮</button>
<a href="https://en.wikipedia.org/wiki/Galata" target="_blank">
<img id="carousel-img-2" src="galata.jpg" alt="Galata Tower">
</a>
<button class="next" onclick="nextImage(2)">❯</button>
</div>
<h3>Experience the magnificent Galata Tower</h3>
<p>Ascend the historic Galata Tower and experience a breathtaking 360-degree view of Istanbul’s skyline,
where ancient landmarks blend seamlessly with the modern cityscape.</p>
</article>
</div>
</section>
<!-- Guide Section -->
<section class="guide">
<img src="fatma.png" alt="Your guide">
<div class="guide-info">
<h3>Your guide</h3>
<p>“I have lived in Istanbul for over 26 years and I can show you all its hidden gems...”</p>
<p><strong>Fatma Arslantas</strong></p>
</div>
</section>
</body>
</html>