Hugging Face's logo

Spaces:
cntyaz
/
tokisunshineacademy
Running

App Files Community
cntyaz commited on
Commit
0a776a7
·
verified ·
1 Parent(s): 356be43

First search online for Toki Güneşparkevleri kız anadolu imam hatip lisesi. It is a school. I want you to search schools logo and its colours. then look for what they are all about and give some instagram post samples so that I can share for public attention and to gain popularity of the school.

Browse files
Files changed (2) hide show
  1. README.md +6 -3
  2. index.html +323 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Tokisunshineacademy
3
- emoji: 🔥
4
  colorFrom: pink
5
  colorTo: pink
 
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: TokiSunshineAcademy ✨
 
3
  colorFrom: pink
4
  colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,324 @@
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="tr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Toki Güneşparkevleri Kız AİHL</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <style>
12
+ .gradient-bg {
13
+ background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
14
+ }
15
+ .instagram-post {
16
+ box-shadow: 0 15px 30px rgba(0,0,0,0.1);
17
+ transition: transform 0.3s ease;
18
+ }
19
+ .instagram-post:hover {
20
+ transform: translateY(-5px);
21
+ }
22
+ .like-animation {
23
+ animation: heartBeat 0.6s;
24
+ }
25
+ @keyframes heartBeat {
26
+ 0% { transform: scale(1); }
27
+ 14% { transform: scale(1.3); }
28
+ 28% { transform: scale(1); }
29
+ 42% { transform: scale(1.3); }
30
+ 70% { transform: scale(1); }
31
+ }
32
+ </style>
33
+ </head>
34
+ <body class="bg-gray-50 font-sans">
35
+ <!-- Header -->
36
+ <header class="gradient-bg text-white shadow-lg">
37
+ <div class="container mx-auto px-4 py-6">
38
+ <div class="flex flex-col md:flex-row items-center justify-between">
39
+ <div class="flex items-center mb-4 md:mb-0">
40
+ <div class="bg-white rounded-full p-2 mr-4">
41
+ <img src="http://static.photos/blue/200x200/42" alt="School Logo" class="w-16 h-16 rounded-full object-cover">
42
+ </div>
43
+ <div>
44
+ <h1 class="text-2xl font-bold">Toki Güneşparkevleri</h1>
45
+ <p class="text-blue-100">Kız Anadolu İmam Hatip Lisesi</p>
46
+ </div>
47
+ </div>
48
+ <nav class="flex space-x-6">
49
+ <a href="#" class="hover:text-blue-200 transition flex items-center">
50
+ <i data-feather="home" class="mr-1"></i> Ana Sayfa
51
+ </a>
52
+ <a href="#" class="hover:text-blue-200 transition flex items-center">
53
+ <i data-feather="info" class="mr-1"></i> Hakkımızda
54
+ </a>
55
+ <a href="#" class="hover:text-blue-200 transition flex items-center">
56
+ <i data-feather="instagram" class="mr-1"></i> Instagram
57
+ </a>
58
+ </nav>
59
+ </div>
60
+ </div>
61
+ </header>
62
+
63
+ <!-- Hero Section -->
64
+ <section class="gradient-bg text-white py-16">
65
+ <div class="container mx-auto px-4 text-center">
66
+ <h2 class="text-4xl font-bold mb-4">Modern Eğitim, Köklü Değerler</h2>
67
+ <p class="text-xl max-w-3xl mx-auto mb-8">Akademik başarıyı manevi değerlerle buluşturan öncü bir eğitim kurumu</p>
68
+ <div class="flex justify-center space-x-4">
69
+ <a href="#" class="bg-white text-blue-800 px-6 py-3 rounded-full font-medium hover:bg-blue-100 transition">Kayıt Bilgileri</a>
70
+ <a href="#" class="border border-white px-6 py-3 rounded-full font-medium hover:bg-white hover:text-blue-800 transition">360° Tur</a>
71
+ </div>
72
+ </div>
73
+ </section>
74
+
75
+ <!-- Instagram Posts Section -->
76
+ <section class="py-16 bg-gray-50">
77
+ <div class="container mx-auto px-4">
78
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Okulumuzdan Kareler</h2>
79
+
80
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
81
+ <!-- Post 1 -->
82
+ <div class="bg-white rounded-xl overflow-hidden instagram-post">
83
+ <div class="relative">
84
+ <img src="http://static.photos/education/640x360/1" alt="School Activity" class="w-full h-64 object-cover">
85
+ <div class="absolute top-4 right-4 bg-white p-2 rounded-full shadow-md">
86
+ <i data-feather="heart" class="text-red-500 cursor-pointer" onclick="animateLike(this)"></i>
87
+ </div>
88
+ </div>
89
+ <div class="p-6">
90
+ <div class="flex items-center mb-4">
91
+ <img src="http://static.photos/people/200x200/1" alt="Profile" class="w-10 h-10 rounded-full mr-3">
92
+ <span class="font-medium">Okul Yönetimi</span>
93
+ </div>
94
+ <p class="text-gray-700 mb-4">Mezuniyet törenimizden bir kare. Gurur dolu anlar yaşadık! #Mezuniyet2023 #TokiGüneşparkevleri</p>
95
+ <div class="flex justify-between text-gray-500 text-sm">
96
+ <span>3 gün önce</span>
97
+ <span>247 beğeni</span>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Post 2 -->
103
+ <div class="bg-white rounded-xl overflow-hidden instagram-post">
104
+ <div class="relative">
105
+ <img src="http://static.photos/education/640x360/2" alt="Science Fair" class="w-full h-64 object-cover">
106
+ <div class="absolute top-4 right-4 bg-white p-2 rounded-full shadow-md">
107
+ <i data-feather="heart" class="text-gray-400 cursor-pointer" onclick="animateLike(this)"></i>
108
+ </div>
109
+ </div>
110
+ <div class="p-6">
111
+ <div class="flex items-center mb-4">
112
+ <img src="http://static.photos/people/200x200/2" alt="Profile" class="w-10 h-10 rounded-full mr-3">
113
+ <span class="font-medium">Fen Bilimleri</span>
114
+ </div>
115
+ <p class="text-gray-700 mb-4">Bilim fuarımızda öğrencilerimiz harika projeler sergiledi. Genç bilim insanlarımızla gurur duyuyoruz! #BilimFuarı #Başarı</p>
116
+ <div class="flex justify-between text-gray-500 text-sm">
117
+ <span>1 hafta önce</span>
118
+ <span>189 beğeni</span>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- Post 3 -->
124
+ <div class="bg-white rounded-xl overflow-hidden instagram-post">
125
+ <div class="relative">
126
+ <img src="http://static.photos/education/640x360/3" alt="Quran Class" class="w-full h-64 object-cover">
127
+ <div class="absolute top-4 right-4 bg-white p-2 rounded-full shadow-md">
128
+ <i data-feather="heart" class="text-gray-400 cursor-pointer" onclick="animateLike(this)"></i>
129
+ </div>
130
+ </div>
131
+ <div class="p-6">
132
+ <div class="flex items-center mb-4">
133
+ <img src="http://static.photos/people/200x200/3" alt="Profile" class="w-10 h-10 rounded-full mr-3">
134
+ <span class="font-medium">Din Öğretimi</span>
135
+ </div>
136
+ <p class="text-gray-700 mb-4">Hafızlık eğitimi alan öğrencilerimizle gurur duyuyoruz. İlim ve irfan yolunda emin adımlarla ilerliyorlar. #Hafızlık #İmamHatip</p>
137
+ <div class="flex justify-between text-gray-500 text-sm">
138
+ <span>2 hafta önce</span>
139
+ <span>312 beğeni</span>
140
+ </div>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- Post 4 -->
145
+ <div class="bg-white rounded-xl overflow-hidden instagram-post">
146
+ <div class="relative">
147
+ <img src="http://static.photos/education/640x360/4" alt="Sports Day" class="w-full h-64 object-cover">
148
+ <div class="absolute top-4 right-4 bg-white p-2 rounded-full shadow-md">
149
+ <i data-feather="heart" class="text-gray-400 cursor-pointer" onclick="animateLike(this)"></i>
150
+ </div>
151
+ </div>
152
+ <div class="p-6">
153
+ <div class="flex items-center mb-4">
154
+ <img src="http://static.photos/people/200x200/4" alt="Profile" class="w-10 h-10 rounded-full mr-3">
155
+ <span class="font-medium">Beden Eğitimi</span>
156
+ </div>
157
+ <p class="text-gray-700 mb-4">Okul spor şenliğimizde öğrencilerimiz hem eğlendi hem yarıştı. Sporun birleştirici gücü bir kez daha kanıtlandı! #SporŞenliği #TakımRuhu</p>
158
+ <div class="flex justify-between text-gray-500 text-sm">
159
+ <span>3 hafta önce</span>
160
+ <span>156 beğeni</span>
161
+ </div>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Post 5 -->
166
+ <div class="bg-white rounded-xl overflow-hidden instagram-post">
167
+ <div class="relative">
168
+ <img src="http://static.photos/education/640x360/5" alt="Library" class="w-full h-64 object-cover">
169
+ <div class="absolute top-4 right-4 bg-white p-2 rounded-full shadow-md">
170
+ <i data-feather="heart" class="text-gray-400 cursor-pointer" onclick="animateLike(this)"></i>
171
+ </div>
172
+ </div>
173
+ <div class="p-6">
174
+ <div class="flex items-center mb-4">
175
+ <img src="http://static.photos/people/200x200/5" alt="Profile" class="w-10 h-10 rounded-full mr-3">
176
+ <span class="font-medium">Kütüphane</span>
177
+ </div>
178
+ <p class="text-gray-700 mb-4">Yeni kütüphanemiz öğrencilerimizin hizmetinde! 5000'den fazla kitap ve modern çalışma alanlarıyla bilgiye ulaşmak artık daha kolay. #Kitap #OkumaKültürü</p>
179
+ <div class="flex justify-between text-gray-500 text-sm">
180
+ <span>1 ay önce</span>
181
+ <span>278 beğeni</span>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Post 6 -->
187
+ <div class="bg-white rounded-xl overflow-hidden instagram-post">
188
+ <div class="relative">
189
+ <img src="http://static.photos/education/640x360/6" alt="Graduation" class="w-full h-64 object-cover">
190
+ <div class="absolute top-4 right-4 bg-white p-2 rounded-full shadow-md">
191
+ <i data-feather="heart" class="text-gray-400 cursor-pointer" onclick="animateLike(this)"></i>
192
+ </div>
193
+ </div>
194
+ <div class="p-6">
195
+ <div class="flex items-center mb-4">
196
+ <img src="http://static.photos/people/200x200/6" alt="Profile" class="w-10 h-10 rounded-full mr-3">
197
+ <span class="font-medium">Mezunlar</span>
198
+ </div>
199
+ <p class="text-gray-700 mb-4">Mezunlar buluşmamızdan hatıra kare. Yıllar geçse de Toki Güneşparkevleri ruhu hiç değişmiyor! #MezunlarBuluşması #Aile</p>
200
+ <div class="flex justify-between text-gray-500 text-sm">
201
+ <span>2 ay önce</span>
202
+ <span>423 beğeni</span>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ <div class="text-center mt-12">
209
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-blue-600 text-blue-600 rounded-full font-medium hover:bg-blue-50 transition">
210
+ <i data-feather="instagram" class="mr-2"></i> Daha Fazlası İçin Instagram'ımızı Takip Edin
211
+ </a>
212
+ </div>
213
+ </div>
214
+ </section>
215
+
216
+ <!-- Features Section -->
217
+ <section class="py-16 bg-white">
218
+ <div class="container mx-auto px-4">
219
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Neden Toki Güneşparkevleri?</h2>
220
+
221
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
222
+ <div class="text-center px-6">
223
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
224
+ <i data-feather="award" class="text-blue-600 w-8 h-8"></i>
225
+ </div>
226
+ <h3 class="text-xl font-bold mb-3">Akademik Başarı</h3>
227
+ <p class="text-gray-600">Yüksek akademik standartlar ve üniversiteye hazırlık programlarıyla öne çıkıyoruz.</p>
228
+ </div>
229
+
230
+ <div class="text-center px-6">
231
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
232
+ <i data-feather="book-open" class="text-blue-600 w-8 h-8"></i>
233
+ </div>
234
+ <h3 class="text-xl font-bold mb-3">Dini Eğitim</h3>
235
+ <p class="text-gray-600">Kur'an-ı Kerim, Siyer ve İslami ilimlerde uzman eğitimcilerle manevi gelişim.</p>
236
+ </div>
237
+
238
+ <div class="text-center px-6">
239
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
240
+ <i data-feather="users" class="text-blue-600 w-8 h-8"></i>
241
+ </div>
242
+ <h3 class="text-xl font-bold mb-3">Sosyal Etkinlikler</h3>
243
+ <p class="text-gray-600">Spor, sanat ve kültürel faaliyetlerle öğrencilerimizin çok yönlü gelişimini destekliyoruz.</p>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ </section>
248
+
249
+ <!-- Footer -->
250
+ <footer class="gradient-bg text-white pt-12 pb-6">
251
+ <div class="container mx-auto px-4">
252
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
253
+ <div>
254
+ <h3 class="text-xl font-bold mb-4">Toki Güneşparkevleri</h3>
255
+ <p class="text-blue-100">Kız Anadolu İmam Hatip Lisesi olarak modern eğitim anlayışıyla geleneksel değerleri buluşturuyoruz.</p>
256
+ </div>
257
+ <div>
258
+ <h4 class="font-bold mb-4">Hızlı Linkler</h4>
259
+ <ul class="space-y-2">
260
+ <li><a href="#" class="text-blue-100 hover:text-white transition">Ana Sayfa</a></li>
261
+ <li><a href="#" class="text-blue-100 hover:text-white transition">Hakkımızda</a></li>
262
+ <li><a href="#" class="text-blue-100 hover:text-white transition">Eğitim Programları</a></li>
263
+ <li><a href="#" class="text-blue-100 hover:text-white transition">İletişim</a></li>
264
+ </ul>
265
+ </div>
266
+ <div>
267
+ <h4 class="font-bold mb-4">İletişim</h4>
268
+ <ul class="space-y-2">
269
+ <li class="flex items-center">
270
+ <i data-feather="map-pin" class="mr-2 w-4 h-4"></i>
271
+ <span class="text-blue-100">Güneşparkevleri, Istanbul</span>
272
+ </li>
273
+ <li class="flex items-center">
274
+ <i data-feather="phone" class="mr-2 w-4 h-4"></i>
275
+ <span class="text-blue-100">0 (212) 123 45 67</span>
276
+ </li>
277
+ <li class="flex items-center">
278
+ <i data-feather="mail" class="mr-2 w-4 h-4"></i>
279
+ <span class="text-blue-100">[email protected]</span>
280
+ </li>
281
+ </ul>
282
+ </div>
283
+ <div>
284
+ <h4 class="font-bold mb-4">Sosyal Medya</h4>
285
+ <div class="flex space-x-4">
286
+ <a href="#" class="bg-white text-blue-800 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-100 transition">
287
+ <i data-feather="instagram"></i>
288
+ </a>
289
+ <a href="#" class="bg-white text-blue-800 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-100 transition">
290
+ <i data-feather="facebook"></i>
291
+ </a>
292
+ <a href="#" class="bg-white text-blue-800 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-100 transition">
293
+ <i data-feather="twitter"></i>
294
+ </a>
295
+ <a href="#" class="bg-white text-blue-800 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-100 transition">
296
+ <i data-feather="youtube"></i>
297
+ </a>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ <div class="border-t border-blue-400 pt-6 text-center text-blue-100">
302
+ <p>© 2023 Toki Güneşparkevleri Kız Anadolu İmam Hatip Lisesi. Tüm hakları saklıdır.</p>
303
+ </div>
304
+ </div>
305
+ </footer>
306
+
307
+ <script>
308
+ feather.replace();
309
+
310
+ function animateLike(element) {
311
+ if (element.classList.contains('text-red-500')) {
312
+ element.classList.remove('text-red-500');
313
+ element.classList.add('text-gray-400');
314
+ } else {
315
+ element.classList.remove('text-gray-400');
316
+ element.classList.add('text-red-500', 'like-animation');
317
+ setTimeout(() => {
318
+ element.classList.remove('like-animation');
319
+ }, 600);
320
+ }
321
+ }
322
+ </script>
323
+ </body>
324
  </html>