Hugging Face's logo

Spaces:
arhs
/
my-quantum-world
Running

App Files Community
my-quantum-world / index.html
arhs's picture
arhs
Add 2 files
be7803a verified
raw
history blame contribute delete
25.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Quantum Leap | Learn Quantum Computing</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 :root {
 --primary: #6a00f4;
 --secondary: #00e5ff;
 --dark: #0f0c29;
 --light: #f8f9fa;
 --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
 }
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 body {
 background-color: var(--dark);
 color: var(--light);
 overflow-x: hidden;
 }
 header {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 padding: 20px 10%;
 display: flex;
 justify-content: space-between;
 align-items: center;
 z-index: 100;
 background: rgba(15, 12, 41, 0.9);
 backdrop-filter: blur(10px);
 }
 .logo {
 font-size: 28px;
 font-weight: 700;
 background: var(--gradient);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 }
 nav ul {
 display: flex;
 list-style: none;
 }
 nav ul li {
 margin-left: 30px;
 }
 nav ul li a {
 text-decoration: none;
 color: var(--light);
 font-weight: 500;
 transition: 0.3s;
 position: relative;
 }
 nav ul li a:hover {
 color: var(--secondary);
 }
 nav ul li a::after {
 content: '';
 position: absolute;
 bottom: -5px;
 left: 0;
 width: 0;
 height: 2px;
 background: var(--gradient);
 transition: 0.3s;
 }
 nav ul li a:hover::after {
 width: 100%;
 }
 .btn {
 display: inline-block;
 padding: 10px 25px;
 background: var(--gradient);
 color: white;
 border-radius: 30px;
 text-decoration: none;
 font-weight: 600;
 transition: 0.3s;
 border: none;
 cursor: pointer;
 }
 .btn:hover {
 transform: translateY(-3px);
 box-shadow: 0 10px 20px rgba(106, 0, 244, 0.3);
 }
 .hero {
 min-height: 100vh;
 display: flex;
 align-items: center;
 padding: 0 10%;
 position: relative;
 overflow: hidden;
 }
 .hero-content {
 max-width: 600px;
 z-index: 2;
 }
 .hero-content h1 {
 font-size: 56px;
 font-weight: 700;
 margin-bottom: 20px;
 line-height: 1.2;
 }
 .hero-content h1 span {
 background: var(--gradient);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 }
 .hero-content p {
 font-size: 18px;
 margin-bottom: 30px;
 line-height: 1.6;
 opacity: 0.9;
 }
 .hero-image {
 position: absolute;
 right: 10%;
 width: 500px;
 height: 500px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(106, 0, 244, 0.2) 0%, rgba(0, 229, 255, 0.1) 70%, transparent 100%);
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 1;
 }
 .hero-image::before {
 content: '';
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 background: conic-gradient(from 0deg, transparent 0deg, var(--primary) 10deg, transparent 20deg);
 animation: rotate 10s linear infinite;
 }
 @keyframes rotate {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
 }
 .quantum-icon {
 font-size: 200px;
 color: var(--secondary);
 animation: pulse 2s infinite;
 }
 @keyframes pulse {
 0% { transform: scale(1); opacity: 1; }
 50% { transform: scale(1.1); opacity: 0.8; }
 100% { transform: scale(1); opacity: 1; }
 }
 .features {
 padding: 100px 10%;
 background: linear-gradient(to bottom, var(--dark) 0%, #1a1441 100%);
 }
 .section-title {
 text-align: center;
 margin-bottom: 60px;
 }
 .section-title h2 {
 font-size: 42px;
 margin-bottom: 20px;
 }
 .section-title p {
 max-width: 700px;
 margin: 0 auto;
 opacity: 0.8;
 line-height: 1.6;
 }
 .features-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 30px;
 }
 .feature-card {
 background: rgba(255, 255, 255, 0.05);
 border-radius: 15px;
 padding: 30px;
 transition: 0.3s;
 backdrop-filter: blur(10px);
 border: 1px solid rgba(255, 255, 255, 0.1);
 }
 .feature-card:hover {
 transform: translateY(-10px);
 box-shadow: 0 15px 30px rgba(106, 0, 244, 0.2);
 border-color: var(--primary);
 }
 .feature-icon {
 font-size: 40px;
 margin-bottom: 20px;
 background: var(--gradient);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 }
 .feature-card h3 {
 font-size: 22px;
 margin-bottom: 15px;
 }
 .feature-card p {
 opacity: 0.8;
 line-height: 1.6;
 }
 .courses {
 padding: 100px 10%;
 background: #1a1441;
 }
 .courses-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
 gap: 30px;
 }
 .course-card {
 background: rgba(255, 255, 255, 0.05);
 border-radius: 15px;
 overflow: hidden;
 transition: 0.3s;
 border: 1px solid rgba(255, 255, 255, 0.1);
 }
 .course-card:hover {
 transform: translateY(-10px);
 box-shadow: 0 15px 30px rgba(0, 229, 255, 0.2);
 border-color: var(--secondary);
 }
 .course-image {
 height: 200px;
 background: var(--gradient);
 display: flex;
 justify-content: center;
 align-items: center;
 }
 .course-image i {
 font-size: 80px;
 color: white;
 }
 .course-content {
 padding: 30px;
 }
 .course-content h3 {
 font-size: 22px;
 margin-bottom: 15px;
 }
 .course-content p {
 opacity: 0.8;
 margin-bottom: 20px;
 line-height: 1.6;
 }
 .course-meta {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-top: 20px;
 padding-top: 20px;
 border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 .course-duration, .course-level {
 display: flex;
 align-items: center;
 font-size: 14px;
 opacity: 0.8;
 }
 .course-duration i, .course-level i {
 margin-right: 5px;
 }
 .cta {
 padding: 100px 10%;
 text-align: center;
 background: linear-gradient(to bottom, #1a1441 0%, var(--dark) 100%);
 }
 .cta h2 {
 font-size: 42px;
 margin-bottom: 20px;
 }
 .cta p {
 max-width: 700px;
 margin: 0 auto 40px;
 opacity: 0.8;
 line-height: 1.6;
 }
 footer {
 padding: 50px 10%;
 background: var(--dark);
 border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 .footer-content {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: 30px;
 margin-bottom: 40px;
 }
 .footer-column h3 {
 font-size: 18px;
 margin-bottom: 20px;
 position: relative;
 padding-bottom: 10px;
 }
 .footer-column h3::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 50px;
 height: 2px;
 background: var(--gradient);
 }
 .footer-column ul {
 list-style: none;
 }
 .footer-column ul li {
 margin-bottom: 10px;
 }
 .footer-column ul li a {
 text-decoration: none;
 color: var(--light);
 opacity: 0.8;
 transition: 0.3s;
 }
 .footer-column ul li a:hover {
 opacity: 1;
 color: var(--secondary);
 }
 .social-links {
 display: flex;
 gap: 15px;
 }
 .social-links a {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.1);
 color: var(--light);
 transition: 0.3s;
 }
 .social-links a:hover {
 background: var(--gradient);
 transform: translateY(-3px);
 }
 .copyright {
 text-align: center;
 padding-top: 30px;
 border-top: 1px solid rgba(255, 255, 255, 0.1);
 opacity: 0.6;
 font-size: 14px;
 }
 /* Responsive styles */
 @media (max-width: 1200px) {
 .hero-image {
 width: 400px;
 height: 400px;
 }
 }
 @media (max-width: 992px) {
 .hero {
 flex-direction: column;
 text-align: center;
 padding-top: 150px;
 }
 .hero-content {
 max-width: 100%;
 margin-bottom: 50px;
 }
 .hero-image {
 position: relative;
 right: auto;
 margin: 0 auto;
 }
 }
 @media (max-width: 768px) {
 header {
 padding: 15px 5%;
 }
 .hero {
 padding: 150px 5% 50px;
 }
 .hero-content h1 {
 font-size: 42px;
 }
 .hero-image {
 width: 300px;
 height: 300px;
 }
 .quantum-icon {
 font-size: 150px;
 }
 .features, .courses, .cta {
 padding: 70px 5%;
 }
 .section-title h2 {
 font-size: 36px;
 }
 }
 @media (max-width: 576px) {
 nav ul {
 display: none;
 }
 .hero-content h1 {
 font-size: 36px;
 }
 .hero-image {
 width: 250px;
 height: 250px;
 }
 .quantum-icon {
 font-size: 120px;
 }
 .features-grid, .courses-grid {
 grid-template-columns: 1fr;
 }
 }
 /* Animation classes */
 .animate {
 opacity: 0;
 transform: translateY(30px);
 transition: 0.5s;
 }
 .animate.show {
 opacity: 1;
 transform: translateY(0);
 }
 </style>
</head>
<body>
 <header>
 <div class="logo">QuantumLeap</div>
 <nav>
 <ul>
 <li><a href="#features">Features</a></li>
 <li><a href="#courses">Courses</a></li>
 <li><a href="#community">Community</a></li>
 <li><a href="#about">About</a></li>
 <li><a href="#contact">Contact</a></li>
 </ul>
 </nav>
 <a href="#signup" class="btn">Get Started</a>
 </header>
<section class="hero">
 <div class="hero-content animate">
 <h1>Unlock the <span>Future</span> of Computing</h1>
 <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>
 <div style="display: flex; gap: 15px;">
 <a href="#courses" class="btn">Explore Courses</a>
 <a href="#demo" class="btn" style="background: transparent; border: 1px solid var(--secondary);">Watch Demo</a>
 </div>
 </div>
 <div class="hero-image">
 <i class="fas fa-atom quantum-icon"></i>
 </div>
 </section>
<section class="features" id="features">
 <div class="section-title animate">
 <h2>Why Learn Quantum Computing?</h2>
 <p>Quantum computing is the next frontier in technology. Our platform makes this complex field accessible through innovative teaching methods.</p>
 </div>
 <div class="features-grid">
 <div class="feature-card animate" style="transition-delay: 0.1s;">
 <div class="feature-icon">
 <i class="fas fa-bolt"></i>
 </div>
 <h3>Exponential Speed</h3>
 <p>Understand how quantum computers can solve problems exponentially faster than classical computers for specific applications.</p>
 </div>
 <div class="feature-card animate" style="transition-delay: 0.2s;">
 <div class="feature-icon">
 <i class="fas fa-lock"></i>
 </div>
 <h3>Quantum Security</h3>
 <p>Learn about quantum cryptography and how it will revolutionize data security in the coming years.</p>
 </div>
 <div class="feature-card animate" style="transition-delay: 0.3s;">
 <div class="feature-icon">
 <i class="fas fa-flask"></i>
 </div>
 <h3>Material Science</h3>
 <p>Discover how quantum computing will enable breakthroughs in chemistry and material science.</p>
 </div>
 <div class="feature-card animate" style="transition-delay: 0.4s;">
 <div class="feature-icon">
 <i class="fas fa-chart-line"></i>
 </div>
 <h3>Financial Modeling</h3>
 <p>Explore quantum algorithms for optimization problems that will transform financial markets.</p>
 </div>
 <div class="feature-card animate" style="transition-delay: 0.5s;">
 <div class="feature-icon">
 <i class="fas fa-robot"></i>
 </div>
 <h3>Machine Learning</h3>
 <p>Dive into quantum machine learning and how it will enhance AI capabilities beyond classical limits.</p>
 </div>
 <div class="feature-card animate" style="transition-delay: 0.6s;">
 <div class="feature-icon">
 <i class="fas fa-graduation-cap"></i>
 </div>
 <h3>Future-Proof Career</h3>
 <p>Position yourself at the forefront of technology with skills that will be in high demand as quantum computing matures.</p>
 </div>
 </div>
 </section>
<section class="courses" id="courses">
 <div class="section-title animate">
 <h2>Our Quantum Courses</h2>
 <p>From foundational concepts to advanced algorithms, we have the perfect learning path for your quantum journey.</p>
 </div>
 <div class="courses-grid">
 <div class="course-card animate" style="transition-delay: 0.1s;">
 <div class="course-image">
 <i class="fas fa-question-circle"></i>
 </div>
 <div class="course-content">
 <h3>Quantum Computing Fundamentals</h3>
 <p>Start with the basics of quantum mechanics, qubits, and simple quantum circuits. No prior quantum knowledge required.</p>
 <div class="course-meta">
 <span class="course-duration"><i class="far fa-clock"></i> 6 Weeks</span>
 <span class="course-level"><i class="fas fa-signal"></i> Beginner</span>
 </div>
 </div>
 </div>
 <div class="course-card animate" style="transition-delay: 0.2s;">
 <div class="course-image">
 <i class="fas fa-code"></i>
 </div>
 <div class="course-content">
 <h3>Quantum Programming with Qiskit</h3>
 <p>Learn to program real quantum computers using IBM's Qiskit framework. Hands-on experience with quantum gates and algorithms.</p>
 <div class="course-meta">
 <span class="course-duration"><i class="far fa-clock"></i> 8 Weeks</span>
 <span class="course-level"><i class="fas fa-signal"></i> Intermediate</span>
 </div>
 </div>
 </div>
 <div class="course-card animate" style="transition-delay: 0.3s;">
 <div class="course-image">
 <i class="fas fa-project-diagram"></i>
 </div>
 <div class="course-content">
 <h3>Quantum Algorithms</h3>
 <p>Master Shor's, Grover's, and other quantum algorithms that demonstrate the power of quantum computation.</p>
 <div class="course-meta">
 <span class="course-duration"><i class="far fa-clock"></i> 10 Weeks</span>
 <span class="course-level"><i class="fas fa-signal"></i> Advanced</span>
 </div>
 </div>
 </div>
 <div class="course-card animate" style="transition-delay: 0.4s;">
 <div class="course-image">
 <i class="fas fa-shield-alt"></i>
 </div>
 <div class="course-content">
 <h3>Quantum Cryptography</h3>
 <p>Explore quantum key distribution and post-quantum cryptography to understand the future of secure communication.</p>
 <div class="course-meta">
 <span class="course-duration"><i class="far fa-clock"></i> 6 Weeks</span>
 <span class="course-level"><i class="fas fa-signal"></i> Intermediate</span>
 </div>
 </div>
 </div>
 <div class="course-card animate" style="transition-delay: 0.5s;">
 <div class="course-image">
 <i class="fas fa-brain"></i>
 </div>
 <div class="course-content">
 <h3>Quantum Machine Learning</h3>
 <p>Combine quantum computing with machine learning to explore new frontiers in artificial intelligence.</p>
 <div class="course-meta">
 <span class="course-duration"><i class="far fa-clock"></i> 8 Weeks</span>
 <span class="course-level"><i class="fas fa-signal"></i> Advanced</span>
 </div>
 </div>
 </div>
 <div class="course-card animate" style="transition-delay: 0.6s;">
 <div class="course-image">
 <i class="fas fa-industry"></i>
 </div>
 <div class="course-content">
 <h3>Quantum Applications</h3>
 <p>Discover real-world applications of quantum computing across industries from finance to pharmaceuticals.</p>
 <div class="course-meta">
 <span class="course-duration"><i class="far fa-clock"></i> 4 Weeks</span>
 <span class="course-level"><i class="fas fa-signal"></i> All Levels</span>
 </div>
 </div>
 </div>
 </div>
 </section>
<section class="cta" id="signup">
 <div class="section-title animate">
 <h2>Ready to Quantum Leap Ahead?</h2>
 <p>Join thousands of students who are preparing for the quantum revolution. Start learning today and be part of shaping tomorrow's technology.</p>
 <a href="#signup" class="btn" style="margin-top: 30px;">Enroll Now - Free Trial Available</a>
 </div>
 </section>
<footer>
 <div class="footer-content">
 <div class="footer-column">
 <h3>QuantumLeap</h3>
 <p>Making quantum computing education accessible to everyone. Our mission is to demystify quantum technologies and prepare the workforce of the future.</p>
 <div class="social-links">
 <a href="#"><i class="fab fa-twitter"></i></a>
 <a href="#"><i class="fab fa-linkedin"></i></a>
 <a href="#"><i class="fab fa-github"></i></a>
 <a href="#"><i class="fab fa-youtube"></i></a>
 </div>
 </div>
 <div class="footer-column">
 <h3>Quick Links</h3>
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#features">Features</a></li>
 <li><a href="#courses">Courses</a></li>
 <li><a href="#about">About Us</a></li>
 <li><a href="#contact">Contact</a></li>
 </ul>
 </div>
 <div class="footer-column">
 <h3>Resources</h3>
 <ul>
 <li><a href="#">Blog</a></li>
 <li><a href="#">Documentation</a></li>
 <li><a href="#">Quantum Glossary</a></li>
 <li><a href="#">Research Papers</a></li>
 <li><a href="#">Community Forum</a></li>
 </ul>
 </div>
 <div class="footer-column">
 <h3>Contact</h3>
 <ul>
 <li><i class="fas fa-envelope"></i> hello@quantumleap.edu</li>
 <li><i class="fas fa-phone"></i> +1 (555) 123-4567</li>
 <li><i class="fas fa-map-marker-alt"></i> Quantum Valley, Tech City</li>
 </ul>
 </div>
 </div>
 <div class="copyright">
 <p>&copy; 2023 QuantumLeap. All rights reserved. | Designed with <i class="fas fa-heart" style="color: var(--secondary);"></i> for the quantum future</p>
 </div>
 </footer>
<script>
 // Animation on scroll
 document.addEventListener('DOMContentLoaded', () => {
 const animateElements = document.querySelectorAll('.animate');
const observer = new IntersectionObserver((entries) => {
 entries.forEach(entry => {
 if (entry.isIntersecting) {
 entry.target.classList.add('show');
 }
 });
 }, {
 threshold: 0.1
 });
 animateElements.forEach(el => observer.observe(el));
 // Smooth scrolling for navigation
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 anchor.addEventListener('click', function(e) {
 e.preventDefault();
const targetId = this.getAttribute('href');
 if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
 if (targetElement) {
 window.scrollTo({
 top: targetElement.offsetTop - 80,
 behavior: 'smooth'
 });
 }
 });
 });
 // Header scroll effect
 window.addEventListener('scroll', () => {
 const header = document.querySelector('header');
 if (window.scrollY > 50) {
 header.style.boxShadow = '0 5px 20px rgba(0, 0, 0, 0.3)';
 } else {
 header.style.boxShadow = 'none';
 }
 });
 });
 </script>
<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>
</html>