Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Anycoder Coffee Shop</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #6F4E37; | |
| --secondary: #8B4513; | |
| --accent: #D2691E; | |
| --light: #F5F5DC; | |
| --dark: #3E2723; | |
| --text: #212121; | |
| --text-light: #FFFFFF; | |
| --shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| --transition: all 0.3s ease; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| color: var(--text); | |
| background-color: var(--light); | |
| line-height: 1.6; | |
| } | |
| .container { | |
| width: 90%; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| /* Header Styles */ | |
| header { | |
| background-color: var(--primary); | |
| color: var(--text-light); | |
| padding: 1rem 0; | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| box-shadow: var(--shadow); | |
| } | |
| .header-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| } | |
| .logo i { | |
| color: var(--accent); | |
| } | |
| nav ul { | |
| display: flex; | |
| list-style: none; | |
| gap: 2rem; | |
| } | |
| nav a { | |
| color: var(--text-light); | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| padding: 0.5rem 1rem; | |
| border-radius: 4px; | |
| } | |
| nav a:hover { | |
| background-color: var(--secondary); | |
| } | |
| .mobile-menu-btn { | |
| display: none; | |
| background: none; | |
| border: none; | |
| color: var(--text-light); | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| background: linear-gradient(rgba(62, 39, 35, 0.7), rgba(62, 39, 35, 0.7)), | |
| url('https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| height: 80vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| color: var(--text-light); | |
| } | |
| .hero-content { | |
| max-width: 800px; | |
| padding: 2rem; | |
| } | |
| .hero h1 { | |
| font-size: 3.5rem; | |
| margin-bottom: 1rem; | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); | |
| } | |
| .hero p { | |
| font-size: 1.5rem; | |
| margin-bottom: 2rem; | |
| text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); | |
| } | |
| .btn { | |
| display: inline-block; | |
| background-color: var(--accent); | |
| color: var(--text-light); | |
| padding: 1rem 2rem; | |
| border-radius: 30px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: var(--transition); | |
| border: none; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| } | |
| .btn:hover { | |
| background-color: var(--secondary); | |
| transform: translateY(-3px); | |
| box-shadow: var(--shadow); | |
| } | |
| /* About Section */ | |
| .about { | |
| padding: 5rem 0; | |
| background-color: var(--text-light); | |
| } | |
| .about-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 3rem; | |
| align-items: center; | |
| } | |
| .about-text h2 { | |
| font-size: 2.5rem; | |
| color: var(--dark); | |
| margin-bottom: 1.5rem; | |
| } | |
| .about-text p { | |
| margin-bottom: 1rem; | |
| font-size: 1.1rem; | |
| } | |
| .about-image { | |
| border-radius: 10px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| } | |
| .about-image img { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| transition: var(--transition); | |
| } | |
| .about-image img:hover { | |
| transform: scale(1.05); | |
| } | |
| /* Menu Section */ | |
| .menu { | |
| padding: 5rem 0; | |
| background-color: var(--light); | |
| } | |
| .section-title { | |
| text-align: center; | |
| font-size: 2.5rem; | |
| color: var(--dark); | |
| margin-bottom: 3rem; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| display: block; | |
| width: 100px; | |
| height: 4px; | |
| background-color: var(--accent); | |
| margin: 0.5rem auto; | |
| border-radius: 2px; | |
| } | |
| .menu-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .menu-item { | |
| background-color: var(--text-light); | |
| border-radius: 10px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| } | |
| .menu-item:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); | |
| } | |
| .menu-item img { | |
| width: 100%; | |
| height: 200px; | |
| object-fit: cover; | |
| } | |
| .menu-item-content { | |
| padding: 1.5rem; | |
| } | |
| .menu-item h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 0.5rem; | |
| color: var(--dark); | |
| } | |
| .menu-item p { | |
| color: #666; | |
| margin-bottom: 1rem; | |
| } | |
| .price { | |
| font-weight: 700; | |
| color: var(--accent); | |
| font-size: 1.2rem; | |
| } | |
| /* Services Section */ | |
| .services { | |
| padding: 5rem 0; | |
| background-color: var(--dark); | |
| color: var(--text-light); | |
| } | |
| .services-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .service-card { | |
| text-align: center; | |
| padding: 2rem; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| border-radius: 10px; | |
| transition: var(--transition); | |
| } | |
| .service-card:hover { | |
| background-color: rgba(255, 255, 255, 0.2); | |
| transform: scale(1.05); | |
| } | |
| .service-icon { | |
| font-size: 3rem; | |
| color: var(--accent); | |
| margin-bottom: 1rem; | |
| } | |
| .service-card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| /* Testimonials */ | |
| .testimonials { | |
| padding: 5rem 0; | |
| background-color: var(--text-light); | |
| } | |
| .testimonials-container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .testimonial { | |
| background-color: var(--light); | |
| padding: 2rem; | |
| border-radius: 10px; | |
| box-shadow: var(--shadow); | |
| margin-bottom: 2rem; | |
| position: relative; | |
| } | |
| .testimonial::before { | |
| content: '"'; | |
| font-size: 5rem; | |
| position: absolute; | |
| top: -20px; | |
| left: 10px; | |
| color: var(--accent); | |
| opacity: 0.2; | |
| font-family: Georgia, serif; | |
| } | |
| .testimonial p { | |
| font-style: italic; | |
| margin-bottom: 1rem; | |
| } | |
| .customer { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .customer img { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| } | |
| .customer-info h4 { | |
| margin-bottom: 0.2rem; | |
| } | |
| .rating { | |
| color: var(--accent); | |
| } | |
| /* Contact Section */ | |
| .contact { | |
| padding: 5rem 0; | |
| background-color: var(--light); | |
| } | |
| .contact-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 3rem; | |
| } | |
| .contact-info h3 { | |
| font-size: 1.8rem; | |
| margin-bottom: 1.5rem; | |
| color: var(--dark); | |
| } | |
| .contact-detail { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .contact-icon { | |
| font-size: 1.5rem; | |
| color: var(--accent); | |
| min-width: 40px; | |
| } | |
| .contact-form input, | |
| .contact-form textarea { | |
| width: 100%; | |
| padding: 0.8rem; | |
| margin-bottom: 1rem; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| font-family: inherit; | |
| } | |
| .contact-form textarea { | |
| height: 150px; | |
| resize: vertical; | |
| } | |
| /* Footer */ | |
| footer { | |
| background-color: var(--primary); | |
| color: var(--text-light); | |
| padding: 3rem 0 1.5rem; | |
| } | |
| .footer-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .footer-section h4 { | |
| font-size: 1.3rem; | |
| margin-bottom: 1rem; | |
| position: relative; | |
| padding-bottom: 0.5rem; | |
| } | |
| .footer-section h4::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 50px; | |
| height: 2px; | |
| background-color: var(--accent); | |
| } | |
| .footer-section ul { | |
| list-style: none; | |
| } | |
| .footer-section ul li { | |
| margin-bottom: 0.5rem; | |
| } | |
| .footer-section a { | |
| color: var(--text-light); | |
| text-decoration: none; | |
| transition: var(--transition); | |
| } | |
| .footer-section a:hover { | |
| color: var(--accent); | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .social-links a { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 40px; | |
| height: 40px; | |
| background-color: var(--secondary); | |
| border-radius: 50%; | |
| transition: var(--transition); | |
| } | |
| .social-links a:hover { | |
| background-color: var(--accent); | |
| transform: translateY(-3px); | |
| } | |
| .copyright { | |
| text-align: center; | |
| padding-top: 1.5rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .header-container { | |
| flex-wrap: wrap; | |
| } | |
| nav ul { | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| width: 100%; | |
| margin-top: 1rem; | |
| } | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| } | |
| .hero p { | |
| font-size: 1.2rem; | |
| } | |
| .about-content { | |
| grid-template-columns: 1fr; | |
| gap: 2rem; | |
| } | |
| .about-image { | |
| order: -1; | |
| } | |
| } | |
| @media (max-width: 576px) { | |
| .mobile-menu-btn { | |
| display: block; | |
| } | |
| nav ul { | |
| display: none; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| width: 100%; | |
| background-color: var(--secondary); | |
| padding: 1rem; | |
| border-radius: 5px; | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| box-shadow: var(--shadow); | |
| } | |
| nav ul.active { | |
| display: flex; | |
| } | |
| .hero { | |
| height: 60vh; | |
| } | |
| .hero h1 { | |
| font-size: 2rem; | |
| } | |
| .section-title { | |
| font-size: 2rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <div class="container header-container"> | |
| <div class="logo"> | |
| <i class="fas fa-mug-hot"></i> | |
| <span>Anycoder Coffee</span> | |
| </div> | |
| <button class="mobile-menu-btn"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <nav> | |
| <ul> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#menu">Menu</a></li> | |
| <li><a href="#services">Services</a></li> | |
| <li><a href="#testimonials">Testimonials</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero" id="home"> | |
| <div class="hero-content"> | |
| <h1>Experience the Perfect Brew</h1> | |
| <p>Where coding passion meets coffee excellence. Fuel your creativity with our premium selections.</p> | |
| <a href="#menu" class="btn">Explore Our Menu</a> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="about" id="about"> | |
| <div class="container about-content"> | |
| <div class="about-text"> | |
| <h2>About Anycoder Coffee</h2> | |
| <p>Anycoder Coffee was born from the intersection of two passions: exceptional coffee and the art of coding. We understand that every great project starts with a great cup of coffee, and we're here to fuel your creativity.</p> | |
| <p>Our baristas are trained to perfection, bringing the same precision to your cup that you bring to your code. We source our beans directly from sustainable farms, ensuring quality from farm to cup.</p> | |
| <p>Whether you're debugging an algorithm or bringing a new app to life, our cozy environment and premium coffee will provide the perfect backdrop for your coding sessions.</p> | |
| <a href="#services" class="btn">Our Services</a> | |
| </div> | |
| <div class="about-image"> | |
| <video controls style="max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0;"><source src="file:///tmp/anycoder_videos/b22e028d-08d1-4d12-8837-5f4e84cf099c.mp4" type="video/mp4" />Your browser does not support the video tag.</video> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Menu Section --> | |
| <section class="menu" id="menu"> | |
| <div class="container"> | |
| <h2 class="section-title">Our Coffee Menu</h2> | |
| <div class="menu-grid"> | |
| <div class="menu-item"> | |
| <img src="https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Espresso"> | |
| <div class="menu-item-content"> | |
| <h3>Classic Espresso</h3> | |
| <p>Strong, rich, and bold - our signature espresso blend crafted to perfection</p> | |
| <div class="price">$3.50</div> | |
| </div> | |
| </div> | |
| <div class="menu-item"> | |
| <img src="https://images.unsplash.com/photo-1505253668822-4d16ac0907a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Cappuccino"> | |
| <div class="menu-item-content"> | |
| <h3>Coder's Cappuccino</h3> | |
| <p>Smooth espresso layered with perfectly frothed milk, topped with cocoa</p> | |
| <div class="price">$4.75</div> | |
| </div> | |
| </div> | |
| <div class="menu-item"> | |
| <img src="https://images.unsplash.com/photo-1561040046-025d87f779a7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Latte"> | |
| <div class="menu-item-content"> | |
| <h3>Developer's Latte</h3> | |
| <p>Delicate balance of espresso and steamed milk with vanilla notes</p> | |
| <div class="price">$5.25</div> | |
| </div> | |
| </div> | |
| <div class="menu-item"> | |
| <img src="https://images.unsplash.com/photo-1611854779393-1b2da9d0b4e7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Cold Brew"> | |
| <div class="menu-item-content"> | |
| <h3>Code Cold Brew</h3> | |
| <p>Slow-steeped concentrate, perfect for long coding sessions</p> | |
| <div class="price">$4.50</div> | |
| </div> | |
| </div> | |
| <div class="menu-item"> | |
| <img src="https://images.unsplash.com/photo-1525475042740-1fc916c6ecac?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Mocha"> | |
| <div class="menu-item-content"> | |
| <h3>Chocolate Mocha</h3> | |
| <p>Espresso with chocolate syrup and steamed milk, topped with whipped cream</p> | |
| <div class="price">$5.75</div> | |
| </div> | |
| </div> | |
| <div class="menu-item"> | |
| <img src="https://images.unsplash.com/photo-1611078489935-0cb9de83b024?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Matcha"> | |
| <div class="menu-item-content"> | |
| <h3>Green Matcha</h3> | |
| <p>Premium ceremonial matcha whisked with steamed milk and honey</p> | |
| <div class="price">$5.00</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section class="services" id="services"> | |
| <div class="container"> | |
| <h2 class="section-title">Our Services</h2> | |
| <div class="services-grid"> | |
| <div class="service-card"> | |
| <div class="service-icon"> | |
| <i class="fas fa-laptop"></i> | |
| </div> | |
| <h3>Coder Workspace</h3> | |
| <p>High-speed WiFi, comfortable seating, and plenty of outlets for your devices</p> | |
| </div> | |
| <div class="service-card"> | |
| <div class="service-icon"> | |
| <i class="fas fa-coffee"></i> | |
| </div> | |
| <h3>Premium Coffee</h3> | |
| <p>Ethically sourced beans roasted fresh for the perfect coding fuel</p> | |
| </div> | |
| <div class="service-card"> | |
| <div class="service-icon"> | |
| <i class="fas fa-briefcase"></i> | |
| </div> | |
| <h3>Coding Events</h3> | |
| <p>Regular workshops, hackathons, and networking events for developers</p> | |
| </div> | |
| <div class="service-card"> | |
| <div class="service-icon"> | |
| <i class="fas fa-wifi"></i> | |
| </div> | |
| <h3>Free WiFi</h3> | |
| <p>Stay connected while enjoying your favorite coffee blends</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="testimonials" id="testimonials"> | |
| <div class="container"> | |
| <h2 class="section-title">What Our Customers Say</h2> | |
| <div class="testimonials-container"> | |
| <div class="testimonial"> | |
| <p>"The perfect spot to code with a great cup of coffee. The atmosphere here helps me focus better than anywhere else. Highly recommended for fellow developers!"</p> | |
| <div class="customer"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer"> | |
| <div class="customer-info"> | |
| <h4>Alex Johnson</h4> | |
| <p>Full Stack Developer</p> | |
| <div class="rating"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial"> | |
| <p>"Anycoder Coffee is more than just a cafe. It's like a community hub for coders. The staff understands the developer lifestyle and really cares about their customers."</p> | |
| <div class="customer"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer"> | |
| <div class="customer-info"> | |
| <h4>Sarah Williams</h4> | |
| <p>UX Designer</p> | |
| <div class="rating"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial"> | |
| <p>"I've been coming here for two years now. The cold brew is my go-to fuel for marathon coding sessions. The ambiance always sparks creativity in me."</p> | |
| <div class="customer"> | |
| <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="Customer"> | |
| <div class="customer-info"> | |
| <h4>Michael Chen</h4> | |
| <p>Software Engineer</p> | |
| <div class="rating"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section class="contact" id="contact"> | |
| <div class="container"> | |
| <h2 class="section-title">Contact Us</h2> | |
| <div class="contact-container"> | |
| <div class="contact-info"> | |
| <h3>Get In Touch</h3> | |
| <div class="contact-detail"> | |
| <div class="contact-icon"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div> | |
| <h4>Location</h4> | |
| <p>123 Code Street, Silicon Valley, CA 94043</p> | |
| </div> | |
| </div> | |
| <div class="contact-detail"> | |
| <div class="contact-icon"> | |
| <i class="fas fa-phone"></i> | |
| </div> | |
| <div> | |
| <h4>Phone</h4> | |
| <p>(123) 456-7890</p> | |
| </div> | |
| </div> | |
| <div class="contact-detail"> | |
| <div class="contact-icon"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div> | |
| <h4>Email</h4> | |
| <p>[email protected]</p> | |
| </div> | |
| </div> | |
| <div class="contact-detail"> | |
| <div class="contact-icon"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <div> | |
| <h4>Hours</h4> | |
| <p>Monday-Friday: 7am - 10pm</p> | |
| <p>Saturday-Sunday: 8am - 9pm</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="contact-form"> | |
| <h3>Send a Message</h3> | |
| <form> | |
| <input type="text" placeholder="Your Name" required> | |
| <input type="email" placeholder="Your Email" required> | |
| <input type="text" placeholder="Subject"> | |
| <textarea placeholder="Your Message" required></textarea> | |
| <button type="submit" class="btn">Send Message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-container"> | |
| <div class="footer-section"> | |
| <h4>Anycoder Coffee</h4> | |
| <p>Where every coder finds their perfect cup and coding inspiration.</p> | |
| <div class="social-links"> | |
| <a href="#"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#"><i class="fab fa-instagram"></i></a> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| <div class="footer-section"> | |
| <h4>Quick Links</h4> | |
| <ul> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#menu">Menu</a></li> | |
| <li><a href="#services">Services</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-section"> | |
| <h4>Popular Items</h4> | |
| <ul> | |
| <li><a href="#">Classic Espresso</a></li> | |
| <li><a href="#">Developer's Latte</a></li> | |
| <li><a href="#">Code Cold Brew</a></li> | |
| <li><a href="#">Chocolate Mocha</a></li> | |
| <li><a href="#">Green Matcha</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-section"> | |
| <h4>Newsletter</h4> | |
| <p>Subscribe to get updates on special events and promotions.</p> | |
| <form> | |
| <input type="email" placeholder="Your Email" style="width: 100%; padding: 0.8rem; margin: 0.5rem 0; border-radius: 5px; border: none;"> | |
| <button type="submit" class="btn" style="width: 100%;">Subscribe</button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="copyright"> | |
| <p>© 2023 Anycoder Coffee Shop. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| const menuBtn = document.querySelector('.mobile-menu-btn'); | |
| const navMenu = document.querySelector('nav ul'); | |
| menuBtn.addEventListener('click', () => { | |
| navMenu.classList.toggle('active'); | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('nav a').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu after clicking | |
| navMenu.classList.remove('active'); | |
| }); | |
| }); | |
| // Add animation to menu items on scroll | |
| const menuItems = document.querySelectorAll('.menu-item'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = 1; | |
| entry.target.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }, { | |
| threshold: 0.1 | |
| }); | |
| menuItems.forEach(item => { | |
| item.style.opacity = 0; | |
| item.style.transform = 'translateY(20px)'; | |
| item.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; | |
| observer.observe(item); | |
| }); | |
| </script> | |
| </body> | |
| </html> |