-- HTML CODE --
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Haunted Website (part-1)</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="banner">
<img src="img/banner7.jpg" alt="" id='banner-img'>
<div class="navbar">
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Contact Us</a></li>
</ul>
</div>
<div class="content">
<h1 >
<span id='H' >h</span>
<span id='A'>a</span>
<span id='U'>u</span>
<span id='N' >n</span>
<span id='T' >t</span>
<span id='E' >e</span>
<span id='D' >d</span>
</h1>
<button id='btn'>Click here</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
-- CSS CODE --
*{
padding:0;
margin:0;
font-family: 'Roboto', sans-serif;
}
.banner{
width:100%;
height:100vh;
}
.banner img{
width:100%;
height:100%;
position: absolute;
z-index: -2;
background-size: cover;
filter:contrast(120%);
}
.banner::before{
content: '';
position: absolute;
Width: 100%;
height: 100%;
background:linear-gradient(to right,rgba(0, 0, 0, 0.384),rgba(0, 0, 0, 0.315));
z-index: -1;
}
.navbar ul{
float: left;
margin:20px 40px;
}
.navbar ul li{
display: inline-block;
margin:30px 50px;
}
.navbar ul li a{
text-decoration: none;
color: white;
text-transform: uppercase;
letter-spacing: 4px;
opacity:0.7;
font-size: 18px;
}
.navbar ul li a:hover{
text-shadow:0px 0px 10px rgb(214, 214, 214),
0px 0px 20px rgb(224, 224, 224),
0px 0px 40px rgb(255, 255, 255),
0px 0px 60px rgb(255, 255, 255),
0px 0px 100px rgb(255, 255, 255);
opacity:1;
text-decoration: underline;
}
.banner .content{
width:600px;
height:300px;
position: absolute;
bottom:100px;
left:80px;
}
.content h1{
-webkit-box-reflect: below -23px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
margin:20px 0px;
}
.content span{
text-transform: uppercase;
font-weight: 500;
font-size: 50px;
letter-spacing: 13px;
line-height: 70px;
color:white;
font-weight:lighter;
opacity:0.1;
}
.light-effect1{
animation:1s light-effect1 linear infinite;
}
.light-effect2{
animation:1s light-effect2 linear infinite;
}
@keyframes light-effect1 {
0%,50%,60%,100%{
text-shadow:none;
color:white;
opacity:0.1;
}
51%,59%{
text-shadow:0px 0px 10px rgb(214, 214, 214),
0px 0px 20px rgb(224, 224, 224),
0px 0px 40px rgb(255, 255, 255),
0px 0px 60px rgb(255, 255, 255),
0px 0px 100px rgb(255, 255, 255);
color:white;
opacity:1;
}
}
@keyframes light-effect2 {
0%,100%{
text-shadow:0px 0px 10px rgb(214, 214, 214),
0px 0px 20px rgb(224, 224, 224),
0px 0px 40px rgb(255, 255, 255),
0px 0px 60px rgb(255, 255, 255),
0px 0px 100px rgb(255, 255, 255);
color:white;
opacity:1;
}
}
.content button{
background: transparent;
border-radius: 6px;
border: 1px solid white;
color: white;
text-transform: uppercase;
letter-spacing: 3px;
font-weight:lighter;
padding: 15px 20px;
margin: 40px auto;
transition: all 100ms;
font-size: 18px;
cursor: pointer;
}
.content button:hover{
background-color: rgb(255, 255, 255);
color:rgb(0, 0, 0);
box-shadow: 0px 0px 40px rgb(255, 255, 255);
font-weight: bold;
border: 1px solid white;
}
.content button:active{
transform: translateY(10px);
}
-- JAVASCRIPT CODE --
let banner_img=document.getElementById('banner-img');
let banner=1;
let music=new Audio('audio/bk_music.mp3');
let button=document.getElementById('btn');
function banner_change(){
if(banner==1){
banner_img.src='img/banner1.jpg';
}
else if(banner==2){
banner_img.src='img/banner2.jpg';
}
else if(banner==3){
banner_img.src='img/banner3.jpg';
}
else if(banner==4){
banner_img.src='img/banner4.jpg';
}
else if(banner==5){
banner_img.src='img/banner5.jpg';
}
else if(banner==6){
banner_img.src='img/banner6.jpg';
}
else if(banner==7){
banner_img.src='img/banner7.jpg';
}
if(banner<7){
banner++;
}
else{
banner=1;
}
}
function flicker_effect(){
let H=document.getElementById('H');
let A=document.getElementById('A');
let U=document.getElementById('U');
let N=document.getElementById('N');
let T=document.getElementById('T');
let E=document.getElementById('E');
let D=document.getElementById('D');
let number=Math.ceil(Math.random()*40);
if(number==1){
H.classList.add('light-effect1');
}
if(number==2){
H.classList.add('light-effect1');
}
if(number==3){
A.classList.add('light-effect1');
}
if(number==4){
U.classList.add('light-effect1');
}
if(number==5){
N.classList.add('light-effect1');
}
if(number==6){
T.classList.add('light-effect1');
}
if(number==7){
E.classList.add('light-effect1');
}
if(number==8){
D.classList.add('light-effect1');
}
if(number==9){
H.classList.add('light-effect2');
}
if(number==10){
A.classList.add('light-effect2');
}
if(number==11){
U.classList.add('light-effect2');
}
if(number==12){
N.classList.add('light-effect2');
}
if(number==13){
T.classList.add('light-effect2');
}
if(number==14){
E.classList.add('light-effect2');
}
if(number==15){
D.classList.add('light-effect2');
}
if(number>=16 && number<=20){
D.classList.add('light-effect1');
T.classList.add('light-effect1');
}
if(number>=20 && number<=23){
T.classList.add('light-effect1');
A.classList.add('light-effect1');
}
if(number>=23 && number <=25){
H.classList.add('light-effect1');
U.classList.add('light-effect1');
}
if(number>=25 && number <=28){
N.classList.add('light-effect1');
A.classList.add('light-effect1');
}
if(number>=29 && number <=32){
H.classList.add('light-effect2');
A.classList.add('light-effect2');
U.classList.add('light-effect2');
N.classList.add('light-effect2');
T.classList.add('light-effect2');
E.classList.add('light-effect2');
D.classList.add('light-effect2');
}
if(number>=33 && number <=36){
H.classList.add('light-effect1');
A.classList.add('light-effect1');
U.classList.add('light-effect1');
N.classList.add('light-effect1');
T.classList.add('light-effect1');
E.classList.add('light-effect1');
D.classList.add('light-effect1');
1
}
setTimeout(() => {
H.classList.remove('light-effect1');
A.classList.remove('light-effect1');
U.classList.remove('light-effect1');
N.classList.remove('light-effect1');
T.classList.remove('light-effect1');
E.classList.remove('light-effect1');
D.classList.remove('light-effect1');
H.classList.remove('light-effect2');
A.classList.remove('light-effect2');
U.classList.remove('light-effect2');
N.classList.remove('light-effect2');
T.classList.remove('light-effect2');
E.classList.remove('light-effect2');
D.classList.remove('light-effect2');
}, 1000);
}
let flag=0;
let banner_switch_speed=7000;
button.onclick=function(){
if(flag==1)
return;
flag=1;
music.play();
music.loop=true;
setInterval(() => {
banner_change();
}, banner_switch_speed);
setInterval(() => {
flicker_effect();
}, 2000);
}
-- RESOURCES --
Post a Comment