-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
360 lines (346 loc) · 15.3 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
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
<!DOCTYPE html>
<html lang="sv">
<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=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Cinema Feodal</title>
</head>
<body>
<header>
<nav>
<!-- Header Mobile -->
<div class="header-mob">
<a href="index.html">
<img src="/images/f-logo.png" alt="Feodal logo">
</a>
<a href="index.html">
<h1 class="title-mob">CINEMA <br /> FEODAL</h1>
</a>
<!-- Nav Mobile -->
<div class="nav-container-mob">
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<!-- Header Desktop -->
<div class="header-desk">
<div class="header-desk-content">
<a href="index.html">
<img src="/images/f-logo.png" alt="Feodal logo">
</a>
<div class="title-desk-content">
<a href="index.html">
<h1 class="title-desk">CINEMA FEODAL</h1>
</a>
<p>LÄRDOMSGATAN 3, GÖTEBORG</p>
</div>
</div>
<!-- Nav Desktop -->
<div class="nav-container-mob">
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="nav-container-desk">
<p>BILJETTER ▼</p>
<p>EVENEMANG ▼</p>
<p>OM OSS ▼</p>
</div>
</div>
</nav>
</header>
<section class="hero index">
<button class="play">
<div class="triangle"></div>
</button>
<div class="card">
<h2>FLYKTEN FRÅN NEW YORK</h2>
<p class="desktop-only">FRE 15 DEC</p>
<p class="desktop-only">KL 23.30</p>
</div>
</section>
<section class="this-month">
<!-- Movie Cards Mobile This Month -->
<h2 class="movie-card-heading-mob mobile-only">December på Feodal</h2>
<div class="movie-scroll-container-mob">
<button class="scroll-btn-mob left-scroll-mob mobile-only" onclick="scrollMovieCardsMob('left')"></button>
<div id="movieCardContainerMob" class="movie-card-container-mob">
<div class="movie-card-mob">
<img src="/images/slider/exorcist.png" alt="The Exorcist">
<div class="text-wrapper">
<h2>Exorcisten</h2>
<p>Onsdag 8 december, kl 20.00</p>
</div>
</div>
<div class="movie-card-mob">
<img src="/images/slider/sunset-blvd.png" alt="Sunset Boulevard">
<div class="text-wrapper">
<h2>Sunset Boulevard</h2>
<p>Lördag 11 december, kl 19.00</p>
</div>
</div>
<div class="movie-card-mob">
<img src="/images/slider/north-by-northwest.png" alt="North by Northwest">
<div class="text-wrapper">
<a href="movie-page.html">
<h2>I Sista Minuten</h2>
<p>Tisdag 14 december, kl 20.00</p>
</a>
</div>
</div>
<div class="movie-card-mob">
<img src="/images/slider/elf.png" alt="Elf">
<div class="text-wrapper">
<h2>Elf</h2>
<p>Onsdag 15 december, kl 19.00</p>
</div>
</div>
<div class="movie-card-mob">
<img src="/images/slider/american-grafiti.png" alt="American Grafiti">
<div class="text-wrapper">
<h2>Sista Natten med Gänget</h2>
<p>Lördag 18 december, kl 20.00</p>
</div>
</div>
<div class="movie-card-mob">
<img src="/images/slider/raising-arizona.png" alt="Raising Arizona">
<div class="text-wrapper">
<h2>Raising Arizona</h2>
<p>Söndag 19 december, kl 19.00</p>
</div>
</div>
<!-- Add the rest of the movie cards here -->
</div>
<button class="scroll-btn-mob right-scroll-mob mobile-only" onclick="scrollMovieCardsMob('right')"></button>
</div>
<!-- Movie Cards Desktop This Month -->
<h2 class="movie-card-heading-desk desktop-only">December på Feodal</h2>
<div class="movie-scroll-container">
<button class="scroll-btn left-scroll desktop-only" onclick="scrollMovieCards('left')"></button>
<div id="movieCardContainer" class="movie-card-container-desk">
<div class="movie-card-desk">
<a href="movie-page.html">
<img src="/images/slider/exorcist.png" alt="The Exorcist">
<div class="text-wrapper">
<h2>Exorcisten</h2>
<p>Onsdag 8 december, kl 20.00</p>
</div>
</a>
</div>
<div class="movie-card-desk">
<a href="movie-page.html">
<img src="/images/slider/sunset-blvd.png" alt="Sunset Boulevard">
<div class="text-wrapper">
<h2>Sunset Boulevard</h2>
<p>Lördag 11 december, kl 19.00</p>
</div>
</a>
</div>
<div class="movie-card-desk">
<a href="movie-page.html">
<img src="/images/slider/north-by-northwest.png" alt="North by Northwest">
<div class="text-wrapper">
<h2>I Sista Minuten</h2>
<p>Tisdag 14 december, kl 20.00</p>
</div>
</a>
</div>
<div class="movie-card-desk">
<a href="movie-page.html">
<img src="/images/slider/elf.png" alt="Elf">
<div class="text-wrapper">
<h2>Elf</h2>
<p>Onsdag 15 december, kl 19.00</p>
</div>
</a>
</div>
<div class="movie-card-desk">
<a href="movie-page.html">
<img src="/images/slider/american-grafiti.png" alt="American Grafiti">
<div class="text-wrapper">
<h2>Sista Natten med Gänget</h2>
<p>Lördag 18 december, kl 20.00</p>
</div>
</a>
</div>
<div class="movie-card-desk">
<a href="movie-page.html">
<img src="/images/slider/raising-arizona.png" alt="Raising Arizona">
<div class="text-wrapper">
<h2>Raising Arizona</h2>
<p>Söndag 19 december, kl 19.00</p>
</div>
</a>
</div>
</div>
<button class="scroll-btn right-scroll desktop-only" onclick="scrollMovieCards('right')"></button>
</div>
</section>
<section class="next-month">
<!-- Movie Cards Mobile Next Month -->
<h2 class="movie-card-heading-mob mobile-only heading-this-month">Kommande filmer</h2>
<div class="movie-scroll-container-mob">
<button class="scroll-btn-mob left-scroll-mob mobile-only" onclick="scrollMovieCardsMobNm('left')"></button>
<div id="movieCardContainerMobNm" class="movie-card-container-mob">
<div class="movie-card-mob">
<img src="/images/slider/long-goodbye.png" alt="The Long Goodbye">
<div class="text-wrapper text-wrapper-nm">
<h2>The Long Goodbye</h2>
<p>Visas i januari</p>
</div>
</div>
<div class="movie-card-mob">
<img src="/images/slider/after-hours.png" alt="After Hours">
<div class="text-wrapper text-wrapper-nm">
<h2>En Natt i New York</h2>
<p>Visas i januari</p>
</div>
</div>
<div class="movie-card-mob">
<img src="/images/slider/lost-in-translation.png" alt="Lost in Translation">
<div class="text-wrapper text-wrapper-nm">
<h2>Lost in Translation</h2>
<p>Visas i januari</p>
</div>
</div>
<div class="movie-card-mob">
<img src="/images/slider/something-wild.png" alt="Something Wild">
<div class="text-wrapper text-wrapper-nm">
<h2>I Vildaste Laget</h2>
<p>Visas i januari</p>
</div>
</div>
<div class="movie-card-mob">
<img src="/images/slider/king-of-comedy.png" alt="King of Comedy">
<div class="text-wrapper text-wrapper-nm">
<h2>King of Comedy</h2>
<p>Visas i februari</p>
</div>
</div>
<div class="movie-card-mob">
<img src="/images/slider/den-stora-flykten.png" alt="The Great Escape">
<div class="text-wrapper text-wrapper-nm">
<h2>Den Stora Flykten</h2>
<p>Visas i februari</p>
</div>
</div>
</div>
<button class="scroll-btn-mob right-scroll-mob mobile-only"
onclick="scrollMovieCardsMobNm('right')"></button>
</div>
<!-- Movie Cards Desktop Next Month -->
<h2 class="movie-card-heading-desk-nm desktop-only">Kommande filmer</h2>
<div class="movie-scroll-container">
<button class="scroll-btn left-scroll desktop-only" onclick="scrollMovieCardsNm('left')"></button>
<div id="movieCardContainerNm" class="movie-card-container-desk">
<div class="exorcist-card-desk">
<img src="/images/slider/long-goodbye.png" alt="The Long Goodbye">
<div class="text-wrapper text-wrapper-nm">
<h2>The Long Goodbye</h2>
<p>Visas i januari</p>
</div>
</div>
<div class="sunset-card-desk">
<img src="/images/slider/after-hours.png" alt="After Hours">
<div class="text-wrapper text-wrapper-nm">
<h2>En Natt i New York</h2>
<p>Visas i januari</p>
</div>
</div>
<div class="north-card-desk">
<img src="/images/slider/lost-in-translation.png" alt="Lost in Translation">
<div class="text-wrapper text-wrapper-nm">
<h2>Lost in Translation</h2>
<p>Visas i januari</p>
</div>
</div>
<div class="elf-card-desk">
<img src="/images/slider/something-wild.png" alt="Something Wild">
<div class="text-wrapper text-wrapper-nm">
<h2>I Vildaste Laget</h2>
<p>Visas i januari</p>
</div>
</div>
<div class="grafiti-card-desk">
<img src="/images/slider/king-of-comedy.png" alt="King of Comedy">
<div class="text-wrapper text-wrapper-nm">
<h2>King of Comedy</h2>
<p>Visas i februari</p>
</div>
</div>
<div class="arizona-card-desk">
<img src="/images/slider/den-stora-flykten.png" alt="The Great Escape">
<div class="text-wrapper text-wrapper-nm">
<h2>Den Stora Flykten</h2>
<p>Visas i februari</p>
</div>
</div>
</div>
<button class="scroll-btn right-scroll desktop-only" onclick="scrollMovieCardsNm('right')"></button>
</div>
</section>
<section class="campaign">
<div class="marathon">
<div>
<h2>Årets filmmaraton</h2>
<p>
Den 13 november är det dags för vårt populära filmmarathon. Vi visar fem filmklassiker till priset
av fyra.
</p>
<button class="to-marathon btn">Till bokning <img src="images/booking-arrow.png"
alt="Till bokning"></button>
</div>
<img src="images/popcorn.png" alt="En låda popcorn">
</div>
<div class="newsletter">
<h2>Prenumerera</h2>
<p>
Registrera dig på vårt nyhetsbrev och håll dig uppdaterad om våra kommande visningar och erbjudanden.
</p>
<label for="email-input">E-post</label>
<div>
<input type="text" name="email-input" id="email-input" placeholder="name@example.com"><button
type="submit">
<img src="images/mail.png" alt="Envelope symbol">
</button>
</div>
</div>
</section>
<footer>
<div class="footer-card">
<h2>Kontakt</h2>
<span>Lärdomsgatan 3</span>
<span>417 56 Göteborg</span>
<span>Tel. 031-76 54 32</span>
<span>info@feodalbio.se</span>
</div>
<div class="footer-card">
<h2>Öppettider</h2>
<span>Vard 12-22</span>
<span>Helg 17-22</span>
</div>
<div class="footer-card desktop-only">
<h2>Priser</h2>
<span>Ordinarie 120 :-</span>
<span>Matiné 100 :-</span>
</div>
<div class="footer-card">
<h2>Följ oss</h2>
<div>
<img src="images/fb-icon.png" alt="Facebook logo">
<img src="images/insta-icon.png" alt="Insta logo">
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>