-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
53 lines (53 loc) · 1.75 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Joker|Landing Pase Ui Design</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<header>
<a href="#" class="logo">
<img src="/src/img/logo.png" alt="logo" />
</a>
<div class="toggle">
<img src="/src/img/toggle.png" />
</div>
</header>
<div class="banner">
<div class="content">
<h2>Put on a <span>Happy</span> Face</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<a href="#" class="play" onclick="toggle();">
<img src="/src/img/play.png" />
Watch Trailer
</a>
<div class="slide"></div>
<ul class="sci">
<li><a href="#"><img src="/src/img/facebook.png"/></a></li>
<li><a href="#"><img src="/src/img/twitter.png"/></a></li>
<li><a href="#"><img src="/src/img/instagram.png"/></a></li>
</ul>
</div>
</div>
<div class="trailer">
<video src="/src/img/trailer.mp4" controls="true"></video>
<img src="/src/img/close.png" class="close" onclick="toggle();"/>
</div>
<script type="text/javascript">
function toggle(){
var trailer = document.querySelector('.trailer');
var video = document.querySelector('video');
trailer.classList.toggle('active');
video.currentTime = 0;
video.pause();
}
</script>
</body>
</html>