Category: Bootstrap 5

Vue 3 Create Invoice Template and Export to PDF Working Functionality

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Vue 3 Create Invoice Template and Export to PDF Working Functionality.

Working Video

Vue 3 and Bootstrap 5 came 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 use this carefully to avoid the mistakes:

1. Firstly friends we need fresh vue 3 setup and for this we need to run below commands . Secondly we should also have latest node version installed on our system. With below we will have pdf maker and bootstrap 5 modules in our Vue 3 application:

npm install -g @vue/cli

vue create vuedemo

cd vuedemo

npm install bootstrap --save

npm install --save pdfmake

npm install html-to-pdfmake

npm install jspdf --save

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

2. Now friends we need to add below code into vuedemo/src/App.vue file to check the final output on browser:

<template>
 
 <div class="App container mt-5">
      <button class="btn btn-primary" @click="printDocument()">Export To PDF</button>
    <div id="divToPrint">
         <div class="row d-flex justify-content-center">
      <div class="col-md-8">
          <div class="card">
              <div class="d-flex flex-row p-2">
                  <div class="d-flex flex-column"> <span class="font-weight-bold">Tax Invoice</span> <small>INV-001</small> </div>
                  
              </div>
              
              <hr />
              <div class="table-responsive p-2">
                  <table class="table table-borderless">
                      <tbody>
                          <tr class="add">
                              <td>To</td>
                              <td>From</td>
                          </tr>
                          <tr class="content">
                              <td class="font-weight-bold">Google <br />Attn: Jassa Smith Pymont <br />Australia</td>
                              <td class="font-weight-bold">Facebook <br /> Attn: Jassa Right Polymont <br /> USA</td>
                          </tr>
                      </tbody>
                  </table>
              </div>
              <hr />
              <div class="products p-2">
                  <table class="table table-borderless">
                      <tbody>
                          <tr class="add">
                              <td>Description</td>
                              <td>Days</td>
                              <td>Price</td>
                              <td class="text-center">Total</td>
                          </tr>
                          <tr class="content">
                              <td>Website Redesign</td>
                              <td>15</td>
                              <td>$1,500</td>
                              <td class="text-center">$22,500</td>
                          </tr>
                          <tr class="content">
                              <td>Logo & Identity</td>
                              <td>10</td>
                              <td>$1,500</td>
                              <td class="text-center">$15,000</td>
                          </tr>
                          <tr class="content">
                              <td>Marketing Collateral</td>
                              <td>3</td>
                              <td>$1,500</td>
                              <td class="text-center">$4,500</td>
                          </tr>
                      </tbody>
                  </table>
              </div>
              <hr />
              <div class="products p-2">
                  <table class="table table-borderless">
                      <tbody>
                          <tr class="add">
                              <td></td>
                              <td>Subtotal</td>
                              <td>GST(10%)</td>
                              <td class="text-center">Total</td>
                          </tr>
                          <tr class="content">
                              <td></td>
                              <td>$40,000</td>
                              <td>2,500</td>
                              <td class="text-center">$42,500</td>
                          </tr>
                      </tbody>
                  </table>
              </div>
              <hr />
              <div class="address p-2">
                  <table class="table table-borderless">
                      <tbody>
                          <tr class="add">
                              <td>Bank Details</td>
                          </tr>
                          <tr class="content">
                              <td> Bank Name : ADS BANK <br /> Swift Code : 00220022 <br /> Account Holder : Jassa Pepper <br /> Account Number : 6953PO789 <br /> </td>
                          </tr>
                      </tbody>
                  </table>
              </div>
          </div>
      </div>
  </div>
  
      
     
    </div>
    </div>
</template>

<script>

//importing bootstrap 5 and pdf maker Modules
import "bootstrap/dist/css/bootstrap.min.css";
import pdfMake from 'pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
import htmlToPdfmake from 'html-to-pdfmake';
export default {
  
 
       
  
    methods: {
       printDocument() {
     
         
          //get table html
          const pdfTable = document.getElementById('divToPrint');
          //html to pdf format
          var html = htmlToPdfmake(pdfTable.innerHTML);
        
          const documentDefinition = { content: html };
          pdfMake.vfs = pdfFonts.pdfMake.vfs;
          pdfMake.createPdf(documentDefinition).open();
        
    }
}  
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Maven+Pro&display=swap');

body {
    font-family: 'Maven Pro', sans-serif;
    background-color: #f12369
}

hr {
    color: #0000004f;
    margin-top: 5px;
    margin-bottom: 5px
}

.add td {
    color: #c5c4c4;
    text-transform: uppercase;
    font-size: 12px
}

.content {
    font-size: 14px
}
</style>

Now we are done friends 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.

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

September 15, 2021

Reactjs Create Invoice Template and Export to PDF Working Functionality

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Reactjs Create Invoice Template and Export to PDF Working Functionality.

Working Video

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 for react ecommerce template free 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 reactpdf

cd reactpdf

2. Now we need to run below commands into our project terminal to get, pdf genrator, bootstrap and related modules into our reactjs application:

npm install bootstrap --save

npm install --save pdfmake

npm install html-to-pdfmake

npm install jspdf --save

npm start //For start project

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

import React from 'react';

import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import jsPDF from 'jspdf';
import pdfMake from 'pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
import htmlToPdfmake from 'html-to-pdfmake';

class App extends React.Component {

    printDocument() {
     
    

          const doc = new jsPDF();
         
          //get html
          const pdfTable = document.getElementById('divToPrint');
          //html to pdf format
          var html = htmlToPdfmake(pdfTable.innerHTML);
        
          const documentDefinition = { content: html };
          pdfMake.vfs = pdfFonts.pdfMake.vfs;
          pdfMake.createPdf(documentDefinition).open();
        
    }
 
  render() {
   
    return (
    <div className="App container mt-5">
     <button class="btn btn-primary" onClick={this.printDocument}>Export To PDF</button>
    <div id="divToPrint" className="m-3">
    <div class="row d-flex justify-content-center">
      <div class="col-md-8">
          <div class="card">
              <div class="d-flex flex-row p-2">
                  <div class="d-flex flex-column"> <span class="font-weight-bold">Tax Invoice</span> <small>INV-001</small> </div>
                  
              </div>
              
              <hr />
              <div class="table-responsive p-2">
                  <table class="table table-borderless">
                      <tbody>
                          <tr class="add">
                              <td>To</td>
                              <td>From</td>
                          </tr>
                          <tr class="content">
                              <td class="font-weight-bold">Google <br />Attn: Jassa Smith Pymont <br />Australia</td>
                              <td class="font-weight-bold">Facebook <br /> Attn: Jassa Right Polymont <br /> USA</td>
                          </tr>
                      </tbody>
                  </table>
              </div>
              <hr />
              <div class="products p-2">
                  <table class="table table-borderless">
                      <tbody>
                          <tr class="add">
                              <td>Description</td>
                              <td>Days</td>
                              <td>Price</td>
                              <td class="text-center">Total</td>
                          </tr>
                          <tr class="content">
                              <td>Website Redesign</td>
                              <td>15</td>
                              <td>$1,500</td>
                              <td class="text-center">$22,500</td>
                          </tr>
                          <tr class="content">
                              <td>Logo & Identity</td>
                              <td>10</td>
                              <td>$1,500</td>
                              <td class="text-center">$15,000</td>
                          </tr>
                          <tr class="content">
                              <td>Marketing Collateral</td>
                              <td>3</td>
                              <td>$1,500</td>
                              <td class="text-center">$4,500</td>
                          </tr>
                      </tbody>
                  </table>
              </div>
              <hr />
              <div class="products p-2">
                  <table class="table table-borderless">
                      <tbody>
                          <tr class="add">
                              <td></td>
                              <td>Subtotal</td>
                              <td>GST(10%)</td>
                              <td class="text-center">Total</td>
                          </tr>
                          <tr class="content">
                              <td></td>
                              <td>$40,000</td>
                              <td>2,500</td>
                              <td class="text-center">$42,500</td>
                          </tr>
                      </tbody>
                  </table>
              </div>
              <hr />
              <div class="address p-2">
                  <table class="table table-borderless">
                      <tbody>
                          <tr class="add">
                              <td>Bank Details</td>
                          </tr>
                          <tr class="content">
                              <td> Bank Name : ADS BANK <br /> Swift Code : 00220022 <br /> Account Holder : Jassa Pepper <br /> Account Number : 6953PO789 <br /> </td>
                          </tr>
                      </tbody>
                  </table>
              </div>
          </div>
      </div>
  </div>
      </div>
      
      
    </div>
 )
};
}

export default App;

4. Now guys we need to add below code into our reactpdf/src/App.css file:

@import url('https://fonts.googleapis.com/css2?family=Maven+Pro&display=swap');

body {
    font-family: 'Maven Pro', sans-serif;
    background-color: #f12369
}

hr {
    color: #0000004f;
    margin-top: 5px;
    margin-bottom: 5px
}

.add td {
    color: #c5c4c4;
    text-transform: uppercase;
    font-size: 12px
}

.content {
    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 be good or bad.

Jassa

Thanks

September 14, 2021

Angular 12 Create Invoice Template and Export to PDF Working Functionality

Hello friends, welcome back to my blog. Today in this blog post, I am going to tell you, Angular 12 Create Invoice Template and Export to PDF Working Functionality.

Angular 12 HTML to PDF

Guy’s Angular 12 came . 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 htmltopdf //Create new Angular Project

cd htmltopdf // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

2. Now friends, here we need to run below commands into our project terminal to install pdfmake, bootstrap(good looks) modules into our angular application:

npm install --save pdfmake

npm install html-to-pdfmake

npm install jspdf --save

npm i --save bootstrap

ng serve --o //will run the angular project

3. Now friends, here we need to add below into our angular.json file:

"styles": [
           ...
           "node_modules/bootstrap/dist/css/bootstrap.min.css",
          
         ],

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

import { Component, ViewChild, ElementRef  } from '@angular/core';

import jsPDF from 'jspdf';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;
import htmlToPdfmake from 'html-to-pdfmake';

...
export class AppComponent {
  @ViewChild('pdfTable') pdfTable: ElementRef;
  ...
  //PDF genrate button click function
  public downloadAsPDF() {
    const doc = new jsPDF();
    //get table html
    const pdfTable = this.pdfTable.nativeElement;

    //html to pdf format
    var html = htmlToPdfmake(pdfTable.innerHTML);
   
    const documentDefinition = { content: html };

    pdfMake.createPdf(documentDefinition).open();

    

  
  }

  
  
  
}

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

<div class="container mt-2">
  <button class="btn btn-primary" (click)="downloadAsPDF()">Export To PDF</button>
</div>
<div class="container mt-5 mb-3" id="pdfTable" #pdfTable>
  <div class="row d-flex justify-content-center">
      <div class="col-md-8">
          <div class="card">
              <div class="d-flex flex-row p-2">
                  <div class="d-flex flex-column"> <span class="font-weight-bold">Tax Invoice</span> <small>INV-001</small> </div>
                  
              </div>
              
              <hr>
              <div class="table-responsive p-2">
                  <table class="table table-borderless">
                      <tbody>
                          <tr class="add">
                              <td>To</td>
                              <td>From</td>
                          </tr>
                          <tr class="content">
                              <td class="font-weight-bold">Google <br>Attn: Jassa Smith Pymont <br>Australia</td>
                              <td class="font-weight-bold">Facebook <br> Attn: Jassa Right Polymont <br> USA</td>
                          </tr>
                      </tbody>
                  </table>
              </div>
              <hr>
              <div class="products p-2">
                  <table class="table table-borderless">
                      <tbody>
                          <tr class="add">
                              <td>Description</td>
                              <td>Days</td>
                              <td>Price</td>
                              <td class="text-center">Total</td>
                          </tr>
                          <tr class="content">
                              <td>Website Redesign</td>
                              <td>15</td>
                              <td>$1,500</td>
                              <td class="text-center">$22,500</td>
                          </tr>
                          <tr class="content">
                              <td>Logo & Identity</td>
                              <td>10</td>
                              <td>$1,500</td>
                              <td class="text-center">$15,000</td>
                          </tr>
                          <tr class="content">
                              <td>Marketing Collateral</td>
                              <td>3</td>
                              <td>$1,500</td>
                              <td class="text-center">$4,500</td>
                          </tr>
                      </tbody>
                  </table>
              </div>
              <hr>
              <div class="products p-2">
                  <table class="table table-borderless">
                      <tbody>
                          <tr class="add">
                              <td></td>
                              <td>Subtotal</td>
                              <td>GST(10%)</td>
                              <td class="text-center">Total</td>
                          </tr>
                          <tr class="content">
                              <td></td>
                              <td>$40,000</td>
                              <td>2,500</td>
                              <td class="text-center">$42,500</td>
                          </tr>
                      </tbody>
                  </table>
              </div>
              <hr>
              <div class="address p-2">
                  <table class="table table-borderless">
                      <tbody>
                          <tr class="add">
                              <td>Bank Details</td>
                          </tr>
                          <tr class="content">
                              <td> Bank Name : ADS BANK <br> Swift Code : 00220022 <br> Account Holder : Jassa Pepper <br> Account Number : 6953PO789 <br> </td>
                          </tr>
                      </tbody>
                  </table>
              </div>
          </div>
      </div>
  </div>
</div>

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

@import url('https://fonts.googleapis.com/css2?family=Maven+Pro&display=swap');

body {
    font-family: 'Maven Pro', sans-serif;
    background-color: #f12369
}

hr {
    color: #0000004f;
    margin-top: 5px;
    margin-bottom: 5px
}

.add td {
    color: #c5c4c4;
    text-transform: uppercase;
    font-size: 12px
}

.content {
    font-size: 14px
}

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. For better live working experience, please check the video on the top.

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

September 13, 2021

How to make travel website in Vue 3 using Bootstrap 5?

Hello my friends, welcome back to my blog. Today in this blog post, I am going to show you, How to make travel website in Vue 3 using Bootstrap 5?

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

Bootstrap 5 Vue 3 Free Admin 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/travelassets.zip

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

...
  <head>
 ...
   <!-- ===============================================-->
    <!--    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/is.min.js"></script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
    <script src="assets/js/all.min.js"></script>
    <script src="assets/js/theme.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&amp;display=swap" rel="stylesheet">
 
</head>
<body>
...

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

<template>
 <!-- ===============================================-->
   <!--    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" href="#"><img class="d-inline-block" src="assets/img/logo.png" width="50" alt="logo" /><span class="fw-bold text-primary ms-2">therichpost</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 mx-auto pt-2 pt-lg-0 font-base">
               <li class="nav-item px-2"><a class="nav-link fw-medium active" aria-current="page" href="#destinations"><span class="nav-link-icon text-800 me-1 fas fa-map-marker-alt"></span><span class="nav-link-text">Locations </span></a></li>
               <li class="nav-item px-2"><a class="nav-link" href="#flights"> <span class="nav-link-icon text-800 me-1 fas fa-plane"></span><span class="nav-link-text">Flights</span></a></li>
               <li class="nav-item px-2"><a class="nav-link" href="#hotels"> <span class="nav-link-icon text-800 me-1 fas fa-hotel"></span><span class="nav-link-text">Hotels</span></a></li>
               <li class="nav-item px-2"><a class="nav-link" href="#activities"><span class="nav-link-icon text-800 me-1 fas fa-bolt"></span><span class="nav-link-text">Activities</span></a></li>
             </ul>
             <form><button class="btn text-800 order-1 order-lg-0 me-2" type="button">Support</button><button class="btn btn-therichpost-outline order-0" type="submit"><span class="text-primary">Sign in</span></button></form>
           </div>
         </div>
       </nav>
       <section class="mt-7 py-0">
         <div class="bg-holder w-50 bg-right d-none d-lg-block" style="background-image:url(assets/img/hero-section-1.png);"></div>
         <!--/.bg-holder-->
         <div class="container">
           <div class="row">
             <div class="col-lg-6 py-5 py-xl-5 py-xxl-7">
               <h1 class="display-3 text-1000 fw-normal">Let’s make a tour</h1>
               <h1 class="display-3 text-primary fw-bold">Discover the beauty</h1>
               <div class="pt-5">
                 <nav>
                   <div class="nav nav-tabs therichpost-tabs" id="nav-tab" role="tablist"><button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true"><i class="fas fa-map-marker-alt"></i></button><button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false"> <i class="fas fa-plane"></i></button><button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false"> <i class="fas fa-hotel"></i></button></div>
                   <div class="tab-content" id="nav-tabContent">
                     <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                       <form class="row g-4 mt-5">
                         <div class="col-sm-6 col-md-6 col-xl-5">
                           <div class="input-group-icon"><label class="form-label visually-hidden" for="inputAddress1">Address 1</label><input class="form-control input-box form-therichpost-control" id="inputAddress1" type="text" placeholder="From where" /><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-map-marker-alt"></i></span></div>
                         </div>
                         <div class="col-sm-6 col-md-6 col-xl-5">
                           <div class="input-group-icon"><label class="form-label visually-hidden" for="inputAddress2">Address 2</label><input class="form-control input-box form-therichpost-control" id="inputAddress2" type="text" placeholder="To where" /><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-map-marker-alt"> </i></span></div>
                         </div>
                         <div class="col-sm-6 col-md-6 col-xl-5">
                           <div class="input-group-icon"><input class="form-control input-box form-therichpost-control" id="inputdateOne" type="date" /><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-calendar"></i></span></div>
                         </div>
                         <div class="col-sm-6 col-md-6 col-xl-5">
                           <div class="input-group-icon"><input class="form-control input-box form-therichpost-control" id="inputDateTwo" type="date" /><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-calendar"></i></span></div>
                         </div>
                         <div class="col-sm-6 col-md-6 col-xl-5">
                           <div class="input-group-icon"><label class="form-label visually-hidden" for="inputPersonOne">Person</label><select class="form-select form-therichpost-select input-box" id="inputPersonOne">
                               <option selected="selected">2 Adults</option>
                               <option>2 Adults 1 children</option>
                               <option>2 Adults 2 children</option>
                             </select><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-user"> </i></span></div>
                         </div>
                         <div class="col-12 col-xl-10 col-lg-12 d-grid mt-6"><button class="btn btn-secondary" type="submit">Search Packages</button></div>
                       </form>
                     </div>
                     <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                       <form class="row g-4 mt-5">
                         <div class="col-6">
                           <div class="input-group-icon"><label class="form-label visually-hidden" for="inputAddressThree">Address 1</label><input class="form-control input-box form-therichpost-control" id="inputAddressThree" type="text" placeholder="From where" /><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-map-marker-alt"></i></span></div>
                         </div>
                         <div class="col-6">
                           <div class="input-group-icon"><label class="form-label visually-hidden" for="inputAddressFour">Address 2</label><input class="form-control input-box form-therichpost-control" id="inputAddressFour" type="text" placeholder="To where" /><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-map-marker-alt"> </i></span></div>
                         </div>
                         <div class="col-6">
                           <div class="input-group-icon"><input class="form-control input-box form-therichpost-control" id="inputDateThree" type="date" /><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-calendar"></i></span></div>
                         </div>
                         <div class="col-6">
                           <div class="input-group-icon"><input class="form-control input-box form-therichpost-control" id="inputDateFour" type="date" /><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-calendar"></i></span></div>
                         </div>
                         <div class="col-6">
                           <div class="input-group-icon"><label class="form-label visually-hidden" for="inputPeopleTwo">People</label><select class="form-select form-therichpost-select input-box" id="inputPeopleTwo">
                               <option selected="selected">2 Adults</option>
                               <option>2 Adults 1 children</option>
                               <option>2 Adults 2 children</option>
                             </select><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-user"> </i></span></div>
                         </div>
                         <div class="col-12 d-grid mt-6"><button class="btn btn-secondary" type="submit">Search Packages</button></div>
                       </form>
                     </div>
                     <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
                       <form class="row g-4 mt-5">
                         <div class="col-6">
                           <div class="input-group-icon"><input class="form-control input-box form-therichpost-control" id="inputDateFive" type="date" /><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-calendar"></i></span></div>
                         </div>
                         <div class="col-6">
                           <div class="input-group-icon"><input class="form-control input-box form-therichpost-control" id="inputDateSix" type="date" /><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-calendar"></i></span></div>
                         </div>
                         <div class="col-6">
                           <div class="input-group-icon"><label class="form-label visually-hidden" for="inputPeopleThree">Person</label><select class="form-select form-therichpost-select input-box" id="inputPeopleThree">
                               <option selected="selected">2 Adults</option>
                               <option>2 Adults 1 children</option>
                               <option>2 Adults 2 children</option>
                             </select><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-user"> </i></span></div>
                         </div>
                         <div class="col-12 d-grid mt-6"><button class="btn btn-secondary" type="submit">Search Packages</button></div>
                       </form>
                     </div>
                   </div>
                 </nav>
               </div>
             </div>
           </div>
         </div>
       </section>
 
       <!-- ============================================-->
       <!-- <section> begin ============================-->
       <section class="py-0 overflow-hidden">
         <div class="container-fluid">
           <div class="row">
             <div class="col-lg-6 px-0"><img class="img-fluid order-md-0 mb-4 h-100 fit-cover" src="assets/img/hero-section-2.png" alt="..." /></div>
             <div class="col-lg-6 px-0 bg-primary-gradient bg-offcanvas-right">
               <div class="mx-6 mx-xl-8 my-8">
                 <div class="align-items-center d-block d-flex mb-5"><img class="img-fluid me-3 me-md-2 me-lg-4" src="assets/img/locations.png" alt="..." />
                   <div class="flex-1 align-items-center pt-2">
                     <h5 class="fw-bold text-light">Visit the greatest places</h5>
                   </div>
                 </div>
                 <div class="align-items-center d-block d-flex mb-5"><img class="img-fluid me-3 me-md-2 me-lg-4" src="assets/img/schedule.png" alt="..." />
                   <div class="flex-1 align-items-center pt-2">
                     <h5 class="fw-bold text-light">Make your own plans.</h5>
                   </div>
                 </div>
                 <div class="align-items-center d-block d-flex mb-5"><img class="img-fluid me-3 me-md-2 me-lg-4" src="assets/img/save.png" alt="..." />
                   <div class="flex-1 align-items-center pt-2">
                     <h5 class="fw-bold text-light">Save 50% on your next trip</h5>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div><!-- end of .container-->
       </section><!-- <section> close ============================-->
       <!-- ============================================-->
 
       <section id="testimonial">
         <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">Flash Deals</h5>
             </div>
             <div class="col-12">
               <div class="carousel slide" id="carouselTestimonials" 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-md-4 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/maldives.png" alt="..." />
                           <div class="card-img-overlay ps-0"><span class="badge bg-primary ms-3 me-1 p-2"><i class="fas fa-clock me-1"></i><span>20:04:32:21</span></span><span class="badge bg-secondary p-2"><i class="fas fa-bolt me-1"></i><span>trending</span><i class="fas fa-bolt ms-1"> </i></span></div>
                           <div class="card-body ps-0">
                             <h5 class="fw-bold text-1000 mb-4 text-truncate">Mermaid Beach Resort: The most joyful way to spend your holiday</h5>
                             <div class="d-flex align-items-center justify-content-start"><span class="text-800 fs--1 me-2"><i class="fas fa-map-marker-alt"></i></span><span class="text-900 me-3">Maldives</span><span class="text-800 fs--1 me-2"><i class="fas fa-calendar"></i></span><span class="text-900">4 days</span></div>
                             <p class="text-decoration-line-through text-900 mt-3 mb-0">$200</p>
                             <h1 class="mb-3 text-primary fw-bolder fs-4"><span>$175</span><span class="text-900 fs--1 fw-normal">/Per person</span></h1><span class="badge bg-soft-secondary p-2"><i class="fas fa-tag text-secondary fs--1 me-1"></i><span class="text-secondary fw-normal fs-1">-15%</span></span>
                           </div>
                         </div>
                       </div>
                       <div class="col-md-4 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/cinnamon.png" alt="..." />
                           <div class="card-img-overlay ps-0"><span class="badge bg-primary ms-3 me-1 p-2"><i class="fas fa-clock me-1"></i><span>20:04:32:21</span></span><span class="badge bg-secondary p-2"><i class="fas fa-bolt me-1"></i><span>trending</span><i class="fas fa-bolt ms-1"> </i></span></div>
                           <div class="card-body ps-0">
                             <h5 class="fw-bold text-1000 mb-4 text-truncate">Bora Bora: Enjoy a romantic cruise tour of at the sunny side of life</h5>
                             <div class="d-flex align-items-center justify-content-start"><span class="text-800 fs--1 me-2"><i class="fas fa-map-marker-alt"></i></span><span class="text-900 me-3">Maldives</span><span class="text-800 fs--1 me-2"><i class="fas fa-calendar"></i></span><span class="text-900">4 days</span></div>
                             <p class="text-decoration-line-through text-900 mt-3 mb-0">$300</p>
                             <h1 class="mb-3 text-primary fw-bolder fs-4"><span>$250</span><span class="text-900 fs--1 fw-normal">/Per person</span></h1><span class="badge bg-soft-secondary p-2"><i class="fas fa-tag text-secondary fs--1 me-1"></i><span class="text-secondary fw-normal fs-1">-15%</span></span>
                           </div>
                         </div>
                       </div>
                       <div class="col-md-4 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/dhigu.png" alt="..." />
                           <div class="card-img-overlay ps-0"><span class="badge bg-primary ms-3 me-1 p-2"><i class="fas fa-clock me-1"></i><span>20:04:32:21</span></span><span class="badge bg-secondary p-2"><i class="fas fa-bolt me-1"></i><span>trending</span><i class="fas fa-bolt ms-1"> </i></span></div>
                           <div class="card-body ps-0">
                             <h5 class="fw-bold text-1000 mb-4 text-truncate">Fihalhohi Island Resort: Luxury destination without compromise</h5>
                             <div class="d-flex align-items-center justify-content-start"><span class="text-800 fs--1 me-2"><i class="fas fa-map-marker-alt"></i></span><span class="text-900 me-3">Maldives</span><span class="text-800 fs--1 me-2"><i class="fas fa-calendar"></i></span><span class="text-900">4 days</span></div>
                             <p class="text-decoration-line-through text-900 mt-3 mb-0">$375</p>
                             <h1 class="mb-3 text-primary fw-bolder fs-4"><span>$300</span><span class="text-900 fs--1 fw-normal">/Per person</span></h1><span class="badge bg-soft-secondary p-2"><i class="fas fa-tag text-secondary fs--1 me-1"></i><span class="text-secondary fw-normal fs-1">-15%</span></span>
                           </div>
                         </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-4 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/maldives.png" alt="..." />
                           <div class="card-img-overlay ps-0"><span class="badge bg-primary ms-3 me-1 p-2"><i class="fas fa-clock me-1"></i><span>20:04:32:21</span></span><span class="badge bg-secondary p-2"><i class="fas fa-bolt me-1"></i><span>trending</span><i class="fas fa-bolt ms-1"> </i></span></div>
                           <div class="card-body ps-0">
                             <h5 class="fw-bold text-1000 mb-4 text-truncate">Mermaid Beach Resort: The most joyful way to spend your holiday</h5>
                             <div class="d-flex align-items-center justify-content-start"><span class="text-800 fs--1 me-2"><i class="fas fa-map-marker-alt"></i></span><span class="text-900 me-3">Maldives</span><span class="text-800 fs--1 me-2"><i class="fas fa-calendar"></i></span><span class="text-900">4 days</span></div>
                             <p class="text-decoration-line-through text-900 mt-3 mb-0">$200</p>
                             <h1 class="mb-3 text-primary fw-bolder fs-4"><span>$175</span><span class="text-900 fs--1 fw-normal">/Per person</span></h1><span class="badge bg-soft-secondary p-2"><i class="fas fa-tag text-secondary fs--1 me-1"></i><span class="text-secondary fw-normal fs-1">-15%</span></span>
                           </div>
                         </div>
                       </div>
                       <div class="col-md-4 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/cinnamon.png" alt="..." />
                           <div class="card-img-overlay ps-0"><span class="badge bg-primary ms-3 me-1 p-2"><i class="fas fa-clock me-1"></i><span>20:04:32:21</span></span><span class="badge bg-secondary p-2"><i class="fas fa-bolt me-1"></i><span>trending</span><i class="fas fa-bolt ms-1"> </i></span></div>
                           <div class="card-body ps-0">
                             <h5 class="fw-bold text-1000 mb-4 text-truncate">Bora Bora: Enjoy a romantic cruise tour of at the sunny side of life</h5>
                             <div class="d-flex align-items-center justify-content-start"><span class="text-800 fs--1 me-2"><i class="fas fa-map-marker-alt"></i></span><span class="text-900 me-3">Maldives</span><span class="text-800 fs--1 me-2"><i class="fas fa-calendar"></i></span><span class="text-900">4 days</span></div>
                             <p class="text-decoration-line-through text-900 mt-3 mb-0">$300</p>
                             <h1 class="mb-3 text-primary fw-bolder fs-4"><span>$250</span><span class="text-900 fs--1 fw-normal">/Per person</span></h1><span class="badge bg-soft-secondary p-2"><i class="fas fa-tag text-secondary fs--1 me-1"></i><span class="text-secondary fw-normal fs-1">-15%</span></span>
                           </div>
                         </div>
                       </div>
                       <div class="col-md-4 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/dhigu.png" alt="..." />
                           <div class="card-img-overlay ps-0"><span class="badge bg-primary ms-3 me-1 p-2"><i class="fas fa-clock me-1"></i><span>20:04:32:21</span></span><span class="badge bg-secondary p-2"><i class="fas fa-bolt me-1"></i><span>trending</span><i class="fas fa-bolt ms-1"> </i></span></div>
                           <div class="card-body ps-0">
                             <h5 class="fw-bold text-1000 mb-4 text-truncate">Fihalhohi Island Resort: Luxury destination without compromise</h5>
                             <div class="d-flex align-items-center justify-content-start"><span class="text-800 fs--1 me-2"><i class="fas fa-map-marker-alt"></i></span><span class="text-900 me-3">Maldives</span><span class="text-800 fs--1 me-2"><i class="fas fa-calendar"></i></span><span class="text-900">4 days</span></div>
                             <p class="text-decoration-line-through text-900 mt-3 mb-0">$375</p>
                             <h1 class="mb-3 text-primary fw-bolder fs-4"><span>$300</span><span class="text-900 fs--1 fw-normal">/Per person</span></h1><span class="badge bg-soft-secondary p-2"><i class="fas fa-tag text-secondary fs--1 me-1"></i><span class="text-secondary fw-normal fs-1">-15%</span></span>
                           </div>
                         </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-4 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/maldives.png" alt="..." />
                           <div class="card-img-overlay ps-0"><span class="badge bg-primary ms-3 me-1 p-2"><i class="fas fa-clock me-1"></i><span>20:04:32:21</span></span><span class="badge bg-secondary p-2"><i class="fas fa-bolt me-1"></i><span>trending</span><i class="fas fa-bolt ms-1"> </i></span></div>
                           <div class="card-body ps-0">
                             <h5 class="fw-bold text-1000 mb-4 text-truncate">Mermaid Beach Resort: The most joyful way to spend your holiday</h5>
                             <div class="d-flex align-items-center justify-content-start"><span class="text-800 fs--1 me-2"><i class="fas fa-map-marker-alt"></i></span><span class="text-900 me-3">Maldives</span><span class="text-800 fs--1 me-2"><i class="fas fa-calendar"></i></span><span class="text-900">4 days</span></div>
                             <p class="text-decoration-line-through text-900 mt-3 mb-0">$200</p>
                             <h1 class="mb-3 text-primary fw-bolder fs-4"><span>$175</span><span class="text-900 fs--1 fw-normal">/Per person</span></h1><span class="badge bg-soft-secondary p-2"><i class="fas fa-tag text-secondary fs--1 me-1"></i><span class="text-secondary fw-normal fs-1">-15%</span></span>
                           </div>
                         </div>
                       </div>
                       <div class="col-md-4 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/cinnamon.png" alt="..." />
                           <div class="card-img-overlay ps-0"><span class="badge bg-primary ms-3 me-1 p-2"><i class="fas fa-clock me-1"></i><span>20:04:32:21</span></span><span class="badge bg-secondary p-2"><i class="fas fa-bolt me-1"></i><span>trending</span><i class="fas fa-bolt ms-1"> </i></span></div>
                           <div class="card-body ps-0">
                             <h5 class="fw-bold text-1000 mb-4 text-truncate">Bora Bora: Enjoy a romantic cruise tour of at the sunny side of life</h5>
                             <div class="d-flex align-items-center justify-content-start"><span class="text-800 fs--1 me-2"><i class="fas fa-map-marker-alt"></i></span><span class="text-900 me-3">Maldives</span><span class="text-800 fs--1 me-2"><i class="fas fa-calendar"></i></span><span class="text-900">4 days</span></div>
                             <p class="text-decoration-line-through text-900 mt-3 mb-0">$300</p>
                             <h1 class="mb-3 text-primary fw-bolder fs-4"><span>$250</span><span class="text-900 fs--1 fw-normal">/Per person</span></h1><span class="badge bg-soft-secondary p-2"><i class="fas fa-tag text-secondary fs--1 me-1"></i><span class="text-secondary fw-normal fs-1">-15%</span></span>
                           </div>
                         </div>
                       </div>
                       <div class="col-md-4 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/dhigu.png" alt="..." />
                           <div class="card-img-overlay ps-0"><span class="badge bg-primary ms-3 me-1 p-2"><i class="fas fa-clock me-1"></i><span>20:04:32:21</span></span><span class="badge bg-secondary p-2"><i class="fas fa-bolt me-1"></i><span>trending</span><i class="fas fa-bolt ms-1"> </i></span></div>
                           <div class="card-body ps-0">
                             <h5 class="fw-bold text-1000 mb-4 text-truncate">Fihalhohi Island Resort: Luxury destination without compromise</h5>
                             <div class="d-flex align-items-center justify-content-start"><span class="text-800 fs--1 me-2"><i class="fas fa-map-marker-alt"></i></span><span class="text-900 me-3">Maldives</span><span class="text-800 fs--1 me-2"><i class="fas fa-calendar"></i></span><span class="text-900">4 days</span></div>
                             <p class="text-decoration-line-through text-900 mt-3 mb-0">$375</p>
                             <h1 class="mb-3 text-primary fw-bolder fs-4"><span>$300</span><span class="text-900 fs--1 fw-normal">/Per person</span></h1><span class="badge bg-soft-secondary p-2"><i class="fas fa-tag text-secondary fs--1 me-1"></i><span class="text-secondary fw-normal fs-1">-15%</span></span>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
                   <div class="carousel-item">
                     <div class="row h-100 align-items-center g-2">
                       <div class="col-md-4 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/maldives.png" alt="..." />
                           <div class="card-img-overlay ps-0"><span class="badge bg-primary ms-3 me-1 p-2"><i class="fas fa-clock me-1"></i><span>20:04:32:21</span></span><span class="badge bg-secondary p-2"><i class="fas fa-bolt me-1"></i><span>trending</span><i class="fas fa-bolt ms-1"> </i></span></div>
                           <div class="card-body ps-0">
                             <h5 class="fw-bold text-1000 mb-4 text-truncate">Mermaid Beach Resort: The most joyful way to spend your holiday</h5>
                             <div class="d-flex align-items-center justify-content-start"><span class="text-800 fs--1 me-2"><i class="fas fa-map-marker-alt"></i></span><span class="text-900 me-3">Maldives</span><span class="text-800 fs--1 me-2"><i class="fas fa-calendar"></i></span><span class="text-900">4 days</span></div>
                             <p class="text-decoration-line-through text-900 mt-3 mb-0">$200</p>
                             <h1 class="mb-3 text-primary fw-bolder fs-4"><span>$175</span><span class="text-900 fs--1 fw-normal">/Per person</span></h1><span class="badge bg-soft-secondary p-2"><i class="fas fa-tag text-secondary fs--1 me-1"></i><span class="text-secondary fw-normal fs-1">-15%</span></span>
                           </div>
                         </div>
                       </div>
                       <div class="col-md-4 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/cinnamon.png" alt="..." />
                           <div class="card-img-overlay ps-0"><span class="badge bg-primary ms-3 me-1 p-2"><i class="fas fa-clock me-1"></i><span>20:04:32:21</span></span><span class="badge bg-secondary p-2"><i class="fas fa-bolt me-1"></i><span>trending</span><i class="fas fa-bolt ms-1"> </i></span></div>
                           <div class="card-body ps-0">
                             <h5 class="fw-bold text-1000 mb-4 text-truncate">Bora Bora: Enjoy a romantic cruise tour of at the sunny side of life</h5>
                             <div class="d-flex align-items-center justify-content-start"><span class="text-800 fs--1 me-2"><i class="fas fa-map-marker-alt"></i></span><span class="text-900 me-3">Maldives</span><span class="text-800 fs--1 me-2"><i class="fas fa-calendar"></i></span><span class="text-900">4 days</span></div>
                             <p class="text-decoration-line-through text-900 mt-3 mb-0">$300</p>
                             <h1 class="mb-3 text-primary fw-bolder fs-4"><span>$250</span><span class="text-900 fs--1 fw-normal">/Per person</span></h1><span class="badge bg-soft-secondary p-2"><i class="fas fa-tag text-secondary fs--1 me-1"></i><span class="text-secondary fw-normal fs-1">-15%</span></span>
                           </div>
                         </div>
                       </div>
                       <div class="col-md-4 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/dhigu.png" alt="..." />
                           <div class="card-img-overlay ps-0"><span class="badge bg-primary ms-3 me-1 p-2"><i class="fas fa-clock me-1"></i><span>20:04:32:21</span></span><span class="badge bg-secondary p-2"><i class="fas fa-bolt me-1"></i><span>trending</span><i class="fas fa-bolt ms-1"> </i></span></div>
                           <div class="card-body ps-0">
                             <h5 class="fw-bold text-1000 mb-4 text-truncate">Fihalhohi Island Resort: Luxury destination without compromise</h5>
                             <div class="d-flex align-items-center justify-content-start"><span class="text-800 fs--1 me-2"><i class="fas fa-map-marker-alt"></i></span><span class="text-900 me-3">Maldives</span><span class="text-800 fs--1 me-2"><i class="fas fa-calendar"></i></span><span class="text-900">4 days</span></div>
                             <p class="text-decoration-line-through text-900 mt-3 mb-0">$375</p>
                             <h1 class="mb-3 text-primary fw-bolder fs-4"><span>$300</span><span class="text-900 fs--1 fw-normal">/Per person</span></h1><span class="badge bg-soft-secondary p-2"><i class="fas fa-tag text-secondary fs--1 me-1"></i><span class="text-secondary fw-normal fs-1">-15%</span></span>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
                   <div class="row"><button class="carousel-control-prev" type="button" data-bs-target="#carouselTestimonials" 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="#carouselTestimonials" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next                                    </span></button></div>
                 </div>
                 <div class="row flex-center">
                   <div class="col-auto position-relative z-index-2">
                     <ol class="carousel-indicators me-xxl-7 me-xl-4 me-lg-7">
                       <li class="active" data-bs-target="#carouselTestimonials" data-bs-slide-to="0"></li>
                       <li data-bs-target="#carouselTestimonials" data-bs-slide-to="1"></li>
                       <li data-bs-target="#carouselTestimonials" data-bs-slide-to="2"></li>
                       <li data-bs-target="#carouselTestimonials" data-bs-slide-to="3"></li>
                     </ol>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </section>
       <section class="py-7 overflow-hidden" id="places">
         <div class="container bg-offcanvas-gray-right">
           <div class="row gx-2 mb-2">
             <div class="col-12 col-md-12 col-lg-4">
               <div class="bg-primary-gradient bg-offcanvas h-100">
                 <div class="row g-0 justify-content-end">
                   <div class="col-12">
                     <div class="p-6 py-md-5 px-md-3 py-lg-8 text-light"><img class="mb-5" src="assets/img/icon-location.svg" alt="..." />
                       <h2 class="mb-2 text-light">Popular places</h2>
                       <p>Enjoy the benefits of our packages to the<br class="d-none d-lg-block" />sites where our visitors have more fun. <br class="d-none d-lg-block" />Properly arranged with low costing.</p>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <div class="col-sm-6 col-lg-4">
               <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/agra.png" height="375" alt="..." />
                 <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                   <div class="mt-auto px-4 mb-1">
                     <h3 class="fs-1 fs-md-2 text-white">Agra</h3><span class="text-light fs--1 me-1"><i class="fas fa-gift"></i></span><span class="text-light me-3">10 Packages</span>
                   </div>
                 </div><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-sm-6 col-lg-4">
               <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/kualalumpur.png" height="375" alt="..." />
                 <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                   <div class="mt-auto px-4 mb-1">
                     <h3 class="fs-1 fs-md-2 text-white">Kuala Lumpur</h3><span class="text-light fs--1 me-1"><i class="fas fa-gift"></i></span><span class="text-light me-3">10 Packages</span>
                   </div>
                 </div><a class="stretched-link" href="#!"></a>
               </div>
             </div>
           </div>
           <div class="row g-2">
             <div class="col-sm-6 col-lg-4">
               <div class="row g-2">
                 <div class="col-12">
                   <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/munich.png" height="375" alt="..." />
                     <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                       <div class="mt-auto px-4 mb-1">
                         <h3 class="fs-1 fs-md-2 text-white">Munich</h3><span class="text-light fs--1 me-1"><i class="fas fa-gift"></i></span><span class="text-light me-3">10 Packages</span>
                       </div>
                     </div><a class="stretched-link" href="#!"></a>
                   </div>
                 </div>
                 <div class="col-12">
                   <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/munich.png" height="375" alt="..." />
                     <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                       <div class="mt-auto px-4 mb-1">
                         <h3 class="fs-1 fs-md-2 text-white">Munich</h3><span class="text-light fs--1 me-1"><i class="fas fa-gift"></i></span><span class="text-light me-3">10 Packages</span>
                       </div>
                     </div><a class="stretched-link" href="#!"></a>
                   </div>
                 </div>
               </div>
             </div>
             <div class="col-sm-6 col-lg-4">
               <div class="row g-2">
                 <div class="col-12">
                   <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/paris.png" height="375" alt="..." />
                     <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                       <div class="mt-auto px-4 mb-1">
                         <h3 class="fs-1 fs-md-2 text-white">Paris</h3><span class="text-light fs--1 me-1"><i class="fas fa-gift"></i></span><span class="text-light me-3">10 Packages</span>
                       </div>
                     </div><a class="stretched-link" href="#!"></a>
                   </div>
                 </div>
                 <div class="col-12">
                   <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/vienna.png" height="375" alt="..." />
                     <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                       <div class="mt-auto px-4 mb-1">
                         <h3 class="fs-1 fs-md-2 text-white">Vienna</h3><span class="text-light fs--1 me-1"><i class="fas fa-gift"></i></span><span class="text-light me-3">10 Packages</span>
                       </div>
                     </div><a class="stretched-link" href="#!"></a>
                   </div>
                 </div>
               </div>
             </div>
             <div class="col-sm-12 col-lg-4">
               <div class="bg-secondary-gradient h-100 d-flex align-items-center">
                 <div class="text-light p-4 p-sm-6 p-lg-0 px-xxl-6">
                   <p class="fs-1 px-4 mb-6">Wanna travel to the most thrilling spot on the planet? We've set a bunch of surprises for you.</p><a class="btn btn-lg text-light fs-2" href="#!" role="button">Click to view more<svg class="bi bi-arrow-right-circle ms-5" xmlns="http://www.w3.org/2000/svg" width="55" height="55" fill="currentColor" viewBox="0 0 16 16">
                       <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"></path>
                     </svg></a>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </section>
       <section class="py-0 my-7">
         <div class="bg-holder w-50 bg-left  d-none d-lg-block" style="background-image:url(assets/img/sharee.png);background-position:top;"></div>
         <!--/.bg-holder-->
         <div class="container">
           <div class="row g-0">
             <div class="col-lg-4 order-1 order-lg-0"> </div>
             <div class="col-lg-8 bg-white">
               <div class="carousel slide" id="carouselShare" data-bs-ride="carousel">
                 <div class="carousel-inner">
                   <div class="carousel-item active" data-bs-interval="10000">
                     <div class="row h-100">
                       <div class="col-12"><img class="w-100" src="assets/img/dubai.png" height="600" alt="..." />
                         <div class="pt-5 ps-sm-7">
                           <h4 class="mb-2 text-1000">Share a trip</h4>
                           <h2 class="mb-3 text-primary fs-3 fs-md-6">Dubai</h2>
                           <p class="fw-normal mb-0">Dubai, a city with many faces, is one of the world's most popular tourist destinations. The Burj Khalifa, the world's highest tower, is located here. The futuristic beauty of new buildings is at the heart of Dubai tourism.</p>
                         </div>
                       </div>
                     </div>
                   </div>
                   <div class="carousel-item" data-bs-interval="2000">
                     <div class="row h-100">
                       <div class="col-12"><img class="w-100" src="assets/img/cinnamon.png" height="600" alt="..." />
                         <div class="pt-5 ps-sm-7">
                           <h4 class="mb-2 text-1000">Share a trip</h4>
                           <h2 class="mb-3 text-primary fs-3 fs-md-6">Maldives</h2>
                           <p class="fw-normal mb-0">Dubai, a city with many faces, is one of the world's most popular tourist destinations. The Burj Khalifa, the world's highest tower, is located here. The futuristic beauty of new buildings is at the heart of Dubai tourism.</p>
                         </div>
                       </div>
                     </div>
                   </div>
                   <div class="carousel-item" data-bs-interval="1000">
                     <div class="row h-100">
                       <div class="col-12"><img class="w-100" src="assets/img/dhigu.png" height="600" alt="..." />
                         <div class="pt-5 ps-sm-7">
                           <h4 class="mb-2 text-1000">Share a trip</h4>
                           <h2 class="mb-3 text-primary fs-3 fs-md-6">Maldives</h2>
                           <p class="fw-normal mb-0">Dubai, a city with many faces, is one of the world's most popular tourist destinations. The Burj Khalifa, the world's highest tower, is located here. The futuristic beauty of new buildings is at the heart of Dubai tourism.</p>
                         </div>
                       </div>
                     </div>
                   </div>
                   <div class="carousel-item">
                     <div class="row h-100">
                       <div class="col-12"><img class="w-100" src="assets/img/dubai.png" height="600" alt="..." />
                         <div class="pt-5 ps-sm-7">
                           <h4 class="mb-2 text-1000">Share a trip</h4>
                           <h2 class="mb-3 text-primary fs-3 fs-md-6">Dubai</h2>
                           <p class="fw-normal mb-0">Dubai, a city with many faces, is one of the world's most popular tourist destinations. The Burj Khalifa, the world's highest tower, is located here. The futuristic beauty of new buildings is at the heart of Dubai tourism.</p>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="row ps-sm-7 align-items-end">
                   <div class="col-4 col-sm-6 position-relative z-index-2">
                     <ol class="carousel-indicators me-xxl-7 me-xl-4 me-lg-7">
                       <li class="active" data-bs-target="#carouselShare" data-bs-slide-to="0"></li>
                       <li data-bs-target="#carouselShare" data-bs-slide-to="1"></li>
                       <li data-bs-target="#carouselShare" data-bs-slide-to="2"></li>
                       <li data-bs-target="#carouselShare" data-bs-slide-to="3"></li>
                     </ol>
                   </div>
                   <div class="col-8 col-sm-6 position-relative z-index-2 text-end"><a class="btn btn-lg text-secondary" href="#" role="button">Read More<svg class="bi bi-arrow-right ms-2" xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" viewBox="0 0 16 16">
                         <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path>
                       </svg></a></div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </section>
       <section class="py-7 overflow-hidden">
         <div class="container bg-offcanvas-gray">
           <div class="row gx-2">
             <div class="col-sm-6 col-lg-4 order-1 order-lg-0 gy-2 gy-lg-0">
               <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/sky-the-limit.png" height="375" alt="..." />
                 <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                   <div class="mt-auto px-4">
                     <h3 class="fs-1 fs-md-2 text-white">Sky the Limit</h3>
                     <div class="d-flex align-items-center justify-content-start"><span class="text-light fs--1 me-1"><i class="fas fa-map-marker-alt"></i></span><span class="text-light me-3">Manali</span><span class="text-light fs--1 me-1"><i class="fas fa-calendar"></i></span><span class="text-light">4 days</span></div>
                     <h1 class="my-2 text-light fw-bolder fs-4"><span>$175</span><span class="text-light fs--1 fw-normal">/Per person</span></h1>
                   </div>
                 </div><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-sm-6 col-lg-4 order-2 order-lg-0 gy-2 gy-lg-0">
               <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/beyond-the-blues.png" height="375" alt="..." />
                 <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                   <div class="mt-auto px-4">
                     <h3 class="fs-1 fs-md-2 text-white">Beyond the Blues</h3>
                     <div class="d-flex align-items-center justify-content-start"><span class="text-light fs--1 me-1"><i class="fas fa-map-marker-alt"></i></span><span class="text-light me-3">Maldives</span><span class="text-light fs--1 me-1"><i class="fas fa-calendar"></i></span><span class="text-light">4 days</span></div>
                     <h1 class="my-2 text-light fw-bolder fs-4"><span>$175</span><span class="text-light fs--1 fw-normal">/Per person</span></h1>
                   </div>
                 </div><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-lg-4">
               <div class="bg-primary-gradient h-100 bg-offcanvas-right">
                 <div class="row g-0 h-100">
                   <div class="col-12 h-100">
                     <div class="d-flex flex-column justify-content-center h-100 text-light ps-4 ps-xl-5 py-5 py-lg-0"><img class="mb-5" src="assets/img/icon-gift-box.svg" width="58" alt="..." />
                       <h2 class="mb-2 text-light">popular Packages</h2>
                       <p>Choose the most popular bundles among <br class="d-none d-xl-block" />our current ones.</p>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <div class="col-sm-6 col-lg-4 gy-2">
               <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/green.png" height="375" alt="..." />
                 <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                   <div class="mt-auto px-4">
                     <h3 class="fs-1 fs-md-2 text-white">Within the Gren</h3>
                     <div class="d-flex align-items-center justify-content-start"><span class="text-light fs--1 me-1"><i class="fas fa-map-marker-alt"></i></span><span class="text-light me-3">Phillipines</span><span class="text-light fs--1 me-1"><i class="fas fa-calendar"></i></span><span class="text-light">4 days</span></div>
                     <h1 class="my-2 text-light fw-bolder fs-4"><span>$175</span><span class="text-light fs--1 fw-normal">/Per person</span></h1>
                   </div>
                 </div><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-sm-6 col-lg-4 gy-2">
               <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/queens-gambit.png" height="375" alt="..." />
                 <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                   <div class="mt-auto px-4">
                     <h3 class="fs-1 fs-md-2 text-white">Queens Gambit</h3>
                     <div class="d-flex align-items-center justify-content-start"><span class="text-light fs--1 me-1"><i class="fas fa-map-marker-alt"></i></span><span class="text-light me-3">London</span><span class="text-light fs--1 me-1"><i class="fas fa-calendar"></i></span><span class="text-light">4 days</span></div>
                     <h1 class="my-2 text-light fw-bolder fs-4"><span>$175</span><span class="text-light fs--1 fw-normal">/Per person</span></h1>
                   </div>
                 </div><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-sm-6 col-lg-4 gy-2">
               <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/canals.png" height="375" alt="..." />
                 <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                   <div class="mt-auto px-4">
                     <h3 class="fs-1 fs-md-2 text-white">City of canals</h3>
                     <div class="d-flex align-items-center justify-content-start"><span class="text-light fs--1 me-1"><i class="fas fa-map-marker-alt"></i></span><span class="text-light me-3">Maldives</span><span class="text-light fs--1 me-1"><i class="fas fa-calendar"></i></span><span class="text-light">4 days</span></div>
                     <h1 class="my-2 text-light fw-bolder fs-4"><span>$175</span><span class="text-light fs--1 fw-normal">/Per person</span></h1>
                   </div>
                 </div><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-lg-8 gy-2 order-3 order-lg-0">
               <div class="bg-secondary-gradient h-100">
                 <div class="row h-100">
                   <div class="col-12">
                     <div class="d-flex flex-column flex-center h-100 text-light p-4 p-sm-6 p-md-8 p-lg-0">
                       <p class="fs-1 px-3 mb-5">Most exclusive packages are ready <br class="d-none d-xl-block" />for you. It's only a click away!</p><a class="btn btn-lg text-light fs-1" href="#!" role="button">Click to view more<svg class="bi bi-arrow-right-circle ms-7" xmlns="http://www.w3.org/2000/svg" width="55" height="55" fill="currentColor" viewBox="0 0 16 16">
                           <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"></path>
                         </svg></a>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <div class="col-sm-6 col-lg-4 gy-2">
               <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/mountain-venture.png" height="375" alt="..." />
                 <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                   <div class="mt-auto px-4">
                     <h3 class="fs-1 fs-md-2 text-white">Mountain Venture</h3>
                     <div class="d-flex align-items-center justify-content-start"><span class="text-light fs--1 me-1"><i class="fas fa-map-marker-alt"></i></span><span class="text-light me-3">Maldives</span><span class="text-light fs--1 me-1"><i class="fas fa-calendar"></i></span><span class="text-light">4 days</span></div>
                     <h1 class="my-2 text-light fw-bolder fs-4"><span>$175</span><span class="text-light fs--1 fw-normal">/Per person</span></h1>
                   </div>
                 </div><a class="stretched-link" href="#!"></a>
               </div>
             </div>
           </div>
         </div>
       </section>
 
       <!-- ============================================-->
       <!-- <section> begin ============================-->
       <section class="py-7" id="activities">
         <div class="container">
           <div class="row g-0">
             <div class="col-lg-4 order-1"><img class="w-100 mt-5 mt-lg-0" src="assets/img/bungee-jumping.png" height="750" alt="..." /></div>
             <div class="col-lg-8">
               <div class="carousel slide" id="carouselActivity" data-bs-ride="carousel">
                 <div class="carousel-inner">
                   <div class="carousel-item active" data-bs-interval="10000">
                     <div class="row h-100">
                       <div class="col-12"><img class="w-100" src="assets/img/activity.png" width="383" alt="..." />
                         <div class="py-4">
                           <h4 class="mb-2 text-1000">Participate in activities like</h4>
                           <h2 class="mb-3 text-primary fs-3 fs-md-6">Bungee Jumping</h2>
                           <p class="fw-normal mb-0 pe-lg-9">Bungee jumping, often known as bungy jumping, is a sport in which a person jumps from a considerable height while attached to a long elastic line. Usually, the pad is built on a high structure like a structure or a crane, a bridge across a steep ravine</p>
                         </div>
                       </div>
                     </div>
                   </div>
                   <div class="carousel-item" data-bs-interval="2000">
                     <div class="row h-100">
                       <div class="col-12"><img class="w-100" src="assets/img/activity.png" width="383" alt="..." />
                         <div class="py-4">
                           <h4 class="mb-2 text-1000">Participate in activities like</h4>
                           <h2 class="mb-3 text-primary fs-3 fs-md-6">Bungee Jumping</h2>
                           <p class="fw-normal mb-0 pe-lg-9">Bungee jumping, often known as bungy jumping, is a sport in which a person jumps from a considerable height while attached to a long elastic line. Usually, the pad is built on a high structure like a structure or a crane, a bridge across a steep ravine</p>
                         </div>
                       </div>
                     </div>
                   </div>
                   <div class="carousel-item" data-bs-interval="1000">
                     <div class="row h-100">
                       <div class="col-12"><img class="w-100" src="assets/img/activity.png" width="383" alt="..." />
                         <div class="py-4">
                           <h4 class="mb-2 text-1000">Participate in activities like</h4>
                           <h2 class="mb-3 text-primary fs-3 fs-md-6">Bungee Jumping</h2>
                           <p class="fw-normal mb-0 pe-lg-9">Bungee jumping, often known as bungy jumping, is a sport in which a person jumps from a considerable height while attached to a long elastic line. Usually, the pad is built on a high structure like a structure or a crane, a bridge across a steep ravine</p>
                         </div>
                       </div>
                     </div>
                   </div>
                   <div class="carousel-item">
                     <div class="row h-100">
                       <div class="col-12"><img class="w-100" src="assets/img/activity.png" width="383" alt="..." />
                         <div class="py-4">
                           <h4 class="mb-2 text-1000">Participate in activities like</h4>
                           <h2 class="mb-3 text-primary fs-3 fs-md-6">Bungee Jumping</h2>
                           <p class="fw-normal mb-0 pe-lg-9">Bungee jumping, often known as bungy jumping, is a sport in which a person jumps from a considerable height while attached to a long elastic line. Usually, the pad is built on a high structure like a structure or a crane, a bridge across a steep ravine</p>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="row ps-sm-5 ps-md-0 align-items-end">
                   <div class="col-4 col-sm-6 position-relative z-index-2">
                     <ol class="carousel-indicators me-xxl-7 me-xl-4 me-lg-7">
                       <li class="active" data-bs-target="#carouselShare" data-bs-slide-to="0"></li>
                       <li data-bs-target="#carouselShare" data-bs-slide-to="1"></li>
                       <li data-bs-target="#carouselShare" data-bs-slide-to="2"></li>
                       <li data-bs-target="#carouselShare" data-bs-slide-to="3"></li>
                     </ol>
                   </div>
                   <div class="col-8 col-sm-6 position-relative z-index-2 text-end"><a class="btn btn-lg text-secondary" href="#" role="button">Read More<svg class="bi bi-arrow-right ms-2" xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" viewBox="0 0 16 16">
                         <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path>
                       </svg></a></div>
                 </div>
               </div>
             </div>
           </div>
         </div><!-- end of .container-->
       </section><!-- <section> close ============================-->
       <!-- ============================================-->
 
       <section class="py-7 overflow-hidden" id="hotels">
         <div class="container bg-offcanvas-gray-right">
           <div class="row gx-2">
             <div class="col-sm-6 col-lg-4">
               <div class="bg-primary-gradient h-100 d-flex align-items-end">
                 <div class="row g-0 justify-content-start">
                   <div class="col-xl-9">
                     <div class="p-3 px-lg-4 text-light"><img class="mb-5" src="assets/img/icon-hotel.svg" alt="..." />
                       <h2 class="mb-3 text-light">Discover our best hotels to stay</h2>
                       <p>Bundle tickets to any hotel to save on your whole order. Follow bundle it! method by picking the right hotel accommodation once you add your tickets to your cart.</p>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <div class="col-sm-6 col-lg-4">
               <div class="row g-2">
                 <div class="col-12">
                   <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/moon-house-hotel.png" height="375" alt="..." />
                     <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                       <div class="mt-auto px-4">
                         <h3 class="fs-1 fs-md-2 text-white">Moon House Hotel</h3>
                         <div class="d-flex align-items-center justify-content-start"><span class="text-light fs--1 me-1"><i class="fas fa-map-marker-alt"></i></span><span class="text-light me-md-3">Soi Petchburi 19, Bankok</span></div>
                         <p class="mb-0 mt-3">Starts from </p>
                         <h1 class="mb-2 text-light fw-bolder fs-2 fs-md-4"><span>$175</span><span class="text-light fs--1 fw-normal">/Per person</span></h1>
                       </div>
                     </div><a class="stretched-link" href="#!"> </a>
                   </div>
                 </div>
                 <div class="col-12">
                   <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/blue-mosque-hotel.png" height="375" alt="..." />
                     <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                       <div class="mt-auto px-4">
                         <h3 class="fs-1 fs-md-2 text-white">Blue Mosque Hotel</h3>
                         <div class="d-flex align-items-center justify-content-start"><span class="text-light fs--1 me-1"><i class="fas fa-map-marker-alt"></i></span><span class="text-light me-md-3">Dismesi Sokak, Istanbul</span></div>
                         <p class="mb-0 mt-3">Starts from </p>
                         <h1 class="mb-2 text-light fw-bolder fs-2 fs-md-4"><span>$175</span><span class="text-light fs--1 fw-normal">/Per person</span></h1>
                       </div>
                     </div><a class="stretched-link" href="#!"> </a>
                   </div>
                 </div>
               </div>
             </div>
             <div class="col-sm-6 col-lg-4">
               <div class="row g-2">
                 <div class="col-12">
                   <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/hotel-royal.png" height="375" alt="..." />
                     <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                       <div class="mt-auto px-4">
                         <h3 class="fs-1 fs-md-2 text-white">Hotel Royal</h3>
                         <div class="d-flex align-items-center justify-content-start"><span class="text-light fs--1 me-1"><i class="fas fa-map-marker-alt"></i></span><span class="text-light me-md-3">Kedewatan, Bali</span></div>
                         <p class="mb-0 mt-3">Starts from </p>
                         <h1 class="mb-2 text-light fw-bolder fs-2 fs-md-4"><span>$175</span><span class="text-light fs--1 fw-normal">/Per person</span></h1>
                       </div>
                     </div><a class="stretched-link" href="#!"> </a>
                   </div>
                 </div>
                 <div class="col-12">
                   <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/boutique-hotel.png" height="375" alt="..." />
                     <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                       <div class="mt-auto px-4">
                         <h3 class="fs-1 fs-md-2 text-white">The Rin Boutique Hotel</h3>
                         <div class="d-flex align-items-center justify-content-start"><span class="text-light fs--1 me-1"><i class="fas fa-map-marker-alt"></i></span><span class="text-light me-md-3">Bang Lamung, Pattaya</span></div>
                         <p class="mb-0 mt-3">Starts from </p>
                         <h1 class="mb-2 text-light fw-bolder fs-2 fs-md-4"><span>$175</span><span class="text-light fs--1 fw-normal">/Per person</span></h1>
                       </div>
                     </div><a class="stretched-link" href="#!"> </a>
                   </div>
                 </div>
               </div>
             </div>
             <div class="col-sm-6 col-lg-8 gy-2">
               <div class="bg-secondary-gradient h-100 d-flex align-items-center">
                 <div class="text-light py-6">
                   <div class="row">
                     <div class="col-12 col-xl-6">
                       <p class="fs-1 px-5">In our offers, we have more hotels. Just to make your stay easy for your best interests.</p>
                     </div>
                     <div class="col-12 col-xl-6 text-end"><a class="btn btn-lg text-light fs-1 fs-sm--1 fs-md-1 px-5" href="#!" role="button">Click to view more<svg class="bi bi-arrow-right-circle ms-3" xmlns="http://www.w3.org/2000/svg" width="55" height="55" fill="currentColor" viewBox="0 0 16 16">
                           <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"></path>
                         </svg></a></div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </section>
 
       <!-- ============================================-->
       <!-- <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/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/author-1.png" width="60" alt="..." />
                     <div class="d-flex flex-1 justify-content-around"> <span class="text-900 text-center"><i class="fas fa-heart text-primary"></i><span class="text-900 ms-2">355</span></span><span class="text-900 text-center"><i class="fas fa-eye text-primary"></i><span class="text-900 ms-2">234</span></span><span class="text-900 text-center"><i class="fas fa-share text-primary"></i><span class="text-900 ms-2">14</span></span></div>
                   </div>
                   <h5 class="text-900 mt-3">John Oliver. <span class="fw-normal">5 mins Read. </span></h5>
                   <h3 class="fw-bold text-1000 mt-5 text-truncate">15 Best Day Trips from Portland Oregon</h3>
                   <p class="text-900 mt-3">The structure of the trip blog is only a white canvas to highlight the atmospheric and immersive.</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/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/author-2.png" width="60" alt="..." />
                     <div class="d-flex flex-1 justify-content-around"> <span class="text-900 text-center"><i class="fas fa-heart text-primary"></i><span class="text-900 ms-2">35</span></span><span class="text-900 text-center"><i class="fas fa-eye text-primary"></i><span class="text-900 ms-2">23</span></span><span class="text-900 text-center"><i class="fas fa-share text-primary"></i><span class="text-900 ms-2">14</span></span></div>
                   </div>
                   <h5 class="text-900 mt-3">Haley Wilson . <span class="fw-normal">5 mins Read. </span></h5>
                   <h3 class="fw-bold text-1000 mt-5 text-truncate">Famous Roads for Great Drives in California</h3>
                   <p class="text-900 mt-3">I first discovered about famous road in california when I flew with KLM to Europe in 2018.</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/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/author-3.png" width="60" alt="..." />
                     <div class="d-flex flex-1 justify-content-around"> <span class="text-900 text-center"><i class="fas fa-heart text-primary"></i><span class="text-900 ms-2">35</span></span><span class="text-900 text-center"><i class="fas fa-eye text-primary"></i><span class="text-900 ms-2">23</span></span><span class="text-900 text-center"><i class="fas fa-share text-primary"></i><span class="text-900 ms-2">14</span></span></div>
                   </div>
                   <h5 class="text-900 mt-3">Jeff Baley. <span class="fw-normal">5 mins Read. </span></h5>
                   <h3 class="fw-bold text-1000 mt-5 text-truncate">7 of the Best Train Trips in Canada</h3>
                   <p class="text-900 mt-3">On this very stunning rail ride from Vancouver to Calgary, take in the stunning vistas andspectacular.</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> begin ============================-->
       <section class="py-0" id="flights">
         <div class="container-fluid">
           <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">Flights to Popular Places at the Best Costs</h5>
             </div>
           </div>
           <div class="row g-0 flex-center">
             <div class="col-12 col-sm-4 col-md-3 col-lg-4 col-xl-2">
               <div class="d-flex flex-column justify-content-center px-3" style="background-color:#240D8C; min-height:230px; ">
                 <h5 class="text-light">Dhaka - Chittagong</h5>
                 <h6 class="text-light fw-normal fs-0">From $100</h6><i class="fas fa-arrow-right text-light mt-4"></i><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-sm-4 col-md-3 col-lg-4 col-xl-2">
               <div class="d-flex flex-column justify-content-center px-3" style="background-color:#3011BB; min-height:230px;">
                 <h5 class="text-light">Dhaka - Sylhet</h5>
                 <h6 class="text-light fw-normal fs-0">From $100</h6><i class="fas fa-arrow-right text-light mt-4"></i><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-sm-4 col-md-3 col-lg-4 col-xl-2">
               <div class="d-flex flex-column justify-content-center px-3" style="background-color:#4914DC; min-height:230px;">
                 <h5 class="text-light">Dhaka - Chittagong</h5>
                 <h6 class="text-light fw-normal fs-0">From $100</h6><i class="fas fa-arrow-right text-light mt-4"></i><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-sm-4 col-md-3 col-lg-4 col-xl-2">
               <div class="d-flex flex-column justify-content-center px-3" style="background-color:#6213D2; min-height:230px;">
                 <h5 class="text-light">Dhaka - Chittagong</h5>
                 <h6 class="text-light fw-normal fs-0">From $100</h6><i class="fas fa-arrow-right text-light mt-4"></i><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-sm-4 col-md-3 col-lg-4 col-xl-2">
               <div class="d-flex flex-column justify-content-center px-3" style="background-color:#4611BC; min-height:230px;">
                 <h5 class="text-light">Dhaka - Coxs Bazar</h5>
                 <h6 class="text-light fw-normal fs-0">From $100</h6><i class="fas fa-arrow-right text-light mt-4"></i><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-sm-4 col-md-3 col-lg-4 col-xl-2">
               <div class="d-flex flex-column justify-content-center px-3" style="background-color:#7013CE; min-height:230px;">
                 <h5 class="text-light">Dhaka - Sylhet</h5>
                 <h6 class="text-light fw-normal fs-0">From $100</h6><i class="fas fa-arrow-right text-light mt-4"></i><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-sm-4 col-md-3 col-lg-4 col-xl-2">
               <div class="d-flex flex-column justify-content-center px-3" style="background-color:#4611BC; min-height:230px;">
                 <h5 class="text-light">Dhaka - Coxs Bazar</h5>
                 <h6 class="text-light fw-normal fs-0">From $100</h6><i class="fas fa-arrow-right text-light mt-4"></i><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-sm-4 col-md-3 col-lg-4 col-xl-2">
               <div class="d-flex flex-column justify-content-center px-3" style="background-color:#6213D2; min-height:230px;">
                 <h5 class="text-light">Dhaka - Chittagong</h5>
                 <h6 class="text-light fw-normal fs-0">From $100</h6><i class="fas fa-arrow-right text-light mt-4"></i><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-sm-4 col-md-3 col-lg-4 col-xl-2">
               <div class="d-flex flex-column justify-content-center px-3" style="background-color:#240D8C; min-height:230px;">
                 <h5 class="text-light">Dhaka - Coxs Bazar</h5>
                 <h6 class="text-light fw-normal fs-0">From $100</h6><i class="fas fa-arrow-right text-light mt-4"></i><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-sm-4 col-md-3 col-lg-4 col-xl-2">
               <div class="d-flex flex-column justify-content-center px-3" style="background-color:#4914DC; min-height:230px;">
                 <h5 class="text-light">Dhaka - Sylhet</h5>
                 <h6 class="text-light fw-normal fs-0">From $100</h6><i class="fas fa-arrow-right text-light mt-4"></i><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-sm-4 col-md-3 col-lg-4 col-xl-2">
               <div class="d-flex flex-column justify-content-center px-3" style="background-color:#3011BB; min-height:230px;">
                 <h5 class="text-light">Dhaka - Chittagong</h5>
                 <h6 class="text-light fw-normal fs-0">From $100</h6><i class="fas fa-arrow-right text-light mt-4"></i><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-sm-4 col-md-3 col-lg-4 col-xl-2">
               <div class="d-flex flex-column justify-content-center px-3" style="background-color:#4611BC; min-height:230px;">
                 <h5 class="text-light">Dhaka - Coxs Bazar</h5>
                 <h6 class="text-light fw-normal fs-0">From $100</h6><i class="fas fa-arrow-right text-light mt-4"></i><a class="stretched-link" href="#!"></a>
               </div>
             </div>
           </div>
         </div><!-- end of .container-->
       </section><!-- <section> close ============================-->
       <!-- ============================================-->
 
       <section>
         <div class="bg-holder" style="background-image:url(assets/img/cta-bg.png);background-position:center;background-size:cover;"></div>
         <!--/.bg-holder-->
         <div class="container">
           <div class="row flex-center">
             <div class="col-lg-6 text-center"><img class="mb-5 mb-lg-0" src="assets/img/cta-mobile.png" alt="..." /></div>
             <div class="col-lg-6 text-center">
               <h1 class="fs-6 pe-xxl-10">Get the app</h1>
               <div class="mt-4 pe-xxl-10"><a href="https://play.google.com/store/apps" target="_blank"><img class="me-3" src="assets/img/google-play.png" width="170" alt="..." /></a><a href="https://www.apple.com/app-store/" target="_blank"> <img src="assets/img/app-store.png" width="170" alt="..." /></a></div>
             </div>
           </div>
         </div>
       </section>
 
       <!-- ============================================-->
       <!-- <section> begin ============================-->
       <section class="py-0 overflow-hidden">
         <div class="container">
           <div class="row">
             <div class="col-6 col-sm-4 col-lg-6">
               <div class="py-7"><img class="d-inline-block" src="assets/img/logo.png" width="50" alt="logo" /><span class="fw-bold fs-4 text-primary ms-2">therichpost</span>
                 <ul class="list-unstyled mt-4">
                   <li class="mb-2"><a class="text-800 fw-bold text-decoration-none" href="#!">News</a></li>
                   <li class="mb-2"><a class="text-800 fw-bold text-decoration-none" href="#!">Terms &amp; Conditions</a></li>
                   <li class="mb-2"><a class="text-800 fw-bold text-decoration-none" href="#!">Privacy</a></li>
                   <li class="mb-2"><a class="text-800 fw-bold text-decoration-none" href="#!">About Us</a></li>
                   <li class="mb-2"><a class="text-800 fw-bold text-decoration-none" href="#!">FAQs</a></li>
                 </ul>
               </div>
             </div>
             <div class="col-6 col-8 col-lg-6 bg-primary-gradient bg-offcanvas-right">
               <div class="p-3 py-7 p-md-7">
                 <p class="text-light"><i class="fas fa-phone-alt me-3"></i><span class="text-light">+09090909090909</span></p>
                 <p class="text-light"><i class="fas fa-envelope me-3"></i><span class="text-light">something@gmail.com</span></p>
                 <p class="text-light"><i class="fas fa-map-marker-alt me-3"></i><span class="text-light lh-lg">Ludhiana, Punjab<br/>India</span></p>
                 <div class="mt-6"><a href="#!"> <img class="me-3" src="assets/img/facebook.svg" alt="..." /></a><a href="#!"> <img class="me-3" src="assets/img/twitter.svg" alt="..." /></a><a href="#!"> <img class="me-3" src="assets/img/instagram.svg" alt="..." /></a></div>
                 <p class="mt-3 text-light 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-light" href="https://therichpost.com/" target="_blank">therichpost </a></p>
               </div>
             </div>
           </div>
         </div><!-- end of .container-->
       </section><!-- <section> close ============================-->
       <!-- ============================================-->
 
     </main><!-- ===============================================-->
     <!--    End of Main Content-->
     <!-- ===============================================-->
</template>

r --> </template>

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

September 9, 2021

How to make travel website in angular 12?

Hello friends, welcome back to my blog. Today this blog post I will tell you, How to make travel website in angular 12?

In this post, guys we will cover below things:

Bootstrap 5 Angular 16 Free Website Creation.
Angular 12 Bootstrap 5 Responsive Toggle Navbar.
Bootstrap 5 Sticky Navbar 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 landing 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/travelassets.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:

<!-- ===============================================-->
   <!--    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" href="#"><img class="d-inline-block" src="assets/img/logo.png" width="50" alt="logo" /><span class="fw-bold text-primary ms-2">therichpost</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 mx-auto pt-2 pt-lg-0 font-base">
               <li class="nav-item px-2"><a class="nav-link fw-medium active" aria-current="page" href="#destinations"><span class="nav-link-icon text-800 me-1 fas fa-map-marker-alt"></span><span class="nav-link-text">Locations </span></a></li>
               <li class="nav-item px-2"><a class="nav-link" href="#flights"> <span class="nav-link-icon text-800 me-1 fas fa-plane"></span><span class="nav-link-text">Flights</span></a></li>
               <li class="nav-item px-2"><a class="nav-link" href="#hotels"> <span class="nav-link-icon text-800 me-1 fas fa-hotel"></span><span class="nav-link-text">Hotels</span></a></li>
               <li class="nav-item px-2"><a class="nav-link" href="#activities"><span class="nav-link-icon text-800 me-1 fas fa-bolt"></span><span class="nav-link-text">Activities</span></a></li>
             </ul>
             <form><button class="btn text-800 order-1 order-lg-0 me-2" type="button">Support</button><button class="btn btn-therichpost-outline order-0" type="submit"><span class="text-primary">Sign in</span></button></form>
           </div>
         </div>
       </nav>
       <section class="mt-7 py-0">
         <div class="bg-holder w-50 bg-right d-none d-lg-block" style="background-image:url(assets/img/hero-section-1.png);"></div>
         <!--/.bg-holder-->
         <div class="container">
           <div class="row">
             <div class="col-lg-6 py-5 py-xl-5 py-xxl-7">
               <h1 class="display-3 text-1000 fw-normal">Let’s make a tour</h1>
               <h1 class="display-3 text-primary fw-bold">Discover the beauty</h1>
               <div class="pt-5">
                 <nav>
                   <div class="nav nav-tabs therichpost-tabs" id="nav-tab" role="tablist"><button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true"><i class="fas fa-map-marker-alt"></i></button><button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false"> <i class="fas fa-plane"></i></button><button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false"> <i class="fas fa-hotel"></i></button></div>
                   <div class="tab-content" id="nav-tabContent">
                     <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                       <form class="row g-4 mt-5">
                         <div class="col-sm-6 col-md-6 col-xl-5">
                           <div class="input-group-icon"><label class="form-label visually-hidden" for="inputAddress1">Address 1</label><input class="form-control input-box form-therichpost-control" id="inputAddress1" type="text" placeholder="From where" /><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-map-marker-alt"></i></span></div>
                         </div>
                         <div class="col-sm-6 col-md-6 col-xl-5">
                           <div class="input-group-icon"><label class="form-label visually-hidden" for="inputAddress2">Address 2</label><input class="form-control input-box form-therichpost-control" id="inputAddress2" type="text" placeholder="To where" /><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-map-marker-alt"> </i></span></div>
                         </div>
                         <div class="col-sm-6 col-md-6 col-xl-5">
                           <div class="input-group-icon"><input class="form-control input-box form-therichpost-control" id="inputdateOne" type="date" /><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-calendar"></i></span></div>
                         </div>
                         <div class="col-sm-6 col-md-6 col-xl-5">
                           <div class="input-group-icon"><input class="form-control input-box form-therichpost-control" id="inputDateTwo" type="date" /><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-calendar"></i></span></div>
                         </div>
                         <div class="col-sm-6 col-md-6 col-xl-5">
                           <div class="input-group-icon"><label class="form-label visually-hidden" for="inputPersonOne">Person</label><select class="form-select form-therichpost-select input-box" id="inputPersonOne">
                               <option selected="selected">2 Adults</option>
                               <option>2 Adults 1 children</option>
                               <option>2 Adults 2 children</option>
                             </select><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-user"> </i></span></div>
                         </div>
                         <div class="col-12 col-xl-10 col-lg-12 d-grid mt-6"><button class="btn btn-secondary" type="submit">Search Packages</button></div>
                       </form>
                     </div>
                     <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                       <form class="row g-4 mt-5">
                         <div class="col-6">
                           <div class="input-group-icon"><label class="form-label visually-hidden" for="inputAddressThree">Address 1</label><input class="form-control input-box form-therichpost-control" id="inputAddressThree" type="text" placeholder="From where" /><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-map-marker-alt"></i></span></div>
                         </div>
                         <div class="col-6">
                           <div class="input-group-icon"><label class="form-label visually-hidden" for="inputAddressFour">Address 2</label><input class="form-control input-box form-therichpost-control" id="inputAddressFour" type="text" placeholder="To where" /><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-map-marker-alt"> </i></span></div>
                         </div>
                         <div class="col-6">
                           <div class="input-group-icon"><input class="form-control input-box form-therichpost-control" id="inputDateThree" type="date" /><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-calendar"></i></span></div>
                         </div>
                         <div class="col-6">
                           <div class="input-group-icon"><input class="form-control input-box form-therichpost-control" id="inputDateFour" type="date" /><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-calendar"></i></span></div>
                         </div>
                         <div class="col-6">
                           <div class="input-group-icon"><label class="form-label visually-hidden" for="inputPeopleTwo">People</label><select class="form-select form-therichpost-select input-box" id="inputPeopleTwo">
                               <option selected="selected">2 Adults</option>
                               <option>2 Adults 1 children</option>
                               <option>2 Adults 2 children</option>
                             </select><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-user"> </i></span></div>
                         </div>
                         <div class="col-12 d-grid mt-6"><button class="btn btn-secondary" type="submit">Search Packages</button></div>
                       </form>
                     </div>
                     <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
                       <form class="row g-4 mt-5">
                         <div class="col-6">
                           <div class="input-group-icon"><input class="form-control input-box form-therichpost-control" id="inputDateFive" type="date" /><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-calendar"></i></span></div>
                         </div>
                         <div class="col-6">
                           <div class="input-group-icon"><input class="form-control input-box form-therichpost-control" id="inputDateSix" type="date" /><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-calendar"></i></span></div>
                         </div>
                         <div class="col-6">
                           <div class="input-group-icon"><label class="form-label visually-hidden" for="inputPeopleThree">Person</label><select class="form-select form-therichpost-select input-box" id="inputPeopleThree">
                               <option selected="selected">2 Adults</option>
                               <option>2 Adults 1 children</option>
                               <option>2 Adults 2 children</option>
                             </select><span class="nav-link-icon text-800 fs--1 input-box-icon"><i class="fas fa-user"> </i></span></div>
                         </div>
                         <div class="col-12 d-grid mt-6"><button class="btn btn-secondary" type="submit">Search Packages</button></div>
                       </form>
                     </div>
                   </div>
                 </nav>
               </div>
             </div>
           </div>
         </div>
       </section>
 
       <!-- ============================================-->
       <!-- <section> begin ============================-->
       <section class="py-0 overflow-hidden">
         <div class="container-fluid">
           <div class="row">
             <div class="col-lg-6 px-0"><img class="img-fluid order-md-0 mb-4 h-100 fit-cover" src="assets/img/hero-section-2.png" alt="..." /></div>
             <div class="col-lg-6 px-0 bg-primary-gradient bg-offcanvas-right">
               <div class="mx-6 mx-xl-8 my-8">
                 <div class="align-items-center d-block d-flex mb-5"><img class="img-fluid me-3 me-md-2 me-lg-4" src="assets/img/locations.png" alt="..." />
                   <div class="flex-1 align-items-center pt-2">
                     <h5 class="fw-bold text-light">Visit the greatest places</h5>
                   </div>
                 </div>
                 <div class="align-items-center d-block d-flex mb-5"><img class="img-fluid me-3 me-md-2 me-lg-4" src="assets/img/schedule.png" alt="..." />
                   <div class="flex-1 align-items-center pt-2">
                     <h5 class="fw-bold text-light">Make your own plans.</h5>
                   </div>
                 </div>
                 <div class="align-items-center d-block d-flex mb-5"><img class="img-fluid me-3 me-md-2 me-lg-4" src="assets/img/save.png" alt="..." />
                   <div class="flex-1 align-items-center pt-2">
                     <h5 class="fw-bold text-light">Save 50% on your next trip</h5>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div><!-- end of .container-->
       </section><!-- <section> close ============================-->
       <!-- ============================================-->
 
       <section id="testimonial">
         <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">Flash Deals</h5>
             </div>
             <div class="col-12">
               <div class="carousel slide" id="carouselTestimonials" 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-md-4 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/maldives.png" alt="..." />
                           <div class="card-img-overlay ps-0"><span class="badge bg-primary ms-3 me-1 p-2"><i class="fas fa-clock me-1"></i><span>20:04:32:21</span></span><span class="badge bg-secondary p-2"><i class="fas fa-bolt me-1"></i><span>trending</span><i class="fas fa-bolt ms-1"> </i></span></div>
                           <div class="card-body ps-0">
                             <h5 class="fw-bold text-1000 mb-4 text-truncate">Mermaid Beach Resort: The most joyful way to spend your holiday</h5>
                             <div class="d-flex align-items-center justify-content-start"><span class="text-800 fs--1 me-2"><i class="fas fa-map-marker-alt"></i></span><span class="text-900 me-3">Maldives</span><span class="text-800 fs--1 me-2"><i class="fas fa-calendar"></i></span><span class="text-900">4 days</span></div>
                             <p class="text-decoration-line-through text-900 mt-3 mb-0">$200</p>
                             <h1 class="mb-3 text-primary fw-bolder fs-4"><span>$175</span><span class="text-900 fs--1 fw-normal">/Per person</span></h1><span class="badge bg-soft-secondary p-2"><i class="fas fa-tag text-secondary fs--1 me-1"></i><span class="text-secondary fw-normal fs-1">-15%</span></span>
                           </div>
                         </div>
                       </div>
                       <div class="col-md-4 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/cinnamon.png" alt="..." />
                           <div class="card-img-overlay ps-0"><span class="badge bg-primary ms-3 me-1 p-2"><i class="fas fa-clock me-1"></i><span>20:04:32:21</span></span><span class="badge bg-secondary p-2"><i class="fas fa-bolt me-1"></i><span>trending</span><i class="fas fa-bolt ms-1"> </i></span></div>
                           <div class="card-body ps-0">
                             <h5 class="fw-bold text-1000 mb-4 text-truncate">Bora Bora: Enjoy a romantic cruise tour of at the sunny side of life</h5>
                             <div class="d-flex align-items-center justify-content-start"><span class="text-800 fs--1 me-2"><i class="fas fa-map-marker-alt"></i></span><span class="text-900 me-3">Maldives</span><span class="text-800 fs--1 me-2"><i class="fas fa-calendar"></i></span><span class="text-900">4 days</span></div>
                             <p class="text-decoration-line-through text-900 mt-3 mb-0">$300</p>
                             <h1 class="mb-3 text-primary fw-bolder fs-4"><span>$250</span><span class="text-900 fs--1 fw-normal">/Per person</span></h1><span class="badge bg-soft-secondary p-2"><i class="fas fa-tag text-secondary fs--1 me-1"></i><span class="text-secondary fw-normal fs-1">-15%</span></span>
                           </div>
                         </div>
                       </div>
                       <div class="col-md-4 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/dhigu.png" alt="..." />
                           <div class="card-img-overlay ps-0"><span class="badge bg-primary ms-3 me-1 p-2"><i class="fas fa-clock me-1"></i><span>20:04:32:21</span></span><span class="badge bg-secondary p-2"><i class="fas fa-bolt me-1"></i><span>trending</span><i class="fas fa-bolt ms-1"> </i></span></div>
                           <div class="card-body ps-0">
                             <h5 class="fw-bold text-1000 mb-4 text-truncate">Fihalhohi Island Resort: Luxury destination without compromise</h5>
                             <div class="d-flex align-items-center justify-content-start"><span class="text-800 fs--1 me-2"><i class="fas fa-map-marker-alt"></i></span><span class="text-900 me-3">Maldives</span><span class="text-800 fs--1 me-2"><i class="fas fa-calendar"></i></span><span class="text-900">4 days</span></div>
                             <p class="text-decoration-line-through text-900 mt-3 mb-0">$375</p>
                             <h1 class="mb-3 text-primary fw-bolder fs-4"><span>$300</span><span class="text-900 fs--1 fw-normal">/Per person</span></h1><span class="badge bg-soft-secondary p-2"><i class="fas fa-tag text-secondary fs--1 me-1"></i><span class="text-secondary fw-normal fs-1">-15%</span></span>
                           </div>
                         </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-4 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/maldives.png" alt="..." />
                           <div class="card-img-overlay ps-0"><span class="badge bg-primary ms-3 me-1 p-2"><i class="fas fa-clock me-1"></i><span>20:04:32:21</span></span><span class="badge bg-secondary p-2"><i class="fas fa-bolt me-1"></i><span>trending</span><i class="fas fa-bolt ms-1"> </i></span></div>
                           <div class="card-body ps-0">
                             <h5 class="fw-bold text-1000 mb-4 text-truncate">Mermaid Beach Resort: The most joyful way to spend your holiday</h5>
                             <div class="d-flex align-items-center justify-content-start"><span class="text-800 fs--1 me-2"><i class="fas fa-map-marker-alt"></i></span><span class="text-900 me-3">Maldives</span><span class="text-800 fs--1 me-2"><i class="fas fa-calendar"></i></span><span class="text-900">4 days</span></div>
                             <p class="text-decoration-line-through text-900 mt-3 mb-0">$200</p>
                             <h1 class="mb-3 text-primary fw-bolder fs-4"><span>$175</span><span class="text-900 fs--1 fw-normal">/Per person</span></h1><span class="badge bg-soft-secondary p-2"><i class="fas fa-tag text-secondary fs--1 me-1"></i><span class="text-secondary fw-normal fs-1">-15%</span></span>
                           </div>
                         </div>
                       </div>
                       <div class="col-md-4 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/cinnamon.png" alt="..." />
                           <div class="card-img-overlay ps-0"><span class="badge bg-primary ms-3 me-1 p-2"><i class="fas fa-clock me-1"></i><span>20:04:32:21</span></span><span class="badge bg-secondary p-2"><i class="fas fa-bolt me-1"></i><span>trending</span><i class="fas fa-bolt ms-1"> </i></span></div>
                           <div class="card-body ps-0">
                             <h5 class="fw-bold text-1000 mb-4 text-truncate">Bora Bora: Enjoy a romantic cruise tour of at the sunny side of life</h5>
                             <div class="d-flex align-items-center justify-content-start"><span class="text-800 fs--1 me-2"><i class="fas fa-map-marker-alt"></i></span><span class="text-900 me-3">Maldives</span><span class="text-800 fs--1 me-2"><i class="fas fa-calendar"></i></span><span class="text-900">4 days</span></div>
                             <p class="text-decoration-line-through text-900 mt-3 mb-0">$300</p>
                             <h1 class="mb-3 text-primary fw-bolder fs-4"><span>$250</span><span class="text-900 fs--1 fw-normal">/Per person</span></h1><span class="badge bg-soft-secondary p-2"><i class="fas fa-tag text-secondary fs--1 me-1"></i><span class="text-secondary fw-normal fs-1">-15%</span></span>
                           </div>
                         </div>
                       </div>
                       <div class="col-md-4 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/dhigu.png" alt="..." />
                           <div class="card-img-overlay ps-0"><span class="badge bg-primary ms-3 me-1 p-2"><i class="fas fa-clock me-1"></i><span>20:04:32:21</span></span><span class="badge bg-secondary p-2"><i class="fas fa-bolt me-1"></i><span>trending</span><i class="fas fa-bolt ms-1"> </i></span></div>
                           <div class="card-body ps-0">
                             <h5 class="fw-bold text-1000 mb-4 text-truncate">Fihalhohi Island Resort: Luxury destination without compromise</h5>
                             <div class="d-flex align-items-center justify-content-start"><span class="text-800 fs--1 me-2"><i class="fas fa-map-marker-alt"></i></span><span class="text-900 me-3">Maldives</span><span class="text-800 fs--1 me-2"><i class="fas fa-calendar"></i></span><span class="text-900">4 days</span></div>
                             <p class="text-decoration-line-through text-900 mt-3 mb-0">$375</p>
                             <h1 class="mb-3 text-primary fw-bolder fs-4"><span>$300</span><span class="text-900 fs--1 fw-normal">/Per person</span></h1><span class="badge bg-soft-secondary p-2"><i class="fas fa-tag text-secondary fs--1 me-1"></i><span class="text-secondary fw-normal fs-1">-15%</span></span>
                           </div>
                         </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-4 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/maldives.png" alt="..." />
                           <div class="card-img-overlay ps-0"><span class="badge bg-primary ms-3 me-1 p-2"><i class="fas fa-clock me-1"></i><span>20:04:32:21</span></span><span class="badge bg-secondary p-2"><i class="fas fa-bolt me-1"></i><span>trending</span><i class="fas fa-bolt ms-1"> </i></span></div>
                           <div class="card-body ps-0">
                             <h5 class="fw-bold text-1000 mb-4 text-truncate">Mermaid Beach Resort: The most joyful way to spend your holiday</h5>
                             <div class="d-flex align-items-center justify-content-start"><span class="text-800 fs--1 me-2"><i class="fas fa-map-marker-alt"></i></span><span class="text-900 me-3">Maldives</span><span class="text-800 fs--1 me-2"><i class="fas fa-calendar"></i></span><span class="text-900">4 days</span></div>
                             <p class="text-decoration-line-through text-900 mt-3 mb-0">$200</p>
                             <h1 class="mb-3 text-primary fw-bolder fs-4"><span>$175</span><span class="text-900 fs--1 fw-normal">/Per person</span></h1><span class="badge bg-soft-secondary p-2"><i class="fas fa-tag text-secondary fs--1 me-1"></i><span class="text-secondary fw-normal fs-1">-15%</span></span>
                           </div>
                         </div>
                       </div>
                       <div class="col-md-4 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/cinnamon.png" alt="..." />
                           <div class="card-img-overlay ps-0"><span class="badge bg-primary ms-3 me-1 p-2"><i class="fas fa-clock me-1"></i><span>20:04:32:21</span></span><span class="badge bg-secondary p-2"><i class="fas fa-bolt me-1"></i><span>trending</span><i class="fas fa-bolt ms-1"> </i></span></div>
                           <div class="card-body ps-0">
                             <h5 class="fw-bold text-1000 mb-4 text-truncate">Bora Bora: Enjoy a romantic cruise tour of at the sunny side of life</h5>
                             <div class="d-flex align-items-center justify-content-start"><span class="text-800 fs--1 me-2"><i class="fas fa-map-marker-alt"></i></span><span class="text-900 me-3">Maldives</span><span class="text-800 fs--1 me-2"><i class="fas fa-calendar"></i></span><span class="text-900">4 days</span></div>
                             <p class="text-decoration-line-through text-900 mt-3 mb-0">$300</p>
                             <h1 class="mb-3 text-primary fw-bolder fs-4"><span>$250</span><span class="text-900 fs--1 fw-normal">/Per person</span></h1><span class="badge bg-soft-secondary p-2"><i class="fas fa-tag text-secondary fs--1 me-1"></i><span class="text-secondary fw-normal fs-1">-15%</span></span>
                           </div>
                         </div>
                       </div>
                       <div class="col-md-4 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/dhigu.png" alt="..." />
                           <div class="card-img-overlay ps-0"><span class="badge bg-primary ms-3 me-1 p-2"><i class="fas fa-clock me-1"></i><span>20:04:32:21</span></span><span class="badge bg-secondary p-2"><i class="fas fa-bolt me-1"></i><span>trending</span><i class="fas fa-bolt ms-1"> </i></span></div>
                           <div class="card-body ps-0">
                             <h5 class="fw-bold text-1000 mb-4 text-truncate">Fihalhohi Island Resort: Luxury destination without compromise</h5>
                             <div class="d-flex align-items-center justify-content-start"><span class="text-800 fs--1 me-2"><i class="fas fa-map-marker-alt"></i></span><span class="text-900 me-3">Maldives</span><span class="text-800 fs--1 me-2"><i class="fas fa-calendar"></i></span><span class="text-900">4 days</span></div>
                             <p class="text-decoration-line-through text-900 mt-3 mb-0">$375</p>
                             <h1 class="mb-3 text-primary fw-bolder fs-4"><span>$300</span><span class="text-900 fs--1 fw-normal">/Per person</span></h1><span class="badge bg-soft-secondary p-2"><i class="fas fa-tag text-secondary fs--1 me-1"></i><span class="text-secondary fw-normal fs-1">-15%</span></span>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
                   <div class="carousel-item">
                     <div class="row h-100 align-items-center g-2">
                       <div class="col-md-4 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/maldives.png" alt="..." />
                           <div class="card-img-overlay ps-0"><span class="badge bg-primary ms-3 me-1 p-2"><i class="fas fa-clock me-1"></i><span>20:04:32:21</span></span><span class="badge bg-secondary p-2"><i class="fas fa-bolt me-1"></i><span>trending</span><i class="fas fa-bolt ms-1"> </i></span></div>
                           <div class="card-body ps-0">
                             <h5 class="fw-bold text-1000 mb-4 text-truncate">Mermaid Beach Resort: The most joyful way to spend your holiday</h5>
                             <div class="d-flex align-items-center justify-content-start"><span class="text-800 fs--1 me-2"><i class="fas fa-map-marker-alt"></i></span><span class="text-900 me-3">Maldives</span><span class="text-800 fs--1 me-2"><i class="fas fa-calendar"></i></span><span class="text-900">4 days</span></div>
                             <p class="text-decoration-line-through text-900 mt-3 mb-0">$200</p>
                             <h1 class="mb-3 text-primary fw-bolder fs-4"><span>$175</span><span class="text-900 fs--1 fw-normal">/Per person</span></h1><span class="badge bg-soft-secondary p-2"><i class="fas fa-tag text-secondary fs--1 me-1"></i><span class="text-secondary fw-normal fs-1">-15%</span></span>
                           </div>
                         </div>
                       </div>
                       <div class="col-md-4 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/cinnamon.png" alt="..." />
                           <div class="card-img-overlay ps-0"><span class="badge bg-primary ms-3 me-1 p-2"><i class="fas fa-clock me-1"></i><span>20:04:32:21</span></span><span class="badge bg-secondary p-2"><i class="fas fa-bolt me-1"></i><span>trending</span><i class="fas fa-bolt ms-1"> </i></span></div>
                           <div class="card-body ps-0">
                             <h5 class="fw-bold text-1000 mb-4 text-truncate">Bora Bora: Enjoy a romantic cruise tour of at the sunny side of life</h5>
                             <div class="d-flex align-items-center justify-content-start"><span class="text-800 fs--1 me-2"><i class="fas fa-map-marker-alt"></i></span><span class="text-900 me-3">Maldives</span><span class="text-800 fs--1 me-2"><i class="fas fa-calendar"></i></span><span class="text-900">4 days</span></div>
                             <p class="text-decoration-line-through text-900 mt-3 mb-0">$300</p>
                             <h1 class="mb-3 text-primary fw-bolder fs-4"><span>$250</span><span class="text-900 fs--1 fw-normal">/Per person</span></h1><span class="badge bg-soft-secondary p-2"><i class="fas fa-tag text-secondary fs--1 me-1"></i><span class="text-secondary fw-normal fs-1">-15%</span></span>
                           </div>
                         </div>
                       </div>
                       <div class="col-md-4 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/dhigu.png" alt="..." />
                           <div class="card-img-overlay ps-0"><span class="badge bg-primary ms-3 me-1 p-2"><i class="fas fa-clock me-1"></i><span>20:04:32:21</span></span><span class="badge bg-secondary p-2"><i class="fas fa-bolt me-1"></i><span>trending</span><i class="fas fa-bolt ms-1"> </i></span></div>
                           <div class="card-body ps-0">
                             <h5 class="fw-bold text-1000 mb-4 text-truncate">Fihalhohi Island Resort: Luxury destination without compromise</h5>
                             <div class="d-flex align-items-center justify-content-start"><span class="text-800 fs--1 me-2"><i class="fas fa-map-marker-alt"></i></span><span class="text-900 me-3">Maldives</span><span class="text-800 fs--1 me-2"><i class="fas fa-calendar"></i></span><span class="text-900">4 days</span></div>
                             <p class="text-decoration-line-through text-900 mt-3 mb-0">$375</p>
                             <h1 class="mb-3 text-primary fw-bolder fs-4"><span>$300</span><span class="text-900 fs--1 fw-normal">/Per person</span></h1><span class="badge bg-soft-secondary p-2"><i class="fas fa-tag text-secondary fs--1 me-1"></i><span class="text-secondary fw-normal fs-1">-15%</span></span>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
                   <div class="row"><button class="carousel-control-prev" type="button" data-bs-target="#carouselTestimonials" 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="#carouselTestimonials" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next                                    </span></button></div>
                 </div>
                 <div class="row flex-center">
                   <div class="col-auto position-relative z-index-2">
                     <ol class="carousel-indicators me-xxl-7 me-xl-4 me-lg-7">
                       <li class="active" data-bs-target="#carouselTestimonials" data-bs-slide-to="0"></li>
                       <li data-bs-target="#carouselTestimonials" data-bs-slide-to="1"></li>
                       <li data-bs-target="#carouselTestimonials" data-bs-slide-to="2"></li>
                       <li data-bs-target="#carouselTestimonials" data-bs-slide-to="3"></li>
                     </ol>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </section>
       <section class="py-7 overflow-hidden" id="places">
         <div class="container bg-offcanvas-gray-right">
           <div class="row gx-2 mb-2">
             <div class="col-12 col-md-12 col-lg-4">
               <div class="bg-primary-gradient bg-offcanvas h-100">
                 <div class="row g-0 justify-content-end">
                   <div class="col-12">
                     <div class="p-6 py-md-5 px-md-3 py-lg-8 text-light"><img class="mb-5" src="assets/img/icon-location.svg" alt="..." />
                       <h2 class="mb-2 text-light">Popular places</h2>
                       <p>Enjoy the benefits of our packages to the<br class="d-none d-lg-block" />sites where our visitors have more fun. <br class="d-none d-lg-block" />Properly arranged with low costing.</p>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <div class="col-sm-6 col-lg-4">
               <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/agra.png" height="375" alt="..." />
                 <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                   <div class="mt-auto px-4 mb-1">
                     <h3 class="fs-1 fs-md-2 text-white">Agra</h3><span class="text-light fs--1 me-1"><i class="fas fa-gift"></i></span><span class="text-light me-3">10 Packages</span>
                   </div>
                 </div><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-sm-6 col-lg-4">
               <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/kualalumpur.png" height="375" alt="..." />
                 <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                   <div class="mt-auto px-4 mb-1">
                     <h3 class="fs-1 fs-md-2 text-white">Kuala Lumpur</h3><span class="text-light fs--1 me-1"><i class="fas fa-gift"></i></span><span class="text-light me-3">10 Packages</span>
                   </div>
                 </div><a class="stretched-link" href="#!"></a>
               </div>
             </div>
           </div>
           <div class="row g-2">
             <div class="col-sm-6 col-lg-4">
               <div class="row g-2">
                 <div class="col-12">
                   <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/munich.png" height="375" alt="..." />
                     <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                       <div class="mt-auto px-4 mb-1">
                         <h3 class="fs-1 fs-md-2 text-white">Munich</h3><span class="text-light fs--1 me-1"><i class="fas fa-gift"></i></span><span class="text-light me-3">10 Packages</span>
                       </div>
                     </div><a class="stretched-link" href="#!"></a>
                   </div>
                 </div>
                 <div class="col-12">
                   <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/munich.png" height="375" alt="..." />
                     <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                       <div class="mt-auto px-4 mb-1">
                         <h3 class="fs-1 fs-md-2 text-white">Munich</h3><span class="text-light fs--1 me-1"><i class="fas fa-gift"></i></span><span class="text-light me-3">10 Packages</span>
                       </div>
                     </div><a class="stretched-link" href="#!"></a>
                   </div>
                 </div>
               </div>
             </div>
             <div class="col-sm-6 col-lg-4">
               <div class="row g-2">
                 <div class="col-12">
                   <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/paris.png" height="375" alt="..." />
                     <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                       <div class="mt-auto px-4 mb-1">
                         <h3 class="fs-1 fs-md-2 text-white">Paris</h3><span class="text-light fs--1 me-1"><i class="fas fa-gift"></i></span><span class="text-light me-3">10 Packages</span>
                       </div>
                     </div><a class="stretched-link" href="#!"></a>
                   </div>
                 </div>
                 <div class="col-12">
                   <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/vienna.png" height="375" alt="..." />
                     <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                       <div class="mt-auto px-4 mb-1">
                         <h3 class="fs-1 fs-md-2 text-white">Vienna</h3><span class="text-light fs--1 me-1"><i class="fas fa-gift"></i></span><span class="text-light me-3">10 Packages</span>
                       </div>
                     </div><a class="stretched-link" href="#!"></a>
                   </div>
                 </div>
               </div>
             </div>
             <div class="col-sm-12 col-lg-4">
               <div class="bg-secondary-gradient h-100 d-flex align-items-center">
                 <div class="text-light p-4 p-sm-6 p-lg-0 px-xxl-6">
                   <p class="fs-1 px-4 mb-6">Wanna travel to the most thrilling spot on the planet? We've set a bunch of surprises for you.</p><a class="btn btn-lg text-light fs-2" href="#!" role="button">Click to view more<svg class="bi bi-arrow-right-circle ms-5" xmlns="http://www.w3.org/2000/svg" width="55" height="55" fill="currentColor" viewBox="0 0 16 16">
                       <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"></path>
                     </svg></a>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </section>
       <section class="py-0 my-7">
         <div class="bg-holder w-50 bg-left  d-none d-lg-block" style="background-image:url(assets/img/sharee.png);background-position:top;"></div>
         <!--/.bg-holder-->
         <div class="container">
           <div class="row g-0">
             <div class="col-lg-4 order-1 order-lg-0"> </div>
             <div class="col-lg-8 bg-white">
               <div class="carousel slide" id="carouselShare" data-bs-ride="carousel">
                 <div class="carousel-inner">
                   <div class="carousel-item active" data-bs-interval="10000">
                     <div class="row h-100">
                       <div class="col-12"><img class="w-100" src="assets/img/dubai.png" height="600" alt="..." />
                         <div class="pt-5 ps-sm-7">
                           <h4 class="mb-2 text-1000">Share a trip</h4>
                           <h2 class="mb-3 text-primary fs-3 fs-md-6">Dubai</h2>
                           <p class="fw-normal mb-0">Dubai, a city with many faces, is one of the world's most popular tourist destinations. The Burj Khalifa, the world's highest tower, is located here. The futuristic beauty of new buildings is at the heart of Dubai tourism.</p>
                         </div>
                       </div>
                     </div>
                   </div>
                   <div class="carousel-item" data-bs-interval="2000">
                     <div class="row h-100">
                       <div class="col-12"><img class="w-100" src="assets/img/cinnamon.png" height="600" alt="..." />
                         <div class="pt-5 ps-sm-7">
                           <h4 class="mb-2 text-1000">Share a trip</h4>
                           <h2 class="mb-3 text-primary fs-3 fs-md-6">Maldives</h2>
                           <p class="fw-normal mb-0">Dubai, a city with many faces, is one of the world's most popular tourist destinations. The Burj Khalifa, the world's highest tower, is located here. The futuristic beauty of new buildings is at the heart of Dubai tourism.</p>
                         </div>
                       </div>
                     </div>
                   </div>
                   <div class="carousel-item" data-bs-interval="1000">
                     <div class="row h-100">
                       <div class="col-12"><img class="w-100" src="assets/img/dhigu.png" height="600" alt="..." />
                         <div class="pt-5 ps-sm-7">
                           <h4 class="mb-2 text-1000">Share a trip</h4>
                           <h2 class="mb-3 text-primary fs-3 fs-md-6">Maldives</h2>
                           <p class="fw-normal mb-0">Dubai, a city with many faces, is one of the world's most popular tourist destinations. The Burj Khalifa, the world's highest tower, is located here. The futuristic beauty of new buildings is at the heart of Dubai tourism.</p>
                         </div>
                       </div>
                     </div>
                   </div>
                   <div class="carousel-item">
                     <div class="row h-100">
                       <div class="col-12"><img class="w-100" src="assets/img/dubai.png" height="600" alt="..." />
                         <div class="pt-5 ps-sm-7">
                           <h4 class="mb-2 text-1000">Share a trip</h4>
                           <h2 class="mb-3 text-primary fs-3 fs-md-6">Dubai</h2>
                           <p class="fw-normal mb-0">Dubai, a city with many faces, is one of the world's most popular tourist destinations. The Burj Khalifa, the world's highest tower, is located here. The futuristic beauty of new buildings is at the heart of Dubai tourism.</p>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="row ps-sm-7 align-items-end">
                   <div class="col-4 col-sm-6 position-relative z-index-2">
                     <ol class="carousel-indicators me-xxl-7 me-xl-4 me-lg-7">
                       <li class="active" data-bs-target="#carouselShare" data-bs-slide-to="0"></li>
                       <li data-bs-target="#carouselShare" data-bs-slide-to="1"></li>
                       <li data-bs-target="#carouselShare" data-bs-slide-to="2"></li>
                       <li data-bs-target="#carouselShare" data-bs-slide-to="3"></li>
                     </ol>
                   </div>
                   <div class="col-8 col-sm-6 position-relative z-index-2 text-end"><a class="btn btn-lg text-secondary" href="#" role="button">Read More<svg class="bi bi-arrow-right ms-2" xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" viewBox="0 0 16 16">
                         <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path>
                       </svg></a></div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </section>
       <section class="py-7 overflow-hidden">
         <div class="container bg-offcanvas-gray">
           <div class="row gx-2">
             <div class="col-sm-6 col-lg-4 order-1 order-lg-0 gy-2 gy-lg-0">
               <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/sky-the-limit.png" height="375" alt="..." />
                 <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                   <div class="mt-auto px-4">
                     <h3 class="fs-1 fs-md-2 text-white">Sky the Limit</h3>
                     <div class="d-flex align-items-center justify-content-start"><span class="text-light fs--1 me-1"><i class="fas fa-map-marker-alt"></i></span><span class="text-light me-3">Manali</span><span class="text-light fs--1 me-1"><i class="fas fa-calendar"></i></span><span class="text-light">4 days</span></div>
                     <h1 class="my-2 text-light fw-bolder fs-4"><span>$175</span><span class="text-light fs--1 fw-normal">/Per person</span></h1>
                   </div>
                 </div><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-sm-6 col-lg-4 order-2 order-lg-0 gy-2 gy-lg-0">
               <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/beyond-the-blues.png" height="375" alt="..." />
                 <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                   <div class="mt-auto px-4">
                     <h3 class="fs-1 fs-md-2 text-white">Beyond the Blues</h3>
                     <div class="d-flex align-items-center justify-content-start"><span class="text-light fs--1 me-1"><i class="fas fa-map-marker-alt"></i></span><span class="text-light me-3">Maldives</span><span class="text-light fs--1 me-1"><i class="fas fa-calendar"></i></span><span class="text-light">4 days</span></div>
                     <h1 class="my-2 text-light fw-bolder fs-4"><span>$175</span><span class="text-light fs--1 fw-normal">/Per person</span></h1>
                   </div>
                 </div><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-lg-4">
               <div class="bg-primary-gradient h-100 bg-offcanvas-right">
                 <div class="row g-0 h-100">
                   <div class="col-12 h-100">
                     <div class="d-flex flex-column justify-content-center h-100 text-light ps-4 ps-xl-5 py-5 py-lg-0"><img class="mb-5" src="assets/img/icon-gift-box.svg" width="58" alt="..." />
                       <h2 class="mb-2 text-light">popular Packages</h2>
                       <p>Choose the most popular bundles among <br class="d-none d-xl-block" />our current ones.</p>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <div class="col-sm-6 col-lg-4 gy-2">
               <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/green.png" height="375" alt="..." />
                 <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                   <div class="mt-auto px-4">
                     <h3 class="fs-1 fs-md-2 text-white">Within the Gren</h3>
                     <div class="d-flex align-items-center justify-content-start"><span class="text-light fs--1 me-1"><i class="fas fa-map-marker-alt"></i></span><span class="text-light me-3">Phillipines</span><span class="text-light fs--1 me-1"><i class="fas fa-calendar"></i></span><span class="text-light">4 days</span></div>
                     <h1 class="my-2 text-light fw-bolder fs-4"><span>$175</span><span class="text-light fs--1 fw-normal">/Per person</span></h1>
                   </div>
                 </div><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-sm-6 col-lg-4 gy-2">
               <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/queens-gambit.png" height="375" alt="..." />
                 <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                   <div class="mt-auto px-4">
                     <h3 class="fs-1 fs-md-2 text-white">Queens Gambit</h3>
                     <div class="d-flex align-items-center justify-content-start"><span class="text-light fs--1 me-1"><i class="fas fa-map-marker-alt"></i></span><span class="text-light me-3">London</span><span class="text-light fs--1 me-1"><i class="fas fa-calendar"></i></span><span class="text-light">4 days</span></div>
                     <h1 class="my-2 text-light fw-bolder fs-4"><span>$175</span><span class="text-light fs--1 fw-normal">/Per person</span></h1>
                   </div>
                 </div><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-sm-6 col-lg-4 gy-2">
               <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/canals.png" height="375" alt="..." />
                 <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                   <div class="mt-auto px-4">
                     <h3 class="fs-1 fs-md-2 text-white">City of canals</h3>
                     <div class="d-flex align-items-center justify-content-start"><span class="text-light fs--1 me-1"><i class="fas fa-map-marker-alt"></i></span><span class="text-light me-3">Maldives</span><span class="text-light fs--1 me-1"><i class="fas fa-calendar"></i></span><span class="text-light">4 days</span></div>
                     <h1 class="my-2 text-light fw-bolder fs-4"><span>$175</span><span class="text-light fs--1 fw-normal">/Per person</span></h1>
                   </div>
                 </div><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-lg-8 gy-2 order-3 order-lg-0">
               <div class="bg-secondary-gradient h-100">
                 <div class="row h-100">
                   <div class="col-12">
                     <div class="d-flex flex-column flex-center h-100 text-light p-4 p-sm-6 p-md-8 p-lg-0">
                       <p class="fs-1 px-3 mb-5">Most exclusive packages are ready <br class="d-none d-xl-block" />for you. It's only a click away!</p><a class="btn btn-lg text-light fs-1" href="#!" role="button">Click to view more<svg class="bi bi-arrow-right-circle ms-7" xmlns="http://www.w3.org/2000/svg" width="55" height="55" fill="currentColor" viewBox="0 0 16 16">
                           <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"></path>
                         </svg></a>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <div class="col-sm-6 col-lg-4 gy-2">
               <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/mountain-venture.png" height="375" alt="..." />
                 <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                   <div class="mt-auto px-4">
                     <h3 class="fs-1 fs-md-2 text-white">Mountain Venture</h3>
                     <div class="d-flex align-items-center justify-content-start"><span class="text-light fs--1 me-1"><i class="fas fa-map-marker-alt"></i></span><span class="text-light me-3">Maldives</span><span class="text-light fs--1 me-1"><i class="fas fa-calendar"></i></span><span class="text-light">4 days</span></div>
                     <h1 class="my-2 text-light fw-bolder fs-4"><span>$175</span><span class="text-light fs--1 fw-normal">/Per person</span></h1>
                   </div>
                 </div><a class="stretched-link" href="#!"></a>
               </div>
             </div>
           </div>
         </div>
       </section>
 
       <!-- ============================================-->
       <!-- <section> begin ============================-->
       <section class="py-7" id="activities">
         <div class="container">
           <div class="row g-0">
             <div class="col-lg-4 order-1"><img class="w-100 mt-5 mt-lg-0" src="assets/img/bungee-jumping.png" height="750" alt="..." /></div>
             <div class="col-lg-8">
               <div class="carousel slide" id="carouselActivity" data-bs-ride="carousel">
                 <div class="carousel-inner">
                   <div class="carousel-item active" data-bs-interval="10000">
                     <div class="row h-100">
                       <div class="col-12"><img class="w-100" src="assets/img/activity.png" width="383" alt="..." />
                         <div class="py-4">
                           <h4 class="mb-2 text-1000">Participate in activities like</h4>
                           <h2 class="mb-3 text-primary fs-3 fs-md-6">Bungee Jumping</h2>
                           <p class="fw-normal mb-0 pe-lg-9">Bungee jumping, often known as bungy jumping, is a sport in which a person jumps from a considerable height while attached to a long elastic line. Usually, the pad is built on a high structure like a structure or a crane, a bridge across a steep ravine</p>
                         </div>
                       </div>
                     </div>
                   </div>
                   <div class="carousel-item" data-bs-interval="2000">
                     <div class="row h-100">
                       <div class="col-12"><img class="w-100" src="assets/img/activity.png" width="383" alt="..." />
                         <div class="py-4">
                           <h4 class="mb-2 text-1000">Participate in activities like</h4>
                           <h2 class="mb-3 text-primary fs-3 fs-md-6">Bungee Jumping</h2>
                           <p class="fw-normal mb-0 pe-lg-9">Bungee jumping, often known as bungy jumping, is a sport in which a person jumps from a considerable height while attached to a long elastic line. Usually, the pad is built on a high structure like a structure or a crane, a bridge across a steep ravine</p>
                         </div>
                       </div>
                     </div>
                   </div>
                   <div class="carousel-item" data-bs-interval="1000">
                     <div class="row h-100">
                       <div class="col-12"><img class="w-100" src="assets/img/activity.png" width="383" alt="..." />
                         <div class="py-4">
                           <h4 class="mb-2 text-1000">Participate in activities like</h4>
                           <h2 class="mb-3 text-primary fs-3 fs-md-6">Bungee Jumping</h2>
                           <p class="fw-normal mb-0 pe-lg-9">Bungee jumping, often known as bungy jumping, is a sport in which a person jumps from a considerable height while attached to a long elastic line. Usually, the pad is built on a high structure like a structure or a crane, a bridge across a steep ravine</p>
                         </div>
                       </div>
                     </div>
                   </div>
                   <div class="carousel-item">
                     <div class="row h-100">
                       <div class="col-12"><img class="w-100" src="assets/img/activity.png" width="383" alt="..." />
                         <div class="py-4">
                           <h4 class="mb-2 text-1000">Participate in activities like</h4>
                           <h2 class="mb-3 text-primary fs-3 fs-md-6">Bungee Jumping</h2>
                           <p class="fw-normal mb-0 pe-lg-9">Bungee jumping, often known as bungy jumping, is a sport in which a person jumps from a considerable height while attached to a long elastic line. Usually, the pad is built on a high structure like a structure or a crane, a bridge across a steep ravine</p>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="row ps-sm-5 ps-md-0 align-items-end">
                   <div class="col-4 col-sm-6 position-relative z-index-2">
                     <ol class="carousel-indicators me-xxl-7 me-xl-4 me-lg-7">
                       <li class="active" data-bs-target="#carouselShare" data-bs-slide-to="0"></li>
                       <li data-bs-target="#carouselShare" data-bs-slide-to="1"></li>
                       <li data-bs-target="#carouselShare" data-bs-slide-to="2"></li>
                       <li data-bs-target="#carouselShare" data-bs-slide-to="3"></li>
                     </ol>
                   </div>
                   <div class="col-8 col-sm-6 position-relative z-index-2 text-end"><a class="btn btn-lg text-secondary" href="#" role="button">Read More<svg class="bi bi-arrow-right ms-2" xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" viewBox="0 0 16 16">
                         <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path>
                       </svg></a></div>
                 </div>
               </div>
             </div>
           </div>
         </div><!-- end of .container-->
       </section><!-- <section> close ============================-->
       <!-- ============================================-->
 
       <section class="py-7 overflow-hidden" id="hotels">
         <div class="container bg-offcanvas-gray-right">
           <div class="row gx-2">
             <div class="col-sm-6 col-lg-4">
               <div class="bg-primary-gradient h-100 d-flex align-items-end">
                 <div class="row g-0 justify-content-start">
                   <div class="col-xl-9">
                     <div class="p-3 px-lg-4 text-light"><img class="mb-5" src="assets/img/icon-hotel.svg" alt="..." />
                       <h2 class="mb-3 text-light">Discover our best hotels to stay</h2>
                       <p>Bundle tickets to any hotel to save on your whole order. Follow bundle it! method by picking the right hotel accommodation once you add your tickets to your cart.</p>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <div class="col-sm-6 col-lg-4">
               <div class="row g-2">
                 <div class="col-12">
                   <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/moon-house-hotel.png" height="375" alt="..." />
                     <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                       <div class="mt-auto px-4">
                         <h3 class="fs-1 fs-md-2 text-white">Moon House Hotel</h3>
                         <div class="d-flex align-items-center justify-content-start"><span class="text-light fs--1 me-1"><i class="fas fa-map-marker-alt"></i></span><span class="text-light me-md-3">Soi Petchburi 19, Bankok</span></div>
                         <p class="mb-0 mt-3">Starts from </p>
                         <h1 class="mb-2 text-light fw-bolder fs-2 fs-md-4"><span>$175</span><span class="text-light fs--1 fw-normal">/Per person</span></h1>
                       </div>
                     </div><a class="stretched-link" href="#!"> </a>
                   </div>
                 </div>
                 <div class="col-12">
                   <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/blue-mosque-hotel.png" height="375" alt="..." />
                     <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                       <div class="mt-auto px-4">
                         <h3 class="fs-1 fs-md-2 text-white">Blue Mosque Hotel</h3>
                         <div class="d-flex align-items-center justify-content-start"><span class="text-light fs--1 me-1"><i class="fas fa-map-marker-alt"></i></span><span class="text-light me-md-3">Dismesi Sokak, Istanbul</span></div>
                         <p class="mb-0 mt-3">Starts from </p>
                         <h1 class="mb-2 text-light fw-bolder fs-2 fs-md-4"><span>$175</span><span class="text-light fs--1 fw-normal">/Per person</span></h1>
                       </div>
                     </div><a class="stretched-link" href="#!"> </a>
                   </div>
                 </div>
               </div>
             </div>
             <div class="col-sm-6 col-lg-4">
               <div class="row g-2">
                 <div class="col-12">
                   <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/hotel-royal.png" height="375" alt="..." />
                     <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                       <div class="mt-auto px-4">
                         <h3 class="fs-1 fs-md-2 text-white">Hotel Royal</h3>
                         <div class="d-flex align-items-center justify-content-start"><span class="text-light fs--1 me-1"><i class="fas fa-map-marker-alt"></i></span><span class="text-light me-md-3">Kedewatan, Bali</span></div>
                         <p class="mb-0 mt-3">Starts from </p>
                         <h1 class="mb-2 text-light fw-bolder fs-2 fs-md-4"><span>$175</span><span class="text-light fs--1 fw-normal">/Per person</span></h1>
                       </div>
                     </div><a class="stretched-link" href="#!"> </a>
                   </div>
                 </div>
                 <div class="col-12">
                   <div class="card card-span h-100 text-white"><img class="img-fluid h-100 w-100" src="assets/img/boutique-hotel.png" height="375" alt="..." />
                     <div class="card-img-overlay ps-0 d-flex flex-column justify-content-between bg-therichpost-gradient">
                       <div class="mt-auto px-4">
                         <h3 class="fs-1 fs-md-2 text-white">The Rin Boutique Hotel</h3>
                         <div class="d-flex align-items-center justify-content-start"><span class="text-light fs--1 me-1"><i class="fas fa-map-marker-alt"></i></span><span class="text-light me-md-3">Bang Lamung, Pattaya</span></div>
                         <p class="mb-0 mt-3">Starts from </p>
                         <h1 class="mb-2 text-light fw-bolder fs-2 fs-md-4"><span>$175</span><span class="text-light fs--1 fw-normal">/Per person</span></h1>
                       </div>
                     </div><a class="stretched-link" href="#!"> </a>
                   </div>
                 </div>
               </div>
             </div>
             <div class="col-sm-6 col-lg-8 gy-2">
               <div class="bg-secondary-gradient h-100 d-flex align-items-center">
                 <div class="text-light py-6">
                   <div class="row">
                     <div class="col-12 col-xl-6">
                       <p class="fs-1 px-5">In our offers, we have more hotels. Just to make your stay easy for your best interests.</p>
                     </div>
                     <div class="col-12 col-xl-6 text-end"><a class="btn btn-lg text-light fs-1 fs-sm--1 fs-md-1 px-5" href="#!" role="button">Click to view more<svg class="bi bi-arrow-right-circle ms-3" xmlns="http://www.w3.org/2000/svg" width="55" height="55" fill="currentColor" viewBox="0 0 16 16">
                           <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"></path>
                         </svg></a></div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </section>
 
       <!-- ============================================-->
       <!-- <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/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/author-1.png" width="60" alt="..." />
                     <div class="d-flex flex-1 justify-content-around"> <span class="text-900 text-center"><i class="fas fa-heart text-primary"></i><span class="text-900 ms-2">355</span></span><span class="text-900 text-center"><i class="fas fa-eye text-primary"></i><span class="text-900 ms-2">234</span></span><span class="text-900 text-center"><i class="fas fa-share text-primary"></i><span class="text-900 ms-2">14</span></span></div>
                   </div>
                   <h5 class="text-900 mt-3">John Oliver. <span class="fw-normal">5 mins Read. </span></h5>
                   <h3 class="fw-bold text-1000 mt-5 text-truncate">15 Best Day Trips from Portland Oregon</h3>
                   <p class="text-900 mt-3">The structure of the trip blog is only a white canvas to highlight the atmospheric and immersive.</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/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/author-2.png" width="60" alt="..." />
                     <div class="d-flex flex-1 justify-content-around"> <span class="text-900 text-center"><i class="fas fa-heart text-primary"></i><span class="text-900 ms-2">35</span></span><span class="text-900 text-center"><i class="fas fa-eye text-primary"></i><span class="text-900 ms-2">23</span></span><span class="text-900 text-center"><i class="fas fa-share text-primary"></i><span class="text-900 ms-2">14</span></span></div>
                   </div>
                   <h5 class="text-900 mt-3">Haley Wilson . <span class="fw-normal">5 mins Read. </span></h5>
                   <h3 class="fw-bold text-1000 mt-5 text-truncate">Famous Roads for Great Drives in California</h3>
                   <p class="text-900 mt-3">I first discovered about famous road in california when I flew with KLM to Europe in 2018.</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/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/author-3.png" width="60" alt="..." />
                     <div class="d-flex flex-1 justify-content-around"> <span class="text-900 text-center"><i class="fas fa-heart text-primary"></i><span class="text-900 ms-2">35</span></span><span class="text-900 text-center"><i class="fas fa-eye text-primary"></i><span class="text-900 ms-2">23</span></span><span class="text-900 text-center"><i class="fas fa-share text-primary"></i><span class="text-900 ms-2">14</span></span></div>
                   </div>
                   <h5 class="text-900 mt-3">Jeff Baley. <span class="fw-normal">5 mins Read. </span></h5>
                   <h3 class="fw-bold text-1000 mt-5 text-truncate">7 of the Best Train Trips in Canada</h3>
                   <p class="text-900 mt-3">On this very stunning rail ride from Vancouver to Calgary, take in the stunning vistas andspectacular.</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> begin ============================-->
       <section class="py-0" id="flights">
         <div class="container-fluid">
           <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">Flights to Popular Places at the Best Costs</h5>
             </div>
           </div>
           <div class="row g-0 flex-center">
             <div class="col-12 col-sm-4 col-md-3 col-lg-4 col-xl-2">
               <div class="d-flex flex-column justify-content-center px-3" style="background-color:#240D8C; min-height:230px; ">
                 <h5 class="text-light">Dhaka - Chittagong</h5>
                 <h6 class="text-light fw-normal fs-0">From $100</h6><i class="fas fa-arrow-right text-light mt-4"></i><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-sm-4 col-md-3 col-lg-4 col-xl-2">
               <div class="d-flex flex-column justify-content-center px-3" style="background-color:#3011BB; min-height:230px;">
                 <h5 class="text-light">Dhaka - Sylhet</h5>
                 <h6 class="text-light fw-normal fs-0">From $100</h6><i class="fas fa-arrow-right text-light mt-4"></i><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-sm-4 col-md-3 col-lg-4 col-xl-2">
               <div class="d-flex flex-column justify-content-center px-3" style="background-color:#4914DC; min-height:230px;">
                 <h5 class="text-light">Dhaka - Chittagong</h5>
                 <h6 class="text-light fw-normal fs-0">From $100</h6><i class="fas fa-arrow-right text-light mt-4"></i><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-sm-4 col-md-3 col-lg-4 col-xl-2">
               <div class="d-flex flex-column justify-content-center px-3" style="background-color:#6213D2; min-height:230px;">
                 <h5 class="text-light">Dhaka - Chittagong</h5>
                 <h6 class="text-light fw-normal fs-0">From $100</h6><i class="fas fa-arrow-right text-light mt-4"></i><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-sm-4 col-md-3 col-lg-4 col-xl-2">
               <div class="d-flex flex-column justify-content-center px-3" style="background-color:#4611BC; min-height:230px;">
                 <h5 class="text-light">Dhaka - Coxs Bazar</h5>
                 <h6 class="text-light fw-normal fs-0">From $100</h6><i class="fas fa-arrow-right text-light mt-4"></i><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-sm-4 col-md-3 col-lg-4 col-xl-2">
               <div class="d-flex flex-column justify-content-center px-3" style="background-color:#7013CE; min-height:230px;">
                 <h5 class="text-light">Dhaka - Sylhet</h5>
                 <h6 class="text-light fw-normal fs-0">From $100</h6><i class="fas fa-arrow-right text-light mt-4"></i><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-sm-4 col-md-3 col-lg-4 col-xl-2">
               <div class="d-flex flex-column justify-content-center px-3" style="background-color:#4611BC; min-height:230px;">
                 <h5 class="text-light">Dhaka - Coxs Bazar</h5>
                 <h6 class="text-light fw-normal fs-0">From $100</h6><i class="fas fa-arrow-right text-light mt-4"></i><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-sm-4 col-md-3 col-lg-4 col-xl-2">
               <div class="d-flex flex-column justify-content-center px-3" style="background-color:#6213D2; min-height:230px;">
                 <h5 class="text-light">Dhaka - Chittagong</h5>
                 <h6 class="text-light fw-normal fs-0">From $100</h6><i class="fas fa-arrow-right text-light mt-4"></i><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-sm-4 col-md-3 col-lg-4 col-xl-2">
               <div class="d-flex flex-column justify-content-center px-3" style="background-color:#240D8C; min-height:230px;">
                 <h5 class="text-light">Dhaka - Coxs Bazar</h5>
                 <h6 class="text-light fw-normal fs-0">From $100</h6><i class="fas fa-arrow-right text-light mt-4"></i><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-sm-4 col-md-3 col-lg-4 col-xl-2">
               <div class="d-flex flex-column justify-content-center px-3" style="background-color:#4914DC; min-height:230px;">
                 <h5 class="text-light">Dhaka - Sylhet</h5>
                 <h6 class="text-light fw-normal fs-0">From $100</h6><i class="fas fa-arrow-right text-light mt-4"></i><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-sm-4 col-md-3 col-lg-4 col-xl-2">
               <div class="d-flex flex-column justify-content-center px-3" style="background-color:#3011BB; min-height:230px;">
                 <h5 class="text-light">Dhaka - Chittagong</h5>
                 <h6 class="text-light fw-normal fs-0">From $100</h6><i class="fas fa-arrow-right text-light mt-4"></i><a class="stretched-link" href="#!"></a>
               </div>
             </div>
             <div class="col-12 col-sm-4 col-md-3 col-lg-4 col-xl-2">
               <div class="d-flex flex-column justify-content-center px-3" style="background-color:#4611BC; min-height:230px;">
                 <h5 class="text-light">Dhaka - Coxs Bazar</h5>
                 <h6 class="text-light fw-normal fs-0">From $100</h6><i class="fas fa-arrow-right text-light mt-4"></i><a class="stretched-link" href="#!"></a>
               </div>
             </div>
           </div>
         </div><!-- end of .container-->
       </section><!-- <section> close ============================-->
       <!-- ============================================-->
 
       <section>
         <div class="bg-holder" style="background-image:url(assets/img/cta-bg.png);background-position:center;background-size:cover;"></div>
         <!--/.bg-holder-->
         <div class="container">
           <div class="row flex-center">
             <div class="col-lg-6 text-center"><img class="mb-5 mb-lg-0" src="assets/img/cta-mobile.png" alt="..." /></div>
             <div class="col-lg-6 text-center">
               <h1 class="fs-6 pe-xxl-10">Get the app</h1>
               <div class="mt-4 pe-xxl-10"><a href="https://play.google.com/store/apps" target="_blank"><img class="me-3" src="assets/img/google-play.png" width="170" alt="..." /></a><a href="https://www.apple.com/app-store/" target="_blank"> <img src="assets/img/app-store.png" width="170" alt="..." /></a></div>
             </div>
           </div>
         </div>
       </section>
 
       <!-- ============================================-->
       <!-- <section> begin ============================-->
       <section class="py-0 overflow-hidden">
         <div class="container">
           <div class="row">
             <div class="col-6 col-sm-4 col-lg-6">
               <div class="py-7"><img class="d-inline-block" src="assets/img/logo.png" width="50" alt="logo" /><span class="fw-bold fs-4 text-primary ms-2">therichpost</span>
                 <ul class="list-unstyled mt-4">
                   <li class="mb-2"><a class="text-800 fw-bold text-decoration-none" href="#!">News</a></li>
                   <li class="mb-2"><a class="text-800 fw-bold text-decoration-none" href="#!">Terms &amp; Conditions</a></li>
                   <li class="mb-2"><a class="text-800 fw-bold text-decoration-none" href="#!">Privacy</a></li>
                   <li class="mb-2"><a class="text-800 fw-bold text-decoration-none" href="#!">About Us</a></li>
                   <li class="mb-2"><a class="text-800 fw-bold text-decoration-none" href="#!">FAQs</a></li>
                 </ul>
               </div>
             </div>
             <div class="col-6 col-8 col-lg-6 bg-primary-gradient bg-offcanvas-right">
               <div class="p-3 py-7 p-md-7">
                 <p class="text-light"><i class="fas fa-phone-alt me-3"></i><span class="text-light">+09090909090909</span></p>
                 <p class="text-light"><i class="fas fa-envelope me-3"></i><span class="text-light">something@gmail.com</span></p>
                 <p class="text-light"><i class="fas fa-map-marker-alt me-3"></i><span class="text-light lh-lg">Ludhiana, Punjab<br/>India</span></p>
                 <div class="mt-6"><a href="#!"> <img class="me-3" src="assets/img/facebook.svg" alt="..." /></a><a href="#!"> <img class="me-3" src="assets/img/twitter.svg" alt="..." /></a><a href="#!"> <img class="me-3" src="assets/img/instagram.svg" alt="..." /></a></div>
                 <p class="mt-3 text-light text-center text-md-start"> Made with&nbsp;<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>&nbsp;by&nbsp;<a class="text-light" href="https://therichpost.com/" target="_blank">therichpost </a></p>
               </div>
             </div>
           </div>
         </div><!-- end of .container-->
       </section><!-- <section> close ============================-->
       <!-- ============================================-->
 
     </main><!-- ===============================================-->
     <!--    End of Main Content-->
     <!-- ===============================================-->

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

...
<head>
  ...
    <!-- ===============================================-->
    <!--    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/is.min.js"></script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
    <script src="assets/js/all.min.js"></script>
    <script src="assets/js/theme.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&amp;display=swap" rel="stylesheet">
</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

September 9, 2021

Reactjs Bootstrap 5 Healthcare Template Free

Hello my friends, welcome back to my blog. Today in this blog post, I am going to show you, Reactjs Bootstrap 5 Healthcare Template Free.

Guy’s with this we will cover below things:

Reactjs Bootstrap Responsive Template Creation.
React Bootstrap 5 Responsive Toggle Navbar.

Reactjs Free Responsvie Templates

For react js new comers, please check the below links:

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 reactjs 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 reactjs fresh setup:

npx create-react-app reacttemplate

cd reacttemplate

npm start // run the project

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

Create `assets` folder inside reacttemplate/public folder.

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

https://therichpost.com/health-templat.zip

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

...
  <head>
  ...
    <!-- ===============================================-->
    <!--    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/is.min.js"></script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
    <script src="assets/js/theme.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500&amp;display=swap" rel="stylesheet">
    <style>
      .articlebg
{
  background-image:url('assets/images/article-bg.png');background-position:right center;background-size:auto;
}
.dot2ng
{
  background-image:url('assets/images/dot-2.png');background-position:left top;background-size:initial;margin-top:120px;margin-left:-35px;
  
}
.dot1bg
{
  background-image:url('assets/images/dot.png');background-position:left bottom;background-size:auto;filter:contrast(1.5);
}
.dot2bg2
{
  background-image:url('assets/images/dot-2.png');background-position:right top;background-size:auto;margin-top:-75px;
}
.dotbg
{
  background-image:url('assets/images/dot.png');background-position:left;background-size:auto;margin-top:-105px;
}
.dot2bg3
{
  background-image:url('assets/images/dot-2.png');background-position:center right;background-size:auto;margin-left:-180px;margin-top:20px;
}
.servicesbg
{
  background-image:url('assets/images/services-bg.png');background-position:center left;background-size:auto;
}
.dotbg2
{
  background-image:url('assets/images/dot.png');background-position:right bottom;background-size:auto;margin-top:50px;
}
.dotbg3
{
  background-image:url('assets/images/dot.png');background-position:right top;background-size:auto;margin-left:-30px;margin-top:10px;filter:contrast(1.5);
}
.dot2bg4
{
  background-image:url('assets/images/dot-2.png');background-position:left bottom;background-size:auto;margin-left:-35px;margin-top:-65px;filter:contrast(1.5);
}
    </style>
</head>
...

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

import React from 'react';


class Home extends React.Component {
    
 
  render() {
   
    return (
      <main class="main" id="top">
        <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" data-navbar-on-scroll="data-navbar-on-scroll">
          <div class="container"><a class="navbar-brand d-flex align-items-center fw-bold fs-2" href="#"><img class="d-inline-block me-3" src="assets/images/logo.png" alt="" />Jassa</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 ms-auto pt-2 pt-lg-0">
                <li class="nav-item"><a class="nav-link fw-bold active" aria-current="page" href="#">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Find a doctor</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Apps</a></li>
                <li class="nav-item"><a class="nav-link" href="#testimonial">Testimonials</a></li>
                <li class="nav-item"><a class="nav-link" href="#about">About us</a></li>
              </ul>
            </div>
          </div>
        </nav>
        <section class="py-0">
          <div class="bg-holder dotbg"></div>
        
          <div class="container position-relative">
            <div class="row align-items-center">
              <div class="col-md-5 col-lg-6 order-md-1 pt-8"><img class="img-fluid" src="assets/images/hero-header.png" alt="" /></div>
              <div class="col-md-7 col-lg-6 text-center text-md-start pt-5 pt-md-9">
                <h1 class="mb-4 display-3 fw-bold">Virtual healthcare <br class="d-block d-lg-none d-xl-block" />for you.</h1>
                <p class="mt-3 mb-4 fs-1">Jassa provides progressive, and affordable<br class="d-none d-lg-block" />healthcare, accessible on mobile and online<br class="d-none d-lg-block" />for everyone</p><a class="btn btn-lg btn-primary rounded-pill hover-top" href="#" role="button">Learn more</a>
              </div>
            </div>
          </div>
        </section>
        <section class="py-8">
          <div class="bg-holder servicesbg"></div>
          
          <div class="bg-holder dot2bg3"></div>
          
          <div class="container-lg">
            <div class="row justify-content-center">
              <div class="col-3 text-center">
                <h2 class="fw-bold">Our services</h2>
                <hr class="w-25 mx-auto text-dark" style={{height:"2px"}} />
              </div>
            </div>
            <div class="row justify-content-center">
              <div class="col-sm-9 col-xl-8 text-center">
                <p>We provide to you the best choiches for you. Adjust it to your health needs and make sure your undergo treatment with our highly qualified doctors you can consult with us which type of service is suitable for your health</p>
              </div>
            </div>
            <div class="row justify-content-center h-100 pt-7 g-4">
              <div class="col-sm-9 col-md-4">
                <div class="card h-100 w-100 shadow rounded-lg p-3 p-md-2 p-lg-3 p-xl-5">
                  <div class="card-body text-center text-md-start">
                    <div class="py-3"><img class="img-fluid" src="assets/images/search.png" height="90" alt="" /></div>
                    <div class="py-3">
                      <h4 class="fw-bold card-title">Search doctor</h4>
                      <p class="card-text">Choose your doctor from thousands of specialist, general, and trusted hospitals</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-9 col-md-4">
                <div class="card h-100 w-100 shadow rounded-lg p-3 p-md-2 p-lg-3 p-xl-5">
                  <div class="card-body text-center text-md-start">
                    <div class="py-3"><img class="img-fluid" src="assets/images/online-pharmacy.png" height="90" alt="" /></div>
                    <div class="py-3">
                      <h4 class="fw-bold card-title">Online pharmacy</h4>
                      <p class="card-text">Buy your medicines with our mobile application with a simple delivery system</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-9 col-md-4">
                <div class="card h-100 w-100 shadow rounded-lg p-3 p-md-2 p-lg-3 p-xl-5">
                  <div class="card-body text-center text-md-start">
                    <div class="py-3"><img class="img-fluid" src="assets/images/consultation.png" height="90" alt="" /></div>
                    <div class="py-3">
                      <h4 class="fw-bold card-title">Consultation</h4>
                      <p class="card-text">Free consultation with our trusted doctors and get the best recomendations</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-9 col-md-4">
                <div class="card h-100 w-100 shadow rounded-lg p-3 p-md-2 p-lg-3 p-xl-5">
                  <div class="card-body text-center text-md-start">
                    <div class="py-3"><img class="img-fluid" src="assets/images/details-info.png" height="90" alt="" /></div>
                    <div class="py-3">
                      <h4 class="fw-bold card-title">Details info</h4>
                      <p class="card-text">You can get 24/7 urgent care for yourself or your children and your lovely family</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-9 col-md-4">
                <div class="card h-100 w-100 shadow rounded-lg p-3 p-md-2 p-lg-3 p-xl-5">
                  <div class="card-body text-center text-md-start">
                    <div class="py-3"><img class="img-fluid" src="assets/images/emergency-care.png" height="90" alt="" /></div>
                    <div class="py-3">
                      <h4 class="fw-bold card-title">Emergency care</h4>
                      <p class="card-text">Track and save your medical history and health data </p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-9 col-md-4">
                <div class="card h-100 w-100 shadow rounded-lg p-3 p-md-2 p-lg-3 p-xl-5">
                  <div class="card-body text-center text-md-start">
                    <div class="py-3"><img class="img-fluid" src="assets/images/tracking.png" height="90" alt="" /></div>
                    <div class="py-3">
                      <h4 class="fw-bold card-title">Tracking</h4>
                      <p class="card-text">Track and save your medical history and health data </p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="text-center py-4"><button class="btn btn-lg btn-outline-primary rounded-pill" type="submit">Learn more </button></div>
            </div>
          </div>
        </section>
        <section class="py-6 py-lg-8" id="about">
          <div class="bg-holder dotbg2"></div>
          
          <div class="container">
            <div class="row g-xl-0 align-items-center">
              <div class="col-md-6"><img class="img-fluid mb-5 mb-md-0" src="assets/images/about-1.png" width="480" alt="" /></div>
              <div class="col-md-6 text-center text-md-start">
                <h2 class="fw-bold lh-base">Leading healthcare <br />providers</h2>
                <hr class="text-dark mx-auto mx-md-0" style={{height:"2px",width:"50px"}} />
                <p class="pt-3">Jassa provides progressive, and affordable healthcare, accessible on mobile and online for everyone. To us, it’s not just work. We take pride in the solutions we deliver</p>
                <div class="py-3"><button class="btn btn-lg btn-outline-primary rounded-pill" type="submit">Learn more </button></div>
              </div>
            </div>
          </div>
        </section>

      
        
        <section class="py-6 py-lg-8">
          <div class="container">
            <div class="row g-xl-0 align-items-center">
              <div class="col-md-6 order-md-1 text-md-end"><img class="img-fluid mb-5 mb-md-0" src="assets/images/about-1.png" width="480" alt="" /></div>
              <div class="col-md-6 text-center text-md-start order-md-0">
                <h2 class="fw-bold lh-base">Download our <br />mobile apps</h2>
                <hr class="text-dark mx-auto mx-md-0" style={{height:"2px",width:"50px"}} />
                <p class="pt-3">Our dedicated patient engagement app and web portal allow you to access information instantaneously (no tedeous form, long calls, or administrative hassle) and securely</p>
                <div class="py-3"><button class="btn btn-lg btn-outline-primary rounded-pill" type="submit">Learn more <svg class="bi bi-arrow-down-short" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                      <path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z"></path>
                    </svg></button></div>
              </div>
            </div>
          </div>
        </section> 

        <section class="py-8" id="testimonial">
          <div class="container">
            <div class="bg-holder z-index-1 dotbg3"></div>
            
            <div class="bg-holder z-index-1 dot2bg4"></div>
            
            <div class="carousel slide" id="carouselExampleDark" data-bs-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active" data-bs-interval="10000">
                  <div class="row h-100">
                    <div class="col-12">
                      <div class="card text-white bg-primary-gradient">
                        <div class="card-body p-4 p-md-4 p-lg-7">
                          <h2 class="fw-bold text-white text-center">What our customer are saying</h2>
                          <hr class="mx-auto" style={{height:"2px",width:"50px"}} />
                          <div class="d-md-flex align-items-md-center mt-5 text-center text-md-start"><img class="img-fluid me-4 me-md-3 me-lg-4" src="assets/images/user-1.png" width="100" alt="" />
                            <div class="w-md-25 my-3">
                              <h5 class="mb-0 fw-medium text-white">Jassa</h5>
                              <p class="fw-normal mb-0">Founder Circle</p>
                            </div>
                            <div class="w-md-75">
                              <p class="card-text ms-md-5">“Our dedicated patient engagement app and web portal allow you to access information instantaneously (no tedeous form, long calls, or administrative hassle) and securely”</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="carousel-item" data-bs-interval="2000">
                  <div class="row h-100">
                    <div class="col-12">
                      <div class="card text-white bg-primary-gradient">
                        <div class="card-body p-4 p-md-4 p-lg-7">
                          <h2 class="fw-bold text-white text-center">Our dear customers said about us</h2>
                          <hr class="mx-auto" style={{height:"2px",width:"50px"}} />
                          <div class="d-md-flex align-items-md-center mt-5 text-center text-md-start"><img class="img-fluid me-4 me-md-3 me-lg-4" src="assets/images/user-2.png" width="100" alt="" />
                            <div class="w-md-25 my-3">
                              <h5 class="mb-0 fw-medium text-white">Jassa</h5>
                              <p class="fw-normal mb-0">UI/UX Designer</p>
                            </div>
                            <div class="w-md-75">
                              <p class="card-text ms-md-5">“Our dedicated patient engagement app and web portal allow you to access information instantaneously (no tedeous form, long calls, or administrative hassle) and securely”</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="row h-100">
                    <div class="col-12">
                      <div class="card text-white bg-primary-gradient">
                        <div class="card-body p-4 p-md-4 p-lg-7">
                          <h2 class="fw-bold text-white text-center">Our dear customers said about us</h2>
                          <hr class="mx-auto" style={{height:"2px",width:"50px"}} />
                          <div class="d-md-flex align-items-md-center mt-5 text-center text-md-start"><img class="img-fluid me-4 me-md-3 me-lg-4" src="assets/images/user-3.png" width="100" alt="" />
                            <div class="w-md-25 my-3">
                              <h5 class="mb-0 fw-medium text-white">Jassa</h5>
                              <p class="fw-normal mb-0">Web Designer</p>
                            </div>
                            <div class="w-md-75">
                              <p class="card-text ms-md-5">“Our dedicated patient engagement app and web portal allow you to access information instantaneously (no tedeous form, long calls, or administrative hassle) and securely”</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row mt-4 flex-center">
                <div class="col-4 col-sm-5 text-end position-relative z-index-2"><a class="carousel-control-prev carousel-icon z-index-2" href="#carouselExampleDark" role="button" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></a></div>
                <div class="col-auto position-relative z-index-2">
                  <ol class="carousel-indicators">
                    <li class="active" data-bs-target="#carouselExampleDark" data-bs-slide-to="0"></li>
                    <li data-bs-target="#carouselExampleDark" data-bs-slide-to="1"></li>
                    <li data-bs-target="#carouselExampleDark" data-bs-slide-to="2"></li>
                  </ol>
                </div>
                <div class="col-4 col-sm-5 position-relative z-index-2"><a class="carousel-control-next carousel-icon z-index-2" href="#carouselExampleDark" role="button" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></a></div>
              </div>
            </div>
          </div>
        </section>
        <section>
          <div class="bg-holder articlebg"></div>
          
          <div class="container-lg">
            <div class="bg-holder dot2ng"></div>
            
            <div class="row flex-center">
              <div class="col-auto text-center">
                <h2 class="fw-bold">Check out our latest article</h2>
                <hr class="mx-auto text-dark" style={{height:"2px",width:"50px"}} />
              </div>
            </div>
            <div class="row h-100 justify-content-center pt-6">
              <div class="col-12 col-sm-9 col-md-4 mt-4">
                <div class="card h-100 rounded-3 shadow"><img src="assets/images/article-1.png" alt="" />
                  <div class="card-body p-4 text-center text-md-start">
                    <h5 class="fw-bold">Disease detection</h5>
                    <p class="card-text">In this case, the role of the health laboratory is very important to do a disease detection...</p><a class="stretched-link text-decoration-none" href="#" role="button">Read more<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-12 col-sm-9 col-md-4 mt-4">
                <div class="card h-100 rounded-3 shadow"><img src="assets/images/article-2.png" alt="" />
                  <div class="card-body p-4 text-center text-md-start">
                    <h5 class="fw-bold">Herbal medicines </h5>
                    <p class="card-text">Herbal medicine is very widely used at this time because of its very good for your health...</p><a class="stretched-link text-decoration-none" href="#" role="button">Read more<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-12 col-sm-9 col-md-4 mt-4">
                <div class="card h-100 rounded-3 shadow"><img src="assets/images/article-3.png" alt="" />
                  <div class="card-body p-4 text-center text-md-start">
                    <h5 class="fw-bold">Natural care </h5>
                    <p class="card-text">A healthy lifestyle should start from now and also for your skin health.There are some...</p><a class="stretched-link text-decoration-none" href="#" role="button">Read more<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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="text-center pt-4 z-index-2"><button class="btn btn-lg btn-outline-primary rounded-pill z-index-2 hover-top" type="submit">View all</button></div>
            </div>
          </div>
        </section>
        <section class="py-6 pt-7 bg-primary-gradient">
          <div class="bg-holder dot1bg"></div>
          
          <div class="bg-holder dot2bg2"></div>
          
          <div class="container">
            <div class="row">
              <div class="col-12 col-lg-4 order-0 order-sm-0 pe-6"><a class="text-decoration-none" href="#"><img class="img-fluid me-2" src="assets/images/footer-logo.png" alt="" /><span class="fw-bold fs-1 text-light">Jassa</span></a>
                <p class="mt-3 text-white">Jassa provides progressive, and affordable healthcare, accessible on mobile and online for everyone</p>
              </div>
              <div class="col-4 col-md-4 col-lg mb-3 order-2 order-sm-1">
                <h6 class="lh-lg fw-bold text-light">Company</h6>
                <ul class="list-unstyled mb-md-4 mb-lg-0">
                  <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">About</a></li>
                  <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Testimonials</a></li>
                  <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Find a doctor</a></li>
                  <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Apps</a></li>
                </ul>
              </div>
              <div class="col-4 col-md-4 col-lg mb-3 order-3 order-sm-2">
                <h6 class="lh-lg fw-bold text-light"> Region </h6>
                <ul class="list-unstyled mb-md-4 mb-lg-0">
                  <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Indonesia</a></li>
                  <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Singapore</a></li>
                  <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Guide</a></li>
                  <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Hongkong</a></li>
                  <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Canada</a></li>
                </ul>
              </div>
              <div class="col-4 col-md-4 col-lg mb-3 order-1 order-sm-3">
                <h6 class="lh-lg fw-bold text-light">Help </h6>
                <ul class="list-unstyled mb-md-4 mb-lg-0">
                  <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Help center</a></li>
                  <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Contact support</a></li>
                  <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Guide</a></li>
                  <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Instructions</a></li>
                  <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">How it works</a></li>
                </ul>
              </div>
            </div>
          </div>
        </section>

      
      
        <section class="py-2">
          <div class="container">
            <div class="row">
              <div class="col-12">
                <div class="text-center">
                  <p class="mb-0">&copy; This template is made with <svg class="bi bi-suit-heart-fill" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#458FF6" 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-black" href="https://therichpost.com/" target="_blank">Jassa </a></p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
  
)
};
}

export default Home;

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. Guys I will come with more React-Bootstrap free templates.

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

August 30, 2021

Asp.Net Core 5 Bootstrap 5 Healthcare Template Free

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Asp.Net Core 5 Bootstrap 5 Healthcare Template Free.

Working Video

.Net Core 5 came and if you are new then you must check below two links:

ASP.Net Core 5

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

1. Firstly friends we need .net core 5 installed on our machine and for this please check below link:

https://dotnet.microsoft.com/download

2. Now guy’s we need to install c# extension inside our visual studio code editor and for this please check below images:

3. Now guy’s create `demo` folder and open that folder inside visual studio code and run below command to get fresh project setup of .net code 5:

dotnet new webApp -o testproject

4. Now guy’s add below code inside testproject/Pages/Index.cshtml file to check output on web

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<!-- ===============================================-->
    <!--    Main Content-->
    <!-- ===============================================-->
    <main class="main" id="top">
      <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" data-navbar-on-scroll="data-navbar-on-scroll">
        <div class="container"><a class="navbar-brand d-flex align-items-center fw-bold fs-2" href="#"><img class="d-inline-block me-3" src="images/logo.png" alt="" />Jassa</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 ms-auto pt-2 pt-lg-0">
              <li class="nav-item"><a class="nav-link fw-bold active" aria-current="page" href="#">Home</a></li>
              <li class="nav-item"><a class="nav-link" href="#">Find a doctor</a></li>
              <li class="nav-item"><a class="nav-link" href="#">Apps</a></li>
              <li class="nav-item"><a class="nav-link" href="#testimonial">Testimonials</a></li>
              <li class="nav-item"><a class="nav-link" href="#about">About us</a></li>
            </ul>
          </div>
        </div>
      </nav>
      <section class="py-0">
        <div class="bg-holder" style="background-image:url(images/dot.png);background-position:left;background-size:auto;margin-top:-105px;"></div>
        <!--/.bg-holder-->
        <div class="container position-relative">
          <div class="row align-items-center">
            <div class="col-md-5 col-lg-6 order-md-1 pt-8"><img class="img-fluid" src="images/hero-header.png" alt="" /></div>
            <div class="col-md-7 col-lg-6 text-center text-md-start pt-5 pt-md-9">
              <h1 class="mb-4 display-3 fw-bold">Virtual healthcare <br class="d-block d-lg-none d-xl-block" />for you.</h1>
              <p class="mt-3 mb-4 fs-1">Jassa provides progressive, and affordable<br class="d-none d-lg-block" />healthcare, accessible on mobile and online<br class="d-none d-lg-block" />for everyone</p><a class="btn btn-lg btn-primary rounded-pill hover-top" href="#" role="button">Learn more</a>
            </div>
          </div>
        </div>
      </section>
      <section class="py-8">
        <div class="bg-holder" style="background-image:url(images/services-bg.png);background-position:center left;background-size:auto;"></div>
        <!--/.bg-holder-->
        <div class="bg-holder" style="background-image:url(images/dot-2.png);background-position:center right;background-size:auto;margin-left:-180px;margin-top:20px;"></div>
        <!--/.bg-holder-->
        <div class="container-lg">
          <div class="row justify-content-center">
            <div class="col-3 text-center">
              <h2 class="fw-bold">Our services</h2>
              <hr class="w-25 mx-auto text-dark" style="height:2px;" />
            </div>
          </div>
          <div class="row justify-content-center">
            <div class="col-sm-9 col-xl-8 text-center">
              <p>We provide to you the best choiches for you. Adjust it to your health needs and make sure your undergo treatment with our highly qualified doctors you can consult with us which type of service is suitable for your health</p>
            </div>
          </div>
          <div class="row justify-content-center h-100 pt-7 g-4">
            <div class="col-sm-9 col-md-4">
              <div class="card h-100 w-100 shadow rounded-lg p-3 p-md-2 p-lg-3 p-xl-5">
                <div class="card-body text-center text-md-start">
                  <div class="py-3"><img class="img-fluid" src="images/search.png" height="90" alt="" /></div>
                  <div class="py-3">
                    <h4 class="fw-bold card-title">Search doctor</h4>
                    <p class="card-text">Choose your doctor from thousands of specialist, general, and trusted hospitals</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-9 col-md-4">
              <div class="card h-100 w-100 shadow rounded-lg p-3 p-md-2 p-lg-3 p-xl-5">
                <div class="card-body text-center text-md-start">
                  <div class="py-3"><img class="img-fluid" src="images/online-pharmacy.png" height="90" alt="" /></div>
                  <div class="py-3">
                    <h4 class="fw-bold card-title">Online pharmacy</h4>
                    <p class="card-text">Buy your medicines with our mobile application with a simple delivery system</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-9 col-md-4">
              <div class="card h-100 w-100 shadow rounded-lg p-3 p-md-2 p-lg-3 p-xl-5">
                <div class="card-body text-center text-md-start">
                  <div class="py-3"><img class="img-fluid" src="images/consultation.png" height="90" alt="" /></div>
                  <div class="py-3">
                    <h4 class="fw-bold card-title">Consultation</h4>
                    <p class="card-text">Free consultation with our trusted doctors and get the best recomendations</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-9 col-md-4">
              <div class="card h-100 w-100 shadow rounded-lg p-3 p-md-2 p-lg-3 p-xl-5">
                <div class="card-body text-center text-md-start">
                  <div class="py-3"><img class="img-fluid" src="images/details-info.png" height="90" alt="" /></div>
                  <div class="py-3">
                    <h4 class="fw-bold card-title">Details info</h4>
                    <p class="card-text">You can get 24/7 urgent care for yourself or your children and your lovely family</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-9 col-md-4">
              <div class="card h-100 w-100 shadow rounded-lg p-3 p-md-2 p-lg-3 p-xl-5">
                <div class="card-body text-center text-md-start">
                  <div class="py-3"><img class="img-fluid" src="images/emergency-care.png" height="90" alt="" /></div>
                  <div class="py-3">
                    <h4 class="fw-bold card-title">Emergency care</h4>
                    <p class="card-text">Track and save your medical history and health data </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-9 col-md-4">
              <div class="card h-100 w-100 shadow rounded-lg p-3 p-md-2 p-lg-3 p-xl-5">
                <div class="card-body text-center text-md-start">
                  <div class="py-3"><img class="img-fluid" src="images/tracking.png" height="90" alt="" /></div>
                  <div class="py-3">
                    <h4 class="fw-bold card-title">Tracking</h4>
                    <p class="card-text">Track and save your medical history and health data </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="text-center py-4"><button class="btn btn-lg btn-outline-primary rounded-pill" type="submit">Learn more </button></div>
          </div>
        </div>
      </section>
      <section class="py-6 py-lg-8" id="about">
        <div class="bg-holder" style="background-image:url(images/dot.png);background-position:right bottom;background-size:auto;margin-top:50px;"></div>
        <!--/.bg-holder-->
        <div class="container">
          <div class="row g-xl-0 align-items-center">
            <div class="col-md-6"><img class="img-fluid mb-5 mb-md-0" src="images/about-1.png" width="480" alt="" /></div>
            <div class="col-md-6 text-center text-md-start">
              <h2 class="fw-bold lh-base">Leading healthcare <br />providers</h2>
              <hr class="text-dark mx-auto mx-md-0" style="height:2px;width:50px" />
              <p class="pt-3">Jassa provides progressive, and affordable healthcare, accessible on mobile and online for everyone. To us, it’s not just work. We take pride in the solutions we deliver</p>
              <div class="py-3"><button class="btn btn-lg btn-outline-primary rounded-pill" type="submit">Learn more </button></div>
            </div>
          </div>
        </div>
      </section>

      <!-- ============================================-->
      <!-- <section> begin ============================-->
      <section class="py-6 py-lg-8">
        <div class="container">
          <div class="row g-xl-0 align-items-center">
            <div class="col-md-6 order-md-1 text-md-end"><img class="img-fluid mb-5 mb-md-0" src="images/about-1.png" width="480" alt="" /></div>
            <div class="col-md-6 text-center text-md-start order-md-0">
              <h2 class="fw-bold lh-base">Download our <br />mobile apps</h2>
              <hr class="text-dark mx-auto mx-md-0" style="height:2px;width:50px" />
              <p class="pt-3">Our dedicated patient engagement app and web portal allow you to access information instantaneously (no tedeous form, long calls, or administrative hassle) and securely</p>
              <div class="py-3"><button class="btn btn-lg btn-outline-primary rounded-pill" type="submit">Learn more <svg class="bi bi-arrow-down-short" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z"></path>
                  </svg></button></div>
            </div>
          </div>
        </div><!-- end of .container-->
      </section><!-- <section> close ============================-->
      <!-- ============================================-->

      <section class="py-8" id="testimonial">
        <div class="container">
          <div class="bg-holder z-index-1" style="background-image:url(images/dot.png);background-position:right top;background-size:auto;margin-left:-30px;margin-top:10px;filter:contrast(1.5);"></div>
          <!--/.bg-holder-->
          <div class="bg-holder z-index-1" style="background-image:url(images/dot-2.png);background-position:left bottom;background-size:auto;margin-left:-35px;margin-top:-65px;filter:contrast(1.5);"></div>
          <!--/.bg-holder-->
          <div class="carousel slide" id="carouselExampleDark" data-bs-ride="carousel">
            <div class="carousel-inner">
              <div class="carousel-item active" data-bs-interval="10000">
                <div class="row h-100">
                  <div class="col-12">
                    <div class="card text-white bg-primary-gradient">
                      <div class="card-body p-4 p-md-4 p-lg-7">
                        <h2 class="fw-bold text-white text-center">What our customer are saying</h2>
                        <hr class="mx-auto" style="height:2px;width:50px" />
                        <div class="d-md-flex align-items-md-center mt-5 text-center text-md-start"><img class="img-fluid me-4 me-md-3 me-lg-4" src="images/user-1.png" width="100" alt="" />
                          <div class="w-md-25 my-3">
                            <h5 class="mb-0 fw-medium text-white">Jassa</h5>
                            <p class="fw-normal mb-0">Founder Circle</p>
                          </div>
                          <div class="w-md-75">
                            <p class="card-text ms-md-5">“Our dedicated patient engagement app and web portal allow you to access information instantaneously (no tedeous form, long calls, or administrative hassle) and securely”</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="carousel-item" data-bs-interval="2000">
                <div class="row h-100">
                  <div class="col-12">
                    <div class="card text-white bg-primary-gradient">
                      <div class="card-body p-4 p-md-4 p-lg-7">
                        <h2 class="fw-bold text-white text-center">Our dear customers said about us</h2>
                        <hr class="mx-auto" style="height:2px;width:50px" />
                        <div class="d-md-flex align-items-md-center mt-5 text-center text-md-start"><img class="img-fluid me-4 me-md-3 me-lg-4" src="images/user-2.png" width="100" alt="" />
                          <div class="w-md-25 my-3">
                            <h5 class="mb-0 fw-medium text-white">Jassa</h5>
                            <p class="fw-normal mb-0">UI/UX Designer</p>
                          </div>
                          <div class="w-md-75">
                            <p class="card-text ms-md-5">“Our dedicated patient engagement app and web portal allow you to access information instantaneously (no tedeous form, long calls, or administrative hassle) and securely”</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="carousel-item">
                <div class="row h-100">
                  <div class="col-12">
                    <div class="card text-white bg-primary-gradient">
                      <div class="card-body p-4 p-md-4 p-lg-7">
                        <h2 class="fw-bold text-white text-center">Our dear customers said about us</h2>
                        <hr class="mx-auto" style="height:2px;width:50px" />
                        <div class="d-md-flex align-items-md-center mt-5 text-center text-md-start"><img class="img-fluid me-4 me-md-3 me-lg-4" src="images/user-3.png" width="100" alt="" />
                          <div class="w-md-25 my-3">
                            <h5 class="mb-0 fw-medium text-white">Jassa</h5>
                            <p class="fw-normal mb-0">Web Designer</p>
                          </div>
                          <div class="w-md-75">
                            <p class="card-text ms-md-5">“Our dedicated patient engagement app and web portal allow you to access information instantaneously (no tedeous form, long calls, or administrative hassle) and securely”</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row mt-4 flex-center">
              <div class="col-4 col-sm-5 text-end position-relative z-index-2"><a class="carousel-control-prev carousel-icon z-index-2" href="#carouselExampleDark" role="button" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></a></div>
              <div class="col-auto position-relative z-index-2">
                <ol class="carousel-indicators">
                  <li class="active" data-bs-target="#carouselExampleDark" data-bs-slide-to="0"></li>
                  <li data-bs-target="#carouselExampleDark" data-bs-slide-to="1"></li>
                  <li data-bs-target="#carouselExampleDark" data-bs-slide-to="2"></li>
                </ol>
              </div>
              <div class="col-4 col-sm-5 position-relative z-index-2"><a class="carousel-control-next carousel-icon z-index-2" href="#carouselExampleDark" role="button" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></a></div>
            </div>
          </div>
        </div>
      </section>
      <section>
        <div class="bg-holder" style="background-image:url(images/article-bg.png);background-position:right center;background-size:auto;"></div>
        <!--/.bg-holder-->
        <div class="container-lg">
          <div class="bg-holder" style="background-image:url(images/dot-2.png);background-position:left top;background-size:initial;margin-top:120px;margin-left:-35px;"></div>
          <!--/.bg-holder-->
          <div class="row flex-center">
            <div class="col-auto text-center">
              <h2 class="fw-bold">Check out our latest article</h2>
              <hr class="mx-auto text-dark" style="height:2px;width:50px" />
            </div>
          </div>
          <div class="row h-100 justify-content-center pt-6">
            <div class="col-12 col-sm-9 col-md-4 mt-4">
              <div class="card h-100 rounded-3 shadow"><img src="images/article-1.png" alt="" />
                <div class="card-body p-4 text-center text-md-start">
                  <h5 class="fw-bold">Disease detection</h5>
                  <p class="card-text">In this case, the role of the health laboratory is very important to do a disease detection...</p><a class="stretched-link text-decoration-none" href="#" role="button">Read more<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-12 col-sm-9 col-md-4 mt-4">
              <div class="card h-100 rounded-3 shadow"><img src="images/article-2.png" alt="" />
                <div class="card-body p-4 text-center text-md-start">
                  <h5 class="fw-bold">Herbal medicines </h5>
                  <p class="card-text">Herbal medicine is very widely used at this time because of its very good for your health...</p><a class="stretched-link text-decoration-none" href="#" role="button">Read more<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-12 col-sm-9 col-md-4 mt-4">
              <div class="card h-100 rounded-3 shadow"><img src="images/article-3.png" alt="" />
                <div class="card-body p-4 text-center text-md-start">
                  <h5 class="fw-bold">Natural care </h5>
                  <p class="card-text">A healthy lifestyle should start from now and also for your skin health.There are some...</p><a class="stretched-link text-decoration-none" href="#" role="button">Read more<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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="text-center pt-4 z-index-2"><button class="btn btn-lg btn-outline-primary rounded-pill z-index-2 hover-top" type="submit">View all</button></div>
          </div>
        </div>
      </section>
      <section class="py-6 pt-7 bg-primary-gradient">
        <div class="bg-holder" style="background-image:url(images/dot.png);background-position:left bottom;background-size:auto;filter:contrast(1.5);"></div>
        <!--/.bg-holder-->
        <div class="bg-holder" style="background-image:url(images/dot-2.png);background-position:right top;background-size:auto;margin-top:-75px;"></div>
        <!--/.bg-holder-->
        <div class="container">
          <div class="row">
            <div class="col-12 col-lg-4 order-0 order-sm-0 pe-6"><a class="text-decoration-none" href="#"><img class="img-fluid me-2" src="images/footer-logo.png" alt="" /><span class="fw-bold fs-1 text-light">Jassa</span></a>
              <p class="mt-3 text-white">Jassa provides progressive, and affordable healthcare, accessible on mobile and online for everyone</p>
            </div>
            <div class="col-4 col-md-4 col-lg mb-3 order-2 order-sm-1">
              <h6 class="lh-lg fw-bold text-light">Company</h6>
              <ul class="list-unstyled mb-md-4 mb-lg-0">
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">About</a></li>
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Testimonials</a></li>
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Find a doctor</a></li>
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Apps</a></li>
              </ul>
            </div>
            <div class="col-4 col-md-4 col-lg mb-3 order-3 order-sm-2">
              <h6 class="lh-lg fw-bold text-light"> Region </h6>
              <ul class="list-unstyled mb-md-4 mb-lg-0">
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Indonesia</a></li>
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Singapore</a></li>
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Guide</a></li>
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Hongkong</a></li>
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Canada</a></li>
              </ul>
            </div>
            <div class="col-4 col-md-4 col-lg mb-3 order-1 order-sm-3">
              <h6 class="lh-lg fw-bold text-light">Help </h6>
              <ul class="list-unstyled mb-md-4 mb-lg-0">
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Help center</a></li>
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Contact support</a></li>
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Guide</a></li>
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Instructions</a></li>
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">How it works</a></li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!-- ============================================-->
      <!-- <section> begin ============================-->
      <section class="py-2">
        <div class="container">
          <div class="row">
            <div class="col-12">
              <div class="text-center">
                <p class="mb-0">&copy; This template is made with <svg class="bi bi-suit-heart-fill" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#458FF6" 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-black" href="https://therichpost.com/" target="_blank">Jassa </a></p>
              </div>
            </div>
          </div>
        </div><!-- end of .container-->
      </section><!-- <section> close ============================-->
      <!-- ============================================-->

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

5. Now guy’s add below code inside testproject/Pages/Shared/_Layout.cshtml file to check output on web browser:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - testproject</title>
   
    <!--    Stylesheets-->
    <!-- ===============================================-->
    <link href="~/css/theme.min.css" rel="stylesheet" />
   <!-- ===============================================-->
    <!--    JavaScripts-->
    <!-- ===============================================-->
    <script src="~/js/popper.min.js"></script>
    <script src="~/js/bootstrap.min.js"></script>
    <script src="~/js/is.min.js"></script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
    <script src="~/js/theme.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500&amp;display=swap" rel="stylesheet">
     
</head>
<body class="hold-transition sidebar-mini layout-fixed">
   @RenderBody()
  
</body>
</html>

6. 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 and place them inside wwwroot folder:

https://therichpost.com/health-template.zip

7. Now guy’s in the end please run below command inside your project terminal and check the output:

dotnet watch run //http://localhost:5000/

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.

Jassa

Thanks

August 29, 2021

Angular 12 Bootstrap 5 Healthcare Template Free

Hello friends, welcome back to my blog. Today this blog post I will tell you, Angular 12 Bootstrap 5 Healthcare Template Free.

In this post, guys we will cover below things:

Bootstrap 4 Angular 12 Free Template Creation.
Angular 12 Bootstrap 5 Responsive Toggle Navbar.
Bootstrap 5 Sticky Navbar 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 landing 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/health-template.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:

<!-- ===============================================-->
    <!--    Main Content-->
    <!-- ===============================================-->
    <main class="main" id="top">
      <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" data-navbar-on-scroll="data-navbar-on-scroll">
        <div class="container"><a class="navbar-brand d-flex align-items-center fw-bold fs-2" href="#"><img class="d-inline-block me-3" src="assets/images/logo.png" alt="" />Jassa</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 ms-auto pt-2 pt-lg-0">
              <li class="nav-item"><a class="nav-link fw-bold active" aria-current="page" href="#">Home</a></li>
              <li class="nav-item"><a class="nav-link" href="#">Find a doctor</a></li>
              <li class="nav-item"><a class="nav-link" href="#">Apps</a></li>
              <li class="nav-item"><a class="nav-link" href="#testimonial">Testimonials</a></li>
              <li class="nav-item"><a class="nav-link" href="#about">About us</a></li>
            </ul>
          </div>
        </div>
      </nav>
      <section class="py-0">
        <div class="bg-holder" style="background-image:url(assets/images/dot.png);background-position:left;background-size:auto;margin-top:-105px;"></div>
        <!--/.bg-holder-->
        <div class="container position-relative">
          <div class="row align-items-center">
            <div class="col-md-5 col-lg-6 order-md-1 pt-8"><img class="img-fluid" src="assets/images/hero-header.png" alt="" /></div>
            <div class="col-md-7 col-lg-6 text-center text-md-start pt-5 pt-md-9">
              <h1 class="mb-4 display-3 fw-bold">Virtual healthcare <br class="d-block d-lg-none d-xl-block" />for you.</h1>
              <p class="mt-3 mb-4 fs-1">Jassa provides progressive, and affordable<br class="d-none d-lg-block" />healthcare, accessible on mobile and online<br class="d-none d-lg-block" />for everyone</p><a class="btn btn-lg btn-primary rounded-pill hover-top" href="#" role="button">Learn more</a>
            </div>
          </div>
        </div>
      </section>
      <section class="py-8">
        <div class="bg-holder" style="background-image:url(assets/images/services-bg.png);background-position:center left;background-size:auto;"></div>
        <!--/.bg-holder-->
        <div class="bg-holder" style="background-image:url(assets/images/dot-2.png);background-position:center right;background-size:auto;margin-left:-180px;margin-top:20px;"></div>
        <!--/.bg-holder-->
        <div class="container-lg">
          <div class="row justify-content-center">
            <div class="col-3 text-center">
              <h2 class="fw-bold">Our services</h2>
              <hr class="w-25 mx-auto text-dark" style="height:2px;" />
            </div>
          </div>
          <div class="row justify-content-center">
            <div class="col-sm-9 col-xl-8 text-center">
              <p>We provide to you the best choiches for you. Adjust it to your health needs and make sure your undergo treatment with our highly qualified doctors you can consult with us which type of service is suitable for your health</p>
            </div>
          </div>
          <div class="row justify-content-center h-100 pt-7 g-4">
            <div class="col-sm-9 col-md-4">
              <div class="card h-100 w-100 shadow rounded-lg p-3 p-md-2 p-lg-3 p-xl-5">
                <div class="card-body text-center text-md-start">
                  <div class="py-3"><img class="img-fluid" src="assets/images/search.png" height="90" alt="" /></div>
                  <div class="py-3">
                    <h4 class="fw-bold card-title">Search doctor</h4>
                    <p class="card-text">Choose your doctor from thousands of specialist, general, and trusted hospitals</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-9 col-md-4">
              <div class="card h-100 w-100 shadow rounded-lg p-3 p-md-2 p-lg-3 p-xl-5">
                <div class="card-body text-center text-md-start">
                  <div class="py-3"><img class="img-fluid" src="assets/images/online-pharmacy.png" height="90" alt="" /></div>
                  <div class="py-3">
                    <h4 class="fw-bold card-title">Online pharmacy</h4>
                    <p class="card-text">Buy your medicines with our mobile application with a simple delivery system</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-9 col-md-4">
              <div class="card h-100 w-100 shadow rounded-lg p-3 p-md-2 p-lg-3 p-xl-5">
                <div class="card-body text-center text-md-start">
                  <div class="py-3"><img class="img-fluid" src="assets/images/consultation.png" height="90" alt="" /></div>
                  <div class="py-3">
                    <h4 class="fw-bold card-title">Consultation</h4>
                    <p class="card-text">Free consultation with our trusted doctors and get the best recomendations</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-9 col-md-4">
              <div class="card h-100 w-100 shadow rounded-lg p-3 p-md-2 p-lg-3 p-xl-5">
                <div class="card-body text-center text-md-start">
                  <div class="py-3"><img class="img-fluid" src="assets/images/details-info.png" height="90" alt="" /></div>
                  <div class="py-3">
                    <h4 class="fw-bold card-title">Details info</h4>
                    <p class="card-text">You can get 24/7 urgent care for yourself or your children and your lovely family</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-9 col-md-4">
              <div class="card h-100 w-100 shadow rounded-lg p-3 p-md-2 p-lg-3 p-xl-5">
                <div class="card-body text-center text-md-start">
                  <div class="py-3"><img class="img-fluid" src="assets/images/emergency-care.png" height="90" alt="" /></div>
                  <div class="py-3">
                    <h4 class="fw-bold card-title">Emergency care</h4>
                    <p class="card-text">Track and save your medical history and health data </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-9 col-md-4">
              <div class="card h-100 w-100 shadow rounded-lg p-3 p-md-2 p-lg-3 p-xl-5">
                <div class="card-body text-center text-md-start">
                  <div class="py-3"><img class="img-fluid" src="assets/images/tracking.png" height="90" alt="" /></div>
                  <div class="py-3">
                    <h4 class="fw-bold card-title">Tracking</h4>
                    <p class="card-text">Track and save your medical history and health data </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="text-center py-4"><button class="btn btn-lg btn-outline-primary rounded-pill" type="submit">Learn more </button></div>
          </div>
        </div>
      </section>
      <section class="py-6 py-lg-8" id="about">
        <div class="bg-holder" style="background-image:url(assets/images/dot.png);background-position:right bottom;background-size:auto;margin-top:50px;"></div>
        <!--/.bg-holder-->
        <div class="container">
          <div class="row g-xl-0 align-items-center">
            <div class="col-md-6"><img class="img-fluid mb-5 mb-md-0" src="assets/images/about-1.png" width="480" alt="" /></div>
            <div class="col-md-6 text-center text-md-start">
              <h2 class="fw-bold lh-base">Leading healthcare <br />providers</h2>
              <hr class="text-dark mx-auto mx-md-0" style="height:2px;width:50px" />
              <p class="pt-3">Jassa provides progressive, and affordable healthcare, accessible on mobile and online for everyone. To us, it’s not just work. We take pride in the solutions we deliver</p>
              <div class="py-3"><button class="btn btn-lg btn-outline-primary rounded-pill" type="submit">Learn more </button></div>
            </div>
          </div>
        </div>
      </section>

      <!-- ============================================-->
      <!-- <section> begin ============================-->
      <section class="py-6 py-lg-8">
        <div class="container">
          <div class="row g-xl-0 align-items-center">
            <div class="col-md-6 order-md-1 text-md-end"><img class="img-fluid mb-5 mb-md-0" src="assets/images/about-1.png" width="480" alt="" /></div>
            <div class="col-md-6 text-center text-md-start order-md-0">
              <h2 class="fw-bold lh-base">Download our <br />mobile apps</h2>
              <hr class="text-dark mx-auto mx-md-0" style="height:2px;width:50px" />
              <p class="pt-3">Our dedicated patient engagement app and web portal allow you to access information instantaneously (no tedeous form, long calls, or administrative hassle) and securely</p>
              <div class="py-3"><button class="btn btn-lg btn-outline-primary rounded-pill" type="submit">Learn more <svg class="bi bi-arrow-down-short" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z"></path>
                  </svg></button></div>
            </div>
          </div>
        </div><!-- end of .container-->
      </section><!-- <section> close ============================-->
      <!-- ============================================-->

      <section class="py-8" id="testimonial">
        <div class="container">
          <div class="bg-holder z-index-1" style="background-image:url(assets/images/dot.png);background-position:right top;background-size:auto;margin-left:-30px;margin-top:10px;filter:contrast(1.5);"></div>
          <!--/.bg-holder-->
          <div class="bg-holder z-index-1" style="background-image:url(assets/images/dot-2.png);background-position:left bottom;background-size:auto;margin-left:-35px;margin-top:-65px;filter:contrast(1.5);"></div>
          <!--/.bg-holder-->
          <div class="carousel slide" id="carouselExampleDark" data-bs-ride="carousel">
            <div class="carousel-inner">
              <div class="carousel-item active" data-bs-interval="10000">
                <div class="row h-100">
                  <div class="col-12">
                    <div class="card text-white bg-primary-gradient">
                      <div class="card-body p-4 p-md-4 p-lg-7">
                        <h2 class="fw-bold text-white text-center">What our customer are saying</h2>
                        <hr class="mx-auto" style="height:2px;width:50px" />
                        <div class="d-md-flex align-items-md-center mt-5 text-center text-md-start"><img class="img-fluid me-4 me-md-3 me-lg-4" src="assets/images/user-1.png" width="100" alt="" />
                          <div class="w-md-25 my-3">
                            <h5 class="mb-0 fw-medium text-white">Jassa</h5>
                            <p class="fw-normal mb-0">Founder Circle</p>
                          </div>
                          <div class="w-md-75">
                            <p class="card-text ms-md-5">“Our dedicated patient engagement app and web portal allow you to access information instantaneously (no tedeous form, long calls, or administrative hassle) and securely”</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="carousel-item" data-bs-interval="2000">
                <div class="row h-100">
                  <div class="col-12">
                    <div class="card text-white bg-primary-gradient">
                      <div class="card-body p-4 p-md-4 p-lg-7">
                        <h2 class="fw-bold text-white text-center">Our dear customers said about us</h2>
                        <hr class="mx-auto" style="height:2px;width:50px" />
                        <div class="d-md-flex align-items-md-center mt-5 text-center text-md-start"><img class="img-fluid me-4 me-md-3 me-lg-4" src="assets/images/user-2.png" width="100" alt="" />
                          <div class="w-md-25 my-3">
                            <h5 class="mb-0 fw-medium text-white">Jassa</h5>
                            <p class="fw-normal mb-0">UI/UX Designer</p>
                          </div>
                          <div class="w-md-75">
                            <p class="card-text ms-md-5">“Our dedicated patient engagement app and web portal allow you to access information instantaneously (no tedeous form, long calls, or administrative hassle) and securely”</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="carousel-item">
                <div class="row h-100">
                  <div class="col-12">
                    <div class="card text-white bg-primary-gradient">
                      <div class="card-body p-4 p-md-4 p-lg-7">
                        <h2 class="fw-bold text-white text-center">Our dear customers said about us</h2>
                        <hr class="mx-auto" style="height:2px;width:50px" />
                        <div class="d-md-flex align-items-md-center mt-5 text-center text-md-start"><img class="img-fluid me-4 me-md-3 me-lg-4" src="assets/images/user-3.png" width="100" alt="" />
                          <div class="w-md-25 my-3">
                            <h5 class="mb-0 fw-medium text-white">Jassa</h5>
                            <p class="fw-normal mb-0">Web Designer</p>
                          </div>
                          <div class="w-md-75">
                            <p class="card-text ms-md-5">“Our dedicated patient engagement app and web portal allow you to access information instantaneously (no tedeous form, long calls, or administrative hassle) and securely”</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row mt-4 flex-center">
              <div class="col-4 col-sm-5 text-end position-relative z-index-2"><a class="carousel-control-prev carousel-icon z-index-2" href="#carouselExampleDark" role="button" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></a></div>
              <div class="col-auto position-relative z-index-2">
                <ol class="carousel-indicators">
                  <li class="active" data-bs-target="#carouselExampleDark" data-bs-slide-to="0"></li>
                  <li data-bs-target="#carouselExampleDark" data-bs-slide-to="1"></li>
                  <li data-bs-target="#carouselExampleDark" data-bs-slide-to="2"></li>
                </ol>
              </div>
              <div class="col-4 col-sm-5 position-relative z-index-2"><a class="carousel-control-next carousel-icon z-index-2" href="#carouselExampleDark" role="button" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></a></div>
            </div>
          </div>
        </div>
      </section>
      <section>
        <div class="bg-holder" style="background-image:url(assets/images/article-bg.png);background-position:right center;background-size:auto;"></div>
        <!--/.bg-holder-->
        <div class="container-lg">
          <div class="bg-holder" style="background-image:url(assets/images/dot-2.png);background-position:left top;background-size:initial;margin-top:120px;margin-left:-35px;"></div>
          <!--/.bg-holder-->
          <div class="row flex-center">
            <div class="col-auto text-center">
              <h2 class="fw-bold">Check out our latest article</h2>
              <hr class="mx-auto text-dark" style="height:2px;width:50px" />
            </div>
          </div>
          <div class="row h-100 justify-content-center pt-6">
            <div class="col-12 col-sm-9 col-md-4 mt-4">
              <div class="card h-100 rounded-3 shadow"><img src="assets/images/article-1.png" alt="" />
                <div class="card-body p-4 text-center text-md-start">
                  <h5 class="fw-bold">Disease detection</h5>
                  <p class="card-text">In this case, the role of the health laboratory is very important to do a disease detection...</p><a class="stretched-link text-decoration-none" href="#" role="button">Read more<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-12 col-sm-9 col-md-4 mt-4">
              <div class="card h-100 rounded-3 shadow"><img src="assets/images/article-2.png" alt="" />
                <div class="card-body p-4 text-center text-md-start">
                  <h5 class="fw-bold">Herbal medicines </h5>
                  <p class="card-text">Herbal medicine is very widely used at this time because of its very good for your health...</p><a class="stretched-link text-decoration-none" href="#" role="button">Read more<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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-12 col-sm-9 col-md-4 mt-4">
              <div class="card h-100 rounded-3 shadow"><img src="assets/images/article-3.png" alt="" />
                <div class="card-body p-4 text-center text-md-start">
                  <h5 class="fw-bold">Natural care </h5>
                  <p class="card-text">A healthy lifestyle should start from now and also for your skin health.There are some...</p><a class="stretched-link text-decoration-none" href="#" role="button">Read more<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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="text-center pt-4 z-index-2"><button class="btn btn-lg btn-outline-primary rounded-pill z-index-2 hover-top" type="submit">View all</button></div>
          </div>
        </div>
      </section>
      <section class="py-6 pt-7 bg-primary-gradient">
        <div class="bg-holder" style="background-image:url(assets/images/dot.png);background-position:left bottom;background-size:auto;filter:contrast(1.5);"></div>
        <!--/.bg-holder-->
        <div class="bg-holder" style="background-image:url(assets/images/dot-2.png);background-position:right top;background-size:auto;margin-top:-75px;"></div>
        <!--/.bg-holder-->
        <div class="container">
          <div class="row">
            <div class="col-12 col-lg-4 order-0 order-sm-0 pe-6"><a class="text-decoration-none" href="#"><img class="img-fluid me-2" src="assets/images/footer-logo.png" alt="" /><span class="fw-bold fs-1 text-light">Jassa</span></a>
              <p class="mt-3 text-white">Jassa provides progressive, and affordable healthcare, accessible on mobile and online for everyone</p>
            </div>
            <div class="col-4 col-md-4 col-lg mb-3 order-2 order-sm-1">
              <h6 class="lh-lg fw-bold text-light">Company</h6>
              <ul class="list-unstyled mb-md-4 mb-lg-0">
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">About</a></li>
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Testimonials</a></li>
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Find a doctor</a></li>
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Apps</a></li>
              </ul>
            </div>
            <div class="col-4 col-md-4 col-lg mb-3 order-3 order-sm-2">
              <h6 class="lh-lg fw-bold text-light"> Region </h6>
              <ul class="list-unstyled mb-md-4 mb-lg-0">
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Indonesia</a></li>
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Singapore</a></li>
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Guide</a></li>
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Hongkong</a></li>
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Canada</a></li>
              </ul>
            </div>
            <div class="col-4 col-md-4 col-lg mb-3 order-1 order-sm-3">
              <h6 class="lh-lg fw-bold text-light">Help </h6>
              <ul class="list-unstyled mb-md-4 mb-lg-0">
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Help center</a></li>
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Contact support</a></li>
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Guide</a></li>
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">Instructions</a></li>
                <li class="lh-lg"><a class="text-light fs--1 text-decoration-none" href="#!">How it works</a></li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!-- ============================================-->
      <!-- <section> begin ============================-->
      <section class="py-2">
        <div class="container">
          <div class="row">
            <div class="col-12">
              <div class="text-center">
                <p class="mb-0">&copy; This template is made with&nbsp;<svg class="bi bi-suit-heart-fill" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#458FF6" 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>&nbsp;by&nbsp;<a class="text-black" href="https://therichpost.com/" target="_blank">Jassa </a></p>
              </div>
            </div>
          </div>
        </div><!-- end of .container-->
      </section><!-- <section> close ============================-->
      <!-- ============================================-->

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

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

...
<head>
  <meta charset="utf-8">
  <title>Angular12demos</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!-- ===============================================-->
    <!--    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/is.min.js"></script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
    <script src="assets/js/theme.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500&amp;display=swap" rel="stylesheet">
</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

August 28, 2021

Asp.NET Core 5 V-Shop Free Ecommerce Template Download

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Asp.NET Core 5 V-Shop Free Ecommerce Template Download.

Working Video

.Net Core 5 came and if you are new then you must check below two links:

ASP.Net Core 5

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

1. Firstly friends we need .net core 5 installed on our machine and for this please check below link:

https://dotnet.microsoft.com/download

2. Now guy’s we need to install c# extension inside our visual studio code editor and for this please check below images:

3. Now guy’s create `demo` folder and open that folder inside visual studio code and run below command to get fresh project setup of .net code 5:

dotnet new webApp -o testproject

4. Now guy’s add below code inside testproject/Pages/Index.cshtml file to check output on web browser:

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

   
<div class="humberger__menu__overlay"></div>
 <div class="humberger__menu__wrapper">
  <div class="humberger__menu__logo">
    <a href="#" class="logo">V-Shop</a>
  </div>
  <div class="humberger__menu__cart">
    <ul>
      <li><a href="#"><i class="fa fa-heart"></i> <span>1</span></a></li>
      <li><a href="#"><i class="fa fa-shopping-bag"></i> <span>3</span></a></li>
    </ul>
    <div class="header__cart__price">item: <span>$150.00</span></div>
  </div>
  <div class="humberger__menu__widget">
    <div class="header__top__right__language">
      <img src="~/img/language.png" alt="" />
      <div>English</div>
      <span class="arrow_carrot-down"></span>
      <ul>
        <li><a href="#">Spanis</a></li>
        <li><a href="#">English</a></li>
      </ul>
    </div>
    <div class="header__top__right__auth">
      <a href="#"><i class="fa fa-user"></i> Login</a>
    </div>
  </div>
  <nav class="humberger__menu__nav mobile-menu">
    <ul>
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Shop</a></li>
      <li><a href="#">Pages</a>
        <ul class="header__menu__dropdown">
          <li><a href="#">Shop Details</a></li>
          <li><a href="#">Shoping Cart</a></li>
          <li><a href="#">Check Out</a></li>
          <li><a href="#">Blog Details</a></li>
        </ul>
      </li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <div id="mobile-menu-wrap"></div>
  <div class="header__top__right__social">
    <a href="#"><i class="fa fa-facebook"></i></a>
    <a href="#"><i class="fa fa-twitter"></i></a>
    <a href="#"><i class="fa fa-linkedin"></i></a>
    <a href="#"><i class="fa fa-pinterest-p"></i></a>
  </div>
  <div class="humberger__menu__contact">
    <ul>
      <li><i class="fa fa-envelope"></i> therichposts@gmail.com</li>
      <li>Free Shipping for all Order of $99</li>
    </ul>
  </div>
</div>

<header class="header">
  <div class="header__top">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-md-6">
          <div class="header__top__left">
            <ul>
              <li><i class="fa fa-envelope"></i> therichposts@gmail.com</li>
              <li>Free Shipping for all Order of $99</li>
            </ul>
          </div>
        </div>
        <div class="col-lg-6 col-md-6">
          <div class="header__top__right">
            <div class="header__top__right__social">
              <a href="#"><i class="fa fa-facebook"></i></a>
              <a href="#"><i class="fa fa-twitter"></i></a>
              <a href="#"><i class="fa fa-linkedin"></i></a>
              <a href="#"><i class="fa fa-pinterest-p"></i></a>
            </div>
            <div class="header__top__right__language">
              <img src="~/img/language.png" alt="" />
              <div>English</div>
              <span class="arrow_carrot-down"></span>
              <ul>
                <li><a href="#">Spanis</a></li>
                <li><a href="#">English</a></li>
              </ul>
            </div>
            <div class="header__top__right__auth">
              <a href="#"><i class="fa fa-user"></i> Login</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-lg-3">
        <div class="header__logo">
          <a href="#" class="logo">V-Shop</a>
        </div>
      </div>
      <div class="col-lg-6">
        <nav class="header__menu">
          <ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Shop</a></li>
            <li><a href="#">Pages</a>
              <ul class="header__menu__dropdown">
                <li><a href="#">Shop Details</a></li>
                <li><a href="#">Shoping Cart</a></li>
                <li><a href="#">Check Out</a></li>
                <li><a href="#">Blog Details</a></li>
              </ul>
            </li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
      </div>
      <div class="col-lg-3">
        <div class="header__cart">
          <ul>
            <li><a href="#"><i class="fa fa-heart"></i> <span>1</span></a></li>
            <li><a href="#"><i class="fa fa-shopping-bag"></i> <span>3</span></a></li>
          </ul>
          <div class="header__cart__price">item: <span>$150.00</span></div>
        </div>
      </div>
    </div>
    <div class="humberger__open">
      <i class="fa fa-bars"></i>
    </div>
  </div>
</header>

<section class="hero">
  <div class="container">
    <div class="row">
      <div class="col-lg-3">
        <div class="hero__categories">
          <div class="hero__categories__all">
            <i class="fa fa-bars"></i>
            <span>All departments</span>
          </div>
          <ul>
            <li><a href="#">Fresh Meat</a></li>
            <li><a href="#">Vegetables</a></li>
            <li><a href="#">Fruit & Nut Gifts</a></li>
            <li><a href="#">Fresh Berries</a></li>
            <li><a href="#">Ocean Foods</a></li>
            <li><a href="#">Butter & Eggs</a></li>
            <li><a href="#">Fastfood</a></li>
            <li><a href="#">Fresh Onion</a></li>
            <li><a href="#">Papayaya & Crisps</a></li>
            <li><a href="#">Oatmeal</a></li>
            <li><a href="#">Fresh Bananas</a></li>
          </ul>
        </div>
      </div>
      <div class="col-lg-9">
        <div class="hero__search">
          <div class="hero__search__form">
            <form action="#">
              <div class="hero__search__categories">
                All Categories
                <span class="arrow_carrot-down"></span>
              </div>
              <input type="text" placeholder="What do yo u need?" />
              <button type="submit" class="site-btn">SEARCH</button>
            </form>
          </div>
          <div class="hero__search__phone">
            <div class="hero__search__phone__icon">
              <i class="fa fa-phone"></i>
            </div>
            <div class="hero__search__phone__text">
              <h5>1234567890</h5>
              <span>support 24/7 time</span>
            </div>
          </div>
        </div>
        <div class="hero__item set-bg" data-setbg="img/hero/banner.jpg">
          <div class="hero__text">
            <span>FRUIT FRESH</span>
            <h2>Vegetable <br />100% Organic</h2>
            <p>Free Pickup and Delivery Available</p>
            <a href="#" class="primary-btn">SHOP NOW</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="categories">
  <div class="container">
    <div class="row">
      <div class="categories__slider owl-carousel">
        <div class="col-lg-3">
          <div class="categories__item set-bg" data-setbg="img/categories/cat-1.jpg">
            <h5><a href="#">Fresh Fruit</a></h5>
          </div>
        </div>
        <div class="col-lg-3">
          <div class="categories__item set-bg" data-setbg="img/categories/cat-2.jpg">
            <h5><a href="#">Dried Fruit</a></h5>
          </div>
        </div>
        <div class="col-lg-3">
          <div class="categories__item set-bg" data-setbg="img/categories/cat-3.jpg">
            <h5><a href="#">Vegetables</a></h5>
          </div>
        </div>
        <div class="col-lg-3">
          <div class="categories__item set-bg" data-setbg="img/categories/cat-4.jpg">
            <h5><a href="#">drink fruits</a></h5>
          </div>
        </div>
        <div class="col-lg-3">
          <div class="categories__item set-bg" data-setbg="img/categories/cat-5.jpg">
            <h5><a href="#">drink fruits</a></h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="featured spad">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="section-title">
          <h2>Featured Product</h2>
        </div>
        <div class="featured__controls">
          <ul>
            <li class="active" data-filter="*">All</li>
            <li data-filter=".oranges">Oranges</li>
            <li data-filter=".fresh-meat">Fresh Meat</li>
            <li data-filter=".vegetables">Vegetables</li>
            <li data-filter=".fastfood">Fastfood</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="row featured__filter">
      <div class="col-lg-3 col-md-4 col-sm-6 mix oranges fresh-meat">
        <div class="featured__item">
          <div class="featured__item__pic set-bg" data-setbg="img/featured/feature-1.jpg">
            <ul class="featured__item__pic__hover">
              <li><a href="#"><i class="fa fa-heart"></i></a></li>
              <li><a href="#"><i class="fa fa-retweet"></i></a></li>
              <li><a href="#"><i class="fa fa-shopping-cart"></i></a></li>
            </ul>
          </div>
          <div class="featured__item__text">
            <h6><a href="#">Crab Pool Security</a></h6>
            <h5>$30.00</h5>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 mix vegetables fastfood">
        <div class="featured__item">
          <div class="featured__item__pic set-bg" data-setbg="img/featured/feature-2.jpg">
            <ul class="featured__item__pic__hover">
              <li><a href="#"><i class="fa fa-heart"></i></a></li>
              <li><a href="#"><i class="fa fa-retweet"></i></a></li>
              <li><a href="#"><i class="fa fa-shopping-cart"></i></a></li>
            </ul>
          </div>
          <div class="featured__item__text">
            <h6><a href="#">Crab Pool Security</a></h6>
            <h5>$30.00</h5>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 mix vegetables fresh-meat">
        <div class="featured__item">
          <div class="featured__item__pic set-bg" data-setbg="img/featured/feature-3.jpg">
            <ul class="featured__item__pic__hover">
              <li><a href="#"><i class="fa fa-heart"></i></a></li>
              <li><a href="#"><i class="fa fa-retweet"></i></a></li>
              <li><a href="#"><i class="fa fa-shopping-cart"></i></a></li>
            </ul>
          </div>
          <div class="featured__item__text">
            <h6><a href="#">Crab Pool Security</a></h6>
            <h5>$30.00</h5>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 mix fastfood oranges">
        <div class="featured__item">
          <div class="featured__item__pic set-bg" data-setbg="img/featured/feature-4.jpg">
            <ul class="featured__item__pic__hover">
              <li><a href="#"><i class="fa fa-heart"></i></a></li>
              <li><a href="#"><i class="fa fa-retweet"></i></a></li>
              <li><a href="#"><i class="fa fa-shopping-cart"></i></a></li>
            </ul>
          </div>
          <div class="featured__item__text">
            <h6><a href="#">Crab Pool Security</a></h6>
            <h5>$30.00</h5>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 mix fresh-meat vegetables">
        <div class="featured__item">
          <div class="featured__item__pic set-bg" data-setbg="img/featured/feature-5.jpg">
            <ul class="featured__item__pic__hover">
              <li><a href="#"><i class="fa fa-heart"></i></a></li>
              <li><a href="#"><i class="fa fa-retweet"></i></a></li>
              <li><a href="#"><i class="fa fa-shopping-cart"></i></a></li>
            </ul>
          </div>
          <div class="featured__item__text">
            <h6><a href="#">Crab Pool Security</a></h6>
            <h5>$30.00</h5>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 mix oranges fastfood">
        <div class="featured__item">
          <div class="featured__item__pic set-bg" data-setbg="img/featured/feature-6.jpg">
            <ul class="featured__item__pic__hover">
              <li><a href="#"><i class="fa fa-heart"></i></a></li>
              <li><a href="#"><i class="fa fa-retweet"></i></a></li>
              <li><a href="#"><i class="fa fa-shopping-cart"></i></a></li>
            </ul>
          </div>
          <div class="featured__item__text">
            <h6><a href="#">Crab Pool Security</a></h6>
            <h5>$30.00</h5>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 mix fresh-meat vegetables">
        <div class="featured__item">
          <div class="featured__item__pic set-bg" data-setbg="img/featured/feature-7.jpg">
            <ul class="featured__item__pic__hover">
              <li><a href="#"><i class="fa fa-heart"></i></a></li>
              <li><a href="#"><i class="fa fa-retweet"></i></a></li>
              <li><a href="#"><i class="fa fa-shopping-cart"></i></a></li>
            </ul>
          </div>
          <div class="featured__item__text">
            <h6><a href="#">Crab Pool Security</a></h6>
            <h5>$30.00</h5>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 mix fastfood vegetables">
        <div class="featured__item">
          <div class="featured__item__pic set-bg" data-setbg="img/featured/feature-8.jpg">
            <ul class="featured__item__pic__hover">
              <li><a href="#"><i class="fa fa-heart"></i></a></li>
              <li><a href="#"><i class="fa fa-retweet"></i></a></li>
              <li><a href="#"><i class="fa fa-shopping-cart"></i></a></li>
            </ul>
          </div>
          <div class="featured__item__text">
            <h6><a href="#">Crab Pool Security</a></h6>
            <h5>$30.00</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="banner">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 col-md-6 col-sm-6">
        <div class="banner__pic">
          <img src="~/img/banner/banner-1.jpg" alt="" />
        </div>
      </div>
      <div class="col-lg-6 col-md-6 col-sm-6">
        <div class="banner__pic">
          <img src="~/img/banner/banner-2.jpg" alt="" />
        </div>
      </div>
    </div>
  </div>
</div>

<section class="latest-product spad">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-md-6">
        <div class="latest-product__text">
          <h4>Latest Products</h4>
          <div class="latest-product__slider owl-carousel">
            <div class="latest-prdouct__slider__item">
              <a href="#" class="latest-product__item">
                <div class="latest-product__item__pic">
                  <img src="~/img/latest-product/lp-1.jpg" alt="" />
                </div>
                <div class="latest-product__item__text">
                  <h6>Crab Pool Security</h6>
                  <span>$30.00</span>
                </div>
              </a>
              <a href="#" class="latest-product__item">
                <div class="latest-product__item__pic">
                  <img src="~/img/latest-product/lp-2.jpg" alt="" />
                </div>
                <div class="latest-product__item__text">
                  <h6>Crab Pool Security</h6>
                  <span>$30.00</span>
                </div>
              </a>
              <a href="#" class="latest-product__item">
                <div class="latest-product__item__pic">
                  <img src="~/img/latest-product/lp-3.jpg" alt="" />
                </div>
                <div class="latest-product__item__text">
                  <h6>Crab Pool Security</h6>
                  <span>$30.00</span>
                </div>
              </a>
            </div>
            <div class="latest-prdouct__slider__item">
              <a href="#" class="latest-product__item">
                <div class="latest-product__item__pic">
                  <img src="~/img/latest-product/lp-1.jpg" alt="" />
                </div>
                <div class="latest-product__item__text">
                  <h6>Crab Pool Security</h6>
                  <span>$30.00</span>
                </div>
              </a>
              <a href="#" class="latest-product__item">
                <div class="latest-product__item__pic">
                  <img src="~/img/latest-product/lp-2.jpg" alt="" />
                </div>
                <div class="latest-product__item__text">
                  <h6>Crab Pool Security</h6>
                  <span>$30.00</span>
                </div>
              </a>
              <a href="#" class="latest-product__item">
                <div class="latest-product__item__pic">
                  <img src="~/img/latest-product/lp-3.jpg" alt="" />
                </div>
                <div class="latest-product__item__text">
                  <h6>Crab Pool Security</h6>
                  <span>$30.00</span>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="latest-product__text">
          <h4>Top Rated Products</h4>
          <div class="latest-product__slider owl-carousel">
            <div class="latest-prdouct__slider__item">
              <a href="#" class="latest-product__item">
                <div class="latest-product__item__pic">
                  <img src="~/img/latest-product/lp-1.jpg" alt="" />
                </div>
                <div class="latest-product__item__text">
                  <h6>Crab Pool Security</h6>
                  <span>$30.00</span>
                </div>
              </a>
              <a href="#" class="latest-product__item">
                <div class="latest-product__item__pic">
                  <img src="~/img/latest-product/lp-2.jpg" alt="" />
                </div>
                <div class="latest-product__item__text">
                  <h6>Crab Pool Security</h6>
                  <span>$30.00</span>
                </div>
              </a>
              <a href="#" class="latest-product__item">
                <div class="latest-product__item__pic">
                  <img src="~/img/latest-product/lp-3.jpg" alt="" />
                </div>
                <div class="latest-product__item__text">
                  <h6>Crab Pool Security</h6>
                  <span>$30.00</span>
                </div>
              </a>
            </div>
            <div class="latest-prdouct__slider__item">
              <a href="#" class="latest-product__item">
                <div class="latest-product__item__pic">
                  <img src="~/img/latest-product/lp-1.jpg" alt="" />
                </div>
                <div class="latest-product__item__text">
                  <h6>Crab Pool Security</h6>
                  <span>$30.00</span>
                </div>
              </a>
              <a href="#" class="latest-product__item">
                <div class="latest-product__item__pic">
                  <img src="~/img/latest-product/lp-2.jpg" alt="" />
                </div>
                <div class="latest-product__item__text">
                  <h6>Crab Pool Security</h6>
                  <span>$30.00</span>
                </div>
              </a>
              <a href="#" class="latest-product__item">
                <div class="latest-product__item__pic">
                  <img src="~/img/latest-product/lp-3.jpg" alt="" />
                </div>
                <div class="latest-product__item__text">
                  <h6>Crab Pool Security</h6>
                  <span>$30.00</span>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="latest-product__text">
          <h4>Review Products</h4>
          <div class="latest-product__slider owl-carousel">
            <div class="latest-prdouct__slider__item">
              <a href="#" class="latest-product__item">
                <div class="latest-product__item__pic">
                  <img src="~/img/latest-product/lp-1.jpg" alt="" />
                </div>
                <div class="latest-product__item__text">
                  <h6>Crab Pool Security</h6>
                  <span>$30.00</span>
                </div>
              </a>
              <a href="#" class="latest-product__item">
                <div class="latest-product__item__pic">
                  <img src="~/img/latest-product/lp-2.jpg" alt="" />
                </div>
                <div class="latest-product__item__text">
                  <h6>Crab Pool Security</h6>
                  <span>$30.00</span>
                </div>
              </a>
              <a href="#" class="latest-product__item">
                <div class="latest-product__item__pic">
                  <img src="~/img/latest-product/lp-3.jpg" alt="" />
                </div>
                <div class="latest-product__item__text">
                  <h6>Crab Pool Security</h6>
                  <span>$30.00</span>
                </div>
              </a>
            </div>
            <div class="latest-prdouct__slider__item">
              <a href="#" class="latest-product__item">
                <div class="latest-product__item__pic">
                  <img src="~/img/latest-product/lp-1.jpg" alt="" />
                </div>
                <div class="latest-product__item__text">
                  <h6>Crab Pool Security</h6>
                  <span>$30.00</span>
                </div>
              </a>
              <a href="#" class="latest-product__item">
                <div class="latest-product__item__pic">
                  <img src="~/img/latest-product/lp-2.jpg" alt="" />
                </div>
                <div class="latest-product__item__text">
                  <h6>Crab Pool Security</h6>
                  <span>$30.00</span>
                </div>
              </a>
              <a href="#" class="latest-product__item">
                <div class="latest-product__item__pic">
                  <img src="~/img/latest-product/lp-3.jpg" alt="" />
                </div>
                <div class="latest-product__item__text">
                  <h6>Crab Pool Security</h6>
                  <span>$30.00</span>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="from-blog spad">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="section-title from-blog__title">
          <h2>From The Blog</h2>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-6">
        <div class="blog__item">
          <div class="blog__item__pic">
            <img src="~/img/blog/blog-1.jpg" alt="" />
          </div>
          <div class="blog__item__text">
            <ul>
              <li><i class="fa fa-calendar-o"></i> May 4,2019</li>
              <li><i class="fa fa-comment-o"></i> 5</li>
            </ul>
            <h5><a href="#">Cooking tips make cooking simple</a></h5>
            <p>Sed quia non numquam modi tempora indunt ut labore et dolore magnam aliquam quaerat </p>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-6">
        <div class="blog__item">
          <div class="blog__item__pic">
            <img src="~/img/blog/blog-2.jpg" alt="" />
          </div>
          <div class="blog__item__text">
            <ul>
              <li><i class="fa fa-calendar-o"></i> May 4,2019</li>
              <li><i class="fa fa-comment-o"></i> 5</li>
            </ul>
            <h5><a href="#">6 ways to prepare breakfast for 30</a></h5>
            <p>Sed quia non numquam modi tempora indunt ut labore et dolore magnam aliquam quaerat </p>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-6">
        <div class="blog__item">
          <div class="blog__item__pic">
            <img src="~/img/blog/blog-3.jpg" alt="" />
          </div>
          <div class="blog__item__text">
            <ul>
              <li><i class="fa fa-calendar-o"></i> May 4,2019</li>
              <li><i class="fa fa-comment-o"></i> 5</li>
            </ul>
            <h5><a href="#">Visit the clean farm in the US</a></h5>
            <p>Sed quia non numquam modi tempora indunt ut labore et dolore magnam aliquam quaerat </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<footer class="footer spad">
  <div class="container">
    <div class="row">
      <div class="col-lg-3 col-md-6 col-sm-6">
        <div class="footer__about">
          <div class="footer__about__logo">
            <a href="#" class="logo">V-Shop</a>
          </div>
          <ul>
            <li>Address: Ludhiana</li>
            <li>Phone: 1234567890</li>
            <li>Email: therichposts@gmail.com</li>
          </ul>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-sm-6 offset-lg-1">
        <div class="footer__widget">
          <h6>Useful Links</h6>
          <ul>
            <li><a href="#">About Us</a></li>
            <li><a href="#">About Our Shop</a></li>
            <li><a href="#">Secure Shopping</a></li>
            <li><a href="#">Delivery infomation</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Our Sitemap</a></li>
          </ul>
          <ul>
            <li><a href="#">Who We Are</a></li>
            <li><a href="#">Our Services</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Innovation</a></li>
            <li><a href="#">Testimonials</a></li>
          </ul>
        </div>
      </div>
      <div class="col-lg-4 col-md-12">
        <div class="footer__widget">
          <h6>Join Our Newsletter Now</h6>
          <p>Get E-mail updates about our latest shop and special offers.</p>
          <form action="#">
            <input type="text" placeholder="Enter your mail" />
            <button type="submit" class="site-btn">Subscribe</button>
          </form>
          <div class="footer__widget__social">
            <a href="#"><i class="fa fa-facebook"></i></a>
            <a href="#"><i class="fa fa-instagram"></i></a>
            <a href="#"><i class="fa fa-twitter"></i></a>
            <a href="#"><i class="fa fa-pinterest"></i></a>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <div class="footer__copyright">
          <div class="footer__copyright__text"><p>
Copyright &copy;2021 All rights reserved | This template is made with <i class="fa fa-heart" aria-hidden="true"></i> by <a href="#" target="_blank">Jassa</a>
</p></div>
          <div class="footer__copyright__payment"><img src="~/img/payment-item.png" alt="" /></div>
        </div>
      </div>
    </div>
  </div>
</footer>

5. Now guy’s add below code inside testproject/Pages/Shared/_Layout.cshtml file to check output on web browser:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - testproject</title>
   
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;900&display=swap" rel="stylesheet">
    <!-- Css Styles -->
    <link rel="stylesheet" href="~/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="~/css/font-awesome.min.css" type="text/css">
    <link rel="stylesheet" href="~/css/elegant-icons.css" type="text/css">
    <link rel="stylesheet" href="~/css/nice-select.css" type="text/css">
    <link rel="stylesheet" href="~/css/jquery-ui.min.css" type="text/css">
    <link rel="stylesheet" href="~/css/owl.carousel.min.css" type="text/css">
    <link rel="stylesheet" href="~/css/slicknav.min.css" type="text/css">
    <link rel="stylesheet" href="~/css/style.css" type="text/css">
     
     
      
     
</head>
<body>
   
            @RenderBody()
       
     <!-- Template Main JS File -->
    <script src="~/js/jquery-3.3.1.min.js"></script>
    <script src="~/js/bootstrap.min.js"></script>
    <script src="~/js/jquery.nice-select.min.js"></script>
    <script src="~/js/jquery-ui.min.js"></script>
    <script src="~/js/jquery.slicknav.js"></script>
    <script src="~/js/mixitup.min.js"></script>
    <script src="~/js/owl.carousel.min.js"></script>
    <script src="~/js/main.js"></script>
  
</body>
</html>

6. 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 and place them inside wwwroot folder:

https://therichpost.com/v-shop.zip

7. Now guy’s in the end please run below command inside your project terminal and check the output:

dotnet watch run //http://localhost:5000/

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.

Jassa

Thanks

August 21, 2021

How to add Bootstrap 5.1.0 in Angular 12?

Hello friends, welcome back to my blog. Today in this blog post, I am going to tell you, How to add Bootstrap 5.1.0 in Angular 12?

Here is the tutorial link for update angular version to 12: Update Angular 11 to Angular 12

Working Video

Guy’s here are the more demos related to Angular 12 with Bootstrap 5:

Angular 12 came and Bootstrap 5 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 for How to add bootstrap 5 in angular 12 application? 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 angularboot5 //Create new Angular Project

cd angularboot5 // Go inside the Angular Project Folder

2. Now friends, here we need to run below commands into our project terminal to install bootstrap 5.1.0 modules into our angular application:

npm install bootstrap

npm i @popperjs/core

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

<nav class="navbar navbar-light bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Therichpost</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>
<div class="container p-5 mt-5">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 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>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 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>
<div class="line"></div>
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 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>
<div class="line"></div>
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 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>
<div class="line"></div>
<h3>Lorem Ipsum Dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 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>

</div>

4. Now friends we just need to add below code into angular.json file:

"styles": [
              ...
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
"scripts": [
              ...
               "node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]

Friends in the end must run ng serve command into your terminal to run the angular 12 project.

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

August 19, 2021