290 lines
18 KiB
HTML
290 lines
18 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="en">
|
|
<head>
|
|
<title>Crafto - The Multipurpose HTML5 Template</title>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="author" content="ThemeZaa">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
|
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.">
|
|
|
|
<link rel="shortcut icon" href="images/favicon.png">
|
|
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
|
|
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
|
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
|
<link rel="stylesheet" href="css/vendors.min.css" />
|
|
<link rel="stylesheet" href="css/icon.min.css" />
|
|
<link rel="stylesheet" href="css/style.min.css" />
|
|
<link rel="stylesheet" href="css/responsive.min.css" />
|
|
<link rel="stylesheet" href="demos/logistics/logistics.css" />
|
|
</head>
|
|
<body data-mobile-nav-style="classic">
|
|
|
|
<header class="header-with-topbar">
|
|
<div class="header-top-bar top-bar-dark bg-dark">
|
|
<div class="container-fluid">
|
|
<div class="row h-45px align-items-center m-0">
|
|
<div class="col-12 col-lg-7 fw-500 justify-content-lg-start justify-content-center">
|
|
<span class="me-25px fs-15 md-m-0">
|
|
<i class="feather icon-feather-phone-call text-base-color me-10px"></i><span class="text-light-gray">Phone: 1 800 222 000 - Any time 24/7</span>
|
|
</span>
|
|
<span class="d-xl-inline-block d-none fs-15"><i class="feather icon-feather-mail text-base-color me-10px"></i><a href="cdn-cgi/l/email-protection.html#aac4c587d8cfdac6d3eacec5c7cbc3c484c9c5c7" class="widget text-light-gray text-white-hover"><span class="__cf_email__" data-cfemail="e08e8fcd9285908c99a0848f8d81898ece838f8d">[email protected]</span></a></span>
|
|
</div>
|
|
<div class="col-md-5 text-end d-none d-lg-flex fs-15">
|
|
<a href="https://www.facebook.com" target="_blank" class="me-25px lg-me-15px">Facebook</a>
|
|
<a href="https://www.twitter.com" target="_blank" class="me-25px lg-me-15px">Twitter</a>
|
|
<a href="https://in.pinterest.com/" target="_blank" class="me-25px lg-me-15px">Pinterest</a>
|
|
<a href="https://www.instagram.com" target="_blank">Instagram</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="navbar navbar-expand-lg header-light bg-white header-reverse" data-header-hover="light">
|
|
<div class="container-fluid">
|
|
<div class="col-auto">
|
|
<a class="navbar-brand" href="demo-logistics.html">
|
|
<img src="images/demo-logistics-logo-black.png" data-at2x="images/demo-logistics-logo-black@2x.png" alt class="default-logo">
|
|
<img src="images/demo-logistics-logo-black.png" data-at2x="images/demo-logistics-logo-black@2x.png" alt class="alt-logo">
|
|
<img src="images/demo-logistics-logo-black.png" data-at2x="images/demo-logistics-logo-black@2x.png" alt class="mobile-logo">
|
|
</a>
|
|
</div>
|
|
<div class="col-auto menu-order left-nav">
|
|
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-line"></span>
|
|
<span class="navbar-toggler-line"></span>
|
|
<span class="navbar-toggler-line"></span>
|
|
<span class="navbar-toggler-line"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item"><a href="demo-logistics.html" class="nav-link">Home</a></li>
|
|
<li class="nav-item"><a href="demo-logistics-about-us.html" class="nav-link">About us</a></li>
|
|
<li class="nav-item dropdown dropdown-with-icon-style02"><a href="demo-logistics-our-services.html" class="nav-link">Our services</a>
|
|
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
|
|
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
|
|
<li><a href="demo-logistics-services-details.html"><i class="line-icon-Plane-2 align-middle text-base-color"></i>Air freight</a></li>
|
|
<li><a href="demo-logistics-services-details.html"><i class="line-icon-Road-3 align-middle text-base-color"></i>Road freight</a></li>
|
|
<li><a href="demo-logistics-services-details.html"><i class="line-icon-Ship-2 align-middle text-base-color"></i>Ocean freight</a></li>
|
|
<li><a href="demo-logistics-services-details.html"><i class="line-icon-Tram align-middle text-base-color"></i>Train freight</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item"><a href="demo-logistics-latest-blog.html" class="nav-link">Latest blog</a></li>
|
|
<li class="nav-item"><a href="demo-logistics-contact-us.html" class="nav-link">Contact us</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto ms-auto ps-lg-0 d-none d-sm-flex">
|
|
<div class="header-icon">
|
|
<div class="d-none d-xl-inline-block"><div class="fw-600"><a href="tel:1800222000" class="widget-text"><i class="feather icon-feather-phone-call me-10px"></i>1 800 222 000</a></div></div>
|
|
<div class="header-button ms-25px">
|
|
<a href="demo-logistics-contact-us.html" class="btn btn-small btn-base-color btn-hover-animation-switch btn-round-edge btn-box-shadow fw-700 ls-0px btn-icon-left">
|
|
<span>
|
|
<span class="btn-text">Get a quote</span>
|
|
<span class="btn-icon"><i class="feather icon-feather-mail"></i></span>
|
|
<span class="btn-icon"><i class="feather icon-feather-mail"></i></span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
</header>
|
|
|
|
|
|
<section class="top-space-margin page-title-big-typography cover-background pt-0 pb-0" style="background-image: url('images/demo-logistics-services-details-title-bg.jpg')">
|
|
<div class="container">
|
|
<div class="row align-items-center justify-content-center small-screen">
|
|
<div class="col-xl-5 col-sm-8 page-title-double-large text-center" data-anime="{ "el": "childs", "opacity": [0, 1], "translateY": [30, 0], "duration": 600, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<h1 class="text-base-color fw-700 mb-5px">Ocean freight</h1>
|
|
<h2 class="text-white fw-600 ls-1px mb-0 text-uppercase">Reliable sea cargo transport</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-4 pe-5 order-2 order-lg-1 lg-pe-3 md-pe-15px" data-anime="{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<div class="bg-very-light-gray border-radius-6px p-45px lg-p-25px mb-25px">
|
|
<span class="fs-22 text-dark-gray fw-600 mb-20px d-inline-block">Professional services</span>
|
|
<ul class="p-0 m-0 list-style-02 fw-500">
|
|
<li class="pb-5px mb-10px border-bottom border-color-transparent-dark"><a href="demo-logistics-services-details.html">Air freight</a><i class="feather icon-feather-arrow-right ms-auto icon-small"></i></li>
|
|
<li class="pb-5px mb-10px border-bottom border-color-transparent-dark text-dark-gray"><a href="demo-logistics-services-details.html" class="text-dark-gray text-dark-gray-hover">Ocean freight</a><i class="feather icon-feather-arrow-right ms-auto icon-small"></i></li>
|
|
<li class="pb-5px mb-10px border-bottom border-color-transparent-dark"><a href="demo-logistics-services-details.html">Warehouse facility</a><i class="feather icon-feather-arrow-right ms-auto icon-small"></i></li>
|
|
<li class="pb-5px mb-10px border-bottom border-color-transparent-dark"><a href="demo-logistics-services-details.html">Personal transportation</a><i class="feather icon-feather-arrow-right ms-auto icon-small"></i></li>
|
|
<li><a href="demo-logistics-services-details.html">Road freight</a><i class="feather icon-feather-arrow-right lh-32 ms-auto"></i></li>
|
|
</ul>
|
|
</div>
|
|
<div class="bg-base-color border-radius-6px ps-35px pb-25px pt-25px lg-ps-25px mb-25px">
|
|
<div class="feature-box feature-box-left-icon-middle">
|
|
<div class="feature-box-icon feature-box-icon-rounded w-65px h-65px me-20px lg-me-15px rounded-circle bg-white">
|
|
<i class="bi bi-telephone-outbound icon-extra-medium text-dark-gray"></i>
|
|
</div>
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|
<span class="d-block text-dark-gray">Customer care?</span>
|
|
<a href="tel:1800222000" class="text-dark-gray fs-20 fw-700">1 800 222 000</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-very-light-gray border-radius-6px p-40px lg-p-25px md-p-35px">
|
|
<span class="fs-20 text-dark-gray fw-600 mb-25px d-inline-block">Get a free consultation?</span>
|
|
<div class="contact-form-style-01 mt-0">
|
|
|
|
<form action="email-templates/contact-form.php" method="post">
|
|
<div class="position-relative form-group mb-20px">
|
|
<span class="form-icon"><i class="bi bi-emoji-smile"></i></span>
|
|
<input type="text" name="name" class="form-control border-white box-shadow-large required" placeholder="Your name*" />
|
|
</div>
|
|
<div class="position-relative form-group mb-20px">
|
|
<span class="form-icon"><i class="bi bi-envelope"></i></span>
|
|
<input type="email" name="email" class="form-control border-white box-shadow-large required" placeholder="Your email address*" />
|
|
</div>
|
|
<div class="position-relative form-group form-textarea">
|
|
<span class="form-icon"><i class="bi bi-chat-square-dots"></i></span>
|
|
<textarea placeholder="Your message" name="comment" class="form-control border-white box-shadow-large" rows="3"></textarea>
|
|
<input type="hidden" name="redirect" value>
|
|
<button class="btn btn-large btn-round-edge btn-dark-gray btn-box-shadow mt-20px submit w-100" type="submit">Send message</button>
|
|
<div class="mt-20px form-results d-none"></div>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-8 order-1 order-lg-2 md-mb-50px" data-anime="{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<h4 class="text-dark-gray fw-700 ls-minus-1px mb-20px d-block">Our ocean freight services</h4>
|
|
<p>Our logistics business specializes in providing reliable and efficient ocean freight services to meet all your shipping needs. Whether you require full container loads or less than container loads, we have the expertise to handle your cargo with care.</p>
|
|
<img src="images/demo-logistics-services-details-01.jpg" class="mt-30px md-mt-15px mb-60px md-mb-40px border-radius-6px" alt>
|
|
<div class="row row-cols-1 row-cols-md-2 mb-30px md-mb-15px">
|
|
<div class="col">
|
|
<span class="fs-22 text-dark-gray fw-700 mb-10px d-block">Full container load shipping</span>
|
|
<p class="w-90 sm-w-100">Lorem ipsum dolor amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
|
|
</div>
|
|
<div class="col">
|
|
<span class="fs-22 text-dark-gray fw-700 mb-10px d-block">Less than container load shipping</span>
|
|
<p class="w-90 sm-w-100">Lorem ipsum dolor amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
|
|
</div>
|
|
</div>
|
|
<div class="cover-background p-7 border-radius-6px mb-60px md-mb-40px d-flex justify-content-end align-items-end sm-h-500px" style="background-image: url('images/demo-logistics-services-details-02.jpg')">
|
|
<div class="bg-white box-shadow-quadruple-large border-radius-4px w-50 lg-w-55 sm-w-100 overflow-hidden">
|
|
<div class="p-40px lg-p-25px last-paragraph-no-margin">
|
|
<span class="fs-22 text-dark-gray fw-700 mb-10px d-block">Customs clearance</span>
|
|
<p>Lorem ipsum dolor sit amet conseetur adipiscing elit sed do eiusmod tempor incididunt ut labore magna aliqua.</p>
|
|
</div>
|
|
<div class="bg-base-color p-15px text-center">
|
|
<a href="demo-logistics-contact-us.html" class="text-dark-gray text-dark-gray-hover fw-600"><i class="feather icon-feather-mail me-10px"></i>Talk with our team</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h4 class="text-dark-gray fw-700 mb-40px lg-mb-30px d-block">Benefits of working with us</h4>
|
|
<div class="border border-color-extra-medium-gray border-radius-6px mb-40px xs-mb-30px overflow-hidden">
|
|
<p class="p-30px border-bottom border-1 border-color-extra-medium-gray mb-0"><span class="fw-600 text-dark-gray">Great client service: </span>For reliable ocean freight services that you can trust, partner with us for all your shipping needs.</p>
|
|
<p class="p-30px border-bottom border-1 border-color-extra-medium-gray mb-0"><span class="fw-600 text-dark-gray">Warehousing & distribution: </span>At our logistics business, we prioritize customer satisfaction and strive to deliver your cargo on time and within budget.</p>
|
|
<p class="p-30px mb-0"><span class="fw-600 text-dark-gray">Internal expertise: </span>Our team of experienced professionals ensures that your shipments are handled with precision and efficiency.</p>
|
|
</div>
|
|
<div class="row align-items-center g-0">
|
|
<div class="col-auto d-block d-sm-flex align-items-center text-center text-sm-start">
|
|
<img src="images/demo-pizza-parlor-about-03.png" alt />
|
|
<div class="fw-500 last-paragraph-no-margin text-dark-gray ps-15px xs-ps-0 xs-mt-15px">
|
|
<p>Save your time and effort spent for finding a solution. <a href="demo-logistics-contact-us.html" class="text-decoration-line-bottom fw-700 text-dark-gray">Contact us now</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<footer class="fs-17 footer-dark p-0 bg-dark-gray">
|
|
<div class="container">
|
|
<div class="row justify-content-center pt-6 sm-pt-40px text-sm-start text-center">
|
|
|
|
<div class="col-xl-3 col-lg-4 col-md-5 col-sm-6 md-mb-30px">
|
|
<a href="demo-logistics.html" class="footer-logo mb-20px d-inline-block">
|
|
<img src="images/demo-logistics-logo-white.png" data-at2x="images/demo-logistics-logo-white.png" alt>
|
|
</a>
|
|
<p class="fs-17 mx-auto xs-w-90">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet ipsum.</p>
|
|
<div class="row align-items-center border border-color-transparent-white-light g-0 border-radius-4px">
|
|
<div class="col-5 text-center"><h2 class="text-white fw-700 mb-0">4.9</h2></div>
|
|
<div class="col-7 border-start border-color-transparent-white-light ps-20px pe-20px pt-15px pb-15px lg-ps-15px lg-pe-15px text-center text-sm-start">
|
|
<div class="review-star-icon">
|
|
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
|
|
</div>
|
|
<span class="d-block fs-18">30k Reviews</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-2 col-md-3 col-sm-5 offset-xl-1 offset-md-0 offset-sm-1 md-mb-30px">
|
|
<span class="fs-18 d-block text-white fw-500 mb-10px">About services</span>
|
|
<ul>
|
|
<li><a href="demo-logistics-services-details.html">Air freight</a></li>
|
|
<li><a href="demo-logistics-services-details.html">Ocean freight</a></li>
|
|
<li><a href="demo-logistics-services-details.html">Road freight</a></li>
|
|
<li><a href="demo-logistics-services-details.html">Ware housing</a></li>
|
|
<li><a href="demo-logistics-services-details.html">Supply chain</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-3 col-md-4 col-sm-5 offset-md-0 offset-sm-1 order-5 order-md-3 xs-mb-30px">
|
|
<span class="fs-18 d-block text-white fw-500 mb-10px">Need help?</span>
|
|
<span class="d-block">Call us directly?</span>
|
|
<a href="tel:1800222000" class="mb-15px d-inline-block">1 800 222 000</a>
|
|
<span class="d-block">Need live support?</span>
|
|
<a href="cdn-cgi/l/email-protection.html#83f0f6f3f3ecf1f7c3e7eceee2eaedade0ecee" class="d-sm-inline-block d-block"><span class="__cf_email__" data-cfemail="a0d3d5d0d0cfd2d4e0c4cfcdc1c9ce8ec3cfcd">[email protected]</span></a>
|
|
<a href="cdn-cgi/l/email-protection.html#422b2c242d02262d2f232b2c6c212d2f" class="d-inline-block"><span class="__cf_email__" data-cfemail="01686f676e41656e6c60686f2f626e6c">[email protected]</span></a>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-3 col-md-10 col-sm-6 text-md-center text-lg-start order-last order-sm-4">
|
|
<span class="fs-18 d-block text-white fw-500 mb-10px">Keep in touch with us</span>
|
|
<p class="mb-20px fs-17 mx-auto xs-w-90">Subscribe our newsletter to get the latest news and updates.</p>
|
|
<div class="d-inline-block w-100 newsletter-style-02 position-relative mb-15px">
|
|
<form action="email-templates/subscribe-newsletter.php" method="post" class="position-relative w-100">
|
|
<input class="bg-transparent border-color-transparent-white-light w-100 form-control required" type="email" name="email" placeholder="Enter your email">
|
|
<input type="hidden" name="redirect" value>
|
|
<button class="btn submit" aria-label="submit"><i class="icon feather icon-feather-mail icon-small text-white"></i></button>
|
|
<div class="form-results border-radius-4px pt-5px pb-5px ps-15px pe-15px fs-14 lh-22 mt-10px w-100 text-center position-absolute d-none"></div>
|
|
</form>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-lg-start justify-content-md-center justify-content-sm-start justify-content-center">
|
|
<i class="line-icon-Handshake align-middle icon-medium me-10px"></i>
|
|
<span class="fs-16">Protecting your privacy</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="row justify-content-center align-items-center pt-5 md-pt-30px">
|
|
<div class="col-12">
|
|
<div class="divider-style-03 divider-style-03-01 border-color-transparent-white-light"></div>
|
|
</div>
|
|
<div class="col-lg-9 pt-25px pb-25px fs-15 last-paragraph-no-margin text-center order-2 order-sm-1"><p>This site is protected by reCAPTCHA and the Google <a href="demo-logistics-services-details.html#" class="text-decoration-line-bottom">privacy policy</a> and <a href="demo-logistics-services-details.html#" class="text-decoration-line-bottom">terms of service</a> apply. You must not use this website if you disagree with any of these website standard terms and conditions.</p></div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
<div class="scroll-progress d-none d-xxl-block">
|
|
<a href="demo-logistics-services-details.html#" class="scroll-top" aria-label="scroll">
|
|
<span class="scroll-text">Scroll</span><span class="scroll-line"><span class="scroll-point"></span></span>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="js/jquery.js"></script>
|
|
<script type="text/javascript" src="js/vendors.min.js"></script>
|
|
<script type="text/javascript" src="js/main.js"></script>
|
|
</body>
|
|
</html> |