Web Coder
canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: -1;
}
.Context header{
display: flex;
align-items: center;
justify-content: space-around;
height: 80vh;
flex-wrap: wrap;
}
.Context header .LeftHeader h1{
font-family: ‘Rubik Mono One’, sans-serif;
text-shadow: 0 0 3px #ffffffce;
}
.Context header .LeftHeader p{
width: 400px;
margin: 15px 0 0 0;
font-family: ‘Staatliches’, cursive;
font-size: 1.2rem;
}
.Context header .LeftHeader a{
background: rgba(255, 255, 255, 0);
display: inline-block;
margin: 25px 0;
border-radius: 8px;
color: white;
font-size: 1.2rem;
letter-spacing: 10px;
font-weight: 900;
font-family: ‘Staatliches’, cursive;
text-shadow: 0 0 5px white;
}
.Context header .RightHeader{
width: 400px;
}
*{
margin: 0;
padding: 0;
}
body{
background: black;
color: white !important;
}
.MediaNav{
display: none;
}
.NavDesktop{
display: flex;
align-items: center;
justify-content: space-between;
background: #1d1c1ba1;
backdrop-filter: blur(20px);
box-shadow: 0 0 5px #635d58a1;
position: fixed;
width: 100%;
}
.NavDesktop .Logo img{
width: 70px;
margin: 0 0 0 25px;
}
.NavDesktop ul{
display: flex;
align-items: center;
justify-content: center;
}
.NavDesktop ul li{
margin: 0 55px;
list-style: none;
}
.NavDesktop ul li a{
text-decoration: none;
font-weight: 900;
color: white;
font-family: ‘Righteous’, cursive;
}
@media (max-width: 614px) {
.MediaNav{
display: block;
background: #1d1c1ba1;
}
.MediaNav ul{
display: none;
}
.MediaNav .Logo img{
width: 100px;
}
.MediaNav .Logo{
display: flex;
align-content: center;
justify-content: space-around;
width: 100%;
}
.MediaNav .Logo button{
border: none;
width: 70px;
background: rgba(0, 0, 0, 0.0);
color: white;
font-size: 2rem;
}
.NavDesktop{
display: none;
}
.ShowUl{
display: block !important;
margin-top: 2rem;
padding: 0 0 25px 0;
text-align: center;
line-height: 30px;
animation: shownav 1s;
}
@keyframes shownav {
0%{
margin-top: -0rem;
opacity: 0;
}
100%{
margin-top: 2rem;
opacity: 1;
}
}
.ShowUl li a{
text-decoration: none;
font-weight: 900;
color: white;
font-family: ‘Righteous’, cursive;
animation: shownavli 1s;
}
@keyframes shownavli {
0%{
margin-left: -10rem;
opacity: 0;
}
100%{
opacity: 1;
margin-left: 0;
}
}
}
.Navbars{
z-index: 99999999999;
}
const btn = document.getElementById(‘btn’)
const ul = document.getElementById(‘ul’)
btn.addEventListener(‘click’, () => {
ul.classList.toggle(‘ShowUl’)
})
// Canvas elementni HTML’dan tanlab olish
const canvas = document.getElementById(“canvas”);
// Canvas o’lchamini o’zgartirish
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 2D kontekst obyektini olish
const ctx = canvas.getContext(“2d”);
// Partikllar to’plamini saqlash uchun massiv ochamiz
let particles = [];
// Partikl obyektini yaratish funksiyasi
class Particle {
constructor(x, y, size, speed) {
this.x = x;
this.y = y;
this.size = size;
this.speed = speed;
}
// Partiklning yangilanishini aniqlash
update() {
this.x += this.speed.x;
this.y += this.speed.y;
// Partikl ekrandan chiqib ketishini tekshirish
if (this.x canvas.width || this.y canvas.height) {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
}
}
// Partiklning ekranga chizilishi
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fillStyle = “aqua”;
ctx.fill();
}
}
// Partikllarni yaratish va saqlash
function createParticles() {
for (let i = 0; i {
particle.update();
particle.draw();
});
// Keyingi animatsiya kadrligini so’rang
requestAnimationFrame(animate);
}
// Partikllarni yaratish va animatsiyani boshlash
createParticles();
animate();
