You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

500 lines
23 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Nova Bootstrap Template - Index</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<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=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/main.css" rel="stylesheet">
<!-- =======================================================
* Template Name: Nova - v1.1.0
* Template URL: https://bootstrapmade.com/nova-bootstrap-business-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
</head>
<body class="page-index">
<!-- ======= Header ======= -->
<header id="header" class="header d-flex align-items-center fixed-top">
<div class="container-fluid container-xl d-flex align-items-center justify-content-between">
<a href="index.html" class="logo d-flex align-items-center">
<!-- Uncomment the line below if you also wish to use an image logo -->
<!-- <img src="assets/img/logo.png" alt=""> -->
<h1 class="d-flex align-items-center">Nova</h1>
</a>
<i class="mobile-nav-toggle mobile-nav-show bi bi-list"></i>
<i class="mobile-nav-toggle mobile-nav-hide d-none bi bi-x"></i>
<nav id="navbar" class="navbar">
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="team.html">Team</a></li>
<li><a href="blog.html">Blog</a></li>
<li class="dropdown"><a href="#"><span>Dropdown</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
<ul>
<li><a href="#">Dropdown 1</a></li>
<li class="dropdown"><a href="#"><span>Deep Dropdown</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
<ul>
<li><a href="#">Deep Dropdown 1</a></li>
<li><a href="#">Deep Dropdown 2</a></li>
<li><a href="#">Deep Dropdown 3</a></li>
<li><a href="#">Deep Dropdown 4</a></li>
<li><a href="#">Deep Dropdown 5</a></li>
</ul>
</li>
<li><a href="#">Dropdown 2</a></li>
<li><a href="#">Dropdown 3</a></li>
<li><a href="#">Dropdown 4</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav><!-- .navbar -->
</div>
</header><!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="hero d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-xl-4">
<h2 data-aos="fade-up">Focus On What Matters</h2>
<blockquote data-aos="fade-up" data-aos-delay="100">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis cum recusandae eum laboriosam voluptatem repudiandae odio, vel exercitationem officiis provident minima. </p>
</blockquote>
<div class="d-flex" data-aos="fade-up" data-aos-delay="200">
<a href="#about" class="btn-get-started">Get Started</a>
<a href="https://www.youtube.com/watch?v=LXb3EKWsInQ" class="glightbox btn-watch-video d-flex align-items-center"><i class="bi bi-play-circle"></i><span>Watch Video</span></a>
</div>
</div>
</div>
</div>
</section><!-- End Hero Section -->
<main id="main">
<!-- ======= Why Choose Us Section ======= -->
<section id="why-us" class="why-us">
<div class="container" data-aos="fade-up">
<div class="section-header">
<h2>Why Choose Us</h2>
</div>
<div class="row g-0" data-aos="fade-up" data-aos-delay="200">
<div class="col-xl-5 img-bg" style="background-image: url('assets/img/why-us-bg.jpg')"></div>
<div class="col-xl-7 slides position-relative">
<div class="slides-1 swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="item">
<h3 class="mb-3">Let's grow your business together</h3>
<h4 class="mb-3">Optio reiciendis accusantium iusto architecto at quia minima maiores quidem, dolorum.</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, ipsam perferendis asperiores explicabo vel tempore velit totam, natus nesciunt accusantium dicta quod quibusdam ipsum maiores nobis non, eum. Ullam reiciendis dignissimos laborum aut, magni voluptatem velit doloribus quas sapiente optio.</p>
</div>
</div><!-- End slide item -->
<div class="swiper-slide">
<div class="item">
<h3 class="mb-3">Unde perspiciatis ut repellat dolorem</h3>
<h4 class="mb-3">Amet cumque nam sed voluptas doloribus iusto. Dolorem eos aliquam quis.</h4>
<p>Dolorem quia fuga consectetur voluptatem. Earum consequatur nulla maxime necessitatibus cum accusamus. Voluptatem dolorem ut numquam dolorum delectus autem veritatis facilis. Et ea ut repellat ea. Facere est dolores fugiat dolor.</p>
</div>
</div><!-- End slide item -->
<div class="swiper-slide">
<div class="item">
<h3 class="mb-3">Aliquid non alias minus</h3>
<h4 class="mb-3">Necessitatibus voluptatibus explicabo dolores a vitae voluptatum.</h4>
<p>Neque voluptates aut. Soluta aut perspiciatis porro deserunt. Voluptate ut itaque velit. Aut consectetur voluptatem aspernatur sequi sit laborum. Voluptas enim dolorum fugiat aut.</p>
</div>
</div><!-- End slide item -->
<div class="swiper-slide">
<div class="item">
<h3 class="mb-3">Necessitatibus suscipit non voluptatem quibusdam</h3>
<h4 class="mb-3">Tempora quos est ut quia adipisci ut voluptas. Deleniti laborum soluta nihil est. Eum similique neque autem ut.</h4>
<p>Ut rerum et autem vel. Et rerum molestiae aut sit vel incidunt sit at voluptatem. Saepe dolorem et sed voluptate impedit. Ad et qui sint at qui animi animi rerum.</p>
</div>
</div><!-- End slide item -->
</div>
<div class="swiper-pagination"></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
</section><!-- End Why Choose Us Section -->
<!-- ======= Our Services Section ======= -->
<section id="services-list" class="services-list">
<div class="container" data-aos="fade-up">
<div class="section-header">
<h2>Our Services</h2>
</div>
<div class="row gy-5">
<div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
<div class="icon flex-shrink-0"><i class="bi bi-briefcase" style="color: #f57813;"></i></div>
<div>
<h4 class="title"><a href="#" class="stretched-link">Lorem Ipsum</a></h4>
<p class="description">Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident</p>
</div>
</div>
<!-- End Service Item -->
<div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="200">
<div class="icon flex-shrink-0"><i class="bi bi-card-checklist" style="color: #15a04a;"></i></div>
<div>
<h4 class="title"><a href="#" class="stretched-link">Dolor Sitema</a></h4>
<p class="description">Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat tarad limino ata</p>
</div>
</div><!-- End Service Item -->
<div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="300">
<div class="icon flex-shrink-0"><i class="bi bi-bar-chart" style="color: #d90769;"></i></div>
<div>
<h4 class="title"><a href="#" class="stretched-link">Sed ut perspiciatis</a></h4>
<p class="description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>
</div><!-- End Service Item -->
<div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="400">
<div class="icon flex-shrink-0"><i class="bi bi-binoculars" style="color: #15bfbc;"></i></div>
<div>
<h4 class="title"><a href="#" class="stretched-link">Magni Dolores</a></h4>
<p class="description">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div><!-- End Service Item -->
<div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="500">
<div class="icon flex-shrink-0"><i class="bi bi-brightness-high" style="color: #f5cf13;"></i></div>
<div>
<h4 class="title"><a href="#" class="stretched-link">Nemo Enim</a></h4>
<p class="description">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque</p>
</div>
</div><!-- End Service Item -->
<div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="600">
<div class="icon flex-shrink-0"><i class="bi bi-calendar4-week" style="color: #1335f5;"></i></div>
<div>
<h4 class="title"><a href="#" class="stretched-link">Eiusmod Tempor</a></h4>
<p class="description">Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi</p>
</div>
</div><!-- End Service Item -->
</div>
</div>
</section><!-- End Our Services Section -->
<!-- ======= Call To Action Section ======= -->
<section id="call-to-action" class="call-to-action">
<div class="container" data-aos="fade-up">
<div class="row justify-content-center">
<div class="col-lg-6 text-center">
<h3>Ut fugiat aliquam aut non</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
<a class="cta-btn" href="#">Call To Action</a>
</div>
</div>
</div>
</section><!-- End Call To Action Section -->
<!-- ======= Features Section ======= -->
<section id="features" class="features">
<div class="container" data-aos="fade-up">
<div class="row">
<div class="col-lg-7" data-aos="fade-up" data-aos-delay="100">
<h3>Powerful Features for <br>Your Business</h3>
<div class="row gy-4">
<div class="col-md-6">
<div class="icon-list d-flex">
<i class="ri-store-line" style="color: #ffbb2c;"></i>
<span>Easy Cart Features</span>
</div>
</div><!-- End Icon List Item-->
<div class="col-md-6">
<div class="icon-list d-flex">
<i class="ri-bar-chart-box-line" style="color: #5578ff;"></i>
<span>Sit amet consectetur adipisicing</span>
</div>
</div><!-- End Icon List Item-->
<div class="col-md-6">
<div class="icon-list d-flex">
<i class="ri-calendar-todo-line" style="color: #e80368;"></i>
<span>Ipsum Rerum Explicabo</span>
</div>
</div><!-- End Icon List Item-->
<div class="col-md-6">
<div class="icon-list d-flex">
<i class="ri-paint-brush-line" style="color: #e361ff;"></i>
<span>Easy Cart Features</span>
</div>
</div><!-- End Icon List Item-->
<div class="col-md-6">
<div class="icon-list d-flex">
<i class="ri-database-2-line" style="color: #47aeff;"></i>
<span>Easy Cart Features</span>
</div>
</div><!-- End Icon List Item-->
<div class="col-md-6">
<div class="icon-list d-flex">
<i class="ri-gradienter-line" style="color: #ffa76e;"></i>
<span>Sit amet consectetur adipisicing</span>
</div>
</div><!-- End Icon List Item-->
<div class="col-md-6">
<div class="icon-list d-flex">
<i class="ri-file-list-3-line" style="color: #11dbcf;"></i>
<span>Ipsum Rerum Explicabo</span>
</div>
</div><!-- End Icon List Item-->
<div class="col-md-6">
<div class="icon-list d-flex">
<i class="ri-base-station-line" style="color: #ff5828;"></i>
<span>Easy Cart Features</span>
</div>
</div><!-- End Icon List Item-->
</div>
</div>
<div class="col-lg-5 position-relative" data-aos="fade-up" data-aos-delay="200">
<div class="phone-wrap">
<img src="assets/img/iphone.png" alt="Image" class="img-fluid">
</div>
</div>
</div>
</div>
<div class="details">
<div class="container" data-aos="fade-up" data-aos-delay="300">
<div class="row">
<div class="col-md-6">
<h4>Labore Sdio Lidui<br>Bonde Naruto</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam nostrum molestias doloremque quae delectus odit minima corrupti blanditiis quo animi!</p>
<a href="#about" class="btn-get-started">Get Started</a>
</div>
</div>
</div>
</div>
</section><!-- End Features Section -->
<!-- ======= Recent Blog Posts Section ======= -->
<section id="recent-posts" class="recent-posts">
<div class="container" data-aos="fade-up">
<div class="section-header">
<h2>Recent Blog Posts</h2>
</div>
<div class="row gy-5">
<div class="col-xl-3 col-md-6" data-aos="fade-up" data-aos-delay="100">
<div class="post-box">
<div class="post-img"><img src="assets/img/blog/blog-1.jpg" class="img-fluid" alt=""></div>
<div class="meta">
<span class="post-date">Tue, December 12</span>
<span class="post-author"> / Julia Parker</span>
</div>
<h3 class="post-title">Eum ad dolor et. Autem aut fugiat debitis</h3>
<p>Illum voluptas ab enim placeat. Adipisci enim velit nulla. Vel omnis laudantium. Asperiores eum ipsa est officiis. Modi qui magni est...</p>
<a href="blog-details.html" class="readmore stretched-link"><span>Read More</span><i class="bi bi-arrow-right"></i></a>
</div>
</div>
<div class="col-xl-3 col-md-6" data-aos="fade-up" data-aos-delay="200">
<div class="post-box">
<div class="post-img"><img src="assets/img/blog/blog-2.jpg" class="img-fluid" alt=""></div>
<div class="meta">
<span class="post-date">Fri, September 05</span>
<span class="post-author"> / Mario Douglas</span>
</div>
<h3 class="post-title">Et repellendus molestiae qui est sed omnis</h3>
<p>Voluptatem nesciunt omnis libero autem tempora enim ut ipsam id. Odit quia ab eum assumenda. Quisquam omnis doloribus...</p>
<a href="blog-details.html" class="readmore stretched-link"><span>Read More</span><i class="bi bi-arrow-right"></i></a>
</div>
</div>
<div class="col-xl-3 col-md-6" data-aos="fade-up" data-aos-delay="300">
<div class="post-box">
<div class="post-img"><img src="assets/img/blog/blog-3.jpg" class="img-fluid" alt=""></div>
<div class="meta">
<span class="post-date">Tue, July 27</span>
<span class="post-author"> / Lisa Hunter</span>
</div>
<h3 class="post-title">Quia assumenda est et veritati</h3>
<p>Quia nam eaque omnis explicabo similique eum quaerat similique laboriosam. Quis omnis repellat sed quae consectetur magnam...</p>
<a href="blog-details.html" class="readmore stretched-link"><span>Read More</span><i class="bi bi-arrow-right"></i></a>
</div>
</div>
<div class="col-xl-3 col-md-6" data-aos="fade-up" data-aos-delay="400">
<div class="post-box">
<div class="post-img"><img src="assets/img/blog/blog-4.jpg" class="img-fluid" alt=""></div>
<div class="meta">
<span class="post-date">Tue, Sep 16</span>
<span class="post-author"> / Mario Douglas</span>
</div>
<h3 class="post-title">Pariatur quia facilis similique deleniti</h3>
<p>Et consequatur eveniet nam voluptas commodi cumque ea est ex. Aut quis omnis sint ipsum earum quia eligendi...</p>
<a href="blog-details.html" class="readmore stretched-link"><span>Read More</span><i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</section><!-- End Recent Blog Posts Section -->
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer" class="footer">
<div class="footer-content">
<div class="container">
<div class="row gy-4">
<div class="col-lg-5 col-md-12 footer-info">
<a href="index.html" class="logo d-flex align-items-center">
<span>Nova</span>
</a>
<p>Cras fermentum odio eu feugiat lide par naso tierra. Justo eget nada terra videa magna derita valies darta donna mare fermentum iaculis eu non diam phasellus.</p>
<div class="social-links d-flex mt-3">
<a href="#" class="twitter"><i class="bi bi-twitter"></i></a>
<a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
<a href="#" class="instagram"><i class="bi bi-instagram"></i></a>
<a href="#" class="linkedin"><i class="bi bi-linkedin"></i></a>
</div>
</div>
<div class="col-lg-2 col-6 footer-links">
<h4>Useful Links</h4>
<ul>
<li><i class="bi bi-dash"></i> <a href="#">Home</a></li>
<li><i class="bi bi-dash"></i> <a href="#">About us</a></li>
<li><i class="bi bi-dash"></i> <a href="#">Services</a></li>
<li><i class="bi bi-dash"></i> <a href="#">Terms of service</a></li>
<li><i class="bi bi-dash"></i> <a href="#">Privacy policy</a></li>
</ul>
</div>
<div class="col-lg-2 col-6 footer-links">
<h4>Our Services</h4>
<ul>
<li><i class="bi bi-dash"></i> <a href="#">Web Design</a></li>
<li><i class="bi bi-dash"></i> <a href="#">Web Development</a></li>
<li><i class="bi bi-dash"></i> <a href="#">Product Management</a></li>
<li><i class="bi bi-dash"></i> <a href="#">Marketing</a></li>
<li><i class="bi bi-dash"></i> <a href="#">Graphic Design</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-12 footer-contact text-center text-md-start">
<h4>Contact Us</h4>
<p>
A108 Adam Street <br>
New York, NY 535022<br>
United States <br><br>
<strong>Phone:</strong> +1 5589 55488 55<br>
<strong>Email:</strong> info@example.com<br>
</p>
</div>
</div>
</div>
</div>
<div class="footer-legal">
<div class="container">
<div class="copyright">
&copy; Copyright <strong><span>Nova</span></strong>. All Rights Reserved
</div>
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/nova-bootstrap-business-template/ -->
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
</div>
</div>
</div>
</footer><!-- End Footer -->
<!-- End Footer -->
<a href="#" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<div id="preloader"></div>
<!-- Vendor JS Files -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>