|
|
<!DOCTYPE html> |
|
|
<html lang="ru"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Traffic Master - Contacts & Footer</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #0a0a0a; |
|
|
color: #E1E1E1; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.glow-text { |
|
|
text-shadow: 0 0 10px rgba(246, 252, 121, 0.7); |
|
|
} |
|
|
|
|
|
.glow-box { |
|
|
box-shadow: 0 0 15px rgba(246, 252, 121, 0.5); |
|
|
} |
|
|
|
|
|
.glow-box:hover { |
|
|
box-shadow: 0 0 25px rgba(246, 252, 121, 0.8); |
|
|
} |
|
|
|
|
|
.border-glow { |
|
|
border-color: #f6fc79; |
|
|
box-shadow: 0 0 10px rgba(246, 252, 121, 0.3); |
|
|
} |
|
|
|
|
|
.border-glow:hover { |
|
|
box-shadow: 0 0 20px rgba(246, 252, 121, 0.5); |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); opacity: 1; } |
|
|
50% { transform: scale(1.05); opacity: 0.8; } |
|
|
100% { transform: scale(1); opacity: 1; } |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover { |
|
|
text-shadow: 0 0 10px rgba(246, 252, 121, 0.7); |
|
|
color: #f6fc79 !important; |
|
|
} |
|
|
|
|
|
.footer-divider { |
|
|
height: 1px; |
|
|
background: linear-gradient(90deg, rgba(246, 252, 121, 0), rgba(246, 252, 121, 0.5), rgba(246, 252, 121, 0)); |
|
|
} |
|
|
|
|
|
.social-btn { |
|
|
transition: all 0.3s ease; |
|
|
animation: fadeIn 0.5s ease-out; |
|
|
} |
|
|
|
|
|
.social-btn:hover { |
|
|
transform: scale(1.05); |
|
|
color: #f6fc79 !important; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.phone-icon { |
|
|
animation: phoneRing 1.5s ease infinite; |
|
|
transform-origin: center 70%; |
|
|
} |
|
|
|
|
|
@keyframes phoneRing { |
|
|
0% { transform: rotate(0deg); } |
|
|
5% { transform: rotate(15deg); } |
|
|
10% { transform: rotate(-15deg); } |
|
|
15% { transform: rotate(10deg); } |
|
|
20% { transform: rotate(-10deg); } |
|
|
25% { transform: rotate(5deg); } |
|
|
30% { transform: rotate(-5deg); } |
|
|
35% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(0deg); } |
|
|
} |
|
|
|
|
|
.particle { |
|
|
position: absolute; |
|
|
background-color: rgba(246, 252, 121, 0.6); |
|
|
border-radius: 50%; |
|
|
pointer-events: none; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="relative w-full bg-[#0a0a0a] pt-12 pb-6 overflow-hidden"> |
|
|
|
|
|
<div id="particles" class="absolute top-0 left-0 w-full h-full pointer-events-none"></div> |
|
|
|
|
|
|
|
|
<div class="container mx-auto px-4 mb-8"> |
|
|
<div class="text-center mb-10"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold uppercase text-[#f6fc79] mb-4"> |
|
|
<i class="fas fa-phone-alt phone-icon mr-2"></i> Связаться с нами |
|
|
</h2> |
|
|
<p class="text-gray-400 max-w-2xl mx-auto">Мы всегда рады помочь вам с любыми вопросами. Выберите удобный способ связи:</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-wrap justify-center gap-4 md:gap-8 mb-12"> |
|
|
|
|
|
<a href="#" class="social-btn border-glow border rounded-2xl px-6 py-3 flex items-center gap-2 text-[#f6fc79] hover:glow-box"> |
|
|
<i class="fab fa-instagram text-xl"></i> |
|
|
<span>Instagram</span> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="#" class="social-btn border-glow border rounded-2xl px-6 py-3 flex items-center gap-2 text-[#f6fc79] hover:glow-box"> |
|
|
<i class="fab fa-telegram text-xl"></i> |
|
|
<span>Telegram</span> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="#" class="social-btn border-glow border rounded-2xl px-6 py-3 flex items-center gap-2 text-[#f6fc79] hover:glow-box"> |
|
|
<i class="fab fa-whatsapp text-xl"></i> |
|
|
<span>WhatsApp</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="footer-divider w-full my-8"></div> |
|
|
|
|
|
|
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center md:items-start gap-8"> |
|
|
|
|
|
<div class="text-center md:text-left"> |
|
|
<div class="flex items-center justify-center md:justify-start gap-2 mb-2"> |
|
|
<i class="fas fa-traffic-light text-[#f6fc79]"></i> |
|
|
<span class="font-bold text-lg">Traffic Master</span> |
|
|
</div> |
|
|
<p class="text-gray-500 text-sm">© 2025 Все права защищены</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center md:text-left"> |
|
|
<h3 class="text-gray-300 font-medium mb-3">Быстрые ссылки</h3> |
|
|
<div class="flex flex-col md:flex-row gap-4 md:gap-6"> |
|
|
<a href="#hero" class="nav-link text-gray-400 hover:text-[#f6fc79]">Главная</a> |
|
|
<a href="#program" class="nav-link text-gray-400 hover:text-[#f6fc79]">Программа курса</a> |
|
|
<a href="#reviews" class="nav-link text-gray-400 hover:text-[#f6fc79]">Отзывы</a> |
|
|
<a href="#pricing" class="nav-link text-gray-400 hover:text-[#f6fc79]">Тарифы</a> |
|
|
<a href="#contacts" class="nav-link text-gray-400 hover:text-[#f6fc79]">Контакты</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center md:text-left"> |
|
|
<h3 class="text-gray-300 font-medium mb-3">Контакты</h3> |
|
|
<div class="flex flex-col gap-2 text-gray-400"> |
|
|
<p><i class="fas fa-phone-alt mr-2 text-[#f6fc79]"></i> +7 (123) 456-78-90</p> |
|
|
<p><i class="fas fa-envelope mr-2 text-[#f6fc79]"></i> info@trafficmaster.com</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-12 text-center"> |
|
|
<div class="flex flex-wrap justify-center gap-4 text-xs text-gray-600"> |
|
|
<a href="#" class="hover:text-gray-400">Политика конфиденциальности</a> |
|
|
<span>|</span> |
|
|
<a href="#" class="hover:text-gray-400">Пользовательское соглашение</a> |
|
|
<span>|</span> |
|
|
<a href="#" class="hover:text-gray-400">Cookie Policy</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const particlesContainer = document.getElementById('particles'); |
|
|
const particleCount = 30; |
|
|
|
|
|
for (let i = 0; i < particleCount; i++) { |
|
|
const particle = document.createElement('div'); |
|
|
particle.classList.add('particle'); |
|
|
|
|
|
|
|
|
const size = Math.random() * 2 + 1; |
|
|
particle.style.width = `${size}px`; |
|
|
particle.style.height = `${size}px`; |
|
|
|
|
|
|
|
|
particle.style.left = `${Math.random() * 100}%`; |
|
|
particle.style.top = `${Math.random() * 100}%`; |
|
|
|
|
|
|
|
|
particle.style.opacity = Math.random() * 0.5 + 0.1; |
|
|
|
|
|
|
|
|
const duration = Math.random() * 20 + 10; |
|
|
particle.style.animation = `float ${duration}s linear infinite`; |
|
|
|
|
|
|
|
|
particlesContainer.appendChild(particle); |
|
|
} |
|
|
|
|
|
|
|
|
const style = document.createElement('style'); |
|
|
style.innerHTML = ` |
|
|
@keyframes float { |
|
|
0% { transform: translateY(0) translateX(0); } |
|
|
25% { transform: translateY(-20px) translateX(10px); } |
|
|
50% { transform: translateY(-40px) translateX(0); } |
|
|
75% { transform: translateY(-20px) translateX(-10px); } |
|
|
100% { transform: translateY(0) translateX(0); } |
|
|
} |
|
|
`; |
|
|
document.head.appendChild(style); |
|
|
}); |
|
|
</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 <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=timoon811/block11tm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
