HTML
xxxxxxxxxx1
<video src="https://mdbootstrap.com/img/video/hypnotic.mp4" autoplay loop playsinline muted></video>2
3
<header class="viewport-header">4
<div class="container">5
<div class="row">6
<div class="col-12">7
<img class="rotation" src="https://mdbootstrap.com/img/illustrations/halloween/pumpkin.png" alt="" style="max-width: 22rem;">8
</div>9
</div>10
</div>11
<div class="musicOn">12
<audio id="audio" style="display:none;" src="https://www.theholidayspot.com/halloween/graphics/new/creepy.mp3" controls autoplay loop></audio>13
</div>14
<div class="container-fluid position-absolute d-flex pt-3" style="top: 0; justify-content: flex-end;">15
<button class="btn btn-lg btn-warning btn-lg btn-rounded turn-on-off">Turn off/on music</button>16
</div>17
</header>18
19
<main>20
<div class="container position-relative py-5 mb-8 text-center">21
<h1 class="halloween-font halloween-font-size mb-4" style="color: #eb6123;">Welcome to <br><span class="font-big">Halloween</span><br> party</h1>22
</div>23
<section class="position-relative" style="background: rgba(0,0,0, 0.7);">24
<div class="container py-5">25
<div class="row mt-5 mb-4">26
<div class="col-12">27
<h2 class="halloween-font display-4 text-center pt-1 mb-5 text-white">Attractions</h2>28
</div>29
</div>30
<div class="row text-center">31
<div class="col-lg-6 mb-5">32
<div class="w-100 d-flex justify-content-center align-items-center mb-4" style="height: 17rem;">33
<div>34
<img class="" src="https://mdbootstrap.com/img/illustrations/halloween/eye_angle.png" alt="" style="max-width: 12rem;">35
</div>36
</div>37
<div class="card">38
<div class="card-body">39
<h4 class="mt-1 mb-3">Scary Games</h4>40
<p class="lead mb-0">41
Who would just sit and hear the same not-so-scary stories? At this event, we will be participating in some truly scary games! Will anyone come out of them alive? We'll see!42
</p>43
</div>44
</div>45
</div>46
<div class="col-lg-6 mb-5">47
<div class="w-100 d-flex justify-content-center align-items-center mb-4" style="height: 17rem;">48
<div>49
<img class="" src="https://mdbootstrap.com/img/illustrations/halloween/hat_angle.png" alt="" style="max-width: 12rem;">50
</div>51
</div>52
<div class="card">53
<div class="card-body">54
<h4 class="mt-1 mb-3">Costume Challenge</h4>55
<p class="lead mb-0">56
Be creative and come to the party dressed up in an original costume. There will be a competition for the best Halloween outfit and there will be darrrrrrrk and valuable prizes.57
</p>58
</div>59
</div>60
</div>61
</div>62
<div class="row text-center pb-5">63
<div class="col-lg-6 mb-5">64
<div class="w-100 d-flex justify-content-center align-items-center mb-4" style="height: 17rem;">65
<div>66
<img class="" src="https://mdbootstrap.com/img/illustrations/halloween/boiler.png" alt="" style="max-width: 12rem;">67
</div>68
</div>69
<div class="card">70
<div class="card-body">71
<h4 class="mt-1 mb-3">Magic Drinks</h4>72
<p class="lead mb-0">73
A drink with a palm tree? Standard and clichéd drinks? That's not the address. Here we drink magic drinks and decoctions prepared by the best witches and the most talented witchers.74
</p>75
</div>76
</div>77
</div>78
<div class="col-lg-6 mb-5">79
<div class="w-100 d-flex justify-content-center align-items-center mb-4" style="height: 17rem;">80
<div>81
<img class="" src="https://mdbootstrap.com/img/illustrations/halloween/hand_angle.png" alt="" style="max-width: 9rem; transform: rotate(-55deg);">82
</div>83
</div>84
<div class="card">85
<div class="card-body">86
<h4 class="mt-1 mb-3">Monster Dances</h4>87
<p class="lead mb-0">88
When the atmosphere is really hot and magical, we will start wild dancing. Everyone is welcome, including zombies. Let the whole neighborhood know where the fun is best.89
</p>90
</div>91
</div>92
</div>93
</div>94
<div class="row pt-5">95
<div class="col-12">96
<h2 class="halloween-font display-4 text-center mb-5 text-white">Information</h2>97
</div>98
</div>99
<div class="row text-center pb-5">100
<div class="col-xl-8 col-lg-10 mx-auto mb-8">101
<div class="card">102
<div class="card-body">103
<h4 class="mt-1 mb-2">Price</h4>104
<p class="lead mb-0 pb-2">$113 per ticket</p>105
<h4 class="mt-3 mb-2">Address</h4>106
<p class="lead mb-0">Very Secret Place 13</p>107
<p class="lead mb-0">13-666 Dark Island</p>108
<p class="lead mb-0 pb-2">United States of America</p>109
<h4 class="mt-3 mb-2">Opening</h4>110
<p class="lead mb-0">Party starts at <strong>8 PM</strong></p>111
</div>112
</div>113
</div>114
</div>115
<div class="row py-5 text-center">116
<div class="col-12">117
<h2 class="halloween-font halloween-font-size mb-4" style="color: #eb6123;">We are waiting for you<br><span class="font-big">You're not scared, are you?</span></h2>118
</div>119
</div>120
<div class="row pt-4 pb-5">121
<div class="col-12 d-flex justify-content-center">122
<img class="animation pulse infinite" src="https://mdbootstrap.com/img/illustrations/halloween/ghost.png" alt="" style="max-width: 17rem;">123
</div>124
</div>125
</div>126
</section>127
</main>CSS
xxxxxxxxxx1
body {2
background-color: #000;3
}4
video {5
object-fit: cover;6
width: 100vw;7
height: 100vh;8
position: fixed;9
top: 0;10
left: 0;11
}12
13
html, body {14
height: 100%;15
}16
17
.viewport-header {18
position: relative;19
height: 100%;20
text-align: center;21
display: flex;22
align-items: center;23
justify-content: center;24
}25
26
@-webkit-keyframes rotate {27
from{28
-webkit-transform: rotate(0deg);29
}30
to{31
-webkit-transform: rotate(360deg);32
}33
}34
35
.rotation {36
-webkit-animation: rotate 3s linear infinite;37
}38
.halloween-font {39
font-family: 'Creepster', cursive;40
}41
@media (min-width: 767px) {42
.halloween-font-size {43
font-size: 5rem;44
}45
}46
@media (min-width: 767px) {47
.halloween-font-size .font-big {48
font-size: 10rem;49
}50
}JS
xxxxxxxxxx1
let on_off = document.querySelector('.container-fluid .turn-on-off');2
let audio = document.querySelector('.musicOn audio');3
4
on_off.onclick = function() {5
audio.paused ? audio.play() : music_stop();6
}7
8
function music_stop() {9
audio.pause();10
audio.currentTime = 0;11
} Console errors: 0