-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
215 lines (203 loc) · 9.79 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
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
<!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=Mulish:ital,wght@0,200..1000;1,200..1000&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 Oslo</title>
</head>
<body>
<div class="container">
<header>
<h3>.TRAVEL.</h3>
<h1>Welcome to Oslo🇳🇴</h1>
<h2>Captial city of Norway</h2>
<a href="#more">Learn more</a>
</header>
<main>
<section class="grid grid-2-columns">
<div>
<img
src="images/oslo.png"
alt="Olso Opera Building"
class="img-responsive"/>
</div>
<div>
<a name="more"></a>
<h2>Why Oslo?</h2>
<h3>Oslo, the accessible city.</h3>
<p>
Oslo is the capital of Norway and the country’s largest city with over 700,000 inhabitants.
</p>
<p>
Located between the fjord and the forest, the city offers great connectivity to nature. This is a central Norwegian value which underlies Oslo’s aspiration to be a green capital and its aim to become a fossil free city by 2030.
</p>
</div>
</section>
<section class="secondary">
<h2 class="text-center">Things to do</h2>
<h3 class="text-center">Attractions and Activites in Oslo</h3>
<div class="grid grid-3-columns">
<div class="card">
<div class="card-header grid grid-2-columns">
<img
src="images/opera.png"
alt=""
class="img-responsive-card"
/>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2000.485565041931!2d10.750552577924294!3d59.907488474899516!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46416e8ba321f715%3A0x1cb6a7c6a2a2d611!2sOslo%20Opera%20House!5e0!3m2!1sen!2suk!4v1731146994081!5m2!1sen!2suk" class="embed" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="card-body">
<h4>Oslo Opera House</h4>
<p>The Oslo Opera House is the home of the Norwegian National Opera and Ballet, and the national opera house in Norway.</p>
<h5>Address:</h5>
<p>Kirsten Flagstads Plass 1</p>
<h5>Review</h5>
<p>The Opera House is a really magnificent building with a modern style. The outside is covered of metal material, making it stand out right by the water. You can even walk up the sloping roof for awesome views of the city – a real highlight!</p>
<p class="review">⭐️⭐️⭐️⭐️⭐️</p>
</div>
<div class="card-footer">
<a
href="https://maps.app.goo.gl/6CZK8xcDz7pPu1i38"
class="btn"
target="_blank"
>
Learn more
</a>
</div>
</div>
<div class="card">
<div class="card-header grid grid-2-columns">
<img
src="images/royal.png"
alt=""
class="img-responsive-card"
/>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3113.223529092416!2d-9.185803100000006!3d38.71267669999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1933544a9dc8a5%3A0x3b7d60f232099aae!2sRoyal%20Palace!5e0!3m2!1sen!2suk!4v1731147913813!5m2!1sen!2suk" class="embed" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="card-body">
<h4>The Royal Palace</h4>
<p>The Royal Palace is one of the country's most important buildings, and a concrete symbol of the course of Norwegian history since 1814.</p>
<h5>Address:</h5>
<p>Slottsplassen 1, 0010</p>
<h5>Review</h5>
<p>The Royal Palace in Oslo is a majestic symbol of Norway's history and monarchy, standing proudly at the end of Karl Johans gate. Surrounded by beautifully manicured gardens, the palace is a must-see for anyone visiting the city, offering a glimpse into the country’s royal heritage.</p>
<p class="review">⭐️⭐️⭐️⭐️⭐️</p>
</div>
<div class="card-footer">
<a
href="https://maps.app.goo.gl/kqrzXrDd4Y2AM33XA"
class="btn"
target="_blank"
>
Learn more
</a>
</div>
</div>
<div class="card">
<div class="card-header grid grid-2-columns">
<img
src="images/vigeland.png"
alt=""
class="img-responsive-card"
/>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3998.8738885092193!2d10.696630199919596!3d59.92489149963265!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46416dcebaff5fb1%3A0x863f8a43655c796!2sThe%20Vigeland%20Park!5e0!3m2!1sen!2suk!4v1731147949845!5m2!1sen!2suk" class="embed" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="card-body">
<h4>Vigeland Sculpture Park</h4>
<p>The sculpture park is Gustav Vigeland's life work, comprising over 200 sculptures in granite, bronze and wrought iron.</p>
<h5>Address:</h5>
<p>Nobels gate 32, 0268</p>
<h5>Review</h5>
<p>A must visit location in Oslo. There are so many abstract sculptures throughout the park. And especially the Autumn colours in October were beautiful. Very accessible by public bus.</p>
<p class="review">⭐️⭐️⭐️⭐️⭐️</p>
</div>
<div class="card-footer">
<a
href="https://maps.app.goo.gl/ECd9HkF4sA9vd28r6"
class="btn"
target="_blank"
>
Learn more
</a>
</div>
</div>
</div>
</section>
<section>
<h2 class="text-center">Gallery</h2>
<h3 class="text-center">Images of Oslo</h3>
<div class="instagram-embeds">
<div class="grid grid-3-columns">
<!-- Embed Instagram post -->
<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/C-N3QaeKQjG/" data-instgrm-version="14" style="max-width: 540px; min-width: 326px; width: 100%; margin: auto;">
</blockquote>
<!-- Embed Instagram Reel -->
<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/reel/C_2gat-MOAC/" data-instgrm-version="14" style="max-width: 540px; min-width: 326px; width: 100%; margin: auto;">
</blockquote>
<!-- Embed Instagram Post -->
<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/DBGW3xUoJ-X/" data-instgrm-version="14" style="max-width: 540px; min-width: 326px; width: 100%; margin: auto;">
</blockquote>
<script async src="https://www.instagram.com/embed.js"></script>
</div>
</div>
</section>
</main>
<footer>
<section class="grid grid-3-columns-footer">
<div>
<h3>More about Oslo</h3>
<ul>
<li>
<a href="https://avinor.no/en/airport/oslo-airport/" target="_blank" rel="noopener noreferrer">Oslo Airport website</a>
</li>
<li>
<a href="https://www.visitoslo.com/en/activities-and-attractions/10-suggestions/top-attractions/" target="_blank" rel="noopener noreferrer">Oslo's top 10 attractions</a>
</li>
<li>
<a href="https://www.visitoslo.com/en/map/" target="_blank" rel="noopener noreferrer">Map of Oslo</a>
</li>
<li>
<a href="https://norwaywithpal.com/norway-travel-blog/how-to-use-public-transportation-in-oslo-a-guide/" target="_blank" rel="noopener noreferrer">Travel in Oslo</a>
</li>
</ul>
</div>
<div>
<h3>About Oslo</h3>
<p>Oslo is a very accessible city and Norway’s hub for national and international travel. Oslo is a city in constant growth and transformation. A well-developed public transportation system of underground and over ground trains, buses, trams, and boats gives easy to access to the city and its surrounding region. The city center is easily covered on foot, and city bikes are available throughout Oslo.</p>
</div>
<div>
<h3>About this website</h3>
<p> This project was created as part of a project for SheCodes Responsive to develop my coding skills.</p>
<p>This project was coded by
<a
href="https://github.com/eknox22"
target="_blank"
rel="noopener noreferrer"
>Emily Knox-Clifton</a
>
and is
<a
href="https://github.com/eknox22/Norway-Travel-Project"
target="_blank"
rel="noopener noreferrer"
>open-sourced on GitHub.</a
>
This project is hosted on
<a
href="https://norway-travel-project-ekc.netlify.app/"
target="_blank"
rel="noopener noreferrer"
>Netlify.</a
></p>
</div>
</section>
</footer>
</body>
</html>