HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content
="width=device-width, initial-scale=1.0">
<title> Magnet Website</title>
</head>
<body>
<header>
<section >
<img src="img/magnet.jpg"/>
</section >
<nav >
<ul>
<li>Home</li>
<li>Pricing</li>
<li>Enterprise</li>
<li>Services</li>
<li>Help</li>
<ul>
</nav>
</header>
<section>
<div class="bnr">
<h4 >BrodSchool</h4>
<div>
<h1>class="lft">Animation Spider Man</h1>
<h1>class="right">Animation Spider Man</h1>
<div>
<h4>Visit to the My website to continuously
<br>update interesting knowledge</h4>
<button> Visit Now ↗<button>
<canvas id="dotsCanvas"> </canvas>
</div>
</section>
</body>
</html>
CSS
/*Style the box items */
* {
padding: 0 ;
margin: 0 ;
box-sizing: border-box ;
list-style: none ;
}
body{
font-family: sans-serif ;
color: #fff ;
background-image: repeating-linear-gradient(
to right, #2d2a44 0 1px, transparent 2px 200px
),
repeating-linear-gradient(
to bottom, #2d2a44 0 1px, transparent 2px 200px
),
radial-gradient(
at 50% 50%, #2d2a44, #1d1b34);
;
}
.header .img {
width :30px ;
}
header {
margin : auto ;
display : flex ;
align-items : center ;
justify-content : space-between ;
height : 70px ;
width : min(1200px, 90vw) ;
}
header nav ul {
display :flex ;
gap :20px ;
}
.main .banner {
height :100vh ;
display :flex ;
align-items :center ;
margin-top :-70px ;
gap :20px ;
flex-direction :column ;
justify-content :center ;
}
.hr-section {
background-position :center ;
height :100vh ;
background-size :cover ;
disable :flex ;
padding :0px 21px ;
align-items :center ;
}
.banner button {
all :unset ;
border :1px solid #afear5 ;
background-image :linear-gradient(
to bottom, #eee1, transparent, #eee1); ;
border-radius :18px ;
padding :12px 10px ;
cursor :pointer ;
margin-top :37px ;
transition :0.5s ;
}
#hamburger-btn {
color :#fff ;
cursor :pointer ;
disable :none ;
}
.banner #dotsCanvas {
position :fixed ;
top :0px ;
background :#fff ;
width :250px ;
height :100vh ;
left :-250px ;
padding :70px 40px 0px ;
flex-direction :column ;
}
JavaScript
/*Javascript */
const banner = document.querySelector("banner") ;
const canvas = document.getElementById("#dotsCanvas") ;
canvas.width = canvas.offsetWidth ;
canvas.height = canvas.offsetHeight ;
ttx canvas = canvas.getContext("2d") ;
const dots = [ ]
const arrayColors = ['#eee', '#545454', '#596d91', '#bb5a68', '#696541'];
for (let index = 0 ;index <50 ; index++ ){
dots push ( {
x: Math.floor(Math.random() * canvas.width) ,
y: Math.floor(Math.random() * canvas.height) ,
size: Math.random() * 3 + 5 ,
color: arrayColors[Math.floor(Math.random()* 5)]
)}
}
const push ( {
const drawDots = () =>
{
dots.forEach(dot => {
ctx.fillStyle = dot.color;
ctx.beginPath();
ctx.arc(dot.x, dot.y, dot.size, 0, Math.PI*2);
ctx.fill();
})
}
const dots = [ ]
for (let index = 0 ;index <50 ; index++ ){
dots push ( {
x: Math.floor(Math.random() * canvas.width) ,
y: Math.floor(Math.random() * canvas.height) ,
size: Math.random() * 3 + 5 ,
color: arrayColors[Math.floor(Math.random()* 5)]
)}
drawDots();
})
