-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
159 lines (153 loc) · 5.67 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags and Favicon Links -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Stylesheet Links -->
<link rel="stylesheet" type="text/css" href="styles/base.css" />
<link rel="stylesheet" type="text/css" href="styles/navbar.css" />
<link rel="stylesheet" type="text/css" href="styles/main.css" />
<link rel="stylesheet" type="text/css" href="styles/footer.css" />
<!-- Favicon for different browsers and apps -->
<link
rel="apple-touch-icon"
sizes="180x180"
href="assets/icons/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="assets/icons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="assets/icons/favicon-16x16.png"
/>
<link rel="manifest" href="assets/icons/site.webmanifest" />
<link
rel="mask-icon"
href="assets/icons/safari-pinned-tab.svg"
color="#5bbad5"
/>
<meta name="msapplication-TileColor" content="#039ea2" />
<meta name="theme-color" content="#ffffff" />
<title>Setúbal</title>
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar">
<!-- Dropdown Menu -->
<div class="dropdown">
<button class="dropbtn">Menu ▼</button>
<div class="dropdown-content">
<a href="index.html">Home</a>
<a href="pages/arrabida.html">Arrábida</a>
<a href="pages/beaches.html">Beaches</a>
<a href="pages/gastronomy.html">Gastronomy</a>
<a href="pages/contact.html">Contact</a>
<a href="pages/about.html">About</a>
</div>
</div>
<!-- Logo -->
<a href="index.html">
<img class="logo" src="assets/images/logo.png" alt="Logo" />
</a>
<!-- Language Selection -->
<div class="languages">
<a href="index.html"
><img src="assets/icons/en.png" alt="English"
/></a>
<a href="index-pt.html"
><img src="assets/icons/pt.png" alt="Portuguese"
/></a>
</div>
</nav>
<main>
<section class="intro imgToRight">
<div class="description">
<h1>Setúbal</h1>
<p class="mainText">
In my humble opinion, Setúbal has three major attractions: Arrábida,
Beaches and gastronomy, apart from my memories, family and
friends...
</p>
<p class="mainText">
Setúbal is a city in Portugal, situated on the Setúbal Peninsula
within the Lisbon metropolitan area. It serves as the administrative
center of the Setúbal District and is the principal city of the
Setúbal Municipality. In 2018, Setúbal was ranked as the 11th most
livable city in Portugal.
</p>
</div>
<img
class="arco"
src="assets/images/arco_sao_sebastiao3250x4268.jpg"
alt="Arco de São Sebastião"
/>
</section>
<section class="intro imgToLeft">
<div class="description">
<h1>History</h1>
<p class="mainText">
Setúbal was founded in the first millennium BC by the Phoenicians,
who established a commercial outpost. It was later conquered by the
Carthaginians, followed by the Romans, who set up a fish salting
factory. In the 8th century, the city was taken by the Moors, and it
was eventually recaptured by the Portuguese in the 12th century.
</p>
</div>
<article>
<span class="than">+ than</span>
<span class="number" data-value="3000">0</span>
<p class="textToRight">Years</p>
</article>
</section>
<section class="intro">
<div class="">
<h1>Geography</h1>
<p class="mainText">
Setúbal is situated on the Setúbal Peninsula, nestled between the
Sado and Tejo rivers. The city is encircled by the Arrábida Natural
Park, renowned for its stunning beaches and mountains. Additionally,
it is close to the Sado Estuary, a protected area that hosts a
diverse array of bird and fish species.
</p>
</div>
</section>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d199772.2581209843!2d-9.028908174879778!3d38.5235890523049!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1942feab027435%3A0x9ff23f769bb5aa54!2zU2V0w7piYWw!5e0!3m2!1spt-PT!2spt!4v1721670046226!5m2!1spt-PT!2spt"
width="800"
height="600"
style="border: 0"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
></iframe>
</main>
<footer>
<!-- Footer -->
<div class="social">
<!-- Social Media Links -->
<a href="https://www.mun-setubal.pt/" target="_blank"
><img src="assets/icons/android-chrome-192x192.png" alt="Município"
/></a>
<a href="https://www.facebook.com/municipiodesetubal" target="_blank"
><img src="assets/icons/facebook.png" alt="Facebook"
/></a>
<a href="https://www.instagram.com/municipiodesetubal/" target="_blank"
><img src="assets/icons/instagram.png" alt="Instagram"
/></a>
<a href="https://www.youtube.com/@municipiodesetubal" target="_blank"
><img src="assets/icons/youtube.png" alt="YouTube"
/></a>
</div>
<!-- Copyright Notice -->
<p>© <span id="current-year">0</span> mfpmartins.dev</p>
</footer>
<script src="scripts/main.js"></script>
</body>
</html>