Hugging Face's logo

Spaces:
QwanYin
/
factor_b
Running

App Files Community
arhs commited on
Commit
be7803a
·
verified ·
1 Parent(s): 16bd2c3

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +777 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: My Quantum World
3
- emoji: 🚀
4
- colorFrom: yellow
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: my-quantum-world
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,777 @@
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>Quantum Leap | Learn Quantum Computing</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: #6a00f4;
11
+ --secondary: #00e5ff;
12
+ --dark: #0f0c29;
13
+ --light: #f8f9fa;
14
+ --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
15
+ }
16
+
17
+ * {
18
+ margin: 0;
19
+ padding: 0;
20
+ box-sizing: border-box;
21
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
22
+ }
23
+
24
+ body {
25
+ background-color: var(--dark);
26
+ color: var(--light);
27
+ overflow-x: hidden;
28
+ }
29
+
30
+ header {
31
+ position: fixed;
32
+ top: 0;
33
+ left: 0;
34
+ width: 100%;
35
+ padding: 20px 10%;
36
+ display: flex;
37
+ justify-content: space-between;
38
+ align-items: center;
39
+ z-index: 100;
40
+ background: rgba(15, 12, 41, 0.9);
41
+ backdrop-filter: blur(10px);
42
+ }
43
+
44
+ .logo {
45
+ font-size: 28px;
46
+ font-weight: 700;
47
+ background: var(--gradient);
48
+ -webkit-background-clip: text;
49
+ background-clip: text;
50
+ color: transparent;
51
+ }
52
+
53
+ nav ul {
54
+ display: flex;
55
+ list-style: none;
56
+ }
57
+
58
+ nav ul li {
59
+ margin-left: 30px;
60
+ }
61
+
62
+ nav ul li a {
63
+ text-decoration: none;
64
+ color: var(--light);
65
+ font-weight: 500;
66
+ transition: 0.3s;
67
+ position: relative;
68
+ }
69
+
70
+ nav ul li a:hover {
71
+ color: var(--secondary);
72
+ }
73
+
74
+ nav ul li a::after {
75
+ content: '';
76
+ position: absolute;
77
+ bottom: -5px;
78
+ left: 0;
79
+ width: 0;
80
+ height: 2px;
81
+ background: var(--gradient);
82
+ transition: 0.3s;
83
+ }
84
+
85
+ nav ul li a:hover::after {
86
+ width: 100%;
87
+ }
88
+
89
+ .btn {
90
+ display: inline-block;
91
+ padding: 10px 25px;
92
+ background: var(--gradient);
93
+ color: white;
94
+ border-radius: 30px;
95
+ text-decoration: none;
96
+ font-weight: 600;
97
+ transition: 0.3s;
98
+ border: none;
99
+ cursor: pointer;
100
+ }
101
+
102
+ .btn:hover {
103
+ transform: translateY(-3px);
104
+ box-shadow: 0 10px 20px rgba(106, 0, 244, 0.3);
105
+ }
106
+
107
+ .hero {
108
+ min-height: 100vh;
109
+ display: flex;
110
+ align-items: center;
111
+ padding: 0 10%;
112
+ position: relative;
113
+ overflow: hidden;
114
+ }
115
+
116
+ .hero-content {
117
+ max-width: 600px;
118
+ z-index: 2;
119
+ }
120
+
121
+ .hero-content h1 {
122
+ font-size: 56px;
123
+ font-weight: 700;
124
+ margin-bottom: 20px;
125
+ line-height: 1.2;
126
+ }
127
+
128
+ .hero-content h1 span {
129
+ background: var(--gradient);
130
+ -webkit-background-clip: text;
131
+ background-clip: text;
132
+ color: transparent;
133
+ }
134
+
135
+ .hero-content p {
136
+ font-size: 18px;
137
+ margin-bottom: 30px;
138
+ line-height: 1.6;
139
+ opacity: 0.9;
140
+ }
141
+
142
+ .hero-image {
143
+ position: absolute;
144
+ right: 10%;
145
+ width: 500px;
146
+ height: 500px;
147
+ border-radius: 50%;
148
+ background: radial-gradient(circle, rgba(106, 0, 244, 0.2) 0%, rgba(0, 229, 255, 0.1) 70%, transparent 100%);
149
+ display: flex;
150
+ justify-content: center;
151
+ align-items: center;
152
+ z-index: 1;
153
+ }
154
+
155
+ .hero-image::before {
156
+ content: '';
157
+ position: absolute;
158
+ width: 100%;
159
+ height: 100%;
160
+ border-radius: 50%;
161
+ background: conic-gradient(from 0deg, transparent 0deg, var(--primary) 10deg, transparent 20deg);
162
+ animation: rotate 10s linear infinite;
163
+ }
164
+
165
+ @keyframes rotate {
166
+ 0% { transform: rotate(0deg); }
167
+ 100% { transform: rotate(360deg); }
168
+ }
169
+
170
+ .quantum-icon {
171
+ font-size: 200px;
172
+ color: var(--secondary);
173
+ animation: pulse 2s infinite;
174
+ }
175
+
176
+ @keyframes pulse {
177
+ 0% { transform: scale(1); opacity: 1; }
178
+ 50% { transform: scale(1.1); opacity: 0.8; }
179
+ 100% { transform: scale(1); opacity: 1; }
180
+ }
181
+
182
+ .features {
183
+ padding: 100px 10%;
184
+ background: linear-gradient(to bottom, var(--dark) 0%, #1a1441 100%);
185
+ }
186
+
187
+ .section-title {
188
+ text-align: center;
189
+ margin-bottom: 60px;
190
+ }
191
+
192
+ .section-title h2 {
193
+ font-size: 42px;
194
+ margin-bottom: 20px;
195
+ }
196
+
197
+ .section-title p {
198
+ max-width: 700px;
199
+ margin: 0 auto;
200
+ opacity: 0.8;
201
+ line-height: 1.6;
202
+ }
203
+
204
+ .features-grid {
205
+ display: grid;
206
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
207
+ gap: 30px;
208
+ }
209
+
210
+ .feature-card {
211
+ background: rgba(255, 255, 255, 0.05);
212
+ border-radius: 15px;
213
+ padding: 30px;
214
+ transition: 0.3s;
215
+ backdrop-filter: blur(10px);
216
+ border: 1px solid rgba(255, 255, 255, 0.1);
217
+ }
218
+
219
+ .feature-card:hover {
220
+ transform: translateY(-10px);
221
+ box-shadow: 0 15px 30px rgba(106, 0, 244, 0.2);
222
+ border-color: var(--primary);
223
+ }
224
+
225
+ .feature-icon {
226
+ font-size: 40px;
227
+ margin-bottom: 20px;
228
+ background: var(--gradient);
229
+ -webkit-background-clip: text;
230
+ background-clip: text;
231
+ color: transparent;
232
+ }
233
+
234
+ .feature-card h3 {
235
+ font-size: 22px;
236
+ margin-bottom: 15px;
237
+ }
238
+
239
+ .feature-card p {
240
+ opacity: 0.8;
241
+ line-height: 1.6;
242
+ }
243
+
244
+ .courses {
245
+ padding: 100px 10%;
246
+ background: #1a1441;
247
+ }
248
+
249
+ .courses-grid {
250
+ display: grid;
251
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
252
+ gap: 30px;
253
+ }
254
+
255
+ .course-card {
256
+ background: rgba(255, 255, 255, 0.05);
257
+ border-radius: 15px;
258
+ overflow: hidden;
259
+ transition: 0.3s;
260
+ border: 1px solid rgba(255, 255, 255, 0.1);
261
+ }
262
+
263
+ .course-card:hover {
264
+ transform: translateY(-10px);
265
+ box-shadow: 0 15px 30px rgba(0, 229, 255, 0.2);
266
+ border-color: var(--secondary);
267
+ }
268
+
269
+ .course-image {
270
+ height: 200px;
271
+ background: var(--gradient);
272
+ display: flex;
273
+ justify-content: center;
274
+ align-items: center;
275
+ }
276
+
277
+ .course-image i {
278
+ font-size: 80px;
279
+ color: white;
280
+ }
281
+
282
+ .course-content {
283
+ padding: 30px;
284
+ }
285
+
286
+ .course-content h3 {
287
+ font-size: 22px;
288
+ margin-bottom: 15px;
289
+ }
290
+
291
+ .course-content p {
292
+ opacity: 0.8;
293
+ margin-bottom: 20px;
294
+ line-height: 1.6;
295
+ }
296
+
297
+ .course-meta {
298
+ display: flex;
299
+ justify-content: space-between;
300
+ align-items: center;
301
+ margin-top: 20px;
302
+ padding-top: 20px;
303
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
304
+ }
305
+
306
+ .course-duration, .course-level {
307
+ display: flex;
308
+ align-items: center;
309
+ font-size: 14px;
310
+ opacity: 0.8;
311
+ }
312
+
313
+ .course-duration i, .course-level i {
314
+ margin-right: 5px;
315
+ }
316
+
317
+ .cta {
318
+ padding: 100px 10%;
319
+ text-align: center;
320
+ background: linear-gradient(to bottom, #1a1441 0%, var(--dark) 100%);
321
+ }
322
+
323
+ .cta h2 {
324
+ font-size: 42px;
325
+ margin-bottom: 20px;
326
+ }
327
+
328
+ .cta p {
329
+ max-width: 700px;
330
+ margin: 0 auto 40px;
331
+ opacity: 0.8;
332
+ line-height: 1.6;
333
+ }
334
+
335
+ footer {
336
+ padding: 50px 10%;
337
+ background: var(--dark);
338
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
339
+ }
340
+
341
+ .footer-content {
342
+ display: grid;
343
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
344
+ gap: 30px;
345
+ margin-bottom: 40px;
346
+ }
347
+
348
+ .footer-column h3 {
349
+ font-size: 18px;
350
+ margin-bottom: 20px;
351
+ position: relative;
352
+ padding-bottom: 10px;
353
+ }
354
+
355
+ .footer-column h3::after {
356
+ content: '';
357
+ position: absolute;
358
+ bottom: 0;
359
+ left: 0;
360
+ width: 50px;
361
+ height: 2px;
362
+ background: var(--gradient);
363
+ }
364
+
365
+ .footer-column ul {
366
+ list-style: none;
367
+ }
368
+
369
+ .footer-column ul li {
370
+ margin-bottom: 10px;
371
+ }
372
+
373
+ .footer-column ul li a {
374
+ text-decoration: none;
375
+ color: var(--light);
376
+ opacity: 0.8;
377
+ transition: 0.3s;
378
+ }
379
+
380
+ .footer-column ul li a:hover {
381
+ opacity: 1;
382
+ color: var(--secondary);
383
+ }
384
+
385
+ .social-links {
386
+ display: flex;
387
+ gap: 15px;
388
+ }
389
+
390
+ .social-links a {
391
+ display: flex;
392
+ justify-content: center;
393
+ align-items: center;
394
+ width: 40px;
395
+ height: 40px;
396
+ border-radius: 50%;
397
+ background: rgba(255, 255, 255, 0.1);
398
+ color: var(--light);
399
+ transition: 0.3s;
400
+ }
401
+
402
+ .social-links a:hover {
403
+ background: var(--gradient);
404
+ transform: translateY(-3px);
405
+ }
406
+
407
+ .copyright {
408
+ text-align: center;
409
+ padding-top: 30px;
410
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
411
+ opacity: 0.6;
412
+ font-size: 14px;
413
+ }
414
+
415
+ /* Responsive styles */
416
+ @media (max-width: 1200px) {
417
+ .hero-image {
418
+ width: 400px;
419
+ height: 400px;
420
+ }
421
+ }
422
+
423
+ @media (max-width: 992px) {
424
+ .hero {
425
+ flex-direction: column;
426
+ text-align: center;
427
+ padding-top: 150px;
428
+ }
429
+
430
+ .hero-content {
431
+ max-width: 100%;
432
+ margin-bottom: 50px;
433
+ }
434
+
435
+ .hero-image {
436
+ position: relative;
437
+ right: auto;
438
+ margin: 0 auto;
439
+ }
440
+ }
441
+
442
+ @media (max-width: 768px) {
443
+ header {
444
+ padding: 15px 5%;
445
+ }
446
+
447
+ .hero {
448
+ padding: 150px 5% 50px;
449
+ }
450
+
451
+ .hero-content h1 {
452
+ font-size: 42px;
453
+ }
454
+
455
+ .hero-image {
456
+ width: 300px;
457
+ height: 300px;
458
+ }
459
+
460
+ .quantum-icon {
461
+ font-size: 150px;
462
+ }
463
+
464
+ .features, .courses, .cta {
465
+ padding: 70px 5%;
466
+ }
467
+
468
+ .section-title h2 {
469
+ font-size: 36px;
470
+ }
471
+ }
472
+
473
+ @media (max-width: 576px) {
474
+ nav ul {
475
+ display: none;
476
+ }
477
+
478
+ .hero-content h1 {
479
+ font-size: 36px;
480
+ }
481
+
482
+ .hero-image {
483
+ width: 250px;
484
+ height: 250px;
485
+ }
486
+
487
+ .quantum-icon {
488
+ font-size: 120px;
489
+ }
490
+
491
+ .features-grid, .courses-grid {
492
+ grid-template-columns: 1fr;
493
+ }
494
+ }
495
+
496
+ /* Animation classes */
497
+ .animate {
498
+ opacity: 0;
499
+ transform: translateY(30px);
500
+ transition: 0.5s;
501
+ }
502
+
503
+ .animate.show {
504
+ opacity: 1;
505
+ transform: translateY(0);
506
+ }
507
+ </style>
508
+ </head>
509
+ <body>
510
+ <header>
511
+ <div class="logo">QuantumLeap</div>
512
+ <nav>
513
+ <ul>
514
+ <li><a href="#features">Features</a></li>
515
+ <li><a href="#courses">Courses</a></li>
516
+ <li><a href="#community">Community</a></li>
517
+ <li><a href="#about">About</a></li>
518
+ <li><a href="#contact">Contact</a></li>
519
+ </ul>
520
+ </nav>
521
+ <a href="#signup" class="btn">Get Started</a>
522
+ </header>
523
+
524
+ <section class="hero">
525
+ <div class="hero-content animate">
526
+ <h1>Unlock the <span>Future</span> of Computing</h1>
527
+ <p>Master quantum computing with our interactive courses designed for beginners and experts alike. Learn qubits, quantum gates, and algorithms that will revolutionize technology.</p>
528
+ <div style="display: flex; gap: 15px;">
529
+ <a href="#courses" class="btn">Explore Courses</a>
530
+ <a href="#demo" class="btn" style="background: transparent; border: 1px solid var(--secondary);">Watch Demo</a>
531
+ </div>
532
+ </div>
533
+ <div class="hero-image">
534
+ <i class="fas fa-atom quantum-icon"></i>
535
+ </div>
536
+ </section>
537
+
538
+ <section class="features" id="features">
539
+ <div class="section-title animate">
540
+ <h2>Why Learn Quantum Computing?</h2>
541
+ <p>Quantum computing is the next frontier in technology. Our platform makes this complex field accessible through innovative teaching methods.</p>
542
+ </div>
543
+ <div class="features-grid">
544
+ <div class="feature-card animate" style="transition-delay: 0.1s;">
545
+ <div class="feature-icon">
546
+ <i class="fas fa-bolt"></i>
547
+ </div>
548
+ <h3>Exponential Speed</h3>
549
+ <p>Understand how quantum computers can solve problems exponentially faster than classical computers for specific applications.</p>
550
+ </div>
551
+ <div class="feature-card animate" style="transition-delay: 0.2s;">
552
+ <div class="feature-icon">
553
+ <i class="fas fa-lock"></i>
554
+ </div>
555
+ <h3>Quantum Security</h3>
556
+ <p>Learn about quantum cryptography and how it will revolutionize data security in the coming years.</p>
557
+ </div>
558
+ <div class="feature-card animate" style="transition-delay: 0.3s;">
559
+ <div class="feature-icon">
560
+ <i class="fas fa-flask"></i>
561
+ </div>
562
+ <h3>Material Science</h3>
563
+ <p>Discover how quantum computing will enable breakthroughs in chemistry and material science.</p>
564
+ </div>
565
+ <div class="feature-card animate" style="transition-delay: 0.4s;">
566
+ <div class="feature-icon">
567
+ <i class="fas fa-chart-line"></i>
568
+ </div>
569
+ <h3>Financial Modeling</h3>
570
+ <p>Explore quantum algorithms for optimization problems that will transform financial markets.</p>
571
+ </div>
572
+ <div class="feature-card animate" style="transition-delay: 0.5s;">
573
+ <div class="feature-icon">
574
+ <i class="fas fa-robot"></i>
575
+ </div>
576
+ <h3>Machine Learning</h3>
577
+ <p>Dive into quantum machine learning and how it will enhance AI capabilities beyond classical limits.</p>
578
+ </div>
579
+ <div class="feature-card animate" style="transition-delay: 0.6s;">
580
+ <div class="feature-icon">
581
+ <i class="fas fa-graduation-cap"></i>
582
+ </div>
583
+ <h3>Future-Proof Career</h3>
584
+ <p>Position yourself at the forefront of technology with skills that will be in high demand as quantum computing matures.</p>
585
+ </div>
586
+ </div>
587
+ </section>
588
+
589
+ <section class="courses" id="courses">
590
+ <div class="section-title animate">
591
+ <h2>Our Quantum Courses</h2>
592
+ <p>From foundational concepts to advanced algorithms, we have the perfect learning path for your quantum journey.</p>
593
+ </div>
594
+ <div class="courses-grid">
595
+ <div class="course-card animate" style="transition-delay: 0.1s;">
596
+ <div class="course-image">
597
+ <i class="fas fa-question-circle"></i>
598
+ </div>
599
+ <div class="course-content">
600
+ <h3>Quantum Computing Fundamentals</h3>
601
+ <p>Start with the basics of quantum mechanics, qubits, and simple quantum circuits. No prior quantum knowledge required.</p>
602
+ <div class="course-meta">
603
+ <span class="course-duration"><i class="far fa-clock"></i> 6 Weeks</span>
604
+ <span class="course-level"><i class="fas fa-signal"></i> Beginner</span>
605
+ </div>
606
+ </div>
607
+ </div>
608
+ <div class="course-card animate" style="transition-delay: 0.2s;">
609
+ <div class="course-image">
610
+ <i class="fas fa-code"></i>
611
+ </div>
612
+ <div class="course-content">
613
+ <h3>Quantum Programming with Qiskit</h3>
614
+ <p>Learn to program real quantum computers using IBM's Qiskit framework. Hands-on experience with quantum gates and algorithms.</p>
615
+ <div class="course-meta">
616
+ <span class="course-duration"><i class="far fa-clock"></i> 8 Weeks</span>
617
+ <span class="course-level"><i class="fas fa-signal"></i> Intermediate</span>
618
+ </div>
619
+ </div>
620
+ </div>
621
+ <div class="course-card animate" style="transition-delay: 0.3s;">
622
+ <div class="course-image">
623
+ <i class="fas fa-project-diagram"></i>
624
+ </div>
625
+ <div class="course-content">
626
+ <h3>Quantum Algorithms</h3>
627
+ <p>Master Shor's, Grover's, and other quantum algorithms that demonstrate the power of quantum computation.</p>
628
+ <div class="course-meta">
629
+ <span class="course-duration"><i class="far fa-clock"></i> 10 Weeks</span>
630
+ <span class="course-level"><i class="fas fa-signal"></i> Advanced</span>
631
+ </div>
632
+ </div>
633
+ </div>
634
+ <div class="course-card animate" style="transition-delay: 0.4s;">
635
+ <div class="course-image">
636
+ <i class="fas fa-shield-alt"></i>
637
+ </div>
638
+ <div class="course-content">
639
+ <h3>Quantum Cryptography</h3>
640
+ <p>Explore quantum key distribution and post-quantum cryptography to understand the future of secure communication.</p>
641
+ <div class="course-meta">
642
+ <span class="course-duration"><i class="far fa-clock"></i> 6 Weeks</span>
643
+ <span class="course-level"><i class="fas fa-signal"></i> Intermediate</span>
644
+ </div>
645
+ </div>
646
+ </div>
647
+ <div class="course-card animate" style="transition-delay: 0.5s;">
648
+ <div class="course-image">
649
+ <i class="fas fa-brain"></i>
650
+ </div>
651
+ <div class="course-content">
652
+ <h3>Quantum Machine Learning</h3>
653
+ <p>Combine quantum computing with machine learning to explore new frontiers in artificial intelligence.</p>
654
+ <div class="course-meta">
655
+ <span class="course-duration"><i class="far fa-clock"></i> 8 Weeks</span>
656
+ <span class="course-level"><i class="fas fa-signal"></i> Advanced</span>
657
+ </div>
658
+ </div>
659
+ </div>
660
+ <div class="course-card animate" style="transition-delay: 0.6s;">
661
+ <div class="course-image">
662
+ <i class="fas fa-industry"></i>
663
+ </div>
664
+ <div class="course-content">
665
+ <h3>Quantum Applications</h3>
666
+ <p>Discover real-world applications of quantum computing across industries from finance to pharmaceuticals.</p>
667
+ <div class="course-meta">
668
+ <span class="course-duration"><i class="far fa-clock"></i> 4 Weeks</span>
669
+ <span class="course-level"><i class="fas fa-signal"></i> All Levels</span>
670
+ </div>
671
+ </div>
672
+ </div>
673
+ </div>
674
+ </section>
675
+
676
+ <section class="cta" id="signup">
677
+ <div class="section-title animate">
678
+ <h2>Ready to Quantum Leap Ahead?</h2>
679
+ <p>Join thousands of students who are preparing for the quantum revolution. Start learning today and be part of shaping tomorrow's technology.</p>
680
+ <a href="#signup" class="btn" style="margin-top: 30px;">Enroll Now - Free Trial Available</a>
681
+ </div>
682
+ </section>
683
+
684
+ <footer>
685
+ <div class="footer-content">
686
+ <div class="footer-column">
687
+ <h3>QuantumLeap</h3>
688
+ <p>Making quantum computing education accessible to everyone. Our mission is to demystify quantum technologies and prepare the workforce of the future.</p>
689
+ <div class="social-links">
690
+ <a href="#"><i class="fab fa-twitter"></i></a>
691
+ <a href="#"><i class="fab fa-linkedin"></i></a>
692
+ <a href="#"><i class="fab fa-github"></i></a>
693
+ <a href="#"><i class="fab fa-youtube"></i></a>
694
+ </div>
695
+ </div>
696
+ <div class="footer-column">
697
+ <h3>Quick Links</h3>
698
+ <ul>
699
+ <li><a href="#">Home</a></li>
700
+ <li><a href="#features">Features</a></li>
701
+ <li><a href="#courses">Courses</a></li>
702
+ <li><a href="#about">About Us</a></li>
703
+ <li><a href="#contact">Contact</a></li>
704
+ </ul>
705
+ </div>
706
+ <div class="footer-column">
707
+ <h3>Resources</h3>
708
+ <ul>
709
+ <li><a href="#">Blog</a></li>
710
+ <li><a href="#">Documentation</a></li>
711
+ <li><a href="#">Quantum Glossary</a></li>
712
+ <li><a href="#">Research Papers</a></li>
713
+ <li><a href="#">Community Forum</a></li>
714
+ </ul>
715
+ </div>
716
+ <div class="footer-column">
717
+ <h3>Contact</h3>
718
+ <ul>
719
+ <li><i class="fas fa-envelope"></i> hello@quantumleap.edu</li>
720
+ <li><i class="fas fa-phone"></i> +1 (555) 123-4567</li>
721
+ <li><i class="fas fa-map-marker-alt"></i> Quantum Valley, Tech City</li>
722
+ </ul>
723
+ </div>
724
+ </div>
725
+ <div class="copyright">
726
+ <p>&copy; 2023 QuantumLeap. All rights reserved. | Designed with <i class="fas fa-heart" style="color: var(--secondary);"></i> for the quantum future</p>
727
+ </div>
728
+ </footer>
729
+
730
+ <script>
731
+ // Animation on scroll
732
+ document.addEventListener('DOMContentLoaded', () => {
733
+ const animateElements = document.querySelectorAll('.animate');
734
+
735
+ const observer = new IntersectionObserver((entries) => {
736
+ entries.forEach(entry => {
737
+ if (entry.isIntersecting) {
738
+ entry.target.classList.add('show');
739
+ }
740
+ });
741
+ }, {
742
+ threshold: 0.1
743
+ });
744
+
745
+ animateElements.forEach(el => observer.observe(el));
746
+
747
+ // Smooth scrolling for navigation
748
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
749
+ anchor.addEventListener('click', function(e) {
750
+ e.preventDefault();
751
+
752
+ const targetId = this.getAttribute('href');
753
+ if (targetId === '#') return;
754
+
755
+ const targetElement = document.querySelector(targetId);
756
+ if (targetElement) {
757
+ window.scrollTo({
758
+ top: targetElement.offsetTop - 80,
759
+ behavior: 'smooth'
760
+ });
761
+ }
762
+ });
763
+ });
764
+
765
+ // Header scroll effect
766
+ window.addEventListener('scroll', () => {
767
+ const header = document.querySelector('header');
768
+ if (window.scrollY > 50) {
769
+ header.style.boxShadow = '0 5px 20px rgba(0, 0, 0, 0.3)';
770
+ } else {
771
+ header.style.boxShadow = 'none';
772
+ }
773
+ });
774
+ });
775
+ </script>
776
+ <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 <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>
777
+ </html>