Category: Bootstrap 5

Angular 12 Bootstrap 5 Best Single Page Template 2021

Hello friends, welcome back to my blog. Today this blog post I will tell you, Angular 12 Bootstrap 5 Best Single Page Template 2021.

In this post, guys we will cover below things:

Bootstrap 5 Angular 12 Free Template Creation.
Angular 12 Bootstrap 5 Responsive Toggle Navbar.
Bootstrap 5 Sticky Navbar in Angular 12.
Angular 12 Swiper js working.
Lightbox with image slider in Angular 12.

Angular Bootstrap Responsive Template

Angular12 came and Bootstrap5 also and if you are new then you must check below two links:

Friends now I proceed onwards and here is the working code snippet and please use carefully this to avoid the mistakes:

1. Firstly friends we need fresh angular 12 setup and for this we need to run below commands but if you already have angular 12 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

npm install -g @angular/cli 

ng new angulardemo //Create new Angular Project

cd angulardemo // Go inside the Angular Project Folder

2. Now friends, please download zip(in this zip file there are js, css and images for angular single template) file from below path and extract zip and please put all the zip file folders in “src/assets” folder(which we will get from zip file):

https://therichpost.com/angularbootspa.zip

3. Now friends we just need to add below code into angulardemo/src/app/app.component.html file to get final out on the web browser:

<!-- ======= Top Bar ======= -->
<div id="topbar" class="fixed-top d-flex align-items-center ">
    <div class="container d-flex align-items-center justify-content-center justify-content-md-between">
      <div class="contact-info d-flex align-items-center">
        <i class="bi bi-envelope-fill"></i><a href="#"><span class="__cf_email__">therichposts@gmail.com</span></a>
        <i class="bi bi-phone-fill phone-icon"></i> +1 00000 000000
      </div>
      <div class="cta d-none d-md-block">
        <a href="#about" class="scrollto">Get Started</a>
      </div>
    </div>
  </div>

  <!-- ======= Header ======= -->
  <header id="header" class="fixed-top d-flex align-items-center ">
    <div class="container d-flex align-items-center justify-content-between">

      <h1 class="logo"><a href="#">Jassa</a></h1>
     

      <nav id="navbar" class="navbar">
        <ul>
          <li><a class="nav-link scrollto active" href="#hero">Home</a></li>
          <li><a class="nav-link scrollto" href="#about">About</a></li>
          <li><a class="nav-link scrollto" href="#services">Services</a></li>
          <li><a class="nav-link scrollto " href="#portfolio">Portfolio</a></li>
          <li><a class="nav-link scrollto" href="#team">Team</a></li>
          <li><a class="nav-link scrollto" href="#pricing">Pricing</a></li>
          <li><a href="#">Blog</a></li>
          <li class="dropdown"><a href="#"><span>Drop Down</span> <i class="bi bi-chevron-down"></i></a>
            <ul>
              <li><a href="#">Drop Down 1</a></li>
              <li class="dropdown"><a href="#"><span>Deep Drop Down</span> <i class="bi bi-chevron-right"></i></a>
                <ul>
                  <li><a href="#">Deep Drop Down 1</a></li>
                  <li><a href="#">Deep Drop Down 2</a></li>
                  <li><a href="#">Deep Drop Down 3</a></li>
                  <li><a href="#">Deep Drop Down 4</a></li>
                  <li><a href="#">Deep Drop Down 5</a></li>
                </ul>
              </li>
              <li><a href="#">Drop Down 2</a></li>
              <li><a href="#">Drop Down 3</a></li>
              <li><a href="#">Drop Down 4</a></li>
            </ul>
          </li>
          <li><a class="nav-link scrollto" href="#contact">Contact</a></li>
        </ul>
        <i class="bi bi-list mobile-nav-toggle"></i>
      </nav><!-- .navbar -->

    </div>
  </header><!-- End Header -->

  <!-- ======= Hero Section ======= -->
  <section id="hero" class="d-flex justify-cntent-center align-items-center">
    <div id="heroCarousel" data-bs-interval="5000" class="container carousel carousel-fade" data-bs-ride="carousel">

      <!-- Slide 1 -->
      <div class="carousel-item active">
        <div class="carousel-container">
          <h2 class="animate__animated animate__fadeInDown">Welcome to <span>Jassa</span></h2>
          <p class="animate__animated animate__fadeInUp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</p>
          <a href="#about" class="btn-get-started animate__animated animate__fadeInUp scrollto">Read More</a>
        </div>
      </div>

      <!-- Slide 2 -->
      <div class="carousel-item">
        <div class="carousel-container">
          <h2 class="animate__animated animate__fadeInDown">Lorem Ipsum Dolor</h2>
          <p class="animate__animated animate__fadeInUp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</p>
          <a href="#about" class="btn-get-started animate__animated animate__fadeInUp scrollto">Read More</a>
        </div>
      </div>

      <!-- Slide 3 -->
      <div class="carousel-item">
        <div class="carousel-container">
          <h2 class="animate__animated animate__fadeInDown">Rich Jassa</h2>
          <p class="animate__animated animate__fadeInUp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</p>
          <a href="#about" class="btn-get-started animate__animated animate__fadeInUp scrollto">Read More</a>
        </div>
      </div>

      <a class="carousel-control-prev" href="#heroCarousel" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon bx bx-chevron-left" aria-hidden="true"></span>
      </a>

      <a class="carousel-control-next" href="#heroCarousel" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon bx bx-chevron-right" aria-hidden="true"></span>
      </a>

    </div>
  </section><!-- End Hero -->

  <main id="main">

    <!-- ======= Icon Boxes Section ======= -->
    <section id="icon-boxes" class="icon-boxes">
      <div class="container">

        <div class="row">
          <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0" data-aos="fade-up">
            <div class="icon-box">
              <div class="icon"><i class="bx bxl-dribbble"></i></div>
              <h4 class="title"><a href="">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>

          <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0" data-aos="fade-up" data-aos-delay="100">
            <div class="icon-box">
              <div class="icon"><i class="bx bx-file"></i></div>
              <h4 class="title"><a href="">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>

          <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0" data-aos="fade-up" data-aos-delay="200">
            <div class="icon-box">
              <div class="icon"><i class="bx bx-tachometer"></i></div>
              <h4 class="title"><a href="">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>

          <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0" data-aos="fade-up" data-aos-delay="300">
            <div class="icon-box">
              <div class="icon"><i class="bx bx-layer"></i></div>
              <h4 class="title"><a href="">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>

        </div>

      </div>
    </section><!-- End Icon Boxes Section -->

    <!-- ======= About Us Section ======= -->
    <section id="about" class="about">
      <div class="container" data-aos="fade-up">

        <div class="section-title">
          <h2>About Us</h2>
          <p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
        </div>

        <div class="row content">
          <div class="col-lg-6">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua.
            </p>
            <ul>
              <li><i class="ri-check-double-line"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat</li>
              <li><i class="ri-check-double-line"></i> Duis aute irure dolor in reprehenderit in voluptate velit</li>
              <li><i class="ri-check-double-line"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat</li>
            </ul>
          </div>
          <div class="col-lg-6 pt-4 pt-lg-0">
            <p>
              Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
              velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
              culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <a href="#" class="btn-learn-more">Learn More</a>
          </div>
        </div>

      </div>
    </section><!-- End About Us Section -->

    <!-- ======= Clients Section ======= -->
    <section id="clients" class="clients">
      <div class="container" data-aos="zoom-in">

        <div class="clients-slider swiper-container">
          <div class="swiper-wrapper align-items-center">
            <div class="swiper-slide"><img src="assets/img/clients/client-1.png" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/client-2.png" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/client-3.png" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/client-4.png" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/client-5.png" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/client-6.png" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/client-7.png" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/client-8.png" class="img-fluid" alt=""></div>
          </div>
          <div class="swiper-pagination"></div>
        </div>

      </div>
    </section><!-- End Clients Section -->

    <!-- ======= Why Us Section ======= -->
    <section id="why-us" class="why-us">
      <div class="container-fluid">

        <div class="row">

          <div class="col-lg-5 align-items-stretch position-relative video-box" style='background-image: url("assets/img/why-us.jpg");' data-aos="fade-right">
            <a href="https://www.youtube.com/watch?v=bl4BUpuhNgY" class="venobox play-btn mb-4" data-vbtype="video" data-autoplay="true"></a>
          </div>

          <div class="col-lg-7 d-flex flex-column justify-content-center align-items-stretch" data-aos="fade-left">

            <div class="content">
              <h3>Eum ipsam laborum deleniti <strong>velit pariatur architecto aut nihil</strong></h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit
              </p>
            </div>

            <div class="accordion-list">
              <ul>
                <li data-aos="fade-up" data-aos-delay="100">
                  <a data-bs-toggle="collapse" class="collapse" data-bs-target="#accordion-list-1"><span>01</span> Non consectetur a erat nam at lectus urna duis? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
                  <div id="accordion-list-1" class="collapse show" data-bs-parent=".accordion-list">
                    <p>
                      Feugiat pretium nibh ipsum consequat. Tempus iaculis urna id volutpat lacus laoreet non curabitur gravida. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non.
                    </p>
                  </div>
                </li>

                <li data-aos="fade-up" data-aos-delay="200">
                  <a data-bs-toggle="collapse" data-bs-target="#accordion-list-2" class="collapsed"><span>02</span> Feugiat scelerisque varius morbi enim nunc? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
                  <div id="accordion-list-2" class="collapse" data-bs-parent=".accordion-list">
                    <p>
                      Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Id interdum velit laoreet id donec ultrices. Fringilla phasellus faucibus scelerisque eleifend donec pretium. Est pellentesque elit ullamcorper dignissim. Mauris ultrices eros in cursus turpis massa tincidunt dui.
                    </p>
                  </div>
                </li>

                <li data-aos="fade-up" data-aos-delay="300">
                  <a data-bs-toggle="collapse" data-bs-target="#accordion-list-3" class="collapsed"><span>03</span> Dolor sit amet consectetur adipiscing elit? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
                  <div id="accordion-list-3" class="collapse" data-bs-parent=".accordion-list">
                    <p>
                      Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Faucibus pulvinar elementum integer enim. Sem nulla pharetra diam sit amet nisl suscipit. Rutrum tellus pellentesque eu tincidunt. Lectus urna duis convallis convallis tellus. Urna molestie at elementum eu facilisis sed odio morbi quis
                    </p>
                  </div>
                </li>

              </ul>
            </div>

          </div>

        </div>

      </div>
    </section><!-- End Why Us Section -->

    <!-- ======= Services Section ======= -->
    <section id="services" class="services">
      <div class="container" data-aos="fade-up">

        <div class="section-title">
          <h2>Services</h2>
          <p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
        </div>

        <div class="row">
          <div class="col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="100">
            <div class="icon-box">
              <i class="bi bi-card-checklist"></i>
              <h4><a href="#">Lorem Ipsum</a></h4>
              <p>Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident</p>
            </div>
          </div>
          <div class="col-md-6 d-flex align-items-stretch mt-4 mt-md-0" data-aos="fade-up" data-aos-delay="200">
            <div class="icon-box">
              <i class="bi bi-bar-chart"></i>
              <h4><a href="#">Dolor Sitema</a></h4>
              <p>Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat tarad limino ata</p>
            </div>
          </div>
          <div class="col-md-6 d-flex align-items-stretch mt-4 mt-md-0" data-aos="fade-up" data-aos-delay="300">
            <div class="icon-box">
              <i class="bi bi-binoculars"></i>
              <h4><a href="#">Sed ut perspiciatis</a></h4>
              <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
            </div>
          </div>
          <div class="col-md-6 d-flex align-items-stretch mt-4 mt-md-0" data-aos="fade-up" data-aos-delay="400">
            <div class="icon-box">
              <i class="bi bi-brightness-high"></i>
              <h4><a href="#">Nemo Enim</a></h4>
              <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
            </div>
          </div>
          <div class="col-md-6 d-flex align-items-stretch mt-4 mt-md-0" data-aos="fade-up" data-aos-delay="500">
            <div class="icon-box">
              <i class="bi bi-calendar4-week"></i>
              <h4><a href="#">Magni Dolore</a></h4>
              <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque</p>
            </div>
          </div>
          <div class="col-md-6 d-flex align-items-stretch mt-4 mt-md-0" data-aos="fade-up" data-aos-delay="600">
            <div class="icon-box">
              <i class="bi bi-briefcase"></i>
              <h4><a href="#">Eiusmod Tempor</a></h4>
              <p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi</p>
            </div>
          </div>
        </div>

      </div>
    </section><!-- End Services Section -->

    <!-- ======= Cta Section ======= -->
    <section id="cta" class="cta">
      <div class="container">

        <div class="row" data-aos="zoom-in">
          <div class="col-lg-9 text-center text-lg-start">
            <h3>Call To Action</h3>
            <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="col-lg-3 cta-btn-container text-center">
            <a class="cta-btn align-middle" href="#">Call To Action</a>
          </div>
        </div>

      </div>
    </section><!-- End Cta Section -->

    <!-- ======= Portfoio Section ======= -->
    <section id="portfolio" class="portfoio">
      <div class="container" data-aos="fade-up">

        <div class="section-title">
          <h2>Portfoio</h2>
          <p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
        </div>

        <div class="row">
          <div class="col-lg-12 d-flex justify-content-center">
            <ul id="portfolio-flters">
              <li data-filter="*" class="filter-active">All</li>
              <li data-filter=".filter-app">App</li>
              <li data-filter=".filter-card">Card</li>
              <li data-filter=".filter-web">Web</li>
            </ul>
          </div>
        </div>

        <div class="row portfolio-container">

          <div class="col-lg-4 col-md-6 portfolio-item filter-app">
            <img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid" alt="">
            <div class="portfolio-info">
              <h4>App 1</h4>
              <p>App</p>
              <a href="assets/img/portfolio/portfolio-1.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox preview-link" title="App 1"><i class="bx bx-plus"></i></a>
              <a href="#" class="details-link" title="More Details"><i class="bx bx-link"></i></a>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 portfolio-item filter-web">
            <img src="assets/img/portfolio/portfolio-2.jpg" class="img-fluid" alt="">
            <div class="portfolio-info">
              <h4>Web 3</h4>
              <p>Web</p>
              <a href="assets/img/portfolio/portfolio-2.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox preview-link" title="Web 3"><i class="bx bx-plus"></i></a>
              <a href="#" class="details-link" title="More Details"><i class="bx bx-link"></i></a>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 portfolio-item filter-app">
            <img src="assets/img/portfolio/portfolio-3.jpg" class="img-fluid" alt="">
            <div class="portfolio-info">
              <h4>App 2</h4>
              <p>App</p>
              <a href="assets/img/portfolio/portfolio-3.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox preview-link" title="App 2"><i class="bx bx-plus"></i></a>
              <a href="#" class="details-link" title="More Details"><i class="bx bx-link"></i></a>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 portfolio-item filter-card">
            <img src="assets/img/portfolio/portfolio-4.jpg" class="img-fluid" alt="">
            <div class="portfolio-info">
              <h4>Card 2</h4>
              <p>Card</p>
              <a href="assets/img/portfolio/portfolio-4.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox preview-link" title="Card 2"><i class="bx bx-plus"></i></a>
              <a href="#" class="details-link" title="More Details"><i class="bx bx-link"></i></a>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 portfolio-item filter-web">
            <img src="assets/img/portfolio/portfolio-5.jpg" class="img-fluid" alt="">
            <div class="portfolio-info">
              <h4>Web 2</h4>
              <p>Web</p>
              <a href="assets/img/portfolio/portfolio-5.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox preview-link" title="Web 2"><i class="bx bx-plus"></i></a>
              <a href="#" class="details-link" title="More Details"><i class="bx bx-link"></i></a>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 portfolio-item filter-app">
            <img src="assets/img/portfolio/portfolio-6.jpg" class="img-fluid" alt="">
            <div class="portfolio-info">
              <h4>App 3</h4>
              <p>App</p>
              <a href="assets/img/portfolio/portfolio-6.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox preview-link" title="App 3"><i class="bx bx-plus"></i></a>
              <a href="#" class="details-link" title="More Details"><i class="bx bx-link"></i></a>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 portfolio-item filter-card">
            <img src="assets/img/portfolio/portfolio-7.jpg" class="img-fluid" alt="">
            <div class="portfolio-info">
              <h4>Card 1</h4>
              <p>Card</p>
              <a href="assets/img/portfolio/portfolio-7.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox preview-link" title="Card 1"><i class="bx bx-plus"></i></a>
              <a href="#" class="details-link" title="More Details"><i class="bx bx-link"></i></a>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 portfolio-item filter-card">
            <img src="assets/img/portfolio/portfolio-8.jpg" class="img-fluid" alt="">
            <div class="portfolio-info">
              <h4>Card 3</h4>
              <p>Card</p>
              <a href="assets/img/portfolio/portfolio-8.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox preview-link" title="Card 3"><i class="bx bx-plus"></i></a>
              <a href="#" class="details-link" title="More Details"><i class="bx bx-link"></i></a>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 portfolio-item filter-web">
            <img src="assets/img/portfolio/portfolio-9.jpg" class="img-fluid" alt="">
            <div class="portfolio-info">
              <h4>Web 3</h4>
              <p>Web</p>
              <a href="assets/img/portfolio/portfolio-9.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox preview-link" title="Web 3"><i class="bx bx-plus"></i></a>
              <a href="#" class="details-link" title="More Details"><i class="bx bx-link"></i></a>
            </div>
          </div>

        </div>

      </div>
    </section><!-- End Portfoio Section -->

    <!-- ======= Team Section ======= -->
    <section id="team" class="team section-bg">
      <div class="container" data-aos="fade-up">

        <div class="section-title">
          <h2>Team</h2>
          <p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
        </div>

        <div class="row">

          <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
            <div class="member d-flex align-items-start">
              <div class="pic"><img src="assets/img/team/team-1.jpg" class="img-fluid" alt=""></div>
              <div class="member-info">
                <h4>Jassa</h4>
                <span>Chief Executive Officer</span>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</p>
                <div class="social">
                  <a href=""><i class="ri-twitter-fill"></i></a>
                  <a href=""><i class="ri-facebook-fill"></i></a>
                  <a href=""><i class="ri-instagram-fill"></i></a>
                  <a href=""> <i class="ri-linkedin-box-fill"></i> </a>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-6 mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="200">
            <div class="member d-flex align-items-start">
              <div class="pic"><img src="assets/img/team/team-2.jpg" class="img-fluid" alt=""></div>
              <div class="member-info">
                <h4>Jassa</h4>
                <span>Product Manager</span>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</p>
                <div class="social">
                  <a href=""><i class="ri-twitter-fill"></i></a>
                  <a href=""><i class="ri-facebook-fill"></i></a>
                  <a href=""><i class="ri-instagram-fill"></i></a>
                  <a href=""> <i class="ri-linkedin-box-fill"></i> </a>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-6 mt-4" data-aos="fade-up" data-aos-delay="300">
            <div class="member d-flex align-items-start">
              <div class="pic"><img src="assets/img/team/team-3.jpg" class="img-fluid" alt=""></div>
              <div class="member-info">
                <h4>Jassa</h4>
                <span>CTO</span>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</p>
                <div class="social">
                  <a href=""><i class="ri-twitter-fill"></i></a>
                  <a href=""><i class="ri-facebook-fill"></i></a>
                  <a href=""><i class="ri-instagram-fill"></i></a>
                  <a href=""> <i class="ri-linkedin-box-fill"></i> </a>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-6 mt-4" data-aos="fade-up" data-aos-delay="400">
            <div class="member d-flex align-items-start">
              <div class="pic"><img src="assets/img/team/team-4.jpg" class="img-fluid" alt=""></div>
              <div class="member-info">
                <h4>Jassa</h4>
                <span>Accountant</span>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</p>
                <div class="social">
                  <a href=""><i class="ri-twitter-fill"></i></a>
                  <a href=""><i class="ri-facebook-fill"></i></a>
                  <a href=""><i class="ri-instagram-fill"></i></a>
                  <a href=""> <i class="ri-linkedin-box-fill"></i> </a>
                </div>
              </div>
            </div>
          </div>

        </div>

      </div>
    </section><!-- End Team Section -->

    <!-- ======= Pricing Section ======= -->
    <section id="pricing" class="pricing">
      <div class="container" data-aos="fade-up">

        <div class="section-title">
          <h2>Pricing</h2>
          <p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
        </div>

        <div class="row">

          <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="100">
            <div class="box">
              <h3>Free</h3>
              <h4><sup>$</sup>0<span> / month</span></h4>
              <ul>
                <li>Aida dere</li>
                <li>Nec feugiat nisl</li>
                <li>Nulla at volutpat dola</li>
                <li class="na">Pharetra massa</li>
                <li class="na">Massa ultricies mi</li>
              </ul>
              <div class="btn-wrap">
                <a href="#" class="btn-buy">Buy Now</a>
              </div>
            </div>
          </div>

          <div class="col-lg-3 col-md-6 mt-4 mt-md-0" data-aos="fade-up" data-aos-delay="200">
            <div class="box featured">
              <h3>Business</h3>
              <h4><sup>$</sup>19<span> / month</span></h4>
              <ul>
                <li>Aida dere</li>
                <li>Nec feugiat nisl</li>
                <li>Nulla at volutpat dola</li>
                <li>Pharetra massa</li>
                <li class="na">Massa ultricies mi</li>
              </ul>
              <div class="btn-wrap">
                <a href="#" class="btn-buy">Buy Now</a>
              </div>
            </div>
          </div>

          <div class="col-lg-3 col-md-6 mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="300">
            <div class="box">
              <h3>Developer</h3>
              <h4><sup>$</sup>29<span> / month</span></h4>
              <ul>
                <li>Aida dere</li>
                <li>Nec feugiat nisl</li>
                <li>Nulla at volutpat dola</li>
                <li>Pharetra massa</li>
                <li>Massa ultricies mi</li>
              </ul>
              <div class="btn-wrap">
                <a href="#" class="btn-buy">Buy Now</a>
              </div>
            </div>
          </div>

          <div class="col-lg-3 col-md-6 mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="400">
            <div class="box">
              <span class="advanced">Advanced</span>
              <h3>Ultimate</h3>
              <h4><sup>$</sup>49<span> / month</span></h4>
              <ul>
                <li>Aida dere</li>
                <li>Nec feugiat nisl</li>
                <li>Nulla at volutpat dola</li>
                <li>Pharetra massa</li>
                <li>Massa ultricies mi</li>
              </ul>
              <div class="btn-wrap">
                <a href="#" class="btn-buy">Buy Now</a>
              </div>
            </div>
          </div>

        </div>

      </div>
    </section><!-- End Pricing Section -->

    <!-- ======= Frequently Asked Questions Section ======= -->
    <section id="faq" class="faq section-bg">
      <div class="container" data-aos="fade-up">

        <div class="section-title">
          <h2>Frequently Asked Questions</h2>
        </div>

        <div class="faq-list">
          <ul>
            <li data-aos="fade-up" data-aos="fade-up" data-aos-delay="100">
              <i class="bx bx-help-circle icon-help"></i> <a data-bs-toggle="collapse" class="collapse" data-bs-target="#faq-list-1">Non consectetur a erat nam at lectus urna duis? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
              <div id="faq-list-1" class="collapse show" data-bs-parent=".faq-list">
                <p>
                  Feugiat pretium nibh ipsum consequat. Tempus iaculis urna id volutpat lacus laoreet non curabitur gravida. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non.
                </p>
              </div>
            </li>

            <li data-aos="fade-up" data-aos-delay="200">
              <i class="bx bx-help-circle icon-help"></i> <a data-bs-toggle="collapse" data-bs-target="#faq-list-2" class="collapsed">Feugiat scelerisque varius morbi enim nunc? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
              <div id="faq-list-2" class="collapse" data-bs-parent=".faq-list">
                <p>
                  Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Id interdum velit laoreet id donec ultrices. Fringilla phasellus faucibus scelerisque eleifend donec pretium. Est pellentesque elit ullamcorper dignissim. Mauris ultrices eros in cursus turpis massa tincidunt dui.
                </p>
              </div>
            </li>

            <li data-aos="fade-up" data-aos-delay="300">
              <i class="bx bx-help-circle icon-help"></i> <a data-bs-toggle="collapse" data-bs-target="#faq-list-3" class="collapsed">Dolor sit amet consectetur adipiscing elit? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
              <div id="faq-list-3" class="collapse" data-bs-parent=".faq-list">
                <p>
                  Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Faucibus pulvinar elementum integer enim. Sem nulla pharetra diam sit amet nisl suscipit. Rutrum tellus pellentesque eu tincidunt. Lectus urna duis convallis convallis tellus. Urna molestie at elementum eu facilisis sed odio morbi quis
                </p>
              </div>
            </li>

            <li data-aos="fade-up" data-aos-delay="400">
              <i class="bx bx-help-circle icon-help"></i> <a data-bs-toggle="collapse" data-bs-target="#faq-list-4" class="collapsed">Tempus quam pellentesque nec nam aliquam sem et tortor consequat? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
              <div id="faq-list-4" class="collapse" data-bs-parent=".faq-list">
                <p>
                  Molestie a iaculis at erat pellentesque adipiscing commodo. Dignissim suspendisse in est ante in. Nunc vel risus commodo viverra maecenas accumsan. Sit amet nisl suscipit adipiscing bibendum est. Purus gravida quis blandit turpis cursus in.
                </p>
              </div>
            </li>

            <li data-aos="fade-up" data-aos-delay="500">
              <i class="bx bx-help-circle icon-help"></i> <a data-bs-toggle="collapse" data-bs-target="#faq-list-5" class="collapsed">Tortor vitae purus faucibus ornare. Varius vel pharetra vel turpis nunc eget lorem dolor? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
              <div id="faq-list-5" class="collapse" data-bs-parent=".faq-list">
                <p>
                  Laoreet sit amet cursus sit amet dictum sit amet justo. Mauris vitae ultricies leo integer malesuada nunc vel. Tincidunt eget nullam non nisi est sit amet. Turpis nunc eget lorem dolor sed. Ut venenatis tellus in metus vulputate eu scelerisque.
                </p>
              </div>
            </li>

          </ul>
        </div>

      </div>
    </section><!-- End Frequently Asked Questions Section -->

    <!-- ======= Contact Section ======= -->
    <section id="contact" class="contact">
      <div class="container" data-aos="fade-up">

        <div class="section-title">
          <h2>Contact Us</h2>
        </div>

        <div class="row mt-1 d-flex justify-content-end" data-aos="fade-right" data-aos-delay="100">

          <div class="col-lg-5">
            <div class="info">
              <div class="address">
                <i class="bi bi-geo-alt"></i>
                <h4>Location:</h4>
                <p>Ludhiana Punjab India</p>
              </div>

              <div class="email">
                <i class="bi bi-envelope"></i>
                <h4>Email:</h4>
                <p><a href="#" class="__cf_email__" >therichposts@gmail.com</a></p>
              </div>

              <div class="phone">
                <i class="bi bi-phone"></i>
                <h4>Call:</h4>
                <p>+0 000000 000000 000</p>
              </div>

            </div>

          </div>

          <div class="col-lg-6 mt-5 mt-lg-0" data-aos="fade-left" data-aos-delay="100">

            <form action="#" method="#" role="form" class="php-email-form">
              <div class="row">
                <div class="col-md-6 form-group">
                  <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required>
                </div>
                <div class="col-md-6 form-group mt-3 mt-md-0">
                  <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
                </div>
              </div>
              <div class="form-group mt-3">
                <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required>
              </div>
              <div class="form-group mt-3">
                <textarea class="form-control" name="message" rows="5" placeholder="Message" required></textarea>
              </div>
              <div class="my-3">
                <div class="loading">Loading</div>
                <div class="error-message"></div>
                <div class="sent-message">Your message has been sent. Thank you!</div>
              </div>
              <div class="text-center"><button type="submit">Send Message</button></div>
            </form>

          </div>

        </div>

      </div>
    </section><!-- End Contact Section -->

  </main><!-- End #main -->

  <!-- ======= Footer ======= -->
  <footer id="footer">

    <div class="footer-newsletter">
      <div class="container">
        <div class="row">
          <div class="col-lg-6">
            <h4>Our Newsletter</h4>
            <p>Tamen quem nulla quae legam multos aute sint culpa legam noster magna</p>
          </div>
          <div class="col-lg-6">
            <form action="" method="post">
              <input type="email" name="email"><input type="submit" value="Subscribe">
            </form>
          </div>
        </div>
      </div>
    </div>

    <div class="footer-top">
      <div class="container">
        <div class="row">

          <div class="col-lg-3 col-md-6 footer-links">
            <h4>Useful Links</h4>
            <ul>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Home</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">About us</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Services</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Terms of service</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Privacy policy</a></li>
            </ul>
          </div>

          <div class="col-lg-3 col-md-6 footer-links">
            <h4>Our Services</h4>
            <ul>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Web Design</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Web Development</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Product Management</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Marketing</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Graphic Design</a></li>
            </ul>
          </div>

          <div class="col-lg-3 col-md-6 footer-contact">
            <h4>Contact Us</h4>
            <p>
              Ludhiana <br>
              Punjab<br>
              India <br><br>
              <strong>Phone:</strong> +1 00000 00000 000<br>
              <strong>Email:</strong> <a href="#" class="__cf_email__" >therichposts@gmail.com</a><br>
            </p>

          </div>

          <div class="col-lg-3 col-md-6 footer-info">
            <h3>About Jassa</h3>
            <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 mt-3">
              <a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
              <a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
              <a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
              <a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
              <a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
            </div>
          </div>

        </div>
      </div>
    </div>

    <div class="container">
      <div class="copyright">
        &copy; Copyright <strong><span>Jassa</span></strong>. All Rights Reserved
      </div>
      <div class="credits">
      
         by <a href="https://therichpost.com/">Jassa</a>
      </div>
    </div>
  </footer><!-- End Footer -->

  <div id="preloader"></div>
  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

4. Now guys please add the below code inside angulardemo/src/index.html file to styles and scripts:

...
<head>
 ...
 <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

    <!-- Vendor CSS Files -->
    <link href="assets/css/animate.min.css" rel="stylesheet">
    <link href="assets/css/aos.css" rel="stylesheet">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/bootstrap-icons.css" rel="stylesheet">
    <link href="assets/css/boxicons.min.css" rel="stylesheet">
    <link href="assets/css/glightbox.min.css" rel="stylesheet">
    <link href="assets/css/remixicon.css" rel="stylesheet">
    <link href="assets/css/swiper-bundle.min.css" rel="stylesheet">
  
    <!-- Template Main CSS File -->
    <link href="assets/css/style.css" rel="stylesheet">
  <!-- Vendor JS Files -->
  <script src="assets/js/aos.js"></script>
  <script src="assets/js/bootstrap.bundle.min.js"></script>
  <script src="assets/js/glightbox.min.js"></script>
  <script src="assets/js/isotope.pkgd.min.js"></script>
  <script src="assets/js/swiper-bundle.min.js"></script>

  <!-- Template Main JS File -->
  <script src="assets/js/main.js"></script>
</head>
...

Friends in the end must run ng serve command into your terminal to run the angular 12 project (localhost:4200).

Guys click here to check the Angular 12 Bootstrap 5 Free Templates.

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks

June 22, 2021

React Native User Registration Form with Validation

Hello friends, welcome again on my blog therichpost.com. Today in this post, I will tell you, React Native User Registration Form with Validation.

Here friends, for live working example please check the below video:

Working Video

For React Native new comers, please check below link:

React Native

Here is the code snippet and please follow carefully:

1. Firstly friends we need fresh react native set up and for this, we need to run below commands into our terminal or if you already have then no need for this step. Importantly we should have latest node version installed on our system:

npm install -g expo-cli  

expo init AwesomeProject

cd AwesomeProject

2. Now friends we need to run below commands into our project terminal to get formik and others modules which will help us to achieve this post working:

npm i formik

npm i bootstrap

npm start

3. Now friends we are done with commands, now please open project/App.js file and add below code inside it:

import React from 'react';
import { StyleSheet, Text, View, SafeAreaView, Button, TextInput} from 'react-native';
import { Formik, Form, Field } from 'formik';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
export default function App() {
  function validateEmail(value) {
    let error;
    if (!value) {
      error = 'Required';
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
      error = 'Invalid email address';
    }
    return error;
  }
  
  function validateUsername(value) {
    let error;
    if (!value) {
      error = 'Required';
    }
    return error;
  }
  function validatePassword(value) {
    let error;
    if (!value) {
      error = 'Required';
    }
    return error;
  }
  return (
    <div class="container mt-5 mb-5">
      <div class="row d-flex align-items-center justify-content-center">
        <div class="col-md-6">
            <div class="card px-5 py-5"> <span class="circle"><i class="fa fa-check"></i></span>
    <SafeAreaView>
    <h5 class="mt-3">React Native <br /> User Registration Form</h5> <small class="mt-2 mb-2 text-muted">Jassa Therichpost.com</small>
     <Formik
       initialValues={{
         username: '',
         email: '',
         password: '',
       }}
       onSubmit={values => {
         // same shape as initial values
         console.log(values);
       }}
     >
       {({ errors, touched, validateField, validateForm }) => (
         <Form>
           <div class="form-input"> <i class="fa fa-envelope"></i>
           <Field placeholder="Email address" className="form-control" type="email" name="email" validate={validateEmail} />
           {errors.email && touched.email && <div className="text-danger">{errors.email}</div>}
           </div>
           <div class="form-input"> <i class="fa fa-user"></i>
           <Field placeholder="Username" className="form-control" name="username" validate={validateUsername}/>
           {errors.username && touched.username && <div className="text-danger">{errors.username}</div>}
          </div>
          <div class="form-input"> <i class="fa fa-lock"></i>
           <Field placeholder="Password" className="form-control" name="password" type="password" validate={validatePassword}/>
           {errors.password && touched.password && <div className="text-danger">{errors.password}</div>}
           </div>
           <div class="d-grid gap-2">
         
           <button className="btn btn-primary mt-4 signup" type="submit">Register</button>
           </div>
         </Form>
       )}
     </Formik>
   </SafeAreaView>
      
      </div>
     </div>
    </div>
   </div>
  );
}

4. Now guys, now we need to create App.css file inside our project folder and add below code:

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");


body {
    background-color: #535fe6;
    font-family: "Poppins", sans-serif;
    font-weight: 300
}

.height {
    height: 100vh
}

.card {
    border: none;
    padding: 20px;
    background-color: #1c1e21;
    color: #fff
}

.circle {
    height: 20px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #5855e7;
    color: #fff;
    font-size: 10px;
    border-radius: 50%
}

.form-input {
    position: relative;
    margin-bottom: 10px;
    margin-top: 10px
}

.form-input i {
    position: absolute;
    font-size: 18px;
    top: 15px;
    left: 10px
}

.form-control {
    height: 50px;
    background-color: #1c1e21;
    text-indent: 24px;
    font-size: 15px
}

.form-control:focus {
    background-color: #25272a;
    box-shadow: none;
    color: #fff;
    border-color: #4f63e7
}

.form-check-label {
    margin-top: 2px;
    font-size: 14px
}

.signup {
    height: 50px;
    font-size: 14px
}

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.
I will appreciate that if you will tell your views for this post.Nothing matters if your views will good or bad.

Jassa

Thanks

June 22, 2021

Angular 12 Crud Tutorial with Services Part 4 – Update User

Hello to all welcome back on my blog therichpost.com. Today in this blog post, I am going to tell you, Angular 12 Crud Tutorial with Services Part 4 – Update User.

Important : Guy’s before stating with this, please check the below links for basic angular 12 setup with services:

Angular12 Crud Tutorial with Services Part 1 – Add User
Angular 12 Crud Tutorial with Services Part 2 – Delete User
Angular 12 Crud Tutorial with Services Part 3 – View User

Working Video

**Angular 12 Crud Edit User Form with Validation**

Guy’s with this post we will learn below things:

Angular12 dynamic routing.
Get url parameter value in angular12.

Guys here is working code snippet and please follow carefully to avoid the mistakes:

1. Guy’s very first we need to run the below command into our project terminal to create the edit user component:

ng g c edituser

2. Now friends, now we need to add below code into our angularcrud/src/app/app-routing.module.ts file to make edit user dynamic route:

...
import { EdituserComponent } from './edituser/edituser.component';
const routes: Routes = [
 ...
  { path: 'edituser/:id', component: EdituserComponent },
];

3. Now friends, now we need to add below code into our angularcrud/src/app/crud.service.ts file to create EDIT User API services:

...
export class CrudService {
  ...
  //update user
  public updateuser(userid)
  {
    return this.http.post('http://localhost/users.php/'
    , userid).subscribe((res: Response) => {});
  }


    
}

4. Now guys, now we need to add below code into our angularcrud/src/app/users/users.component.html file:

I must say please replace old file code with this code completely because I have done some more changes.

<div class="container p-5">
    <h1>Users</h1>
    <table class="table table-hover table-bordered">
        <thead>
          <tr>
            <th>ID</th>
            <th>Email</th>
            <th>Username</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
       
           
              <tr *ngFor="let group of data">
                <td>{{group.id}}</td>
                <td>{{group.email}}</td>
                <td>{{group.username}}</td>
                <td><button class="bg-danger"> <i class="fas fa-trash" (click)="deleteuser(group.id)"></i> </button>
                  <a class="bg-warning" routerLink="/user/{{group.id}}"> <i class="fas fa-eye"></i> </a>
                  <a class="bg-primary" routerLink="/edituser/{{group.id}}"> <i class="fas fa-edit"></i> </a></td>
              </tr>
           
         
         
          
        </tbody>
      </table>

     
</div>

5. Now guys, now we need to add below code into our angularcrud/src/app/edituser/edituser.component.ts file:

...
import {Router, ActivatedRoute, Params} from '@angular/router'; //ActivatedRoute module to get dynamicid from route
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CrudService } from '../crud.service'; 

export class EdituserComponent implements OnInit {
  ...
  id:any;
  user:any;
  

  constructor(private activatedRoute: ActivatedRoute, private crudservice: CrudService, private formBuilder: FormBuilder, private router: Router) {

    //getting and storing dynamic ID
    this.id = this.activatedRoute.snapshot.paramMap.get('id');

      //Single Product WEB API
    // Initialize Params Object
    var myFormData = new FormData();
        
    // Begin assigning parameters
  
    myFormData.append('userid', this.id);
  
    //user details post request
    this.crudservice.getsingleuser(myFormData);
    setTimeout(()=>{ 
    this.user = this.crudservice.singleuserdata;
    this.editForm.controls["firstname"].setValue(this.user.username);
    this.editForm.controls["email"].setValue(this.user.email);
    }, 100);
    }

 


  //Edit User

  editForm: FormGroup;
submitted = false;

//Add user form actions
get f() { return this.editForm.controls; }
onSubmit() {
  
  this.submitted = true;
  // stop here if form is invalid
  if (this.editForm.invalid) {
      return;
  }
  //True if all the fields are filled
  if(this.submitted)
  {
    
    // Initialize Params Object
     var myFormData = new FormData();
  
   // Begin assigning parameters
  
      myFormData.append('updateUsername', this.editForm.value.firstname);
      myFormData.append('updateEmail', this.editForm.value.email);
      myFormData.append('updateid', this.user.id);
  
      this.crudservice.updateuser(myFormData);
      this.router.navigate([`/users`]);
  }
 
}
  ngOnInit() {
    //Add User form validations
    this.editForm = this.formBuilder.group({
    email: ['', [Validators.required, Validators.email]],
   
    firstname: ['', [Validators.required]]
    });
  }


}

6. Now guys, now we need to add below code into our angularcrud/src/app/edituser/edituser.component.html file:

<div class="container p-5">
    <h1 class="text-left mb-5">Edit User :{{user.username}}</h1>
  <form [formGroup]="editForm" (ngSubmit)="onSubmit()">
    <div class="row">
       <div class="col-sm-6">
          <div class="form-group">
                <label>Username</label>
                <input type="text" formControlName="firstname" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstname.errors }" />
                <div *ngIf="submitted && f.firstname.errors" class="invalid-feedback">
                      <div *ngIf="f.firstname.errors.required">Name is required</div>
                </div>
             </div>
       </div> 
       <div class="col-sm-6">
          <div class="form-group">
             <label>Email</label>
             <input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
             <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
                <div *ngIf="f.email.errors.required">Email is required</div>
                <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
             </div>
          </div>
       </div>
       
       
   </div>
   <button type="submit" class="btn btn-primary">Update</button>
  </form>
  </div>

7. Now guys, now we need to add below code inside our xampp/htdocs/users.php file:

I must say please replace old file code with this code completely because I have done some more changes.

<?php header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Methods:POST,GET,PUT,DELETE');
header('Access-Control-Allow-Headers: content-type or other');
header('Content-Type: application/json');

//Please create users database inside phpmysql admin and create userdetails tabel and create id, email and username fields

$servername = "localhost";
$username   = "root";
$password   = "";
$dbname     = "users";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

//Add user
if(isset($_POST['myEmail']))
{
    $sql = "INSERT INTO userdetails (email, username)
        VALUES ('".$_POST['myEmail']."', '".$_POST['myUsername']."')";
    if (mysqli_query($conn,$sql)) {
    $data = array("data" => "You Data added successfully");
        echo json_encode($data);
    } else {
        $data = array("data" => "Error: " . $sql . "<br>" . $conn->error);
        echo json_encode($data);
        
    }
}
//Delete user
elseif(isset($_POST['deleteid']))
{
    $sql = mysqli_query($conn, "DELETE from userdetails where id =".$_POST['deleteid']);
    if ($sql) {
        
        $data = array("data" => "Record deleted successfully");
        echo json_encode($data);
      } else {
      
        $data = array("data" =>"Error deleting record: " . mysqli_error($conn));
        echo json_encode($data);
      }
}
//Get single user details
elseif(isset($_POST['userid']))
{
    $trp = mysqli_query($conn, "SELECT * from userdetails where id =".$_POST['userid']);
    $rows = array();
    while($r = mysqli_fetch_assoc($trp)) {
        $rows[] = $r;
    }
    print json_encode($rows);
}
//Update user
elseif(isset($_POST["updateid"]))
{
    $sql = "UPDATE userdetails SET email='".$_POST["updateEmail"]."', username='".$_POST["updateUsername"]."'  WHERE id=".$_POST["updateid"];

    if ($conn->query($sql) === TRUE) {
    
       $data = array("data" => "Record updated successfully");
        echo json_encode($data);
    } else {
    
    $data = array("data" => "Error updating record: " . $conn->error);
    echo json_encode($data);
    }
}
else
{
    //get all users details
    $trp = mysqli_query($conn, "SELECT * from userdetails ORDER BY id DESC");
    $rows = array();
    while($r = mysqli_fetch_assoc($trp)) {
        $rows[] = $r;
    }

   

    print json_encode($rows);
}

die();

Guy’s in the end please run ng serve command to check the out on browser(localhost:4200) and also please start your xampp. Guy’s If you have any kind of query then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above. I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks.

June 21, 2021

Angular 12 Crud Tutorial with Services Part 3 – View User

Hello to all welcome back on my blog therichpost.com. Today in this blog post, I am going to tell you, Angular 12 Crud Tutorial with Services Part 3 – View User.

Important : Guy’s before stating with this, please check the part 1 and part 2 for basic angular 12 setup with services: Angular 12 Crud Tutorial with Services Part 1 – Add User
Angular 12 Crud Tutorial with Services Part 2 – Delet e User

Working Video

Guy’s with this post we will learn below things:

Angular12 dynamic routing.
Get url parameter value in angular12.

Guys here is working code snippet and please follow carefully to avoid the mistakes:

1. Guy’s very first we need to run the below command into our project terminal to create the view user component:

ng g c user

2. Now friends, now we need to add below code into our angularcrud/src/app/app-routing.module.ts file to make view user dynamic route:

...
import { UserComponent } from './user/user.component'
const routes: Routes = [
  ...
  { path: 'user/:id', component: UserComponent },
];

3. Now friends, now we need to add below code into our angularcrud/src/app/crud.service.ts file to create View User API services:

...
export class CrudService {
  ...
  userid:any;
  singleuserdata:any;
  //get single user
  public getsingleuser(userid)
  {
    return this.http.post('http://localhost/users.php/'
    , userid).subscribe((res: Response) => {
      this.singleuserdata = res[0];
      
      
    });
  }


    
}

4. Now guys, now we need to add below code into our angularcrud/src/app/users/users.component.html file:

I must say please replace old file code with this code completely because I have done some more changes.

<div class="container p-5">
    <h1>Users</h1>
    <table class="table table-hover table-bordered">
        <thead>
          <tr>
            <th>ID</th>
            <th>Email</th>
            <th>Username</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
       
           
              <tr *ngFor="let group of data">
                <td>{{group.id}}</td>
                <td>{{group.email}}</td>
                <td>{{group.username}}</td>
                <td><button class="bg-danger"> <i class="fas fa-trash" (click)="deleteuser(group.id)"></i> </button>
                  <a class="bg-warning" routerLink="/user/{{group.id}}"> <i class="fas fa-eye"></i> </a></td>
              </tr>
           
         
         
          
        </tbody>
      </table>

     
</div>

5. Now guys, now we need to add below code into our angularcrud/src/app/user/user.component.ts file:

Guy’s in this first we will get dynamic ID from url and after that getting data from API according to that ID

...
import {Router, ActivatedRoute, Params} from '@angular/router'; //ActivatedRoute module to get dynamicid from route
import { CrudService } from '../crud.service'; 

export class UserComponent implements OnInit {

  id:any;
  user:any;
  

  constructor(private activatedRoute: ActivatedRoute, private crudservice: CrudService) {

    //getting and storing dynamic ID
    this.id = this.activatedRoute.snapshot.paramMap.get('id');

    //Single User WEB API
   // Initialize Params Object
   var myFormData = new FormData();
       
   // Begin assigning parameters
 
   myFormData.append('userid', this.id);
 
   //user details post request
   this.crudservice.getsingleuser(myFormData);
   setTimeout(()=>{ 
   this.user = this.crudservice.singleuserdata;
  }, 100);
  }

  ngOnInit(): void {
  }

}

6. Now guys, now we need to add below code into our angularcrud/src/app/user/user.component.html file:

<div class="container p-5">
    <h1>Users</h1>
    <table class="table table-hover table-bordered">
        <thead>
          <tr>
            <th>ID</th>
            <th>Email</th>
            <th>Username</th>
          
          </tr>
        </thead>
        <tbody>
       
           
              <tr>
                <td>{{user.id}}</td>
                <td>{{user.email}}</td>
                <td>{{user.username}}</td>
                
              </tr>
           
         
         
          
        </tbody>
      </table>

     
</div>

7. Now guy’s please add below code inside https://angularcrud/src/index.html file for icons and styles:

...
<head>
...
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
  <style>
     .bg-primary, .bg-warning, .bg-danger, .bg-info{border: none;
    margin-right: 3px;
    height: 25px;
    width: 24px;
    float: left;
    text-align: center;}
   .fa-edit:before,  .fa-user:before, .fa-trash:before, .fa-eye:before{color: #fff;}
   .btn{margin-right: 3px;}
   
  </style>
</head>
...

8. Now guys, now we need to add below code inside our xampp/htdocs/users.php file:

I must say please replace old file code with this code completely because I have done some more changes.

<?php header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Methods:POST,GET,PUT,DELETE');
header('Access-Control-Allow-Headers: content-type or other');
header('Content-Type: application/json');

//Please create users database inside phpmysql admin and create userdetails tabel and create id, email and username fields

$servername = "localhost";
$username   = "root";
$password   = "";
$dbname     = "users";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

//Add user
if(isset($_POST['myEmail']))
{
    $sql = "INSERT INTO userdetails (email, username)
        VALUES ('".$_POST['myEmail']."', '".$_POST['myUsername']."')";
    if (mysqli_query($conn,$sql)) {
    $data = array("data" => "You Data added successfully");
        echo json_encode($data);
    } else {
        $data = array("data" => "Error: " . $sql . "<br>" . $conn->error);
        echo json_encode($data);
        
    }
}
//Delete user
elseif(isset($_POST['deleteid']))
{
    $sql = mysqli_query($conn, "DELETE from userdetails where id =".$_POST['deleteid']);
    if ($sql) {
        
        $data = array("data" => "Record deleted successfully");
        echo json_encode($data);
      } else {
      
        $data = array("data" =>"Error deleting record: " . mysqli_error($conn));
        echo json_encode($data);
      }
}
//Get single user details
elseif(isset($_POST['userid']))
{
    $trp = mysqli_query($conn, "SELECT * from userdetails where id =".$_POST['userid']);
    $rows = array();
    while($r = mysqli_fetch_assoc($trp)) {
        $rows[] = $r;
    }
    print json_encode($rows);
}
else
{
    //get all users details
    $trp = mysqli_query($conn, "SELECT * from userdetails ORDER BY id DESC");
    $rows = array();
    while($r = mysqli_fetch_assoc($trp)) {
        $rows[] = $r;
    }

   

    print json_encode($rows);
}

die();

Now in the end please run ng serve command to check the out on browser(localhost:4200) and also please start your xampp.

Guy’s in next post we will do update user functionality. If you have any kind of query then please comment below.

Jassa

Thanks.

June 18, 2021

Angular 12 Crud Tutorial with Services Part 2 – Delete User

Hello to all welcome back on my blog therichpost.com. Today in this blog post, I am going to tell you, Angular 12 Crud Tutorial with Services Part 2 – Delete User.

Important : Guy’s before stating with this, please check the first part for basic angular 12 setup with services:
Angular 12 Crud Tutorial with Services Part 1 – Add User

Working Video

Guy’s with this post we will do below things:

Sweetalert2 implementation in angular 12.

Guys here is working code snippet for Angular 12 Crud Tutorial with Services Part 2 – Delete User and please follow carefully to avoid the mistakes:

1. Now friends, here we need to run below command into our project terminal to install sweetalert1 module for popup alerts into our angular application:

npm install --save sweetalert2

2. Now friends, now we need to add below code into our angularcrud/angular.json file to add bootstrap style:

"styles": [
              ...
              "node_modules/sweetalert2/src/sweetalert2.scss"
          ],
"scripts": [
              ...
              "node_modules/sweetalert2/dist/sweetalert2.js"
            ],

3. Now friends, now we need to add below code into our angularcrud/src/app/crud.service.ts file to create API services:

...
export class CrudService {
 ...
 //delete user
  public deleteuser(userid)
  {
    return this.http.post('http://localhost/users.php/'
    , userid).subscribe((res: Response) => {});
  }
    
}

4. Now guys, now we need to add below code into our angularcrud/src/app/users/users.component.ts file to create delete user functionality:

I must say please replace old file code with this code completely because I have done some more changes.

...
import { CrudService } from '../crud.service'; 
import Swal from 'sweetalert2/dist/sweetalert2.js';

export class UsersComponent implements OnInit {
  data = [];
  constructor( private crudservice: CrudService){
    this.loaddata();
  }

//Get all users data
loaddata()
{
  //Get all usera details  
  this.crudservice.getusers().subscribe((res: any[])=>{
          
    this.data = res;
  });
}  
//Delete User
deleteuser(id)
{
  if(confirm("Are you sure to delete?")) {
  // Initialize Params Object
  var myFormData = new FormData();
   
      
  // Begin assigning parameters
  myFormData.append('deleteid', id);
  this.crudservice.deleteuser(myFormData);
  //sweetalert message popup
  Swal.fire({
    title: 'Hurray!!',
    text:   "User has been deleted successfully",
    icon: 'success'
  });
  this.loaddata();
}
}
  ngOnInit(): void {
  }

}

5. Now guys, now we need to add below code into our angularcrud/src/app/users/users.component.html file to create show users details table:

I must say please replace old file code with this code completely because I have done some more changes.

<div class="container p-5">
    <h1>Users</h1>
    <table class="table table-hover table-bordered">
        <thead>
          <tr>
            <th>ID</th>
            <th>Email</th>
            <th>Username</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
       
           
              <tr *ngFor="let group of data">
                <td>{{group.id}}</td>
                <td>{{group.email}}</td>
                <td>{{group.username}}</td>
                <td><button class="bg-danger"> <i class="fas fa-trash" (click)="deleteuser(group.id)"></i> </button></td>
              </tr>
           
         
         
          
        </tbody>
      </table>

     
</div>

6. Now guy’s please add below code inside https://angularcrud/src/index.html file for icons:

...
<head>
 ...
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
  <style>
     .bg-primary, .bg-warning, .bg-danger, .bg-info{border:none; margin-right: 3px;}
   .fa-edit:before,  .fa-user:before, .fa-trash:before, .fa-eye:before{color: #fff;}
   .btn{margin-right: 3px;}
   
  </style>
</head>
...

7. Now guys, now we need to add below code inside our xampp/htdocs/users.php file:

I must say please replace old file code with this code completely because I have done some more changes.

<?php header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Methods:POST,GET,PUT,DELETE');
header('Access-Control-Allow-Headers: content-type or other');
header('Content-Type: application/json');

//Please create users database inside phpmysql admin and create userdetails tabel and create id, email and username fields

$servername = "localhost";
$username   = "root";
$password   = "";
$dbname     = "users";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

//Add user
if(isset($_POST['myEmail']))
{
    $sql = "INSERT INTO userdetails (email, username)
        VALUES ('".$_POST['myEmail']."', '".$_POST['myUsername']."')";
    if (mysqli_query($conn,$sql)) {
    $data = array("data" => "You Data added successfully");
        echo json_encode($data);
    } else {
        $data = array("data" => "Error: " . $sql . "<br>" . $conn->error);
        echo json_encode($data);
        
    }
}
//Delete user
elseif(isset($_POST['deleteid']))
{
    $sql = mysqli_query($conn, "DELETE from userdetails where id =".$_POST['deleteid']);
    if ($sql) {
        
        $data = array("data" => "Record deleted successfully");
        echo json_encode($data);
      } else {
      
        $data = array("data" =>"Error deleting record: " . mysqli_error($conn));
        echo json_encode($data);
      }
}
else
{
    //get all users details
    $trp = mysqli_query($conn, "SELECT * from userdetails ORDER BY id DESC");
    $rows = array();
    while($r = mysqli_fetch_assoc($trp)) {
        $rows[] = $r;
    }

   

    print json_encode($rows);
}

die();

Now in the end please run ng serve command to check the out on browser(localhost:4200) and also please start your xampp.

Guy’s in next post we will do update user functionality. If you have any kind of query then please comment below.

Jassa

Thanks.

June 17, 2021

Vue 3 Read XML File Data Working Demo

Hello guy’s welcome back to my blog. Today in this blog post, I am going to tell you, Vue 3 Read XML File Data Working Demo.

Working Demo

Guy’s Vue 3 came and if you are new in Vue3 then please check the below link:

Vue3 Tutorials

Friends now I proceed onwards and here is the working code snippet and please use this carefully to avoid the mistakes:

1. Firstly friends we need fresh vuejs(Vue 3) setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system.

Also guy’s in this I am installing xml2js(read xml), bootstrap 5(good styles), axios(file calling):

npm install -g @vue/cli

vue create vuedemo

cd vuedemo

npm install axios

npm install bootstrap

npm install --save xml2js

npm run serve //http://localhost:8080/

2. Finally guys we need to add below code into our src/App.vue file to get final output on web browser:

<template>
  <div class="container p-5">
  
    <table class="table table-bordered table-hover">    
      <thead>
      <tr>    
        <th>Id</th>    
        <th>Name</th>    
        <th>Email</th>    
      </tr>    
      </thead>
      <tbody>
      <tr v-for="item in xmlItems" :key="item.id">    
        <td>{{item.id}}</td>    
        <td>{{item.name}}</td>    
        <td>{{item.email}}</td>    
      </tr>    
    </tbody>
    </table>  
    </div>
</template>

<script>

//importing bootstrap 5 Modules
import "bootstrap/dist/css/bootstrap.min.css";
import axios from 'axios';
import xml2js from 'xml2js';
export default {
  
    mounted(){ 
     //xml file calling
      axios.get('assets/users.xml')
        .then(response => {
          this.parseXML(response.data)  
              .then((data) => {  
                this.xmlItems = data;  
              });       
        })
      
    },
    methods: {

      //xml file data parsing
      parseXML(data) {  
                 return  new Promise(resolve => {  
                      var k=""; 
                       var arr = [],  
                      parser = new xml2js.Parser(  
                        {  
                          trim: true,  
                          explicitArray: true  
                        });  
                    parser.parseString(data, function (err, result) {  
                      var obj = result.Employee;  
                      for (k in obj.emp) {  
                        var item = obj.emp[k];  
                        arr.push({  
                          id: item.id[0],  
                          name: item.name[0],  
                          email: item.email[0],  
                          
                        });  
                      }  
                      resolve(arr);  
                    });  
                  });  
              }
    },
      data: function() {
  return {
    xmlItems:[]
  }
}  
}
</script>

3. Now friends we need to create `assets` folder inside public folder and then create users.xml file inside public/assets folder and add below xml code inside it:

<?xml version="1.0" encoding="UTF-8"?>    
<Employee>    
   <emp>    
      <id>1</id>    
      <name>Ajay Rich</name>    
      <email>therichposts@gmail.com</email>    
   </emp>    
   <emp>    
      <id>2</id>    
      <name>Jassa Rich</name>    
      <email>therichposts@gmail.com</email>    
   </emp>    
   <emp>    
      <id>3</id>    
      <name>Jassa</name>    
      <email>therichposts@gmail.com</email>    
   </emp>    
   <emp>    
      <id>4</id>    
      <name>Rich Jassa</name>    
      <email>therichposts@gmail.com</email>    
   </emp>    
   <emp>    
      <id>5</id>    
      <name>Jassa Boss</name>       
      <email>therichposts@gmail.com</email>    
   </emp>    
</Employee>

Guy’s now we are done and if you have any kind of query then please comment below. Guy’s I will come with more demos like this.

Jassa

Thanks

June 15, 2021

Reactjs Read XML File Data Working Demo

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Reactjs Read XML File Data Working Demo.

Working Demo

For reactjs and bootstrap 5 new comers, please check the below links:

Reactjs Basic Tutorials

Bootstrap 5 Tutorials

Friends now I proceed onwards and here is the working code snippet and please use this carefully to avoid the mistakes:

1. Firstly, we need fresh reactjs setup and for that, we need to run below commands into out terminal and also we should have latest node version installed on our system:

npx create-react-app reacttut

cd reacttut

2. Now we need to run below commands into our project terminal to get, axios, xml parser bootstrap(optional) and related modules into our reactjs application:

npm install bootstrap --save

npm i react-xml-parser

npm install axios 

npm start //For start project

3. Finally for the main output, we need to add below code into our reacttut/src/App.js file or if you have fresh setup then you can replace reacttut/src/App.js file code with below code:

import React from 'react';

//bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';

//axios for xml request
import axios from 'axios';

//xml file reader
import XMLParser from 'react-xml-parser';

class App extends React.Component {
  constructor(props) {
    super(props)
      this.state = {
     
        name: [],
      
              }
             
      }
    componentDidMount() {
     //get data request
      axios.get('/assets/users.xml', {
        "Content-Type": "application/xml; charset=utf-8"
       }).then(res => 
        {
        //Storing users detail in state array object
        const jsonDataFromXml = new XMLParser().parseFromString(res.data);
        
      
        this.setState({ name: jsonDataFromXml.getElementsByTagName('name') })
     
       
       
           }); 
    }
 
  render() {
  
    return (
    
      <div className="container p-5">
       
        <ul class="list-group">
      
        {(
      this.state.name.map((item, index) => {
        return (
          <li class="list-group-item">{item.value}</li>
        )
        }
      ))}
    
    </ul>
    </div>
     
)
};
}

export default App;

4. Now we need to create `assests` folder inside public folder and after that we need to create `users.xml` file and add below code into it:

<?xml version="1.0" encoding="UTF-8"?>    
<Employee>    
   <emp>    
         
      <name>Ajay Rich</name>    
     
   </emp>    
   <emp>    
      
      <name>Jassa Rich</name>    
      
   </emp>    
   <emp>    
        
      <name>Jassa</name>    
       
   </emp>    
   <emp>    
      
      <name>Rich Jassa</name>    
       
   </emp>    
   <emp>    
     
      <name>Jassa Boss</name>       
       
   </emp>    
</Employee>

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

June 14, 2021

Angular 12 Read XML File Data Working Demo

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Angular 12 Read XML File Data Working Demo.

Angular reading xml file working

Angular12 came and if you are new then you must check below link:

Angular12 Basic Tutorials

Friends now I proceed onwards and here is the working code snippet and please use carefully this to avoid the mistakes:

1. Firstly friends we need fresh angular 12 setup and for this we need to run below commands but if you already have angular 12 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

npm install -g @angular/cli 

ng new angulartut //Create new Angular Project

cd angulartut // Go inside the Angular Project Folder

2. Now friends, here we need to run below command into our project terminal to install timers and bootstrap 5(optional) modules into our angular application:

npm install timers

npm install bootstrap

npm install --save xml2js

3. Now friends we need to add below code into your src/app/app.module.ts file:

...
import { HttpClientModule } from '@angular/common/http';
...
imports: [
...
HttpClientModule
]

4. Now friends we just need to add below code into src/app/app.component.ts file:

...
import { HttpClient,HttpHeaders } from '@angular/common/http';
import xml2js from 'xml2js'; 
export class AppComponent {
...

public xmlItems: any;

constructor(private http:HttpClient) {
   
     this.loadXML(); 

   }


 //getting data function
 loadXML()
        {
          /*Read Data*/
          this.http.get('assets/users.xml',  
          {  
            headers: new HttpHeaders()  
              .set('Content-Type', 'text/xml')  
              .append('Access-Control-Allow-Methods', 'GET')  
              .append('Access-Control-Allow-Origin', '*')  
              .append('Access-Control-Allow-Headers', "Access-Control-Allow-Headers, Access-Control-Allow-Origin, Access-Control-Request-Method"),  
            responseType: 'text'  
          })  
          .subscribe((data) => {  
            this.parseXML(data)  
              .then((data) => {  
                this.xmlItems = data;  
              });  
          });  
          /*Read Data*/
        }

        //store xml data into array variable
        parseXML(data) {  
            return new Promise(resolve => {  
              var k: string | number,  
                arr = [],  
                parser = new xml2js.Parser(  
                  {  
                    trim: true,  
                    explicitArray: true  
                  });  
              parser.parseString(data, function (err, result) {  
                var obj = result.Employee;  
                for (k in obj.emp) {  
                  var item = obj.emp[k];  
                  arr.push({  
                    id: item.id[0],  
                    name: item.name[0],  
                    email: item.email[0],  
                    
                  });  
                }  
                resolve(arr);  
              });  
            });  
          }  
}

5. Now friends we need to add below code into src/app/app.component.html file to get final output on web browser:

<table class="table table-bordered table-hover">    
      <thead>
      <tr>    
        <th>Id</th>    
        <th>Name</th>    
        <th>Email</th>    
         
      </tr>    
      </thead>
      <tbody>
      <tr *ngFor="let item of xmlItems">    
        <td>{{item.id}}</td>    
        <td>{{item.name}}</td>    
        <td>{{item.email}}</td>    
       
      </tr>    
    </tbody>
    </table>

6. Now guy’s in the end please create `users.xml` file inside scr/assets folder and add below code inside it:

<?xml version="1.0" encoding="UTF-8"?>    
<Employee>    
   <emp>    
      <id>1</id>    
      <name>Ajay Rich</name>    
      <email>therichposts@gmail.com</email>    
   </emp>    
   <emp>    
      <id>2</id>    
      <name>Jassa Rich</name>    
      <email>therichposts@gmail.com</email>    
   </emp>    
   <emp>    
      <id>3</id>    
      <name>Jassa</name>    
      <email>therichposts@gmail.com</email>    
   </emp>    
   <emp>    
      <id>4</id>    
      <name>Rich Jassa</name>    
      <email>therichposts@gmail.com</email>    
   </emp>    
   <emp>    
      <id>5</id>    
      <name>Jassa Boss</name>       
      <email>therichposts@gmail.com</email>    
   </emp>    
</Employee>

Now we are done friends and please run ng serve command and if you have any kind of query then please do comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

June 14, 2021

Free Ecommerce Template Made with Html Bootstrap 5 And JavaScript

Hello guy’s, welcome back to my blog. Today in this blog post, I am going to show you, Free Ecommerce Template Made with Html Bootstrap 5 And JavaScript.

Working Video

Guy’s please check below links to get more free templates:

Guy’s here is the working code snippet and please follow carefully and avoid the mistakes:

1. Guy’s very first please create folder name `testproject` and inside it create folder `assets`.

2. Now guy’s download zip file from below path and get all the css, img and js folders from zip and place those all the folders inside testproject/assets folder:

https://therichpost.com/jassashop2.zip

3. Finally guy’s create `ecommerce.html` file inside `textproject` folder and add below code inside it:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ecommerce Template</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- ===============================================-->
    <!--    Stylesheets-->
    <!-- ===============================================-->
    <link href="assets/css/theme.min.css" rel="stylesheet" />    
    <!-- ===============================================-->
    <!--    JavaScripts-->
    <!-- ===============================================-->
    <script src="assets/js/popper.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    
    <script src="assets/js/theme.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500;600;700;800;900&amp;display=swap" rel="stylesheet">
  
</head>
<body>
  <!-- ===============================================-->
   <!--    Main Content-->
   <!-- ===============================================-->
   <main class="main" id="top">
    <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3 d-block" data-navbar-on-scroll="data-navbar-on-scroll">
      <div class="container"><a class="navbar-brand d-inline-flex" href="#"><img class="d-inline-block" src="assets/img/gallery/logo.png" alt="logo" /><span class="text-1000 fs-0 fw-bold ms-2">Jassa</span></a><button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse border-top border-lg-0 mt-4 mt-lg-0" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item px-2"><a class="nav-link fw-medium active" aria-current="page" href="#categoryWomen">Women</a></li>
            <li class="nav-item px-2"><a class="nav-link fw-medium" href="#header">Men</a></li>
            <li class="nav-item px-2"><a class="nav-link fw-medium" href="#collection">Collection</a></li>
            <li class="nav-item px-2"><a class="nav-link fw-medium" href="#outlet">Outlet</a></li>
          </ul>
          <form class="d-flex"><a class="text-1000" href="#!"><svg class="feather feather-phone me-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
              </svg></a><a class="text-1000" href="#!"> <svg class="feather feather-shopping-cart me-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="9" cy="21" r="1"></circle>
                <circle cx="20" cy="21" r="1"></circle>
                <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
              </svg></a><a class="text-1000" href="#!"> <svg class="feather feather-search me-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
              </svg></a><a class="text-1000" href="#!"> <svg class="feather feather-user me-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                <circle cx="12" cy="7" r="4"></circle>
              </svg></a><a class="text-1000" href="#!"> <svg class="feather feather-heart me-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
              </svg></a></form>
        </div>
      </div>
    </nav>
    <section class="py-11 bg-light-gradient border-bottom border-white border-5">
      <div class="bg-holder overlay overlay-light" style="background-image:url(assets/img/gallery/header-bg.png);background-size:cover;"></div>
      <!--/.bg-holder-->
      <div class="container">
        <div class="row flex-center">
          <div class="col-12 mb-10">
            <div class="d-flex align-items-center flex-column">
              <h1 class="fw-normal"> With an outstanding style, only for you</h1>
              <h1 class="fs-4 fs-lg-8 fs-md-6 fw-bold">Exclusively designed for you</h1>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- ============================================-->
    <!-- <section> begin ============================-->
    <section class="py-0" id="header" style="margin-top: -23rem !important;">
      <div class="container">
        <div class="row g-0">
          <div class="col-md-6">
            <div class="card card-span h-100 text-white"> <img class="img-fluid" src="assets/img/gallery/her.png" width="790" alt="..." />
              <div class="card-img-overlay d-flex flex-center"> <a class="btn btn-lg btn-light" href="#!">For Her</a></div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card card-span h-100 text-white"> <img class="img-fluid" src="assets/img/gallery/him.png" width="790" alt="..." />
              <div class="card-img-overlay d-flex flex-center"> <a class="btn btn-lg btn-light" href="#!">For Him </a></div>
            </div>
          </div>
        </div>
      </div><!-- end of .container-->
    </section><!-- <section> close ============================-->
    <!-- ============================================-->



    <!-- ============================================-->
    <!-- <section> begin ============================-->
    <section class="py-0">
      <div class="container">
        <div class="row h-100">
          <div class="col-lg-7 mx-auto text-center mt-7 mb-5">
            <h5 class="fw-bold fs-3 fs-lg-5 lh-sm">Best Deals</h5>
          </div>
          <div class="col-12">
            <div class="carousel slide" id="carouselBestDeals" data-bs-touch="false" data-bs-interval="false">
              <div class="carousel-inner">
                <div class="carousel-item active" data-bs-interval="10000">
                  <div class="row h-100 align-items-center g-2">
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/flat-hill.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Flat Hill Slingback</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/blue-ring.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Ocean Blue Ring</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/wallet.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Brown Leathered Wallet</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/wrist-watch.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Silverside Wristwatch</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="carousel-item" data-bs-interval="5000">
                  <div class="row h-100 align-items-center g-2">
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/flat-hill.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Flat Hill Slingback</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/blue-ring.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Ocean Blue Ring</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/wallet.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Brown Leathered Wallet</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/wrist-watch.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Silverside Wristwatch</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="carousel-item" data-bs-interval="3000">
                  <div class="row h-100 align-items-center g-2">
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/flat-hill.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Flat Hill Slingback</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/blue-ring.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Ocean Blue Ring</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/wallet.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Brown Leathered Wallet</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/wrist-watch.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Silverside Wristwatch</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="row h-100 align-items-center g-2">
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/flat-hill.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Flat Hill Slingback</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/blue-ring.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Ocean Blue Ring</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/wallet.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Brown Leathered Wallet</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/wrist-watch.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Silverside Wristwatch</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row"><button class="carousel-control-prev" type="button" data-bs-target="#carouselBestDeals" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselBestDeals" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next </span></button></div>
              </div>
            </div>
          </div>
          <div class="col-12 d-flex justify-content-center mt-5"> <a class="btn btn-lg btn-dark" href="#!">View All </a></div>
        </div>
      </div><!-- end of .container-->
    </section><!-- <section> close ============================-->
    <!-- ============================================-->



    <!-- ============================================-->
    <!-- <section> begin ============================-->
    <section>
      <div class="container">
        <div class="row h-100 g-0">
          <div class="col-md-6">
            <div class="bg-300 p-4 h-100 d-flex flex-column justify-content-center">
              <h4 class="text-800">Exclusive collection 2021</h4>
              <h1 class="fw-semi-bold lh-sm fs-4 fs-lg-5 fs-xl-6">Be exclusive</h1>
              <p class="mb-5 fs-1">The best everyday option in a Super Saver range within a reasonable price. It is our responsibility to keep you 100 percent stylish. Be smart &amp; , trendy with us.</p>
              <div class="d-grid gap-2 d-md-block"><a class="btn btn-lg btn-dark" href="#" role="button">Explore</a></div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/outfit.png" alt="..." />
              <div class="card-img-overlay bg-dark-gradient">
                <div class="d-flex align-items-end justify-content-center h-100"><a class="btn btn-lg text-light fs-1" href="#!" role="button">Outfit<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" viewBox="0 0 16 16">
                      <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
        <div class="row h-100 g-2 py-1">
          <div class="col-md-4">
            <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/vanity-bag.png" alt="..." />
              <div class="card-img-overlay bg-dark-gradient">
                <div class="d-flex align-items-end justify-content-center h-100"><a class="btn btn-lg text-light fs-1" href="#!" role="button">Vanity Bags<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" viewBox="0 0 16 16">
                      <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                    </svg></a></div>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/hat.png" alt="..." />
              <div class="card-img-overlay bg-dark-gradient">
                <div class="d-flex align-items-end justify-content-center h-100"><a class="btn btn-lg text-light fs-1" href="#!" role="button">Hats<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" viewBox="0 0 16 16">
                      <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                    </svg></a></div>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/high-heels.png" alt="..." />
              <div class="card-img-overlay bg-dark-gradient">
                <div class="d-flex align-items-end justify-content-center h-100"><a class="btn btn-lg text-light fs-1" href="#!" role="button">High Heels<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" viewBox="0 0 16 16">
                      <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div><!-- end of .container-->
    </section><!-- <section> close ============================-->
    <!-- ============================================-->

    <section class="py-0">
      <div class="container">
        <div class="row h-100">
          <div class="col-lg-7 mx-auto text-center mb-6">
            <h5 class="fs-3 fs-lg-5 lh-sm mb-3">Checkout New Arrivals</h5>
          </div>
          <div class="col-12">
            <div class="carousel slide" id="carouselNewArrivals" data-bs-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active" data-bs-interval="10000">
                  <div class="row h-100 align-items-center g-2">
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/full-body.png" alt="..." />
                        <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                          <h6 class="text-primary">$175</h6>
                          <p class="text-400 fs-1">Jumper set for Women</p>
                          <h4 class="text-light">Flat Hill Slingback</h4>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/formal-coat.png" alt="..." />
                        <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                          <h6 class="text-primary">$175</h6>
                          <p class="text-400 fs-1">Jumper set for Women</p>
                          <h4 class="text-light">Ocean Blue Ring</h4>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/ocean-blue.png" alt="..." />
                        <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                          <h6 class="text-primary">$175</h6>
                          <p class="text-400 fs-1">Jumper set for Women</p>
                          <h4 class="text-light">Brown Leathered Wallet</h4>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/sweater.png" alt="..." />
                        <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                          <h6 class="text-primary">$175</h6>
                          <p class="text-400 fs-1">Jumper set for Women</p>
                          <h4 class="text-light">Silverside Wristwatch</h4>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="carousel-item" data-bs-interval="5000">
                  <div class="row h-100 align-items-center g-2">
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/full-body.png" alt="..." />
                        <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                          <h6 class="text-primary">$175</h6>
                          <p class="text-400 fs-1">Jumper set for Women</p>
                          <h4 class="text-light">Flat Hill Slingback</h4>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/formal-coat.png" alt="..." />
                        <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                          <h6 class="text-primary">$175</h6>
                          <p class="text-400 fs-1">Jumper set for Women</p>
                          <h4 class="text-light">Ocean Blue Ring</h4>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/ocean-blue.png" alt="..." />
                        <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                          <h6 class="text-primary">$175</h6>
                          <p class="text-400 fs-1">Jumper set for Women</p>
                          <h4 class="text-light">Brown Leathered Wallet</h4>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/sweater.png" alt="..." />
                        <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                          <h6 class="text-primary">$175</h6>
                          <p class="text-400 fs-1">Jumper set for Women</p>
                          <h4 class="text-light">Silverside Wristwatch</h4>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="carousel-item" data-bs-interval="3000">
                  <div class="row h-100 align-items-center g-2">
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/full-body.png" alt="..." />
                        <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                          <h6 class="text-primary">$175</h6>
                          <p class="text-400 fs-1">Jumper set for Women</p>
                          <h4 class="text-light">Flat Hill Slingback</h4>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/formal-coat.png" alt="..." />
                        <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                          <h6 class="text-primary">$175</h6>
                          <p class="text-400 fs-1">Jumper set for Women</p>
                          <h4 class="text-light">Ocean Blue Ring</h4>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/ocean-blue.png" alt="..." />
                        <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                          <h6 class="text-primary">$175</h6>
                          <p class="text-400 fs-1">Jumper set for Women</p>
                          <h4 class="text-light">Brown Leathered Wallet</h4>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/sweater.png" alt="..." />
                        <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                          <h6 class="text-primary">$175</h6>
                          <p class="text-400 fs-1">Jumper set for Women</p>
                          <h4 class="text-light">Silverside Wristwatch</h4>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="row h-100 align-items-center g-2">
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/full-body.png" alt="..." />
                        <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                          <h6 class="text-primary">$175</h6>
                          <p class="text-400 fs-1">Jumper set for Women</p>
                          <h4 class="text-light">Flat Hill Slingback</h4>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/formal-coat.png" alt="..." />
                        <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                          <h6 class="text-primary">$175</h6>
                          <p class="text-400 fs-1">Jumper set for Women</p>
                          <h4 class="text-light">Ocean Blue Ring</h4>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/ocean-blue.png" alt="..." />
                        <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                          <h6 class="text-primary">$175</h6>
                          <p class="text-400 fs-1">Jumper set for Women</p>
                          <h4 class="text-light">Brown Leathered Wallet</h4>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/sweater.png" alt="..." />
                        <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                          <h6 class="text-primary">$175</h6>
                          <p class="text-400 fs-1">Jumper set for Women</p>
                          <h4 class="text-light">Silverside Wristwatch</h4>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row"><button class="carousel-control-prev" type="button" data-bs-target="#carouselNewArrivals" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselNewArrivals" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next </span></button></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- ============================================-->
    <!-- <section> begin ============================-->
    <section id="collection">
      <div class="container">
        <div class="row h-100 gx-2">
          <div class="col-md-6">
            <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/urban.png" alt="..." />
              <div class="card-img-overlay bg-dark-gradient">
                <div class="p-5 p-md-2 p-xl-5">
                  <h1 class="fs-md-4 fs-lg-7 text-light">Urban Stories </h1>
                  <h5 class="fs-2 text-light">collection</h5>
                </div>
              </div><a class="stretched-link" href="#!"></a>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/country.png" alt="..." />
              <div class="card-img-overlay bg-dark-gradient">
                <div class="p-5 p-md-2 p-xl-5 d-flex flex-column flex-end-center align-items-baseline h-100">
                  <h1 class="fs-md-4 fs-lg-7 text-light">Urban Stories </h1>
                  <h5 class="fs-2 text-light">collection</h5>
                </div>
              </div><a class="stretched-link" href="#!"></a>
            </div>
          </div>
        </div>
      </div><!-- end of .container-->
    </section><!-- <section> close ============================-->
    <!-- ============================================-->

    <section>
      <div class="container">
        <div class="row h-100">
          <div class="col-lg-7 mx-auto text-center mb-6">
            <h5 class="fw-bold fs-3 fs-lg-5 lh-sm mb-3">Best Sellers</h5>
          </div>
          <div class="col-12">
            <div class="carousel slide" id="carouselBestSellers" data-bs-touch="false" data-bs-interval="false">
              <div class="carousel-inner">
                <div class="carousel-item active" data-bs-interval="10000">
                  <div class="row h-100 align-items-center g-2">
                    <div class="col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/handbag.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Marie Claire Handbag</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$399</span><span class="text-danger">$365</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/earrings.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Red Gem Earrings</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$489</span><span class="text-danger">$466</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/lathered-wristwatch.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Black Leathered Wristwatch</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$799</span><span class="text-danger">$745</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/tie.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Red-White Stripped Tie</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$299</span><span class="text-danger">$243</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="carousel-item" data-bs-interval="5000">
                  <div class="row h-100 align-items-center g-2">
                    <div class="col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/handbag.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Marie Claire Handbag</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$399</span><span class="text-danger">$365</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/earrings.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Red Gem Earrings</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$489</span><span class="text-danger">$466</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/lathered-wristwatch.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Black Leathered Wristwatch</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$799</span><span class="text-danger">$745</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/tie.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Red-White Stripped Tie</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$299</span><span class="text-danger">$243</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="carousel-item" data-bs-interval="3000">
                  <div class="row h-100 align-items-center g-2">
                    <div class="col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/handbag.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Marie Claire Handbag</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$399</span><span class="text-danger">$365</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/earrings.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Red Gem Earrings</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$489</span><span class="text-danger">$466</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/lathered-wristwatch.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Black Leathered Wristwatch</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$799</span><span class="text-danger">$745</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/tie.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Red-White Stripped Tie</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$299</span><span class="text-danger">$243</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="row h-100 align-items-center g-2">
                    <div class="col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/handbag.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Marie Claire Handbag</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$399</span><span class="text-danger">$365</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/earrings.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Red Gem Earrings</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$489</span><span class="text-danger">$466</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/lathered-wristwatch.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Black Leathered Wristwatch</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$799</span><span class="text-danger">$745</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                    <div class="col-md-3 mb-3 mb-md-0 h-100">
                      <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/tie.png" alt="..." />
                        <div class="card-img-overlay ps-0"> </div>
                        <div class="card-body ps-0 bg-200">
                          <h5 class="fw-bold text-1000 text-truncate">Red-White Stripped Tie</h5>
                          <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$299</span><span class="text-danger">$243</span></div>
                        </div><a class="stretched-link" href="#"></a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row"><button class="carousel-control-prev" type="button" data-bs-target="#carouselBestSellers" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselBestSellers" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next </span></button></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- ============================================-->
    <!-- <section> begin ============================-->
    <section class="py-0" id="outlet">
      <div class="container">
        <div class="row h-100 g-0">
          <div class="col-md-6">
            <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/summer.png" alt="..." />
              <div class="card-img-overlay bg-dark-gradient rounded-0">
                <div class="p-5 p-md-2 p-xl-5 d-flex flex-column flex-end-center align-items-baseline h-100">
                  <h1 class="fs-md-4 fs-lg-7 text-light">Summer of '21 </h1>
                </div>
              </div><a class="stretched-link" href="#!"></a>
            </div>
          </div>
          <div class="col-md-6 h-100">
            <div class="row h-100 g-0">
              <div class="col-md-6 h-100">
                <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/sunglasses.png" alt="..." />
                  <div class="card-img-overlay bg-dark-gradient rounded-0">
                    <div class="p-5 p-xl-5 p-md-0">
                      <h3 class="text-light">Sunglasses</h3>
                    </div>
                  </div><a class="stretched-link" href="#!"></a>
                </div>
              </div>
              <div class="col-md-6">
                <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/footwear.png" alt="..." />
                  <div class="card-img-overlay bg-dark-gradient rounded-0">
                    <div class="p-5 p-xl-5 p-md-0">
                      <h3 class="text-light">Footwear</h3>
                    </div>
                  </div><a class="stretched-link" href="#!"></a>
                </div>
              </div>
              <div class="col-md-6">
                <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/hat-black-border.png" alt="..." />
                  <div class="card-img-overlay bg-dark-gradient rounded-0">
                    <div class="p-5 p-xl-5 p-md-0">
                      <h3 class="text-light">Hat</h3>
                    </div>
                  </div><a class="stretched-link" href="#!"></a>
                </div>
              </div>
              <div class="col-md-6">
                <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/watches.png" alt="..." />
                  <div class="card-img-overlay bg-dark-gradient rounded-0">
                    <div class="p-5 p-xl-5 p-md-0">
                      <h3 class="text-light">Watches</h3>
                    </div>
                  </div><a class="stretched-link" href="#!"> </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div><!-- end of .container-->
    </section><!-- <section> close ============================-->
    <!-- ============================================-->



    <!-- ============================================-->
    <!-- <section> begin ============================-->
    <section>
      <div class="container">
        <div class="row h-100 g-0">
          <div class="col-md-6">
            <div class="bg-300 p-4 h-100 d-flex flex-column justify-content-center">
              <h1 class="fw-semi-bold lh-sm fs-4 fs-lg-5 fs-xl-6">Gentle Formal Looks </h1>
              <p class="mb-5 fs-1">We provide the top formal apparel package to make your job look confident and comfortable. Stay connect.</p>
              <div class="d-grid gap-2 d-md-block"><a class="btn btn-lg btn-dark" href="#!" role="button">Explore Collection</a></div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/sharp-dress.png" alt="..." /><a class="stretched-link" href="#!"></a></div>
          </div>
        </div>
      </div><!-- end of .container-->
    </section><!-- <section> close ============================-->
    <!-- ============================================-->



    <!-- ============================================-->
    <!-- <section> begin ============================-->
    <section class="py-0 pb-8">
      <div class="container-fluid container-lg">
        <div class="row h-100 g-2 justify-content-center">
          <div class="col-sm-9 col-md-4 mb-3 mb-md-0 h-100">
            <div class="card card-span text-white h-100"><img class="img-card h-100" src="assets/img/gallery/shoes-blog-1.png" alt="..." />
              <div class="card-body px-xl-5 px-md-3 pt-0 pb-7">
                <div class="d-flex justify-content-between align-items-center bg-100 mt-n5 me-auto"><img src="assets/img/gallery/author-1.png" width="60" alt="..." />
                  <div class="d-flex flex-1 justify-content-around"> <span class="text-900 text-center"><i data-feather="eye"> </i><span class="text-900 ms-2">35</span></span><span class="text-900 text-center"><i data-feather="heart"> </i><span class="text-900 ms-2">23</span></span><span class="text-900 text-center"><i data-feather="corner-up-right"> </i><span class="text-900 ms-2">14</span></span></div>
                </div>
                <h6 class="text-900 mt-3">Kelly Hudson . <span class="fw-normal">Fashion actiKelly Hudson . </span></h6>
                <h3 class="fw-bold text-1000 mt-5 text-truncate">How important are shoes in your style?</h3>
                <p class="text-900 mt-3">Is it possible to assess a person just on the basis of their footwear? Obviously, nobody should criticize, but certainly, shoes say a lot about someone. It matters for the outsiders that we meet every day...</p><a class="btn btn-lg text-900 fs-1 px-0 hvr-icon-forward" href="#!" role="button">Read more<svg class="bi bi-arrow-right-short hover-icon" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                  </svg></a>
              </div>
            </div>
          </div>
          <div class="col-sm-9 col-md-4 mb-3 mb-md-0 h-100">
            <div class="card card-span text-white h-100"><img class="img-card h-100" src="assets/img/gallery/fashion-blog-2.png" alt="..." />
              <div class="card-body px-xl-5 px-md-3 pt-0 pb-7">
                <div class="d-flex justify-content-between align-items-center bg-100 mt-n5 me-auto"><img src="assets/img/gallery/author-2.png" width="60" alt="..." />
                  <div class="d-flex flex-1 justify-content-around"> <span class="text-900 text-center"><i data-feather="eye"> </i><span class="text-900 ms-2">35</span></span><span class="text-900 text-center"><i data-feather="heart"> </i><span class="text-900 ms-2">23</span></span><span class="text-900 text-center"><i data-feather="corner-up-right"> </i><span class="text-900 ms-2">14</span></span></div>
                </div>
                <h6 class="text-900 mt-3">Rotondwa Johnny . <span class="fw-normal">Fashion activist </span></h6>
                <h3 class="fw-bold text-1000 mt-5 text-truncate">Fashion trend forecast for Summer 2021</h3>
                <p class="text-900 mt-3">While the fashion industry has had a calm year, this season has seen some beautiful pieces. Over the previous several weeks, commanding coats, and elegant face masks have ruled Fashion Weeks...</p><a class="btn btn-lg text-900 fs-1 px-0 hvr-icon-forward" href="#!" role="button">Read more<svg class="bi bi-arrow-right-short hover-icon" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                  </svg></a>
              </div>
            </div>
          </div>
          <div class="col-sm-9 col-md-4 mb-3 mb-md-0 h-100">
            <div class="card card-span text-white h-100"><img class="img-card h-100" src="assets/img/gallery/spring-dress-blog-3.png" alt="..." />
              <div class="card-body px-xl-5 px-md-3 pt-0 pb-7">
                <div class="d-flex justify-content-between align-items-center bg-100 mt-n5 me-auto"><img src="assets/img/gallery/author-3.png" width="60" alt="..." />
                  <div class="d-flex flex-1 justify-content-around"> <span class="text-900 text-center"><i data-feather="eye"> </i><span class="text-900 ms-2">35</span></span><span class="text-900 text-center"><i data-feather="heart"> </i><span class="text-900 ms-2">23</span></span><span class="text-900 text-center"><i data-feather="corner-up-right"> </i><span class="text-900 ms-2">14</span></span></div>
                </div>
                <h6 class="text-900 mt-3">Martin . <span class="fw-normal">Fashion activist </span></h6>
                <h3 class="fw-bold text-1000 mt-5 text-truncate">Spring exclusive collection for Men &amp; Women</h3>
                <p class="text-900 mt-3">Explore the first real-time photographic fashion magazine NOWFASHION to broadcast exclusive live fashion shows. Some of the most beautiful spring collection i want to share. See the....</p><a class="btn btn-lg text-900 fs-1 px-0 hvr-icon-forward" href="#!" role="button">Read more<svg class="bi bi-arrow-right-short hover-icon" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                  </svg></a>
              </div>
            </div>
          </div>
        </div>
      </div><!-- end of .container-->
    </section><!-- <section> close ============================-->
    <!-- ============================================-->

    <section class="py-11">
      <div class="bg-holder overlay overlay-0" style="background-image:url(assets/img/gallery/cta.png);background-position:center;background-size:cover;"></div>
      <!--/.bg-holder-->
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="carousel slide carousel-fade" id="carouseCta" data-bs-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active" data-bs-interval="10000">
                  <div class="row h-100 align-items-center g-2">
                    <div class="col-12">
                      <div class="text-light text-center py-2">
                        <h5 class="display-4 fw-normal text-400 fw-normal mb-4">visit our Outlets in</h5>
                        <h1 class="display-1 text-white fw-normal mb-8">London</h1><a class="btn btn-lg text-light fs-1" href="#!" role="button">See Addresses<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                          </svg></a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="carousel-item" data-bs-interval="5000">
                  <div class="row h-100 align-items-center g-2">
                    <div class="col-12">
                      <div class="text-light text-center py-2">
                        <h5 class="display-4 fw-normal text-400 fw-normal mb-4">visit our Outlets in</h5>
                        <h1 class="display-1 text-white fw-normal mb-8">Bristol</h1><a class="btn btn-lg text-light fs-1" href="#!" role="button">See Addresses<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                          </svg></a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="carousel-item" data-bs-interval="3000">
                  <div class="row h-100 align-items-center g-2">
                    <div class="col-12">
                      <div class="text-light text-center py-2">
                        <h5 class="display-4 fw-normal text-400 fw-normal mb-4">visit our Outlets in</h5>
                        <h1 class="display-1 text-white fw-normal mb-8">Birmingham</h1><a class="btn btn-lg text-light fs-1" href="#!" role="button">See Addresses<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                          </svg></a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row"><button class="carousel-control-prev" type="button" data-bs-target="#carouseCta" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouseCta" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next </span></button></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- ============================================-->
    <!-- <section> begin ============================-->
    <section class="py-0 pt-7">
      <div class="container">
        <div class="row">
          <div class="col-6 col-lg-2 mb-3">
            <h5 class="lh-lg fw-bold text-1000">Company Info</h5>
            <ul class="list-unstyled mb-md-4 mb-lg-0">
              <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">About Us</a></li>
              <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">Affiliate</a></li>
              <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">Fashion Blogger</a></li>
            </ul>
          </div>
          <div class="col-6 col-lg-2 mb-3">
            <h5 class="lh-lg fw-bold text-1000">Help &amp; Support</h5>
            <ul class="list-unstyled mb-md-4 mb-lg-0">
              <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">Shipping Info</a></li>
              <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">Refunds</a></li>
              <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">How to Order</a></li>
              <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">How to Track</a></li>
              <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">Size Guides</a></li>
            </ul>
          </div>
          <div class="col-6 col-lg-2 mb-3">
            <h5 class="lh-lg fw-bold text-1000">Customer Care</h5>
            <ul class="list-unstyled mb-md-4 mb-lg-0">
              <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">Contact Us</a></li>
              <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">Payment Methods</a></li>
              <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">Bonus Point</a></li>
            </ul>
          </div>
          <div class="col-sm-6 col-lg-auto ms-auto">
            <h5 class="lh-lg fw-bold text-1000">Signup For The Latest News</h5>
            <div class="row input-group-icon mb-5">
              <div class="col-12"><input class="form-control input-box" type="email" placeholder="Enter Email" aria-label="email" /><svg class="bi bi-arrow-right-short input-box-icon" xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="#424242" viewBox="0 0 16 16">
                  <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                </svg></div>
            </div>
            <p class="text-800"><svg class="feather feather-phone me-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
              </svg><span class="text-800">+0000000000</span></p>
            <p class="text-800"><svg class="feather feather-mail me-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                <polyline points="22,6 12,13 2,6"></polyline>
              </svg><span class="text-800">therichposts@gmail.com</span></p>
          </div>
        </div>
        <div class="border-bottom border-3"></div>
        <div class="row flex-center my-3">
          <div class="col-md-6 order-1 order-md-0">
            <p class="my-2 text-1000 text-center text-md-start"> Made with <svg class="bi bi-suit-heart-fill" xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="#EB6453" viewBox="0 0 16 16">
                <path d="M4 1c2.21 0 4 1.755 4 3.92C8 2.755 9.79 1 12 1s4 1.755 4 3.92c0 3.263-3.234 4.414-7.608 9.608a.513.513 0 0 1-.784 0C3.234 9.334 0 8.183 0 4.92 0 2.755 1.79 1 4 1z"></path>
              </svg> by <a class="text-800" href="https://therichpost.com/" target="_blank">Jassa </a></p>
          </div>
          <div class="col-md-6">
            <div class="text-center text-md-end"><a href="#!"><span class="me-4" data-feather="facebook"></span></a><a href="#!"> <span class="me-4" data-feather="instagram"></span></a><a href="#!"> <span class="me-4" data-feather="youtube"></span></a><a href="#!"> <span class="me-4" data-feather="twitter"></span></a></div>
          </div>
        </div>
      </div><!-- end of .container-->
    </section><!-- <section> close ============================-->
    <!-- ============================================-->

  </main><!-- ===============================================-->
  <!--    End of Main Content-->
  <!-- ===============================================-->
</body>
</html>

Guy’s in the end open your ecommerce.html file in any browser and check the output. Friends I will come with more free templates like this one.

Guy’s if you have any kind of query then please comment below.

Jassa

Thanks.

June 11, 2021

Vue 3 Best Food Delivery App Landing Page Template Free 2021

Hello my friends, welcome back to my blog. Today in this blog post, I am going to show you, Vue 3 Best Food Delivery App Landing Page Template Free 2021.

Guy’s in this post, we will do below things:

Bootstrap 5 Vue 3 Free Template Creation.
Vue 3 Bootstrap 5 Responsive Toggle Navbar.

Vuejs Free Templates

Vue 3 came and if you are new then you must check below link:
Vuejs Tutorials

Friends now I proceed onwards and here is the working code snippet and please use this carefully to avoid the mistakes:

1. Firstly friends we need fresh vuejs(Vue 3) setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

Guys you can ~~skip~~ this first step if you already have vuejs fresh setup:

npm install -g @vue/cli

vue create vuetemplate

cd vuetemplate

npm run serve //http://localhost:8080/

2. Now friends, please download zip(in this zip file there are js, css, fonts and images for website template) file from below path and extract zip and get all the folders.

Create ‘assets’ folder inside vuetemplate/public folder.

Now please put that folders(which we will get from zip file) in “vuetemplate/public/assets” folder.

https://therichpost.com/foodapplanding.zip

3. Now friends please add below inside vuetemplate/public/index.html file:

...
  <head>
  ...
    <link rel="stylesheet" href="assets/css/bootstrap-5.0.0-alpha-2.min.css" />
    <link rel="stylesheet" href="assets/css/LineIcons.2.0.css" />
    <link rel="stylesheet" href="assets/css/animate.css" />
    <link rel="stylesheet" href="assets/css/main.css" />
    <script src="assets/js/bootstrap.5.0.0.alpha-2-min.js"></script>
   
    <script src="assets/js/wow.min.js"></script>
    <script src="assets/js/main.js"></script>
  </head>
 ...

4. Finally friends we need to add below code into our vuetemplate/src/App.vue file to get final output on web browser:

<template>
  
  <div class="preloader">
   <div class="loader">
   <div class="ytp-spinner">
   <div class="ytp-spinner-container">
   <div class="ytp-spinner-rotator">
   <div class="ytp-spinner-left">
   <div class="ytp-spinner-circle"></div>
   </div>
   <div class="ytp-spinner-right">
   <div class="ytp-spinner-circle"></div>
   </div>
   </div>
   </div>
   </div>
   </div>
   </div>


   <header class="header">
   <div class="navbar-area">
   <div class="container">
   <div class="row align-items-center">
   <div class="col-lg-12">
   <nav class="navbar navbar-expand-lg">
   <a class="navbar-brand" href="#">
   <img src="assets/img/logo/logo.svg" alt="Logo" />
   </a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
   <span class="toggler-icon"></span>
   <span class="toggler-icon"></span>
   <span class="toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse sub-menu-bar" id="navbarSupportedContent">
   <ul id="nav" class="navbar-nav ml-auto">
   <li class="nav-item">
   <a class="page-scroll" href="#home">Home</a>
   </li>
   <li class="nav-item">
   <a class="page-scroll" href="#services">Services</a>
   </li>
   <li class="nav-item">
   <a class="page-scroll" href="#about">About</a>
   </li>
   <li class="nav-item">
   <a class="page-scroll" href="#how">How It Works</a>
   </li>
   <li class="nav-item">
   <a class="page-scroll" href="#testimonial">Testimonials</a>
   </li>
   </ul>
   </div>

   </nav>

   </div>
   </div>

   </div>

   </div>

   </header>


   <section id="home" class="hero-section">
   <div class="hero-shape">
   <img src="assets/img/hero/hero-shape.svg" alt="" class="shape" />
   </div>
   <div class="container">
   <div class="row align-items-center">
   <div class="col-lg-6">
   <div class="hero-content">
   <h1 class="wow fadeInUp" data-wow-delay=".2s">Home Delivery <span>From Stores Near You</span> </h1>
   <p class="wow fadeInUp" data-wow-delay=".4s">
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
   </p>
   <a href="javascript:void(0)" class="main-btn btn-hover wow fadeInUp" data-wow-delay=".6s">Download App</a>
   </div>
   </div>
   <div class="col-lg-6">
   <div class="hero-img wow fadeInUp" data-wow-delay=".5s">
   <img src="assets/img/hero/hero-img.svg" alt="" />
   </div>
   </div>
   </div>
   </div>
   </section>


   <section id="services" class="service-section pt-150">
   <div class="container">
   <div class="row justify-content-center">
   <div class="col-xl-6 col-lg-8">
   <div class="section-title text-center mb-70">
   <span class="wow fadeInUp" data-wow-delay=".2s">Delivery Services</span>
   <h1 class="wow fadeInUp" data-wow-delay=".4s">All Essentials You Need</h1>
   </div>
   </div>
   </div>
   <div class="row">
   <div class="col-lg-4 col-md-6">
   <div class="single-service wow fadeInUp" data-wow-delay=".2s">
   <div class="icon">
   <img src="assets/img/service/service-icon-1.svg" alt="" />
   </div>
   <div class="content">
   <h3>Food</h3>
   <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</p>
   </div>
   </div>
   </div>
   <div class="col-lg-4 col-md-6">
   <div class="single-service wow fadeInUp" data-wow-delay=".4s">
   <div class="icon">
   <img src="assets/img/service/service-icon-2.svg" alt="" />
   </div>
   <div class="content">
   <h3>Grocery</h3>
   <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</p>
   </div>
   </div>
   </div>
   <div class="col-lg-4 col-md-6">
   <div class="single-service wow fadeInUp" data-wow-delay=".6s">
   <div class="icon">
   <img src="assets/img/service/service-icon-3.svg" alt="" />
   </div>
   <div class="content">
   <h3>Furniture</h3>
   <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</p>
   </div>
   </div>
   </div>
   <div class="col-lg-4 col-md-6">
   <div class="single-service wow fadeInUp" data-wow-delay=".2s">
   <div class="icon">
   <img src="assets/img/service/service-icon-4.svg" alt="" />
   </div>
   <div class="content">
   <h3>Medicine</h3>
   <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</p>
   </div>
   </div>
   </div>
   <div class="col-lg-4 col-md-6">
   <div class="single-service wow fadeInUp" data-wow-delay=".4s">
   <div class="icon">
   <img src="assets/img/service/service-icon-5.svg" alt="" />
   </div>
   <div class="content">
   <h3>Electronics</h3>
   <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</p>
   </div>
   </div>
   </div>
   <div class="col-lg-4 col-md-6">
   <div class="single-service wow fadeInUp" data-wow-delay=".6s">
   <div class="icon">
   <img src="assets/img/service/service-icon-6.svg" alt="" />
   </div>
   <div class="content">
   <h3>Clothes</h3>
   <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</p>
   </div>
   </div>
   </div>
   </div>
   </div>
   </section>


   <section id="about" class="about-section pt-150">
   <div class="container">
   <div class="row">
   <div class="col-lg-6">
   <div class="about-img wow fadeInUp" data-wow-delay=".5s">
   <img src="assets/img/about/about-img.svg" alt="" />
   </div>
   </div>
   <div class="col-lg-6">
   <div class="about-content">
   <div class="section-title">
   <span class="wow fadeInUp" data-wow-delay=".2s">About Us</span>
   <h1 class="wow fadeInUp" data-wow-delay=".4s">On-time Delivery and Customer Satisfaction</h1>
   <p class="wow fadeInUp" data-wow-delay=".6s">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
   </div>
   <div class="rating-meta d-flex align-items-center wow fadeInUp" data-wow-delay=".65s">
   <h5>Rating 4.8</h5>
   <div class="rating">
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   </div>
   </div>
   <div class="counter-up wow fadeInUp" data-wow-delay=".8s">
   <div class="single-counter">
   <h3 id="secondo1" class="countup" >1M</h3>
   <h5>Download</h5>
   </div>
   <div class="single-counter position-relative">
   <h3 id="secondo2" class="countup">234k </h3>
   <h5>Happy User</h5>
   </div>
   <div class="single-counter">
   <h3 id="secondo3" class="countup" >34k </h3>
   <h5>Reviews</h5>
   </div>
   </div>
   </div>
   </div>
   </div>
   </div>
   </section>


   <section id="how" class="delivery-section pt-150">
   <div class="container">
   <div class="row align-items-center">
   <div class="col-lg-5">
   <div class="delivery-content">
   <div class="section-title">
   <span class="wow fadeInUp" data-wow-delay=".2s">Fast Delivery</span>
   <h1 class="mb-35 wow fadeInUp" data-wow-delay=".4s">Order Now, Recieve Within 30mins</h1>
   <p class="mb-35 wow fadeInUp" data-wow-delay=".6s">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore hdht dolore magna aliquyam erat, sed diam voluptua.</p>
   <a href="javscript:void(0)" class="main-btn btn-hover wow fadeInUp" data-wow-delay=".8s">Download App</a>
   </div>
   </div>
   </div>
   <div class="col-lg-7 order-first order-lg-last">
   <div class="delivery-img wow fadeInUp" data-wow-delay=".5s">
   <img src="assets/img/delivery/delivery-img.svg" alt="" />
   </div>
   </div>
   </div>
   </div>
   </section>


   <section id="received" class="about-section received-section pt-150">
   <div class="container">
   <div class="row align-items-center">
   <div class="col-lg-6">
   <div class="about-img received-img wow fadeInUp" data-wow-delay=".5s">
   <img src="assets/img/received/received-img.svg" alt="" />
   </div>
   </div>
   <div class="col-lg-6">
   <div class="about-content received-content">
   <div class="section-title">
   <span class="wow fadeInUp" data-wow-delay=".2s">Contactless Delivery</span>
   <h1 class="mb-25 wow fadeInUp" data-wow-delay=".4s">On-time Delivery to Your Doorstep</h1>
   <p class="wow fadeInUp" data-wow-delay=".6s">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
   </div>
   </div>
   </div>
   </div>
   </div>
   </section>


   <section id="testimonial" class="testimonial-section img-bg pt-150 pb-40">
   <div class="container">
   <div class="row justify-content-center">
   <div class="col-lg-6">
   <div class="section-title mb-60 text-center">
   <span class="wow fadeInUp" data-wow-delay=".2s">Testimonials</span>
   <h1 class="wow fadeInUp" data-wow-delay=".4s">What Our Users Says</h1>
   </div>
   </div>
   </div>
   <div class="row testimonial-wrapper">
   <div class="col-lg-4 col-md-6 -mt-30">
   <div class="single-testimonial wow fadeInUp" data-wow-delay=".2s">
   <div class="rating">
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   </div>
   <div class="content">
   <p>Lorem ipsum dolor sit amet onsetetur sadipscing elitr, sed diam non eirmod tempor invidunt ut labore etdo magna aliquyam erat, sed diam vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren.</p>
   </div>
   <div class="info">
   <div class="image">
   <img src="assets/img/testimonial/testimonial-1.png" alt="" />
   </div>
   <div class="text">
   <h5>Ena Shah</h5>
   <p>Teacher at Abc School</p>
   </div>
   </div>
   </div>
   </div>
   <div class="col-lg-4 col-md-6 -mt-60">
   <div class="single-testimonial wow fadeInUp" data-wow-delay=".4s">
   <div class="rating">
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   </div>
   <div class="content">
   <p>Lorem ipsum dolor sit amet onsetetur sadipscing elitr, sed diam non eirmod tempor invidunt ut labore etdo magna aliquyam erat, sed diam vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren.</p>
   </div>
   <div class="info">
   <div class="image">
   <img src="assets/img/testimonial/testimonial-2.png" alt="" />
   </div>
   <div class="text">
   <h5>Mrs. Gosh</h5>
   <p>Actor</p>
   </div>
   </div>
   </div>
   </div>
   <div class="col-lg-4 col-md-6">
   <div class="single-testimonial wow fadeInUp" data-wow-delay=".6s">
   <div class="rating">
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   </div>
   <div class="content">
   <p>Lorem ipsum dolor sit amet onsetetur sadipscing elitr, sed diam non eirmod tempor invidunt ut labore etdo magna aliquyam erat, sed diam vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren.</p>
   </div>
   <div class="info">
   <div class="image">
   <img src="assets/img/testimonial/testimonial-3.png" alt="" />
   </div>
   <div class="text">
   <h5>John Doe</h5>
   <p>Model</p>
   </div>
   </div>
   </div>
   </div>
   <div class="col-lg-4 col-md-6 -mt-30">
   <div class="single-testimonial wow fadeInUp" data-wow-delay=".2s">
   <div class="rating">
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   </div>
   <div class="content">
   <p>Lorem ipsum dolor sit amet onsetetur sadipscing elitr, sed diam non eirmod tempor invidunt ut labore etdo magna aliquyam erat, sed diam vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren.</p>
   </div>
   <div class="info">
   <div class="image">
   <img src="assets/img/testimonial/testimonial-4.png" alt="" />
   </div>
   <div class="text">
   <h5>Jonathan Smith</h5>
   <p>Creative Designer</p>
   </div>
   </div>
   </div>
   </div>
   <div class="col-lg-4 col-md-6 -mt-60">
   <div class="single-testimonial wow fadeInUp" data-wow-delay=".4s">
   <div class="rating">
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   </div>
   <div class="content">
   <p>Lorem ipsum dolor sit amet onsetetur sadipscing elitr, sed diam non eirmod tempor invidunt ut labore etdo magna aliquyam erat, sed diam vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren.</p>
   </div>
   <div class="info">
   <div class="image">
   <img src="assets/img/testimonial/testimonial-5.png" alt="" />
   </div>
   <div class="text">
   <h5>Sara A. K.</h5>
   <p>Heroine</p>
   </div>
   </div>
   </div>
   </div>
   <div class="col-lg-4 col-md-6">
   <div class="single-testimonial wow fadeInUp" data-wow-delay=".6s">
   <div class="rating">
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   <i class="lni lni-star-filled"></i>
   </div>
   <div class="content">
   <p>Lorem ipsum dolor sit amet onsetetur sadipscing elitr, sed diam non eirmod tempor invidunt ut labore etdo magna aliquyam erat, sed diam vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren.</p>
   </div>
   <div class="info">
   <div class="image">
   <img src="assets/img/testimonial/testimonial-6.png" alt="" />
   </div>
   <div class="text">
   <h5>David Smith</h5>
   <p>Businessman</p>
   </div>
   </div>
   </div>
   </div>
   </div>
   </div>
   </section>


   


   <footer id="footer" class="footer pt-100 pb-70">
   <div class="footer-shape">
   <img src="assets/img/footer/footer-left.svg" alt="" class="shape shape-1" />
   <img src="assets/img/footer/footer-right.svg" alt="" class="shape shape-2" />
   </div>
   <div class="container">
   <div class="row">
   <div class="col-lg-3 col-md-6">
   <div class="footer-widget wow fadeInUp" data-wow-delay=".2s">
   <div class="logo">
   <a href="#"><img src="assets/img/logo/logo-2.svg" alt="logo" /></a>
   </div>
   <div class="download-btns">
   <a href="javascript:void(0)">
   <span class="icon"><i class="lni lni-apple"></i></span>
   <span class="text">Download on the <b>App Store</b> </span>
   </a>
   <a href="javascript:void(0)">
   <span class="icon"><i class="lni lni-play-store"></i></span>
   <span class="text">GET IT ON <b>Play Store</b> </span>
   </a>
   </div>
   </div>
   </div>
   <div class="col-lg-3 col-md-6">
   <div class="footer-widget wow fadeInUp" data-wow-delay=".4s">
   <h3>About Us</h3>
   <ul class="links">
   <li>
   <a href="javascript:void(0)">Home</a>
   </li>
   <li>
   <a href="javascript:void(0)">Services</a>
   </li>
   <li>
   <a href="javascript:void(0)">About Us</a>
   </li>
   <li>
   <a href="javascript:void(0)">Contact</a>
   </li>
   </ul>
   </div>
   </div>
   <div class="col-lg-3 col-md-6">
   <div class="footer-widget wow fadeInUp" data-wow-delay=".6s">
   <h3>About</h3>
   <ul class="links">
   <li>
   <a href="javascript:void(0)">Partners</a>
   </li>
   <li>
   <a href="javascript:void(0)">Terms of Service</a>
   </li>
   <li>
   <a href="javascript:void(0)">Privacy Policy</a>
   </li>
   <li>
   <a href="javascript:void(0)">Refund Policy</a>
   </li>
   </ul>
   </div>
   </div>
   <div class="col-lg-3 col-md-6">
   <div class="footer-widget wow fadeInUp" data-wow-delay=".8s">
   <h3>Support</h3>
   <ul class="links">
   <li>
   <a href="javascript:void(0)">Open Ticket</a>
   </li>
   <li>
   <a href="javascript:void(0)">Community</a>
   </li>
   <li>
   <a href="javascript:void(0)">Return Policy</a>
   </li>
   <li>
   <a href="javascript:void(0)">Accessibility</a>
   </li>
   </ul>
   </div>
   </div>
   </div>
   </div>
   </footer>


   <a href="#" class="scroll-top btn-hover">
   <i class="lni lni-chevron-up"></i>
   </a>
</template>

<script>


export default {
  //
}
</script>

Now we are done friends also and If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

June 11, 2021