-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
178 lines (173 loc) · 9.29 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=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" rel="stylesheet">
<link rel="stylesheet" href="src/style.css">
<title>Welcome to Venice</title>
</head>
<body>
<div class="container">
<header>
<h3>.TRAVEL.</h3>
<h1>Welcome to Venice</h1>
<h2>Stunning city in northeastern Italy</h2>
<a href="#more">Learn more</a>
</header>
<main>
<section class="grid grid-2-columns">
<div>
<img src="/Images/main-img.avif" class="main-img img-responsive" alt="Venice image">
</div>
<div>
<a name="more"></a>
<h2>Why Venice</h2>
<h3>Venice, the floating city</h3>
<p> Venice is one of the most iconic destinations in the world, renowned for its intricate network of canals, stunning architecture, and romantic charm.
Built on a series of 118 small islands in the Venetian Lagoon, the city is connected by over 400 bridges and relies on canals for transportation, making it uniquely car-free.
At the heart of Venice lies St. Mark's Square, home to the breathtaking St. Mark's Basilica and the towering Campanile.
</p>
<p>
The Grand Canal, Venice’s main waterway, is lined with historic palaces that reflect its rich maritime and trading history.
Beyond its iconic canals, Venice shines as a cultural hub, hosting the vibrant Venetian Carnival, the Venice Biennale, and the Venice Film Festival.
Despite challenges like rising sea levels, the city continues to attract millions of visitors with its timeless charm and artistic heritage.
</p>
</div>
</section>
<section class="secondary">
<h2 class="text-center">CAFÈS</h2>
<h3 class="text-center">My favorite Cafès in Venice</h3>
<div class="grid grid-3-columns">
<div class="card">
<div class="card-header grid grid-2-columns">
<img src="/Images/Cafès/cafe-img1.jpg" class="cafe-img img-responsive" alt="Caffè florian">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2799.7962024376156!2d12.338223!3d45.433609399999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x477eb1d73f81a82b%3A0x296a30c5abfb0093!2sCaff%C3%A8%20Florian!5e0!3m2!1sen!2spl!4v1734809603930!5m2!1sen!2spl" class="embed" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="card-body">
<h4>
Caffè florian
</h4>
<p>
Caffè Florian in Venice’s St. Mark’s Square serves Venetian classics like squid ink risotto alongside famous espresso, blending history and flavor since 1720.
</p>
<h5>
Address:
</h5>
<p>
P.za San Marco, 57
</p>
<h5>
What I like about it
</h5>
<p>
Its prime location in St. Mark's Square, combined with gourmet coffee and Venetian delicacies, makes it a must-visit for an unforgettable experience. </p>
</div>
<div class="card-footer">
<a href="https://maps.app.goo.gl/8NdTkkjyB4oTh15u7" class="btn" target="_blank">Learn more</a>
</div>
</div>
<div class="card">
<div class="card-header grid grid-2-columns">
<img src="/Images/Cafès/cafe-img2.jpg" class="cafe-img img-responsive" alt="Cafè Dolce Vita Venezia">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2799.682377816634!2d12.325444099999997!3d45.4359037!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x477eb199e14d2295%3A0x617bea6dc62f6d90!2sDolce%20Vita%20Venezia!5e0!3m2!1sen!2spl!4v1734812181970!5m2!1sen!2spl" class="embed" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="card-body">
<h4>
Cafè Dolce Vita Venezia
</h4>
<p>
Café Dolce Vita Venezia offers a cozy escape with delicious pastries, coffee, and refreshing drinks in the heart of Venice.
Its charming atmosphere makes it a perfect spot to enjoy Italian treats like tiramisu and cannoncini.
</p>
<h5>
Address:
</h5>
<p>
Sestiere Dorsoduro, 3956A
</p>
<h5>
What I like about it
</h5>
<p>
Its outdoor seating provides a charming view of Venice’s picturesque streets, making it an ideal place to enjoy a coffee break. </p>
</div>
<div class="card-footer">
<a href="https://maps.app.goo.gl/iz3rEKzYW5ChBMWG8" class="btn" target="_blank">Learn more</a>
</div>
</div>
<div class="card">
<div class="card-header grid grid-2-columns">
<img src="/Images/Cafès/cafe-img3.jpg" class="cafe-img img-responsive" alt="Caffè Saraceno">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2799.58205383759!2d12.335238199999997!3d45.437925799999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x477eb1db11e3ef1d%3A0xfb69ba5e3c617386!2sRistorante%20Caff%C3%A8%20Saraceno!5e0!3m2!1sen!2spl!4v1734812265461!5m2!1sen!2spl" class="embed" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="card-body">
<h4>
Caffè Saraceno
</h4>
<p>
Caffè Saraceno, located in the vibrant heart of Venice, is a charming café known for its warm atmosphere and excellent service. Situated near the iconic Rialto Bridge, it offers a delightful selection of coffee, pastries, and light Italian dishes. </p>
<h5>
Address:
</h5>
<p>
726 San Polo
</p>
<h5>
What I like about it
</h5>
<p>
Its outdoor seating provides a perfect spot to enjoy the lively streets of Venice while savoring a relaxing break.
</p>
</div>
<div class="card-footer">
<a href="https://maps.app.goo.gl/jWHtUbvZEXxXgp4P9" class="btn" target="_blank">Learn more</a>
</div>
</div>
</div>
</section>
<section class="photo-gallery">
<h2 class="text-center">Gallery</h2>
<h3 class="text-center">My photos from Venice</h3>
<div class="gallery grid grid-3-columns">
<img src="Images/venice-photos/venice-photo6.jpeg" alt="Author's photo" class="img-responsive">
<img src="Images/venice-photos/venice-photo1.jpeg" alt="Venice image" class="img-responsive">
<img src="Images/venice-photos/venice-photo2.jpeg" alt="Venice image" class="img-responsive">
<img src="Images/venice-photos/venice-photo3.jpeg" alt="Venice image" class="img-responsive">
<img src="Images/venice-photos/venice-photo4.jpeg" alt="Venice image" class="img-responsive">
<img src="Images/venice-photos/venice-photo5.jpeg" alt="Venic image" class="img-responsive">
</div>
</section>
</main>
<footer>
<section class="grid grid-3-columns-with-first-narrow">
<div class="col">
<h3>
More about Venice
</h3>
<ul>
<li> <a href="https://www.veneziaairport.it/en/" target="_blank">Venice Airport Website</a></li>
<li> <a href="https://maps.app.goo.gl/EH4JkGYFv7ueMT8cA" target="_blank"> Map of Venice</a></li>
<li> <a href="https://moovitapp.com/index/en/public_transit-Offline_maps_Venezia_Mestre_Buses-map-Venezia-2083-4255" target="_blank">Public transport map</a></li>
</ul>
</div>
<div class="col">
<h3>About me</h3>
<p>
Hi, I'm Charity Orhoridiohwo. I visited Venice in December 2023 and fell in love with the city. I'm already planning a return trip. <br />
I created this project as part of the SheCodes Responsive program to enhance my coding skills.
</p>
</div>
<div class="col">
<h3>About this website</h3>
<p class="code-credit">
This project was coded by <a href="https://github.com/CharityO3" target="_blank">Charity Orhoridiohwo</a> and is open-sourced on <a href="https://github.com/CharityO3/travel-project" target="_blank">GitHub</a> and hosted on <a href="https://venice-travel-blog.netlify.app/" target="_blank">Netlify</a>
</p>
</div>
</section>
</footer>
</div>
</body>
</html>