-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgodzilla.html
91 lines (83 loc) · 4.32 KB
/
godzilla.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>Godzilla</title>
<link rel="stylesheet" type="text/css" href="godzilla.css">
</head>
<body>
<header class="logo">
<a href="index.html"><img src="logo/SquareEyes_Logo.png" width="65" height="65" alt="logo for webiste"></a>
</header>
<div class="main-container">
<div class="text-image">
<img src="images/Square_Eyes_Cover2.jpeg" alt="moviepicture">
<div>
<h1>Godzilla </h1>
<span class="info" style="color: red;">2019.2 t 12 m.Action,Eventyr</span>
<p>The world is besety the apperaance of monstrous<br><br> creatures,but one of them may be the only one who<br><br>can save humanity.</p>
<ul>
<li>Action, Drama<br><br></li>
<li>4K Ultra HD Blu-ray<br><br></li>
<li>2022<br><br></li>
<li>Nordisk<br><br></li>
</ul>
</div>
</div>
</div>
<div class="buttons">
<a href="Oppret.html" class="btn1">kjøp</a>
<a href="Oppret.html" class="btn2">leie</a>
</div>
<div class="trailer">
<video class="video-responsive" controls>
<source src="Trailer/Godzilla.mp4" type="video/mp4">
</video>
</div>
<footer>
<button class="accordion">SQUAEREEYES</button>
<div class="panel">
<p>Lorem ipsum.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores aliquid, quia modi aspernatur dolore perspiciatis similique earum. Accusantium ipsum maxime, temporibus eum possimus deleniti delectus voluptatum ea, quod eaque sapiente?..</p>
</div>
<button class="accordion">INFORMATION</button>
<div class="panel">
<p>Lorem ipsum..Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores aliquid, quia modi aspernatur dolore perspiciatis similique earum. Accusantium ipsum maxime, temporibus eum possimus deleniti delectus voluptatum ea, quod eaque sapiente?.</p>
</div>
<button class="accordion">PARTNER-KUNDER</button>
<div class="panel">
<p>Lorem ipsumjkdjdfkkkkkLorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores aliquid, quia modi aspernatur dolore perspiciatis similique earum. Accusantium ipsum maxime, temporibus eum possimus deleniti delectus voluptatum ea, quod eaque sapiente?</p>
</div>
<button class="accordion">OM OSS</button>
<div class="panel">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores aliquid, quia modi aspernatur dolore perspiciatis similique earum. Accusantium ipsum maxime, temporibus eum possimus deleniti delectus voluptatum ea, quod eaque sapiente?</p>
</div>
<button class="accordion">FØLG OSS</button>
<div class="panel">
<p>Lorem ipsum.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores aliquid, quia modi aspernatur dolore perspiciatis similique earum. Accusantium ipsum maxime, temporibus eum possimus deleniti delectus voluptatum ea, quod eaque sapiente?..</p>
</div>
</footer>
<script>
// First, we select the accordion elements and create a NodeList named 'acc'.
var acc = document.querySelectorAll(".accordion");
// Then, we add a click event listener to each accordion element.
acc.forEach(function (button) {
button.addEventListener("click", function () {
// We check if the clicked button belongs to the 'header' element.
// If it belongs, we find the next 'div.panel' element.
// If it doesn't belong, we find the same 'div.panel' element inside the 'footer'.
var panel = this.nextElementSibling.classList.contains('header')
? this.nextElementSibling.nextElementSibling
: this.nextElementSibling;
// To toggle the visibility of the panel, we use the 'max-height' style property.
if (panel.style.maxHeight) {
panel.style.maxHeight = null; // If the panel is open, we close it.
} else {
panel.style.maxHeight = panel.scrollHeight + "px"; // If the panel is closed, we open it.
}
});
});
</script>
</body>
</html>