| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Paws & Care - Ветеринарная клиника</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=Comic+Neue:wght@400;700&family=Poppins:wght@300;400;600;700&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: #f9f7f7; |
| overflow-x: hidden; |
| } |
| |
| .comic-font { |
| font-family: 'Comic Neue', cursive; |
| } |
| |
| .pet-shape { |
| clip-path: path('M10,10 L90,10 C110,10 110,30 90,50 L50,90 C30,110 10,110 10,90 Z'); |
| } |
| |
| .bubble { |
| position: relative; |
| border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; |
| } |
| |
| .bubble::after { |
| content: ''; |
| position: absolute; |
| bottom: -10px; |
| left: 50%; |
| width: 20px; |
| height: 20px; |
| background: inherit; |
| transform: translateX(-50%) rotate(45deg); |
| z-index: -1; |
| } |
| |
| @keyframes float { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-20px); } |
| } |
| |
| .floating { |
| animation: float 6s ease-in-out infinite; |
| } |
| |
| .zigzag { |
| background: linear-gradient(135deg, #f8f4e3 25%, transparent 25%) -50px 0, |
| linear-gradient(225deg, #f8f4e3 25%, transparent 25%) -50px 0, |
| linear-gradient(315deg, #f8f4e3 25%, transparent 25%), |
| linear-gradient(45deg, #f8f4e3 25%, transparent 25%); |
| background-size: 100px 100px; |
| background-color: #f9f7f7; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <header class="relative overflow-hidden"> |
| <div class="absolute -right-20 -top-20 w-64 h-64 rounded-full bg-blue-100 opacity-70"></div> |
| <div class="absolute left-10 bottom-10 w-40 h-40 rounded-full bg-yellow-100 opacity-70"></div> |
| |
| <div class="container mx-auto px-6 py-10 relative z-10"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center"> |
| <div class="w-14 h-14 rounded-2xl bg-amber-400 flex items-center justify-center mr-4"> |
| <i class="fas fa-paw text-white text-2xl"></i> |
| </div> |
| <h1 class="text-3xl font-bold text-gray-800 comic-font">Paws & Care</h1> |
| </div> |
| |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#services" class="text-gray-700 hover:text-amber-500 font-medium transition">Услуги</a> |
| <a href="#about" class="text-gray-700 hover:text-amber-500 font-medium transition">О нас</a> |
| <a href="#contact" class="text-gray-700 hover:text-amber-500 font-medium transition">Контакты</a> |
| <a href="#" class="px-6 py-2 bg-amber-400 rounded-full text-white font-medium hover:bg-amber-500 transition">Запись</a> |
| </nav> |
| |
| <button class="md:hidden text-gray-700"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| |
| <div class="mt-20 md:mt-32 grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> |
| <div class="relative"> |
| <div class="bubble bg-white p-8 rounded-3xl shadow-xl max-w-md float-right"> |
| <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4 comic-font">Ваш питомец в надёжных лапах!</h2> |
| <p class="text-gray-600 mb-6">Профессиональная забота о здоровье ваших любимцев с любовью и вниманием.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="px-6 py-3 bg-amber-400 rounded-full text-white font-medium hover:bg-amber-500 transition">Записаться</a> |
| <a href="#services" class="px-6 py-3 border border-gray-300 rounded-full text-gray-700 font-medium hover:bg-gray-100 transition">Услуги</a> |
| </div> |
| </div> |
| |
| <div class="absolute -left-10 -bottom-10 w-32 h-32 bg-blue-100 rounded-full opacity-70 z-0"></div> |
| </div> |
| |
| <div class="relative floating"> |
| <img src="https://images.unsplash.com/photo-1583337130417-3346a1be7dee?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80" |
| alt="Ветеринар с собакой" |
| class="w-full h-auto max-w-xl rounded-3xl shadow-xl transform rotate-2"> |
| <div class="absolute -right-10 -top-10 w-24 h-24 bg-pink-100 rounded-full"></div> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section id="services" class="py-20 relative overflow-hidden zigzag"> |
| <div class="absolute -left-20 top-1/2 w-64 h-64 rounded-full bg-green-100 opacity-50 transform -translate-y-1/2"></div> |
| |
| <div class="container mx-auto px-6 relative"> |
| <div class="flex justify-between items-end mb-16"> |
| <div class="max-w-md"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4 comic-font">Наши услуги</h2> |
| <p class="text-gray-600">Мы предлагаем полный спектр ветеринарных услуг для ваших питомцев.</p> |
| </div> |
| <a href="#" class="hidden md:block px-6 py-3 border border-gray-300 rounded-full text-gray-700 font-medium hover:bg-gray-100 transition">Все услуги →</a> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <div class="bg-white p-8 rounded-3xl shadow-lg transform hover:-rotate-1 transition duration-300"> |
| <div class="w-16 h-16 rounded-2xl bg-blue-100 flex items-center justify-center mb-6"> |
| <i class="fas fa-syringe text-blue-500 text-2xl"></i> |
| |
| <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=Leenar64/tre" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
