- Апр
- 93
- 359
Продавец
Сайт:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Профиль Discord Style</title>
<!-- Иконки соцсетей -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<style>
/* Глобальные стили */
body {
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
height: 100vh;
background: #000;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
}
/* Видео фон */
#video-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
/* Снег - частицы */
.snow {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.snow div {
position: absolute;
top: -10px;
width: 8px;
height: 8px;
background: #fff;
border-radius: 50%;
opacity: 0.8;
animation: fall 10s linear infinite;
}
@keyframes fall {
to {
transform: translateY(110vh) translateX(20px);
opacity: 0;
}
}
/* Основной блок профиля */
.profile-card {
background: rgba(0, 0, 0, 0.6);
padding: 40px;
border-radius: 20px;
box-shadow: 0 0 30px rgba(0,0,0,0.8),
inset 0 0 20px rgba(255,255,255,0.2);
display: flex;
flex-direction: column;
align-items: center;
max-width: 380px;
margin-top: 20px;
z-index: 1;
}
@keyframes floatUp {
from {transform: perspective(1000px) translateY(50px) scale(0.95);}
to {transform: perspective(1000px) translateY(0) scale(1);}
}
/* Аватарка */
.avatar {
width: 150px;
height: 150px;
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 0 0 20px rgba(255,255,255,0.3);
object-fit: cover;
animation: pulse 3s infinite;
}
@keyframes pulse {
0% {transform: scale(1);}
50% {transform: scale(1.05);}
100% {transform: scale(1);}
}
/* Имя и описание профиля */
.name-location {
margin-top: 20px;
text-align: center;
}
.nickname {
font-size: 2em;
font-weight: bold;
background: linear-gradient(270deg, red, orange, yellow, green, blue, indigo, violet, red);
background-size: 1400% 1400%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: rainbowColors 5s linear infinite;
}
@keyframes rainbowColors {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
.details {
font-size: 1.2em;
color: #ddd;
margin-top: 10px;
}
/* Биография */
.bio {
max-width: 600px;
padding: 20px;
margin-top: 15px;
font-size: 1.2em;
line-height: 1.4;
text-align: center;
color: #ccc;
opacity: 0;
animation: fadeIn 2s forwards;
}
@keyframes fadeIn {
to {opacity: 1;}
}
/* Иконки соцсетей */
.social-icons {
display: flex;
gap: 20px;
margin-top: 20px;
opacity: 0;
animation: fadeIn 2s 0.5s forwards;
}
.social-icons a {
color: #fff;
font-size: 2em;
transition: transform 0.3s, color 0.3s;
}
.social-icons a:hover {
transform: scale(1.2);
color: #ffd700;
}
/* Музыкальный плеер */
.music-player {
margin-top: 30px;
width: 90%;
max-width: 500px;
background: rgba(0,0,0,0.6);
padding: 15px;
border-radius: 15px;
display: flex;
align-items: center;
gap: 15px;
box-shadow: 0 0 20px rgba(0,0,0,0.7);
}
.music-avatar {
width: 80px;
height: 80px;
border-radius: 10px;
object-fit: cover;
border: 2px solid #fff;
box-shadow: 0 0 10px rgba(255,255,255,0.3);
}
.music-details {
flex: 1;
display: flex;
flex-direction: column;
}
.music-title {
font-size: 1.2em;
font-weight: bold;
color: #fff;
margin-bottom: 10px;
}
.music-controls {
display: flex;
align-items: center;
gap: 15px;
}
/* Стиль для полоски громкости - точка по центру */
#volumeRange {
width: 120px;
height: 8px;
background: transparent; /* убрали фон */
cursor: pointer;
outline: none;
-webkit-appearance: none;
appearance: none;
}
/* Полоска */
#volumeRange::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
background: linear-gradient(135deg, #6a11cb, #2575fc);
border-radius: 4px;
}
#volumeRange::-moz-range-track {
width: 100%;
height: 8px;
background: linear-gradient(135deg, #6a11cb, #2575fc);
border-radius: 4px;
}
/* Бегунок - точка по центру, прозрачный фон */
#volumeRange::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #fff;
border: 2px solid #6a11cb;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 10px rgba(101, 71, 255, 0.6);
transition: box-shadow 0.3s, transform 0.2s;
margin-top: -6px; /* позиционирование по центру полоски */
}
#volumeRange::-webkit-slider-thumb:hover {
box-shadow: 0 0 15px rgba(101, 71, 255, 1);
transform: scale(1.1);
}
#volumeRange::-moz-range-thumb {
width: 20px;
height: 20px;
background: #fff;
border: 2px solid #6a11cb;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 10px rgba(101, 71, 255, 0.6);
transition: box-shadow 0.3s, transform 0.2s;
}
#volumeRange::-moz-range-thumb:hover {
box-shadow: 0 0 15px rgba(101, 71, 255, 1);
transform: scale(1.1);
}
</style>
</head>
<body>
<!-- Видео фон -->
<video id="video-background" autoplay muted loop playsinline>
<source src="https://savepin.app/pinterest/force-save.php?url=https%3A%2F%2Fv1.pinimg.com%2Fvideos%2Fiht%2F720p%2F89%2F80%2F1d%2F89801d8463a34b81277a64a742cdd106.mp4" type="video/mp4" />
Ваш браузер не поддерживает видео.
</video>
<!-- Снег -->
<div class="snow" id="snow-container"></div>
<!-- Профиль -->
<div class="profile-card">
<!-- Аватар -->
<img src="https://i.pinimg.com/736x/f0/d4/0c/f0d40c3f08216f6ac236779dd5b9177f.jpg" alt="Аватар" class="avatar" />
<!-- Имя, местоположение, возраст -->
<div class="name-location">
<div class="nickname">ДИАНА</div>
<div class="details">Москва, 25 лет</div>
</div>
<!-- Биография -->
<div class="bio">
Привет! Я — стильная и креативная личность. Люблю музыку, анимации и новые знакомства. Добро пожаловать в мой профиль!
</div>
<!-- Иконки соцсетей -->
<div class="social-icons">
<a href="#" title="ВКонтакте"><i class="fab fa-vk"></i></a>
<a href="#" title="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" title="GitHub"><i class="fab fa-github"></i></a>
<a href="#" title="Discord"><i class="fab fa-discord"></i></a>
</div>
</div>
<!-- Музыкальный плеер -->
<div class="music-player">
<img src="https://avatars.yandex.net/get-music-content/17722696/057fdaae.a.39915181-1/300x300" alt="Обложка" class="music-avatar" />
<div class="music-details">
<div class="music-title">Nasty Babe - Патрики</div>
<div class="music-controls">
<audio id="audio" src="https://rus.hitmotop.com/get/music/20251226/Nasty_Babe_-_Patriki_80552026.mp3" controls></audio>
<div style="margin-left: 15px; display:flex; flex-direction:column; align-items:flex-start;">
<label for="volumeRange" style="color:#fff; font-size:0.9em; margin-bottom:5px;">Громкость</label>
<input type="range" id="volumeRange" min="0" max="1" step="0.01" value="0.5" />
</div>
</div>
</div>
</div>
<!-- Скрипт снег и громкость -->
<script>
const snowContainer = document.getElementById('snow-container');
function createSnowflake() {
const snowflake = document.createElement('div');
const size = Math.random() * 4 + 2;
snowflake.style.width = size + 'px';
snowflake.style.height = size + 'px';
snowflake.style.left = Math.random() * 100 + 'vw';
snowflake.style.animationDuration = (5 + Math.random() * 5) + 's';
snowflake.style.opacity = Math.random();
snowflake.style.transform = `rotate(${Math.random() * 360}deg)`;
snowflake.style.borderRadius = '50%';
setTimeout(() => snowflake.remove(), 10000);
snowflake.style.position = 'absolute';
snowflake.style.animationName = 'fall';
snowContainer.appendChild(snowflake);
}
setInterval(createSnowflake, 200);
const audio = document.getElementById('audio');
const volumeRange = document.getElementById('volumeRange');
volumeRange.addEventListener('input', () => {
audio.volume = volumeRange.value;
});
</script>
</body>
</html>
