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="Professional Shipping Solutions - Fast, reliable, and affordable shipping services worldwide"> | |
| <title>Global Shipping Solutions | Professional Logistics Services</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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <nav class="nav container"> | |
| <div class="nav__brand"> | |
| <h2 class="nav__logo">GlobalShip</h2> | |
| </div> | |
| <ul class="nav__menu"> | |
| <li class="nav__item"><a href="#home" class="nav__link">Home</a></li> | |
| <li class="nav__item"><a href="#services" class="nav__link">Services</a></li> | |
| <li class="nav__item"><a href="#tracking" class="nav__link">Tracking</a></li> | |
| <li class="nav__item"><a href="#contact" class="nav__link">Contact</a></li> | |
| </ul> | |
| <div class="nav__toggle"> | |
| <span class="nav__hamburger"></span> | |
| </div> | |
| </nav> | |
| </header> | |
| <main> | |
| <section id="home" class="hero"> | |
| <div class="hero__content container"> | |
| <div class="hero__text"> | |
| <h1 class="hero__title">Global Shipping Made Simple</h1> | |
| <p class="hero__description">Fast, reliable, and affordable shipping solutions for businesses and individuals worldwide. Track your shipments in real-time and get competitive quotes instantly.</p> | |
| <div class="hero__buttons"> | |
| <button class="btn btn--primary" onclick="scrollToSection('tracking')">Track Shipment</button> | |
| <button class="btn btn--secondary" onclick="scrollToSection('services')">Get Quote</button> | |
| </div> | |
| </div> | |
| <div class="hero__image"> | |
| <div class="hero__graphic"> | |
| <div class="hero__world-map"></div> | |
| <div class="hero__shipping-icons"> | |
| <div class="shipping-icon ship"></div> | |
| <div class="shipping-icon plane"></div> | |
| <div class="shipping-icon truck"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hero__built-with"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener">Built with anycoder</a> | |
| </div> | |
| </section> | |
| <section id="services" class="services"> | |
| <div class="container"> | |
| <h2 class="services__title">Our Shipping Services</h2> | |
| <div class="services__grid"> | |
| <div class="service-card"> | |
| <div class="service-card__icon air"></div> | |
| <h3 class="service-card__title">Air Freight</h3> | |
| <p class="service-card__description">Fast and efficient air shipping for time-sensitive deliveries worldwide.</p> | |
| <button class="service-card__btn" onclick="openQuoteModal('Air Freight')">Get Quote</button> | |
| </div> | |
| <div class="service-card"> | |
| <div class="service-card__icon sea"></div> | |
| <h3 class="service-card__title">Sea Freight</h3> | |
| <p class="service-card__description">Cost-effective ocean shipping for large volume and heavy cargo.</p> | |
| <button class="service-card__btn" onclick="openQuoteModal('Sea Freight')">Get Quote</button> | |
| </div> | |
| <div class="service-card"> | |
| <div class="service-card__icon land"></div> | |
| <h3 class="service-card__title">Land Transport</h3> | |
| <p class="service-card__description">Reliable trucking and rail services for domestic and cross-border shipments.</p> | |
| <button class="service-card__btn" onclick="openQuoteModal('Land Transport')">Get Quote</button> | |
| </div> | |
| <div class="service-card"> | |
| <div class="service-card__icon express"></div> | |
| <h3 class="service-card__title">Express Delivery</h3> | |
| <p class="service-card__description">Priority shipping with guaranteed delivery times and real-time tracking.</p> | |
| <button class="service-card__btn" onclick="openQuoteModal('Express Delivery')">Get Quote</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="tracking" class="tracking"> | |
| <div class="container"> | |
| <h2 class="tracking__title">Track Your Shipment</h2> | |
| <div class="tracking__form"> | |
| <input type="text" id="trackingNumber" class="tracking__input" placeholder="Enter tracking number" maxlength="20"> | |
| <button class="tracking__btn" onclick="trackShipment()">Track</button> | |
| </div> | |
| <div id="trackingResult" class="tracking__result"></div> | |
| </div> | |
| </section> | |
| <section id="contact" class="contact"> | |
| <div class="container"> | |
| <h2 class="contact__title">Contact Us</h2> | |
| <div class="contact__content"> | |
| <div class="contact__info"> | |
| <div class="contact__item"> | |
| <h3>Headquarters</h3> | |
| <p>123 Shipping Lane<br>Logistics District<br>New York, NY 10001</p> | |
| </div> | |
| <div class="contact__item"> | |
| <h3>Contact Information</h3> | |
| <p>Phone: +1 (555) 123-SHIP<br>Email: info@globalship.com<br>24/7 Customer Support</p> | |
| </div> | |
| <div class="contact__item"> | |
| <h3>Business Hours</h3> | |
| <p>Monday - Friday: 8AM - 8PM EST<br>Saturday: 9AM - 5PM EST<br>Emergency: 24/7</p> | |
| </div> | |
| </div> | |
| <form class="contact__form" id="contactForm"> | |
| <div class="form__group"> | |
| <input type="text" id="name" class="form__input" placeholder="Your Name" required> | |
| </div> | |
| <div class="form__group"> | |
| <input type="email" id="email" class="form__input" placeholder="Your Email" required> | |
| </div> | |
| <div class="form__group"> | |
| <textarea id="message" class="form__textarea" placeholder="Your Message" rows="5" required></textarea> | |
| </div> | |
| <button type="submit" class="btn btn--primary">Send Message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="footer"> | |
| <div class="container"> | |
| <div class="footer__content"> | |
| <div class="footer__section"> | |
| <h3>GlobalShip</h3> | |
| <p>Your trusted partner in global logistics and shipping solutions.</p> | |
| </div> | |
| <div class="footer__section"> | |
| <h4>Quick Links</h4> | |
| <ul> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#services">Services</a></li> | |
| <li><a href="#tracking">Tracking</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer__section"> | |
| <h4>Services</h4> | |
| <ul> | |
| <li><a href="#services">Air Freight</a></li> | |
| <li><a href="#services">Sea Freight</a></li> | |
| <li><a href="#services">Land Transport</a></li> | |
| <li><a href="#services">Express Delivery</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="footer__bottom"> | |
| <p>© 2024 Global Shipping Solutions. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Quote Modal --> | |
| <div id="quoteModal" class="modal"> | |
| <div class="modal__content"> | |
| <span class="modal__close" onclick="closeQuoteModal()">×</span> | |
| <h2>Get a Quote</h2> | |
| <form id="quoteForm"> | |
| <div class="form__group"> | |
| <label for="serviceType">Service Type</label> | |
| <input type="text" id="serviceType" class="form__input" readonly> | |
| </div> | |
| <div class="form__group"> | |
| <label for="quoteName">Your Name</label> | |
| <input type="text" id="quoteName" class="form__input" required> | |
| </div> | |
| <div class="form__group"> | |
| <label for="quoteEmail">Email</label> | |
| <input type="email" id="quoteEmail" class="form__input" required> | |
| </div> | |
| <div class="form__group"> | |
| <label for="origin">Origin</label> | |
| <input type="text" id="origin" class="form__input" required placeholder="City, Country"> | |
| </div> | |
| <div class="form__group"> | |
| <label for="destination">Destination</label> | |
| <input type="text" id="destination" class="form__input" required placeholder="City, Country"> | |
| </div> | |
| <div class="form__group"> | |
| <label for="weight">Weight (kg)</label> | |
| <input type="number" id="weight" class="form__input" required min="0.1" step="0.1"> | |
| </div> | |
| <button type="submit" class="btn btn--primary">Calculate Quote</button> | |
| </form> | |
| </div> | |
| </div> | |
| <script src="assets/js/script.js"></script> | |
| </body> | |
| </html> |