KeymailSpecials2/Components/Pages/About.razor

506 lines
21 KiB
Plaintext
Raw Normal View History

@page "/about"
@layout KeymailSpecials2.Components.Layout.NoNav
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="author" content="SemiColonWeb">
<meta name="description" content="Create Packers, Movers &amp; Shipping Websites with Canvas Template. Get Canvas to build powerful websites easily with the Highly Customizable &amp; Best Selling Bootstrap Template, today.">
<!-- Font Imports -->
<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=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Core Style -->
<link rel="stylesheet" href="style.css">
<!-- Font Icons -->
<link rel="stylesheet" href="css/font-icons.css">
<!-- Plugins/Components CSS -->
<link rel="stylesheet" href="css/components/datepicker.css">
<!-- Niche Demos -->
<link rel="stylesheet" href="demos/movers/movers.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Document Title
============================================= -->
<title>Company - Movers Demo | Canvas</title>
</head>
<body class="stretched">
<!-- Document Wrapper
============================================= -->
<div id="wrapper">
<!-- Header
============================================= -->
<header id="header" class="dark header-size-sm" data-sticky-shrink="false">
<div class="container">
<div class="header-row">
<!-- Logo
============================================= -->
<div id="logo" class="ms-auto ms-md-0">
<a href="">
<img class="logo-default" srcset="images/logo.png, images/logo@2x.png 2x" src="images/logo@2x.png" alt="Canvas Logo">
</a>
</div><!-- #logo end -->
<ul class="header-extras d-none d-sm-flex mx-auto mx-md-0 mb-4 mb-md-0">
<li>
<i class="i-plain bi-telephone m-0"></i>
<div class="he-text fw-normal text-white-50">
Call Us:
<span><a href="tel:+111-22-33-44" class="text-white fw-medium">+111 22-33-44</a></span>
</div>
</li>
<li>
<i class="i-plain bi-envelope m-0"></i>
<div class="he-text fw-normal text-white-50">
Email Us:
<span><a href="mailto:info@canvas.com" target="_top" class="text-white fw-medium">info@canvas.com</a></span>
</div>
</li>
</ul>
</div>
</div>
<div id="header-wrap">
<div class="container">
<div class="header-row justify-content-between flex-row-reverse flex-lg-row">
<div class="header-misc">
<!-- Top Search
============================================= -->
<div id="top-search" class="header-misc-icon">
<a href="#" id="top-search-trigger"><i class="uil uil-search"></i><i class="bi-x-lg"></i></a>
</div><!-- #top-search end -->
<!-- Header Buttons
============================================= -->
<div class="header-buttons d-none d-sm-inline-block">
<a href="#slider" data-scrollto="#slider" data-offset="-80" class="button button-rounded button-white button-light button-small m-0">Get a Quote</a>
</div>
</div>
<div class="primary-menu-trigger">
<button class="cnvs-hamburger" type="button" title="Open Mobile Menu">
<span class="cnvs-hamburger-box"><span class="cnvs-hamburger-inner"></span></span>
</button>
</div>
<!-- Primary Navigation
============================================= -->
<nav class="primary-menu with-arrows">
<ul class="menu-container">
<li class="menu-item"><a class="menu-link" href="demo-movers.html"><div>Home</div></a></li>
<li class="menu-item current"><a class="menu-link" href="demo-movers-company.html"><div>Our Company</div></a></li>
<li class="menu-item">
<a class="menu-link" href="demo-movers-rates.html"><div>Rates</div></a>
<ul class="sub-menu-container" data-class="up-lg:not-dark">
<li class="menu-item"><a class="menu-link" href="demo-movers-rates.html"><div><i class="bi-house"></i>Home Moving</div></a></li>
<li class="menu-item"><a class="menu-link" href="demo-movers-rates.html"><div><i class="bi-building"></i>Office Moving</div></a></li>
<li class="menu-item"><a class="menu-link" href="demo-movers-rates.html"><div><i class="bi-globe"></i>International Moving</div></a></li>
<li class="menu-item"><a class="menu-link" href="demo-movers-rates.html"><div><i class="fa-solid fa-paw"></i>Pet Shifting</div></a></li>
<li class="menu-item"><a class="menu-link" href="demo-movers-rates.html"><div><i class="bi-car-front"></i>Car Shifting</div></a></li>
<li class="menu-item"><a class="menu-link" href="demo-movers-rates.html"><div><i class="bi-truck"></i>Hire Truck</div></a></li>
</ul>
</li>
<li class="menu-item"><a class="menu-link" href="demo-movers-team.html"><div>Team</div></a></li>
<li class="menu-item"><a class="menu-link" href="demo-movers-faqs.html"><div>FAQs</div></a></li>
<li class="menu-item"><a class="menu-link" href="demo-movers-blog.html"><div>Blog</div></a></li>
<li class="menu-item"><a class="menu-link" href="demo-movers-contact.html"><div>Contact Us</div></a></li>
</ul>
</nav><!-- #primary-menu end -->
<form class="top-search-form" action="search.html" method="get">
<input type="text" name="q" class="form-control" value="" placeholder="Type &amp; Hit Enter.." autocomplete="off">
</form>
</div>
</div>
</div>
<div class="header-wrap-clone"></div>
</header><!-- #header end -->
<!-- Page Title
============================================= -->
<section class="page-title bg-color dark py-6">
<div class="container">
<div class="page-title-row">
<div class="page-title-content">
<h1>Company</h1>
<span>Get to know us</span>
</div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Movers</a></li>
<li class="breadcrumb-item active" aria-current="page">Company</li>
</ol>
</nav>
</div>
</div>
</section><!-- .page-title end -->
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap p-0">
<div class="section mt-0" style="background-position: center center; background-repeat: no-repeat; background-size: cover; background-image: linear-gradient(to right, rgba(0,0,0,.6), rgba(0,0,0,0.3)), url('demos/movers/images/section/company.jpg');">
<div class="shape-divider" data-shape="wave" data-position="bottom" data-height="100"></div>
<div class="container dark">
<div class="row align-items-center h-100" style="padding: 100px 0 150px">
<div class="col-xl-7 col-lg-10">
<h5 class="mb-3 text-uppercase ls-3 text-white-50">Our Story</h5>
<h3 class="display-4 fw-semibold mb-4">Make the right Move.<br>We Move your Life.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate corporis, facilis assumenda optio consequuntur amet iure, quidem animi nam inventore!</p>
</div>
</div>
</div>
</div>
<div class="section-map mb-6 mt-6">
<div class="container">
<img src="demos/hosting/images/svg/map.png" alt="Map Image" class="img-fluid map-image">
<div class="map-title">
<h2 class="text-center">More than 21 Countries included in Our Network. Some of Our Most Popular Countries</h2>
<div class="d-flex justify-content-center">
<ul class="iconlist m-0 pe-5">
<li><img src="demos/hosting/images/flags/uk.png" alt="Country Flag"><a href="#">United Kingdom</a></li>
<li><img src="demos/hosting/images/flags/us.png" alt="Country Flag"><a href="#">USA</a></li>
<li><img src="demos/hosting/images/flags/br.png" alt="Country Flag"><a href="#">Brazil</a></li>
<li><img src="demos/hosting/images/flags/sa.png" alt="Country Flag"><a href="#">South Africa</a></li>
<li><img src="demos/hosting/images/flags/in.png" alt="Country Flag"><a href="#">India</a></li>
</ul>
<ul class="iconlist m-0 ps-5">
<li><img src="demos/hosting/images/flags/si.png" alt="Country Flag"><a href="#">Singapore</a></li>
<li><img src="demos/hosting/images/flags/ja.png" alt="Country Flag"><a href="#">Japan</a></li>
<li><img src="demos/hosting/images/flags/au.png" alt="Country Flag"><a href="#">Australia</a></li>
<li><img src="demos/hosting/images/flags/ca.png" alt="Country Flag"><a href="#">Canada</a></li>
<li><a href="#" class="text-black-50">See all..</a></li>
</ul>
</div>
</div>
</div>
<div class="counter-section">
<div class="row align-items-stretch m-0 w-100 text-center">
<div class="col-sm-3 col-6">
<div class="counter-dots"></div>
<div class="counter font-secondary"><span data-from="100" data-to="11000" data-refresh-interval="50" data-speed="2100" data-comma="true"></span>+</div>
<h5 class="text-capitalize ls-0 mt-0"><u>Moved Monthly</u></h5>
</div>
<div class="col-sm-3 col-6">
<div class="counter-dots"></div>
<div class="counter font-secondary"><span data-from="3" data-to="26" data-refresh-interval="50" data-speed="2200" data-comma="true"></span>+</div>
<h5 class="text-capitalize ls-0 mt-0"><u>Years of Experience</u></h5>
</div>
<div class="col-sm-3 col-6">
<div class="counter-dots"></div>
<div class="counter font-secondary"><span data-from="100" data-to="6000" data-refresh-interval="25" data-speed="2300" data-comma="true"></span>+</div>
<h5 class="text-capitalize ls-0 mt-0"><u>Trained Manpower</u></h5>
</div>
<div class="col-sm-3 col-6">
<div class="counter-dots"></div>
<div class="counter font-secondary"><span data-from="1" data-to="21" data-refresh-interval="10" data-speed="2100" data-comma="true"></span>+</div>
<h5 class="text-capitalize ls-0 mt-0"><u>Countries Worldwide</u></h5>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="py-6 mt-5 dark" style="background-color: #061a35;">
<div class="container mb-5">
<div class="row justify-content-between">
<div class="col-md-5">
<h3 class="display-4 fw-bold mb-4">Moving you<br>Toward your<br>Future.</h3>
<img src="demos/movers/images/section/2.jpg" alt="Image" class="img-about">
</div>
<div class="col-md-6">
<p class="mt-4">Compellingly target sticky infrastructures via superior catalysts for change. Completely productize efficient e-tailers rather than sticky applications. Credibly productize interdependent users through scalable collaboration and idea-sharing. Objectively foster cutting-edge intellectual capital via frictionless data. Objectively impact cutting-edge niche markets with cross functional services.</p>
<p>Synergistically architect enterprise-wide products whereas business content. Credibly facilitate top-line expertise with excellent platforms.</p>
<p>Compellingly target sticky infrastructures via superior catalysts for change. Completely productize efficient e-tailers rather than sticky applications. Credibly productize interdependent users through scalable collaboration and idea-sharing. Objectively foster cutting-edge intellectual capital via frictionless data. Objectively impact cutting-edge niche markets with cross functional services.</p>
<p><strong>Synergistically architect enterprise-wide products whereas business content.</strong> Credibly facilitate top-line expertise with excellent platforms.</p>
</div>
</div>
</div>
</div>
<div class="section section-features bg-transparent pb-0 mb-4">
<div class="container">
<div class="row col-mb-50 col-mb-lg-80">
<div class="col-md-4">
<div class="feature-box media-box">
<div class="fbox-icon position-relative mb-4" style="background-image: url('demos/movers/images/featured-img/1.jpg');">
<i class="bi-house"></i>
</div>
<div class="fbox-content">
<h3 class="fw-semibold">Office Moving.</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi rem, facilis nobis voluptatum.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="feature-box media-box">
<div class="fbox-icon position-relative mb-4" style="background-image: url('demos/movers/images/featured-img/2.jpg');">
<i class="bi-building"></i>
</div>
<div class="fbox-content">
<h3 class="fw-semibold">Home Moving.</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi rem, facilis nobis voluptatum.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="feature-box media-box">
<div class="fbox-icon position-relative mb-4" style="background-image: url('demos/movers/images/featured-img/3.jpg');">
<i class="bi-globe"></i>
</div>
<div class="fbox-content">
<h3 class="fw-semibold">International Moving.</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi rem, facilis nobis voluptatum.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="feature-box media-box">
<div class="fbox-icon position-relative mb-4">
<i class="fa-solid fa-paw"></i>
</div>
<div class="fbox-content">
<h3 class="fw-semibold">Pet Shifting.</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi rem, facilis nobis voluptatum.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="feature-box media-box">
<div class="fbox-icon position-relative mb-4" style="background-image: url('demos/movers/images/featured-img/1.jpg');">
<i class="bi-car-front"></i>
</div>
<div class="fbox-content">
<h3 class="fw-semibold">Car Shifting.</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi rem, facilis nobis voluptatum.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="feature-box media-box">
<div class="fbox-icon position-relative mb-4">
<i class="bi-truck"></i>
</div>
<div class="fbox-content">
<h3 class="fw-semibold">Hire Truck.</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi rem, facilis nobis voluptatum.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="section dark pt-0 mb-0 bg-color" style="background: url('demos/movers/images/bg-2.png') no-repeat center bottom / 100%; overflow: visible">
<svg viewBox="0 0 1960 206.8" class="bg-white">
<path class="svg-themecolor" style="opacity:0.2;" d="M0,142.8A2337.49,2337.49,0,0,1,297.5,56.3C569.33-3.53,783.89.22,849.5,2.3c215.78,6.86,382.12,45.39,503.25,73.45,158.87,36.8,283.09,79.13,458.75,54.55A816.49,816.49,0,0,0,1983,86.8v110H0Z"></path>
<path class="svg-themecolor" d="M.5,152.8s498-177,849-150,1031,238,1134,94v110H.5Z"></path>
</svg>
<div class="container">
<div class="row align-items-center justify-content-center text-center my-4">
<div class="col-sm-8">
<div class="heading-block border-bottom-0 mb-4">
<h2 class="fw-semibold ls-0 text-transform-none mb-3" style="font-size: 44px; line-height: 1.3">Contact Our Movers Specialist</h2>
<p>Phosfluorescently develop customized relationships vis-a-vis B2C infomediaries.</p>
</div>
<a href="demo-movers-contact.html" class="button button-white button-light button-rounded fw-medium m-0">Get In Touch</a>
</div>
</div>
</div>
</div>
</div>
</section><!-- #content end -->
<!-- Footer
============================================= -->
<footer id="footer" class="bg-transparent border-0">
<div class="container">
<!-- Footer Widgets
============================================= -->
<div class="footer-widgets-wrap pb-4">
<div class="row">
<div class="col-lg-2 col-md-2 col-6">
<div class="widget">
<h4 class="ls-0 mb-4 text-transform-none">Features</h4>
<ul class="list-unstyled iconlist ms-0">
<li class="mb-2"><a href="#">Help Center</a></li>
<li class="mb-2"><a href="#">Paid with Moblie</a></li>
<li class="mb-2"><a href="#">Status</a></li>
<li class="mb-2"><a href="#">Changelog</a></li>
<li class="mb-2"><a href="#">Contact Support</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-6">
<div class="widget">
<h4 class="ls-0 mb-4 text-transform-none">Support</h4>
<ul class="list-unstyled iconlist ms-0">
<li class="mb-2"><a href="#">Home</a></li>
<li class="mb-2"><a href="demo-movers-company.html">About</a></li>
<li class="mb-2"><a href="demo-movers-faqs.html">FAQs</a></li>
<li class="mb-2"><a href="#">Support</a></li>
<li class="mb-2"><a href="demo-movers-contact.html">Contact</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-6">
<div class="widget">
<h4 class="ls-0 mb-4 text-transform-none">Trending</h4>
<ul class="list-unstyled iconlist ms-0">
<li class="mb-2"><a href="#">Shop</a></li>
<li class="mb-2"><a href="#">Portfolio</a></li>
<li class="mb-2"><a href="#">Blog</a></li>
<li class="mb-2"><a href="#">Events</a></li>
<li class="mb-2"><a href="#">Forums</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-6">
<div class="widget">
<h4 class="ls-0 mb-4 text-transform-none">Get to Know us</h4>
<ul class="list-unstyled iconlist ms-0">
<li class="mb-2"><a href="#">Corporate</a></li>
<li class="mb-2"><a href="#">Agency</a></li>
<li class="mb-2"><a href="#">eCommerce</a></li>
<li class="mb-2"><a href="#">Personal</a></li>
<li class="mb-2"><a href="#">OnePage</a></li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-4 text-md-end">
<div class="widget">
<h4 class="ls-0 mb-4 text-transform-none">Headquarters:</h4>
<div>
<address>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
</address>
<h3 class="mb-3"><a href="tel:+111-22-33-44"><i class="fa-solid fa-phone me-1" style="font-size: 22px;"></i> +111 22-33-44</a></h3>
<div class="d-flex justify-content-md-end">
<a href="#" class="social-icon si-small text-white bg-facebook" title="Facebook">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="#" class="social-icon si-small text-white bg-instagram" title="instagram">
<i class="bi-instagram"></i>
<i class="bi-instagram"></i>
</a>
<a href="#" class="social-icon si-small text-white bg-paypal" title="Paypal">
<i class="fa-brands fa-paypal"></i>
<i class="fa-brands fa-paypal"></i>
</a>
<a href="#" class="social-icon si-small text-white bg-wikipedia me-0" title="Apple Pay">
<i class="fa-brands fa-apple-pay"></i>
<i class="fa-brands fa-apple-pay"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div><!-- .footer-widgets-wrap end -->
</div>
<!-- Copyrights
============================================= -->
<div id="copyrights" class="bg-transparent">
<div class="container">
<div class="row justify-content-between align-items-center">
<div class="col-md-6 text-black-50">
Copyrights &copy; 2023 All Rights Reserved by Canvas Inc.
</div>
<div class="col-md-6 d-md-flex flex-md-column align-items-md-end mt-4 mt-md-0">
<div class="copyrights-menu copyright-links text-black-50">
<a href="demo-movers-company.html">About</a>/<a href="demo-movers-rates.html">Rates</a>/<a href="demo-movers-faqs.html">FAQs</a>/<a href="demo-movers-contact.html">Contact</a>
</div>
</div>
</div>
</div>
</div><!-- #copyrights end -->
</footer><!-- #footer end -->
</div><!-- #wrapper end -->
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="uil uil-angle-up"></div>
<!-- JavaScripts
============================================= -->
<script src="js/plugins.min.js"></script>
<script src="js/functions.bundle.js"></script>
<script src="js/components/datepicker.js"></script>
<script>
jQuery('.home-date').datepicker({
autoclose: true,
startDate: "today",
});
</script>
</body>