| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Whiskey Cola - Королева танцпола</title> |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> |
| <style> |
| :root { |
| --whiskey: #d4a055; |
| --cola: #3a2215; |
| --gold: #ffd700; |
| --dark: #1a1a1a; |
| --light: #f8f8f8; |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Montserrat', sans-serif; |
| background: var(--dark); |
| color: var(--light); |
| overflow-x: hidden; |
| background-image: radial-gradient(circle at 70% 30%, rgba(212, 160, 85, 0.1) 0%, transparent 40%); |
| } |
| |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 20px; |
| } |
| |
| header { |
| position: relative; |
| height: 100vh; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| align-items: center; |
| text-align: center; |
| background: linear-gradient(rgba(26, 26, 26, 0.7), rgba(26, 26, 26, 0.9)), url('https://images.unsplash.com/photo-1531384370597-8590413be50a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center/cover; |
| clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); |
| } |
| |
| .logo { |
| position: absolute; |
| top: 30px; |
| left: 30px; |
| font-size: 2rem; |
| font-weight: 900; |
| color: var(--gold); |
| text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); |
| } |
| |
| .main-title { |
| font-size: 6vw; |
| margin-bottom: 1rem; |
| text-transform: uppercase; |
| background: linear-gradient(to right, var(--whiskey), var(--gold)); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| animation: glow 2s infinite alternate; |
| } |
| |
| .subtitle { |
| font-size: 1.5rem; |
| margin-bottom: 2rem; |
| text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); |
| } |
| |
| .cta-button { |
| padding: 15px 40px; |
| background: linear-gradient(45deg, var(--whiskey), var(--cola)); |
| border: none; |
| border-radius: 50px; |
| color: white; |
| font-size: 1.2rem; |
| font-weight: bold; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| box-shadow: 0 0 20px rgba(212, 160, 85, 0.5); |
| } |
| |
| .cta-button:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 0 30px rgba(212, 160, 85, 0.8); |
| } |
| |
| .dance-floor { |
| position: relative; |
| height: 300px; |
| margin: 100px 0; |
| background: repeating-linear-gradient( |
| 45deg, |
| var(--dark), |
| var(--dark) 20px, |
| var(--gold) 20px, |
| var(--gold) 40px |
| ); |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| overflow: hidden; |
| } |
| |
| .dance-light { |
| position: absolute; |
| width: 80%; |
| height: 80%; |
| background: radial-gradient(circle, rgba(255,215,0,0.3) 0%, transparent 70%); |
| border-radius: 50%; |
| animation: moveLight 6s infinite alternate ease-in-out; |
| } |
| |
| .dancer { |
| position: absolute; |
| width: 50px; |
| height: 50px; |
| background: var(--whiskey); |
| border-radius: 50%; |
| animation: dance 2s infinite ease-in-out; |
| } |
| |
| .dancer:nth-child(2) { |
| background: var(--gold); |
| left: 30%; |
| top: 40%; |
| animation-delay: 0.2s; |
| } |
| |
| .dancer:nth-child(3) { |
| background: var(--cola); |
| right: 25%; |
| top: 60%; |
| animation-delay: 0.4s; |
| } |
| |
| .dancer:nth-child(4) { |
| background: white; |
| left: 45%; |
| top: 20%; |
| animation-delay: 0.6s; |
| } |
| |
| .cocktails { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| gap: 30px; |
| margin: 100px 0; |
| } |
| |
| .cocktail-card { |
| background: rgba(58, 34, 21, 0.7); |
| border-radius: 20px; |
| overflow: hidden; |
| transition: transform 0.3s ease; |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); |
| position: relative; |
| } |
| |
| .cocktail-card:hover { |
| transform: translateY(-10px); |
| } |
| |
| .cocktail-img { |
| height: 200px; |
| background: var(--whiskey); |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .cocktail-img::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(transparent 60%, rgba(0,0,0,0.7)); |
| } |
| |
| .bubble { |
| position: absolute; |
| background: rgba(255, 255, 255, 0.6); |
| border-radius: 50%; |
| animation: bubbleRise 4s infinite ease-in; |
| } |
| |
| .cocktail-info { |
| padding: 20px; |
| } |
| |
| .cocktail-name { |
| font-size: 1.5rem; |
| margin-bottom: 10px; |
| color: var(--gold); |
| } |
| |
| .cocktail-desc { |
| margin-bottom: 15px; |
| line-height: 1.5; |
| } |
| |
| .cocktail-price { |
| font-weight: bold; |
| font-size: 1.2rem; |
| color: var(--whiskey); |
| } |
| |
| .quote-section { |
| margin: 100px 0; |
| text-align: center; |
| font-style: italic; |
| font-size: 1.8rem; |
| position: relative; |
| } |
| |
| .quote-mark { |
| font-size: 5rem; |
| color: rgba(212, 160, 85, 0.2); |
| position: absolute; |
| } |
| |
| .quote-left { |
| top: -30px; |
| left: 10%; |
| } |
| |
| .quote-right { |
| bottom: -60px; |
| right: 10%; |
| } |
| |
| .footer { |
| background: var(--cola); |
| padding: 50px 0; |
| text-align: center; |
| clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%); |
| } |
| |
| .social-icons { |
| display: flex; |
| justify-content: center; |
| gap: 20px; |
| margin: 30px 0; |
| } |
| |
| .social-icon { |
| width: 50px; |
| height: 50px; |
| background: rgba(255, 255, 255, 0.1); |
| border-radius: 50%; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| font-size: 1.5rem; |
| color: var(--gold); |
| transition: all 0.3s ease; |
| } |
| |
| .social-icon:hover { |
| background: var(--gold); |
| color: var(--cola); |
| transform: translateY(-5px); |
| } |
| |
| @keyframes glow { |
| from { |
| text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); |
| } |
| to { |
| text-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 30px rgba(212, 160, 85, 0.6); |
| } |
| } |
| |
| @keyframes bubbleRise { |
| 0% { |
| transform: translateY(200px) scale(0.5); |
| opacity: 0; |
| } |
| 20% { |
| opacity: 0.8; |
| } |
| 100% { |
| transform: translateY(-50px) scale(1.2); |
| opacity: 0; |
| } |
| } |
| |
| @keyframes dance { |
| 0%, 100% { |
| transform: translateY(0) rotate(0deg); |
| } |
| 50% { |
| transform: translateY(-50px) rotate(10deg); |
| } |
| } |
| |
| @keyframes moveLight { |
| 0% { |
| transform: translate(-20%, -20%); |
| } |
| 50% { |
| transform: translate(20%, 20%); |
| } |
| 100% { |
| transform: translate(-10%, 10%); |
| } |
| } |
| |
| |
| .glass-effect { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient( |
| 135deg, |
| rgba(255, 255, 255, 0.1) 0%, |
| rgba(255, 255, 255, 0) 60% |
| ); |
| pointer-events: none; |
| } |
| |
| |
| @media (max-width: 768px) { |
| .main-title { |
| font-size: 3.5rem; |
| } |
| |
| .dance-floor { |
| height: 200px; |
| } |
| |
| .quote-section { |
| font-size: 1.3rem; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <header> |
| <div class="logo">WC <i class="fas fa-crown"></i></div> |
| <div class="container"> |
| <h1 class="main-title">Whiskey Cola</h1> |
| <p class="subtitle">Королева танцпола и король вечеринок</p> |
| <button class="cta-button">Заказать сейчас</button> |
| </div> |
| </header> |
| |
| <div class="container"> |
| <section class="dance-floor"> |
| <div class="dance-light"></div> |
| <div class="dancer"></div> |
| <div class="dancer"></div> |
| <div class="dancer"></div> |
| <div class="dancer"></div> |
| <h2 style="position: relative; z-index: 2; color: white; text-shadow: 0 0 10px black; font-size: 2.5rem;">Танцуйте с нами!</h2> |
| </section> |
| |
| <section class="cocktails"> |
| <div class="cocktail-card"> |
| <div class="cocktail-img"> |
| <div class="glass-effect"></div> |
| </div> |
| <div class="cocktail-info"> |
| <h3 class="cocktail-name">Классическая Королева</h3> |
| <p class="cocktail-desc">Настоящий виски с колой в идеальной пропорции, дополненный долькой лайма и льдом премиального качества.</p> |
| <p class="cocktail-price">450 ₽</p> |
| </div> |
| </div> |
| |
| <div class="cocktail-card"> |
| <div class="cocktail-img" style="background: var(--cola);"> |
| <div class="glass-effect"></div> |
| </div> |
| <div class="cocktail-info"> |
| <h3 class="cocktail-name">Танцующий Дракон</h3> |
| <p class="cocktail-desc">Ямайский ром в сочетании с виски, колой и тайными специями, которые разжигают огонь вечеринки.</p> |
| <p class="cocktail-price">550 ₽</p> |
| </div> |
| </div> |
| |
| <div class="cocktail-card"> |
| <div class="cocktail-img" style="background: var(--gold);"> |
| <div class="glass-effect"></div> |
| </div> |
| <div class="cocktail-info"> |
| <h3 class="cocktail-name">Бурбон Глоу</h3> |
| <p class="cocktail-desc">Премиальный бурбон с колой, медовым сиропом и карамельными нотками для истинных ценителей.</p> |
| <p class="cocktail-price">600 ₽</p> |
| </div> |
| </div> |
| </section> |
| |
| <section class="quote-section"> |
| <span class="quote-mark quote-left">"</span> |
| <p>Виски-кола - это не просто напиток, это состояние души. Она превращает обычный вечер в легенду танцпола.</p> |
| <span class="quote-mark quote-right">"</span> |
| </section> |
| </div> |
| |
| <footer class="footer"> |
| <div class="container"> |
| <h3 style="color: var(--gold); font-size: 2rem;">Присоединяйтесь к нашей вечеринке</h3> |
| <div class="social-icons"> |
| <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a> |
| <a href="#" class="social-icon"><i class="fab fa-tiktok"></i></a> |
| <a href="#" class="social-icon"><i class="fab fa-telegram-plane"></i></a> |
| </div> |
| <p>© 2023 Whiskey Cola | Все права защищены</p> |
| </div> |
| </footer> |
| |
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const cocktailImages = document.querySelectorAll('.cocktail-img'); |
| |
| cocktailImages.forEach(img => { |
| |
| for (let i = 0; i < 15; i++) { |
| const bubble = document.createElement('div'); |
| bubble.classList.add('bubble'); |
| |
| |
| const size = Math.random() * 20 + 5; |
| const posX = Math.random() * 80 + 10; |
| const delay = Math.random() * 5; |
| const duration = Math.random() * 3 + 3; |
| |
| bubble.style.width = `${size}px`; |
| bubble.style.height = `${size}px`; |
| bubble.style.left = `${posX}%`; |
| bubble.style.animationDelay = `${delay}s`; |
| bubble.style.animationDuration = `${duration}s`; |
| |
| img.appendChild(bubble); |
| } |
| }); |
| |
| |
| const ctaButton = document.querySelector('.cta-button'); |
| ctaButton.addEventListener('click', function() { |
| this.classList.add('active'); |
| setTimeout(() => { |
| this.classList.remove('active'); |
| }, 300); |
| |
| |
| alert('Вы выбрали Королеву танцпола! Будем рады видеть вас в нашем баре!'); |
| }); |
| |
| |
| const dancers = document.querySelectorAll('.dancer'); |
| dancers.forEach(dancer => { |
| dancer.addEventListener('mouseenter', function() { |
| this.style.transform = 'scale(1.2)'; |
| this.style.boxShadow = '0 0 20px gold'; |
| }); |
| |
| dancer.addEventListener('mouseleave', function() { |
| this.style.transform = ''; |
| this.style.boxShadow = ''; |
| }); |
| }); |
| |
| |
| document.body.addEventListener('mousemove', function(e) { |
| const x = e.clientX / window.innerWidth; |
| const y = e.clientY / window.innerHeight; |
| |
| document.body.style.backgroundPosition = `${x * 100}% ${y * 100}%`; |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> |
| </html> |
