Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hello World - Modern Experience</title> | |
| <!-- Google Fonts for Typography --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700;900&family=Space+Grotesk:wght@400;700&display=swap" rel="stylesheet"> | |
| <!-- FontAwesome for Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* ========================================= | |
| CSS VARIABLES & RESET | |
| ========================================= */ | |
| :root { | |
| --bg-deep: #050505; | |
| --bg-surface: #121212; | |
| --accent-primary: #6C63FF; | |
| --accent-secondary: #00E5FF; | |
| --accent-tertiary: #FF0055; | |
| --text-main: #FFFFFF; | |
| --text-muted: #A0A0A0; | |
| --glass-bg: rgba(255, 255, 255, 0.03); | |
| --glass-border: rgba(255, 255, 255, 0.1); | |
| --card-radius: 24px; | |
| --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Outfit', sans-serif; | |
| background-color: var(--bg-deep); | |
| color: var(--text-main); | |
| overflow-x: hidden; | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* ========================================= | |
| BACKGROUND ANIMATION | |
| ========================================= */ | |
| .ambient-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| z-index: -1; | |
| background: | |
| radial-gradient(circle at 15% 50%, rgba(108, 99, 255, 0.15), transparent 25%), | |
| radial-gradient(circle at 85% 30%, rgba(0, 229, 255, 0.15), transparent 25%); | |
| animation: pulseBg 10s ease-in-out infinite alternate; | |
| } | |
| .grid-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| mask-image: radial-gradient(circle at center, black 40%, transparent 100%); | |
| z-index: -1; | |
| pointer-events: none; | |
| } | |
| @keyframes pulseBg { | |
| 0% { transform: scale(1); opacity: 0.8; } | |
| 100% { transform: scale(1.1); opacity: 1; } | |
| } | |
| /* ========================================= | |
| HEADER & NAVIGATION | |
| ========================================= */ | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1.5rem 5%; | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| z-index: 100; | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid var(--glass-border); | |
| background: rgba(5, 5, 5, 0.5); | |
| } | |
| .logo { | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-weight: 700; | |
| font-size: 1.5rem; | |
| letter-spacing: -0.02em; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .logo i { | |
| color: var(--accent-primary); | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 2rem; | |
| list-style: none; | |
| } | |
| .nav-links a { | |
| text-decoration: none; | |
| color: var(--text-muted); | |
| font-weight: 500; | |
| transition: var(--transition-smooth); | |
| font-size: 0.95rem; | |
| position: relative; | |
| } | |
| .nav-links a:hover, .nav-links a.active { | |
| color: var(--text-main); | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--accent-secondary); | |
| transition: var(--transition-smooth); | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| .btn-cta { | |
| padding: 0.8rem 1.5rem; | |
| background: linear-gradient(135deg, var(--accent-primary), #5a52d5); | |
| border: none; | |
| border-radius: 50px; | |
| color: white; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition-smooth); | |
| box-shadow: 0 4px 15px rgba(108, 99, 255, 0.3); | |
| text-decoration: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn-cta:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 25px rgba(108, 99, 255, 0.5); | |
| } | |
| /* ========================================= | |
| HERO SECTION | |
| ========================================= */ | |
| main { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 8rem 2rem 4rem; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .hero-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 0.5rem 1rem; | |
| background: var(--glass-bg); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 50px; | |
| font-size: 0.85rem; | |
| color: var(--accent-secondary); | |
| margin-bottom: 2rem; | |
| backdrop-filter: blur(5px); | |
| animation: fadeInDown 0.8s ease-out; | |
| } | |
| h1 { | |
| font-size: clamp(3rem, 8vw, 6rem); | |
| line-height: 1.1; | |
| margin-bottom: 1.5rem; | |
| background: linear-gradient(to right, #fff, #a0a0a0); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| animation: fadeInUp 0.8s ease-out 0.2s backwards; | |
| } | |
| .highlight { | |
| color: var(--accent-primary); | |
| -webkit-text-fill-color: var(--accent-primary); | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .highlight::before { | |
| content: ''; | |
| position: absolute; | |
| bottom: 5px; | |
| left: 0; | |
| width: 100%; | |
| height: 15px; | |
| background: rgba(108, 99, 255, 0.2); | |
| z-index: -1; | |
| border-radius: 4px; | |
| } | |
| p.hero-desc { | |
| font-size: clamp(1rem, 2vw, 1.25rem); | |
| color: var(--text-muted); | |
| max-width: 600px; | |
| margin: 0 auto 3rem; | |
| animation: fadeInUp 0.8s ease-out 0.4s backwards; | |
| } | |
| .hero-actions { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| animation: fadeInUp 0.8s ease-out 0.6s backwards; | |
| } | |
| .btn-outline { | |
| padding: 0.8rem 1.5rem; | |
| background: transparent; | |
| border: 1px solid var(--glass-border); | |
| border-radius: 50px; | |
| color: var(--text-main); | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: var(--transition-smooth); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn-outline:hover { | |
| border-color: var(--text-main); | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| /* ========================================= | |
| 3D FLOATING CARDS (CSS ONLY) | |
| ========================================= */ | |
| .cards-container { | |
| display: flex; | |
| gap: 2rem; | |
| margin-top: 4rem; | |
| perspective: 1000px; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| .card { | |
| width: 300px; | |
| height: 400px; | |
| background: var(--glass-bg); | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--card-radius); | |
| padding: 2rem; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| transition: var(--transition-smooth); | |
| transform-style: preserve-3d; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.06), transparent 40%); | |
| z-index: 2; | |
| opacity: 0; | |
| transition: opacity 0.5s; | |
| pointer-events: none; | |
| } | |
| .card:hover::before { | |
| opacity: 1; | |
| } | |
| .card:hover { | |
| transform: translateY(-10px) scale(1.02); | |
| border-color: rgba(255, 255, 255, 0.3); | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.4); | |
| } | |
| .card-icon { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 16px; | |
| background: rgba(255, 255, 255, 0.05); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| color: var(--accent-secondary); | |
| margin-bottom: 1.5rem; | |
| transform: translateZ(20px); /* 3D effect */ | |
| } | |
| .card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 0.5rem; | |
| transform: translateZ(30px); | |
| } | |
| .card p { | |
| color: var(--text-muted); | |
| font-size: 0.95rem; | |
| transform: translateZ(20px); | |
| } | |
| .card-visual { | |
| height: 150px; | |
| width: 100%; | |
| background: linear-gradient(135deg, rgba(255,255,255,0.05), transparent); | |
| border-radius: 12px; | |
| margin-top: auto; | |
| position: relative; | |
| overflow: hidden; | |
| transform: translateZ(20px); | |
| } | |
| .card-visual i { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-size: 4rem; | |
| color: rgba(255,255,255,0.1); | |
| } | |
| /* ========================================= | |
| FOOTER | |
| ========================================= */ | |
| footer { | |
| text-align: center; | |
| padding: 2rem; | |
| color: var(--text-muted); | |
| font-size: 0.9rem; | |
| border-top: 1px solid var(--glass-border); | |
| background: rgba(5, 5, 5, 0.8); | |
| } | |
| .footer-link { | |
| color: var(--accent-primary); | |
| text-decoration: none; | |
| font-weight: 700; | |
| transition: 0.3s; | |
| } | |
| .footer-link:hover { | |
| color: var(--accent-secondary); | |
| text-shadow: 0 0 10px rgba(0, 229, 255, 0.5); | |
| } | |
| /* ========================================= | |
| ANIMATIONS & RESPONSIVE | |
| ========================================= */ | |
| @keyframes fadeInUp { | |
| from { opacity: 0; transform: translateY(30px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes fadeInDown { | |
| from { opacity: 0; transform: translateY(-30px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @media (max-width: 768px) { | |
| h1 { font-size: 3rem; } | |
| .nav-links { display: none; } /* Simplified mobile view */ | |
| .cards-container { flex-direction: column; align-items: center; } | |
| .card { width: 100%; max-width: 320px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Ambient Background --> | |
| <div class="ambient-bg"></div> | |
| <div class="grid-overlay"></div> | |
| <!-- Header --> | |
| <header> | |
| <div class="logo"> | |
| <i class="fa-solid fa-cube"></i> HELLO.WORLD | |
| </div> | |
| <nav> | |
| <ul class="nav-links"> | |
| <li><a href="#" class="active">Home</a></li> | |
| <li><a href="#">Features</a></li> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| </nav> | |
| <a href="#" class="btn-cta"> | |
| Get Started <i class="fa-solid fa-arrow-right"></i> | |
| </a> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <div class="hero-badge"> | |
| <i class="fa-solid fa-bolt"></i> Version 2.0 Now Live | |
| </div> | |
| <h1> | |
| Welcome to the <br> | |
| <span class="highlight">Future</span> of Web | |
| </h1> | |
| <p class="hero-desc"> | |
| Experience the next generation of digital interfaces. Built with modern HTML, CSS, and JavaScript, designed for speed, accessibility, and visual impact. | |
| </p> | |
| <div class="hero-actions"> | |
| <button class="btn-cta" onclick="alert('Welcome to the future!')"> | |
| Explore Now | |
| </button> | |
| <button class="btn-outline"> | |
| <i class="fa-brands fa-github"></i> View Source | |
| </button> | |
| </div> | |
| <!-- 3D Interactive Cards --> | |
| <div class="cards-container"> | |
| <div class="card" data-tilt> | |
| <div class="card-icon"> | |
| <i class="fa-solid fa-rocket"></i> | |
| </div> | |
| <div> | |
| <h3>Fast Performance</h3> | |
| <p>Optimized rendering with zero bloat. Experience smooth 60fps animations.</p> | |
| </div> | |
| <div class="card-visual"> | |
| <i class="fa-solid fa-bolt"></i> | |
| </div> | |
| </div> | |
| <div class="card" data-tilt> | |
| <div class="card-icon" style="color: var(--accent-tertiary);"> | |
| <i class="fa-solid fa-shield-halved"></i> | |
| </div> | |
| <div> | |
| <h3>Secure & Private</h3> | |
| <p>Your data stays on your device. Local-first architecture with no tracking.</p> | |
| </div> | |
| <div class="card-visual"> | |
| <i class="fa-solid fa-lock"></i> | |
| </div> | |
| </div> | |
| <div class="card" data-tilt> | |
| <div class="card-icon" style="color: var(--accent-secondary);"> | |
| <i class="fa-solid fa-wand-magic-sparkles"></i> | |
| </div> | |
| <div> | |
| <h3>Modern Design</h3> | |
| <p>Built with Glassmorphism and CSS Grid. A responsive layout for all devices.</p> | |
| </div> | |
| <div class="card-visual"> | |
| <i class="fa-solid fa-layer-group"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer> | |
| <p>© 2023 Hello World Application. All rights reserved.</p> | |
| <p style="margin-top: 0.5rem;"> | |
| Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="footer-link">anycoder</a> | |
| </p> | |
| </footer> | |
| <!-- JavaScript for Interactions --> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // 1. Dynamic Mouse Follow Effect for Cards | |
| const cards = document.querySelectorAll('.card'); | |
| cards.forEach(card => { | |
| card.addEventListener('mousemove', (e) => { | |
| const rect = card.getBoundingClientRect(); | |
| const x = e.clientX - rect.left; | |
| const y = e.clientY - rect.top; | |
| // Update CSS variable for gradient | |
| card.style.setProperty('--mouse-x', `${x}px`); | |
| card.style.setProperty('--mouse-y', `${y}px`); | |
| }); | |
| }); | |
| // 2. Simple Intersection Observer for Scroll Animations | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: "0px 0px -50px 0px" | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = '1'; | |
| entry.target.style.transform = 'translateY(0)'; | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, observerOptions); | |
| // Select elements to animate on scroll | |
| const animatedElements = document.querySelectorAll('.card'); | |
| animatedElements.forEach(el => { | |
| el.style.opacity = '0'; | |
| el.style.transform = 'translateY(50px)'; | |
| el.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out'; | |
| observer.observe(el); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |