https://dteatr.ru/about.html

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        .history-item::before {
13            content: "";
14            position: absolute;
15            left: -1.5rem;
16            top: 0.5rem;
17            width: 1rem;
18            height: 1rem;
19            border-radius: 50%;
20            background-color: #dc2626;
21        }
22        .timeline::before {
23            content: "";
24            position: absolute;
25            left: 0.5rem;
26            top: 0;
27            bottom: 0;
28            width: 2px;
29            background-color: #e5e7eb;
30        }
31    </style>
32</head>
33<body class="bg-gray-100 font-sans">
34    <!-- Navigation -->
35    <nav class="bg-black text-white py-4 px-6 sticky top-0 z-50">
36        <div class="container mx-auto flex justify-between items-center">
37            <a href="index.html" class="text-2xl font-bold">Другой Театр</a>
38            <div class="hidden md:flex space-x-8">
39                <a href="index.html" class="hover:text-red-400">Главная</a>
40                <a href="repertoire.html" class="hover:text-red-400">Репертуар</a>
41                <a href="team.html" class="hover:text-red-400">Труппа</a>
42                <a href="about.html" class="text-red-400 font-bold">О театре</a>
43                <a href="contacts.html" class="hover:text-red-400">Контакты</a>
44            </div>
45            <button class="md:hidden">
46                <i data-feather="menu"></i>
47            </button>
48        </div>
49    </nav>
50
51    <!-- Hero Section -->
52    <section class="bg-gray-900 text-white py-20 px-4">
53        <div class="container mx-auto text-center">
54            <h1 class="text-4xl md:text-6xl font-bold mb-6">О театре</h1>
55            <p class="text-xl md:text-2xl max-w-3xl mx-auto">Уникальное пространство, где традиция встречается с экспериментом</p>
56        </div>
57    </section>
58
59    <!-- About Section -->
60    <section class="py-16 px-4">
61        <div class="container mx-auto max-w-4xl">
62            <div class="bg-white rounded-lg shadow-lg overflow-hidden mb-12">
63                <div class="md:flex">
64                    <div class="md:w-1/2">
65                        <img src="http://static.photos/theater/640x360/301" alt="Здание театра" class="w-full h-full object-cover">
66                    </div>
67                    <div class="p-8 md:w-1/2">
68                        <h2 class="text-2xl font-bold mb-4">Наша философия</h2>
69                        <p class="mb-4">Другой Театр — это пространство для тех, кто ищет в театре не только развлечение, но и пищу для ума, повод для дискуссии, импульс для изменения себя и мира вокруг.</p>
70                        <p>Мы верим, что театр должен удивлять, провоцировать, заставлять зрителя выходить из зоны комфорта. При этом мы чтим традиции и классику, но ищем в них новые смыслы.</p>
71                    </div>
72                </div>
73            </div>
74
75            <h2 class="text-3xl font-bold mb-8 text-center">История театра</h2>
76            <div class="relative pl-8 timeline">
77                <!-- History Item 1 -->
78                <div class="relative mb-8 history-item pl-8">
79                    <h3 class="text-xl font-bold mb-2">1989</h3>
80                    <p class="mb-2">Основание театра группой выпускников ГИТИСа под руководством Олега Табакова. Первый спектакль — "Чайка" по Чехову.</p>
81                    <div class="flex space-x-2">
82                        <span class="bg-gray-200 px-2 py-1 rounded text-sm">Чехов</span>
83                        <span class="bg-gray-200 px-2 py-1 rounded text-sm">Дебют</span>
84                    </div>
85                </div>
86                
87                <!-- History Item 2 -->
88                <div class="relative mb-8 history-item pl-8">
89                    <h3 class="text-xl font-bold mb-2">1995</h3>
90                    <p class="mb-2">Переезд в нынешнее здание на Театральной улице. Первая экспериментальная постановка — "Гамлет" в стиле киберпанк.</p>
91                    <div class="flex space-x-2">

92                        <span class="bg-gray-200 px-2 py-1 rounded text-sm">Шекспир</span>
93                        <span class="bg-gray-200 px-2 py-1 rounded text-sm">Эксперимент</span>
94                    </div>
95                </div>
96                
97                <!-- History Item 3 -->
98                <div class="relative mb-8 history-item pl-8">
99                    <h3 class="text-xl font-bold mb-2">2002</h3>
100                    <p class="mb-2">Назначение Марины Семёновой главным режиссёром. Начало эпохи "интеллектуального театра".</p>
101                    <div class="flex space-x-2">
102                        <span class="bg-gray-200 px-2 py-1 rounded text-sm">Новая эра</span>
103                    </div>
104                </div>
105                
106                <!-- History Item 4 -->
107                <div class="relative mb-8 history-item pl-8">
108                    <h3 class="text-xl font-bold mb-2">2010</h3>
109                    <p class="mb-2">Первая премия "Золотая маска" за спектакль "Вишнёвый сад" в постановке Семёновой.</p>
110                    <div class="flex space-x-2">
111                        <span class="bg-gray-200 px-2 py-1 rounded text-sm">Награда</span>
112                        <span class="bg-gray-200 px-2 py-1 rounded text-sm">Чехов</span>
113                    </div>
114                </div>
115                
116                <!-- History Item 5 -->
117                <div class="relative history-item pl-8">
118                    <h3 class="text-xl font-bold mb-2">2020</h3>
119                    <p class="mb-2">Масштабная реконструкция здания. Открытие новой сцены для экспериментальных постановок.</p>
120                    <div class="flex space-x-2">
121                        <span class="bg-gray-200 px-2 py-1 rounded text-sm">Реконструкция</span>
122                        <span class="bg-gray-200 px-2 py-1 rounded text-sm">Новая сцена</span>
123                    </div>
124                </div>
125            </div>
126        </div>
127    </section>
128
129    <!-- Testimonials -->
130    <section class="py-16 px-4 bg-gray-200">
131        <div class="container mx-auto max-w-4xl">
132            <h2 class="text-3xl font-bold mb-12 text-center">Отзывы прессы</h2>
133            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
134                <!-- Testimonial 1 -->
135                <div class="bg-white p-6 rounded-lg shadow">
136                    <div class="flex items-center mb-4">
137                        <img src="http://static.photos/people/200x200/401" alt="Олег Иванов" class="w-12 h-12 rounded-full mr-4">
138                        <div>
139                            <h4 class="font-bold">Олег Иванов</h4>
140                            <p class="text-gray-600 text-sm">Театральный обозреватель, "Культура"</p>
141                        </div>
142                    </div>
143                    <p>"Другой Театр действительно другой. Здесь не боятся экспериментировать, но делают это с умом и вкусом. Их "Вишнёвый сад" — лучшее, что я видел за последние годы."</p>
144                </div>
145                
146                <!-- Testimonial 2 -->
147                <div class="bg-white p-6 rounded-lg shadow">
148                    <div class="flex items-center mb-4">
149                        <img src="http://static.photos/people/200x200/402" alt="Екатерина Смирнова" class="w-12 h-12 rounded-full mr-4">
150                        <div>
151                            <h4 class="font-bold">Екатерина Смирнова</h4>
152                            <p class="text-gray-600 text-sm">Главный редактор, "Театрал"</p>
153                        </div>
154                    </div>
155                    <p>"В эпоху коммерциализации искусства Другой Театр остаётся островком интеллектуального и душевного театра. Их спектакли заставляют думать и чувствовать."</p>
156                </div>
157            </div>
158        </div>
159    </section>
160
161    <!-- Footer -->
162    <footer class="bg-black text-white py-12 px-4">
163        <div class="container mx-auto">
164            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
165                <div>
166                    <h3 class="text-xl font-bold mb-4">Другой Театр</h3>
167                    <p class="mb-4">Москва, ул. Театральная, 13</p>
168                    <p>© 2023 Все права защищены</p>
169                </div>
170                <div>
171                    <h3 class="text-xl font-bold mb-4">Репертуар</h3>
172                    <ul class="space-y-2">
173                        <li><a href="#" class="hover:text-red-400">Текущие постановки</a></li>
174                        <li><a href="#" class="hover:text-red-400">Архив</a></li>
175                        <li><a href="#" class="hover:text-red-400">Премьеры</a></li>
176                    </ul>
177                </div>
178                <div>
179                    <h3 class="text-xl font-bold mb-4">О театре</h3>
180                    <ul class="space-y-2">
181                        <li><a href="#" class="hover:text-red-400">История</a></li>
182                        <li><a href="#" class="hover:text-red-400">Труппа</a></li>
183                        <li><a href="#" class="hover:text-red-400">Пресса</a></li>
184                    </ul>
185                </div>
186                <div>
187                    <h3 class="text-xl font-bold mb-4">Контакты</h3>
188                    <p class="mb-2"><i data-feather="phone" class="inline mr-2"></i> +7 (495) 123-45-67</p>
189                    <p class="mb-2"><i data-feather="mail" class="inline mr-2"></i> [email protected]</p>
190                    <div class="flex space-x-4 mt-4">
191                        <a href="#"><i data-feather="facebook"></i></a>
192                        <a href="#"><i data-feather="instagram"></i></a>
193                        <a href="#"><i data-feather="youtube"></i></a>
194                    </div>
195                </div>
196            </div>
197        </div>
198    </footer>
199
200    

200<script>
201        feather.replace();
202    </script>

202
203</body>
204</html>