index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TrackPro Logistics</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="./media/a4383341-b161-48b9-ac61-9669d01ec693.png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
    
    <!-- Navbar Settings -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light" id="navbar">
        <img class="nav-image" src="./media/a4383341-b161-48b9-ac61-9669d01ec693.png" alt="">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
  
        <div class="collapse navbar-collapse" id="navbarSupportedContent"  id="nav-item">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#home" id="nav-link">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about" id="nav-link">About Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#services" id="nav-link">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact" id="nav-link">Contact Us</a>
                </li>
            </ul>
        </div>
    </nav>
    

    <!-- Hero Section -->
    <section class="hero" id="home">
        <div id="hero-carousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#hero-carousel" data-slide-to="0" class="active"></li>
                <li data-target="#hero-carousel" data-slide-to="1"></li>
                <li data-target="#hero-carousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="./media/scene-with-photorealistic-logistics-operations-proceedings.jpg" alt="Hero Image 1">
                    <div class="carousel-caption d-none d-md-block">
                        <h1>Welcome to TrackPro Logistics</h1>
                        <p>We provide reliable and efficient logistics services</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="./media/logistics-means-transport-together-with-technological-futuristic-holograms.jpg" alt="Hero Image 2">
                    <div class="carousel-caption d-none d-md-block">
                        <h1>Fast and Secure Deliveries</h1>
                        <p>Our team ensures your packages arrive on time and in perfect condition</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="./media/depot-worker-checking-logistics-packs-shelves-verifying-order-shipment-retail-store-female-manger-employee-looking-products-boxes-quality-control-handheld-shot.jpg" alt="Hero Image 3">
                    <div class="carousel-caption d-none d-md-block">
                        <h1>Track Your Shipments</h1>
                        <p>Stay updated on your package's journey with our real-time tracking system</p>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#hero-carousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#hero-carousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </section>

    <!-- About -->
    <section class="about" id="about">
        <div class="container">
            <div class="left">
                <img src="./media/delivery-man-riding-his-scooter-new-york-city.jpg" alt="">
            </div>
            <div class="right">
                <h2>ALL ABOUT <em>DELIVERY</em></h2>
                <p>
                    At TrackPro, we redefine the delivery experience, making it seamless, fast, and reliable.
                    Our mission is simple: to connect people and businesses with the things they need, right when they need them.
                    Whether it's a single package or bulk logistics, TrackPro ensures every delivery is handled with utmost care, precision, and efficiency.
                    From advanced tracking technology to real-time updates, we put you in control of your deliveries.
                    Our dedicated team works around the clock, so you don't have to worry about missed deadlines or lost parcels.
                    With TrackPro, you get more than just a delivery service you get a trusted partner committed to making your life easier.
                    Because at TrackPro, it's all about delivery. Your package. Your time. Your way.
                </p>
            </div>
            <p class="about-more">
                Since our inception, TrackPro has achieved remarkable milestones, including delivering over 1 million packages and expanding our reach to cover every major city in the country.
                Our innovative tracking technology provides real-time updates, giving our customers complete visibility and control over their deliveries.
                With a 99% on-time delivery rate, we have established ourselves as a leader in the logistics industry, trusted by individuals and businesses alike.
                Our dedicated team works around the clock, so you don’t have to worry about missed deadlines or lost parcels.
                We’ve built strong partnerships with local and international couriers, enabling us to offer a wide range of delivery options tailored to your needs.
                TrackPro has been recognized for its excellence in customer service, receiving multiple awards for our commitment to reliability and efficiency.
            </p>
        </div>
    </section>

    <!-- Services -->
    <section class="services" id="services">
        <h2>WHAT WE OFFER</h2>
        <div class="wrapper">
            <div class="single-box">
                <div class="content">
                    <h5>Air Freight</h5>
                    <p>
                        Our air freight services provide fast and reliable transportation of goods by air.
                        With a network of partners and carriers, we can handle shipments of all sizes and weights.
                    </p>
                    <a href="#">Learn More</a>
                </div>
            </div>
            <div class="single-box">
                <div class="content">
                    <h5>Road Freight</h5>
                    <p>
                        Our road freight services provide flexible and cost-effective transportation of goods by road.
                        With a fleet of vehicles and a network of partners, we can handle shipments of all sizes and weights.
                    </p>
                    <a href="#">Learn More</a>
                </div>
            </div>
            <div class="single-box">
                <div class="content">
                    <h5>Sea Freight</h5>
                    <p>
                        Our sea freight services provide reliable and efficient transportation of goods by sea.
                        With a network of partners and carriers, we can handle shipments of all sizes and weights.
                    </p>
                    <a href="#">Learn More</a>
                </div>
            </div>
            <div class="single-box">
                <div class="content">
                    <h5>Warehouse Storage</h5>
                    <p>
                        Our warehouse storage services provide secure and efficient storage of goods.
                        With a network of warehouses and a team of experts, we can handle shipments of all sizes and weights.
                    </p>
                    <a href="#">Learn More</a>
                </div>
            </div>
        </div>
    </section>

    
    <!-- Testimonials Section -->
    <section class="testimonials" id="testimonials">
        <h2>TESTIMONIALS</h2>
        <div class="wrapper">
            <div class="single-testimonial">
                <i class="fas fa-quote-left" aria-hidden="true"></i>
                <p>
                    "TrackPro Logistics has been a game-changer for our business. Their fast and reliable delivery services have helped us to increase customer satisfaction and reduce costs."
                </p>
                <h5>John Doe, CEO of XYZ Corporation</h5>
            </div>
            <div class="single-testimonial">
                <i class="fas fa-quote-left" aria-hidden="true"></i>
                <p>
                    "I was impressed by the level of customer service provided by TrackPro Logistics. Their team was responsive and helpful throughout the entire shipping process."
                </p>
                <h5>Jane Smith, Owner of ABC Inc.</h5>
            </div>
            <div class="single-testimonial">
                <i class="fas fa-quote-left" aria-hidden="true"></i>
                <p>
                    "TrackPro Logistics has helped us to streamline our logistics operations and reduce costs. Their technology and expertise have been invaluable to our business."
                </p>
                <h5>Bob Johnson, Logistics Manager of DEF Corporation</h5>
            </div>
        </div>
    </section>
    
    <!-- Contact Section -->
    <section class="contact" id="contact">
        <h2>Get in Touch</h2>
        <div class="row">
            <div class="col-md-6">
                <h3>Contact Us</h3>
                <div id="contact-form">
                    <p>Get in touch with us by filling out the form below:</p>
                    <form>
                        <div class="form-group">
                            <label for="name">Name:</label>
                            <input type="text" class="form-control" id="name" name="name" placeholder="Ebitimi Ayodeji Michael" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Email:</label>
                            <input type="email" class="form-control" id="email" name="email" placeholder="ebiayo@mail.com" required>
                        </div>
                        <div class="form-group">
                            <label for="phone">Phone:</label>
                            <input type="tel" class="form-control" id="phone" name="phone" placeholder="0813-234-5678" required>
                        </div>
                        <div class="form-group">
                            <label for="message">Message:</label>
                            <textarea class="form-control" id="message" name="message" rows="5" placeholder="How can we assist you?" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Send</button>
                    </form>   
                </div>
                <br><h3><i class="fa fa-map-marker" aria-hidden="true"></i> Location:</h3>
                <p>12, Anywhere Road, 90120 Plaza. ANY, NG</p>
                <br><h3><i class="fa fa-mobile" aria-hidden="true"></i> Phone:</h3>
                <p>
                    +234-123-456-7890
                    <br>+234-234-567-8901
                </p>
            </div>
            <div class="col-md-6">
                <h3>Get Quote</h3>
                <div id="quote-form">
                    <p>Deliver a package by filling out this form below:</p>
                    <form>
                        <div class="form-group">
                            <label for="sender-address">Sender Address:</label>
                            <input type="text" id="sender-address" name="sender-address" required>
                        </div>
                        <div class="form-group">
                            <label for="recipient-address">Recipient Address:</label>
                            <input type="text" id="recipient-address" name="recipient-address" required>
                        </div>
                        <div class="form-group">
                            <label for="package-weight">Package Weight (kg):</label>
                            <input type="number" id="package-weight" name="package-weight" step="0.01" required>
                        </div>
                        <div class="form-group">
                            <label for="package-dimensions">Package Dimensions (L x W x H in cm):</label>
                            <input type="text" id="package-dimensions" name="package-dimensions" placeholder="e.g., 30 x 20 x 15" required>
                        </div>
                        <div class="form-group">
                            <label for="delivery-option">Delivery Option:</label>
                            <select id="delivery-option" name="delivery-option" required>
                                <option value="standard">Standard Delivery</option>
                                <option value="express">Express Delivery</option>
                                <option value="overnight">Overnight Delivery</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="message">Message:</label>
                            <textarea class="form-control" id="message" name="message" rows="5" placeholder="Optional"></textarea>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">Get Quote</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="faq" id="faq">
        <h2>FREQUENTLY ASKED QUESTIONS</h2>
        <div class="container">
            <div class="left">
                <div class="single-question">
                    <h5>What is TrackPro Logistics?</h5>
                    <p>TrackPro Logistics is a logistics company that provides reliable and efficient logistics services, including air freight, road freight, sea freight, and warehouse storage.</p>
                </div>
                <div class="single-question">
                    <h5>How do I track my shipment?</h5>
                    <p>You can track your shipment by using our real-time tracking system, which is available on our website and mobile app. Simply enter your tracking number and you will be able to see the latest updates on your shipment.</p>
                </div>
                <div class="single-question">
                    <h5>What is the delivery time for my shipment?</h5>
                    <p>The delivery time for your shipment will depend on the service you have chosen and the destination of your shipment. You can check our website for estimated delivery times or contact our customer service team for more information.</p>
                </div>
                <div class="single-question">
                    <h5>Can I change my delivery address?</h5>
                    <p>Yes, you can change your delivery address by contacting our customer service team. Please note that changes to your delivery address may affect the delivery time and cost of your shipment.</p>
                </div>
                <div class="single-question">
                    <h5>What happens if my shipment is lost or damaged?</h5>
                    <p>If your shipment is lost or damaged, please contact our customer service team immediately. We will investigate the issue and work with you to resolve it as quickly as possible.</p>
                </div>
            </div>
            <div class="right">
                <img src="./media/close-up-delivery-person-giving-parcel-client.jpg" alt="">
            </div>
        </div>
    </section>

    <!-- Partners Section -->
    <section class="partners" id="partners">
        <h2>OUR PARTNERS</h2>
        <div class="container">
            <div class="partner-logos">
                <img src="./media/air france.png" alt="Partner Logo 1">
                <img src="./media/maersk.png" alt="Partner Logo 2">
                <img src="./media/Delta.png" alt="Partner Logo 3">
                <img src="./media/DHL.png" alt="Partner Logo 4">
                <img src="./media/british airways.png" alt="Partner Logo 5">
                <img src="./media/qatar airways.png" alt="Partner Logo 6">
                <img src="./media/msc.png" alt="Partner Logo 7">
                <img src="./media/chelsea.png" alt="Partner Logo 8">
            </div>
        </div>
    </section>
    
    <!-- Footer -->
    <footer class="footer" id="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <h3>About Us</h3>
                    <p>TrackPro Logistics is a leading logistics company providing reliable and efficient logistics services.</p>
                    <ul>
                        <li><a href="#about">Our Story</a></li>
                        <li><a href="#services">Our Services</a></li>
                        <li><a href="#testimonials">Testimonials</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h3>Quick Links</h3>
                    <ul>
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About Us</a></li>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#contact">Contact Us</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h3>Get in Touch</h3>
                    <p>12, Anywhere Road, 90120 Plaza. ANY, NG</p>
                    <p>+234-123-456-7890</p>
                    <p>+234-234-567-8901</p>
                    <p><a href="mailto:info@trackprologistics.com">info@trackprologistics.com</a></p>
                </div>
            </div>
        </div>
        <div class="copyright">
            <p>&copy; 2024 TrackPro Logistics. All rights reserved.</p>
            <p>Designed by Otonbara🌵.</p>
            <ul class="social-media">
                <li><a href="https://github.com/Otonbara" target="_blank"><i class="fab fa-github"></i></a></li>
                <li><a href="https://x.com/otonbarao" target="_blank"><i class="fab fa-twitter"></i></a></li>
                <li><a href="https://www.instagram.com/otonbarao/" target="_blank"><i class="fab fa-instagram"></i></a></li>
                <li><a href="https://www.linkedin.com/in/otonbaraokolai" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
            </ul>
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>