| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Dentissimo - Стоматологическая клиника</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> |
| |
| .hero-section { |
| background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); |
| background-size: cover; |
| background-position: center; |
| } |
| |
| .service-card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| |
| .testimonial-card { |
| transition: all 0.3s ease; |
| } |
| |
| .testimonial-card:hover { |
| transform: scale(1.03); |
| } |
| |
| .floating-button { |
| animation: float 3s ease-in-out infinite; |
| } |
| |
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-15px); } |
| 100% { transform: translateY(0px); } |
| } |
| |
| .nav-link::after { |
| content: ''; |
| display: block; |
| width: 0; |
| height: 2px; |
| background: #3b82f6; |
| transition: width .3s; |
| } |
| |
| .nav-link:hover::after { |
| width: 100%; |
| } |
| </style> |
| </head> |
| <body class="font-sans"> |
| |
| <header class="fixed w-full bg-white shadow-md z-50"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fas fa-tooth text-blue-500 text-3xl mr-2"></i> |
| <span class="text-2xl font-bold text-gray-800">Dentissimo</span> |
| </div> |
| |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#home" class="nav-link text-gray-700 hover:text-blue-500 font-medium">Главная</a> |
| <a href="#services" class="nav-link text-gray-700 hover:text-blue-500 font-medium">Услуги</a> |
| <a href="#doctors" class="nav-link text-gray-700 hover:text-blue-500 font-medium">Врачи</a> |
| <a href="#about" class="nav-link text-gray-700 hover:text-blue-500 font-medium">О нас</a> |
| <a href="#testimonials" class="nav-link text-gray-700 hover:text-blue-500 font-medium">Отзывы</a> |
| <a href="#contact" class="nav-link text-gray-700 hover:text-blue-500 font-medium">Контакты</a> |
| </nav> |
| |
| <div class="hidden md:block"> |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-full font-medium transition duration-300"> |
| Записаться |
| </button> |
| </div> |
| |
| <button id="mobile-menu-button" class="md:hidden text-gray-700"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| |
| |
| <div id="mobile-menu" class="hidden md:hidden bg-white py-4 px-4 shadow-lg"> |
| <div class="flex flex-col space-y-4"> |
| <a href="#home" class="text-gray-700 hover:text-blue-500 font-medium">Главная</a> |
| <a href="#services" class="text-gray-700 hover:text-blue-500 font-medium">Услуги</a> |
| <a href="#doctors" class="text-gray-700 hover:text-blue-500 font-medium">Врачи</a> |
| <a href="#about" class="text-gray-700 hover:text-blue-500 font-medium">О нас</a> |
| <a href="#testimonials" class="text-gray-700 hover:text-blue-500 font-medium">Отзывы</a> |
| <a href="#contact" class="text-gray-700 hover:text-blue-500 font-medium">Контакты</a> |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-full font-medium transition duration-300 mt-2"> |
| Записаться |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section id="home" class="hero-section pt-32 pb-20 md:pt-40 md:pb-32 text-white"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-2xl"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Профессиональный уход за вашей улыбкой</h1> |
| <p class="text-xl mb-8 text-gray-200">Современные технологии и индивидуальный подход к каждому пациенту для здоровья ваших зубов.</p> |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-full font-medium transition duration-300"> |
| Записаться на прием |
| </button> |
| <button class="bg-white hover:bg-gray-100 text-blue-500 px-8 py-3 rounded-full font-medium transition duration-300"> |
| Наши услуги |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="bg-gray-50 py-16"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-white p-8 rounded-lg shadow-md flex items-start"> |
| <div class="bg-blue-100 p-4 rounded-full mr-4"> |
| <i class="fas fa-clock text-blue-500 text-2xl"></i> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold mb-2">Гибкий график</h3> |
| <p class="text-gray-600">Работаем с 8:00 до 21:00 без выходных для вашего удобства.</p> |
| </div> |
| </div> |
| |
| <div class="bg-white p-8 rounded-lg shadow-md flex items-start"> |
| <div class="bg-blue-100 p-4 rounded-full mr-4"> |
| <i class="fas fa-shield-alt text-blue-500 text-2xl"></i> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold mb-2">Безопасность</h3> |
| <p class="text-gray-600">Строгие стандарты стерилизации и современное оборудование.</p> |
| </div> |
| </div> |
| |
| <div class="bg-white p-8 rounded-lg shadow-md flex items-start"> |
| <div class="bg-blue-100 p-4 rounded-full mr-4"> |
| <i class="fas fa-money-bill-wave text-blue-500 text-2xl"></i> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold mb-2">Доступные цены</h3> |
| <p class="text-gray-600">Гибкая система скидок и рассрочка платежа.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="services" class="py-20 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Наши услуги</h2> |
| <div class="w-20 h-1 bg-blue-500 mx-auto"></div> |
| <p class="text-gray-600 mt-6 max-w-2xl mx-auto">Мы предлагаем полный спектр стоматологических услуг для всей семьи с использованием современных технологий.</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
| <div class="h-48 bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-tooth text-blue-500 text-6xl"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-3">Терапевтическая стоматология</h3> |
| <p class="text-gray-600 mb-4">Лечение кариеса, пульпита, периодонтита с использованием современных материалов.</p> |
| <a href="#" class="text-blue-500 font-medium flex items-center"> |
| Подробнее <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
| <div class="h-48 bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-teeth text-blue-500 text-6xl"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-3">Ортодонтия</h3> |
| <p class="text-gray-600 mb-4">Исправление прикуса у детей и взрослых с помощью брекет-систем и элайнеров.</p> |
| <a href="#" class="text-blue-500 font-medium flex items-center"> |
| Подробнее <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
| <div class="h-48 bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-teeth-open text-blue-500 text-6xl"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-3">Имплантация</h3> |
| <p class="text-gray-600 mb-4">Восстановление утраченных зубов с использованием современных имплантатов.</p> |
| <a href="#" class="text-blue-500 font-medium flex items-center"> |
| Подробнее <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
| <div class="h-48 bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-smile text-blue-500 text-6xl"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-3">Эстетическая стоматология</h3> |
| <p class="text-gray-600 mb-4">Виниры, отбеливание, художественная реставрация для идеальной улыбки.</p> |
| <a href="#" class="text-blue-500 font-medium flex items-center"> |
| Подробнее <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
| <div class="h-48 bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-baby text-blue-500 text-6xl"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-3">Детская стоматология</h3> |
| <p class="text-gray-600 mb-4">Безболезненное лечение зубов у детей в игровой форме.</p> |
| <a href="#" class="text-blue-500 font-medium flex items-center"> |
| Подробнее <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
| <div class="h-48 bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-x-ray text-blue-500 text-6xl"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-3">Диагностика</h3> |
| <p class="text-gray-600 mb-4">Компьютерная томография, цифровая рентгенография для точной диагностики.</p> |
| <a href="#" class="text-blue-500 font-medium flex items-center"> |
| Подробнее <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col lg:flex-row items-center"> |
| <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="О клинике" class="rounded-lg shadow-xl w-full"> |
| <div class="absolute -bottom-6 -right-6 bg-blue-500 text-white p-6 rounded-lg shadow-lg hidden md:block"> |
| <h4 class="text-2xl font-bold mb-2">15+</h4> |
| <p class="text-sm">Лет опыта</p> |
| </div> |
| </div> |
| </div> |
| <div class="lg:w-1/2"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">О нашей клинике</h2> |
| <p class="text-gray-600 mb-6">Стоматологическая клиника Dentissimo была основана в 2008 году с целью предоставления высококачественных стоматологических услуг с использованием передовых технологий и материалов.</p> |
| |
| <div class="mb-8"> |
| <div class="flex items-start mb-4"> |
| <i class="fas fa-check-circle text-blue-500 text-xl mr-3 mt-1"></i> |
| <div> |
| <h4 class="text-lg font-bold mb-1">Современное оборудование</h4> |
| <p class="text-gray-600">Мы используем только новейшее оборудование от мировых лидеров в стоматологии.</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start mb-4"> |
| <i class="fas fa-check-circle text-blue-500 text-xl mr-3 mt-1"></i> |
| <div> |
| <h4 class="text-lg font-bold mb-1">Квалифицированные специалисты</h4> |
| <p class="text-gray-600">Наши врачи регулярно проходят обучение и стажировки за рубежом.</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <i class="fas fa-check-circle text-blue-500 text-xl mr-3 mt-1"></i> |
| <div> |
| <h4 class="text-lg font-bold mb-1">Индивидуальный подход</h4> |
| <p class="text-gray-600">Для каждого пациента мы разрабатываем персональный план лечения.</p> |
| </div> |
| </div> |
| </div> |
| |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-full font-medium transition duration-300"> |
| Подробнее о нас |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="doctors" class="py-20 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Наши специалисты</h2> |
| <div class="w-20 h-1 bg-blue-500 mx-auto"></div> |
| <p class="text-gray-600 mt-6 max-w-2xl mx-auto">Профессионалы с многолетним опытом, которые помогут вам обрести здоровую и красивую улыбку.</p> |
| </div> |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> |
| |
| <div class="bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-xl"> |
| <img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Доктор Иванова" class="w-full h-64 object-cover"> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-1">Др. Анна Иванова</h3> |
| <p class="text-blue-500 mb-4">Стоматолог-терапевт</p> |
| <p class="text-gray-600 mb-4">Специалист с 12-летним опытом работы, эксперт в области эндодонтии.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-blue-500 hover:text-blue-700"><i class="fab fa-facebook-f"></i></a> |
| <a href="#" class="text-blue-500 hover:text-blue-700"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="text-blue-500 hover:text-blue-700"><i class="fab fa-linkedin-in"></i></a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-xl"> |
| <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80" alt="Доктор Петров" class="w-full h-64 object-cover"> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-1">Др. Сергей Петров</h3> |
| <p class="text-blue-500 mb-4">Хирург-имплантолог</p> |
| <p class="text-gray-600 mb-4">Специализируется на сложных случаях имплантации с 15-летним стажем.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-blue-500 hover:text-blue-700"><i class="fab fa-facebook-f"></i></a> |
| <a href="#" class="text-blue-500 hover:text-blue-700"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="text-blue-500 hover:text-blue-700"><i class="fab fa-linkedin-in"></i></a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-xl"> |
| <img src="https://images.unsplash.com/photo-1594824476967-48c8b964273f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Доктор Смирнова" class="w-full h-64 object-cover"> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-1">Др. Елена Смирнова</h3> |
| <p class="text-blue-500 mb-4">Ортодонт</p> |
| <p class="text-gray-600 mb-4">Эксперт по исправлению прикуса у детей и взрослых, стаж 10 лет.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-blue-500 hover:text-blue-700"><i class="fab fa-facebook-f"></i></a> |
| <a href="#" class="text-blue-500 hover:text-blue-700"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="text-blue-500 hover:text-blue-700"><i class="fab fa-linkedin-in"></i></a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-xl"> |
| <img src="https://images.unsplash.com/photo-1551601651-bc60f254d532?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Доктор Кузнецов" class="w-full h-64 object-cover"> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-1">Др. Алексей Кузнецов</h3> |
| <p class="text-blue-500 mb-4">Стоматолог-ортопед</p> |
| <p class="text-gray-600 mb-4">Специалист по протезированию и эстетической реставрации зубов.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-blue-500 hover:text-blue-700"><i class="fab fa-facebook-f"></i></a> |
| <a href="#" class="text-blue-500 hover:text-blue-700"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="text-blue-500 hover:text-blue-700"><i class="fab fa-linkedin-in"></i></a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="testimonials" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Отзывы пациентов</h2> |
| <div class="w-20 h-1 bg-blue-500 mx-auto"></div> |
| <p class="text-gray-600 mt-6 max-w-2xl mx-auto">Что говорят о нас наши пациенты</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="testimonial-card bg-white p-8 rounded-lg shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="text-yellow-400 mr-2"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| <p class="text-gray-600 mb-6">"Очень доволен лечением у доктора Петрова. Имплантация прошла безболезненно, результат превзошел все ожидания. Персонал вежливый и внимательный."</p> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Иван С." class="w-12 h-12 rounded-full mr-4"> |
| <div> |
| <h4 class="font-bold">Иван С.</h4> |
| <p class="text-gray-500 text-sm">Пациент</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="testimonial-card bg-white p-8 rounded-lg shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="text-yellow-400 mr-2"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| <p class="text-gray-600 mb-6">"Приводила сына на лечение кариеса. Ребенок даже не понял, что ему лечили зуб - так аккуратно и бережно все сделали. Теперь только сюда!"</p> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Ольга М." class="w-12 h-12 rounded-full mr-4"> |
| <div> |
| <h4 class="font-bold">Ольга М.</h4> |
| <p class="text-gray-500 text-sm">Мама пациента</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="testimonial-card bg-white p-8 rounded-lg shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="text-yellow-400 mr-2"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| <p class="text-gray-600 mb-6">"После установки виниров моя улыбка просто идеальна! Спасибо доктору Смирновой за профессионализм и индивидуальный подход."</p> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Анна К." class="w-12 h-12 rounded-full mr-4"> |
| <div> |
| <h4 class="font-bold">Анна К.</h4> |
| <p class="text-gray-500 text-sm">Пациент</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-blue-500 text-white"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-4xl mx-auto text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Запишитесь на прием онлайн</h2> |
| <p class="text-xl mb-8 opacity-90">Оставьте заявку и наш администратор свяжется с вами в течение 15 минут для подтверждения записи.</p> |
| |
| <form class="flex flex-col sm:flex-row gap-4 max-w-2xl mx-auto"> |
| <input type="text" placeholder="Ваше имя" class="flex-grow px-6 py-3 rounded-full text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-300"> |
| <input type="tel" placeholder="Ваш телефон" class="flex-grow px-6 py-3 rounded-full text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-300"> |
| <button type="submit" class="bg-white hover:bg-gray-100 text-blue-500 px-8 py-3 rounded-full font-medium transition duration-300 whitespace-nowrap"> |
| Отправить |
| </button> |
| </form> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Контакты</h2> |
| <div class="w-20 h-1 bg-blue-500 mx-auto"></div> |
| <p class="text-gray-600 mt-6 max-w-2xl mx-auto">Мы всегда рады видеть вас в нашей клинике</p> |
| </div> |
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| <div class="bg-gray-50 p-8 rounded-lg shadow-sm"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-map-marker-alt text-blue-500 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold">Адрес</h3> |
| </div> |
| <p class="text-gray-600">г. Москва, ул. Стоматологическая, д. 15</p> |
| </div> |
| |
| <div class="bg-gray-50 p-8 rounded-lg shadow-sm"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-phone-alt text-blue-500 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold">Телефон</h3> |
| </div> |
| <p class="text-gray-600 mb-2">+7 (495) 123-45-67</p> |
| <p class="text-gray-600">+7 (977) 765-43-21</p> |
| </div> |
| |
| <div class="bg-gray-50 p-8 rounded-lg shadow-sm"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-envelope text-blue-500 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold">Email</h3> |
| </div> |
| <p class="text-gray-600 mb-2">info@dentissimo.ru</p> |
| <p class="text-gray-600">appointment@dentissimo.ru</p> |
| </div> |
| </div> |
| |
| <div class="mt-16"> |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2245.3737890160396!2d37.618423315930474!3d55.75370398055362!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b54a5a738fa419%3A0x7c347d506f52311f!2z0JrRgNCw0YHQvdCw0Y8g0J_RgNC10YHQvdC40L3QsNGA0L3QsNGPINCd0LDRhtC40L7QvdC-0Lkg0JrQvtC90YLRgNC-0LvRjNGB0LrQuNC5INGA0LDQudC-0L0sIDE1LCDQnNC-0YHQutCy0LAsINCg0L7RgdGB0LjRjywgMTI1MDQ3!5e0!3m2!1sru!2s!4v1620000000000!5m2!1sru!2s" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" class="rounded-lg shadow-md"></iframe> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white 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 mb-6"> |
| <i class="fas fa-tooth text-blue-500 text-3xl mr-2"></i> |
| <span class="text-2xl font-bold">Dentissimo</span> |
| </div> |
| <p class="text-gray-400 mb-4">Современная стоматологическая клиника с индивидуальным подходом к каждому пациенту.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-blue-500"><i class="fab fa-facebook-f"></i></a> |
| <a href="#" class="text-gray-400 hover:text-blue-500"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="text-gray-400 hover:text-blue-500"><i class="fab fa-twitter"></i></a> |
| <a href="#" class="text-gray-400 hover:text-blue-500"><i class="fab fa-youtube"></i></a> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-bold mb-6">Услуги</h3> |
| <ul class="space-y-3"> |
| <li><a href="#" class="text-gray-400 hover:text-blue-500">Терапевтическая стоматология</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-blue-500">Хирургическая стоматология</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-blue-500">Ортодонтия</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-blue-500">Имплантация</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-blue-500">Эстетическая стоматология</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-bold mb-6">Часы работы</h3> |
| <ul class="space-y-3 text-gray-400"> |
| <li class="flex justify-between"> |
| <span>Пн-Пт</span> |
| <span>8:00 - 21:00</span> |
| </li> |
| <li class="flex justify-between"> |
| <span>Сб</span> |
| <span>9:00 - 20:00</span> |
| </li> |
| <li class="flex justify-between"> |
| <span>Вс</span> |
| <span>9:00 - 18:00</span> |
| </li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-bold mb-6">Подписаться</h3> |
| <p class="text-gray-400 mb-4">Подпишитесь на нашу рассылку, чтобы получать новости и акции.</p> |
| <form class="flex"> |
| <input type="email" placeholder="Ваш email" class="px-4 py-2 rounded-l-full text-gray-800 focus:outline-none w-full"> |
| <button type="submit" class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded-r-full"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </form> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 Dentissimo. Все права защищены.</p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-blue-500">Политика конфиденциальности</a> |
| <a href="#" class="text-gray-400 hover:text-blue-500">Условия использования</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <button id="back-to-top" class="fixed bottom-8 right-8 bg-blue-500 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center hidden"> |
| <i class="fas fa-arrow-up"></i> |
| </button> |
|
|
| |
| <div class="fixed bottom-8 left-8 z-50 floating-button"> |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-full font-medium shadow-lg flex items-center"> |
| <i class="fas fa-calendar-alt mr-2"></i> Записаться |
| </button> |
| </div> |
|
|
| <script> |
| |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); |
| const mobileMenu = document.getElementById('mobile-menu'); |
| |
| mobileMenuButton.addEventListener('click', () => { |
| mobileMenu.classList.toggle('hidden'); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| |
| |
| mobileMenu.classList.add('hidden'); |
| }); |
| }); |
| |
| |
| const backToTopButton = document.getElementById('back-to-top'); |
| |
| window.addEventListener('scroll', () => { |
| if (window.pageYOffset > 300) { |
| backToTopButton.classList.remove('hidden'); |
| } else { |
| backToTopButton.classList.add('hidden'); |
| } |
| }); |
| |
| backToTopButton.addEventListener('click', () => { |
| window.scrollTo({ |
| top: 0, |
| behavior: 'smooth' |
| }); |
| }); |
| |
| |
| const animateOnScroll = () => { |
| const elements = document.querySelectorAll('.service-card, .testimonial-card'); |
| |
| elements.forEach(element => { |
| const elementPosition = element.getBoundingClientRect().top; |
| const screenPosition = window.innerHeight / 1.3; |
| |
| if (elementPosition < screenPosition) { |
| element.style.opacity = '1'; |
| element.style.transform = 'translateY(0)'; |
| } |
| }); |
| }; |
| |
| |
| window.addEventListener('scroll', animateOnScroll); |
| window.addEventListener('load', () => { |
| |
| document.querySelectorAll('.service-card, .testimonial-card').forEach(element => { |
| element.style.opacity = '0'; |
| element.style.transform = 'translateY(20px)'; |
| element.style.transition = 'all 0.6s ease'; |
| }); |
| |
| |
| animateOnScroll(); |
| }); |
| </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=x2wdfvfd/hasun" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
