labs/labWeb/lab8/contacts.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ТурНиша - Контакты</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-gray-50 font-sans">
    
    <header class="bg-white shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <a href="index.html" class="text-2xl font-bold text-emerald-600 flex items-center gap-2">
                    <i data-lucide="compass"></i>
                    ТурНиша
                </a>

                <nav class="hidden md:flex space-x-8">
                    <a href="index.html" class="text-gray-700 hover:text-emerald-600 transition">Главная</a>
                    <a href="products.html" class="text-gray-700 hover:text-emerald-600 transition">Туры</a>
                    <a href="news.html" class="text-gray-700 hover:text-emerald-600 transition">Акции</a>
                    <a href="order.html" class="text-gray-700 hover:text-emerald-600 transition">Заказать</a>
                    <a href="contacts.html" class="text-emerald-600 font-semibold border-b-2 border-emerald-600">Контакты</a>
                </nav>

                <button id="burger-btn" class="md:hidden p-2 text-gray-700 hover:text-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-500 rounded-lg" aria-label="Открыть меню" aria-expanded="false">
                    <i data-lucide="menu" class="w-6 h-6"></i>
                </button>
            </div>
        </div>

        <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
            <div class="px-4 py-2 space-y-2">
                <a href="index.html" class="block py-2 text-gray-700">Главная</a>
                <a href="products.html" class="block py-2 text-gray-700">Туры</a>
                <a href="news.html" class="block py-2 text-gray-700">Акции</a>
                <a href="order.html" class="block py-2 text-gray-700">Заказать</a>
                <a href="contacts.html" class="block py-2 text-emerald-600 font-semibold">Контакты</a>
            </div>
        </div>
    </header>

    
    <main class="container mx-auto px-4 py-12">
        <h1 class="text-3xl md:text-4xl font-bold mb-8 text-gray-800 text-center">Контакты</h1>
        
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
            
            <div class="bg-white rounded-2xl shadow-lg p-8">
                <h2 class="text-2xl font-bold mb-6 text-gray-800">Свяжитесь с нами</h2>
                
                <div class="space-y-6">
                    <div class="flex items-start gap-4">
                        <div class="bg-emerald-100 p-3 rounded-full">
                            <i data-lucide="map-pin" class="w-6 h-6 text-emerald-600"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-gray-800">Адрес офиса</h3>
                            <p class="text-gray-600">г. Москва, ул. Туристическая, д. 15, офис 402</p>
                            <p class="text-sm text-gray-500">м. Третьяковская (10 мин. пешком)</p>
                        </div>
                    </div>

                    <div class="flex items-start gap-4">
                        <div class="bg-emerald-100 p-3 rounded-full">
                            <i data-lucide="phone" class="w-6 h-6 text-emerald-600"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-gray-800">Телефоны</h3>
                            <p class="text-gray-600">8 (800) 555-35-35 (бесплатный)</p>
                            <p class="text-gray-600">8 (495) 123-45-67 (Москва)</p>
                            <p class="text-sm text-gray-500 mt-1">Ежедневно: 9:00 - 21:00</p>
                        </div>
                    </div>

                    <div class="flex items-start gap-4">
                        <div class="bg-emerald-100 p-3 rounded-full">
                            <i data-lucide="mail" class="w-6 h-6 text-emerald-600"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-gray-800">Email</h3>
                            <p class="text-gray-600">info@turnisha.ru - общие вопросы</p>
                            <p class="text-gray-600">booking@turnisha.ru - бронирование</p>
                            <p class="text-gray-600">support@turnisha.ru - поддержка клиентов</p>
                        </div>
                    </div>

                    <div class="flex items-start gap-4">
                        <div class="bg-emerald-100 p-3 rounded-full">
                            <i data-lucide="clock" class="w-6 h-6 text-emerald-600"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-gray-800">Режим работы</h3>
                            <p class="text-gray-600">Понедельник - Пятница: 9:00 - 20:00</p>
                            <p class="text-gray-600">Суббота - Воскресенье: 10:00 - 18:00</p>
                        </div>
                    </div>
                </div>

                
                <div class="mt-8 pt-6 border-t">
                    <h3 class="font-semibold text-gray-800 mb-4">Мы в соцсетях</h3>
                    <div class="flex gap-4">
                        <a href="#" class="bg-gray-100 p-3 rounded-full hover:bg-emerald-100 hover:text-emerald-600 transition">
                            <i data-lucide="send" class="w-5 h-5"></i>
                        </a>
                    </div>
                </div>
            </div>

            
            <div class="bg-white rounded-2xl shadow-lg p-2 h-full min-h-[400px]">
                <div class="w-full h-full bg-gray-200 rounded-xl flex items-center justify-center relative overflow-hidden">
                    <img src="http://static.photos/cityscape/1024x576/80" alt="Map" class="w-full h-full object-cover rounded-lg opacity-50">
                    <div class="absolute inset-0 flex items-center justify-center">
                        <div class="bg-white px-6 py-4 rounded-lg shadow-lg text-center">
                            <i data-lucide="map-pin" class="w-8 h-8 text-emerald-600 mx-auto mb-2"></i>
                            <p class="font-semibold text-gray-800">г. Москва, ул. Туристическая, 15</p>
                            <button class="mt-3 text-emerald-600 hover:underline text-sm">Открыть в Яндекс.Картах</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        
        <h2 class="text-2xl font-bold mb-6 text-gray-800">Наши офисы в других городах</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="bg-white rounded-xl shadow p-6">
                <h3 class="font-bold text-lg mb-2">Санкт-Петербург</h3>
                <p class="text-gray-600 text-sm mb-2">Невский проспект, 28</p>
                <p class="text-emerald-600 font-semibold">8 (812) 123-45-67</p>
            </div>
            <div class="bg-white rounded-xl shadow p-6">
                <h3 class="font-bold text-lg mb-2">Казань</h3>
                <p class="text-gray-600 text-sm mb-2">Кремлевская ул., 15</p>
                <p class="text-emerald-600 font-semibold">8 (843) 123-45-67</p>
            </div>
            <div class="bg-white rounded-xl shadow p-6">
                <h3 class="font-bold text-lg mb-2">Екатеринбург</h3>
                <p class="text-gray-600 text-sm mb-2">пр. Ленина, 50</p>
                <p class="text-emerald-600 font-semibold">8 (343) 123-45-67</p>
            </div>
        </div>
    </main>

    
    <footer class="bg-gray-800 text-white py-8 mt-16">
        <div class="container mx-auto px-4 text-center">
            <p class="text-gray-400">&copy; 2024 ТурНиша. Все права защищены.</p>
        </div>
    </footer>

    <script src="js/script.js"></script>
    <script>
        lucide.createIcons();
    </script>
</body>
</html>