<html>
<head>
<style>
* {
margin:0;
padding:0;
}
body
{
background:;
}
ul
{
position:relative ;
width:90%;
margin:200px 0%;
text-align:center ;
}
ul li
{
position:relative ;
list-style:none;
float:left;
width:25%;
white-space:nowrap;
}
ul li a{
position:relative;
text-decoration:none;
color:gray;
padding:10px 0;
}
ul li a:before
{
content:attr(data-text);
position:absolute;
border-top:1px solid orange;
left:0;
top:0;
width:0%;
color:white;
padding:9px 0;
transition:.5s;
overflow:hidden;
}
ul li a:hover:before{
width:100%;
}
.bholajela{
stroke-dasharray: 2000;
stroke-dashoffset: 0;
animation: dash 10s linear;
text-shadow:0px 0px 20px red;
}
@keyframes dash{
from{stroke-dashoffset: 2000;}
to{stroke-dashoffset: 0;}
0%{fill: none;}
30%{fill:red ;}
from{stroke: read}
to{stroke: ;}
}
.siddikurbhola-h1{
background:linear-gradient(to right,skyblue,steelblue);
color:rgb(76,34,65)
font-weight:500;
font-size:20px;
font-family:fantasy;
padding:10px;
text-align:center;
word-wrap:break-word;
margin:auto;
overflow:auto;
box-shadow:12px 10px 10px grey;
margin-top:50px;
border-radius:5px;
}
</style>
</head>
<body>
<p class="siddikurbhola-h1" style="color:rgb(76,34,65);>কিছু ডেমো ওয়েবপেইজে 💗</p>
<!--Magical Website -->
<ul>
<li><a data-text="HOME">HOME</a></li>
<li><a data-text="SERVICES">SERVICES</a></li>
<li><a data-text="ABOUT">ABOUT</a></li>
<li><a data-text="CONTACT US">CONTACT US</a></li>
</ul>
<!--END-->
<!-- Siddikur Rahman Rayhan Stylish Text anumation -->
<svg width="450" height="500" >
<text class="bholajela" x="2px" y="350"
style=" font-size: 70;
stroke:#f00;
fill: #red;
// stroke-width: 3;
"
>
Website END</text>
<!-- End TExt Close -->
<script>
</script>
</body>
</html>