-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
195 lines (191 loc) · 11.4 KB
/
Copy pathindex.html
File metadata and controls
195 lines (191 loc) · 11.4 KB
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
<!DOCTYPE html>
<html lang="en">
<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="src/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap" rel="stylesheet">
<title>Responsive Addon Project</title>
</head>
<body>
<header>
<div class="header-container">
<div class="upper-text-container">
<svg class="map-pin-icon" width="80" height="80" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.2539 13.5379C15.8674 13.1731 17.8789 10.9289 17.8789 8.21484C17.8789 5.24631 15.4724 2.83984 12.5039 2.83984C9.53538 2.83984 7.12891 5.24631 7.12891 8.21484C7.12891 10.9289 9.14041 13.1731 11.7539 13.5379L11.7539 22.0898C11.7539 22.5041 12.0897 22.8398 12.5039 22.8398C12.9181 22.8398 13.2539 22.5041 13.2539 22.0898L13.2539 13.5379ZM8.62891 8.21484C8.62891 6.07474 10.3638 4.33984 12.5039 4.33984C14.644 4.33984 16.3789 6.07474 16.3789 8.21484C16.3789 10.3549 14.644 12.0898 12.5039 12.0898C10.3638 12.0898 8.62891 10.3549 8.62891 8.21484Z" fill="#ffffff"/>
</svg>
<h2>
Fars Province, Iran</h2>
</div>
<h1 >Welcome to Shiraz</h1>
<div class="lower-text-container">
<h2>
city of poem and wine
</h2>
</div>
<a href="#more" class="learn-more-btn">
Learn More
</a>
</div>
</header>
<main>
<section class="primary grid grid-2-columns">
<div>
<img class="img-responsive" src="images/amin-yarban-IyMkc4Y2kK0-unsplash.jpg" alt="saadi tomb photo">
</div>
<div class="shiraz-text-container">
<a id="more"></a>
<h2>Why Shiraz?</h2>
<h3>Shiraz, Iran's Cultural Heartland</h3>
<p>
Shiraz, Iran’s cultural heartland, has ancient roots. Its name evolved from "Tiraziš," found on 4,000-year-old Elamite tablets. The city reached its golden age in the 18th century when Karim Khan Zand made it his capital, adorning it with magnificent structures like the Arg fortress and Vakil Bazaar. </p>
<p>
Long revered as a center for art and learning, Shiraz is most famously the city of poets. It is the cherished home and final resting place of the legendary Persian poets, Hafez and Saadi. Their tombs draw admirers from across the globe, cementing its timeless legacy as the soul of poetry. </p>
</div>
</section>
<section class="secondary">
<h2 class="top-sights text-center">TOP SIGHTS</h2>
<h3 class="text-center">Must-See Sights in Shiraz</h3>
<div class="card-container grid-3-columns">
<div class="card">
<div class="card-header grid grid-2-columns">
<div class="card-text-container">
<h2>(Narenjestan-e Ghavam)</h2>
<h3>Qavam House</h3>
<p>The Qavam House, also called Narenjestan-e Ghavam, is a stunning Qajar-era mansion in Shiraz. Famous for its magnificent mirror work and courtyard filled with fragrant sour orange trees, it's a prime example of Persian aristocratic elegance.</p>
</div>
<iframe class="gmaps-embed" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3468.8485625813087!2d52.55015117510683!3d29.60808823911409!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3fb20d6cb0f348e5%3A0xaefd47ece12265f9!2sQavam%20House!5e0!3m2!1sen!2sus!4v1760109636875!5m2!1sen!2sus" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="card-body">
<div class="image-album">
<img src="images/abolfazl-ranjbar-_PnXmRIhIIA-unsplash.jpg"
class="img-responsive" alt="Qavam House photo">
<img src="images/qavam-house.jpg"
class="img-responsive" alt="Qavam House photo">
<img src="images/qavam-house-2.jpg"
class="img-responsive" alt="Qavam House photo">
<img src="images/Painted%20ceiling%20at%20Qavam%20House%20(Narenjestan%20e%20Ghavam),%20Shiraz,%20Iran%C2%A0.The%20building%20preserves%20the.jpg"
class="img-responsive" alt="Qavam House photo">
</div>
</div>
</div>
<br/>
<div class="card">
<div class="card-header grid grid-2-columns">
<div class="card-text-container">
<h2>(Nasir al-Mulk Mosque)</h2>
<h3>Pink Mosque</h3>
<p>The Nasir al-Mulk Mosque, or Pink Mosque, is a dazzling Qajar-era (19th Century) structure in Shiraz. It’s famed for its stunning stained-glass windows that project a vibrant kaleidoscope of colors onto the prayer hall, a unique and magical spectacle in Persian architecture.</p>
</div>
<iframe class="gmaps-embed" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3468.8326448891794!2d52.54848080000001!3d29.6085509!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3fb20d6dd1e1a9e1%3A0xa5db54d59b5f73fe!2sNasir%20al-Mulk%20Mosque!5e0!3m2!1sen!2sth!4v1760115585340!5m2!1sen!2sth" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div>
<div class="card-body">
<div class="image-album">
<img src="images/faruk-kaymak-OYTO1UKJK3M-unsplash.jpg"
class="img-responsive" alt="Pink Mosque">
<img src="images/reza-jahangir-VwMGprlC3dA-unsplash.jpg"
class="img-responsive" alt="Pink Mosque">
<img src="images/nasir-al-mulk-painted-walls.jpg"
class="img-responsive" alt="Pink Mosque">
<img src="images/helia-ziyaee-7NMwJHRXvus-unsplash.jpg"
class="img-responsive" alt="Pink Mosque">
</div>
</div>
</div>
<br/>
<div class="card">
<div class="card-header grid grid-2-columns">
<div class="card-text-container">
<h2>(Hafezieh)</h2>
<h3>Hafez Tomb</h3>
<p>The Tomb of Hafez (Hafezieh) in Shiraz honors Hafez, Iran's most cherished lyric poet. Known as the "tongue of the unseen," his shrine is set within a beautiful Persian garden. It remains a vital spiritual and cultural pilgrimage site, where visitors read his timeless poems for guidance.</p>
</div>
<iframe class="gmaps-embed" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3468.2390580997053!2d52.558495199999996!3d29.6257993!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3fb20da0cdc4d8d7%3A0x87f9a02c62a2d984!2sTomb%20of%20Hafez!5e0!3m2!1sen!2sth!4v1760117425577!5m2!1sen!2sth" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div>
<div class="card-body">
<div class="image-album">
<img src="images/poriya-zolghadr-Qg4s5tfvT8w-unsplash.jpg"
class="img-responsive" alt="Hafez tomb">
<img src="images/Tomb-of-Hafez-Shiraz-Iran-1.jpg"
class="img-responsive" alt="Hafez tomb">
<img src="images/shayan-ghiasvand-URNybiCn9d0-unsplash.jpg"
class="img-responsive" alt="Hafez tomb">
<img src="images/goingIRAN-Hafez-Tomb-2.jpg"
class="img-responsive" alt="Hafez tomb">
</div>
</div>
</div>
<br/>
<div class="card">
<div class="card-header grid grid-2-columns">
<div class="card-text-container">
<h2>(Takht-e Jamshid)</h2>
<h3>Persepolis</h3>
<p>Persepolis (Takht-e Jamshid) is the monumental ruined city near Shiraz, once the ceremonial capital of the Achaemenid Empire (550–330 BC). This UNESCO World Heritage Site features colossal columns and magnificent bas-reliefs, standing as a grand symbol of ancient Persian civilization and power.</p>
</div>
<iframe class="gmaps-embed" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3591.90625649021!2d52.88702878194498!3d29.934885940087106!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3fade35f5cf0ad6d%3A0x2363ec76997cfee!2sPersepolis!5e0!3m2!1sen!2sth!4v1760117925465!5m2!1sen!2sth" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div>
<div class="card-body">
<div class="image-album">
<img src="images/afshin-t2y-uQqy28aN3R8-unsplash.jpg"
class="img-responsive" alt="Persepolis photo">
<img src="images/hasan-almasi-xLTbaVPHs3Q-unsplash.jpg"
class="img-responsive" alt="Persepolis photo">
<img src="images/persepolis_iran.jpg"
class="img-responsive" alt="Persepolis photo">
<img src="images/Persian_School_-_The_palace_of_Darius_I_in_Persepolis_(Iran)_detail_of_the_decor_of_the_apadana_o_-_(MeisterDrucke-1016357).jpg"
class="img-responsive" alt="Persepolis photo">
</div>
</div>
</div>
</div>
</section>
</main>
<footer>
<section class="grid grid-3-columns">
<div>
<h3>
More About Shiraz
</h3>
<ul>
<li>
<a href="#">
Shiraz Airport website
</a>
</li>
<li>
<a href="#">
Map of Shiraz
</a>
</li>
<li>
<a href="#">
Public Transport map
</a>
</li>
</ul>
</div>
<div>
<h3>
More About me
</h3>
<p>
Hi! I am Ghazal Jamali and I made this website to show you the endless beauties of Shiraz. Take your eyes to a vacation!
</p>
</div>
<div>
<h3>
More About this website
</h3>
<p>
I created this page as part of a project for SheCodes Responsive to develop my coding skills.
This project was coded by
<a href="https://github.com/avorrit">
Ghazal Jamali
</a>
</p>
</div>
</section>
</footer>
</body>
</html>