html
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
<!-- Created by D A N A -->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
</head>
<body>
<div id="container">
<div class="wrapper" onclick="toggleDoor()">
<div class="left-half"></div>
<div class="right-half"></div>
<div id="text-glow">
<span id="span-1">E</span>
<span id="span-2">i</span>
<span id="span-3">d</span> <br>
<span id="span-4">M</span>
<span id="span-5">u</span>
<span id="span-6">b</span>
<span id="span-7">a</span>
<span id="span-8">r</span>
<span id="span-9">a</span>
<span id="span-10">k</span>
css
css
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
/* Created by D A N A */
body {
display: flex;
justify-content: center;
text-align: center;
width:100%;
height: auto;
background:url('https://i.postimg.cc/8cfN1Pr6/Screenshot-20250330-114321-Chrome.jpg');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat ;
background-size: cover;
}
#container{
position: relative ;
margin-top:50vh;
}
.wrapper{
position: relative ;
width: 230px;
height: 230px;
background-color: #3B3A36;
border-radius: 30px ;
perspective: 900px;
}
.wrapper::before{
content:' ';
position: absolute ;
js
js
1
alert("May this Eid bring you peace, prosperity, and endless blessings. Eid Mubarak! 🤗")
BROWSER
Console
Uruchom