| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>WallHub - Лучшие обои для устройств</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> |
| @keyframes float { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-10px); } |
| } |
| .floating { |
| animation: float 3s ease-in-out infinite; |
| } |
| .fade-in { |
| animation: fadeIn 0.5s ease-in; |
| } |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| .grid-item { |
| transition: all 0.3s ease; |
| } |
| .grid-item:hover { |
| transform: scale(1.03); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); |
| } |
| .menu-item { |
| position: relative; |
| } |
| .menu-item::after { |
| content: ''; |
| position: absolute; |
| width: 0; |
| height: 2px; |
| bottom: 0; |
| left: 0; |
| background-color: #3b82f6; |
| transition: width 0.3s ease; |
| } |
| .menu-item:hover::after { |
| width: 100%; |
| } |
| .dropdown-menu { |
| opacity: 0; |
| visibility: hidden; |
| transition: all 0.3s ease; |
| } |
| .dropdown:hover .dropdown-menu { |
| opacity: 1; |
| visibility: visible; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> |
| |
| <header class="sticky top-0 z-50 bg-gray-800/90 backdrop-blur-md shadow-lg"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| |
| <div class="flex items-center space-x-2"> |
| <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center floating"> |
| <i class="fas fa-image text-white text-xl"></i> |
| </div> |
| <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">WallHub</h1> |
| </div> |
|
|
| |
| <button id="mobile-menu-button" class="md:hidden text-gray-300 hover:text-white focus:outline-none"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
|
|
| |
| <nav class="hidden md:flex space-x-8"> |
| <div class="dropdown relative"> |
| <button class="menu-item flex items-center space-x-1 py-2 px-1 text-gray-300 hover:text-white transition"> |
| <span>Категории</span> |
| <i class="fas fa-chevron-down text-xs mt-1"></i> |
| </button> |
| <div class="dropdown-menu absolute left-0 mt-2 w-48 bg-gray-800 rounded-md shadow-xl py-1 z-50"> |
| <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">Для ПК</a> |
| <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">Для смартфонов</a> |
| <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">4K Обои</a> |
| <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">Минимализм</a> |
| <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">Природа</a> |
| </div> |
| </div> |
| <a href="#" class="menu-item py-2 px-1 text-gray-300 hover:text-white transition">Популярные</a> |
| <a href="#" class="menu-item py-2 px-1 text-gray-300 hover:text-white transition">Новые</a> |
| <a href="#" class="menu-item py-2 px-1 text-gray-300 hover:text-white transition">Коллекции</a> |
| </nav> |
|
|
| |
| <div class="hidden md:flex items-center space-x-4"> |
| <div class="relative"> |
| <input type="text" placeholder="Поиск обоев..." class="bg-gray-700 rounded-full py-2 px-4 pl-10 text-white focus:outline-none focus:ring-2 focus:ring-blue-500 w-64"> |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
| </div> |
| <button class="w-10 h-10 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center transition"> |
| <i class="fas fa-user text-gray-300"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="mobile-menu" class="hidden md:hidden bg-gray-800 px-4 py-2"> |
| <div class="mb-3"> |
| <input type="text" placeholder="Поиск обоев..." class="bg-gray-700 rounded-full py-2 px-4 pl-10 text-white focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"> |
| <i class="fas fa-search absolute left-7 top-[72px] text-gray-400"></i> |
| </div> |
| <a href="#" class="block py-2 px-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded">Для ПК</a> |
| <a href="#" class="block py-2 px-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded">Для смартфонов</a> |
| <a href="#" class="block py-2 px-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded">Популярные</a> |
| <a href="#" class="block py-2 px-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded">Новые</a> |
| <a href="#" class="block py-2 px-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded">Коллекции</a> |
| <div class="pt-2 mt-2 border-t border-gray-700"> |
| <button class="w-full py-2 px-2 text-left text-gray-300 hover:bg-gray-700 hover:text-white rounded flex items-center"> |
| <i class="fas fa-user mr-2"></i> Войти |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="relative bg-gradient-to-br from-gray-800 to-gray-900 py-16 md:py-24"> |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0 fade-in"> |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">Найдите идеальные обои</h2> |
| <p class="text-xl text-gray-300 mb-6">Тысячи высококачественных обоев для вашего рабочего стола или смартфона. Бесплатно и без регистрации.</p> |
| <div class="flex space-x-4"> |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full font-medium transition flex items-center"> |
| <i class="fas fa-download mr-2"></i> Скачать все |
| </button> |
| <button class="bg-gray-700 hover:bg-gray-600 text-white px-6 py-3 rounded-full font-medium transition flex items-center"> |
| <i class="fas fa-heart mr-2"></i> Избранное |
| </button> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center fade-in"> |
| <div class="relative w-full max-w-md"> |
| <div class="absolute -top-10 -left-10 w-32 h-32 bg-blue-500 rounded-full opacity-20 animate-pulse"></div> |
| <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-purple-500 rounded-full opacity-20 animate-pulse delay-300"></div> |
| <div class="relative bg-gray-800 p-2 rounded-2xl shadow-2xl"> |
| <div class="bg-gray-900 rounded-xl overflow-hidden"> |
| <img src="https://source.unsplash.com/random/600x400/?nature" alt="Nature Wallpaper" class="w-full h-auto"> |
| <div class="p-4"> |
| <div class="flex justify-between items-center mb-2"> |
| <h3 class="font-medium">Горный пейзаж</h3> |
| <div class="flex space-x-2"> |
| <button class="text-gray-400 hover:text-blue-500 transition"> |
| <i class="fas fa-heart"></i> |
| </button> |
| <button class="text-gray-400 hover:text-blue-500 transition"> |
| <i class="fas fa-download"></i> |
| </button> |
| </div> |
| </div> |
| <div class="flex justify-between text-sm text-gray-400"> |
| <span>2560x1440</span> |
| <span>4K</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 bg-gray-900"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold mb-8 text-center">Популярные категории</h2> |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4"> |
| <a href="#" class="category-card bg-gray-800 rounded-xl overflow-hidden transition hover:bg-gray-700 group"> |
| <div class="aspect-w-16 aspect-h-9 relative"> |
| <img src="https://source.unsplash.com/random/300x200/?nature" alt="Nature" class="w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4"> |
| <h3 class="text-white font-medium group-hover:text-blue-400 transition">Природа</h3> |
| </div> |
| </div> |
| </a> |
| <a href="#" class="category-card bg-gray-800 rounded-xl overflow-hidden transition hover:bg-gray-700 group"> |
| <div class="aspect-w-16 aspect-h-9 relative"> |
| <img src="https://source.unsplash.com/random/300x200/?city" alt="City" class="w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4"> |
| <h3 class="text-white font-medium group-hover:text-blue-400 transition">Город</h3> |
| </div> |
| </div> |
| </a> |
| <a href="#" class="category-card bg-gray-800 rounded-xl overflow-hidden transition hover:bg-gray-700 group"> |
| <div class="aspect-w-16 aspect-h-9 relative"> |
| <img src="https://source.unsplash.com/random/300x200/?space" alt="Space" class="w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4"> |
| <h3 class="text-white font-medium group-hover:text-blue-400 transition">Космос</h3> |
| </div> |
| </div> |
| </a> |
| <a href="#" class="category-card bg-gray-800 rounded-xl overflow-hidden transition hover:bg-gray-700 group"> |
| <div class="aspect-w-16 aspect-h-9 relative"> |
| <img src="https://source.unsplash.com/random/300x200/?abstract" alt="Abstract" class="w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4"> |
| <h3 class="text-white font-medium group-hover:text-blue-400 transition">Абстракция</h3> |
| </div> |
| </div> |
| </a> |
| <a href="#" class="category-card bg-gray-800 rounded-xl overflow-hidden transition hover:bg-gray-700 group"> |
| <div class="aspect-w-16 aspect-h-9 relative"> |
| <img src="https://source.unsplash.com/random/300x200/?minimal" alt="Minimal" class="w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4"> |
| <h3 class="text-white font-medium group-hover:text-blue-400 transition">Минимализм</h3> |
| </div> |
| </div> |
| </a> |
| <a href="#" class="category-card bg-gray-800 rounded-xl overflow-hidden transition hover:bg-gray-700 group"> |
| <div class="aspect-w-16 aspect-h-9 relative"> |
| <img src="https://source.unsplash.com/random/300x200/?anime" alt="Anime" class="w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4"> |
| <h3 class="text-white font-medium group-hover:text-blue-400 transition">Аниме</h3> |
| </div> |
| </div> |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 bg-gray-900"> |
| <div class="container mx-auto px-4"> |
| <div class="flex justify-between items-center mb-8"> |
| <h2 class="text-3xl font-bold">Новые обои</h2> |
| <div class="flex space-x-2"> |
| <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg transition"> |
| <i class="fas fa-th-large"></i> |
| </button> |
| <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg transition"> |
| <i class="fas fa-th-list"></i> |
| </button> |
| </div> |
| </div> |
|
|
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> |
| |
| <div class="grid-item bg-gray-800 rounded-xl overflow-hidden transition"> |
| <div class="relative"> |
| <img src="https://source.unsplash.com/random/600x400/?mountain" alt="Mountain" class="w-full h-48 sm:h-56 object-cover"> |
| <div class="absolute top-3 right-3 flex space-x-2"> |
| <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition"> |
| <i class="fas fa-heart text-white text-sm"></i> |
| </button> |
| <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition"> |
| <i class="fas fa-download text-white text-sm"></i> |
| </button> |
| </div> |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4"> |
| <h3 class="text-white font-medium">Горный хребет</h3> |
| <div class="flex justify-between text-xs text-gray-300 mt-1"> |
| <span>3840x2160</span> |
| <span>4K</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid-item bg-gray-800 rounded-xl overflow-hidden transition"> |
| <div class="relative"> |
| <img src="https://source.unsplash.com/random/600x400/?ocean" alt="Ocean" class="w-full h-48 sm:h-56 object-cover"> |
| <div class="absolute top-3 right-3 flex space-x-2"> |
| <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition"> |
| <i class="fas fa-heart text-white text-sm"></i> |
| </button> |
| <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition"> |
| <i class="fas fa-download text-white text-sm"></i> |
| </button> |
| </div> |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4"> |
| <h3 class="text-white font-medium">Океанский закат</h3> |
| <div class="flex justify-between text-xs text-gray-300 mt-1"> |
| <span>2560x1440</span> |
| <span>QHD</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid-item bg-gray-800 rounded-xl overflow-hidden transition"> |
| <div class="relative"> |
| <img src="https://source.unsplash.com/random/600x400/?forest" alt="Forest" class="w-full h-48 sm:h-56 object-cover"> |
| <div class="absolute top-3 right-3 flex space-x-2"> |
| <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition"> |
| <i class="fas fa-heart text-white text-sm"></i> |
| </button> |
| <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition"> |
| <i class="fas fa-download text-white text-sm"></i> |
| </button> |
| </div> |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4"> |
| <h3 class="text-white font-medium">Туманный лес</h3> |
| <div class="flex justify-between text-xs text-gray-300 mt-1"> |
| <span>1920x1080</span> |
| <span>Full HD</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid-item bg-gray-800 rounded-xl overflow-hidden transition"> |
| <div class="relative"> |
| <img src="https://source.unsplash.com/random/600x400/?desert" alt="Desert" class="w-full h-48 sm:h-56 object-cover"> |
| <div class="absolute top-3 right-3 flex space-x-2"> |
| <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition"> |
| <i class="fas fa-heart text-white text-sm"></i> |
| </button> |
| <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition"> |
| <i class="fas fa-download text-white text-sm"></i> |
| </button> |
| </div> |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4"> |
| <h3 class="text-white font-medium">Бескрайняя пустыня</h3> |
| <div class="flex justify-between text-xs text-gray-300 mt-1"> |
| <span>5120x2880</span> |
| <span>5K</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid-item bg-gray-800 rounded-xl overflow-hidden transition"> |
| <div class="relative"> |
| <img src="https://source.unsplash.com/random/600x400/?night" alt="Night" class="w-full h-48 sm:h-56 object-cover"> |
| <div class="absolute top-3 right-3 flex space-x-2"> |
| <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition"> |
| <i class="fas fa-heart text-white text-sm"></i> |
| </button> |
| <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition"> |
| <i class="fas fa-download text-white text-sm"></i> |
| </button> |
| </div> |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4"> |
| <h3 class="text-white font-medium">Звездная ночь</h3> |
| <div class="flex justify-between text-xs text-gray-300 mt-1"> |
| <span>3840x2160</span> |
| <span>4K</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid-item bg-gray-800 rounded-xl overflow-hidden transition"> |
| <div class="relative"> |
| <img src="https://source.unsplash.com/random/600x400/?waterfall" alt="Waterfall" class="w-full h-48 sm:h-56 object-cover"> |
| <div class="absolute top-3 right-3 flex space-x-2"> |
| <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition"> |
| <i class="fas fa-heart text-white text-sm"></i> |
| </button> |
| <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition"> |
| <i class="fas fa-download text-white text-sm"></i> |
| </button> |
| </div> |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4"> |
| <h3 class="text-white font-medium">Горный водопад</h3> |
| <div class="flex justify-between text-xs text-gray-300 mt-1"> |
| <span>2560x1440</span> |
| <span>QHD</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid-item bg-gray-800 rounded-xl overflow-hidden transition"> |
| <div class="relative"> |
| <img src="https://source.unsplash.com/random/600x400/?aurora" alt="Aurora" class="w-full h-48 sm:h-56 object-cover"> |
| <div class="absolute top-3 right-3 flex space-x-2"> |
| <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition"> |
| <i class="fas fa-heart text-white text-sm"></i> |
| </button> |
| <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition"> |
| <i class="fas fa-download text-white text-sm"></i> |
| </button> |
| </div> |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4"> |
| <h3 class="text-white font-medium">Северное сияние</h3> |
| <div class="flex justify-between text-xs text-gray-300 mt-1"> |
| <span>3840x2160</span> |
| <span>4K</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid-item bg-gray-800 rounded-xl overflow-hidden transition"> |
| <div class="relative"> |
| <img src="https://source.unsplash.com/random/600x400/?sunset" alt="Sunset" class="w-full h-48 sm:h-56 object-cover"> |
| <div class="absolute top-3 right-3 flex space-x-2"> |
| <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition"> |
| <i class="fas fa-heart text-white text-sm"></i> |
| </button> |
| <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition"> |
| <i class="fas fa-download text-white text-sm"></i> |
| </button> |
| </div> |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4"> |
| <h3 class="text-white font-medium">Закат на пляже</h3> |
| <div class="flex justify-between text-xs text-gray-300 mt-1"> |
| <span>1920x1080</span> |
| <span>Full HD</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mt-10 text-center"> |
| <button class="bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-full font-medium transition"> |
| Показать еще |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-800"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold mb-12 text-center">Почему выбирают нас?</h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-gray-900 p-6 rounded-xl hover:bg-gray-800 transition group"> |
| <div class="w-14 h-14 bg-blue-600 rounded-full flex items-center justify-center mb-4 group-hover:bg-blue-500 transition"> |
| <i class="fas fa-image text-white text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Высокое качество</h3> |
| <p class="text-gray-400">Все обои проходят тщательный отбор и проверку качества. Только лучшие изображения в высоком разрешении.</p> |
| </div> |
| <div class="bg-gray-900 p-6 rounded-xl hover:bg-gray-800 transition group"> |
| <div class="w-14 h-14 bg-purple-600 rounded-full flex items-center justify-center mb-4 group-hover:bg-purple-500 transition"> |
| <i class="fas fa-mobile-alt text-white text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Оптимизация</h3> |
| <p class="text-gray-400">Каждое изображение оптимизировано для разных устройств. Выберите подходящее разрешение для вашего экрана.</p> |
| </div> |
| <div class="bg-gray-900 p-6 rounded-xl hover:bg-gray-800 transition group"> |
| <div class="w-14 h-14 bg-green-600 rounded-full flex items-center justify-center mb-4 group-hover:bg-green-500 transition"> |
| <i class="fas fa-cloud-download-alt text-white text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Быстрая загрузка</h3> |
| <p class="text-gray-400">Быстрая загрузка без ограничений и без регистрации. Скачивайте столько обоев, сколько вам нужно.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <div class="flex items-center space-x-2 mb-4"> |
| <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center"> |
| <i class="fas fa-image text-white text-xl"></i> |
| </div> |
| <h3 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">WallHub</h3> |
| </div> |
| <p class="text-gray-400 mb-4">Лучшие обои для ваших устройств. Бесплатно и без ограничений.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-pinterest"></i> |
| </a> |
| </div> |
| </div> |
| <div> |
| <h4 class="text-lg font-bold mb-4">Категории</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Для ПК</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Для смартфонов</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">4K Обои</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Минимализм</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Природа</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg font-bold mb-4">Информация</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">О нас</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Контакты</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Политика конфиденциальности</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Условия использования</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg font-bold mb-4">Подписаться</h4> |
| <p class="text-gray-400 mb-4">Получайте уведомления о новых обоях прямо на вашу почту.</p> |
| <div class="flex"> |
| <input type="email" placeholder="Ваш email" class="bg-gray-800 text-white px-4 py-2 rounded-l-lg focus:outline-none w-full"> |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r-lg transition"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 mt-10 pt-6 text-center text-gray-500"> |
| <p>© 2023 WallHub. Все права защищены.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <button id="back-to-top" class="fixed bottom-6 right-6 w-12 h-12 bg-gray-800 hover:bg-gray-700 rounded-full flex items-center justify-center shadow-lg transition opacity-0 invisible"> |
| <i class="fas fa-arrow-up text-white"></i> |
| </button> |
|
|
| <script> |
| |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); |
| const mobileMenu = document.getElementById('mobile-menu'); |
| |
| mobileMenuButton.addEventListener('click', () => { |
| mobileMenu.classList.toggle('hidden'); |
| }); |
| |
| |
| const backToTopButton = document.getElementById('back-to-top'); |
| |
| window.addEventListener('scroll', () => { |
| if (window.pageYOffset > 300) { |
| backToTopButton.classList.remove('opacity-0', 'invisible'); |
| backToTopButton.classList.add('opacity-100', 'visible'); |
| } else { |
| backToTopButton.classList.remove('opacity-100', 'visible'); |
| backToTopButton.classList.add('opacity-0', 'invisible'); |
| } |
| }); |
| |
| backToTopButton.addEventListener('click', () => { |
| window.scrollTo({ |
| top: 0, |
| behavior: 'smooth' |
| }); |
| }); |
| |
| |
| const gridItems = document.querySelectorAll('.grid-item'); |
| |
| gridItems.forEach(item => { |
| const img = item.querySelector('img'); |
| const originalSrc = img.src; |
| |
| item.addEventListener('mouseenter', () => { |
| |
| }); |
| |
| item.addEventListener('mouseleave', () => { |
| img.src = originalSrc; |
| }); |
| }); |
| |
| |
| function getRandomWallpaper(category) { |
| return `https://source.unsplash.com/random/600x400/?${category}`; |
| } |
| </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=lastLord/ss" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
