-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
185 lines (185 loc) · 7.34 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
<!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="styles.css" />
<link rel="stylesheet" href="queries.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="icon" href="ig/Logo-Berlin-By-Kiez.png" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
rel="stylesheet"
/>
<script defer src="/script.js"></script>
<meta
name="descrption"
content="A guide to the neighbourhoods of Berlin from a local. Includes many hidden gems and best places to visit in the city"
/>
<script src="https://code.iconify.design/iconify-icon/1.0.0-beta.3/iconify-icon.min.js"></script>
<title>Berlin By Kiez — Guide to Berlin neighbourhoods</title>
</head>
<body>
<div class="like--button">
<button class="button-like">
<ion-icon name="heart" class="heart"></ion-icon
><span class="count-number">0</span>
</button>
</div>
<header class="header">
<nav class="navigation">
<a href="#" class="btn navigation--btn">Home</a>
</nav>
</header>
<section class="hero">
<div class="hero-section" style="background-image: url(ig/hero-img.webp)">
<h1>Berlin by Kiez</h1>
<p>
<span class="kiez">Kiez</span> German pronunciation: [ˈkiːts] <br />Is
a German word that refers to a city neighbourhood, a relatively small
community within a larger town. The word is mainly used in Berlin and
northern Germany.<br />
Each district in Berlin has a number of it's own Kieze which are
highlighted here.
<br /><br /><span class="PS">
*PS This is simlly a collection of nice places in Berlin tried and
tested, please don't get hung up on Kiez area technicalities!</span
>
</p>
</div>
</section>
<section class="section-neighbourhoods">
<!--NEUKOLLN-->
<div class="section-item container grid grid--2--cols">
<div class="section-item-text-box">
<h2 class="secondary-heading">Neukölln</h2>
<p class="section-item-text">
International melting pot of cafes, bars and some of the city’s best
restaurants. Find a quirky art-house film in one of the Kinos or
chill with a beer in Hasenheide Park. Home to the popular
Schillerkiez, Reuterkiez and everything in between.
</p>
<a href="/neukolln.html" class="btn section--btn">find out more</a>
</div>
<div class="section-img-box">
<img
src="ig/NK.jpg"
class="section-img"
alt="picture of a Berlin neighbourhood - outdoor dance area, sunny weather"
/>
</div>
</div>
<!--MITTE-->
<div class="section-item container grid grid--2--cols">
<div class="section-item-text-box">
<h2 class="secondary-heading">Mitte</h2>
<p class="section-item-text">
The so-called city center and home to many of Berlin's iconinc
landmarks like Branderburger Tor and the State Opera. You can spend
hours browsing through the many museums and galleries of Museum
Island or find some delicous snacks at the Hackescher Markt on a
late Saturday morning
</p>
<a href="#" class="btn section--btn">find out more</a>
</div>
<div class="section-img-box">
<img
src="ig/Mitte.jpg"
class="section-img"
alt="picture of a Berlin neighbourhood - street view with a mosque"
/>
</div>
</div>
<!--KREUZBERG-->
<div class="section-item container grid grid--2--cols">
<div class="section-item-text-box">
<h2 class="secondary-heading">Kreuzberg</h2>
<p class="section-item-text">
Berlin’s gritty art quarter, home to many famous Berlin clubs and
the buzzy Kottbuser Tor. Whatever your taste, you will find it here.
</p>
<a href="/kreuzberg.html" class="btn section--btn">find out more</a>
</div>
<div class="section-img-box">
<img
src="ig/KZ.jpg"
class="section-img"
alt="picture of a Berlin neighbourhood - street with cars"
/>
</div>
</div>
<!--WEDDING-->
<div class="section-item container grid grid--2--cols">
<div class="section-item-text-box">
<h2 class="secondary-heading">Wedding</h2>
<p class="section-item-text">
A district once split by the Berlin Wall, Wedding is a
multi-cultural area home to many Berlin ethnicites and the underdog
of this city's neighbourhoods with many hidden gems
</p>
<a href="#" class="btn section--btn">find out more</a>
</div>
<div class="section-img-box">
<img
src="ig/WD.jpg"
class="section-img"
alt="picture of a Berlin neighbourhood - run down gallery"
/>
</div>
</div>
<!--CHARLOTTENBURG-->
<!-- <div class="section-item container grid grid--2--cols">
<div class="section-item-text-box">
<h2 class="secondary-heading" title="Charlottenburg">
Charlottenburg
</h2>
<p class="section-item-text">
One of the oldest and most elegant areas of Berlin, with the popular
Ku'Damm shopping district, the famous Zoo and a charming castle
</p>
<a href="#" class="btn section--btn">find out more</a>
</div>
<div class="section-img-box">
<img
src="ig/CH.jpg"
class="section-img"
alt="picture of a Berlin neighbourhood - Metro Station with the neighbourhood name"
/>
</div>
</div> -->
<!--PRENZLAUER BERG-->
<div class="section-item container grid grid--2--cols">
<div class="section-item-text-box">
<h2 class="secondary-heading">Prenzlauer Berg</h2>
<p class="section-item-text">
Buslting Sundays markets, cute plant shops, an obundnace of great
restaurants and cafes - a prime location to enjoy some people
watching on a perfact Sunday
</p>
<a href="#" class="btn section--btn">find out more</a>
</div>
<div class="section-img-box">
<img
src="ig/PB.jpg"
class="section-img"
alt="picture of a Berlin neighbourhood - quiet sunny area, housing building with beautiful plants"
/>
</div>
</div>
</section>
<footer>
<p>Coded by Katya Sitko</p>
<a href="https://github.com/kat-s92/Berlin-By-Kiez" class="footer-icon"
><ion-icon name="logo-github"></ion-icon
></a>
</footer>
<script
type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
<script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script defer src="/script.js"></script>
</body>
</html>