https://dteatr.ru/

1<!DOCTYPE html>
2<html lang="ru">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Другой Театр | Главная</title>
7    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8    

8<script src="https://cdn.tailwindcss.com"></script>

8
9    

9<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>

9
10    

10<script src="https://unpkg.com/feather-icons"></script>

10
11    <style>
12        .hero-image {
13            background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('http://static.photos/theater/1200x630/1');
14            background-size: cover;
15            background-position: center;
16        }
17        .play-card:hover {
18            transform: translateY(-5px);
19            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
20        }
21    </style>
22</head>
23<body class="bg-gray-100 font-sans">
24    <!-- Navigation -->
25    <nav class="bg-black text-white py-4 px-6 sticky top-0 z-50">
26        <div class="container mx-auto flex justify-between items-center">
27            <a href="index.html" class="text-2xl font-bold">Другой Театр</a>
28            <div class="hidden md:flex space-x-8">
29                <a href="index.html" class="hover:text-red-400">Главная</a>
30                <a href="repertoire.html" class="hover:text-red-400">Репертуар</a>
31                <a href="team.html" class="hover:text-red-400">Труппа</a>
32                <a href="about.html" class="hover:text-red-400">О театре</a>
33                <a href="contacts.html" class="hover:text-red-400">Контакты</a>
34            </div>
35            <button class="md:hidden">
36                <i data-feather="menu"></i>
37            </button>
38        </div>
39    </nav>
40
41    <!-- Hero Section -->
42    <section class="hero-image h-96 flex items-center justify-center text-white">
43        <div class="text-center px-4">
44            <h1 class="text-4xl md:text-6xl font-bold mb-4">Другой Театр</h1>
45            <p class="text-xl md:text-2xl mb-8">Где традиция встречается с авангардом</p>
46            <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>
47        </div>
48    </section>
49
50    <!-- Current Plays -->
51    <section class="py-16 px-4">
52        <div class="container mx-auto">
53            <h2 class="text-3xl font-bold text-center mb-12">Сейчас на сцене</h2>
54            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
55                <!-- Play 1 -->
56                <div class="bg-white rounded-lg overflow-hidden shadow-lg play-card transition duration-300">
57                    <img src="http://static.photos/theater/640x360/101" alt="Вишнёвый сад" class="w-full h-64 object-cover">
58                    <div class="p-6">
59                        <h3 class="text-xl font-bold mb-2">Вишнёвый сад</h3>
60                        <p class="text-gray-600 mb-4">А.П. Чехов | Драма</p>
61                        <p class="mb-4">Современное прочтение классики с элементами иммерсивного театра.</p>
62                        <a href="#" class="text-red-600 font-bold hover:text-red-800">Подробнее →</a>
63                    </div>
64                </div>
65                
66                <!-- Play 2 -->
67                <div class="bg-white rounded-lg overflow-hidden shadow-lg play-card transition duration-300">
68                    <img src="http://static.photos/theater/640x360/102" alt="Гамлет. Реквием" class="w-full h-64 object-cover">
69                    <div class="p-6">
70                        <h3 class="text-xl font-bold mb-2">Гамлет. Реквием</h3>
71                        <p class="text-gray-600 mb-4">У. Шекспир | Трагедия</p>
72                        <p class="mb-4">Моноспектакль в постановке Сергея Лосева с оригинальным саундтреком.</p>
73                        <a href="#" class="text-red-600 font-bold hover:text-red-800">Подробнее →</a>
74                    </div>
75                </div>
76                
77                <!-- Play 3 -->
78                <div class="bg-white rounded-lg overflow-hidden shadow-lg play-card transition duration-300">
79                    <img src="http://static.photos/theater/640x360/103" alt="Кармен. Электро" class="w-full h-64 object-cover">
80                    <div class="p-6">
81                        <h3 class="text-xl font-bold mb-2">Кармен. Электро</h3>
82                        <p class="text-gray-600 mb-4">П. Мериме | Мюзикл</p>
83                        <p class="mb-4">Смелая интерпретация классического сюжета с электронной музыкой.</p>
84                        <a href="#" class="text-red-600 font-bold hover:text-red-800">Подробнее →</a>
85                    </div>
86                </div>
87            </div>
88        </div>
89    </section>
90
91    <!-- News Section -->
92    <section class="py-16 px-4 bg-gray-200">
93        <div class="container mx-auto">
94            <h2 class="text-3xl font-bold text-center mb-12">Новости</h2>
95            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
96                <!-- News 1 -->
97                <div class="bg-white p-6 rounded-lg shadow">
98                    <div class="text-sm text-gray-500 mb-2">15 мая 2023</div>
99                    <h3 class="text-xl font-bold mb-3">Премия "Золотая Маска"</h3>
100                    <p class="mb-4">Наш спектакль "Вишнёвый сад" номинирован на премию "Золотая Маска" в двух категориях.</p>
101                    <a href="#" class="text-red-600 font-bold hover:text-red-800">Читать далее →</a>
102                </div>
103                
104                <!-- News 2 -->
105                <div class="bg-white p-6 rounded-lg shadow">
106                    <div class="text-sm text-gray-500 mb-2">28 апреля 2023</div>
107                    <h3 class="text-xl font-bold mb-3">Новый сезон</h3>
108                    <p class="mb-4">Анонсированы премьеры нового сезона. Среди них — "Дядя Ваня" в постановке Марины Семёновой.</p>
109                    <a href="#" class="text-red-600 font-bold hover:text-red-800">Читать далее →</a>
110                </div>
111                
112                <!-- News 3 -->
113                <div class="bg-white p-6 rounded-lg shadow">
114                    <div class="text-sm text-gray-500 mb-2">12 апреля 2023</div>
115                    <h3 class="text-xl font-bold mb-3">Мастер-классы</h3>
116                    <p class="mb-4">Начинаем серию мастер-классов по актёрскому мастерству от ведущих артистов театра.</p>
117                    <a href="#" class="text-red-600 font-bold hover:text-red-800">Читать далее →</a>
118                </div>
119            </div>
120        </div>
121    </section>
122
123    <!-- Footer -->
124    <footer class="bg-black text-white py-12 px-4">
125        <div class="container mx-auto">
126            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
127                <div>
128                    <h3 class="text-xl font-bold mb-4">Другой Театр</h3>
129                    <p class="mb-4">Москва, ул. Театральная, 13</p>
130                    <p>© 2023 Все права защищены</p>
131                </div>
132                <div>
133                    <h3 class="text-xl font-bold mb-4">Репертуар</h3>
134                    <ul class="space-y-2">
135                        <li><a href="#" class="hover:text-red-400">Текущие постановки</a></li>
136                        <li><a href="#" class="hover:text-red-400">Архив</a></li>
137                        <li><a href="#" class="hover:text-red-400">Премьеры</a></li>
138                    </ul>
139                </div>
140                <div>
141                    <h3 class="text-xl font-bold mb-4">О театре</h3>
142                    <ul class="space-y-2">
143                        <li><a href="#" class="hover:text-red-400">История</a></li>
144                        <li><a href="#" class="hover:text-red-400">Труппа</a></li>
145                        <li><a href="#" class="hover:text-red-400">Пресса</a></li>
146                    </ul>
147                </div>
148                <div>
149                    <h3 class="text-xl font-bold mb-4">Контакты</h3>
150                    <p class="mb-2"><i data-feather="phone" class="inline mr-2"></i> +7 (495) 123-45-67</p>
151                    <p class="mb-2"><i data-feather="mail" class="inline mr-2"></i> [email protected]</p>
152                    <div class="flex space-x-4 mt-4">
153                        <a href="#"><i data-feather="facebook"></i></a>
154                        <a href="#"><i data-feather="instagram"></i></a>
155                        <a href="#"><i data-feather="youtube"></i></a>
156                    </div>
157                </div>
158            </div>
159        </div>
160    </footer>
161
162    

162<script>
163        feather.replace();
164    </script>

164
165</body>
166</html>