<!DOCTYPE html><html lang="ru"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Другой Театр | Главная</title> <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> <script src="https://unpkg.com/feather-icons"></script> <style> .hero-image { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('http://static.photos/theater/1200x630/1'); background-size: cover; background-position: center; } .play-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } </style></head><body class="bg-gray-100 font-sans"> <!-- Navigation --> <nav class="bg-black text-white py-4 px-6 sticky top-0 z-50"> <div class="container mx-auto flex justify-between items-center"> <a href="index.html" class="text-2xl font-bold">Другой Театр</a> <div class="hidden md:flex space-x-8"> <a href="index.html" class="hover:text-red-400">Главная</a> <a href="repertoire.html" class="hover:text-red-400">Репертуар</a> <a href="team.html" class="hover:text-red-400">Труппа</a> <a href="about.html" class="hover:text-red-400">О театре</a> <a href="contacts.html" class="hover:text-red-400">Контакты</a> </div> <button class="md:hidden"> <i data-feather="menu"></i> </button> </div> </nav> <!-- Hero Section --> <section class="hero-image h-96 flex items-center justify-center text-white"> <div class="text-center px-4"> <h1 class="text-4xl md:text-6xl font-bold mb-4">Другой Театр</h1> <p class="text-xl md:text-2xl mb-8">Где традиция встречается с авангардом</p> <a href="repertoire.html" class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-full font-bold transition duration-300">Купить билеты</a> </div> </section> <!-- Current Plays --> <section class="py-16 px-4"> <div class="container mx-auto"> <h2 class="text-3xl font-bold text-center mb-12">Сейчас на сцене</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Play 1 --> <div class="bg-white rounded-lg overflow-hidden shadow-lg play-card transition duration-300"> <img src="http://static.photos/theater/640x360/101" alt="Вишнёвый сад" class="w-full h-64 object-cover"> <div class="p-6"> <h3 class="text-xl font-bold mb-2">Вишнёвый сад</h3> <p class="text-gray-600 mb-4">А.П. Чехов | Драма</p> <p class="mb-4">Современное прочтение классики с элементами иммерсивного театра.</p> <a href="#" class="text-red-600 font-bold hover:text-red-800">Подробнее →</a> </div> </div> <!-- Play 2 --> <div class="bg-white rounded-lg overflow-hidden shadow-lg play-card transition duration-300"> <img src="http://static.photos/theater/640x360/102" alt="Гамлет. Реквием" class="w-full h-64 object-cover"> <div class="p-6"> <h3 class="text-xl font-bold mb-2">Гамлет. Реквием</h3> <p class="text-gray-600 mb-4">У. Шекспир | Трагедия</p> <p class="mb-4">Моноспектакль в постановке Сергея Лосева с оригинальным саундтреком.</p> <a href="#" class="text-red-600 font-bold hover:text-red-800">Подробнее →</a> </div> </div> <!-- Play 3 --> <div class="bg-white rounded-lg overflow-hidden shadow-lg play-card transition duration-300"> <img src="http://static.photos/theater/640x360/103" alt="Кармен. Электро" class="w-full h-64 object-cover"> <div class="p-6"> <h3 class="text-xl font-bold mb-2">Кармен. Электро</h3> <p class="text-gray-600 mb-4">П. Мериме | Мюзикл</p> <p class="mb-4">Смелая интерпретация классического сюжета с электронной музыкой.</p> <a href="#" class="text-red-600 font-bold hover:text-red-800">Подробнее →</a> </div> </div> </div> </div> </section> <!-- News Section --> <section class="py-16 px-4 bg-gray-200"> <div class="container mx-auto"> <h2 class="text-3xl font-bold text-center mb-12">Новости</h2> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <!-- News 1 --> <div class="bg-white p-6 rounded-lg shadow"> <div class="text-sm text-gray-500 mb-2">15 мая 2023</div> <h3 class="text-xl font-bold mb-3">Премия "Золотая Маска"</h3> <p class="mb-4">Наш спектакль "Вишнёвый сад" номинирован на премию "Золотая Маска" в двух категориях.</p> <a href="#" class="text-red-600 font-bold hover:text-red-800">Читать далее →</a> </div> <!-- News 2 --> <div class="bg-white p-6 rounded-lg shadow"> <div class="text-sm text-gray-500 mb-2">28 апреля 2023</div> <h3 class="text-xl font-bold mb-3">Новый сезон</h3> <p class="mb-4">Анонсированы премьеры нового сезона. Среди них — "Дядя Ваня" в постановке Марины Семёновой.</p> <a href="#" class="text-red-600 font-bold hover:text-red-800">Читать далее →</a> </div> <!-- News 3 --> <div class="bg-white p-6 rounded-lg shadow"> <div class="text-sm text-gray-500 mb-2">12 апреля 2023</div> <h3 class="text-xl font-bold mb-3">Мастер-классы</h3> <p class="mb-4">Начинаем серию мастер-классов по актёрскому мастерству от ведущих артистов театра.</p> <a href="#" class="text-red-600 font-bold hover:text-red-800">Читать далее →</a> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-black text-white py-12 px-4"> <div class="container mx-auto"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <div> <h3 class="text-xl font-bold mb-4">Другой Театр</h3> <p class="mb-4">Москва, ул. Театральная, 13</p> <p>© 2023 Все права защищены</p> </div> <div> <h3 class="text-xl font-bold mb-4">Репертуар</h3> <ul class="space-y-2"> <li><a href="#" class="hover:text-red-400">Текущие постановки</a></li> <li><a href="#" class="hover:text-red-400">Архив</a></li> <li><a href="#" class="hover:text-red-400">Премьеры</a></li> </ul> </div> <div> <h3 class="text-xl font-bold mb-4">О театре</h3> <ul class="space-y-2"> <li><a href="#" class="hover:text-red-400">История</a></li> <li><a href="#" class="hover:text-red-400">Труппа</a></li> <li><a href="#" class="hover:text-red-400">Пресса</a></li> </ul> </div> <div> <h3 class="text-xl font-bold mb-4">Контакты</h3> <p class="mb-2"><i data-feather="phone" class="inline mr-2"></i> +7 (495) 123-45-67</p> <p class="mb-2"><i data-feather="mail" class="inline mr-2"></i> info@dteatr.ru</p> <div class="flex space-x-4 mt-4"> <a href="#"><i data-feather="facebook"></i></a> <a href="#"><i data-feather="instagram"></i></a> <a href="#"><i data-feather="youtube"></i></a> </div> </div> </div> </div> </footer> <script> feather.replace(); </script></body></html>
