Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="Anycoder Coffee - Premium specialty coffee for developers and coding enthusiasts"> | |
| <meta name="keywords" content="coffee, specialty coffee, developer coffee, coding fuel, caffeine"> | |
| <title>Anycoder Coffee | Premium Coding Fuel</title> | |
| <link rel="stylesheet" href="assets/css/styles.css"> | |
| <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=Space+Mono:wght@400;700&family=Work+Sans:wght@300;400;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="container"> | |
| <nav class="navbar"> | |
| <div class="logo"> | |
| <h1>Anycoder<span>Coffee</span></h1> | |
| </div> | |
| <ul class="nav-links"> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#menu">Menu</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| <div class="hamburger"> | |
| <i class="fas fa-bars"></i> | |
| </div> | |
| </nav> | |
| </div> | |
| </header> | |
| <main> | |
| <section id="home" class="hero"> | |
| <div class="container"> | |
| <div class="hero-content"> | |
| <h2>Fuel Your Code With The Perfect Blend</h2> | |
| <p>Premium specialty coffee crafted for developers who demand excellence in every line they write.</p> | |
| <div class="hero-video-container"> | |
| <video controls autoplay muted loop playsinline style="max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0; display: block;" onloadstart="this.style.backgroundColor='#f0f0f0'" onerror="this.style.display='none'; console.error('Video failed to load')"><source src="https://huggingface.co/datasets/akhaliq/anycoder-media/resolve/main/video/20250825_191454_448cf5e9_text_to_video_result.mp4" type="video/mp4" /><p style="text-align: center; color: #666;">Your browser does not support the video tag.</p></video> | |
| </div> | |
| <a href="#menu" class="btn-primary">Explore Our Menu</a> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="menu" class="menu-section"> | |
| <div class="container"> | |
| <h2 class="section-title">Our Coffee Menu</h2> | |
| <div class="menu-grid"> | |
| <div class="menu-item"> | |
| <img src="assets/images/espresso.jpg" alt="Espresso"> | |
| <h3>Binary Espresso</h3> | |
| <p>Strong and bold - just like your code. A single shot to jumpstart your development day.</p> | |
| <span class="price">$3.50</span> | |
| </div> | |
| <div class="menu-item"> | |
| <img src="assets/images/cappuccino.jpg" alt="Cappuccino"> | |
| <h3>Code Cappuccino</h3> | |
| <p>Perfectly balanced with layers as clean as your CSS. Frothy goodness for your front-end projects.</p> | |
| <span class="price">$4.75</span> | |
| </div> | |
| <div class="menu-item"> | |
| <img src="assets/images/latte.jpg" alt="Latte"> | |
| <h3>Logic Latte</h3> | |
| <p>Smooth and creamy with a caffeine kick to power through complex algorithms.</p> | |
| <span class="price">$5.25</span> | |
| </div> | |
| <div class="menu-item"> | |
| <img src="assets/images/cold-brew.jpg" alt="Cold Brew"> | |
| <h3>Debug Cold Brew</h3> | |
| <p>Slow brewed to perfection. Cool, calm, and collected for those late-night debugging sessions.</p> | |
| <span class="price">$4.95</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="about" class="about-section"> | |
| <div class="container"> | |
| <div class="about-content"> | |
| <div class="about-text"> | |
| <h2 class="section-title">Why Anycoder Coffee?</h2> | |
| <p>We understand that great code requires great coffee. Our beans are ethically sourced from coding-friendly farms where developers grow the best beans while perfecting their algorithms.</p> | |
| <p>Each blend is specifically crafted to enhance focus, boost creativity, and provide the sustained energy needed for long coding sessions without the jitters.</p> | |
| <ul class="features"> | |
| <li><i class="fas fa-code"></i> Developer-approved roasts</li> | |
| <li><i class="fas fa-mug-hot"></i> Sustainably sourced beans</li> | |
| <li><i class="fas fa-brain"></i> Enhanced cognitive focus</li> | |
| <li><i class="fas fa-moon"></i> Perfect for night owls</li> | |
| </ul> | |
| </div> | |
| <div class="about-image"> | |
| <img src="assets/images/coffee-shop.jpg" alt="Anycoder Coffee Shop"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="contact" class="contact-section"> | |
| <div class="container"> | |
| <h2 class="section-title">Contact Us</h2> | |
| <div class="contact-content"> | |
| <div class="contact-info"> | |
| <h3>Visit Our Shop</h3> | |
| <p><i class="fas fa-map-marker-alt"></i> 1010 Binary Lane, Codeville</p> | |
| <p><i class="fas fa-clock"></i> Open 24/7 for developers</p> | |
| <p><i class="fas fa-phone"></i> (101) 010-1010</p> | |
| <p><i class="fas fa-envelope"></i> code@anycoder.coffee</p> | |
| </div> | |
| <form class="contact-form" id="coffeeForm"> | |
| <h3>Order Your Blend</h3> | |
| <div class="form-group"> | |
| <input type="text" id="name" name="name" placeholder="Your Name" required> | |
| </div> | |
| <div class="form-group"> | |
| <input type="email" id="email" name="email" placeholder="Your Email" required> | |
| </div> | |
| <div class="form-group"> | |
| <select id="coffee" name="coffee" required> | |
| <option value="" disabled selected>Select Your Coffee</option> | |
| <option value="espresso">Binary Espresso</option> | |
| <option value="cappuccino">Code Cappuccino</option> | |
| <option value="latte">Logic Latte</option> | |
| <option value="coldbrew">Debug Cold Brew</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <textarea id="message" name="message" placeholder="Special requests or coding jokes..." rows="4"></textarea> | |
| </div> | |
| <button type="submit" class="btn-primary">Place Order</button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-logo"> | |
| <h2>Anycoder<span>Coffee</span></h2> | |
| <p>Fueling developers since 2023</p> | |
| </div> | |
| <div class="footer-links"> | |
| <a href="#home">Home</a> | |
| <a href="#menu">Menu</a> | |
| <a href="#about">About</a> | |
| <a href="#contact">Contact</a> | |
| </div> | |
| <div class="social-links"> | |
| <a href="#"><i class="fab fa-github"></i></a> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fab fa-instagram"></i></a> | |
| <a href="#"><i class="fab fa-linkedin"></i></a> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>© 2023 Anycoder Coffee. All rights reserved. Crafted with <i class="fas fa-heart"></i> for developers.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="assets/js/script.js"></script> | |
| </body> | |
| </html> |