395 lines
10 KiB
HTML
395 lines
10 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="ru">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Dark Abstract Design</title>
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
overflow: hidden;
|
||
|
|
background: #0a0e27;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0d1520 100%);
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Green Blob Shapes */
|
||
|
|
.blob {
|
||
|
|
position: absolute;
|
||
|
|
border-radius: 50%;
|
||
|
|
filter: blur(60px);
|
||
|
|
opacity: 0.7;
|
||
|
|
animation: float 20s infinite ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.blob-1 {
|
||
|
|
width: 600px;
|
||
|
|
height: 600px;
|
||
|
|
background: radial-gradient(circle, #10b981 0%, #059669 50%, #047857 100%);
|
||
|
|
top: -150px;
|
||
|
|
left: -150px;
|
||
|
|
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
|
||
|
|
animation-delay: 0s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.blob-2 {
|
||
|
|
width: 500px;
|
||
|
|
height: 500px;
|
||
|
|
background: radial-gradient(circle, #059669 0%, #047857 50%, #065f46 100%);
|
||
|
|
bottom: -100px;
|
||
|
|
right: -100px;
|
||
|
|
border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%;
|
||
|
|
animation-delay: -5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.blob-3 {
|
||
|
|
width: 400px;
|
||
|
|
height: 400px;
|
||
|
|
background: radial-gradient(circle, #34d399 0%, #10b981 100%);
|
||
|
|
bottom: 20%;
|
||
|
|
right: 15%;
|
||
|
|
border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
|
||
|
|
animation-delay: -10s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.blob-4 {
|
||
|
|
width: 350px;
|
||
|
|
height: 350px;
|
||
|
|
background: radial-gradient(circle, #047857 0%, #065f46 100%);
|
||
|
|
top: 40%;
|
||
|
|
left: 10%;
|
||
|
|
border-radius: 50% 50% 40% 60% / 50% 40% 60% 50%;
|
||
|
|
animation-delay: -15s;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes float {
|
||
|
|
0%, 100% {
|
||
|
|
transform: translate(0, 0) rotate(0deg) scale(1);
|
||
|
|
}
|
||
|
|
33% {
|
||
|
|
transform: translate(30px, -50px) rotate(120deg) scale(1.05);
|
||
|
|
}
|
||
|
|
66% {
|
||
|
|
transform: translate(-20px, 30px) rotate(240deg) scale(0.95);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Grid Patterns */
|
||
|
|
.grid {
|
||
|
|
position: absolute;
|
||
|
|
background-image:
|
||
|
|
linear-gradient(rgba(16, 185, 129, 0.15) 1px, transparent 1px),
|
||
|
|
linear-gradient(90deg, rgba(16, 185, 129, 0.15) 1px, transparent 1px);
|
||
|
|
background-size: 60px 60px;
|
||
|
|
border: 1px solid rgba(16, 185, 129, 0.2);
|
||
|
|
animation: pulse-grid 8s infinite ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-1 {
|
||
|
|
width: 300px;
|
||
|
|
height: 300px;
|
||
|
|
top: 10%;
|
||
|
|
left: 5%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-2 {
|
||
|
|
width: 250px;
|
||
|
|
height: 250px;
|
||
|
|
top: 60%;
|
||
|
|
left: 20%;
|
||
|
|
animation-delay: -2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-3 {
|
||
|
|
width: 280px;
|
||
|
|
height: 280px;
|
||
|
|
top: 15%;
|
||
|
|
right: 10%;
|
||
|
|
animation-delay: -4s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-4 {
|
||
|
|
width: 200px;
|
||
|
|
height: 200px;
|
||
|
|
bottom: 25%;
|
||
|
|
right: 20%;
|
||
|
|
animation-delay: -6s;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes pulse-grid {
|
||
|
|
0%, 100% { opacity: 0.3; transform: scale(1); }
|
||
|
|
50% { opacity: 0.6; transform: scale(1.02); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* White Dots */
|
||
|
|
.dot {
|
||
|
|
position: absolute;
|
||
|
|
background: white;
|
||
|
|
border-radius: 50%;
|
||
|
|
box-shadow: 0 0 20px rgba(255, 255, 255, 0.8),
|
||
|
|
0 0 40px rgba(255, 255, 255, 0.4),
|
||
|
|
0 0 60px rgba(255, 255, 255, 0.2);
|
||
|
|
animation: twinkle 4s infinite ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dot-1 {
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
top: 20%;
|
||
|
|
left: 15%;
|
||
|
|
animation-delay: 0s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dot-2 {
|
||
|
|
width: 12px;
|
||
|
|
height: 12px;
|
||
|
|
top: 35%;
|
||
|
|
left: 50%;
|
||
|
|
animation-delay: -1s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dot-3 {
|
||
|
|
width: 6px;
|
||
|
|
height: 6px;
|
||
|
|
top: 60%;
|
||
|
|
left: 35%;
|
||
|
|
animation-delay: -2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dot-4 {
|
||
|
|
width: 10px;
|
||
|
|
height: 10px;
|
||
|
|
top: 70%;
|
||
|
|
left: 70%;
|
||
|
|
animation-delay: -3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dot-5 {
|
||
|
|
width: 7px;
|
||
|
|
height: 7px;
|
||
|
|
top: 45%;
|
||
|
|
right: 25%;
|
||
|
|
animation-delay: -1.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dot-6 {
|
||
|
|
width: 9px;
|
||
|
|
height: 9px;
|
||
|
|
bottom: 30%;
|
||
|
|
right: 35%;
|
||
|
|
animation-delay: -2.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dot-7 {
|
||
|
|
width: 5px;
|
||
|
|
height: 5px;
|
||
|
|
top: 25%;
|
||
|
|
right: 15%;
|
||
|
|
animation-delay: -0.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dot-8 {
|
||
|
|
width: 11px;
|
||
|
|
height: 11px;
|
||
|
|
bottom: 40%;
|
||
|
|
left: 40%;
|
||
|
|
animation-delay: -3.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes twinkle {
|
||
|
|
0%, 100% {
|
||
|
|
opacity: 1;
|
||
|
|
transform: scale(1);
|
||
|
|
box-shadow: 0 0 20px rgba(255, 255, 255, 0.8),
|
||
|
|
0 0 40px rgba(255, 255, 255, 0.4);
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
opacity: 0.6;
|
||
|
|
transform: scale(0.9);
|
||
|
|
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5),
|
||
|
|
0 0 20px rgba(255, 255, 255, 0.2);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Sparkles/Stars */
|
||
|
|
.sparkle {
|
||
|
|
position: absolute;
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
animation: sparkle-animation 3s infinite ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sparkle::before,
|
||
|
|
.sparkle::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
background: white;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sparkle::before {
|
||
|
|
width: 2px;
|
||
|
|
height: 20px;
|
||
|
|
left: 50%;
|
||
|
|
top: 0;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
|
||
|
|
}
|
||
|
|
|
||
|
|
.sparkle::after {
|
||
|
|
width: 20px;
|
||
|
|
height: 2px;
|
||
|
|
left: 0;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
|
||
|
|
}
|
||
|
|
|
||
|
|
.sparkle-1 {
|
||
|
|
top: 15%;
|
||
|
|
left: 25%;
|
||
|
|
animation-delay: 0s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sparkle-2 {
|
||
|
|
top: 55%;
|
||
|
|
left: 10%;
|
||
|
|
animation-delay: -1s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sparkle-3 {
|
||
|
|
bottom: 20%;
|
||
|
|
left: 30%;
|
||
|
|
animation-delay: -2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sparkle-4 {
|
||
|
|
top: 30%;
|
||
|
|
right: 20%;
|
||
|
|
animation-delay: -1.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes sparkle-animation {
|
||
|
|
0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
|
||
|
|
50% { opacity: 1; transform: scale(1) rotate(45deg); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Glow Circles */
|
||
|
|
.glow-circle {
|
||
|
|
position: absolute;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
|
||
|
|
animation: glow-pulse 5s infinite ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.glow-1 {
|
||
|
|
width: 150px;
|
||
|
|
height: 150px;
|
||
|
|
top: 25%;
|
||
|
|
left: 40%;
|
||
|
|
animation-delay: 0s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.glow-2 {
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
top: 50%;
|
||
|
|
right: 30%;
|
||
|
|
animation-delay: -2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.glow-3 {
|
||
|
|
width: 120px;
|
||
|
|
height: 120px;
|
||
|
|
bottom: 35%;
|
||
|
|
left: 25%;
|
||
|
|
animation-delay: -3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes glow-pulse {
|
||
|
|
0%, 100% { opacity: 0.3; transform: scale(1); }
|
||
|
|
50% { opacity: 0.6; transform: scale(1.1); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Small decorative circles */
|
||
|
|
.small-circle {
|
||
|
|
position: absolute;
|
||
|
|
border: 2px solid rgba(16, 185, 129, 0.3);
|
||
|
|
border-radius: 50%;
|
||
|
|
animation: rotate-circle 15s infinite linear;
|
||
|
|
}
|
||
|
|
|
||
|
|
.circle-1 {
|
||
|
|
width: 80px;
|
||
|
|
height: 80px;
|
||
|
|
top: 30%;
|
||
|
|
left: 60%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.circle-2 {
|
||
|
|
width: 60px;
|
||
|
|
height: 60px;
|
||
|
|
bottom: 25%;
|
||
|
|
right: 15%;
|
||
|
|
animation-direction: reverse;
|
||
|
|
animation-delay: -5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotate-circle {
|
||
|
|
0% { transform: rotate(0deg); }
|
||
|
|
100% { transform: rotate(360deg); }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<!-- Green Blobs -->
|
||
|
|
<div class="blob blob-1"></div>
|
||
|
|
<div class="blob blob-2"></div>
|
||
|
|
<div class="blob blob-3"></div>
|
||
|
|
<div class="blob blob-4"></div>
|
||
|
|
|
||
|
|
<!-- Grid Patterns -->
|
||
|
|
<div class="grid grid-1"></div>
|
||
|
|
<div class="grid grid-2"></div>
|
||
|
|
<div class="grid grid-3"></div>
|
||
|
|
<div class="grid grid-4"></div>
|
||
|
|
|
||
|
|
<!-- White Dots -->
|
||
|
|
<div class="dot dot-1"></div>
|
||
|
|
<div class="dot dot-2"></div>
|
||
|
|
<div class="dot dot-3"></div>
|
||
|
|
<div class="dot dot-4"></div>
|
||
|
|
<div class="dot dot-5"></div>
|
||
|
|
<div class="dot dot-6"></div>
|
||
|
|
<div class="dot dot-7"></div>
|
||
|
|
<div class="dot dot-8"></div>
|
||
|
|
|
||
|
|
<!-- Sparkles -->
|
||
|
|
<div class="sparkle sparkle-1"></div>
|
||
|
|
<div class="sparkle sparkle-2"></div>
|
||
|
|
<div class="sparkle sparkle-3"></div>
|
||
|
|
<div class="sparkle sparkle-4"></div>
|
||
|
|
|
||
|
|
<!-- Glow Circles -->
|
||
|
|
<div class="glow-circle glow-1"></div>
|
||
|
|
<div class="glow-circle glow-2"></div>
|
||
|
|
<div class="glow-circle glow-3"></div>
|
||
|
|
|
||
|
|
<!-- Small Circles -->
|
||
|
|
<div class="small-circle circle-1"></div>
|
||
|
|
<div class="small-circle circle-2"></div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|