Hugging Face's logo

Spaces:
josephic9617
/
django-learning
Running

App Files Community
josephic9617 commited on
Commit
2a7aa55
·
verified ·
1 Parent(s): bac13bf

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +947 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Django Learning
3
- emoji: 📚
4
- colorFrom: purple
5
  colorTo: blue
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: django-learning
3
+ emoji: 🐳
4
+ colorFrom: blue
5
  colorTo: blue
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,947 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Django Learning Hub | Modern Web Development</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary-color: #0c4b33;
11
+ --secondary-color: #1a936f;
12
+ --accent-color: #88d498;
13
+ --light-color: #f8f9fa;
14
+ --dark-color: #212529;
15
+ --text-color: #333;
16
+ --highlight-color: #ff6b6b;
17
+ }
18
+
19
+ * {
20
+ margin: 0;
21
+ padding: 0;
22
+ box-sizing: border-box;
23
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
24
+ }
25
+
26
+ body {
27
+ background-color: var(--light-color);
28
+ color: var(--text-color);
29
+ line-height: 1.6;
30
+ }
31
+
32
+ .container {
33
+ max-width: 1200px;
34
+ margin: 0 auto;
35
+ padding: 0 20px;
36
+ }
37
+
38
+ header {
39
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
40
+ color: white;
41
+ padding: 1rem 0;
42
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
43
+ position: sticky;
44
+ top: 0;
45
+ z-index: 100;
46
+ }
47
+
48
+ .navbar {
49
+ display: flex;
50
+ justify-content: space-between;
51
+ align-items: center;
52
+ }
53
+
54
+ .logo {
55
+ font-size: 1.8rem;
56
+ font-weight: 700;
57
+ display: flex;
58
+ align-items: center;
59
+ }
60
+
61
+ .logo i {
62
+ margin-right: 10px;
63
+ color: var(--accent-color);
64
+ }
65
+
66
+ .nav-links {
67
+ display: flex;
68
+ list-style: none;
69
+ }
70
+
71
+ .nav-links li {
72
+ margin-left: 2rem;
73
+ }
74
+
75
+ .nav-links a {
76
+ color: white;
77
+ text-decoration: none;
78
+ font-weight: 500;
79
+ transition: all 0.3s ease;
80
+ position: relative;
81
+ padding: 0.5rem 0;
82
+ }
83
+
84
+ .nav-links a:after {
85
+ content: '';
86
+ position: absolute;
87
+ width: 0;
88
+ height: 2px;
89
+ background: var(--accent-color);
90
+ bottom: 0;
91
+ left: 0;
92
+ transition: width 0.3s ease;
93
+ }
94
+
95
+ .nav-links a:hover:after {
96
+ width: 100%;
97
+ }
98
+
99
+ .cta-button {
100
+ background-color: var(--accent-color);
101
+ color: var(--dark-color);
102
+ padding: 0.6rem 1.2rem;
103
+ border-radius: 50px;
104
+ font-weight: 600;
105
+ transition: all 0.3s ease;
106
+ }
107
+
108
+ .cta-button:hover {
109
+ transform: translateY(-2px);
110
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
111
+ background-color: white;
112
+ }
113
+
114
+ .hero {
115
+ padding: 5rem 0;
116
+ background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
117
+ url('https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') no-repeat center center/cover;
118
+ color: white;
119
+ text-align: center;
120
+ }
121
+
122
+ .hero h1 {
123
+ font-size: 3.5rem;
124
+ margin-bottom: 1rem;
125
+ line-height: 1.2;
126
+ }
127
+
128
+ .hero p {
129
+ font-size: 1.2rem;
130
+ max-width: 700px;
131
+ margin: 0 auto 2rem;
132
+ opacity: 0.9;
133
+ }
134
+
135
+ .hero-buttons {
136
+ display: flex;
137
+ justify-content: center;
138
+ gap: 1rem;
139
+ }
140
+
141
+ .btn {
142
+ padding: 0.8rem 1.8rem;
143
+ border-radius: 50px;
144
+ font-weight: 600;
145
+ text-decoration: none;
146
+ transition: all 0.3s ease;
147
+ }
148
+
149
+ .btn-primary {
150
+ background-color: var(--accent-color);
151
+ color: var(--dark-color);
152
+ }
153
+
154
+ .btn-primary:hover {
155
+ background-color: white;
156
+ transform: translateY(-3px);
157
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
158
+ }
159
+
160
+ .btn-secondary {
161
+ background-color: transparent;
162
+ color: white;
163
+ border: 2px solid white;
164
+ }
165
+
166
+ .btn-secondary:hover {
167
+ background-color: rgba(255, 255, 255, 0.1);
168
+ transform: translateY(-3px);
169
+ }
170
+
171
+ .features {
172
+ padding: 5rem 0;
173
+ background-color: white;
174
+ }
175
+
176
+ .section-title {
177
+ text-align: center;
178
+ margin-bottom: 3rem;
179
+ }
180
+
181
+ .section-title h2 {
182
+ font-size: 2.5rem;
183
+ color: var(--primary-color);
184
+ margin-bottom: 1rem;
185
+ position: relative;
186
+ display: inline-block;
187
+ }
188
+
189
+ .section-title h2:after {
190
+ content: '';
191
+ position: absolute;
192
+ width: 60%;
193
+ height: 4px;
194
+ background: var(--accent-color);
195
+ bottom: -10px;
196
+ left: 20%;
197
+ border-radius: 2px;
198
+ }
199
+
200
+ .section-title p {
201
+ color: var(--text-color);
202
+ max-width: 700px;
203
+ margin: 0 auto;
204
+ opacity: 0.8;
205
+ }
206
+
207
+ .features-grid {
208
+ display: grid;
209
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
210
+ gap: 2rem;
211
+ }
212
+
213
+ .feature-card {
214
+ background-color: white;
215
+ border-radius: 10px;
216
+ padding: 2rem;
217
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
218
+ transition: all 0.3s ease;
219
+ text-align: center;
220
+ }
221
+
222
+ .feature-card:hover {
223
+ transform: translateY(-10px);
224
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
225
+ }
226
+
227
+ .feature-icon {
228
+ font-size: 2.5rem;
229
+ color: var(--secondary-color);
230
+ margin-bottom: 1.5rem;
231
+ display: inline-block;
232
+ }
233
+
234
+ .feature-card h3 {
235
+ font-size: 1.4rem;
236
+ margin-bottom: 1rem;
237
+ color: var(--primary-color);
238
+ }
239
+
240
+ .feature-card p {
241
+ color: var(--text-color);
242
+ opacity: 0.8;
243
+ }
244
+
245
+ .courses {
246
+ padding: 5rem 0;
247
+ background-color: var(--light-color);
248
+ }
249
+
250
+ .course-tabs {
251
+ display: flex;
252
+ justify-content: center;
253
+ margin-bottom: 3rem;
254
+ flex-wrap: wrap;
255
+ }
256
+
257
+ .tab-btn {
258
+ padding: 0.6rem 1.8rem;
259
+ background: none;
260
+ border: none;
261
+ font-size: 1rem;
262
+ font-weight: 600;
263
+ color: var(--text-color);
264
+ cursor: pointer;
265
+ position: relative;
266
+ transition: all 0.3s ease;
267
+ }
268
+
269
+ .tab-btn.active {
270
+ color: var(--primary-color);
271
+ }
272
+
273
+ .tab-btn.active:after {
274
+ content: '';
275
+ position: absolute;
276
+ width: 50%;
277
+ height: 3px;
278
+ background: var(--accent-color);
279
+ bottom: -5px;
280
+ left: 25%;
281
+ }
282
+
283
+ .courses-grid {
284
+ display: grid;
285
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
286
+ gap: 2rem;
287
+ }
288
+
289
+ .course-card {
290
+ background-color: white;
291
+ border-radius: 10px;
292
+ overflow: hidden;
293
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
294
+ transition: all 0.3s ease;
295
+ }
296
+
297
+ .course-card:hover {
298
+ transform: translateY(-10px);
299
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
300
+ }
301
+
302
+ .course-image {
303
+ height: 180px;
304
+ overflow: hidden;
305
+ }
306
+
307
+ .course-image img {
308
+ width: 100%;
309
+ height: 100%;
310
+ object-fit: cover;
311
+ transition: transform 0.5s ease;
312
+ }
313
+
314
+ .course-card:hover .course-image img {
315
+ transform: scale(1.1);
316
+ }
317
+
318
+ .course-info {
319
+ padding: 1.5rem;
320
+ }
321
+
322
+ .course-category {
323
+ display: inline-block;
324
+ background-color: var(--accent-color);
325
+ color: var(--dark-color);
326
+ padding: 0.3rem 0.8rem;
327
+ border-radius: 50px;
328
+ font-size: 0.8rem;
329
+ font-weight: 600;
330
+ margin-bottom: 0.8rem;
331
+ }
332
+
333
+ .course-title {
334
+ font-size: 1.2rem;
335
+ margin-bottom: 1rem;
336
+ color: var(--primary-color);
337
+ }
338
+
339
+ .course-meta {
340
+ display: flex;
341
+ justify-content: space-between;
342
+ color: var(--text-color);
343
+ font-size: 0.9rem;
344
+ opacity: 0.8;
345
+ margin-bottom: 1.5rem;
346
+ }
347
+
348
+ .course-price {
349
+ font-size: 1.2rem;
350
+ font-weight: 700;
351
+ color: var(--secondary-color);
352
+ }
353
+
354
+ .testimonials {
355
+ padding: 5rem 0;
356
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
357
+ color: white;
358
+ }
359
+
360
+ .testimonials .section-title h2 {
361
+ color: white;
362
+ }
363
+
364
+ .testimonials .section-title p {
365
+ color: rgba(255, 255, 255, 0.8);
366
+ }
367
+
368
+ .testimonials-grid {
369
+ display: grid;
370
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
371
+ gap: 2rem;
372
+ }
373
+
374
+ .testimonial-card {
375
+ background-color: rgba(255, 255, 255, 0.1);
376
+ border-radius: 10px;
377
+ padding: 2rem;
378
+ transition: all 0.3s ease;
379
+ position: relative;
380
+ }
381
+
382
+ .testimonial-card:hover {
383
+ background-color: rgba(255, 255, 255, 0.15);
384
+ transform: translateY(-5px);
385
+ }
386
+
387
+ .testimonial-quote {
388
+ font-style: italic;
389
+ margin-bottom: 1.5rem;
390
+ position: relative;
391
+ }
392
+
393
+ .testimonial-quote:before {
394
+ content: '\201C';
395
+ font-size: 4rem;
396
+ position: absolute;
397
+ top: -30px;
398
+ left: -15px;
399
+ opacity: 0.3;
400
+ }
401
+
402
+ .testimonial-author {
403
+ display: flex;
404
+ align-items: center;
405
+ }
406
+
407
+ .author-avatar {
408
+ width: 50px;
409
+ height: 50px;
410
+ border-radius: 50%;
411
+ overflow: hidden;
412
+ margin-right: 1rem;
413
+ }
414
+
415
+ .author-avatar img {
416
+ width: 100%;
417
+ height: 100%;
418
+ object-fit: cover;
419
+ }
420
+
421
+ .author-info h4 {
422
+ font-weight: 600;
423
+ margin-bottom: 0.2rem;
424
+ }
425
+
426
+ .author-info p {
427
+ font-size: 0.8rem;
428
+ opacity: 0.8;
429
+ }
430
+
431
+ .newsletter {
432
+ padding: 5rem 0;
433
+ background-color: white;
434
+ text-align: center;
435
+ }
436
+
437
+ .newsletter-form {
438
+ max-width: 600px;
439
+ margin: 0 auto;
440
+ display: flex;
441
+ gap: 1rem;
442
+ margin-top: 2rem;
443
+ }
444
+
445
+ .newsletter-input {
446
+ flex: 1;
447
+ padding: 0.8rem 1.5rem;
448
+ border: 2px solid #ddd;
449
+ border-radius: 50px;
450
+ font-size: 1rem;
451
+ outline: none;
452
+ transition: all 0.3s ease;
453
+ }
454
+
455
+ .newsletter-input:focus {
456
+ border-color: var(--accent-color);
457
+ }
458
+
459
+ footer {
460
+ background-color: var(--dark-color);
461
+ color: white;
462
+ padding: 3rem 0 1.5rem;
463
+ }
464
+
465
+ .footer-content {
466
+ display: grid;
467
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
468
+ gap: 2rem;
469
+ margin-bottom: 3rem;
470
+ }
471
+
472
+ .footer-column h3 {
473
+ font-size: 1.2rem;
474
+ margin-bottom: 1.5rem;
475
+ color: var(--accent-color);
476
+ }
477
+
478
+ .footer-links {
479
+ list-style: none;
480
+ }
481
+
482
+ .footer-links li {
483
+ margin-bottom: 0.8rem;
484
+ }
485
+
486
+ .footer-links a {
487
+ color: rgba(255, 255, 255, 0.7);
488
+ text-decoration: none;
489
+ transition: all 0.3s ease;
490
+ }
491
+
492
+ .footer-links a:hover {
493
+ color: var(--accent-color);
494
+ padding-left: 5px;
495
+ }
496
+
497
+ .social-links {
498
+ display: flex;
499
+ gap: 1rem;
500
+ }
501
+
502
+ .social-links a {
503
+ color: white;
504
+ background-color: rgba(255, 255, 255, 0.1);
505
+ width: 40px;
506
+ height: 40px;
507
+ border-radius: 50%;
508
+ display: flex;
509
+ align-items: center;
510
+ justify-content: center;
511
+ transition: all 0.3s ease;
512
+ }
513
+
514
+ .social-links a:hover {
515
+ background-color: var(--accent-color);
516
+ transform: translateY(-3px);
517
+ }
518
+
519
+ .footer-bottom {
520
+ text-align: center;
521
+ padding-top: 1.5rem;
522
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
523
+ color: rgba(255, 255, 255, 0.5);
524
+ font-size: 0.9rem;
525
+ }
526
+
527
+ @media (max-width: 768px) {
528
+ .hero h1 {
529
+ font-size: 2.5rem;
530
+ }
531
+
532
+ .navbar {
533
+ flex-direction: column;
534
+ }
535
+
536
+ .logo {
537
+ margin-bottom: 1rem;
538
+ }
539
+
540
+ .nav-links {
541
+ flex-direction: column;
542
+ align-items: center;
543
+ width: 100%;
544
+ }
545
+
546
+ .nav-links li {
547
+ margin: 0.5rem 0;
548
+ }
549
+
550
+ .hero-buttons {
551
+ flex-direction: column;
552
+ gap: 1rem;
553
+ }
554
+
555
+ .newsletter-form {
556
+ flex-direction: column;
557
+ }
558
+ }
559
+
560
+ /* Animation classes */
561
+ .fade-in {
562
+ animation: fadeIn 1s ease-in;
563
+ }
564
+
565
+ .slide-up {
566
+ animation: slideUp 0.8s ease-out;
567
+ }
568
+
569
+ @keyframes fadeIn {
570
+ from { opacity: 0; }
571
+ to { opacity: 1; }
572
+ }
573
+
574
+ @keyframes slideUp {
575
+ from {
576
+ opacity: 0;
577
+ transform: translateY(30px);
578
+ }
579
+ to {
580
+ opacity: 1;
581
+ transform: translateY(0);
582
+ }
583
+ }
584
+ </style>
585
+ </head>
586
+ <body>
587
+ <header>
588
+ <div class="container">
589
+ <nav class="navbar">
590
+ <div class="logo">
591
+ <i class="fas fa-code"></i>
592
+ <span>DjangoHub</span>
593
+ </div>
594
+ <ul class="nav-links">
595
+ <li><a href="#features">Features</a></li>
596
+ <li><a href="#courses">Courses</a></li>
597
+ <li><a href="#testimonials">Testimonials</a></li>
598
+ <li><a href="#newsletter">Newsletter</a></li>
599
+ <li><a href="#" class="cta-button">Join Now</a></li>
600
+ </ul>
601
+ </nav>
602
+ </div>
603
+ </header>
604
+
605
+ <section class="hero">
606
+ <div class="container">
607
+ <h1 class="fade-in">Master Django Web Development</h1>
608
+ <p class="fade-in">Learn to build secure, scalable web applications with Django - the Python framework that powers Instagram, Pinterest and NASA.</p>
609
+ <div class="hero-buttons">
610
+ <a href="#courses" class="btn btn-primary slide-up">Start Learning</a>
611
+ <a href="#features" class="btn btn-secondary slide-up">Explore Features</a>
612
+ </div>
613
+ </div>
614
+ </section>
615
+
616
+ <section class="features" id="features">
617
+ <div class="container">
618
+ <div class="section-title">
619
+ <h2>Why Learn Django?</h2>
620
+ <p>Django makes it easier to build better web apps more quickly and with less code.</p>
621
+ </div>
622
+ <div class="features-grid">
623
+ <div class="feature-card slide-up">
624
+ <div class="feature-icon">
625
+ <i class="fas fa-shield-alt"></i>
626
+ </div>
627
+ <h3>Batteries Included</h3>
628
+ <p>Django comes with authentication, admin, ORM, templates and more - everything you need to build a complete web application.</p>
629
+ </div>
630
+ <div class="feature-card slide-up" style="animation-delay: 0.2s;">
631
+ <div class="feature-icon">
632
+ <i class="fas fa-rocket"></i>
633
+ </div>
634
+ <h3>Rapid Development</h3>
635
+ <p>The framework takes care of much of the hassle of web development, so you can focus on writing your app without reinventing the wheel.</p>
636
+ </div>
637
+ <div class="feature-card slide-up" style="animation-delay: 0.4s;">
638
+ <div class="feature-icon">
639
+ <i class="fas fa-server"></i>
640
+ </div>
641
+ <h3>Scalable & Secure</h3>
642
+ <p>Used by high-traffic sites like Instagram and Pinterest, Django helps developers avoid many common security mistakes.</p>
643
+ </div>
644
+ </div>
645
+ </div>
646
+ </section>
647
+
648
+ <section class="courses" id="courses">
649
+ <div class="container">
650
+ <div class="section-title">
651
+ <h2>Our Django Courses</h2>
652
+ <p>Choose from our comprehensive curriculum designed for all skill levels.</p>
653
+ </div>
654
+ <div class="course-tabs">
655
+ <button class="tab-btn active" data-category="all">All Courses</button>
656
+ <button class="tab-btn" data-category="beginner">Beginners</button>
657
+ <button class="tab-btn" data-category="intermediate">Intermediate</button>
658
+ <button class="tab-btn" data-category="advanced">Advanced</button>
659
+ </div>
660
+ <div class="courses-grid">
661
+ <div class="course-card" data-category="beginner">
662
+ <div class="course-image">
663
+ <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Django Basics">
664
+ </div>
665
+ <div class="course-info">
666
+ <span class="course-category">Beginner</span>
667
+ <h3 class="course-title">Django Fundamentals</h3>
668
+ <div class="course-meta">
669
+ <span><i class="far fa-clock"></i> 12 Hours</span>
670
+ <span><i class="far fa-user"></i> 45 Lessons</span>
671
+ </div>
672
+ <div class="course-price">$49.99</div>
673
+ </div>
674
+ </div>
675
+ <div class="course-card" data-category="intermediate">
676
+ <div class="course-image">
677
+ <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Django ORM">
678
+ </div>
679
+ <div class="course-info">
680
+ <span class="course-category">Intermediate</span>
681
+ <h3 class="course-title">Mastering Django ORM</h3>
682
+ <div class="course-meta">
683
+ <span><i class="far fa-clock"></i> 8 Hours</span>
684
+ <span><i class="far fa-user"></i> 32 Lessons</span>
685
+ </div>
686
+ <div class="course-price">$59.99</div>
687
+ </div>
688
+ </div>
689
+ <div class="course-card" data-category="advanced">
690
+ <div class="course-image">
691
+ <img src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Django REST">
692
+ </div>
693
+ <div class="course-info">
694
+ <span class="course-category">Advanced</span>
695
+ <h3 class="course-title">Django REST Framework</h3>
696
+ <div class="course-meta">
697
+ <span><i class="far fa-clock"></i> 15 Hours</span>
698
+ <span><i class="far fa-user"></i> 50 Lessons</span>
699
+ </div>
700
+ <div class="course-price">$79.99</div>
701
+ </div>
702
+ </div>
703
+ <div class="course-card" data-category="beginner">
704
+ <div class="course-image">
705
+ <img src="https://images.unsplash.com/photo-1552688468-d87e6f7a58f2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Django Templates">
706
+ </div>
707
+ <div class="course-info">
708
+ <span class="course-category">Beginner</span>
709
+ <h3 class="course-title">Django Templates Masterclass</h3>
710
+ <div class="course-meta">
711
+ <span><i class="far fa-clock"></i> 6 Hours</span>
712
+ <span><i class="far fa-user"></i> 24 Lessons</span>
713
+ </div>
714
+ <div class="course-price">$29.99</div>
715
+ </div>
716
+ </div>
717
+ <div class="course-card" data-category="intermediate">
718
+ <div class="course-image">
719
+ <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Django Testing">
720
+ </div>
721
+ <div class="course-info">
722
+ <span class="course-category">Intermediate</span>
723
+ <h3 class="course-title">Testing Django Applications</h3>
724
+ <div class="course-meta">
725
+ <span><i class="far fa-clock"></i> 10 Hours</span>
726
+ <span><i class="far fa-user"></i> 35 Lessons</span>
727
+ </div>
728
+ <div class="course-price">$54.99</div>
729
+ </div>
730
+ </div>
731
+ <div class="course-card" data-category="advanced">
732
+ <div class="course-image">
733
+ <img src="https://images.unsplash.com/photo-1560762484-813fc97650a0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Django Deployment">
734
+ </div>
735
+ <div class="course-info">
736
+ <span class="course-category">Advanced</span>
737
+ <h3 class="course-title">Deploying Django in Production</h3>
738
+ <div class="course-meta">
739
+ <span><i class="far fa-clock"></i> 14 Hours</span>
740
+ <span><i class="far fa-user"></i> 42 Lessons</span>
741
+ </div>
742
+ <div class="course-price">$69.99</div>
743
+ </div>
744
+ </div>
745
+ </div>
746
+ </div>
747
+ </section>
748
+
749
+ <section class="testimonials" id="testimonials">
750
+ <div class="container">
751
+ <div class="section-title">
752
+ <h2>What Our Students Say</h2>
753
+ <p>Over 10,000 developers have transformed their careers with DjangoHub.</p>
754
+ </div>
755
+ <div class="testimonials-grid">
756
+ <div class="testimonial-card">
757
+ <div class="testimonial-quote">
758
+ "I went from zero to landing my first Django developer job in just 3 months. The structured curriculum and practical exercises were game-changing."
759
+ </div>
760
+ <div class="testimonial-author">
761
+ <div class="author-avatar">
762
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Johnson">
763
+ </div>
764
+ <div class="author-info">
765
+ <h4>Sarah Johnson</h4>
766
+ <p>Junior Django Developer</p>
767
+ </div>
768
+ </div>
769
+ </div>
770
+ <div class="testimonial-card">
771
+ <div class="testimonial-quote">
772
+ "As a senior developer, I was skeptical about online courses, but the Advanced Django patterns course completely transformed how I build applications."
773
+ </div>
774
+ <div class="testimonial-author">
775
+ <div class="author-avatar">
776
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen">
777
+ </div>
778
+ <div class="author-info">
779
+ <h4>Michael Chen</h4>
780
+ <p>Lead Developer at TechCorp</p>
781
+ </div>
782
+ </div>
783
+ </div>
784
+ <div class="testimonial-card">
785
+ <div class="testimonial-quote">
786
+ "The Django REST Framework course helped me build and document my first API that now serves thousands of requests daily to our mobile apps."
787
+ </div>
788
+ <div class="testimonial-author">
789
+ <div class="author-avatar">
790
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Jessica Ramirez">
791
+ </div>
792
+ <div class="author-info">
793
+ <h4>Jessica Ramirez</h4>
794
+ <p>API Developer</p>
795
+ </div>
796
+ </div>
797
+ </div>
798
+ </div>
799
+ </div>
800
+ </section>
801
+
802
+ <section class="newsletter" id="newsletter">
803
+ <div class="container">
804
+ <div class="section-title">
805
+ <h2>Stay Updated</h2>
806
+ <p>Subscribe to receive the latest Django tutorials, articles and course updates directly to your inbox.</p>
807
+ </div>
808
+ <div class="newsletter-form">
809
+ <input type="email" class="newsletter-input" placeholder="Enter your email address">
810
+ <button class="btn btn-primary">Subscribe</button>
811
+ </div>
812
+ </div>
813
+ </section>
814
+
815
+ <footer>
816
+ <div class="container">
817
+ <div class="footer-content">
818
+ <div class="footer-column">
819
+ <h3>DjangoHub</h3>
820
+ <p>The ultimate platform for mastering Django web development with hands-on projects and expert guidance.</p>
821
+ <div class="social-links">
822
+ <a href="#"><i class="fab fa-twitter"></i></a>
823
+ <a href="#"><i class="fab fa-github"></i></a>
824
+ <a href="#"><i class="fab fa-youtube"></i></a>
825
+ <a href="#"><i class="fab fa-discord"></i></a>
826
+ </div>
827
+ </div>
828
+ <div class="footer-column">
829
+ <h3>Resources</h3>
830
+ <ul class="footer-links">
831
+ <li><a href="#">Documentation</a></li>
832
+ <li><a href="#">Tutorials</a></li>
833
+ <li><a href="#">Blog</a></li>
834
+ <li><a href="#">Cheat Sheets</a></li>
835
+ <li><a href="#">Community</a></li>
836
+ </ul>
837
+ </div>
838
+ <div class="footer-column">
839
+ <h3>Courses</h3>
840
+ <ul class="footer-links">
841
+ <li><a href="#">Beginner Track</a></li>
842
+ <li><a href="#">Intermediate Track</a></li>
843
+ <li><a href="#">Advanced Track</a></li>
844
+ <li><a href="#">Project-Based Learning</a></li>
845
+ <li><a href="#">Career Paths</a></li>
846
+ </ul>
847
+ </div>
848
+ <div class="footer-column">
849
+ <h3>Company</h3>
850
+ <ul class="footer-links">
851
+ <li><a href="#">About Us</a></li>
852
+ <li><a href="#">Our Instructors</a></li>
853
+ <li><a href="#">Careers</a></li>
854
+ <li><a href="#">Contact</a></li>
855
+ <li><a href="#">Support</a></li>
856
+ </ul>
857
+ </div>
858
+ </div>
859
+ <div class="footer-bottom">
860
+ <p>&copy; 2023 DjangoHub. All rights reserved.</p>
861
+ </div>
862
+ </div>
863
+ </footer>
864
+
865
+ <script>
866
+ // Tab functionality for courses
867
+ document.addEventListener('DOMContentLoaded', function() {
868
+ const tabButtons = document.querySelectorAll('.tab-btn');
869
+ const courseCards = document.querySelectorAll('.course-card');
870
+
871
+ tabButtons.forEach(button => {
872
+ button.addEventListener('click', () => {
873
+ // Remove active class from all buttons
874
+ tabButtons.forEach(btn => btn.classList.remove('active'));
875
+
876
+ // Add active class to clicked button
877
+ button.classList.add('active');
878
+
879
+ // Get category from data attribute
880
+ const category = button.dataset.category;
881
+
882
+ // Show/hide courses based on category
883
+ courseCards.forEach(card => {
884
+ if (category === 'all' || card.dataset.category === category) {
885
+ card.style.display = 'block';
886
+ } else {
887
+ card.style.display = 'none';
888
+ }
889
+ });
890
+ });
891
+ });
892
+
893
+ // Smooth scrolling for anchor links
894
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
895
+ anchor.addEventListener('click', function(e) {
896
+ e.preventDefault();
897
+
898
+ const targetId = this.getAttribute('href');
899
+ const targetElement = document.querySelector(targetId);
900
+
901
+ if (targetElement) {
902
+ window.scrollTo({
903
+ top: targetElement.offsetTop - 80,
904
+ behavior: 'smooth'
905
+ });
906
+ }
907
+ });
908
+ });
909
+
910
+ // Animate elements when they scroll into view
911
+ const animateOnScroll = () => {
912
+ const elements = document.querySelectorAll('.slide-up, .fade-in');
913
+
914
+ elements.forEach(element => {
915
+ const elementPosition = element.getBoundingClientRect().top;
916
+ const windowHeight = window.innerHeight;
917
+
918
+ if (elementPosition < windowHeight - 100) {
919
+ element.style.opacity = '1';
920
+ }
921
+ });
922
+ };
923
+
924
+ // Run on initial load
925
+ animateOnScroll();
926
+
927
+ // Run on scroll
928
+ window.addEventListener('scroll', animateOnScroll);
929
+
930
+ // Form submission
931
+ const newsletterForm = document.querySelector('.newsletter-form');
932
+ if (newsletterForm) {
933
+ newsletterForm.addEventListener('submit', function(e) {
934
+ e.preventDefault();
935
+ const emailInput = this.querySelector('.newsletter-input');
936
+ if (emailInput.value.trim() !== '') {
937
+ alert('Thank you for subscribing! We\'ll send you updates soon.');
938
+ emailInput.value = '';
939
+ } else {
940
+ alert('Please enter a valid email address.');
941
+ }
942
+ });
943
+ }
944
+ });
945
+ </script>
946
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
947
+ </html>