Skip to content

Instantly share code, notes, and snippets.

@Xoleric-art

Xoleric-art/index.html

Created May 23, 2025 21:30
Show Gist options
  • Save Xoleric-art/7b2fa1598d4972fad5bd0e5c58377076 to your computer and use it in GitHub Desktop.
Save Xoleric-art/7b2fa1598d4972fad5bd0e5c58377076 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-7" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>HOLERIK</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Particle Background -->
<div id="particles" class="particles"></div>
<!-- Main Content -->
<div class="container">
<div class="logo">HOLERIK</div>
<div class="hero">
<h1 class="logo">Xush kelibsiz HOLERIK tizimiga</h1>
<p class="subtitle">Telegram orqali almashish, savdo va investitsiyalar dunyosiga qadam qo‘ying.</p>
<!DOCTYPE html>
<html lang="uz">
<head>
<meta charset="UTF-8">
<title>Telegramga Yo'naltirish</title>
<style>
body {
background-color: #f1f1f1;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: sans-serif;
}
.start-btn {
background-color: #0088cc;
color: white;
padding: 15px 30px;
font-size: 18px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: 0.3s ease;
}
.start-btn:hover {
background-color: #006699;
}
</style>
</head>
<body>
<button class="start-btn" onclick="window.open('https://t.me/this_ismoil', '_blank')">
Boshlash
</button>
</body>
</div>
</div>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
particlesJS("particles", {
particles: {
number: { value: 60 },
size: { value: 3 },
color: { value: "#00e0ff" },
line_linked: {
enable: true,
distance: 160,
color: "#00e0ff",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 2
}
}
});
Raw
style.css
/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', sans-serif;
}
/* Background Particle Style */
.particles {
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
background-color: #020202;
}
/* Main container */
.container {
position: relative;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: white;
z-index: 1;
}
/* Logo */
.logo {
font-size: 2rem;
font-weight: bold;
color: #00e0ff;
margin-bottom: 1rem;
}
/* Hero text */
.hero .title {
font-size: 2.5rem;
margin-bottom: 1rem;
animation: fadeIn 2s ease-in-out;
}
.hero .subtitle {
font-size: 1.2rem;
margin-bottom: 2rem;
animation: fadeIn 2.5s ease-in-out;
}
/* Button */
.button {
padding: 0.8rem 2rem;
font-size: 1rem;
color: white;
background: linear-gradient(45deg, #00e0ff, #0077ff);
border: none;
border-radius: 8px;
text-decoration: none;
transition: background 0.3s ease;
}
.button:hover {
background: linear-gradient(45deg, #0077ff, #00e0ff);
}
/* Animation */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment