Hugging Face's logo

Spaces:
Greats
/
tphoto
Running

App Files Community
Greats commited on
Commit
3b99dfd
·
verified ·
1 Parent(s): 1f6c051

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +443 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Tphoto
3
- emoji: 📚
4
  colorFrom: gray
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: tphoto
3
+ emoji: 🐳
4
  colorFrom: gray
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,443 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </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
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Raleway:wght@300;400;600&display=swap');
11
+
12
+ body {
13
+ font-family: 'Raleway', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ h1, h2, h3 {
18
+ font-family: 'Playfair Display', serif;
19
+ }
20
+
21
+ .hero {
22
+ background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1493863641943-9b68992a8d47?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1958&q=80');
23
+ background-size: cover;
24
+ background-position: center;
25
+ min-height: 100vh;
26
+ }
27
+
28
+ .gallery-item {
29
+ transition: all 0.3s ease;
30
+ }
31
+
32
+ .gallery-item:hover {
33
+ transform: scale(1.03);
34
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
35
+ }
36
+
37
+ .portfolio-filter button.active {
38
+ background-color: #000;
39
+ color: white;
40
+ }
41
+
42
+ .fade-in {
43
+ animation: fadeIn 1s ease-in;
44
+ }
45
+
46
+ @keyframes fadeIn {
47
+ from { opacity: 0; }
48
+ to { opacity: 1; }
49
+ }
50
+
51
+ .testimonial-card {
52
+ background: rgba(255, 255, 255, 0.9);
53
+ backdrop-filter: blur(10px);
54
+ }
55
+ </style>
56
+ </head>
57
+ <body class="bg-gray-50">
58
+ <!-- Навигация -->
59
+ <nav class="fixed w-full bg-white/90 backdrop-blur-md z-50 shadow-sm">
60
+ <div class="container mx-auto px-6 py-4 flex justify-between items-center">
61
+ <a href="#" class="text-2xl font-bold text-gray-800">Татьяна Фото</a>
62
+ <div class="hidden md:flex space-x-8">
63
+ <a href="#about" class="text-gray-700 hover:text-black transition">Обо мне</a>
64
+ <a href="#portfolio" class="text-gray-700 hover:text-black transition">Портфолио</a>
65
+ <a href="#services" class="text-gray-700 hover:text-black transition">Услуги</a>
66
+ <a href="#testimonials" class="text-gray-700 hover:text-black transition">Отзывы</a>
67
+ <a href="#contact" class="text-gray-700 hover:text-black transition">Контакты</a>
68
+ </div>
69
+ <button class="md:hidden text-gray-700">
70
+ <i class="fas fa-bars text-2xl"></i>
71
+ </button>
72
+ </div>
73
+ </nav>
74
+
75
+ <!-- Герой секция -->
76
+ <section class="hero flex items-center justify-center text-center text-white pt-20">
77
+ <div class="container mx-auto px-6 fade-in">
78
+ <h1 class="text-5xl md:text-7xl font-bold mb-6">Татьяна </h1>
79
+ <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Профессиональный фотограф, создающий неповторимые образы и моменты</p>
80
+ <div class="flex justify-center space-x-4">
81
+ <a href="#portfolio" class="bg-white text-black px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition">Портфолио</a>
82
+ <a href="#contact" class="border-2 border-white px-8 py-3 rounded-full font-medium hover:bg-white hover:text-black transition">Забронировать</a>
83
+ </div>
84
+ </div>
85
+ </section>
86
+
87
+ <!-- Обо мне -->
88
+ <section id="about" class="py-20 bg-white">
89
+ <div class="container mx-auto px-6">
90
+ <div class="flex flex-col md:flex-row items-center">
91
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
92
+ <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Татьяна" class="rounded-lg shadow-xl w-full">
93
+ </div>
94
+ <div class="md:w-1/2">
95
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Обо мне</h2>
96
+ <p class="text-gray-600 mb-6">Привет! Я Татьяна - профессиональный фотограф с 8-летним опытом работы. Моя страсть к фотографии началась еще в детстве, и с тех пор я совершенствую свои навыки, чтобы запечатлеть самые важные моменты вашей жизни.</p>
97
+ <p class="text-gray-600 mb-6">Я специализируюсь на портретной, семейной и свадебной фотографии. Моя цель - не просто сделать красивые снимки, а создать историю, передать эмоции и характер каждого человека.</p>
98
+ <div class="flex flex-wrap gap-4">
99
+ <div class="bg-gray-100 px-4 py-2 rounded-full">
100
+ <span class="text-gray-800">📷 Портреты</span>
101
+ </div>
102
+ <div class="bg-gray-100 px-4 py-2 rounded-full">
103
+ <span class="text-gray-800">👨‍👩‍👧‍👦 Семейные фотосессии</span>
104
+ </div>
105
+ <div class="bg-gray-100 px-4 py-2 rounded-full">
106
+ <span class="text-gray-800">💍 Свадьбы</span>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </section>
113
+
114
+ <!-- Портфолио -->
115
+ <section id="portfolio" class="py-20 bg-gray-50">
116
+ <div class="container mx-auto px-6">
117
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center">Портфолио</h2>
118
+
119
+ <div class="portfolio-filter flex justify-center mb-10 space-x-4">
120
+ <button class="filter-btn active px-4 py-2 rounded-full border border-black" data-filter="all">Все работы</button>
121
+ <button class="filter-btn px-4 py-2 rounded-full border border-black" data-filter="portrait">Портреты</button>
122
+ <button class="filter-btn px-4 py-2 rounded-full border border-black" data-filter="family">Семейные</button>
123
+ <button class="filter-btn px-4 py-2 rounded-full border border-black" data-filter="wedding">Свадьбы</button>
124
+ </div>
125
+
126
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
127
+ <!-- Портреты -->
128
+ <div class="gallery-item portrait">
129
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Портрет" class="rounded-lg w-full h-64 object-cover">
130
+ </div>
131
+ <div class="gallery-item portrait">
132
+ <img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Портрет" class="rounded-lg w-full h-64 object-cover">
133
+ </div>
134
+
135
+ <!-- Семейные -->
136
+ <div class="gallery-item family">
137
+ <img src="https://images.unsplash.com/photo-1529333164850-9d77a0fdf1a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1738&q=80" alt="Семья" class="rounded-lg w-full h-64 object-cover">
138
+ </div>
139
+ <div class="gallery-item family">
140
+ <img src="https://images.unsplash.com/photo-1527631746610-bca00a040d60?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Семья" class="rounded-lg w-full h-64 object-cover">
141
+ </div>
142
+
143
+ <!-- Свадьбы -->
144
+ <div class="gallery-item wedding">
145
+ <img src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Свадьба" class="rounded-lg w-full h-64 object-cover">
146
+ </div>
147
+ <div class="gallery-item wedding">
148
+ <img src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1738&q=80" alt="Свадьба" class="rounded-lg w-full h-64 object-cover">
149
+ </div>
150
+ </div>
151
+
152
+ <div class="text-center mt-10">
153
+ <a href="#" class="inline-block border-2 border-black px-8 py-3 rounded-full font-medium hover:bg-black hover:text-white transition">Смотреть все работы</a>
154
+ </div>
155
+ </div>
156
+ </section>
157
+
158
+ <!-- Услуги -->
159
+ <section id="services" class="py-20 bg-white">
160
+ <div class="container mx-auto px-6">
161
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center">Мои услуги</h2>
162
+
163
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
164
+ <div class="bg-gray-50 p-8 rounded-lg shadow-sm hover:shadow-md transition">
165
+ <div class="text-4xl mb-4 text-pink-500">
166
+ <i class="fas fa-user"></i>
167
+ </div>
168
+ <h3 class="text-xl font-bold mb-4">Индивидуальная фотосессия</h3>
169
+ <p class="text-gray-600 mb-4">Профессиональная портретная съемка с индивидуальным подходом к каждому клиенту.</p>
170
+ <p class="font-bold text-lg">От 5 000 ₽</p>
171
+ </div>
172
+
173
+ <div class="bg-gray-50 p-8 rounded-lg shadow-sm hover:shadow-md transition">
174
+ <div class="text-4xl mb-4 text-blue-500">
175
+ <i class="fas fa-users"></i>
176
+ </div>
177
+ <h3 class="text-xl font-bold mb-4">Семейная фотосессия</h3>
178
+ <p class="text-gray-600 mb-4">Теплые и душевные кадры вашей семьи в естественной обстановке или студии.</p>
179
+ <p class="font-bold text-lg">От 8 000 ₽</p>
180
+ </div>
181
+
182
+ <div class="bg-gray-50 p-8 rounded-lg shadow-sm hover:shadow-md transition">
183
+ <div class="text-4xl mb-4 text-purple-500">
184
+ <i class="fas fa-ring"></i>
185
+ </div>
186
+ <h3 class="text-xl font-bold mb-4">Свадебная фотосъемка</h3>
187
+ <p class="text-gray-600 mb-4">Полное сопровождение вашего важного дня с утра до позднего вечера.</p>
188
+ <p class="font-bold text-lg">От 25 000 ₽</p>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </section>
193
+
194
+ <!-- Отзывы -->
195
+ <section id="testimonials" class="py-20 bg-gray-100">
196
+ <div class="container mx-auto px-6">
197
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center">Отзывы клиентов</h2>
198
+
199
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
200
+ <div class="testimonial-card p-8 rounded-lg shadow-sm">
201
+ <div class="flex items-center mb-4">
202
+ <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Анна" class="w-12 h-12 rounded-full mr-4">
203
+ <div>
204
+ <h4 class="font-bold">Анна</h4>
205
+ <div class="flex text-yellow-400">
206
+ <i class="fas fa-star"></i>
207
+ <i class="fas fa-star"></i>
208
+ <i class="fas fa-star"></i>
209
+ <i class="fas fa-star"></i>
210
+ <i class="fas fa-star"></i>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ <p class="text-gray-600">"Татьяна сделала потрясающие фотографии нашей свадьбы! Она уловила все важные моменты, эмоции и создала настоящую историю нашего дня. Очень рекомендую!"</p>
215
+ </div>
216
+
217
+ <div class="testimonial-card p-8 rounded-lg shadow-sm">
218
+ <div class="flex items-center mb-4">
219
+ <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Ирина" class="w-12 h-12 rounded-full mr-4">
220
+ <div>
221
+ <h4 class="font-bold">Ирина</h4>
222
+ <div class="flex text-yellow-400">
223
+ <i class="fas fa-star"></i>
224
+ <i class="fas fa-star"></i>
225
+ <i class="fas fa-star"></i>
226
+ <i class="fas fa-star"></i>
227
+ <i class="fas fa-star"></i>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ <p class="text-gray-600">"Фотосессия с Татьяной - это всегда удовольствие! Она умеет найти подход к детям, создает комфортную атмосферу, а фотографии получаются живыми и эмоциональными."</p>
232
+ </div>
233
+
234
+ <div class="testimonial-card p-8 rounded-lg shadow-sm">
235
+ <div class="flex items-center mb-4">
236
+ <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Дмитрий" class="w-12 h-12 rounded-full mr-4">
237
+ <div>
238
+ <h4 class="font-bold">Дмитрий</h4>
239
+ <div class="flex text-yellow-400">
240
+ <i class="fas fa-star"></i>
241
+ <i class="fas fa-star"></i>
242
+ <i class="fas fa-star"></i>
243
+ <i class="fas fa-star"></i>
244
+ <i class="fas fa-star"></i>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ <p class="text-gray-600">"Заказывал корпоративную фотосессию для компании. Татьяна профессионально организовала процесс, все сотрудники остались довольны. Фотографии получились отличные!"</p>
249
+ </div>
250
+
251
+ <div class="testimonial-card p-8 rounded-lg shadow-sm">
252
+ <div class="flex items-center mb-4">
253
+ <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=776&q=80" alt="Ольга" class="w-12 h-12 rounded-full mr-4">
254
+ <div>
255
+ <h4 class="font-bold">Ольга</h4>
256
+ <div class="flex text-yellow-400">
257
+ <i class="fas fa-star"></i>
258
+ <i class="fas fa-star"></i>
259
+ <i class="fas fa-star"></i>
260
+ <i class="fas fa-star"></i>
261
+ <i class="fas fa-star-half-alt"></i>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ <p class="text-gray-600">"Очень понравилась работа Татьяны! Она сделала прекрасные фотографии для моего портфолио модели. Умеет подчеркнуть достоинства и создать нужный образ."</p>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </section>
270
+
271
+ <!-- Контакты -->
272
+ <section id="contact" class="py-20 bg-white">
273
+ <div class="container mx-auto px-6">
274
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center">Свяжитесь со мной</h2>
275
+
276
+ <div class="flex flex-col md:flex-row">
277
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
278
+ <h3 class="text-xl font-bold mb-4">Контактная информация</h3>
279
+ <p class="text-gray-600 mb-6">Готова ответить на все ваши вопросы и обсудить детали фотосессии.</p>
280
+
281
+ <div class="space-y-4">
282
+ <div class="flex items-center">
283
+ <i class="fas fa-phone-alt text-gray-500 mr-4"></i>
284
+ <span>+7 (123) 456-78-90</span>
285
+ </div>
286
+ <div class="flex items-center">
287
+ <i class="fas fa-envelope text-gray-500 mr-4"></i>
288
+ <span>[email protected]</span>
289
+ </div>
290
+ <div class="flex items-center">
291
+ <i class="fas fa-map-marker-alt text-gray-500 mr-4"></i>
292
+ <span>г. Москва, ул. Фотографов, 15</span>
293
+ </div>
294
+ </div>
295
+
296
+ <div class="mt-8">
297
+ <h4 class="font-bold mb-4">Я в социальных сетях:</h4>
298
+ <div class="flex space-x-4">
299
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200 transition">
300
+ <i class="fab fa-instagram text-gray-700"></i>
301
+ </a>
302
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200 transition">
303
+ <i class="fab fa-vk text-gray-700"></i>
304
+ </a>
305
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200 transition">
306
+ <i class="fab fa-telegram text-gray-700"></i>
307
+ </a>
308
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200 transition">
309
+ <i class="fab fa-whatsapp text-gray-700"></i>
310
+ </a>
311
+ </div>
312
+ </div>
313
+ </div>
314
+
315
+ <div class="md:w-1/2">
316
+ <form class="bg-gray-50 p-8 rounded-lg shadow-sm">
317
+ <div class="mb-4">
318
+ <label for="name" class="block text-gray-700 mb-2">Ваше имя</label>
319
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-black">
320
+ </div>
321
+ <div class="mb-4">
322
+ <label for="email" class="block text-gray-700 mb-2">Email</label>
323
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-black">
324
+ </div>
325
+ <div class="mb-4">
326
+ <label for="phone" class="block text-gray-700 mb-2">Телефон</label>
327
+ <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-black">
328
+ </div>
329
+ <div class="mb-4">
330
+ <label for="service" class="block text-gray-700 mb-2">Услуга</label>
331
+ <select id="service" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-black">
332
+ <option value="">Выберите услугу</option>
333
+ <option value="portrait">Индивидуальная фотосессия</option>
334
+ <option value="family">Семейная фотосессия</option>
335
+ <option value="wedding">Свадебная фотосъемка</option>
336
+ <option value="other">Другое</option>
337
+ </select>
338
+ </div>
339
+ <div class="mb-6">
340
+ <label for="message" class="block text-gray-700 mb-2">Сообщение</label>
341
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-black"></textarea>
342
+ </div>
343
+ <button type="submit" class="w-full bg-black text-white px-6 py-3 rounded-lg hover:bg-gray-800 transition">Отправить</button>
344
+ </form>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </section>
349
+
350
+ <!-- Футер -->
351
+ <footer class="bg-gray-900 text-white py-12">
352
+ <div class="container mx-auto px-6">
353
+ <div class="flex flex-col md:flex-row justify-between">
354
+ <div class="mb-8 md:mb-0">
355
+ <h3 class="text-2xl font-bold mb-4">Татьяна Фото</h3>
356
+ <p class="text-gray-400 max-w-md">Профессиональная фотосъемка для ваших самых важных моментов.</p>
357
+ </div>
358
+ <div class="mb-8 md:mb-0">
359
+ <h4 class="text-lg font-bold mb-4">Быстрые ссылки</h4>
360
+ <ul class="space-y-2">
361
+ <li><a href="#about" class="text-gray-400 hover:text-white transition">Обо мне</a></li>
362
+ <li><a href="#portfolio" class="text-gray-400 hover:text-white transition">Портфолио</a></li>
363
+ <li><a href="#services" class="text-gray-400 hover:text-white transition">Услуги</a></li>
364
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition">Контакты</a></li>
365
+ </ul>
366
+ </div>
367
+ <div>
368
+ <h4 class="text-lg font-bold mb-4">Подписаться</h4>
369
+ <p class="text-gray-400 mb-4">Будьте в курсе новых работ и акций</p>
370
+ <div class="flex">
371
+ <input type="email" placeholder="Ваш email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-900">
372
+ <button class="bg-pink-500 px-4 py-2 rounded-r-lg hover:bg-pink-600 transition">OK</button>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ <div class="border-t border-gray-800 mt-10 pt-6 text-center text-gray-400">
377
+ <p>© 2023 Татьяна Фото. Все права защищены.</p>
378
+ </div>
379
+ </div>
380
+ </footer>
381
+
382
+ <script>
383
+ // Фильтрация галереи
384
+ document.addEventListener('DOMContentLoaded', function() {
385
+ const filterButtons = document.querySelectorAll('.filter-btn');
386
+ const galleryItems = document.querySelectorAll('.gallery-item');
387
+
388
+ filterButtons.forEach(button => {
389
+ button.addEventListener('click', function() {
390
+ // Удаляем активный класс у всех кнопок
391
+ filterButtons.forEach(btn => btn.classList.remove('active'));
392
+ // Добавляем активный класс текущей кнопке
393
+ this.classList.add('active');
394
+
395
+ const filterValue = this.getAttribute('data-filter');
396
+
397
+ galleryItems.forEach(item => {
398
+ if (filterValue === 'all' || item.classList.contains(filterValue)) {
399
+ item.style.display = 'block';
400
+ } else {
401
+ item.style.display = 'none';
402
+ }
403
+ });
404
+ });
405
+ });
406
+
407
+ // Плавная прокрутка для якорных ссылок
408
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
409
+ anchor.addEventListener('click', function(e) {
410
+ e.preventDefault();
411
+
412
+ const targetId = this.getAttribute('href');
413
+ const targetElement = document.querySelector(targetId);
414
+
415
+ if (targetElement) {
416
+ window.scrollTo({
417
+ top: targetElement.offsetTop - 80,
418
+ behavior: 'smooth'
419
+ });
420
+ }
421
+ });
422
+ });
423
+
424
+ // Анимация при прокрутке
425
+ const fadeElements = document.querySelectorAll('.fade-in');
426
+
427
+ const fadeInOnScroll = function() {
428
+ fadeElements.forEach(element => {
429
+ const elementTop = element.getBoundingClientRect().top;
430
+ const windowHeight = window.innerHeight;
431
+
432
+ if (elementTop < windowHeight - 100) {
433
+ element.style.opacity = '1';
434
+ }
435
+ });
436
+ };
437
+
438
+ window.addEventListener('scroll', fadeInOnScroll);
439
+ fadeInOnScroll(); // Вызываем сразу для элементов в видимой области
440
+ });
441
+ </script>
442
+ <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=Greats/tphoto" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
443
+ </html>