-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
128 lines (116 loc) · 4.14 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filmföretaget</title>
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<!--Header med navigering-->
<header>
<h1>Filmföretaget</h1>
<nav>
<ul>
<li>Hem</li>
<li>Om oss</li>
<li>Kontakta oss</li>
</ul>
</nav>
</header>
<!--Sidebar med filtrering och sök-->
<div id="wrapper">
<aside>
<section>
<input type="search" placeholder="sök...">
<h2>Genre</h2>
<hr>
<ul>
<li>Drama</li>
<li>Thriller</li>
<li>Action</li>
<li>Dokumentär</li>
<li>Sci-fi</li>
<li>Komedi</li>
<li>Barn</li>
</ul>
</section>
</aside>
<!--Huvuddel med alla filmer-->
<main>
<h2>Alla filmer</h2>
<div class="film">
<img src="bilder/Interstellar.jpg" alt="Interstellar">
<h3 class="break-word">Interstellar</h3>
<p>2h 49m</p>
<p>Sci-fi</p>
<p>2014</p>
<!--Vid tryck på knappen aktiveras funktionen-->
<button onclick="moreInfoInterstellar()">Mer info</button>
</div>
<div class="film">
<img src="bilder/Dunepartone.jpg" alt="Dune Part One">
<h3 class="break-word">Dune: Part One</h3>
<p>2h 35m</p>
<p>Sci-fi</p>
<p>2021</p>
<button onclick="moreInfoDune()">Mer info</button>
</div>
<div class="film">
<img src="bilder/Hammarskjold.jpg" alt="Hammarskjöld">
<h3 class="break-word">Hammarskjöld</h3>
<p>1h 54m</p>
<p>Thriller</p>
<p>2023</p>
<button onclick="moreInfoHammarskjold()">Mer info</button>
</div>
<div class="film">
<img id="Densistaresan" src="bilder/Densistaresan.jpg" alt="Den sista resan">
<h3 class="break-word">Den sista resan</h3>
<p>1h 30m</p>
<p>Dokumentär</p>
<p>2024</p>
<button onclick="moreInfoDenSista()">Mer info</button>
</div>
<div class="film">
<img src="bilder/Oppenheimer.jpg" alt="Oppenheimer">
<h3 class="break-word">Oppenheimer</h3>
<p>3h</p>
<p>Drama</p>
<p>2023</p>
<button onclick="moreInfoOppenheimer()">Mer info</button>
</div>
<div class="film">
<img src="bilder/Thedarkknight.jpg" alt="The Dark Knight">
<h3 class="break-word">The Dark Knight</h3>
<p>2h 32m</p>
<p>Action</p>
<p>2008</p>
<button onclick="moreInfoDarkKnight()">Mer info</button>
</div>
<div class="film">
<img src="bilder/EnmansomheterOve.jpg" alt="En man som heter Ove">
<h3 class="break-word">En man som heter Ove</h3>
<p>1h 56m</p>
<p>Komedi</p>
<p>2015</p>
<button onclick="moreInfoOve()">Mer info</button>
</div>
<div class="film">
<img src="bilder/Vemardumammamu.jpg" alt="Vem är du, Mamma Mu?">
<h3 class="break-word">Vem är du, Mamma Mu?</h3>
<p>1h 6m</p>
<p>Barn</p>
<p>2023</p>
<button onclick="moreInfoMammaMu()">Mer info</button>
</div>
</main>
</div>
<!--Footer med copyright-->
<footer>
<h4>© Filmföretaget</h4>
<p>Bilder från Filmstaden</p>
</footer>
<script src="./js/main.js"></script>
</body>
</html>