Aashish/Orient_Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phone and Address Change

Browse Source
This commit is contained in:
Prajwal Adhikari 2024-08-01 10:34:55 +05:45
parent 5d398d05f6
commit 8704a98f70
172 changed files with 19819 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.htaccess Normal file
View File

@ -0,0 +1,8 @@
# php -- BEGIN cPanel-generated handler, do not edit
# Set the “ea-php82” package as the default “PHP” programming language.
<IfModule mime_module>
AddHandler application/x-httpd-ea-php82___lsphp .php .php8 .phtml
</IfModule>
# php -- END cPanel-generated handler, do not edit

4
contact.php
View File

@ -23,7 +23,7 @@
<i class="fas fa-map-marked-alt fa-3x " style="color:#f54813;"></i>
<div class="ps-3">
<h5 class="mb-3">Location</h5>
<a href="https://maps.app.goo.gl/JJLXLdLDLMzBSM3W7" class="fs-5 text-primary" target="_blank">Kathmandu, Nepal</a>
<a href="#" class="fs-5 text-primary" target="_blank">Baneshwor Plaza, Block "A" 3rd Floor, Kathmandu</a>
</div>
</div>
@ -35,7 +35,7 @@
<h5 class="mb-3">Contact</h5>
<div class="mb-3">
<h6 class="mb-0">Phone:</h6>
<a href="tel: 01-4238541" class="fs-5 text-primary" target="_blank">01-4238541</a>
<a href="tel: 01-4594894" class="fs-5 text-primary" target="_blank">01-4594894</a>
</div>
<div class="mb-3">
<h6 class="mb-0">Email:</h6>

2
css/style.css
View File

@ -441,7 +441,7 @@ h6{
align-items: center;
justify-content: left;
text-align: center;
background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0.6));
/*background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0.6));*/
background-size: cover;
}

253
demo/pages/404.html Normal file
View File

@ -0,0 +1,253 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Travisa - Visa & Immigration Website Template</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Poppins:wght@200;300;400;500;600&display=swap" rel="stylesheet">
<!-- Icon Font Stylesheet -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
<!-- Libraries Stylesheet -->
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<!-- Customized Bootstrap Stylesheet -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Spinner Start -->
<div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
<div class="spinner-border text-secondary" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<!-- Spinner End -->
<!-- Topbar Start -->
<div class="container-fluid bg-primary px-5 d-none d-lg-block">
<div class="row gx-0 align-items-center">
<div class="col-lg-5 text-center text-lg-start mb-lg-0">
<div class="d-flex">
<a href="#" class="text-muted me-4"><i class="fas fa-envelope text-secondary me-2"></i>Example@gmail.com</a>
<a href="#" class="text-muted me-0"><i class="fas fa-phone-alt text-secondary me-2"></i>+01234567890</a>
</div>
</div>
<div class="col-lg-3 row-cols-1 text-center mb-2 mb-lg-0">
<div class="d-inline-flex align-items-center" style="height: 45px;">
<a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2" href=""><i class="fab fa-twitter fw-normal text-secondary"></i></a>
<a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2" href=""><i class="fab fa-facebook-f fw-normal text-secondary"></i></a>
<a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2" href=""><i class="fab fa-linkedin-in fw-normal text-secondary"></i></a>
<a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2" href=""><i class="fab fa-instagram fw-normal text-secondary"></i></a>
<a class="btn btn-sm btn-outline-light btn-square rounded-circle" href=""><i class="fab fa-youtube fw-normal text-secondary"></i></a>
</div>
</div>
<div class="col-lg-4 text-center text-lg-end">
<div class="d-inline-flex align-items-center" style="height: 45px;">
<a href="#" class="text-muted me-2"> Help</a><small> / </small>
<a href="#" class="text-muted mx-2"> Support</a><small> / </small>
<a href="#" class="text-muted ms-2"> Contact</a>
</div>
</div>
</div>
</div>
<!-- Topbar End -->
<!-- Navbar & Hero Start -->
<div class="container-fluid nav-bar p-0">
<nav class="navbar navbar-expand-lg navbar-light bg-white px-4 px-lg-5 py-3 py-lg-0">
<a href="" class="navbar-brand p-0">
<h1 class="display-5 text-secondary m-0"><img src="img/brand-logo.png" class="img-fluid" alt="">Travisa</h1>
<!-- <img src="img/logo.png" alt="Logo"> -->
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="fa fa-bars"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ms-auto py-0">
<a href="index.html" class="nav-item nav-link">Home</a>
<a href="about.html" class="nav-item nav-link">About</a>
<a href="service.html" class="nav-item nav-link">Service</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link active" data-bs-toggle="dropdown"><span class="dropdown-toggle">Pages</span></a>
<div class="dropdown-menu m-0">
<a href="feature.html" class="dropdown-item">Feature</a>
<a href="countries.html" class="dropdown-item">Countries</a>
<a href="testimonial.html" class="dropdown-item">Testimonial</a>
<a href="training.html" class="dropdown-item">Training</a>
<a href="404.html" class="dropdown-item active">404 Page</a>
</div>
</div>
<a href="contact.html" class="nav-item nav-link">Contact</a>
</div>
<button class="btn btn-primary btn-md-square border-secondary mb-3 mb-md-3 mb-lg-0 me-3" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fas fa-search"></i></button>
<a href="" class="btn btn-primary border-secondary rounded-pill py-2 px-4 px-lg-3 mb-3 mb-md-3 mb-lg-0">Get A Quote</a>
</div>
</nav>
</div>
<!-- Navbar & Hero End -->
<!-- Modal Search Start -->
<div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content rounded-0">
<div class="modal-header">
<h4 class="modal-title text-secondary mb-0" id="exampleModalLabel">Search by keyword</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body d-flex align-items-center">
<div class="input-group w-75 mx-auto d-flex">
<input type="search" class="form-control p-3" placeholder="keywords" aria-describedby="search-icon-1">
<span id="search-icon-1" class="input-group-text p-3"><i class="fa fa-search"></i></span>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Search End -->
<!-- Header Start -->
<div class="container-fluid bg-breadcrumb">
<div class="container text-center py-5" style="max-width: 900px;">
<h3 class="text-white display-3 mb-4 wow fadeInDown" data-wow-delay="0.1s">404 Pages</h1>
<ol class="breadcrumb justify-content-center text-white mb-0 wow fadeInDown" data-wow-delay="0.3s">
<li class="breadcrumb-item"><a href="index.html" class="text-white">Home</a></li>
<li class="breadcrumb-item"><a href="#" class="text-white">Pages</a></li>
<li class="breadcrumb-item active text-secondary">404 Page</li>
</ol>
</div>
</div>
<!-- Header End -->
<!-- 404 Start -->
<div class="container-fluid bg-light py-5">
<div class="container py-5 text-center">
<div class="row justify-content-center">
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.3s">
<i class="bi bi-exclamation-triangle display-1 text-secondary"></i>
<h1 class="display-1">404</h1>
<h1 class="mb-4">Page Not Found</h1>
<p class="mb-4">We’re sorry, the page you have looked for does not exist in our website! Maybe go to our home page or try to use a search?</p>
<a class="btn btn-primary rounded-pill py-3 px-5" href="index.html">Go Back To Home</a>
</div>
</div>
</div>
</div>
<!-- 404 End -->
<!-- Footer Start -->
<div class="container-fluid footer py-5 wow fadeIn" data-wow-delay="0.2s">
<div class="container py-5">
<div class="row g-5">
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="footer-item d-flex flex-column">
<h4 class="text-secondary mb-4">Contact Info</h4>
<a href=""><i class="fa fa-map-marker-alt me-2"></i> 123 Street, New York, USA</a>
<a href=""><i class="fas fa-envelope me-2"></i> info@example.com</a>
<a href=""><i class="fas fa-phone me-2"></i> +012 345 67890</a>
<a href="" class="mb-3"><i class="fas fa-print me-2"></i> +012 345 67890</a>
<div class="d-flex align-items-center">
<i class="fas fa-share fa-2x text-secondary me-2"></i>
<a class="btn mx-1" href=""><i class="fab fa-facebook-f"></i></a>
<a class="btn mx-1" href=""><i class="fab fa-twitter"></i></a>
<a class="btn mx-1" href=""><i class="fab fa-instagram"></i></a>
<a class="btn mx-1" href=""><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="footer-item d-flex flex-column">
<h4 class="text-secondary mb-4">Opening Time</h4>
<div class="mb-3">
<h6 class="text-muted mb-0">Mon - Friday:</h6>
<p class="text-white mb-0">09.00 am to 07.00 pm</p>
</div>
<div class="mb-3">
<h6 class="text-muted mb-0">Satday:</h6>
<p class="text-white mb-0">10.00 am to 05.00 pm</p>
</div>
<div class="mb-3">
<h6 class="text-muted mb-0">Vacation:</h6>
<p class="text-white mb-0">All Sunday is our vacation</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="footer-item d-flex flex-column">
<h4 class="text-secondary mb-4">Our Services</h4>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Business</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Evaluation</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Migrate</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Study</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Counselling</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Work / Career</a>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="footer-item">
<h4 class="text-secondary mb-4">Newsletter</h4>
<p class="text-white mb-3">Dolor amet sit justo amet elitr clita ipsum elitr est.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="position-relative mx-auto rounded-pill">
<input class="form-control border-0 rounded-pill w-100 py-3 ps-4 pe-5" type="text" placeholder="Enter your email">
<button type="button" class="btn btn-primary rounded-pill position-absolute top-0 end-0 py-2 mt-2 me-2">SignUp</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer End -->
<!-- Copyright Start -->
<div class="container-fluid copyright py-4">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-md-6 text-center text-md-start mb-md-0">
<span class="text-white"><a href="#" class="border-bottom text-white"><i class="fas fa-copyright text-light me-2"></i>Your Site Name</a>, All right reserved.</span>
</div>
<div class="col-md-6 text-center text-md-end text-white">
<!--/*** This template is free as long as you keep the below author’s credit link/attribution link/backlink. ***/-->
<!--/*** If you'd like to use the template without the below author’s credit link/attribution link/backlink, ***/-->
<!--/*** you can purchase the Credit Removal License from "https://htmlcodex.com/credit-removal". ***/-->
Designed By <a class="border-bottom text-white" href="https://htmlcodex.com">HTML Codex</a>
</div>
</div>
</div>
</div>
<!-- Copyright End -->
<!-- Back to Top -->
<a href="#" class="btn btn-primary btn-lg-square back-to-top"><i class="fa fa-arrow-up"></i></a>
<!-- JavaScript Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="lib/wow/wow.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/waypoints/waypoints.min.js"></script>
<script src="lib/counterup/counterup.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<!-- Template Javascript -->
<script src="js/main.js"></script>
</body>
</html>

520
demo/pages/about.html Normal file
View File

@ -0,0 +1,520 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Travisa - Visa & Immigration Website Template</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Poppins:wght@200;300;400;500;600&display=swap" rel="stylesheet">
<!-- Icon Font Stylesheet -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
<!-- Libraries Stylesheet -->
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<!-- Customized Bootstrap Stylesheet -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Spinner Start -->
<div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
<div class="spinner-border text-secondary" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<!-- Spinner End -->
<!-- Topbar Start -->
<div class="container-fluid bg-primary px-5 d-none d-lg-block">
<div class="row gx-0 align-items-center">
<div class="col-lg-5 text-center text-lg-start mb-lg-0">
<div class="d-flex">
<a href="#" class="text-muted me-4"><i class="fas fa-envelope text-secondary me-2"></i>Example@gmail.com</a>
<a href="#" class="text-muted me-0"><i class="fas fa-phone-alt text-secondary me-2"></i>+01234567890</a>
</div>
</div>
<div class="col-lg-3 row-cols-1 text-center mb-2 mb-lg-0">
<div class="d-inline-flex align-items-center" style="height: 45px;">
<a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2" href=""><i class="fab fa-twitter fw-normal text-secondary"></i></a>
<a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2" href=""><i class="fab fa-facebook-f fw-normal text-secondary"></i></a>
<a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2" href=""><i class="fab fa-linkedin-in fw-normal text-secondary"></i></a>
<a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2" href=""><i class="fab fa-instagram fw-normal text-secondary"></i></a>
<a class="btn btn-sm btn-outline-light btn-square rounded-circle" href=""><i class="fab fa-youtube fw-normal text-secondary"></i></a>
</div>
</div>
<div class="col-lg-4 text-center text-lg-end">
<div class="d-inline-flex align-items-center" style="height: 45px;">
<a href="#" class="text-muted me-2"> Help</a><small> / </small>
<a href="#" class="text-muted mx-2"> Support</a><small> / </small>
<a href="#" class="text-muted ms-2"> Contact</a>
</div>
</div>
</div>
</div>
<!-- Topbar End -->
<!-- Navbar & Hero Start -->
<div class="container-fluid nav-bar p-0">
<nav class="navbar navbar-expand-lg navbar-light bg-white px-4 px-lg-5 py-3 py-lg-0">
<a href="" class="navbar-brand p-0">
<h1 class="display-5 text-secondary m-0"><img src="img/brand-logo.png" class="img-fluid" alt="">Travisa</h1>
<!-- <img src="img/logo.png" alt="Logo"> -->
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="fa fa-bars"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ms-auto py-0">
<a href="index.html" class="nav-item nav-link">Home</a>
<a href="about.html" class="nav-item nav-link active">About</a>
<a href="service.html" class="nav-item nav-link">Service</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link" data-bs-toggle="dropdown"><span class="dropdown-toggle">Pages</span></a>
<div class="dropdown-menu m-0">
<a href="feature.html" class="dropdown-item">Feature</a>
<a href="countries.html" class="dropdown-item">Countries</a>
<a href="testimonial.html" class="dropdown-item">Testimonial</a>
<a href="training.html" class="dropdown-item">Training</a>
<a href="404.html" class="dropdown-item">404 Page</a>
</div>
</div>
<a href="contact.html" class="nav-item nav-link">Contact</a>
</div>
<button class="btn btn-primary btn-md-square border-secondary mb-3 mb-md-3 mb-lg-0 me-3" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fas fa-search"></i></button>
<a href="" class="btn btn-primary border-secondary rounded-pill py-2 px-4 px-lg-3 mb-3 mb-md-3 mb-lg-0">Get A Quote</a>
</div>
</nav>
</div>
<!-- Navbar & Hero End -->
<!-- Modal Search Start -->
<div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content rounded-0">
<div class="modal-header">
<h4 class="modal-title text-secondary mb-0" id="exampleModalLabel">Search by keyword</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body d-flex align-items-center">
<div class="input-group w-75 mx-auto d-flex">
<input type="search" class="form-control p-3" placeholder="keywords" aria-describedby="search-icon-1">
<span id="search-icon-1" class="input-group-text p-3"><i class="fa fa-search"></i></span>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Search End -->
<!-- Header Start -->
<div class="container-fluid bg-breadcrumb">
<div class="container text-center py-5" style="max-width: 900px;">
<h3 class="text-white display-3 mb-4 wow fadeInDown" data-wow-delay="0.1s">About Us</h1>
<ol class="breadcrumb justify-content-center text-white mb-0 wow fadeInDown" data-wow-delay="0.3s">
<li class="breadcrumb-item"><a href="index.html" class="text-white">Home</a></li>
<li class="breadcrumb-item"><a href="#" class="text-white">Pages</a></li>
<li class="breadcrumb-item active text-secondary">About</li>
</ol>
</div>
</div>
<!-- Header End -->
<!-- About Start -->
<div class="container-fluid overflow-hidden py-5">
<div class="container py-5">
<div class="row g-5">
<div class="col-xl-5 wow fadeInLeft" data-wow-delay="0.1s">
<div class="bg-light rounded">
<img src="img/about-2.png" class="img-fluid w-100" style="margin-bottom: -7px;" alt="Image">
<img src="img/about-3.jpg" class="img-fluid w-100 border-bottom border-5 border-primary" style="border-top-right-radius: 300px; border-top-left-radius: 300px;" alt="Image">
</div>
</div>
<div class="col-xl-7 wow fadeInRight" data-wow-delay="0.3s">
<h5 class="sub-title pe-3">About the company</h5>
<h1 class="display-5 mb-4">We’re Trusted Immigration Consultant Agency.</h1>
<p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt architecto consectetur iusto perferendis blanditiis assumenda dignissimos, commodi fuga culpa earum explicabo libero sint est mollitia saepe! Sequi asperiores rerum nemo!</p>
<div class="row gy-4 align-items-center">
<div class="col-12 col-sm-6 d-flex align-items-center">
<i class="fas fa-map-marked-alt fa-3x text-secondary"></i>
<h5 class="ms-4">Best Immigration Resources</h5>
</div>
<div class="col-12 col-sm-6 d-flex align-items-center">
<i class="fas fa-passport fa-3x text-secondary"></i>
<h5 class="ms-4">Return Visas Availabile</h5>
</div>
<div class="col-4 col-md-3">
<div class="bg-light text-center rounded p-3">
<div class="mb-2">
<i class="fas fa-ticket-alt fa-4x text-primary"></i>
</div>
<h1 class="display-5 fw-bold mb-2">34</h1>
<p class="text-muted mb-0">Years of Experience</p>
</div>
</div>
<div class="col-8 col-md-9">
<div class="mb-5">
<p class="text-primary h6 mb-3"><i class="fa fa-check-circle text-secondary me-2"></i> Offer 100 % Genuine Assistance</p>
<p class="text-primary h6 mb-3"><i class="fa fa-check-circle text-secondary me-2"></i> It’s Faster & Reliable Execution</p>
<p class="text-primary h6 mb-3"><i class="fa fa-check-circle text-secondary me-2"></i> Accurate & Expert Advice</p>
</div>
<div class="d-flex flex-wrap">
<div id="phone-tada" class="d-flex align-items-center justify-content-center me-4">
<a href="" class="position-relative wow tada" data-wow-delay=".9s">
<i class="fa fa-phone-alt text-primary fa-3x"></i>
<div class="position-absolute" style="top: 0; left: 25px;">
<span><i class="fa fa-comment-dots text-secondary"></i></span>
</div>
</a>
</div>
<div class="d-flex flex-column justify-content-center">
<span class="text-primary">Have any questions?</span>
<span class="text-secondary fw-bold fs-5" style="letter-spacing: 2px;">Free: +0123 456 7890</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- About End -->
<!-- Counter Facts Start -->
<div class="container-fluid counter-facts py-5">
<div class="container py-5">
<div class="row g-4">
<div class="col-12 col-sm-6 col-md-6 col-xl-3 wow fadeInUp" data-wow-delay="0.1s">
<div class="counter">
<div class="counter-icon">
<i class="fas fa-passport"></i>
</div>
<div class="counter-content">
<h3>Visa Categories</h3>
<div class="d-flex align-items-center justify-content-center">
<span class="counter-value" data-toggle="counter-up">31</span>
<h4 class="text-secondary mb-0" style="font-weight: 600; font-size: 25px;">+</h4>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-xl-3 wow fadeInUp" data-wow-delay="0.3s">
<div class="counter">
<div class="counter-icon">
<i class="fas fa-users"></i>
</div>
<div class="counter-content">
<h3>Team Members</h3>
<div class="d-flex align-items-center justify-content-center">
<span class="counter-value" data-toggle="counter-up">377</span>
<h4 class="text-secondary mb-0" style="font-weight: 600; font-size: 25px;">+</h4>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-xl-3 wow fadeInUp" data-wow-delay="0.5s">
<div class="counter">
<div class="counter-icon">
<i class="fas fa-user-check"></i>
</div>
<div class="counter-content">
<h3>Visa Process</h3>
<div class="d-flex align-items-center justify-content-center">
<span class="counter-value" data-toggle="counter-up">4.9</span>
<h4 class="text-secondary mb-0" style="font-weight: 600; font-size: 25px;">K</h4>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-xl-3 wow fadeInUp" data-wow-delay="0.7s">
<div class="counter">
<div class="counter-icon">
<i class="fas fa-handshake"></i>
</div>
<div class="counter-content">
<h3>Success Rates</h3>
<div class="d-flex align-items-center justify-content-center">
<span class="counter-value" data-toggle="counter-up">98</span>
<h4 class="text-secondary mb-0" style="font-weight: 600; font-size: 25px;">%</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Counter Facts End -->
<!-- Countries We Offer Start -->
<div class="container-fluid country overflow-hidden py-5">
<div class="container py-5">
<div class="section-title text-center wow fadeInUp" data-wow-delay="0.1s" style="margin-bottom: 70px;">
<div class="sub-style">
<h5 class="sub-title text-primary px-3">COUNTRIES WE OFFER</h5>
</div>
<h1 class="display-5 mb-4">Immigration & visa services following Countries</h1>
<p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat deleniti amet at atque sequi quibusdam cumque itaque repudiandae temporibus, eius nam mollitia voluptas maxime veniam necessitatibus saepe in ab? Repellat!</p>
</div>
<div class="row g-4 text-center">
<div class="col-lg-6 col-xl-3 mb-5 mb-xl-0 wow fadeInUp" data-wow-delay="0.1s">
<div class="country-item">
<div class="rounded overflow-hidden">
<img src="img/country-1.jpg" class="img-fluid w-100 rounded" alt="Image">
</div>
<div class="country-flag">
<img src="img/brazil.jpg" class="img-fluid rounded-circle" alt="Image">
</div>
<div class="country-name">
<a href="#" class="text-white fs-4">Brazil</a>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-3 mb-5 mb-xl-0 wow fadeInUp" data-wow-delay="0.3s">
<div class="country-item">
<div class="rounded overflow-hidden">
<img src="img/country-2.jpg" class="img-fluid w-100 rounded" alt="Image">
</div>
<div class="country-flag">
<img src="img/india.jpg" class="img-fluid rounded-circle" alt="Image">
</div>
<div class="country-name">
<a href="#" class="text-white fs-4">india</a>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-3 mb-5 mb-xl-0 wow fadeInUp" data-wow-delay="0.5s">
<div class="country-item">
<div class="rounded overflow-hidden">
<img src="img/country-3.jpg" class="img-fluid w-100 rounded" alt="Image">
</div>
<div class="country-flag">
<img src="img/usa.jpg" class="img-fluid rounded-circle" alt="Image">
</div>
<div class="country-name">
<a href="#" class="text-white fs-4">New York</a>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-3 mb-5 mb-xl-0 wow fadeInUp" data-wow-delay="0.7s">
<div class="country-item">
<div class="rounded overflow-hidden">
<img src="img/country-4.jpg" class="img-fluid w-100 rounded" alt="Image">
</div>
<div class="country-flag">
<img src="img/italy.jpg" class="img-fluid rounded-circle" alt="Image">
</div>
<div class="country-name">
<a href="#" class="text-white fs-4">Italy</a>
</div>
</div>
</div>
<div class="col-12">
<a class="btn btn-primary border-secondary rounded-pill py-3 px-5 wow fadeInUp" data-wow-delay="0.1s" href="#">More Countries</a>
</div>
</div>
</div>
</div>
<!-- Countries We Offer End -->
<!-- Training Start -->
<div class="container-fluid training overflow-hidden bg-light py-5">
<div class="container py-5">
<div class="section-title text-center mb-5 wow fadeInUp" data-wow-delay="0.1s">
<div class="sub-style">
<h5 class="sub-title text-primary px-3">CHECK OUR TRAINING</h5>
</div>
<h1 class="display-5 mb-4">Get the Best Coacing Service Training with Our Travisa</h1>
<p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat deleniti amet at atque sequi quibusdam cumque itaque repudiandae temporibus, eius nam mollitia voluptas maxime veniam necessitatibus saepe in ab? Repellat!</p>
</div>
<div class="row g-4">
<div class="col-lg-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.1s">
<div class="training-item">
<div class="training-inner">
<img src="img/training-1.jpg" class="img-fluid w-100 rounded" alt="Image">
<div class="training-title-name">
<a href="#" class="h4 text-white mb-0">IELTS</a>
<a href="#" class="h4 text-white mb-0">Coaching</a>
</div>
</div>
<div class="training-content bg-secondary rounded-bottom p-4">
<a href="#"><h4 class="text-white">IELTS Coaching</h4></a>
<p class="text-white-50">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, veritatis.</p>
<a class="btn btn-secondary rounded-pill text-white p-0" href="#">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-lg-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.3s">
<div class="training-item">
<div class="training-inner">
<img src="img/training-2.jpg" class="img-fluid w-100 rounded" alt="Image">
<div class="training-title-name">
<a href="#" class="h4 text-white mb-0">TOEFL</a>
<a href="#" class="h4 text-white mb-0">Coaching</a>
</div>
</div>
<div class="training-content bg-secondary rounded-bottom p-4">
<a href="#"><h4 class="text-white">TOEFL Coaching</h4></a>
<p class="text-white-50">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, veritatis.</p>
<a class="btn btn-secondary rounded-pill text-white p-0" href="#">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-lg-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.5s">
<div class="training-item">
<div class="training-inner">
<img src="img/training-3.jpg" class="img-fluid w-100 rounded" alt="Image">
<div class="training-title-name">
<a href="#" class="h4 text-white mb-0">PTE</a>
<a href="#" class="h4 text-white mb-0">Coaching</a>
</div>
</div>
<div class="training-content bg-secondary rounded-bottom p-4">
<a href="#"><h4 class="text-white">PTE Coaching</h4></a>
<p class="text-white-50">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, veritatis.</p>
<a class="btn btn-secondary rounded-pill text-white p-0" href="#">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-lg-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.7s">
<div class="training-item">
<div class="training-inner">
<img src="img/training-4.jpg" class="img-fluid w-100 rounded" alt="Image">
<div class="training-title-name">
<a href="#" class="h4 text-white mb-0">OET</a>
<a href="#" class="h4 text-white mb-0">Coaching</a>
</div>
</div>
<div class="training-content bg-secondary rounded-bottom p-4">
<a href="#"><h4 class="text-white">OET Coaching</h4></a>
<p class="text-white-50">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, veritatis.</p>
<a class="btn btn-secondary rounded-pill text-white p-0" href="#">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-12 text-center">
<a class="btn btn-primary border-secondary rounded-pill py-3 px-5 wow fadeInUp" data-wow-delay="0.1s" href="#">View More</a>
</div>
</div>
</div>
</div>
<!-- Training End -->
<!-- Footer Start -->
<div class="container-fluid footer py-5 wow fadeIn" data-wow-delay="0.2s">
<div class="container py-5">
<div class="row g-5">
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="footer-item d-flex flex-column">
<h4 class="text-secondary mb-4">Contact Info</h4>
<a href=""><i class="fa fa-map-marker-alt me-2"></i> 123 Street, New York, USA</a>
<a href=""><i class="fas fa-envelope me-2"></i> info@example.com</a>
<a href=""><i class="fas fa-phone me-2"></i> +012 345 67890</a>
<a href="" class="mb-3"><i class="fas fa-print me-2"></i> +012 345 67890</a>
<div class="d-flex align-items-center">
<i class="fas fa-share fa-2x text-secondary me-2"></i>
<a class="btn mx-1" href=""><i class="fab fa-facebook-f"></i></a>
<a class="btn mx-1" href=""><i class="fab fa-twitter"></i></a>
<a class="btn mx-1" href=""><i class="fab fa-instagram"></i></a>
<a class="btn mx-1" href=""><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="footer-item d-flex flex-column">
<h4 class="text-secondary mb-4">Opening Time</h4>
<div class="mb-3">
<h6 class="text-muted mb-0">Mon - Friday:</h6>
<p class="text-white mb-0">09.00 am to 07.00 pm</p>
</div>
<div class="mb-3">
<h6 class="text-muted mb-0">Satday:</h6>
<p class="text-white mb-0">10.00 am to 05.00 pm</p>
</div>
<div class="mb-3">
<h6 class="text-muted mb-0">Vacation:</h6>
<p class="text-white mb-0">All Sunday is our vacation</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="footer-item d-flex flex-column">
<h4 class="text-secondary mb-4">Our Services</h4>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Business</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Evaluation</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Migrate</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Study</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Counselling</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Work / Career</a>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="footer-item">
<h4 class="text-secondary mb-4">Newsletter</h4>
<p class="text-white mb-3">Dolor amet sit justo amet elitr clita ipsum elitr est.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="position-relative mx-auto rounded-pill">
<input class="form-control border-0 rounded-pill w-100 py-3 ps-4 pe-5" type="text" placeholder="Enter your email">
<button type="button" class="btn btn-primary rounded-pill position-absolute top-0 end-0 py-2 mt-2 me-2">SignUp</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer End -->
<!-- Copyright Start -->
<div class="container-fluid copyright py-4">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-md-6 text-center text-md-start mb-md-0">
<span class="text-white"><a href="#" class="border-bottom text-white"><i class="fas fa-copyright text-light me-2"></i>Your Site Name</a>, All right reserved.</span>
</div>
<div class="col-md-6 text-center text-md-end text-white">
<!--/*** This template is free as long as you keep the below author’s credit link/attribution link/backlink. ***/-->
<!--/*** If you'd like to use the template without the below author’s credit link/attribution link/backlink, ***/-->
<!--/*** you can purchase the Credit Removal License from "https://htmlcodex.com/credit-removal". ***/-->
Designed By <a class="border-bottom text-white" href="https://htmlcodex.com">HTML Codex</a>
</div>
</div>
</div>
</div>
<!-- Copyright End -->
<!-- Back to Top -->
<a href="#" class="btn btn-primary btn-lg-square back-to-top"><i class="fa fa-arrow-up"></i></a>
<!-- JavaScript Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="lib/wow/wow.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/waypoints/waypoints.min.js"></script>
<script src="lib/counterup/counterup.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<!-- Template Javascript -->
<script src="js/main.js"></script>
</body>
</html>

424
demo/pages/contact.html Normal file
View File

@ -0,0 +1,424 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Travisa - Visa & Immigration Website Template</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Poppins:wght@200;300;400;500;600&display=swap" rel="stylesheet">
<!-- Icon Font Stylesheet -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
<!-- Libraries Stylesheet -->
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<!-- Customized Bootstrap Stylesheet -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Spinner Start -->
<div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
<div class="spinner-border text-secondary" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<!-- Spinner End -->
<!-- Topbar Start -->
<div class="container-fluid bg-primary px-5 d-none d-lg-block">
<div class="row gx-0 align-items-center">
<div class="col-lg-5 text-center text-lg-start mb-lg-0">
<div class="d-flex">
<a href="#" class="text-muted me-4"><i class="fas fa-envelope text-secondary me-2"></i>Example@gmail.com</a>
<a href="#" class="text-muted me-0"><i class="fas fa-phone-alt text-secondary me-2"></i>+01234567890</a>
</div>
</div>
<div class="col-lg-3 row-cols-1 text-center mb-2 mb-lg-0">
<div class="d-inline-flex align-items-center" style="height: 45px;">
<a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2" href=""><i class="fab fa-twitter fw-normal text-secondary"></i></a>
<a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2" href=""><i class="fab fa-facebook-f fw-normal text-secondary"></i></a>
<a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2" href=""><i class="fab fa-linkedin-in fw-normal text-secondary"></i></a>
<a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2" href=""><i class="fab fa-instagram fw-normal text-secondary"></i></a>
<a class="btn btn-sm btn-outline-light btn-square rounded-circle" href=""><i class="fab fa-youtube fw-normal text-secondary"></i></a>
</div>
</div>
<div class="col-lg-4 text-center text-lg-end">
<div class="d-inline-flex align-items-center" style="height: 45px;">
<a href="#" class="text-muted me-2"> Help</a><small> / </small>
<a href="#" class="text-muted mx-2"> Support</a><small> / </small>
<a href="#" class="text-muted ms-2"> Contact</a>
</div>
</div>
</div>
</div>
<!-- Topbar End -->
<!-- Navbar & Hero Start -->
<div class="container-fluid nav-bar p-0">
<nav class="navbar navbar-expand-lg navbar-light bg-white px-4 px-lg-5 py-3 py-lg-0">
<a href="" class="navbar-brand p-0">
<h1 class="display-5 text-secondary m-0"><img src="img/brand-logo.png" class="img-fluid" alt="">Travisa</h1>
<!-- <img src="img/logo.png" alt="Logo"> -->
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="fa fa-bars"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ms-auto py-0">
<a href="index.html" class="nav-item nav-link">Home</a>
<a href="about.html" class="nav-item nav-link">About</a>
<a href="service.html" class="nav-item nav-link">Service</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link" data-bs-toggle="dropdown"><span class="dropdown-toggle">Pages</span></a>
<div class="dropdown-menu m-0">
<a href="feature.html" class="dropdown-item">Feature</a>
<a href="countries.html" class="dropdown-item">Countries</a>
<a href="testimonial.html" class="dropdown-item">Testimonial</a>
<a href="training.html" class="dropdown-item">Training</a>
<a href="404.html" class="dropdown-item">404 Page</a>
</div>
</div>
<a href="contact.html" class="nav-item nav-link active">Contact</a>
</div>
<button class="btn btn-primary btn-md-square border-secondary mb-3 mb-md-3 mb-lg-0 me-3" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fas fa-search"></i></button>
<a href="" class="btn btn-primary border-secondary rounded-pill py-2 px-4 px-lg-3 mb-3 mb-md-3 mb-lg-0">Get A Quote</a>
</div>
</nav>
</div>
<!-- Navbar & Hero End -->
<!-- Modal Search Start -->
<div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content rounded-0">
<div class="modal-header">
<h4 class="modal-title text-secondary mb-0" id="exampleModalLabel">Search by keyword</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body d-flex align-items-center">
<div class="input-group w-75 mx-auto d-flex">
<input type="search" class="form-control p-3" placeholder="keywords" aria-describedby="search-icon-1">
<span id="search-icon-1" class="input-group-text p-3"><i class="fa fa-search"></i></span>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Search End -->
<!-- Header Start -->
<div class="container-fluid bg-breadcrumb">
<div class="container text-center py-5" style="max-width: 900px;">
<h3 class="text-white display-3 mb-4 wow fadeInDown" data-wow-delay="0.1s">Contact Us</h1>
<ol class="breadcrumb justify-content-center text-white mb-0 wow fadeInDown" data-wow-delay="0.3s">
<li class="breadcrumb-item"><a href="index.html" class="text-white">Home</a></li>
<li class="breadcrumb-item"><a href="#" class="text-white">Pages</a></li>
<li class="breadcrumb-item active text-secondary">Contact</li>
</ol>
</div>
</div>
<!-- Header End -->
<!-- Contact Start -->
<div class="container-fluid contact overflow-hidden py-5">
<div class="container py-5">
<div class="row g-5 mb-5">
<div class="col-lg-6 wow fadeInLeft" data-wow-delay="0.1s">
<div class="sub-style">
<h5 class="sub-title text-primary pe-3">Quick Contact</h5>
</div>
<h1 class="display-5 mb-4">Have Questions? Don't Hesitate to Contact Us</h1>
<p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat totam deserunt tempora. Tempore neque necessitatibus corporis error earum sint quae?</p>
<div class="d-flex border-bottom mb-4 pb-4">
<i class="fas fa-map-marked-alt fa-4x text-primary bg-light p-3 rounded"></i>
<div class="ps-3">
<h5>Location</h5>
<p>123, First Floor, 123 St Roots Terrace, Los Angeles 90010 Unitd States of America.</p>
</div>
</div>
<div class="row g-3">
<div class="col-xl-6">
<div class="d-flex">
<i class="fas fa-tty fa-3x text-primary"></i>
<div class="ps-3">
<h5 class="mb-3">Quick Contact</h5>
<div class="mb-3">
<h6 class="mb-0">Phone:</h6>
<a href="#" class="fs-5 text-primary">+012 3456 7890</a>
</div>
<div class="mb-3">
<h6 class="mb-0">Email:</h6>
<a href="#" class="fs-5 text-primary">travisa@example.com</a>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="d-flex">
<i class="fas fa-clone fa-3x text-primary"></i>
<div class="ps-3">
<h5 class="mb-3">Opening Hrs</h5>
<div class="mb-3">
<h6 class="mb-0">Mon - Friday:</h6>
<a href="#" class="fs-5 text-primary">09.00 am to 07.00 pm</a>
</div>
<div class="mb-3">
<h6 class="mb-0">Satday:</h6>
<a href="#" class="fs-5 text-primary">10.00 am to 05.00 pm</a>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex align-items-center pt-3">
<div class="me-4">
<div class="bg-light d-flex align-items-center justify-content-center" style="width: 90px; height: 90px; border-radius: 10px;"><i class="fas fa-share fa-3x text-primary"></i></div>
</div>
<div class="d-flex">
<a class="btn btn-secondary border-secondary me-2 p-0" href="">facebook <i class="fas fa-chevron-circle-right"></i></a>
<a class="btn btn-secondary border-secondary mx-2 p-0" href="">twitter <i class="fas fa-chevron-circle-right"></i></a>
<a class="btn btn-secondary border-secondary mx-2 p-0" href="">instagram <i class="fas fa-chevron-circle-right"></i></a>
</div>
</div>
</div>
<div class="col-lg-6 wow fadeInRight" data-wow-delay="0.3">
<div class="sub-style">
<h5 class="sub-title text-primary pe-3">Let’s Connect</h5>
</div>
<h1 class="display-5 mb-4">Send Your Message</h1>
<p class="mb-3">The contact form is currently inactive. Get a functional and working contact form with Ajax & PHP in a few minutes. Just copy and paste the files, add a little code and you're done. <a class="text-primary fw-bold" href="https://htmlcodex.com/contact-form">Download Now</a>.</p>
<form>
<div class="row g-4">
<div class="col-lg-12 col-xl-6">
<div class="form-floating">
<input type="text" class="form-control" id="name" placeholder="Your Name">
<label for="name">Your Name</label>
</div>
</div>
<div class="col-lg-12 col-xl-6">
<div class="form-floating">
<input type="email" class="form-control" id="email" placeholder="Your Email">
<label for="email">Your Email</label>
</div>
</div>
<div class="col-lg-12 col-xl-6">
<div class="form-floating">
<input type="phone" class="form-control" id="phone" placeholder="Phone">
<label for="phone">Your Phone</label>
</div>
</div>
<div class="col-lg-12 col-xl-6">
<div class="form-floating">
<input type="text" class="form-control" id="project" placeholder="Project">
<label for="project">Your Project</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<input type="text" class="form-control" id="subject" placeholder="Subject">
<label for="subject">Subject</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a message here" id="message" style="height: 160px"></textarea>
<label for="message">Message</label>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary w-100 py-3">Send Message</button>
</div>
</div>
</form>
</div>
</div>
<div class="office pt-5">
<div class="section-title text-center mb-5 wow fadeInUp" data-wow-delay="0.1s">
<div class="sub-style">
<h5 class="sub-title text-primary px-3">Worlwide Offices</h5>
</div>
<h1 class="display-5 mb-4">Explore Our Office Worldwide</h1>
<p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat deleniti amet at atque sequi quibusdam cumque itaque repudiandae temporibus, eius nam mollitia voluptas maxime veniam necessitatibus saepe in ab? Repellat!</p>
</div>
<div class="row g-4 justify-content-center">
<div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.1s">
<div class="office-item p-4">
<div class="office-img mb-4">
<img src="img/office-2.jpg" class="img-fluid w-100 rounded" alt="">
</div>
<div class="office-content d-flex flex-column">
<h4 class="mb-2">Australia</h4>
<a href="#" class="text-secondary fs-5 mb-2">+123.456.7890</a>
<a href="#" class="text-muted fs-5 mb-2">travisa@example.com</a>
<p class="mb-0">123, First Floor, 123 St Roots Terrace, Los Angeles 90010 Unitd States of America.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.3s">
<div class="office-item p-4">
<div class="office-img mb-4">
<img src="img/office-1.jpg" class="img-fluid w-100 rounded" alt="">
</div>
<div class="office-content d-flex flex-column">
<h4 class="mb-2">Canada</h4>
<a href="#" class="text-secondary fs-5 mb-2">(012) 0345 6789</a>
<a href="#" class="text-muted fs-5 mb-2">travisa@example.com</a>
<p class="mb-0">123, First Floor, 123 St Roots Terrace, Los Angeles 90010 Unitd States of America.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.5s">
<div class="office-item p-4">
<div class="office-img mb-4">
<img src="img/office-3.jpg" class="img-fluid w-100 rounded" alt="">
</div>
<div class="office-content d-flex flex-column">
<h4 class="mb-2">United Kingdom</h4>
<a href="#" class="text-secondary fs-5 mb-2">01234.567.890</a>
<a href="#" class="text-muted fs-5 mb-2">travisa@example.com</a>
<p class="mb-0">123, First Floor, 123 St Roots Terrace, Los Angeles 90010 Unitd States of America.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.7s">
<div class="office-item p-4">
<div class="office-img mb-4">
<img src="img/office-4.jpg" class="img-fluid w-100 rounded" alt="">
</div>
<div class="office-content d-flex flex-column">
<h4 class="mb-2">India</h4>
<a href="#" class="text-secondary fs-5 mb-2">+123.45.67890</a>
<a href="#" class="text-muted fs-5 mb-2">travisa@example.com</a>
<p class="mb-0">123, First Floor, 123 St Roots Terrace, Los Angeles 90010 Unitd States of America.</p>
</div>
</div>
</div>
<div class="col-12 pt-5 wow zoomIn" data-wow-delay="0.1s">
<div class="rounded h-100">
<iframe class="rounded w-100"
style="height: 500px;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387191.33750346623!2d-73.97968099999999!3d40.6974881!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sbd!4v1694259649153!5m2!1sen!2sbd"
loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact End -->
<!-- Footer Start -->
<div class="container-fluid footer py-5 wow fadeIn" data-wow-delay="0.2s">
<div class="container py-5">
<div class="row g-5">
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="footer-item d-flex flex-column">
<h4 class="text-secondary mb-4">Contact Info</h4>
<a href=""><i class="fa fa-map-marker-alt me-2"></i> 123 Street, New York, USA</a>
<a href=""><i class="fas fa-envelope me-2"></i> info@example.com</a>
<a href=""><i class="fas fa-phone me-2"></i> +012 345 67890</a>
<a href="" class="mb-3"><i class="fas fa-print me-2"></i> +012 345 67890</a>
<div class="d-flex align-items-center">
<i class="fas fa-share fa-2x text-secondary me-2"></i>
<a class="btn mx-1" href=""><i class="fab fa-facebook-f"></i></a>
<a class="btn mx-1" href=""><i class="fab fa-twitter"></i></a>
<a class="btn mx-1" href=""><i class="fab fa-instagram"></i></a>
<a class="btn mx-1" href=""><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="footer-item d-flex flex-column">
<h4 class="text-secondary mb-4">Opening Time</h4>
<div class="mb-3">
<h6 class="text-muted mb-0">Mon - Friday:</h6>
<p class="text-white mb-0">09.00 am to 07.00 pm</p>
</div>
<div class="mb-3">
<h6 class="text-muted mb-0">Satday:</h6>
<p class="text-white mb-0">10.00 am to 05.00 pm</p>
</div>
<div class="mb-3">
<h6 class="text-muted mb-0">Vacation:</h6>
<p class="text-white mb-0">All Sunday is our vacation</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="footer-item d-flex flex-column">
<h4 class="text-secondary mb-4">Our Services</h4>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Business</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Evaluation</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Migrate</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Study</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Counselling</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Work / Career</a>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="footer-item">
<h4 class="text-secondary mb-4">Newsletter</h4>
<p class="text-white mb-3">Dolor amet sit justo amet elitr clita ipsum elitr est.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="position-relative mx-auto rounded-pill">
<input class="form-control border-0 rounded-pill w-100 py-3 ps-4 pe-5" type="text" placeholder="Enter your email">
<button type="button" class="btn btn-primary rounded-pill position-absolute top-0 end-0 py-2 mt-2 me-2">SignUp</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer End -->
<!-- Copyright Start -->
<div class="container-fluid copyright py-4">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-md-6 text-center text-md-start mb-md-0">
<span class="text-white"><a href="#" class="border-bottom text-white"><i class="fas fa-copyright text-light me-2"></i>Your Site Name</a>, All right reserved.</span>
</div>
<div class="col-md-6 text-center text-md-end text-white">
<!--/*** This template is free as long as you keep the below author’s credit link/attribution link/backlink. ***/-->
<!--/*** If you'd like to use the template without the below author’s credit link/attribution link/backlink, ***/-->
<!--/*** you can purchase the Credit Removal License from "https://htmlcodex.com/credit-removal". ***/-->
Designed By <a class="border-bottom text-white" href="https://htmlcodex.com">HTML Codex</a>
</div>
</div>
</div>
</div>
<!-- Copyright End -->
<!-- Back to Top -->
<a href="#" class="btn btn-primary btn-lg-square back-to-top"><i class="fa fa-arrow-up"></i></a>
<!-- JavaScript Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="lib/wow/wow.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/waypoints/waypoints.min.js"></script>
<script src="lib/counterup/counterup.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<!-- Template Javascript -->
<script src="js/main.js"></script>
</body>
</html>

456
demo/pages/countries.html Normal file
View File

@ -0,0 +1,456 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Travisa - Visa & Immigration Website Template</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Poppins:wght@200;300;400;500;600&display=swap" rel="stylesheet">
<!-- Icon Font Stylesheet -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
<!-- Libraries Stylesheet -->
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<!-- Customized Bootstrap Stylesheet -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Spinner Start -->
<div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
<div class="spinner-border text-secondary" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<!-- Spinner End -->
<!-- Topbar Start -->
<div class="container-fluid bg-primary px-5 d-none d-lg-block">
<div class="row gx-0 align-items-center">
<div class="col-lg-5 text-center text-lg-start mb-lg-0">
<div class="d-flex">
<a href="#" class="text-muted me-4"><i class="fas fa-envelope text-secondary me-2"></i>Example@gmail.com</a>
<a href="#" class="text-muted me-0"><i class="fas fa-phone-alt text-secondary me-2"></i>+01234567890</a>
</div>
</div>
<div class="col-lg-3 row-cols-1 text-center mb-2 mb-lg-0">
<div class="d-inline-flex align-items-center" style="height: 45px;">
<a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2" href=""><i class="fab fa-twitter fw-normal text-secondary"></i></a>
<a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2" href=""><i class="fab fa-facebook-f fw-normal text-secondary"></i></a>
<a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2" href=""><i class="fab fa-linkedin-in fw-normal text-secondary"></i></a>
<a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2" href=""><i class="fab fa-instagram fw-normal text-secondary"></i></a>
<a class="btn btn-sm btn-outline-light btn-square rounded-circle" href=""><i class="fab fa-youtube fw-normal text-secondary"></i></a>
</div>
</div>
<div class="col-lg-4 text-center text-lg-end">
<div class="d-inline-flex align-items-center" style="height: 45px;">
<a href="#" class="text-muted me-2"> Help</a><small> / </small>
<a href="#" class="text-muted mx-2"> Support</a><small> / </small>
<a href="#" class="text-muted ms-2"> Contact</a>
</div>
</div>
</div>
</div>
<!-- Topbar End -->
<!-- Navbar & Hero Start -->
<div class="container-fluid nav-bar p-0">
<nav class="navbar navbar-expand-lg navbar-light bg-white px-4 px-lg-5 py-3 py-lg-0">
<a href="" class="navbar-brand p-0">
<h1 class="display-5 text-secondary m-0"><img src="img/brand-logo.png" class="img-fluid" alt="">Travisa</h1>
<!-- <img src="img/logo.png" alt="Logo"> -->
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="fa fa-bars"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ms-auto py-0">
<a href="index.html" class="nav-item nav-link">Home</a>
<a href="about.html" class="nav-item nav-link">About</a>
<a href="service.html" class="nav-item nav-link">Service</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link active" data-bs-toggle="dropdown"><span class="dropdown-toggle">Pages</span></a>
<div class="dropdown-menu m-0">
<a href="feature.html" class="dropdown-item">Feature</a>
<a href="countries.html" class="dropdown-item active">Countries</a>
<a href="testimonial.html" class="dropdown-item">Testimonial</a>
<a href="training.html" class="dropdown-item">Training</a>
<a href="404.html" class="dropdown-item">404 Page</a>
</div>
</div>
<a href="contact.html" class="nav-item nav-link">Contact</a>
</div>
<button class="btn btn-primary btn-md-square border-secondary mb-3 mb-md-3 mb-lg-0 me-3" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fas fa-search"></i></button>
<a href="" class="btn btn-primary border-secondary rounded-pill py-2 px-4 px-lg-3 mb-3 mb-md-3 mb-lg-0">Get A Quote</a>
</div>
</nav>
</div>
<!-- Navbar & Hero End -->
<!-- Modal Search Start -->
<div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content rounded-0">
<div class="modal-header">
<h4 class="modal-title text-secondary mb-0" id="exampleModalLabel">Search by keyword</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body d-flex align-items-center">
<div class="input-group w-75 mx-auto d-flex">
<input type="search" class="form-control p-3" placeholder="keywords" aria-describedby="search-icon-1">
<span id="search-icon-1" class="input-group-text p-3"><i class="fa fa-search"></i></span>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Search End -->
<!-- Header Start -->
<div class="container-fluid bg-breadcrumb">
<div class="container text-center py-5" style="max-width: 900px;">
<h3 class="text-white display-3 mb-4 wow fadeInDown" data-wow-delay="0.1s">Our Countries Offer</h1>
<ol class="breadcrumb justify-content-center text-white mb-0 wow fadeInDown" data-wow-delay="0.3s">
<li class="breadcrumb-item"><a href="index.html" class="text-white">Home</a></li>
<li class="breadcrumb-item"><a href="#" class="text-white">Pages</a></li>
<li class="breadcrumb-item active text-secondary">Countries</li>
</ol>
</div>
</div>
<!-- Header End -->
<!-- Countries We Offer Start -->
<div class="container-fluid country overflow-hidden py-5">
<div class="container py-5">
<div class="section-title text-center wow fadeInUp" data-wow-delay="0.1s" style="margin-bottom: 70px;">
<div class="sub-style">
<h5 class="sub-title text-primary px-3">COUNTRIES WE OFFER</h5>
</div>
<h1 class="display-5 mb-4">Immigration & visa services following Countries</h1>
<p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat deleniti amet at atque sequi quibusdam cumque itaque repudiandae temporibus, eius nam mollitia voluptas maxime veniam necessitatibus saepe in ab? Repellat!</p>
</div>
<div class="row g-4 text-center">
<div class="col-lg-6 col-xl-3 mb-5 mb-xl-0 wow fadeInUp" data-wow-delay="0.1s">
<div class="country-item">
<div class="rounded overflow-hidden">
<img src="img/country-1.jpg" class="img-fluid w-100 rounded" alt="Image">
</div>
<div class="country-flag">
<img src="img/brazil.jpg" class="img-fluid rounded-circle" alt="Image">
</div>
<div class="country-name">
<a href="#" class="text-white fs-4">Brazil</a>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-3 mb-5 mb-xl-0 wow fadeInUp" data-wow-delay="0.3s">
<div class="country-item">
<div class="rounded overflow-hidden">
<img src="img/country-2.jpg" class="img-fluid w-100 rounded" alt="Image">
</div>
<div class="country-flag">
<img src="img/india.jpg" class="img-fluid rounded-circle" alt="Image">
</div>
<div class="country-name">
<a href="#" class="text-white fs-4">india</a>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-3 mb-5 mb-xl-0 wow fadeInUp" data-wow-delay="0.5s">
<div class="country-item">
<div class="rounded overflow-hidden">
<img src="img/country-3.jpg" class="img-fluid w-100 rounded" alt="Image">
</div>
<div class="country-flag">
<img src="img/usa.jpg" class="img-fluid rounded-circle" alt="Image">
</div>
<div class="country-name">
<a href="#" class="text-white fs-4">New York</a>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-3 mb-5 mb-xl-0 wow fadeInUp" data-wow-delay="0.7s">
<div class="country-item">
<div class="rounded overflow-hidden">
<img src="img/country-4.jpg" class="img-fluid w-100 rounded" alt="Image">
</div>
<div class="country-flag">
<img src="img/italy.jpg" class="img-fluid rounded-circle" alt="Image">
</div>
<div class="country-name">
<a href="#" class="text-white fs-4">Italy</a>
</div>
</div>
</div>
<div class="col-12">
<a class="btn btn-primary border-secondary rounded-pill py-3 px-5 wow fadeInUp" data-wow-delay="0.1s" href="#">More Countries</a>
</div>
</div>
</div>
</div>
<!-- Countries We Offer End -->
<!-- Counter Facts Start -->
<div class="container-fluid counter-facts overflow-hidden py-5">
<div class="container py-5">
<div class="row g-4">
<div class="col-12 col-sm-6 col-md-6 col-xl-3 wow fadeInUp" data-wow-delay="0.1s">
<div class="counter">
<div class="counter-icon">
<i class="fas fa-passport"></i>
</div>
<div class="counter-content">
<h3>Visa Categories</h3>
<div class="d-flex align-items-center justify-content-center">
<span class="counter-value" data-toggle="counter-up">31</span>
<h4 class="text-secondary mb-0" style="font-weight: 600; font-size: 25px;">+</h4>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-xl-3 wow fadeInUp" data-wow-delay="0.3s">
<div class="counter">
<div class="counter-icon">
<i class="fas fa-users"></i>
</div>
<div class="counter-content">
<h3>Team Members</h3>
<div class="d-flex align-items-center justify-content-center">
<span class="counter-value" data-toggle="counter-up">377</span>
<h4 class="text-secondary mb-0" style="font-weight: 600; font-size: 25px;">+</h4>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-xl-3 wow fadeInUp" data-wow-delay="0.5s">
<div class="counter">
<div class="counter-icon">
<i class="fas fa-user-check"></i>
</div>
<div class="counter-content">
<h3>Visa Process</h3>
<div class="d-flex align-items-center justify-content-center">
<span class="counter-value" data-toggle="counter-up">4.9</span>
<h4 class="text-secondary mb-0" style="font-weight: 600; font-size: 25px;">K</h4>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-xl-3 wow fadeInUp" data-wow-delay="0.7s">
<div class="counter">
<div class="counter-icon">
<i class="fas fa-handshake"></i>
</div>
<div class="counter-content">
<h3>Success Rates</h3>
<div class="d-flex align-items-center justify-content-center">
<span class="counter-value" data-toggle="counter-up">98</span>
<h4 class="text-secondary mb-0" style="font-weight: 600; font-size: 25px;">%</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Counter Facts End -->
<!-- Training Start -->
<div class="container-fluid training overflow-hidden bg-light py-5">
<div class="container py-5">
<div class="section-title text-center mb-5 wow fadeInUp" data-wow-delay="0.1s">
<div class="sub-style">
<h5 class="sub-title text-primary px-3">CHECK OUR TRAINING</h5>
</div>
<h1 class="display-5 mb-4">Get the Best Coacing Service Training with Our Travisa</h1>
<p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat deleniti amet at atque sequi quibusdam cumque itaque repudiandae temporibus, eius nam mollitia voluptas maxime veniam necessitatibus saepe in ab? Repellat!</p>
</div>
<div class="row g-4">
<div class="col-lg-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.1s">
<div class="training-item">
<div class="training-inner">
<img src="img/training-1.jpg" class="img-fluid w-100 rounded" alt="Image">
<div class="training-title-name">
<a href="#" class="h4 text-white mb-0">IELTS</a>
<a href="#" class="h4 text-white mb-0">Coaching</a>
</div>
</div>
<div class="training-content bg-secondary rounded-bottom p-4">
<a href="#"><h4 class="text-white">IELTS Coaching</h4></a>
<p class="text-white-50">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, veritatis.</p>
<a class="btn btn-secondary rounded-pill text-white p-0" href="#">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-lg-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.3s">
<div class="training-item">
<div class="training-inner">
<img src="img/training-2.jpg" class="img-fluid w-100 rounded" alt="Image">
<div class="training-title-name">
<a href="#" class="h4 text-white mb-0">TOEFL</a>
<a href="#" class="h4 text-white mb-0">Coaching</a>
</div>
</div>
<div class="training-content bg-secondary rounded-bottom p-4">
<a href="#"><h4 class="text-white">TOEFL Coaching</h4></a>
<p class="text-white-50">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, veritatis.</p>
<a class="btn btn-secondary rounded-pill text-white p-0" href="#">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-lg-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.5s">
<div class="training-item">
<div class="training-inner">
<img src="img/training-3.jpg" class="img-fluid w-100 rounded" alt="Image">
<div class="training-title-name">
<a href="#" class="h4 text-white mb-0">PTE</a>
<a href="#" class="h4 text-white mb-0">Coaching</a>
</div>
</div>
<div class="training-content bg-secondary rounded-bottom p-4">
<a href="#"><h4 class="text-white">PTE Coaching</h4></a>
<p class="text-white-50">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, veritatis.</p>
<a class="btn btn-secondary rounded-pill text-white p-0" href="#">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-lg-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.7s">
<div class="training-item">
<div class="training-inner">
<img src="img/training-4.jpg" class="img-fluid w-100 rounded" alt="Image">
<div class="training-title-name">
<a href="#" class="h4 text-white mb-0">OET</a>
<a href="#" class="h4 text-white mb-0">Coaching</a>
</div>
</div>
<div class="training-content bg-secondary rounded-bottom p-4">
<a href="#"><h4 class="text-white">OET Coaching</h4></a>
<p class="text-white-50">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, veritatis.</p>
<a class="btn btn-secondary rounded-pill text-white p-0" href="#">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-12 text-center">
<a class="btn btn-primary border-secondary rounded-pill py-3 px-5 wow fadeInUp" data-wow-delay="0.1s" href="#">View More</a>
</div>
</div>
</div>
</div>
<!-- Training End -->
<!-- Footer Start -->
<div class="container-fluid footer py-5 wow fadeIn" data-wow-delay="0.2s">
<div class="container py-5">
<div class="row g-5">
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="footer-item d-flex flex-column">
<h4 class="text-secondary mb-4">Contact Info</h4>
<a href=""><i class="fa fa-map-marker-alt me-2"></i> 123 Street, New York, USA</a>
<a href=""><i class="fas fa-envelope me-2"></i> info@example.com</a>
<a href=""><i class="fas fa-phone me-2"></i> +012 345 67890</a>
<a href="" class="mb-3"><i class="fas fa-print me-2"></i> +012 345 67890</a>
<div class="d-flex align-items-center">
<i class="fas fa-share fa-2x text-secondary me-2"></i>
<a class="btn mx-1" href=""><i class="fab fa-facebook-f"></i></a>
<a class="btn mx-1" href=""><i class="fab fa-twitter"></i></a>
<a class="btn mx-1" href=""><i class="fab fa-instagram"></i></a>
<a class="btn mx-1" href=""><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="footer-item d-flex flex-column">
<h4 class="text-secondary mb-4">Opening Time</h4>
<div class="mb-3">
<h6 class="text-muted mb-0">Mon - Friday:</h6>
<p class="text-white mb-0">09.00 am to 07.00 pm</p>
</div>
<div class="mb-3">
<h6 class="text-muted mb-0">Satday:</h6>
<p class="text-white mb-0">10.00 am to 05.00 pm</p>
</div>
<div class="mb-3">
<h6 class="text-muted mb-0">Vacation:</h6>
<p class="text-white mb-0">All Sunday is our vacation</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="footer-item d-flex flex-column">
<h4 class="text-secondary mb-4">Our Services</h4>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Business</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Evaluation</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Migrate</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Study</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Counselling</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Work / Career</a>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="footer-item">
<h4 class="text-secondary mb-4">Newsletter</h4>
<p class="text-white mb-3">Dolor amet sit justo amet elitr clita ipsum elitr est.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="position-relative mx-auto rounded-pill">
<input class="form-control border-0 rounded-pill w-100 py-3 ps-4 pe-5" type="text" placeholder="Enter your email">
<button type="button" class="btn btn-primary rounded-pill position-absolute top-0 end-0 py-2 mt-2 me-2">SignUp</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer End -->
<!-- Copyright Start -->
<div class="container-fluid copyright py-4">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-md-6 text-center text-md-start mb-md-0">
<span class="text-white"><a href="#" class="border-bottom text-white"><i class="fas fa-copyright text-light me-2"></i>Your Site Name</a>, All right reserved.</span>
</div>
<div class="col-md-6 text-center text-md-end text-white">
<!--/*** This template is free as long as you keep the below author’s credit link/attribution link/backlink. ***/-->
<!--/*** If you'd like to use the template without the below author’s credit link/attribution link/backlink, ***/-->
<!--/*** you can purchase the Credit Removal License from "https://htmlcodex.com/credit-removal". ***/-->
Designed By <a class="border-bottom text-white" href="https://htmlcodex.com">HTML Codex</a>
</div>
</div>
</div>
</div>
<!-- Copyright End -->
<!-- Back to Top -->
<a href="#" class="btn btn-primary btn-lg-square back-to-top"><i class="fa fa-arrow-up"></i></a>
<!-- JavaScript Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="lib/wow/wow.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/waypoints/waypoints.min.js"></script>
<script src="lib/counterup/counterup.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<!-- Template Javascript -->
<script src="js/main.js"></script>
</body>
</html>

6
demo/pages/css/bootstrap.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

928
demo/pages/css/style.css Normal file
View File

@ -0,0 +1,928 @@
/*** Spinner Start ***/
/*** Spinner ***/
#spinner {
opacity: 0;
visibility: hidden;
transition: opacity .5s ease-out, visibility 0s linear .5s;
z-index: 99999;
}
#spinner.show {
transition: opacity .5s ease-out, visibility 0s linear 0s;
visibility: visible;
opacity: 1;
}
/*** Spinner End ***/
h1{
color: #f1592a;
}
h2{
color: #f1592a;
}
h3{
color: #f1592a;
}
h4{
color: #f1592a;
}
h5{
color: #f1592a;
}
h6{
color: #f1592a;
}
.back-to-top {
position: fixed;
right: 30px;
bottom: 30px;
display: flex;
width: 45px;
height: 45px;
align-items: center;
justify-content: center;
transition: 0.5s;
z-index: 99;
}
/* gallery start */
/* gallery end */
/*** Button Start ***/
.btn {
font-weight: 600;
transition: .5s;
}
.btn-square {
width: 32px;
height: 32px;
}
/* .mb-3{
color: #f1592a;
} */
.btn-sm-square {
width: 34px;
height: 34px;
}
.btn-md-square {
width: 44px;
height: 44px;
}
.btn-lg-square {
width: 56px;
height: 56px;
}
.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: normal;
border-radius: 50%;
}
.btn.btn-primary {
background:#f1592a !important;
color: var(--bs-white) !important;
font-family: 'Poppins', sans-serif;
font-weight: 400;
transition: 0.5s;
border: none !important;
}
.btn.btn.btn-primary:hover {
background: #d43b0b !important;
color: var(--bs-secondary);
border: 1px solid white;
}
.btn.btn-secondary {
background: transparent;
color: #f1592a;
font-family: 'Poppins', sans-serif;
font-weight: 400;
border: none;
transition: 0.5s;
}
.btn.btn-secondary:hover {
color: var(--bs-primary) !important;
}
/*** Section Title Start ***/
.section-title {
max-width: 900px;
text-align: center;
margin: 0 auto;
}
.section-title .sub-style {
position: relative;
display: inline-block;
text-transform: uppercase;
color: #f1592a;
}
.section-title .sub-style::before {
content: "";
width: 100px;
position: absolute;
bottom: 50%;
left: 0;
transform: translateY(-50%);
margin-bottom: -6px;
margin-left: -100px;
border: 1px solid #f1592a !important;
}
.section-title .sub-style::after {
content: "";
width: 50px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
margin-top: -8px;
margin-left: -50px;
border: 1px solid #f1592a !important;
}
.sub-title {
position: relative;
display: inline-block;
text-transform: uppercase;
color: #f1592a;
}
.sub-title::before {
content: "";
width: 100px;
position: absolute;
bottom: 50%;
right: 0;
transform: translateY(-50%);
margin-bottom: -8px;
margin-right: -100px;
border: 1px solid #f1592a !important;
}
.sub-title::after {
content: "";
width: 50px;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
margin-top: -6px;
margin-right: -50px;
border: 1px solid #f1592a !important;
}
/*** Topbar Start ***/
.fixed-top .container {
transition: 0.5s;
}
.topbar {
padding: 2px 10px 2px 20px;
background: var(--bs-primary) !important;
}
.topbar a,
.topbar a i {
transition: 0.5s;
}
.topbar a:hover,
.topbar a i:hover {
color: var(--bs-secondary) !important;
}
@media (max-width: 768px) {
.topbar {
display: none;
}
}
/*** Topbar End ***/
/*** Navbar ***/
.navbar-light .navbar-nav .nav-link {
font-family: 'Poppins', sans-serif;
position: relative;
margin-right: 25px;
padding: 35px 0;
color: var(--bs-primary) !important;
font-size: 17px;
font-weight: 400;
outline: none;
transition: .5s;
}
.sticky-top .navbar-light .navbar-nav .nav-link {
padding: 20px 0;
color: var(--bs-primary) !important;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
color: #f1592a !important;
}
.navbar-light .navbar-brand img {
max-height: 60px;
transition: .5s;
}
.sticky-top .navbar-light .navbar-brand img {
max-height: 45px;
}
.navbar .dropdown-toggle::after {
border: none;
content: "\f107";
font-family: "Font Awesome 5 Free";
font-weight: 600;
vertical-align: middle;
}
@media (min-width: 1200px) {
.navbar .nav-item .dropdown-menu {
display: block;
visibility: hidden;
top: 100%;
transform: rotateX(-75deg);
transform-origin: 0% 0%;
border: 0;
border-radius: 10px;
transition: .5s;
opacity: 0;
}
}
.dropdown .dropdown-menu a:hover {
background: #f1592a;
color: white;
}
.navbar .nav-item:hover .dropdown-menu {
transform: rotateX(0deg);
visibility: visible;
background: var(--bs-light) !important;
transition: .5s;
opacity: 1;
}
@media (max-width: 991.98px) {
.sticky-top {
position: relative;
background: var(--bs-white);
}
.navbar.navbar-expand-lg .navbar-toggler {
padding: 10px 20px;
border: 1px solid var(--bs-primary) !important;
color: var(--bs-primary);
}
.navbar-light .navbar-collapse {
margin-top: 15px;
border-top: 1px solid #DDDDDD;
}
.navbar-light .navbar-nav .nav-link,
.sticky-top .navbar-light .navbar-nav .nav-link {
padding: 10px 0;
margin-left: 0;
color: var(--bs-dark) !important;
}
.navbar-light .navbar-brand img {
max-height: 45px;
}
}
@media (min-width: 991.98px) {
.sticky-top .navbar-light {
background: var(--bs-light) !important;
}
/*** Top and Bottom borders go out ***/
.navbar-light .navbar-nav .nav-link:after,
.navbar-light .navbar-nav .nav-link::before {
position: absolute;
content: "";
top: 30px;
bottom: 30px;
left: 0px;
width: 100%;
height: 2px;
background: #f1592a;
opacity: 0;
transition: all 0.5s;
}
.navbar-light .navbar-nav .nav-link:before {
bottom: auto;
}
.navbar-light .navbar-nav .nav-link:after {
top: auto;
}
}
#searchModal .modal-content {
background: rgba(240, 245, 251, 0.5);
}
/*** Navbar End ***/
/*** Single Page Hero Header Start ***/
.bg-breadcrumb {
background: linear-gradient(rgba(102, 49, 0, 0.9), rgba(102, 46, 0, 0.8)), url(../img/breadcrumb.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: initial;
background-size: cover;
padding: 100px 0 60px 0;
}
/*** Single Page Hero Header End ***/
/*** Carousel Hero Header Start ***/
.carousel-header .carousel-control-prev .carousel-control-prev-icon,
.carousel-header .carousel-control-next .carousel-control-next-icon {
width: 4rem;
height: 4rem;
margin-left: -60px;
border-radius: 50%;
background-size: 60% 60%;
transition: 0.5s;
}
.carousel-header .carousel-control-next .carousel-control-next-icon {
margin-left: 0;
margin-right: -60px;
}
.carousel-header .carousel .carousel-indicators {
padding-bottom: 0;
transition: 0.5s;
}
.carousel-header .carousel .carousel-indicators li,
.carousel-header .carousel .carousel-indicators li,
.carousel-header .carousel .carousel-indicators li {
width: 8px;
height: 8px;
border: 8px solid #d43b0b;
border-radius: 50%;
margin-right: 30px;
transition: 0.5s;
}
.carousel-header .carousel .carousel-indicators li.active {
width: 8px;
height: 8px;
border: 8px solid #f1592a;
}
.carousel-header .carousel-inner .carousel-item {
position: relative;
min-height: 100vh
}
.carousel-header .carousel-inner .carousel-item img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel-header .carousel-inner .carousel-item .carousel-caption {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0.6));
background-size: cover;
}
@media (max-width: 768px) {
.carousel-header {
height: 700px !important;
}
.carousel-header .carousel-control-prev .carousel-control-prev-icon,
.carousel-header .carousel-control-next .carousel-control-next-icon {
margin-top: 500px;
}
.carousel-header .carousel-control-prev .carousel-control-prev-icon {
margin-left: 0px;
}
.carousel-header .carousel-control-next .carousel-control-next-icon {
margin-right: 0px;
}
.carousel-header .carousel .carousel-indicators {
padding: 0;
}
}
/*** Carousel Hero Header End ***/
/*** Counter Facts Start ***/
.counter-facts {
background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, 0.8)), url(../img/breadcrumb.png);
background-size: cover;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
}
.counter-facts .counter {
position: relative;
text-align: center;
width: 200px;
min-height: 215px;
padding: 10px 15px;
margin: 0 auto;
border-radius: 100px;
box-shadow: 0 8px 5px rgba(0, 0, 0, 0.2);
background: var(--bs-white);
}
.counter-facts .counter:before {
content: "";
position: absolute;
height: 105px;
width: 100%;
left: 0;
top: 0;
border-radius: 10px 10px 0 0;
background-color: #f1592a;
}
.counter-facts .counter .counter-icon {
position: relative;
width: 120px;
height: 100px;
margin: 0 auto 10px;
border-radius: 10px 10px 0 0;
transform: translateY(-20px);
font-size: 50px;
line-height: 90px;
color: whitesmoke;
background: rgba(1, 143, 252, 0.5);
clip-path: polygon(0% 0%, 100% 0, 100% 70%, 50% 100%, 0 70%);
}
.counter-facts .counter .counter-icon:before {
content: "";
position: absolute;
width: 120px;
height: 90px;
top: 0;
left: 50%;
transform: translateX(-50%);
border-radius: 10px 10px 0 0;
background: rgba(0, 58, 102, 0.5);
z-index: -1;
clip-path: polygon(0% 0%, 100% 0, 100% 70%, 50% 100%, 0 70%);
}
.counter-facts .counter:hover .counter-icon i {
transform: rotate(360deg);
transition: all 0.3s ease;
}
.counter-facts .counter h3 {
color: var(--bs-primary);
font-size: 17px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0 0 5px 0;
}
.counter-facts .counter .counter-value {
font-size: 30px;
font-weight: 700;
display: block;
color: #f1592a;
}
@media screen and (max-width: 1200px) {
.counter-facts .counter { margin-bottom: 40px;
}
}
/*** Counter Facts End ***/
/*** service Start ***/
.service .service-item {
position: relative;
overflow: hidden;
}
.service .service-item .service-inner .service-title {
position: relative;
margin-top: -30px;
text-align: center;
transition: 0.5s;
}
.service .service-item .service-inner .service-title .service-content {
position: absolute;
bottom: -100%;
left: 0;
margin-left: 30px;
margin-right: 30px;
text-align: center;
border-radius: 10px;
background: var(--bs-primary);
opacity: 0;
transition: 0.5s;
}
.service .service-item:hover .service-inner .service-title .service-content {
bottom: 0;
opacity: 1;
}
.service .service-item .service-inner .service-title .service-content a h4 {
border-bottom: 1px solid rgba(256, 256, 256, .1);
}
.service .service-item .service-inner .service-title .service-title-name {
transition: 0.5s;
}
.service .service-item:hover .service-inner .service-title .service-title-name {
opacity: 0;
}
.service .service-item .service-inner .service-img {
position: relative;
border-radius: 10px;
overflow: hidden;
}
.service .service-item .service-inner .service-img::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
border-radius: 10px;
background: rgba(255, 255, 255, .5);
transition: 0.5s;
opacity: 0;
}
.service .service-item:hover .service-inner .service-img::after {
height: 100%;
opacity: 1;
}
.service .service-item .service-inner .service-img img {
transition: 0.5s;
}
.service .service-item:hover .service-inner .service-img img {
transform: scale(1.3);
}
/*** Service End ***/
/*** Features Start ***/
.features .feature-item {
position: relative;
box-shadow: 0 0 45px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.features .feature-item::after {
content: "";
position: absolute;
width: 100%;
height: 0;
bottom: 0;
left: 0;
border-radius: 10px;
background: rgba(0, 58, 102, 0.1);
z-index: -1;
transition: 0.5s;
}
.features .feature-item:hover::after {
height: 100%;
}
.features .feature-item .feature-icon {
width: 120px;
height: 120px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
background: var(--bs-light);
transition: 0.5s;
}
.features .feature-item:hover .feature-icon {
border-radius: 50%;
background: var(--bs-white) !important;
}
.features .feature-item .feature-icon i {
transition: 0.5s;
}
.features .feature-item:hover .feature-icon i {
color:#f1592a !important;
transform: rotate(360deg);
transition: all 0.5s ease;
}
/*** Features End ***/
/*** Country Start ***/
.country .country-item {
position: relative;
}
.country .country-item::after {
position: absolute;
content: "";
width: 100%;
height: 0;
bottom: 0;
left: 0;
background: #f1592a;
border-radius: 10px;
transition: 0.5s;
z-index: 1;
}
.country .country-item:hover::after {
height: 100%;
}
.country .country-item .country-flag {
position: absolute;
width: 90px;
height: 90px;
border-radius: 50%;
top: -45px;
left: 50%;
transform: translateX(-50%);
transition: 0.5s;
z-index: 2;
}
.country .country-item .country-flag img {
border: 5px solid var(--bs-white);
transition: 0.5s;
}
.country .country-item:hover .country-flag img {
border: 5px solid var(--bs-white);
transform: rotate(360deg);
transition: all 0.5s ease;
}
.country .country-item .country-name {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: 0.5s;
opacity: 0;
z-index: 3;
}
.country .country-item:hover .country-name {
opacity: 1;
}
.country .country-item img {
transition: 0.5s;
}
.country .country-item:hover img {
transform: scale(1.2);
}
.country .country-item .country-name a.fs-4 {
transition: 0.5s;
}
.country .country-item .country-name a.fs-4:hover {
color: var(--bs-secondary) !important;
}
/*** Country End ***/
/*** testimonial Start ***/
.testimonial .owl-carousel.testimonial-carousel {
position: relative;
}
.testimonial .owl-carousel.testimonial-carousel .testimonial-item .testimonial-content {
position: relative;
border-radius: 10px;
background: var(--bs-light);
}
.testimonial .owl-carousel.testimonial-carousel .testimonial-item .testimonial-content::after {
position: absolute;
content: "";
width: 45px;
height: 45px;
bottom: -20px;
left: 30px;
transform: rotate(45deg);
background: var(--bs-light);
z-index: -1;
}
.testimonial .owl-carousel.testimonial-carousel .owl-nav {
position: absolute;
top: -60px;
right: 0;
display: flex;
font-size: 40px;
color: #545454;
}
.testimonial .owl-carousel.testimonial-carousel .owl-nav .owl-prev {
margin-right: 40px;
}
.testimonial .owl-carousel.testimonial-carousel .owl-nav .owl-prev,
.testimonial .owl-carousel.testimonial-carousel .owl-nav .owl-next {
transition: 0.5s;
}
.testimonial .owl-carousel.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial .owl-carousel.testimonial-carousel .owl-nav .owl-next:hover {
color: #f1592a;
}
/*** testimonial end ***/
/*** training Start ***/
.training .training-item .training-inner {
position: relative;
}
.training .training-item .training-inner .training-title-name {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
padding: 20px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
justify-content: end;
text-align: center;
transition: 0.5s;
}
.training .training-item {
border-radius: 10px;
position: relative;
overflow: hidden;
}
.training .training-item:hover .training-inner .training-title-name {
background: rgba(0, 58, 102, 0.5);
}
.training .training-item:hover .training-inner .training-title-name a {
opacity: 0;
}
.training .training-item .training-inner img {
transition: 0.5s;
}
.training .training-item:hover .training-inner img {
transform: scale(1.3);
}
.training .training-item .training-content {
position: absolute;
width: 100%;
bottom: -100%;
left: 0;
transition: 0.5s;
}
.training .training-item:hover .training-content {
bottom: 0;
}
/*** training End ***/
/*** Contact Start ***/
.contact .office .office-item {
text-align: center;
border-radius: 10px;
box-shadow: 0 0 45px rgba(0, 0, 0, 0.2);
background: var(--bs-light);
transition: 0.5s;
}
.contact .office .office-item:hover {
box-shadow: 20px 20px 20px rgba(0, 58, 102, 0.3);
}
.contact .office .office-item .office-img {
position: relative;
overflow: hidden;
border-radius: 10px;
}
.contact .office .office-item .office-img img {
transition: 0.5s;
}
.contact .office .office-item:hover .office-img img {
transform: scale(1.3);
}
.contact .office .office-item .office-content a.text-secondary,
.contact .office .office-item .office-content a.text-muted {
transition: 0.5s;
}
.contact .office .office-item .office-content a.text-muted:hover {
color: var(--bs-secondary) !important;
}
.contact .office .office-item .office-content a.text-secondary:hover {
color: var(--bs-primary) !important;
}
/*** Contact End ***/
/*** Footer Start ***/
.footer {
background: #f1592a;
}
.footer .footer-item a {
line-height: 30px;
color: var(--bs-white);
transition: 0.5s;
}
.footer .footer-item p {
line-height: 30px;
}
.footer .footer-item a:hover {
letter-spacing: 2px;
color: rgb(229, 225, 225);
}
/*** Footer End ***/
/*** copyright Start ***/
.copyright {
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: var(--bs-secondary) !important;
}
/*** copyright end ***/

441
demo/pages/feature.html Normal file
View File

@ -0,0 +1,441 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Travisa - Visa & Immigration Website Template</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Poppins:wght@200;300;400;500;600&display=swap" rel="stylesheet">
<!-- Icon Font Stylesheet -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
<!-- Libraries Stylesheet -->
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<!-- Customized Bootstrap Stylesheet -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Spinner Start -->
<div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
<div class="spinner-border text-secondary" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<!-- Spinner End -->
<!-- Topbar Start -->
<div class="container-fluid bg-primary px-5 d-none d-lg-block">
<div class="row gx-0 align-items-center">
<div class="col-lg-5 text-center text-lg-start mb-lg-0">
<div class="d-flex">
<a href="#" class="text-muted me-4"><i class="fas fa-envelope text-secondary me-2"></i>Example@gmail.com</a>
<a href="#" class="text-muted me-0"><i class="fas fa-phone-alt text-secondary me-2"></i>+01234567890</a>
</div>
</div>
<div class="col-lg-3 row-cols-1 text-center mb-2 mb-lg-0">
<div class="d-inline-flex align-items-center" style="height: 45px;">
<a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2" href=""><i class="fab fa-twitter fw-normal text-secondary"></i></a>
<a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2" href=""><i class="fab fa-facebook-f fw-normal text-secondary"></i></a>
<a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2" href=""><i class="fab fa-linkedin-in fw-normal text-secondary"></i></a>
<a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2" href=""><i class="fab fa-instagram fw-normal text-secondary"></i></a>
<a class="btn btn-sm btn-outline-light btn-square rounded-circle" href=""><i class="fab fa-youtube fw-normal text-secondary"></i></a>
</div>
</div>
<div class="col-lg-4 text-center text-lg-end">
<div class="d-inline-flex align-items-center" style="height: 45px;">
<a href="#" class="text-muted me-2"> Help</a><small> / </small>
<a href="#" class="text-muted mx-2"> Support</a><small> / </small>
<a href="#" class="text-muted ms-2"> Contact</a>
</div>
</div>
</div>
</div>
<!-- Topbar End -->
<!-- Navbar & Hero Start -->
<div class="container-fluid nav-bar p-0">
<nav class="navbar navbar-expand-lg navbar-light bg-white px-4 px-lg-5 py-3 py-lg-0">
<a href="" class="navbar-brand p-0">
<h1 class="display-5 text-secondary m-0"><img src="img/brand-logo.png" class="img-fluid" alt="">Travisa</h1>
<!-- <img src="img/logo.png" alt="Logo"> -->
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="fa fa-bars"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ms-auto py-0">
<a href="index.html" class="nav-item nav-link">Home</a>
<a href="about.html" class="nav-item nav-link">About</a>
<a href="service.html" class="nav-item nav-link">Service</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link active" data-bs-toggle="dropdown"><span class="dropdown-toggle">Pages</span></a>
<div class="dropdown-menu m-0">
<a href="feature.html" class="dropdown-item active">Feature</a>
<a href="countries.html" class="dropdown-item">Countries</a>
<a href="testimonial.html" class="dropdown-item">Testimonial</a>
<a href="training.html" class="dropdown-item">Training</a>
<a href="404.html" class="dropdown-item">404 Page</a>
</div>
</div>
<a href="contact.html" class="nav-item nav-link">Contact</a>
</div>
<button class="btn btn-primary btn-md-square border-secondary mb-3 mb-md-3 mb-lg-0 me-3" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fas fa-search"></i></button>
<a href="" class="btn btn-primary border-secondary rounded-pill py-2 px-4 px-lg-3 mb-3 mb-md-3 mb-lg-0">Get A Quote</a>
</div>
</nav>
</div>
<!-- Navbar & Hero End -->
<!-- Modal Search Start -->
<div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content rounded-0">
<div class="modal-header">
<h4 class="modal-title text-secondary mb-0" id="exampleModalLabel">Search by keyword</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body d-flex align-items-center">
<div class="input-group w-75 mx-auto d-flex">
<input type="search" class="form-control p-3" placeholder="keywords" aria-describedby="search-icon-1">
<span id="search-icon-1" class="input-group-text p-3"><i class="fa fa-search"></i></span>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Search End -->
<!-- Header Start -->
<div class="container-fluid bg-breadcrumb">
<div class="container text-center py-5" style="max-width: 900px;">
<h3 class="text-white display-3 mb-4 wow fadeInDown" data-wow-delay="0.1s">Our Features</h1>
<ol class="breadcrumb justify-content-center text-white mb-0 wow fadeInDown" data-wow-delay="0.3s">
<li class="breadcrumb-item"><a href="index.html" class="text-white">Home</a></li>
<li class="breadcrumb-item"><a href="#" class="text-white">Pages</a></li>
<li class="breadcrumb-item active text-secondary">Features</li>
</ol>
</div>
</div>
<!-- Header End -->
<!-- Features Start -->
<div class="container-fluid features overflow-hidden py-5">
<div class="container py-5">
<div class="section-title text-center mb-5 wow fadeInUp" data-wow-delay="0.1s">
<div class="sub-style">
<h5 class="sub-title text-primary px-3">Why Choose Us</h5>
</div>
<h1 class="display-5 mb-4">Offer Tailor Made Services That Our Client Requires</h1>
<p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat deleniti amet at atque sequi quibusdam cumque itaque repudiandae temporibus, eius nam mollitia voluptas maxime veniam necessitatibus saepe in ab? Repellat!</p>
</div>
<div class="row g-4 justify-content-center text-center">
<div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.1s">
<div class="feature-item text-center p-4">
<div class="feature-icon p-3 mb-4">
<i class="fas fa-dollar-sign fa-4x text-primary"></i>
</div>
<div class="feature-content d-flex flex-column">
<h5 class="mb-3">Cost-Effective</h5>
<p class="mb-3">Dolor, sit amet consectetur adipisicing elit. Soluta inventore cum accusamus,</p>
<a class="btn btn-secondary rounded-pill" href="#">Read More<i class="fas fa-arrow-right ms-2"></i></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.3s">
<div class="feature-item text-center p-4">
<div class="feature-icon p-3 mb-4">
<i class="fab fa-cc-visa fa-4x text-primary"></i>
</div>
<div class="feature-content d-flex flex-column">
<h5 class="mb-3">Visa Assistance</h5>
<p class="mb-3">Dolor, sit amet consectetur adipisicing elit. Soluta inventore cum accusamus,</p>
<a class="btn btn-secondary rounded-pill" href="#">Read More<i class="fas fa-arrow-right ms-2"></i></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.5s">
<div class="feature-item text-center p-4">
<div class="feature-icon p-3 mb-4">
<i class="fas fa-atlas fa-4x text-primary"></i>
</div>
<div class="feature-content d-flex flex-column">
<h5 class="mb-3">Faster Processing</h5>
<p class="mb-3">Dolor, sit amet consectetur adipisicing elit. Soluta inventore cum accusamus,</p>
<a class="btn btn-secondary rounded-pill" href="#">Read More<i class="fas fa-arrow-right ms-2"></i></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.7s">
<div class="feature-item text-center p-4">
<div class="feature-icon p-3 mb-4">
<i class="fas fa-users fa-4x text-primary"></i>
</div>
<div class="feature-content d-flex flex-column">
<h5 class="mb-3">Direct Interviews</h5>
<p class="mb-3">Dolor, sit amet consectetur adipisicing elit. Soluta inventore cum accusamus,</p>
<a class="btn btn-secondary rounded-pill" href="#">Read More<i class="fas fa-arrow-right ms-2"></i></a>
</div>
</div>
</div>
<div class="col-12">
<a class="btn btn-primary border-secondary rounded-pill py-3 px-5 wow fadeInUp" data-wow-delay="0.1s" href="#">More Features</a>
</div>
</div>
</div>
</div>
<!-- Features End -->
<!-- Counter Facts Start -->
<div class="container-fluid counter-facts overflow-hidden py-5">
<div class="container py-5">
<div class="row g-4">
<div class="col-12 col-sm-6 col-md-6 col-xl-3 wow fadeInUp" data-wow-delay="0.1s">
<div class="counter">
<div class="counter-icon">
<i class="fas fa-passport"></i>
</div>
<div class="counter-content">
<h3>Visa Categories</h3>
<div class="d-flex align-items-center justify-content-center">
<span class="counter-value" data-toggle="counter-up">31</span>
<h4 class="text-secondary mb-0" style="font-weight: 600; font-size: 25px;">+</h4>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-xl-3 wow fadeInUp" data-wow-delay="0.3s">
<div class="counter">
<div class="counter-icon">
<i class="fas fa-users"></i>
</div>
<div class="counter-content">
<h3>Team Members</h3>
<div class="d-flex align-items-center justify-content-center">
<span class="counter-value" data-toggle="counter-up">377</span>
<h4 class="text-secondary mb-0" style="font-weight: 600; font-size: 25px;">+</h4>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-xl-3 wow fadeInUp" data-wow-delay="0.5s">
<div class="counter">
<div class="counter-icon">
<i class="fas fa-user-check"></i>
</div>
<div class="counter-content">
<h3>Visa Process</h3>
<div class="d-flex align-items-center justify-content-center">
<span class="counter-value" data-toggle="counter-up">4.9</span>
<h4 class="text-secondary mb-0" style="font-weight: 600; font-size: 25px;">K</h4>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-xl-3 wow fadeInUp" data-wow-delay="0.7s">
<div class="counter">
<div class="counter-icon">
<i class="fas fa-handshake"></i>
</div>
<div class="counter-content">
<h3>Success Rates</h3>
<div class="d-flex align-items-center justify-content-center">
<span class="counter-value" data-toggle="counter-up">98</span>
<h4 class="text-secondary mb-0" style="font-weight: 600; font-size: 25px;">%</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Counter Facts End -->
<!-- Countries We Offer Start -->
<div class="container-fluid country overflow-hidden py-5">
<div class="container py-5">
<div class="section-title text-center wow fadeInUp" data-wow-delay="0.1s" style="margin-bottom: 70px;">
<div class="sub-style">
<h5 class="sub-title text-primary px-3">COUNTRIES WE OFFER</h5>
</div>
<h1 class="display-5 mb-4">Immigration & visa services following Countries</h1>
<p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat deleniti amet at atque sequi quibusdam cumque itaque repudiandae temporibus, eius nam mollitia voluptas maxime veniam necessitatibus saepe in ab? Repellat!</p>
</div>
<div class="row g-4 text-center">
<div class="col-lg-6 col-xl-3 mb-5 mb-xl-0 wow fadeInUp" data-wow-delay="0.1s">
<div class="country-item">
<div class="rounded overflow-hidden">
<img src="img/country-1.jpg" class="img-fluid w-100 rounded" alt="Image">
</div>
<div class="country-flag">
<img src="img/brazil.jpg" class="img-fluid rounded-circle" alt="Image">
</div>
<div class="country-name">
<a href="#" class="text-white fs-4">Brazil</a>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-3 mb-5 mb-xl-0 wow fadeInUp" data-wow-delay="0.3s">
<div class="country-item">
<div class="rounded overflow-hidden">
<img src="img/country-2.jpg" class="img-fluid w-100 rounded" alt="Image">
</div>
<div class="country-flag">
<img src="img/india.jpg" class="img-fluid rounded-circle" alt="Image">
</div>
<div class="country-name">
<a href="#" class="text-white fs-4">india</a>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-3 mb-5 mb-xl-0 wow fadeInUp" data-wow-delay="0.5s">
<div class="country-item">
<div class="rounded overflow-hidden">
<img src="img/country-3.jpg" class="img-fluid w-100 rounded" alt="Image">
</div>
<div class="country-flag">
<img src="img/usa.jpg" class="img-fluid rounded-circle" alt="Image">
</div>
<div class="country-name">
<a href="#" class="text-white fs-4">New York</a>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-3 mb-5 mb-xl-0 wow fadeInUp" data-wow-delay="0.7s">
<div class="country-item">
<div class="rounded overflow-hidden">
<img src="img/country-4.jpg" class="img-fluid w-100 rounded" alt="Image">
</div>
<div class="country-flag">
<img src="img/italy.jpg" class="img-fluid rounded-circle" alt="Image">
</div>
<div class="country-name">
<a href="#" class="text-white fs-4">Italy</a>
</div>
</div>
</div>
<div class="col-12">
<a class="btn btn-primary border-secondary rounded-pill py-3 px-5 wow fadeInUp" data-wow-delay="0.1s" href="#">More Countries</a>
</div>
</div>
</div>
</div>
<!-- Countries We Offer End -->
<!-- Footer Start -->
<div class="container-fluid footer py-5 wow fadeIn" data-wow-delay="0.2s">
<div class="container py-5">
<div class="row g-5">
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="footer-item d-flex flex-column">
<h4 class="text-secondary mb-4">Contact Info</h4>
<a href=""><i class="fa fa-map-marker-alt me-2"></i> 123 Street, New York, USA</a>
<a href=""><i class="fas fa-envelope me-2"></i> info@example.com</a>
<a href=""><i class="fas fa-phone me-2"></i> +012 345 67890</a>
<a href="" class="mb-3"><i class="fas fa-print me-2"></i> +012 345 67890</a>
<div class="d-flex align-items-center">
<i class="fas fa-share fa-2x text-secondary me-2"></i>
<a class="btn mx-1" href=""><i class="fab fa-facebook-f"></i></a>
<a class="btn mx-1" href=""><i class="fab fa-twitter"></i></a>
<a class="btn mx-1" href=""><i class="fab fa-instagram"></i></a>
<a class="btn mx-1" href=""><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="footer-item d-flex flex-column">
<h4 class="text-secondary mb-4">Opening Time</h4>
<div class="mb-3">
<h6 class="text-muted mb-0">Mon - Friday:</h6>
<p class="text-white mb-0">09.00 am to 07.00 pm</p>
</div>
<div class="mb-3">
<h6 class="text-muted mb-0">Satday:</h6>
<p class="text-white mb-0">10.00 am to 05.00 pm</p>
</div>
<div class="mb-3">
<h6 class="text-muted mb-0">Vacation:</h6>
<p class="text-white mb-0">All Sunday is our vacation</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="footer-item d-flex flex-column">
<h4 class="text-secondary mb-4">Our Services</h4>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Business</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Evaluation</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Migrate</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Study</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Counselling</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Work / Career</a>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="footer-item">
<h4 class="text-secondary mb-4">Newsletter</h4>
<p class="text-white mb-3">Dolor amet sit justo amet elitr clita ipsum elitr est.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="position-relative mx-auto rounded-pill">
<input class="form-control border-0 rounded-pill w-100 py-3 ps-4 pe-5" type="text" placeholder="Enter your email">
<button type="button" class="btn btn-primary rounded-pill position-absolute top-0 end-0 py-2 mt-2 me-2">SignUp</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer End -->
<!-- Copyright Start -->
<div class="container-fluid copyright py-4">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-md-6 text-center text-md-start mb-md-0">
<span class="text-white"><a href="#" class="border-bottom text-white"><i class="fas fa-copyright text-light me-2"></i>Your Site Name</a>, All right reserved.</span>
</div>
<div class="col-md-6 text-center text-md-end text-white">
<!--/*** This template is free as long as you keep the below author’s credit link/attribution link/backlink. ***/-->
<!--/*** If you'd like to use the template without the below author’s credit link/attribution link/backlink, ***/-->
<!--/*** you can purchase the Credit Removal License from "https://htmlcodex.com/credit-removal". ***/-->
Designed By <a class="border-bottom text-white" href="https://htmlcodex.com">HTML Codex</a>
</div>
</div>
</div>
</div>
<!-- Copyright End -->
<!-- Back to Top -->
<a href="#" class="btn btn-primary btn-lg-square back-to-top"><i class="fa fa-arrow-up"></i></a>
<!-- JavaScript Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="lib/wow/wow.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/waypoints/waypoints.min.js"></script>
<script src="lib/counterup/counterup.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<!-- Template Javascript -->
<script src="js/main.js"></script>
</body>
</html>

BIN
demo/pages/img/08.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 543 KiB

BIN
demo/pages/img/Orient.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 110 KiB

BIN
demo/pages/img/about-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

BIN
demo/pages/img/about-3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
demo/pages/img/ausflag.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
demo/pages/img/australia.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 151 KiB

BIN
demo/pages/img/australia.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 798 KiB

BIN
demo/pages/img/brand-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
demo/pages/img/brazil.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
demo/pages/img/breadcrumb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 412 KiB

BIN
demo/pages/img/canada.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
demo/pages/img/canadaflag.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
demo/pages/img/carousel-1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

BIN
demo/pages/img/carousel-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 115 KiB

BIN
demo/pages/img/country-1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
demo/pages/img/country-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 104 KiB

BIN
demo/pages/img/country-3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
demo/pages/img/country-4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
demo/pages/img/india.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
demo/pages/img/italy.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
demo/pages/img/japan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 685 KiB

BIN
demo/pages/img/japanflag.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
demo/pages/img/langclass.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

BIN
demo/pages/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
demo/pages/img/newzealand.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 873 KiB

BIN
demo/pages/img/newzealandflag.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
demo/pages/img/office-1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
demo/pages/img/office-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
demo/pages/img/office-3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
demo/pages/img/office-4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
demo/pages/img/profile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 200 KiB

BIN
demo/pages/img/pte_coaching.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 429 KiB

BIN
demo/pages/img/reg-form.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 MiB

BIN
demo/pages/img/service-1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
demo/pages/img/service-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
demo/pages/img/service-3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
demo/pages/img/service-4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
demo/pages/img/singapore.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 412 KiB

BIN
demo/pages/img/slider.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
demo/pages/img/testibg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 917 KiB

BIN
demo/pages/img/testimonial-1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
demo/pages/img/testimonial-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
demo/pages/img/testimonial-3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
demo/pages/img/toefl.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 392 KiB

BIN
demo/pages/img/training-1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
demo/pages/img/training-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
demo/pages/img/training-3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
demo/pages/img/training-4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
demo/pages/img/uk.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 967 KiB

BIN
demo/pages/img/ukflag.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

BIN
demo/pages/img/usa.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
demo/pages/img/usa.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1024 KiB

944
demo/pages/index.html Normal file
View File

@ -0,0 +1,944 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bibhuti Website Template</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Poppins:wght@200;300;400;500;600&display=swap" rel="stylesheet">
<!-- Icon Font Stylesheet -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
<!-- Libraries Stylesheet -->
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<!-- Customized Bootstrap Stylesheet -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Spinner Start -->
<div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
<div class="spinner-border text-secondary" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<!-- Spinner End -->
<!-- Topbar Start -->
<div class="container-fluid bg-primary px-5 d-none d-lg-block">
<div class="row gx-0 align-items-center">
<div class="col-lg-5 text-center text-lg-start mb-lg-0">
<div class="d-flex">
<a href="#" class="text-muted me-4"><i class="fas fa-envelope text-secondary me-2"></i>Example@gmail.com</a>
<a href="#" class="text-muted me-0"><i class="fas fa-phone-alt text-secondary me-2"></i>+01234567890</a>
</div>
</div>
<div class="col-lg-3 row-cols-1 text-center mb-2 mb-lg-0">
<div class="d-inline-flex align-items-center" style="height: 45px;">
<a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2" href=""><i class="fab fa-twitter fw-normal text-secondary"></i></a>
<a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2" href=""><i class="fab fa-facebook-f fw-normal text-secondary"></i></a>
<a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2" href=""><i class="fab fa-linkedin-in fw-normal text-secondary"></i></a>
<a class="btn btn-sm btn-outline-light btn-square rounded-circle me-2" href=""><i class="fab fa-instagram fw-normal text-secondary"></i></a>
<a class="btn btn-sm btn-outline-light btn-square rounded-circle" href=""><i class="fab fa-youtube fw-normal text-secondary"></i></a>
</div>
</div>
<div class="col-lg-4 text-center text-lg-end">
<div class="d-inline-flex align-items-center" style="height: 45px;">
<a href="#" class="text-muted me-2"> Help</a><small> / </small>
<a href="#" class="text-muted mx-2"> Support</a><small> / </small>
<a href="#" class="text-muted ms-2"> Contact</a>
</div>
</div>
</div>
</div>
<!-- Topbar End -->
<!-- Navbar & Hero Start -->
<div class="container-fluid nav-bar p-0">
<nav class="navbar navbar-expand-lg navbar-light bg-white px-4 px-lg-5 py-3 py-lg-0">
<a href="" class="navbar-brand p-0">
<h1 class="display-5 text-secondary m-0"><img src="img/brand-logo.png" class="img-fluid" alt="">Travisa</h1>
<!-- <img src="img/logo.png" alt="Logo"> -->
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="fa fa-bars"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ms-auto py-0">
<a href="index.html" class="nav-item nav-link active">Home</a>
<a href="about.html" class="nav-item nav-link">About</a>
<a href="service.html" class="nav-item nav-link">Service</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link" data-bs-toggle="dropdown"><span class="dropdown-toggle">Pages</span></a>
<div class="dropdown-menu m-0">
<a href="feature.html" class="dropdown-item">Feature</a>
<a href="countries.html" class="dropdown-item">Countries</a>
<a href="testimonial.html" class="dropdown-item">Testimonial</a>
<a href="training.html" class="dropdown-item">Training</a>
<a href="404.html" class="dropdown-item">404 Page</a>
</div>
</div>
<a href="contact.html" class="nav-item nav-link">Contact</a>
</div>
<button class="btn btn-primary btn-md-square border-secondary mb-3 mb-md-3 mb-lg-0 me-3" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fas fa-search"></i></button>
<a href="" class="btn btn-primary border-secondary rounded-pill py-2 px-4 px-lg-3 mb-3 mb-md-3 mb-lg-0">Get A Quote</a>
</div>
</nav>
</div>
<!-- Navbar & Hero End -->
<!-- Carousel Start -->
<div class="carousel-header">
<div id="carouselId" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselId" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselId" data-bs-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="img/carousel-1.jpg" class="img-fluid" alt="Image">
<div class="carousel-caption">
<div class="text-center p-4" style="max-width: 900px;">
<h4 class="text-white text-uppercase fw-bold mb-3 mb-md-4 wow fadeInUp" data-wow-delay="0.1s">Solution For All Type Of Visas</h4>
<h1 class="display-1 text-capitalize text-white mb-3 mb-md-4 wow fadeInUp" data-wow-delay="0.3s">Immigration Process Starts Here!</h1>
<p class="text-white mb-4 mb-md-5 fs-5 wow fadeInUp" data-wow-delay="0.5s">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</p>
<a class="btn btn-primary border-secondary rounded-pill text-white py-3 px-5 wow fadeInUp" data-wow-delay="0.7s" href="#">More Details</a>
</div>
</div>
</div>
<div class="carousel-item">
<img src="img/carousel-2.jpg" class="img-fluid" alt="Image">
<div class="carousel-caption">
<div class="text-center p-4" style="max-width: 900px;">
<h5 class="text-white text-uppercase fw-bold mb-3 mb-md-4 wow fadeInUp" data-wow-delay="0.1s">Solution For All Type Of Visas</h5>
<h1 class="display-1 text-capitalize text-white mb-3 mb-md-4 wow fadeInUp" data-wow-delay="0.3s">Best Visa Immigrations Services</h1>
<p class="text-white mb-4 mb-md-5 fs-5 wow fadeInUp" data-wow-delay="0.5s">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</p>
<a class="btn btn-primary border-secondary rounded-pill text-white py-3 px-5 wow fadeInUp" data-wow-delay="0.7s" href="#">More Details</a>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselId" data-bs-slide="prev">
<span class="carousel-control-prev-icon bg-secondary wow fadeInLeft" data-wow-delay="0.2s" aria-hidden="false"></span>
<span class="visually-hidden-focusable">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselId" data-bs-slide="next">
<span class="carousel-control-next-icon bg-secondary wow fadeInRight" data-wow-delay="0.2s" aria-hidden="false"></span>
<span class="visually-hidden-focusable">Next</span>
</button>
</div>
</div>
<!-- Carousel End -->
<!-- Modal Search Start -->
<div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content rounded-0">
<div class="modal-header">
<h4 class="modal-title text-secondary mb-0" id="exampleModalLabel">Search by keyword</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body d-flex align-items-center">
<div class="input-group w-75 mx-auto d-flex">
<input type="search" class="form-control p-3" placeholder="keywords" aria-describedby="search-icon-1">
<span id="search-icon-1" class="input-group-text p-3"><i class="fa fa-search"></i></span>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Search End -->
<!-- About Start -->
<div class="container-fluid py-5">
<div class="container py-5">
<div class="row g-5">
<div class="col-xl-5 wow fadeInLeft" data-wow-delay="0.1s">
<div class="bg-light rounded">
<img src="img/about-2.png" class="img-fluid w-100" style="margin-bottom: -7px;" alt="Image">
<img src="img/about-3.jpg" class="img-fluid w-100 border-bottom border-5 border-primary" style="border-top-right-radius: 300px; border-top-left-radius: 300px;" alt="Image">
</div>
</div>
<div class="col-xl-7 wow fadeInRight" data-wow-delay="0.3s">
<h5 class="sub-title pe-3">About the company</h5>
<h1 class="display-5 mb-4">We’re Trusted Immigration Consultant Agency.</h1>
<p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt architecto consectetur iusto perferendis blanditiis assumenda dignissimos, commodi fuga culpa earum explicabo libero sint est mollitia saepe! Sequi asperiores rerum nemo!</p>
<div class="row gy-4 align-items-center">
<div class="col-12 col-sm-6 d-flex align-items-center">
<i class="fas fa-map-marked-alt fa-3x text-secondary"></i>
<h5 class="ms-4">Best Immigration Resources</h5>
</div>
<div class="col-12 col-sm-6 d-flex align-items-center">
<i class="fas fa-passport fa-3x text-secondary"></i>
<h5 class="ms-4">Return Visas Availabile</h5>
</div>
<div class="col-4 col-md-3">
<div class="bg-light text-center rounded p-3">
<div class="mb-2">
<i class="fas fa-ticket-alt fa-4x text-primary"></i>
</div>
<h1 class="display-5 fw-bold mb-2">34</h1>
<p class="text-muted mb-0">Years of Experience</p>
</div>
</div>
<div class="col-8 col-md-9">
<div class="mb-5">
<p class="text-primary h6 mb-3"><i class="fa fa-check-circle text-secondary me-2"></i> Offer 100 % Genuine Assistance</p>
<p class="text-primary h6 mb-3"><i class="fa fa-check-circle text-secondary me-2"></i> It’s Faster & Reliable Execution</p>
<p class="text-primary h6 mb-3"><i class="fa fa-check-circle text-secondary me-2"></i> Accurate & Expert Advice</p>
</div>
<div class="d-flex flex-wrap">
<div id="phone-tada" class="d-flex align-items-center justify-content-center me-4">
<a href="" class="position-relative wow tada" data-wow-delay=".9s">
<i class="fa fa-phone-alt text-primary fa-3x"></i>
<div class="position-absolute" style="top: 0; left: 25px;">
<span><i class="fa fa-comment-dots text-secondary"></i></span>
</div>
</a>
</div>
<div class="d-flex flex-column justify-content-center">
<span class="text-primary">Have any questions?</span>
<span class="text-secondary fw-bold fs-5" style="letter-spacing: 2px;">Free: +0123 456 7890</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- About End -->
<!-- Counter Facts Start -->
<div class="container-fluid counter-facts py-5">
<div class="container py-5">
<div class="row g-4">
<div class="col-12 col-sm-6 col-md-6 col-xl-3 wow fadeInUp" data-wow-delay="0.1s">
<div class="counter">
<div class="counter-icon">
<i class="fas fa-passport"></i>
</div>
<div class="counter-content">
<h3>Visa Categories</h3>
<div class="d-flex align-items-center justify-content-center">
<span class="counter-value" data-toggle="counter-up">31</span>
<h4 class="text-secondary mb-0" style="font-weight: 600; font-size: 25px;">+</h4>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-xl-3 wow fadeInUp" data-wow-delay="0.3s">
<div class="counter">
<div class="counter-icon">
<i class="fas fa-users"></i>
</div>
<div class="counter-content">
<h3>Team Members</h3>
<div class="d-flex align-items-center justify-content-center">
<span class="counter-value" data-toggle="counter-up">377</span>
<h4 class="text-secondary mb-0" style="font-weight: 600; font-size: 25px;">+</h4>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-xl-3 wow fadeInUp" data-wow-delay="0.5s">
<div class="counter">
<div class="counter-icon">
<i class="fas fa-user-check"></i>
</div>
<div class="counter-content">
<h3>Visa Process</h3>
<div class="d-flex align-items-center justify-content-center">
<span class="counter-value" data-toggle="counter-up">4.9</span>
<h4 class="text-secondary mb-0" style="font-weight: 600; font-size: 25px;">K</h4>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-xl-3 wow fadeInUp" data-wow-delay="0.7s">
<div class="counter">
<div class="counter-icon">
<i class="fas fa-handshake"></i>
</div>
<div class="counter-content">
<h3>Success Rates</h3>
<div class="d-flex align-items-center justify-content-center">
<span class="counter-value" data-toggle="counter-up">98</span>
<h4 class="text-secondary mb-0" style="font-weight: 600; font-size: 25px;">%</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Counter Facts End -->
<!-- Services Start -->
<div class="container-fluid service overflow-hidden pt-5">
<div class="container py-5">
<div class="section-title text-center mb-5 wow fadeInUp" data-wow-delay="0.1s">
<div class="sub-style">
<h5 class="sub-title text-primary px-3">Visa Categories</h5>
</div>
<h1 class="display-5 mb-4">Enabling Your Immigration Successfully</h1>
<p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat deleniti amet at atque sequi quibusdam cumque itaque repudiandae temporibus, eius nam mollitia voluptas maxime veniam necessitatibus saepe in ab? Repellat!</p>
</div>
<div class="row g-4">
<div class="col-lg-6 col-xl-4 wow fadeInUp" data-wow-delay="0.1s">
<div class="service-item">
<div class="service-inner">
<div class="service-img">
<img src="img/service-1.jpg" class="img-fluid w-100 rounded" alt="Image">
</div>
<div class="service-title">
<div class="service-title-name">
<div class="bg-primary text-center rounded p-3 mx-5 mb-4">
<a href="#" class="h4 text-white mb-0">Job Visa</a>
</div>
<a class="btn bg-light text-secondary rounded-pill py-3 px-5 mb-4" href="#">Explore More</a>
</div>
<div class="service-content pb-4">
<a href="#"><h4 class="text-white mb-4 py-3">Job Visa</h4></a>
<div class="px-4">
<p class="mb-4">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia fugit dolores nesciunt adipisci obcaecati veritatis cum, ratione aspernatur autem velit.</p>
<a class="btn btn-primary border-secondary rounded-pill py-3 px-5" href="#">Explore More</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-4 wow fadeInUp" data-wow-delay="0.3s">
<div class="service-item">
<div class="service-inner">
<div class="service-img">
<img src="img/service-2.jpg" class="img-fluid w-100 rounded" alt="Image">
</div>
<div class="service-title">
<div class="service-title-name">
<div class="bg-primary text-center rounded p-3 mx-5 mb-4">
<a href="#" class="h4 text-white mb-0">Business Visa</a>
</div>
<a class="btn bg-light text-secondary rounded-pill py-3 px-5 mb-4" href="#">Explore More</a>
</div>
<div class="service-content pb-4">
<a href="#"><h4 class="text-white mb-4 py-3">Business Visa</h4></a>
<div class="px-4">
<p class="mb-4">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia fugit dolores nesciunt adipisci obcaecati veritatis cum, ratione aspernatur autem velit.</p>
<a class="btn btn-primary border-secondary rounded-pill text-white py-3 px-5" href="#">Explore More</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-4 wow fadeInUp" data-wow-delay="0.5s">
<div class="service-item">
<div class="service-inner">
<div class="service-img">
<img src="img/service-3.jpg" class="img-fluid w-100 rounded" alt="Image">
</div>
<div class="service-title">
<div class="service-title-name">
<div class="bg-primary text-center rounded p-3 mx-5 mb-4">
<a href="#" class="h4 text-white mb-0">Diplometic Visa</a>
</div>
<a class="btn bg-light text-secondary rounded-pill py-3 px-5 mb-4" href="#">Explore More</a>
</div>
<div class="service-content pb-4">
<a href="#"><h4 class="text-white mb-4 py-3">Diplometic Visa</h4></a>
<div class="px-4">
<p class="mb-4">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia fugit dolores nesciunt adipisci obcaecati veritatis cum, ratione aspernatur autem velit.</p>
<a class="btn btn-primary border-secondary rounded-pill text-white py-3 px-5" href="#">Explore More</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-4 wow fadeInUp" data-wow-delay="0.1s">
<div class="service-item">
<div class="service-inner">
<div class="service-img">
<img src="img/service-1.jpg" class="img-fluid w-100 rounded" alt="Image">
</div>
<div class="service-title">
<div class="service-title-name">
<div class="bg-primary text-center rounded p-3 mx-5 mb-4">
<a href="#" class="h4 text-white mb-0">Students Visa</a>
</div>
<a class="btn bg-light text-secondary rounded-pill py-3 px-5 mb-4" href="#">Explore More</a>
</div>
<div class="service-content pb-4">
<a href="#"><h4 class="text-white mb-4 py-3">Students Visa</h4></a>
<div class="px-4">
<p class="mb-4">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia fugit dolores nesciunt adipisci obcaecati veritatis cum, ratione aspernatur autem velit.</p>
<a class="btn btn-primary border-secondary rounded-pill text-white py-3 px-5" href="#">Explore More</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-4 wow fadeInUp" data-wow-delay="0.3s">
<div class="service-item">
<div class="service-inner">
<div class="service-img">
<img src="img/service-2.jpg" class="img-fluid w-100 rounded" alt="Image">
</div>
<div class="service-title">
<div class="service-title-name">
<div class="bg-primary text-center rounded p-3 mx-5 mb-4">
<a href="#" class="h4 text-white mb-0">Residence Visa</a>
</div>
<a class="btn bg-light text-secondary rounded-pill py-3 px-5 mb-4" href="#">Explore More</a>
</div>
<div class="service-content pb-4">
<a href="#"><h4 class="text-white mb-4 py-3">Residence Visa</h4></a>
<div class="px-4">
<p class="mb-4">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia fugit dolores nesciunt adipisci obcaecati veritatis cum, ratione aspernatur autem velit.</p>
<a class="btn btn-primary border-secondary rounded-pill text-white py-3 px-5" href="#">Explore More</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-4 wow fadeInUp" data-wow-delay="0.5s">
<div class="service-item">
<div class="service-inner">
<div class="service-img">
<img src="img/service-3.jpg" class="img-fluid w-100 rounded" alt="Image">
</div>
<div class="service-title">
<div class="service-title-name">
<div class="bg-primary text-center rounded p-3 mx-5 mb-4">
<a href="#" class="h4 text-white mb-0">Tourist Visa</a>
</div>
<a class="btn bg-light text-secondary rounded-pill py-3 px-5 mb-4" href="#">Explore More</a>
</div>
<div class="service-content pb-4">
<a href="#"><h4 class="text-white mb-4 py-3">Tourist Visa</h4></a>
<div class="px-4">
<p class="mb-4">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia fugit dolores nesciunt adipisci obcaecati veritatis cum, ratione aspernatur autem velit.</p>
<a class="btn btn-primary border-secondary rounded-pill text-white py-3 px-5" href="#">Explore More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Services End -->
<!-- Features Start -->
<div class="container-fluid features overflow-hidden py-5">
<div class="container">
<div class="section-title text-center mb-5 wow fadeInUp" data-wow-delay="0.1s">
<div class="sub-style">
<h5 class="sub-title text-primary px-3">Why Choose Us</h5>
</div>
<h1 class="display-5 mb-4">Offer Tailor Made Services That Our Client Requires</h1>
<p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat deleniti amet at atque sequi quibusdam cumque itaque repudiandae temporibus, eius nam mollitia voluptas maxime veniam necessitatibus saepe in ab? Repellat!</p>
</div>
<div class="row g-4 justify-content-center text-center">
<div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.1s">
<div class="feature-item text-center p-4">
<div class="feature-icon p-3 mb-4">
<i class="fas fa-dollar-sign fa-4x text-primary"></i>
</div>
<div class="feature-content d-flex flex-column">
<h5 class="mb-3">Cost-Effective</h5>
<p class="mb-3">Dolor, sit amet consectetur adipisicing elit. Soluta inventore cum accusamus,</p>
<a class="btn btn-secondary rounded-pill" href="#">Read More<i class="fas fa-arrow-right ms-2"></i></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.3s">
<div class="feature-item text-center p-4">
<div class="feature-icon p-3 mb-4">
<i class="fab fa-cc-visa fa-4x text-primary"></i>
</div>
<div class="feature-content d-flex flex-column">
<h5 class="mb-3">Visa Assistance</h5>
<p class="mb-3">Dolor, sit amet consectetur adipisicing elit. Soluta inventore cum accusamus,</p>
<a class="btn btn-secondary rounded-pill" href="#">Read More<i class="fas fa-arrow-right ms-2"></i></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.5s">
<div class="feature-item text-center p-4">
<div class="feature-icon p-3 mb-4">
<i class="fas fa-atlas fa-4x text-primary"></i>
</div>
<div class="feature-content d-flex flex-column">
<h5 class="mb-3">Faster Processing</h5>
<p class="mb-3">Dolor, sit amet consectetur adipisicing elit. Soluta inventore cum accusamus,</p>
<a class="btn btn-secondary rounded-pill" href="#">Read More<i class="fas fa-arrow-right ms-2"></i></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.7s">
<div class="feature-item text-center p-4">
<div class="feature-icon p-3 mb-4">
<i class="fas fa-users fa-4x text-primary"></i>
</div>
<div class="feature-content d-flex flex-column">
<h5 class="mb-3">Direct Interviews</h5>
<p class="mb-3">Dolor, sit amet consectetur adipisicing elit. Soluta inventore cum accusamus,</p>
<a class="btn btn-secondary rounded-pill" href="#">Read More<i class="fas fa-arrow-right ms-2"></i></a>
</div>
</div>
</div>
<div class="col-12">
<a class="btn btn-primary border-secondary rounded-pill py-3 px-5 wow fadeInUp" data-wow-delay="0.1s" href="#">More Features</a>
</div>
</div>
</div>
</div>
<!-- Features End -->
<!-- Countries We Offer Start -->
<div class="container-fluid country overflow-hidden py-5">
<div class="container">
<div class="section-title text-center wow fadeInUp" data-wow-delay="0.1s" style="margin-bottom: 70px;">
<div class="sub-style">
<h5 class="sub-title text-primary px-3">COUNTRIES WE OFFER</h5>
</div>
<h1 class="display-5 mb-4">Immigration & visa services following Countries</h1>
<p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat deleniti amet at atque sequi quibusdam cumque itaque repudiandae temporibus, eius nam mollitia voluptas maxime veniam necessitatibus saepe in ab? Repellat!</p>
</div>
<div class="row g-4 text-center">
<div class="col-lg-6 col-xl-3 mb-5 mb-xl-0 wow fadeInUp" data-wow-delay="0.1s">
<div class="country-item">
<div class="rounded overflow-hidden">
<img src="img/country-1.jpg" class="img-fluid w-100 rounded" alt="Image">
</div>
<div class="country-flag">
<img src="img/brazil.jpg" class="img-fluid rounded-circle" alt="Image">
</div>
<div class="country-name">
<a href="#" class="text-white fs-4">Brazil</a>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-3 mb-5 mb-xl-0 wow fadeInUp" data-wow-delay="0.3s">
<div class="country-item">
<div class="rounded overflow-hidden">
<img src="img/country-2.jpg" class="img-fluid w-100 rounded" alt="Image">
</div>
<div class="country-flag">
<img src="img/india.jpg" class="img-fluid rounded-circle" alt="Image">
</div>
<div class="country-name">
<a href="#" class="text-white fs-4">india</a>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-3 mb-5 mb-xl-0 wow fadeInUp" data-wow-delay="0.5s">
<div class="country-item">
<div class="rounded overflow-hidden">
<img src="img/country-3.jpg" class="img-fluid w-100 rounded" alt="Image">
</div>
<div class="country-flag">
<img src="img/usa.jpg" class="img-fluid rounded-circle" alt="Image">
</div>
<div class="country-name">
<a href="#" class="text-white fs-4">New York</a>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-3 mb-5 mb-xl-0 wow fadeInUp" data-wow-delay="0.7s">
<div class="country-item">
<div class="rounded overflow-hidden">
<img src="img/country-4.jpg" class="img-fluid w-100 rounded" alt="Image">
</div>
<div class="country-flag">
<img src="img/italy.jpg" class="img-fluid rounded-circle" alt="Image">
</div>
<div class="country-name">
<a href="#" class="text-white fs-4">Italy</a>
</div>
</div>
</div>
<div class="col-12">
<a class="btn btn-primary border-secondary rounded-pill py-3 px-5 wow fadeInUp" data-wow-delay="0.1s" href="#">More Countries</a>
</div>
</div>
</div>
</div>
<!-- Countries We Offer End -->
<!-- Testimonial Start -->
<div class="container-fluid testimonial overflow-hidden pb-5">
<div class="container py-5">
<div class="section-title text-center mb-5 wow fadeInUp" data-wow-delay="0.1s">
<div class="sub-style">
<h5 class="sub-title text-primary px-3">OUR CLIENTS RIVIEWS</h5>
</div>
<h1 class="display-5 mb-4">What Our Clients Say</h1>
<p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat deleniti amet at atque sequi quibusdam cumque itaque repudiandae temporibus, eius nam mollitia voluptas maxime veniam necessitatibus saepe in ab? Repellat!</p>
</div>
<div class="owl-carousel testimonial-carousel wow zoomInDown" data-wow-delay="0.2s">
<div class="testimonial-item">
<div class="testimonial-content p-4 mb-5">
<p class="fs-5 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati eiusmod tempor incididunt.
</p>
<div class="d-flex justify-content-end">
<i class="fas fa-star text-secondary"></i>
<i class="fas fa-star text-secondary"></i>
<i class="fas fa-star text-secondary"></i>
<i class="fas fa-star text-secondary"></i>
<i class="fas fa-star text-secondary"></i>
</div>
</div>
<div class="d-flex">
<div class="rounded-circle me-4" style="width: 100px; height: 100px;">
<img class="img-fluid rounded-circle" src="img/testimonial-1.jpg" alt="img">
</div>
<div class="my-auto">
<h5>Person Name</h5>
<p class="mb-0">Profession</p>
</div>
</div>
</div>
<div class="testimonial-item">
<div class="testimonial-content p-4 mb-5">
<p class="fs-5 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati eiusmod tempor incididunt.
</p>
<div class="d-flex justify-content-end">
<i class="fas fa-star text-secondary"></i>
<i class="fas fa-star text-secondary"></i>
<i class="fas fa-star text-secondary"></i>
<i class="fas fa-star text-secondary"></i>
<i class="fas fa-star text-secondary"></i>
</div>
</div>
<div class="d-flex">
<div class="rounded-circle me-4" style="width: 100px; height: 100px;">
<img class="img-fluid rounded-circle" src="img/testimonial-2.jpg" alt="img">
</div>
<div class="my-auto">
<h5>Person Name</h5>
<p class="mb-0">Profession</p>
</div>
</div>
</div>
<div class="testimonial-item">
<div class="testimonial-content p-4 mb-5">
<p class="fs-5 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati eiusmod tempor incididunt.
</p>
<div class="d-flex justify-content-end">
<i class="fas fa-star text-secondary"></i>
<i class="fas fa-star text-secondary"></i>
<i class="fas fa-star text-secondary"></i>
<i class="fas fa-star text-secondary"></i>
<i class="fas fa-star text-secondary"></i>
</div>
</div>
<div class="d-flex">
<div class="rounded-circle me-4" style="width: 100px; height: 100px;">
<img class="img-fluid rounded-circle" src="img/testimonial-3.jpg" alt="img">
</div>
<div class="my-auto">
<h5>Person Name</h5>
<p class="mb-0">Profession</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Testimonial End -->
<!-- Training Start -->
<div class="container-fluid training overflow-hidden bg-light py-5">
<div class="container py-5">
<div class="section-title text-center mb-5 wow fadeInUp" data-wow-delay="0.1s">
<div class="sub-style">
<h5 class="sub-title text-primary px-3">CHECK OUR TRAINING</h5>
</div>
<h1 class="display-5 mb-4">Get the Best Coacing Service Training with Our Travisa</h1>
<p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat deleniti amet at atque sequi quibusdam cumque itaque repudiandae temporibus, eius nam mollitia voluptas maxime veniam necessitatibus saepe in ab? Repellat!</p>
</div>
<div class="row g-4">
<div class="col-lg-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.1s">
<div class="training-item">
<div class="training-inner">
<img src="img/training-1.jpg" class="img-fluid w-100 rounded" alt="Image">
<div class="training-title-name">
<a href="#" class="h4 text-white mb-0">IELTS</a>
<a href="#" class="h4 text-white mb-0">Coaching</a>
</div>
</div>
<div class="training-content bg-secondary rounded-bottom p-4">
<a href="#"><h4 class="text-white">IELTS Coaching</h4></a>
<p class="text-white-50">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, veritatis.</p>
<a class="btn btn-secondary rounded-pill text-white p-0" href="#">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-lg-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.3s">
<div class="training-item">
<div class="training-inner">
<img src="img/training-2.jpg" class="img-fluid w-100 rounded" alt="Image">
<div class="training-title-name">
<a href="#" class="h4 text-white mb-0">TOEFL</a>
<a href="#" class="h4 text-white mb-0">Coaching</a>
</div>
</div>
<div class="training-content bg-secondary rounded-bottom p-4">
<a href="#"><h4 class="text-white">TOEFL Coaching</h4></a>
<p class="text-white-50">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, veritatis.</p>
<a class="btn btn-secondary rounded-pill text-white p-0" href="#">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-lg-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.5s">
<div class="training-item">
<div class="training-inner">
<img src="img/training-3.jpg" class="img-fluid w-100 rounded" alt="Image">
<div class="training-title-name">
<a href="#" class="h4 text-white mb-0">PTE</a>
<a href="#" class="h4 text-white mb-0">Coaching</a>
</div>
</div>
<div class="training-content bg-secondary rounded-bottom p-4">
<a href="#"><h4 class="text-white">PTE Coaching</h4></a>
<p class="text-white-50">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, veritatis.</p>
<a class="btn btn-secondary rounded-pill text-white p-0" href="#">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-lg-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.7s">
<div class="training-item">
<div class="training-inner">
<img src="img/training-4.jpg" class="img-fluid w-100 rounded" alt="Image">
<div class="training-title-name">
<a href="#" class="h4 text-white mb-0">OET</a>
<a href="#" class="h4 text-white mb-0">Coaching</a>
</div>
</div>
<div class="training-content bg-secondary rounded-bottom p-4">
<a href="#"><h4 class="text-white">OET Coaching</h4></a>
<p class="text-white-50">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, veritatis.</p>
<a class="btn btn-secondary rounded-pill text-white p-0" href="#">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-12 text-center">
<a class="btn btn-primary border-secondary rounded-pill py-3 px-5 wow fadeInUp" data-wow-delay="0.1s" href="#">View More</a>
</div>
</div>
</div>
</div>
<!-- Training End -->
<!-- Contact Start -->
<div class="container-fluid contact overflow-hidden pb-5">
<div class="container py-5">
<div class="office pt-5">
<div class="section-title text-center mb-5 wow fadeInUp" data-wow-delay="0.1s">
<div class="sub-style">
<h5 class="sub-title text-primary px-3">Worlwide Offices</h5>
</div>
<h1 class="display-5 mb-4">Explore Our Office Worldwide</h1>
<p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat deleniti amet at atque sequi quibusdam cumque itaque repudiandae temporibus, eius nam mollitia voluptas maxime veniam necessitatibus saepe in ab? Repellat!</p>
</div>
<div class="row g-4 justify-content-center">
<div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.1s">
<div class="office-item p-4">
<div class="office-img mb-4">
<img src="img/office-2.jpg" class="img-fluid w-100 rounded" alt="">
</div>
<div class="office-content d-flex flex-column">
<h4 class="mb-2">Australia</h4>
<a href="#" class="text-secondary fs-5 mb-2">+123.456.7890</a>
<a href="#" class="text-muted fs-5 mb-2">travisa@example.com</a>
<p class="mb-0">123, First Floor, 123 St Roots Terrace, Los Angeles 90010 Unitd States of America.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.3s">
<div class="office-item p-4">
<div class="office-img mb-4">
<img src="img/office-1.jpg" class="img-fluid w-100 rounded" alt="">
</div>
<div class="office-content d-flex flex-column">
<h4 class="mb-2">Canada</h4>
<a href="#" class="text-secondary fs-5 mb-2">(012) 0345 6789</a>
<a href="#" class="text-muted fs-5 mb-2">travisa@example.com</a>
<p class="mb-0">123, First Floor, 123 St Roots Terrace, Los Angeles 90010 Unitd States of America.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.5s">
<div class="office-item p-4">
<div class="office-img mb-4">
<img src="img/office-3.jpg" class="img-fluid w-100 rounded" alt="">
</div>
<div class="office-content d-flex flex-column">
<h4 class="mb-2">United Kingdom</h4>
<a href="#" class="text-secondary fs-5 mb-2">01234.567.890</a>
<a href="#" class="text-muted fs-5 mb-2">travisa@example.com</a>
<p class="mb-0">123, First Floor, 123 St Roots Terrace, Los Angeles 90010 Unitd States of America.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.7s">
<div class="office-item p-4">
<div class="office-img mb-4">
<img src="img/office-4.jpg" class="img-fluid w-100 rounded" alt="">
</div>
<div class="office-content d-flex flex-column">
<h4 class="mb-2">India</h4>
<a href="#" class="text-secondary fs-5 mb-2">+123.45.67890</a>
<a href="#" class="text-muted fs-5 mb-2">travisa@example.com</a>
<p class="mb-0">123, First Floor, 123 St Roots Terrace, Los Angeles 90010 Unitd States of America.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact End -->
<!-- Footer Start -->
<div class="container-fluid footer py-5 wow fadeIn" data-wow-delay="0.2s">
<div class="container py-5">
<div class="row g-5">
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="footer-item d-flex flex-column">
<h4 class="text-secondary mb-4">Contact Info</h4>
<a href=""><i class="fa fa-map-marker-alt me-2"></i> 123 Street, New York, USA</a>
<a href=""><i class="fas fa-envelope me-2"></i> info@example.com</a>
<a href=""><i class="fas fa-phone me-2"></i> +012 345 67890</a>
<a href="" class="mb-3"><i class="fas fa-print me-2"></i> +012 345 67890</a>
<div class="d-flex align-items-center">
<i class="fas fa-share fa-2x text-secondary me-2"></i>
<a class="btn mx-1" href=""><i class="fab fa-facebook-f"></i></a>
<a class="btn mx-1" href=""><i class="fab fa-twitter"></i></a>
<a class="btn mx-1" href=""><i class="fab fa-instagram"></i></a>
<a class="btn mx-1" href=""><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="footer-item d-flex flex-column">
<h4 class="text-secondary mb-4">Opening Time</h4>
<div class="mb-3">
<h6 class="text-muted mb-0">Mon - Friday:</h6>
<p class="text-white mb-0">09.00 am to 07.00 pm</p>
</div>
<div class="mb-3">
<h6 class="text-muted mb-0">Satday:</h6>
<p class="text-white mb-0">10.00 am to 05.00 pm</p>
</div>
<div class="mb-3">
<h6 class="text-muted mb-0">Vacation:</h6>
<p class="text-white mb-0">All Sunday is our vacation</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="footer-item d-flex flex-column">
<h4 class="text-secondary mb-4">Our Services</h4>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Business</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Evaluation</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Migrate</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Study</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Counselling</a>
<a href="#" class=""><i class="fas fa-angle-right me-2"></i> Work / Career</a>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-3">
<div class="footer-item">
<h4 class="text-secondary mb-4">Newsletter</h4>
<p class="text-white mb-3">Dolor amet sit justo amet elitr clita ipsum elitr est.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="position-relative mx-auto rounded-pill">
<input class="form-control border-0 rounded-pill w-100 py-3 ps-4 pe-5" type="text" placeholder="Enter your email">
<button type="button" class="btn btn-primary rounded-pill position-absolute top-0 end-0 py-2 mt-2 me-2">SignUp</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer End -->
<!-- Copyright Start -->
<div class="container-fluid copyright py-4">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-md-6 text-center text-md-start mb-md-0">
<span class="text-white"><a href="#" class="border-bottom text-white"><i class="fas fa-copyright text-light me-2"></i>Your Site Name</a>, All right reserved.</span>
</div>
<div class="col-md-6 text-center text-md-end text-white">
<!--/*** This template is free as long as you keep the below author’s credit link/attribution link/backlink. ***/-->
<!--/*** If you'd like to use the template without the below author’s credit link/attribution link/backlink, ***/-->
<!--/*** you can purchase the Credit Removal License from "https://htmlcodex.com/credit-removal". ***/-->
Designed By <a class="border-bottom text-white" href="https://htmlcodex.com">HTML Codex</a>
</div>
</div>
</div>
</div>
<!-- Copyright End -->
<!-- Back to Top -->
<a href="#" class="btn btn-primary btn-lg-square back-to-top"><i class="fa fa-arrow-up"></i></a>
<!-- JavaScript Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="lib/wow/wow.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/waypoints/waypoints.min.js"></script>
<script src="lib/counterup/counterup.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<!-- Template Javascript -->
<script src="js/main.js"></script>
</body>
</html>

105
demo/pages/js/main.js Normal file
View File

@ -0,0 +1,105 @@
(function ($) {
"use strict";
// Spinner
var spinner = function () {
setTimeout(function () {
if ($('#spinner').length > 0) {
$('#spinner').removeClass('show');
}
}, 1);
};
spinner(0);
// Initiate the wowjs
new WOW().init();
// Sticky Navbar
$(window).scroll(function () {
if ($(this).scrollTop() > 45) {
$('.nav-bar').addClass('sticky-top shadow-sm');
} else {
$('.nav-bar').removeClass('sticky-top shadow-sm');
}
});
// Facts counter
$('[data-toggle="counter-up"]').counterUp({
delay: 5,
time: 2000
});
// Modal Video
$(document).ready(function () {
var $videoSrc;
$('.btn-play').click(function () {
$videoSrc = $(this).data("src");
});
console.log($videoSrc);
$('#videoModal').on('shown.bs.modal', function (e) {
$("#video").attr('src', $videoSrc + "?autoplay=1&amp;modestbranding=1&amp;showinfo=0");
})
$('#videoModal').on('hide.bs.modal', function (e) {
$("#video").attr('src', $videoSrc);
})
});
// Testimonial-carousel
$(".testimonial-carousel").owlCarousel({
autoplay: true,
smartSpeed: 2000,
center: false,
dots: false,
loop: true,
margin: 25,
nav : true,
navText : [
'<i class="bi bi-arrow-left"></i>',
'<i class="bi bi-arrow-right"></i>'
],
responsiveClass: true,
responsive: {
0:{
items:1
},
576:{
items:1
},
768:{
items:2
},
992:{
items:2
},
1200:{
items:2
}
}
});
// Back to top button
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$('.back-to-top').fadeIn('slow');
} else {
$('.back-to-top').fadeOut('slow');
}
});
$('.back-to-top').click(function () {
$('html, body').animate({scrollTop: 0}, 1500, 'easeInOutExpo');
return false;
});
})(jQuery);

1579
demo/pages/lib/animate/animate.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

11
demo/pages/lib/animate/animate.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

11
demo/pages/lib/counterup/counterup.min.js vendored Normal file
View File

@ -0,0 +1,11 @@
/*!
* jquery.counterup.js 2.1.0
*
* Copyright 2013, Benjamin Intal http://gambit.ph @bfintal
* Released under the GPL v2 License
*
* Amended by Jeremy Paris, Ciro Mattia Gonano and others
*
* Date: Feb 24, 2017
*/
(function($){"use strict";$.fn.counterUp=function(options){var settings=$.extend({time:400,delay:10,offset:100,beginAt:0,formatter:false,context:"window",callback:function(){}},options),s;return this.each(function(){var $this=$(this),counter={time:$(this).data("counterup-time")||settings.time,delay:$(this).data("counterup-delay")||settings.delay,offset:$(this).data("counterup-offset")||settings.offset,beginAt:$(this).data("counterup-beginat")||settings.beginAt,context:$(this).data("counterup-context")||settings.context};var counterUpper=function(){var nums=[];var divisions=counter.time/counter.delay;var num=$(this).attr("data-num")?$(this).attr("data-num"):$this.text();var isComma=/[0-9]+,[0-9]+/.test(num);num=num.replace(/,/g,"");var decimalPlaces=(num.split(".")[1]||[]).length;if(counter.beginAt>num)counter.beginAt=num;var isTime=/[0-9]+:[0-9]+:[0-9]+/.test(num);if(isTime){var times=num.split(":"),m=1;s=0;while(times.length>0){s+=m*parseInt(times.pop(),10);m*=60}}for(var i=divisions;i>=counter.beginAt/num*divisions;i--){var newNum=parseFloat(num/divisions*i).toFixed(decimalPlaces);if(isTime){newNum=parseInt(s/divisions*i);var hours=parseInt(newNum/3600)%24;var minutes=parseInt(newNum/60)%60;var seconds=parseInt(newNum%60,10);newNum=(hours<10?"0"+hours:hours)+":"+(minutes<10?"0"+minutes:minutes)+":"+(seconds<10?"0"+seconds:seconds)}if(isComma){while(/(\d+)(\d{3})/.test(newNum.toString())){newNum=newNum.toString().replace(/(\d+)(\d{3})/,"$1"+","+"$2")}}if(settings.formatter){newNum=settings.formatter.call(this,newNum)}nums.unshift(newNum)}$this.data("counterup-nums",nums);$this.text(counter.beginAt);var f=function(){if(!$this.data("counterup-nums")){settings.callback.call(this);return}$this.html($this.data("counterup-nums").shift());if($this.data("counterup-nums").length){setTimeout($this.data("counterup-func"),counter.delay)}else{$this.data("counterup-nums",null);$this.data("counterup-func",null);settings.callback.call(this)}};$this.data("counterup-func",f);setTimeout($this.data("counterup-func"),counter.delay)};$this.waypoint(function(direction){counterUpper();this.destroy()},{offset:counter.offset+"%",context:counter.context})})}})(jQuery);

168
demo/pages/lib/easing/easing.js Normal file
View File

@ -0,0 +1,168 @@
/*
* jQuery Easing v1.4.1 - http://gsgd.co.uk/sandbox/jquery/easing/
* Open source under the BSD License.
* Copyright © 2008 George McGinley Smith
* All rights reserved.
* https://raw.github.com/gdsmith/jquery-easing/master/LICENSE
*/
(function (factory) {
if (typeof define === "function" && define.amd) {
define(['jquery'], function ($) {
return factory($);
});
} else if (typeof module === "object" && typeof module.exports === "object") {
exports = factory(require('jquery'));
} else {
factory(jQuery);
}
})(function($){
// Preserve the original jQuery "swing" easing as "jswing"
if (typeof $.easing !== 'undefined') {
$.easing['jswing'] = $.easing['swing'];
}
var pow = Math.pow,
sqrt = Math.sqrt,
sin = Math.sin,
cos = Math.cos,
PI = Math.PI,
c1 = 1.70158,
c2 = c1 * 1.525,
c3 = c1 + 1,
c4 = ( 2 * PI ) / 3,
c5 = ( 2 * PI ) / 4.5;
// x is the fraction of animation progress, in the range 0..1
function bounceOut(x) {
var n1 = 7.5625,
d1 = 2.75;
if ( x < 1/d1 ) {
return n1*x*x;
} else if ( x < 2/d1 ) {
return n1*(x-=(1.5/d1))*x + .75;
} else if ( x < 2.5/d1 ) {
return n1*(x-=(2.25/d1))*x + .9375;
} else {
return n1*(x-=(2.625/d1))*x + .984375;
}
}
$.extend( $.easing,
{
def: 'easeOutQuad',
swing: function (x) {
return $.easing[$.easing.def](x);
},
easeInQuad: function (x) {
return x * x;
},
easeOutQuad: function (x) {
return 1 - ( 1 - x ) * ( 1 - x );
},
easeInOutQuad: function (x) {
return x < 0.5 ?
2 * x * x :
1 - pow( -2 * x + 2, 2 ) / 2;
},
easeInCubic: function (x) {
return x * x * x;
},
easeOutCubic: function (x) {
return 1 - pow( 1 - x, 3 );
},
easeInOutCubic: function (x) {
return x < 0.5 ?
4 * x * x * x :
1 - pow( -2 * x + 2, 3 ) / 2;
},
easeInQuart: function (x) {
return x * x * x * x;
},
easeOutQuart: function (x) {
return 1 - pow( 1 - x, 4 );
},
easeInOutQuart: function (x) {
return x < 0.5 ?
8 * x * x * x * x :
1 - pow( -2 * x + 2, 4 ) / 2;
},
easeInQuint: function (x) {
return x * x * x * x * x;
},
easeOutQuint: function (x) {
return 1 - pow( 1 - x, 5 );
},
easeInOutQuint: function (x) {
return x < 0.5 ?
16 * x * x * x * x * x :
1 - pow( -2 * x + 2, 5 ) / 2;
},
easeInSine: function (x) {
return 1 - cos( x * PI/2 );
},
easeOutSine: function (x) {
return sin( x * PI/2 );
},
easeInOutSine: function (x) {
return -( cos( PI * x ) - 1 ) / 2;
},
easeInExpo: function (x) {
return x === 0 ? 0 : pow( 2, 10 * x - 10 );
},
easeOutExpo: function (x) {
return x === 1 ? 1 : 1 - pow( 2, -10 * x );
},
easeInOutExpo: function (x) {
return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ?
pow( 2, 20 * x - 10 ) / 2 :
( 2 - pow( 2, -20 * x + 10 ) ) / 2;
},
easeInCirc: function (x) {
return 1 - sqrt( 1 - pow( x, 2 ) );
},
easeOutCirc: function (x) {
return sqrt( 1 - pow( x - 1, 2 ) );
},
easeInOutCirc: function (x) {
return x < 0.5 ?
( 1 - sqrt( 1 - pow( 2 * x, 2 ) ) ) / 2 :
( sqrt( 1 - pow( -2 * x + 2, 2 ) ) + 1 ) / 2;
},
easeInElastic: function (x) {
return x === 0 ? 0 : x === 1 ? 1 :
-pow( 2, 10 * x - 10 ) * sin( ( x * 10 - 10.75 ) * c4 );
},
easeOutElastic: function (x) {
return x === 0 ? 0 : x === 1 ? 1 :
pow( 2, -10 * x ) * sin( ( x * 10 - 0.75 ) * c4 ) + 1;
},
easeInOutElastic: function (x) {
return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ?
-( pow( 2, 20 * x - 10 ) * sin( ( 20 * x - 11.125 ) * c5 )) / 2 :
pow( 2, -20 * x + 10 ) * sin( ( 20 * x - 11.125 ) * c5 ) / 2 + 1;
},
easeInBack: function (x) {
return c3 * x * x * x - c1 * x * x;
},
easeOutBack: function (x) {
return 1 + c3 * pow( x - 1, 3 ) + c1 * pow( x - 1, 2 );
},
easeInOutBack: function (x) {
return x < 0.5 ?
( pow( 2 * x, 2 ) * ( ( c2 + 1 ) * 2 * x - c2 ) ) / 2 :
( pow( 2 * x - 2, 2 ) *( ( c2 + 1 ) * ( x * 2 - 2 ) + c2 ) + 2 ) / 2;
},
easeInBounce: function (x) {
return 1 - bounceOut( 1 - x );
},
easeOutBounce: bounceOut,
easeInOutBounce: function (x) {
return x < 0.5 ?
( 1 - bounceOut( 1 - 2 * x ) ) / 2 :
( 1 + bounceOut( 2 * x - 1 ) ) / 2;
}
});
});

1
demo/pages/lib/easing/easing.min.js vendored Normal file
View File

@ -0,0 +1 @@
!function(n){"function"==typeof define&&define.amd?define(["jquery"],function(e){return n(e)}):"object"==typeof module&&"object"==typeof module.exports?exports=n(require("jquery")):n(jQuery)}(function(n){function e(n){var e=7.5625,t=2.75;return n<1/t?e*n*n:n<2/t?e*(n-=1.5/t)*n+.75:n<2.5/t?e*(n-=2.25/t)*n+.9375:e*(n-=2.625/t)*n+.984375}void 0!==n.easing&&(n.easing.jswing=n.easing.swing);var t=Math.pow,u=Math.sqrt,r=Math.sin,i=Math.cos,a=Math.PI,c=1.70158,o=1.525*c,s=2*a/3,f=2*a/4.5;n.extend(n.easing,{def:"easeOutQuad",swing:function(e){return n.easing[n.easing.def](e)},easeInQuad:function(n){return n*n},easeOutQuad:function(n){return 1-(1-n)*(1-n)},easeInOutQuad:function(n){return n<.5?2*n*n:1-t(-2*n+2,2)/2},easeInCubic:function(n){return n*n*n},easeOutCubic:function(n){return 1-t(1-n,3)},easeInOutCubic:function(n){return n<.5?4*n*n*n:1-t(-2*n+2,3)/2},easeInQuart:function(n){return n*n*n*n},easeOutQuart:function(n){return 1-t(1-n,4)},easeInOutQuart:function(n){return n<.5?8*n*n*n*n:1-t(-2*n+2,4)/2},easeInQuint:function(n){return n*n*n*n*n},easeOutQuint:function(n){return 1-t(1-n,5)},easeInOutQuint:function(n){return n<.5?16*n*n*n*n*n:1-t(-2*n+2,5)/2},easeInSine:function(n){return 1-i(n*a/2)},easeOutSine:function(n){return r(n*a/2)},easeInOutSine:function(n){return-(i(a*n)-1)/2},easeInExpo:function(n){return 0===n?0:t(2,10*n-10)},easeOutExpo:function(n){return 1===n?1:1-t(2,-10*n)},easeInOutExpo:function(n){return 0===n?0:1===n?1:n<.5?t(2,20*n-10)/2:(2-t(2,-20*n+10))/2},easeInCirc:function(n){return 1-u(1-t(n,2))},easeOutCirc:function(n){return u(1-t(n-1,2))},easeInOutCirc:function(n){return n<.5?(1-u(1-t(2*n,2)))/2:(u(1-t(-2*n+2,2))+1)/2},easeInElastic:function(n){return 0===n?0:1===n?1:-t(2,10*n-10)*r((10*n-10.75)*s)},easeOutElastic:function(n){return 0===n?0:1===n?1:t(2,-10*n)*r((10*n-.75)*s)+1},easeInOutElastic:function(n){return 0===n?0:1===n?1:n<.5?-(t(2,20*n-10)*r((20*n-11.125)*f))/2:t(2,-20*n+10)*r((20*n-11.125)*f)/2+1},easeInBack:function(n){return(c+1)*n*n*n-c*n*n},easeOutBack:function(n){return 1+(c+1)*t(n-1,3)+c*t(n-1,2)},easeInOutBack:function(n){return n<.5?t(2*n,2)*(7.189819*n-o)/2:(t(2*n-2,2)*((o+1)*(2*n-2)+o)+2)/2},easeInBounce:function(n){return 1-e(1-n)},easeOutBounce:e,easeInOutBounce:function(n){return n<.5?(1-e(1-2*n))/2:(1+e(2*n-1))/2}})});

23
demo/pages/lib/owlcarousel/LICENSE Normal file
View File

@ -0,0 +1,23 @@
Copyright (c) 2014 Owl
Modified work Copyright 2016 David Deutsch
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.

BIN
demo/pages/lib/owlcarousel/assets/ajax-loader.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

170
demo/pages/lib/owlcarousel/assets/owl.carousel.css Normal file
View File

@ -0,0 +1,170 @@
/**
* Owl Carousel v2.2.1
* Copyright 2013-2017 David Deutsch
* Licensed under ()
*/
/*
* Owl Carousel - Core
*/
.owl-carousel {
display: none;
width: 100%;
-webkit-tap-highlight-color: transparent;
/* position relative and z-index fix webkit rendering fonts issue */
position: relative;
z-index: 1; }
.owl-carousel .owl-stage {
position: relative;
-ms-touch-action: pan-Y;
-moz-backface-visibility: hidden;
/* fix firefox animation glitch */ }
.owl-carousel .owl-stage:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0; }
.owl-carousel .owl-stage-outer {
position: relative;
overflow: hidden;
/* fix for flashing background */
-webkit-transform: translate3d(0px, 0px, 0px); }
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0); }
.owl-carousel .owl-item {
position: relative;
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; }
.owl-carousel .owl-item img {
display: block;
width: 100%; }
.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled {
display: none; }
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
cursor: pointer;
cursor: hand;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.owl-carousel.owl-loaded {
display: block; }
.owl-carousel.owl-loading {
opacity: 0;
display: block; }
.owl-carousel.owl-hidden {
opacity: 0; }
.owl-carousel.owl-refresh .owl-item {
visibility: hidden; }
.owl-carousel.owl-drag .owl-item {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.owl-carousel.owl-grab {
cursor: move;
cursor: grab; }
.owl-carousel.owl-rtl {
direction: rtl; }
.owl-carousel.owl-rtl .owl-item {
float: right; }
/* No Js */
.no-js .owl-carousel {
display: block; }
/*
* Owl Carousel - Animate Plugin
*/
.owl-carousel .animated {
animation-duration: 1000ms;
animation-fill-mode: both; }
.owl-carousel .owl-animated-in {
z-index: 0; }
.owl-carousel .owl-animated-out {
z-index: 1; }
.owl-carousel .fadeOut {
animation-name: fadeOut; }
@keyframes fadeOut {
0% {
opacity: 1; }
100% {
opacity: 0; } }
/*
* Owl Carousel - Auto Height Plugin
*/
.owl-height {
transition: height 500ms ease-in-out; }
/*
* Owl Carousel - Lazy Load Plugin
*/
.owl-carousel .owl-item .owl-lazy {
opacity: 0;
transition: opacity 400ms ease; }
.owl-carousel .owl-item img.owl-lazy {
transform-style: preserve-3d; }
/*
* Owl Carousel - Video Plugin
*/
.owl-carousel .owl-video-wrapper {
position: relative;
height: 100%;
background: #000; }
.owl-carousel .owl-video-play-icon {
position: absolute;
height: 80px;
width: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
background: url("owl.video.play.png") no-repeat;
cursor: pointer;
z-index: 1;
-webkit-backface-visibility: hidden;
transition: transform 100ms ease; }
.owl-carousel .owl-video-play-icon:hover {
-ms-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3); }
.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
display: none; }
.owl-carousel .owl-video-tn {
opacity: 0;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
transition: opacity 400ms ease; }
.owl-carousel .owl-video-frame {
position: relative;
z-index: 1;
height: 100%;
width: 100%; }

6
demo/pages/lib/owlcarousel/assets/owl.carousel.min.css vendored Normal file
View File

@ -0,0 +1,6 @@
/**
* Owl Carousel v2.2.1
* Copyright 2013-2017 David Deutsch
* Licensed under ()
*/
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}

50
demo/pages/lib/owlcarousel/assets/owl.theme.default.css Normal file
View File

@ -0,0 +1,50 @@
/**
* Owl Carousel v2.2.1
* Copyright 2013-2017 David Deutsch
* Licensed under ()
*/
/*
* Default theme - Owl Carousel CSS File
*/
.owl-theme .owl-nav {
margin-top: 10px;
text-align: center;
-webkit-tap-highlight-color: transparent; }
.owl-theme .owl-nav [class*='owl-'] {
color: #FFF;
font-size: 14px;
margin: 5px;
padding: 4px 7px;
background: #D6D6D6;
display: inline-block;
cursor: pointer;
border-radius: 3px; }
.owl-theme .owl-nav [class*='owl-']:hover {
background: #869791;
color: #FFF;
text-decoration: none; }
.owl-theme .owl-nav .disabled {
opacity: 0.5;
cursor: default; }
.owl-theme .owl-nav.disabled + .owl-dots {
margin-top: 10px; }
.owl-theme .owl-dots {
text-align: center;
-webkit-tap-highlight-color: transparent; }
.owl-theme .owl-dots .owl-dot {
display: inline-block;
zoom: 1;
*display: inline; }
.owl-theme .owl-dots .owl-dot span {
width: 10px;
height: 10px;
margin: 5px 7px;
background: #D6D6D6;
display: block;
-webkit-backface-visibility: visible;
transition: opacity 200ms ease;
border-radius: 30px; }
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
background: #869791; }

6
demo/pages/lib/owlcarousel/assets/owl.theme.default.min.css vendored Normal file
View File

@ -0,0 +1,6 @@
/**
* Owl Carousel v2.2.1
* Copyright 2013-2017 David Deutsch
* Licensed under ()
*/
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}

50
demo/pages/lib/owlcarousel/assets/owl.theme.green.css Normal file
View File

@ -0,0 +1,50 @@
/**
* Owl Carousel v2.2.1
* Copyright 2013-2017 David Deutsch
* Licensed under ()
*/
/*
* Green theme - Owl Carousel CSS File
*/
.owl-theme .owl-nav {
margin-top: 10px;
text-align: center;
-webkit-tap-highlight-color: transparent; }
.owl-theme .owl-nav [class*='owl-'] {
color: #FFF;
font-size: 14px;
margin: 5px;
padding: 4px 7px;
background: #D6D6D6;
display: inline-block;
cursor: pointer;
border-radius: 3px; }
.owl-theme .owl-nav [class*='owl-']:hover {
background: #4DC7A0;
color: #FFF;
text-decoration: none; }
.owl-theme .owl-nav .disabled {
opacity: 0.5;
cursor: default; }
.owl-theme .owl-nav.disabled + .owl-dots {
margin-top: 10px; }
.owl-theme .owl-dots {
text-align: center;
-webkit-tap-highlight-color: transparent; }
.owl-theme .owl-dots .owl-dot {
display: inline-block;
zoom: 1;
*display: inline; }
.owl-theme .owl-dots .owl-dot span {
width: 10px;
height: 10px;
margin: 5px 7px;
background: #D6D6D6;
display: block;
-webkit-backface-visibility: visible;
transition: opacity 200ms ease;
border-radius: 30px; }
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
background: #4DC7A0; }

6
demo/pages/lib/owlcarousel/assets/owl.theme.green.min.css vendored Normal file
View File

@ -0,0 +1,6 @@
/**
* Owl Carousel v2.2.1
* Copyright 2013-2017 David Deutsch
* Licensed under ()
*/
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#4DC7A0;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#4DC7A0}

BIN
demo/pages/lib/owlcarousel/assets/owl.video.play.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

3275
demo/pages/lib/owlcarousel/owl.carousel.js Normal file
View File

File diff suppressed because it is too large Load Diff

7
demo/pages/lib/owlcarousel/owl.carousel.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

5
demo/pages/lib/waypoints/links.php Normal file
View File

@ -0,0 +1,5 @@
<?php
$links = array(
'js' => 'lib/waypoints/waypoints.min.js'
);
?>

7
demo/pages/lib/waypoints/waypoints.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

542
demo/pages/lib/wow/wow.js Normal file
View File

@ -0,0 +1,542 @@
/*
* WOW wow.js - v1.3.0 - 2016-10-04
* https://wowjs.uk
* Copyright (c) 2016 Thomas Grainger; Licensed MIT
*/
(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(['module', 'exports'], factory);
} else if (typeof exports !== "undefined") {
factory(module, exports);
} else {
var mod = {
exports: {}
};
factory(mod, mod.exports);
global.WOW = mod.exports;
}
})(this, function (module, exports) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _class, _temp;
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var _createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
function isIn(needle, haystack) {
return haystack.indexOf(needle) >= 0;
}
function extend(custom, defaults) {
for (var key in defaults) {
if (custom[key] == null) {
var value = defaults[key];
custom[key] = value;
}
}
return custom;
}
function isMobile(agent) {
return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent)
);
}
function createEvent(event) {
var bubble = arguments.length <= 1 || arguments[1] === undefined ? false : arguments[1];
var cancel = arguments.length <= 2 || arguments[2] === undefined ? false : arguments[2];
var detail = arguments.length <= 3 || arguments[3] === undefined ? null : arguments[3];
var customEvent = void 0;
if (document.createEvent != null) {
// W3C DOM
customEvent = document.createEvent('CustomEvent');
customEvent.initCustomEvent(event, bubble, cancel, detail);
} else if (document.createEventObject != null) {
// IE DOM < 9
customEvent = document.createEventObject();
customEvent.eventType = event;
} else {
customEvent.eventName = event;
}
return customEvent;
}
function emitEvent(elem, event) {
if (elem.dispatchEvent != null) {
// W3C DOM
elem.dispatchEvent(event);
} else if (event in (elem != null)) {
elem[event]();
} else if ('on' + event in (elem != null)) {
elem['on' + event]();
}
}
function addEvent(elem, event, fn) {
if (elem.addEventListener != null) {
// W3C DOM
elem.addEventListener(event, fn, false);
} else if (elem.attachEvent != null) {
// IE DOM
elem.attachEvent('on' + event, fn);
} else {
// fallback
elem[event] = fn;
}
}
function removeEvent(elem, event, fn) {
if (elem.removeEventListener != null) {
// W3C DOM
elem.removeEventListener(event, fn, false);
} else if (elem.detachEvent != null) {
// IE DOM
elem.detachEvent('on' + event, fn);
} else {
// fallback
delete elem[event];
}
}
function getInnerHeight() {
if ('innerHeight' in window) {
return window.innerHeight;
}
return document.documentElement.clientHeight;
}
// Minimalistic WeakMap shim, just in case.
var WeakMap = window.WeakMap || window.MozWeakMap || function () {
function WeakMap() {
_classCallCheck(this, WeakMap);
this.keys = [];
this.values = [];
}
_createClass(WeakMap, [{
key: 'get',
value: function get(key) {
for (var i = 0; i < this.keys.length; i++) {
var item = this.keys[i];
if (item === key) {
return this.values[i];
}
}
return undefined;
}
}, {
key: 'set',
value: function set(key, value) {
for (var i = 0; i < this.keys.length; i++) {
var item = this.keys[i];
if (item === key) {
this.values[i] = value;
return this;
}
}
this.keys.push(key);
this.values.push(value);
return this;
}
}]);
return WeakMap;
}();
// Dummy MutationObserver, to avoid raising exceptions.
var MutationObserver = window.MutationObserver || window.WebkitMutationObserver || window.MozMutationObserver || (_temp = _class = function () {
function MutationObserver() {
_classCallCheck(this, MutationObserver);
if (typeof console !== 'undefined' && console !== null) {
console.warn('MutationObserver is not supported by your browser.');
console.warn('WOW.js cannot detect dom mutations, please call .sync() after loading new content.');
}
}
_createClass(MutationObserver, [{
key: 'observe',
value: function observe() {}
}]);
return MutationObserver;
}(), _class.notSupported = true, _temp);
// getComputedStyle shim, from http://stackoverflow.com/a/21797294
var getComputedStyle = window.getComputedStyle || function getComputedStyle(el) {
var getComputedStyleRX = /(\-([a-z]){1})/g;
return {
getPropertyValue: function getPropertyValue(prop) {
if (prop === 'float') {
prop = 'styleFloat';
}
if (getComputedStyleRX.test(prop)) {
prop.replace(getComputedStyleRX, function (_, _char) {
return _char.toUpperCase();
});
}
var currentStyle = el.currentStyle;
return (currentStyle != null ? currentStyle[prop] : void 0) || null;
}
};
};
var WOW = function () {
function WOW() {
var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
_classCallCheck(this, WOW);
this.defaults = {
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true,
callback: null,
scrollContainer: null,
resetAnimation: true
};
this.animate = function animateFactory() {
if ('requestAnimationFrame' in window) {
return function (callback) {
return window.requestAnimationFrame(callback);
};
}
return function (callback) {
return callback();
};
}();
this.vendors = ['moz', 'webkit'];
this.start = this.start.bind(this);
this.resetAnimation = this.resetAnimation.bind(this);
this.scrollHandler = this.scrollHandler.bind(this);
this.scrollCallback = this.scrollCallback.bind(this);
this.scrolled = true;
this.config = extend(options, this.defaults);
if (options.scrollContainer != null) {
this.config.scrollContainer = document.querySelector(options.scrollContainer);
}
// Map of elements to animation names:
this.animationNameCache = new WeakMap();
this.wowEvent = createEvent(this.config.boxClass);
}
_createClass(WOW, [{
key: 'init',
value: function init() {
this.element = window.document.documentElement;
if (isIn(document.readyState, ['interactive', 'complete'])) {
this.start();
} else {
addEvent(document, 'DOMContentLoaded', this.start);
}
this.finished = [];
}
}, {
key: 'start',
value: function start() {
var _this = this;
this.stopped = false;
this.boxes = [].slice.call(this.element.querySelectorAll('.' + this.config.boxClass));
this.all = this.boxes.slice(0);
if (this.boxes.length) {
if (this.disabled()) {
this.resetStyle();
} else {
for (var i = 0; i < this.boxes.length; i++) {
var box = this.boxes[i];
this.applyStyle(box, true);
}
}
}
if (!this.disabled()) {
addEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler);
addEvent(window, 'resize', this.scrollHandler);
this.interval = setInterval(this.scrollCallback, 50);
}
if (this.config.live) {
var mut = new MutationObserver(function (records) {
for (var j = 0; j < records.length; j++) {
var record = records[j];
for (var k = 0; k < record.addedNodes.length; k++) {
var node = record.addedNodes[k];
_this.doSync(node);
}
}
return undefined;
});
mut.observe(document.body, {
childList: true,
subtree: true
});
}
}
}, {
key: 'stop',
value: function stop() {
this.stopped = true;
removeEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler);
removeEvent(window, 'resize', this.scrollHandler);
if (this.interval != null) {
clearInterval(this.interval);
}
}
}, {
key: 'sync',
value: function sync() {
if (MutationObserver.notSupported) {
this.doSync(this.element);
}
}
}, {
key: 'doSync',
value: function doSync(element) {
if (typeof element === 'undefined' || element === null) {
element = this.element;
}
if (element.nodeType !== 1) {
return;
}
element = element.parentNode || element;
var iterable = element.querySelectorAll('.' + this.config.boxClass);
for (var i = 0; i < iterable.length; i++) {
var box = iterable[i];
if (!isIn(box, this.all)) {
this.boxes.push(box);
this.all.push(box);
if (this.stopped || this.disabled()) {
this.resetStyle();
} else {
this.applyStyle(box, true);
}
this.scrolled = true;
}
}
}
}, {
key: 'show',
value: function show(box) {
this.applyStyle(box);
box.className = box.className + ' ' + this.config.animateClass;
if (this.config.callback != null) {
this.config.callback(box);
}
emitEvent(box, this.wowEvent);
if (this.config.resetAnimation) {
addEvent(box, 'animationend', this.resetAnimation);
addEvent(box, 'oanimationend', this.resetAnimation);
addEvent(box, 'webkitAnimationEnd', this.resetAnimation);
addEvent(box, 'MSAnimationEnd', this.resetAnimation);
}
return box;
}
}, {
key: 'applyStyle',
value: function applyStyle(box, hidden) {
var _this2 = this;
var duration = box.getAttribute('data-wow-duration');
var delay = box.getAttribute('data-wow-delay');
var iteration = box.getAttribute('data-wow-iteration');
return this.animate(function () {
return _this2.customStyle(box, hidden, duration, delay, iteration);
});
}
}, {
key: 'resetStyle',
value: function resetStyle() {
for (var i = 0; i < this.boxes.length; i++) {
var box = this.boxes[i];
box.style.visibility = 'visible';
}
return undefined;
}
}, {
key: 'resetAnimation',
value: function resetAnimation(event) {
if (event.type.toLowerCase().indexOf('animationend') >= 0) {
var target = event.target || event.srcElement;
target.className = target.className.replace(this.config.animateClass, '').trim();
}
}
}, {
key: 'customStyle',
value: function customStyle(box, hidden, duration, delay, iteration) {
if (hidden) {
this.cacheAnimationName(box);
}
box.style.visibility = hidden ? 'hidden' : 'visible';
if (duration) {
this.vendorSet(box.style, { animationDuration: duration });
}
if (delay) {
this.vendorSet(box.style, { animationDelay: delay });
}
if (iteration) {
this.vendorSet(box.style, { animationIterationCount: iteration });
}
this.vendorSet(box.style, { animationName: hidden ? 'none' : this.cachedAnimationName(box) });
return box;
}
}, {
key: 'vendorSet',
value: function vendorSet(elem, properties) {
for (var name in properties) {
if (properties.hasOwnProperty(name)) {
var value = properties[name];
elem['' + name] = value;
for (var i = 0; i < this.vendors.length; i++) {
var vendor = this.vendors[i];
elem['' + vendor + name.charAt(0).toUpperCase() + name.substr(1)] = value;
}
}
}
}
}, {
key: 'vendorCSS',
value: function vendorCSS(elem, property) {
var style = getComputedStyle(elem);
var result = style.getPropertyCSSValue(property);
for (var i = 0; i < this.vendors.length; i++) {
var vendor = this.vendors[i];
result = result || style.getPropertyCSSValue('-' + vendor + '-' + property);
}
return result;
}
}, {
key: 'animationName',
value: function animationName(box) {
var aName = void 0;
try {
aName = this.vendorCSS(box, 'animation-name').cssText;
} catch (error) {
// Opera, fall back to plain property value
aName = getComputedStyle(box).getPropertyValue('animation-name');
}
if (aName === 'none') {
return ''; // SVG/Firefox, unable to get animation name?
}
return aName;
}
}, {
key: 'cacheAnimationName',
value: function cacheAnimationName(box) {
// https://bugzilla.mozilla.org/show_bug.cgi?id=921834
// box.dataset is not supported for SVG elements in Firefox
return this.animationNameCache.set(box, this.animationName(box));
}
}, {
key: 'cachedAnimationName',
value: function cachedAnimationName(box) {
return this.animationNameCache.get(box);
}
}, {
key: 'scrollHandler',
value: function scrollHandler() {
this.scrolled = true;
}
}, {
key: 'scrollCallback',
value: function scrollCallback() {
if (this.scrolled) {
this.scrolled = false;
var results = [];
for (var i = 0; i < this.boxes.length; i++) {
var box = this.boxes[i];
if (box) {
if (this.isVisible(box)) {
this.show(box);
continue;
}
results.push(box);
}
}
this.boxes = results;
if (!this.boxes.length && !this.config.live) {
this.stop();
}
}
}
}, {
key: 'offsetTop',
value: function offsetTop(element) {
// SVG elements don't have an offsetTop in Firefox.
// This will use their nearest parent that has an offsetTop.
// Also, using ('offsetTop' of element) causes an exception in Firefox.
while (element.offsetTop === undefined) {
element = element.parentNode;
}
var top = element.offsetTop;
while (element.offsetParent) {
element = element.offsetParent;
top += element.offsetTop;
}
return top;
}
}, {
key: 'isVisible',
value: function isVisible(box) {
var offset = box.getAttribute('data-wow-offset') || this.config.offset;
var viewTop = this.config.scrollContainer && this.config.scrollContainer.scrollTop || window.pageYOffset;
var viewBottom = viewTop + Math.min(this.element.clientHeight, getInnerHeight()) - offset;
var top = this.offsetTop(box);
var bottom = top + box.clientHeight;
return top <= viewBottom && bottom >= viewTop;
}
}, {
key: 'disabled',
value: function disabled() {
return !this.config.mobile && isMobile(navigator.userAgent);
}
}]);
return WOW;
}();
exports.default = WOW;
module.exports = exports['default'];
});

3
demo/pages/lib/wow/wow.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

32
demo/pages/scss/bootstrap.scss vendored Normal file
View File

@ -0,0 +1,32 @@
/******* Customized Bootstrap ********/
$primary: #003A66;
$secondary: #E02454;
$light: #F0F5FB;
$dark: #003A66;
$font-family-base: 'Open Sans', sans-serif;
$headings-font-family: 'Poppins', sans-serif;
$body-color: #7a8a9e;
$headings-color: $dark;
$headings-font-weight: 500;
$display-font-weight: 700;
$enable-responsive-font-sizes: true;
$border-radius: 10px;
$border-radius-sm: $border-radius;
$border-radius-lg: $border-radius;
$link-decoration: none;
$enable-negative-margins: true;
@import "bootstrap/scss/bootstrap";

118
demo/pages/scss/bootstrap/scss/_accordion.scss Normal file
View File

@ -0,0 +1,118 @@
//
// Base styles
//
.accordion-button {
position: relative;
display: flex;
align-items: center;
width: 100%;
padding: $accordion-button-padding-y $accordion-button-padding-x;
@include font-size($font-size-base);
color: $accordion-button-color;
text-align: left; // Reset button style
background-color: $accordion-button-bg;
border: 0;
@include border-radius(0);
overflow-anchor: none;
@include transition($accordion-transition);
&:not(.collapsed) {
color: $accordion-button-active-color;
background-color: $accordion-button-active-bg;
box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color;
&::after {
background-image: escape-svg($accordion-button-active-icon);
transform: $accordion-icon-transform;
}
}
// Accordion icon
&::after {
flex-shrink: 0;
width: $accordion-icon-width;
height: $accordion-icon-width;
margin-left: auto;
content: "";
background-image: escape-svg($accordion-button-icon);
background-repeat: no-repeat;
background-size: $accordion-icon-width;
@include transition($accordion-icon-transition);
}
&:hover {
z-index: 2;
}
&:focus {
z-index: 3;
border-color: $accordion-button-focus-border-color;
outline: 0;
box-shadow: $accordion-button-focus-box-shadow;
}
}
.accordion-header {
margin-bottom: 0;
}
.accordion-item {
background-color: $accordion-bg;
border: $accordion-border-width solid $accordion-border-color;
&:first-of-type {
@include border-top-radius($accordion-border-radius);
.accordion-button {
@include border-top-radius($accordion-inner-border-radius);
}
}
&:not(:first-of-type) {
border-top: 0;
}
// Only set a border-radius on the last item if the accordion is collapsed
&:last-of-type {
@include border-bottom-radius($accordion-border-radius);
.accordion-button {
&.collapsed {
@include border-bottom-radius($accordion-inner-border-radius);
}
}
.accordion-collapse {
@include border-bottom-radius($accordion-border-radius);
}
}
}
.accordion-body {
padding: $accordion-body-padding-y $accordion-body-padding-x;
}
// Flush accordion items
//
// Remove borders and border-radius to keep accordion items edge-to-edge.
.accordion-flush {
.accordion-collapse {
border-width: 0;
}
.accordion-item {
border-right: 0;
border-left: 0;
@include border-radius(0);
&:first-child { border-top: 0; }
&:last-child { border-bottom: 0; }
.accordion-button {
@include border-radius(0);
}
}
}

57
demo/pages/scss/bootstrap/scss/_alert.scss Normal file
View File

@ -0,0 +1,57 @@
//
// Base styles
//
.alert {
position: relative;
padding: $alert-padding-y $alert-padding-x;
margin-bottom: $alert-margin-bottom;
border: $alert-border-width solid transparent;
@include border-radius($alert-border-radius);
}
// Headings for larger alerts
.alert-heading {
// Specified to prevent conflicts of changing $headings-color
color: inherit;
}
// Provide class for links that match alerts
.alert-link {
font-weight: $alert-link-font-weight;
}
// Dismissible alerts
//
// Expand the right padding and account for the close button's positioning.
.alert-dismissible {
padding-right: $alert-dismissible-padding-r;
// Adjust close link position
.btn-close {
position: absolute;
top: 0;
right: 0;
z-index: $stretched-link-z-index + 1;
padding: $alert-padding-y * 1.25 $alert-padding-x;
}
}
// scss-docs-start alert-modifiers
// Generate contextual modifier classes for colorizing the alert.
@each $state, $value in $theme-colors {
$alert-background: shift-color($value, $alert-bg-scale);
$alert-border: shift-color($value, $alert-border-scale);
$alert-color: shift-color($value, $alert-color-scale);
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
$alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
}
.alert-#{$state} {
@include alert-variant($alert-background, $alert-border, $alert-color);
}
}
// scss-docs-end alert-modifiers

29
demo/pages/scss/bootstrap/scss/_badge.scss Normal file
View File

@ -0,0 +1,29 @@
// Base class
//
// Requires one of the contextual, color modifier classes for `color` and
// `background-color`.
.badge {
display: inline-block;
padding: $badge-padding-y $badge-padding-x;
@include font-size($badge-font-size);
font-weight: $badge-font-weight;
line-height: 1;
color: $badge-color;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
@include border-radius($badge-border-radius);
@include gradient-bg();
// Empty badges collapse automatically
&:empty {
display: none;
}
}
// Quick fix for badges in buttons
.btn .badge {
position: relative;
top: -1px;
}

28
demo/pages/scss/bootstrap/scss/_breadcrumb.scss Normal file
View File

@ -0,0 +1,28 @@
.breadcrumb {
display: flex;
flex-wrap: wrap;
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
margin-bottom: $breadcrumb-margin-bottom;
@include font-size($breadcrumb-font-size);
list-style: none;
background-color: $breadcrumb-bg;
@include border-radius($breadcrumb-border-radius);
}
.breadcrumb-item {
// The separator between breadcrumbs (by default, a forward-slash: "/")
+ .breadcrumb-item {
padding-left: $breadcrumb-item-padding-x;
&::before {
float: left; // Suppress inline spacings and underlining of the separator
padding-right: $breadcrumb-item-padding-x;
color: $breadcrumb-divider-color;
content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
}
}
&.active {
color: $breadcrumb-active-color;
}
}

139
demo/pages/scss/bootstrap/scss/_button-group.scss Normal file
View File

@ -0,0 +1,139 @@
// Make the div behave like a button
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-flex;
vertical-align: middle; // match .btn alignment given font-size hack above
> .btn {
position: relative;
flex: 1 1 auto;
}
// Bring the hover, focused, and "active" buttons to the front to overlay
// the borders properly
> .btn-check:checked + .btn,
> .btn-check:focus + .btn,
> .btn:hover,
> .btn:focus,
> .btn:active,
> .btn.active {
z-index: 1;
}
}
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.input-group {
width: auto;
}
}
.btn-group {
// Prevent double borders when buttons are next to each other
> .btn:not(:first-child),
> .btn-group:not(:first-child) {
margin-left: -$btn-border-width;
}
// Reset rounded corners
> .btn:not(:last-child):not(.dropdown-toggle),
> .btn-group:not(:last-child) > .btn {
@include border-end-radius(0);
}
// The left radius should be 0 if the button is:
// - the "third or more" child
// - the second child and the previous element isn't `.btn-check` (making it the first child visually)
// - part of a btn-group which isn't the first child
> .btn:nth-child(n + 3),
> :not(.btn-check) + .btn,
> .btn-group:not(:first-child) > .btn {
@include border-start-radius(0);
}
}
// Sizing
//
// Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-sm > .btn { @extend .btn-sm; }
.btn-group-lg > .btn { @extend .btn-lg; }
//
// Split button dropdowns
//
.dropdown-toggle-split {
padding-right: $btn-padding-x * .75;
padding-left: $btn-padding-x * .75;
&::after,
.dropup &::after,
.dropend &::after {
margin-left: 0;
}
.dropstart &::before {
margin-right: 0;
}
}
.btn-sm + .dropdown-toggle-split {
padding-right: $btn-padding-x-sm * .75;
padding-left: $btn-padding-x-sm * .75;
}
.btn-lg + .dropdown-toggle-split {
padding-right: $btn-padding-x-lg * .75;
padding-left: $btn-padding-x-lg * .75;
}
// The clickable button for toggling the menu
// Set the same inset shadow as the :active state
.btn-group.show .dropdown-toggle {
@include box-shadow($btn-active-box-shadow);
// Show no shadow for `.btn-link` since it has no other button styles.
&.btn-link {
@include box-shadow(none);
}
}
//
// Vertical button groups
//
.btn-group-vertical {
flex-direction: column;
align-items: flex-start;
justify-content: center;
> .btn,
> .btn-group {
width: 100%;
}
> .btn:not(:first-child),
> .btn-group:not(:first-child) {
margin-top: -$btn-border-width;
}
// Reset rounded corners
> .btn:not(:last-child):not(.dropdown-toggle),
> .btn-group:not(:last-child) > .btn {
@include border-bottom-radius(0);
}
> .btn ~ .btn,
> .btn-group:not(:first-child) > .btn {
@include border-top-radius(0);
}
}

111
demo/pages/scss/bootstrap/scss/_buttons.scss Normal file
View File

@ -0,0 +1,111 @@
//
// Base styles
//
.btn {
display: inline-block;
font-family: $btn-font-family;
font-weight: $btn-font-weight;
line-height: $btn-line-height;
color: $body-color;
text-align: center;
text-decoration: if($link-decoration == none, null, none);
white-space: $btn-white-space;
vertical-align: middle;
cursor: if($enable-button-pointers, pointer, null);
user-select: none;
background-color: transparent;
border: $btn-border-width solid transparent;
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
@include transition($btn-transition);
&:hover {
color: $body-color;
text-decoration: if($link-hover-decoration == underline, none, null);
}
.btn-check:focus + &,
&:focus {
outline: 0;
box-shadow: $btn-focus-box-shadow;
}
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active {
@include box-shadow($btn-active-box-shadow);
&:focus {
@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
}
}
&:disabled,
&.disabled,
fieldset:disabled & {
pointer-events: none;
opacity: $btn-disabled-opacity;
@include box-shadow(none);
}
}
//
// Alternate buttons
//
// scss-docs-start btn-variant-loops
@each $color, $value in $theme-colors {
.btn-#{$color} {
@include button-variant($value, $value);
}
}
@each $color, $value in $theme-colors {
.btn-outline-#{$color} {
@include button-outline-variant($value);
}
}
// scss-docs-end btn-variant-loops
//
// Link buttons
//
// Make a button look and behave like a link
.btn-link {
font-weight: $font-weight-normal;
color: $btn-link-color;
text-decoration: $link-decoration;
&:hover {
color: $btn-link-hover-color;
text-decoration: $link-hover-decoration;
}
&:focus {
text-decoration: $link-hover-decoration;
}
&:disabled,
&.disabled {
color: $btn-link-disabled-color;
}
// No need for an active state here
}
//
// Button Sizes
//
.btn-lg {
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
}
.btn-sm {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
}

215
demo/pages/scss/bootstrap/scss/_card.scss Normal file
View File

@ -0,0 +1,215 @@
//
// Base styles
//
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
height: $card-height;
word-wrap: break-word;
background-color: $card-bg;
background-clip: border-box;
border: $card-border-width solid $card-border-color;
@include border-radius($card-border-radius);
> hr {
margin-right: 0;
margin-left: 0;
}
> .list-group {
border-top: inherit;
border-bottom: inherit;
&:first-child {
border-top-width: 0;
@include border-top-radius($card-inner-border-radius);
}
&:last-child {
border-bottom-width: 0;
@include border-bottom-radius($card-inner-border-radius);
}
}
// Due to specificity of the above selector (`.card > .list-group`), we must
// use a child selector here to prevent double borders.
> .card-header + .list-group,
> .list-group + .card-footer {
border-top: 0;
}
}
.card-body {
// Enable `flex-grow: 1` for decks and groups so that card blocks take up
// as much space as possible, ensuring footers are aligned to the bottom.
flex: 1 1 auto;
padding: $card-spacer-y $card-spacer-x;
color: $card-color;
}
.card-title {
margin-bottom: $card-title-spacer-y;
}
.card-subtitle {
margin-top: -$card-title-spacer-y / 2;
margin-bottom: 0;
}
.card-text:last-child {
margin-bottom: 0;
}
.card-link {
&:hover {
text-decoration: none;
}
+ .card-link {
margin-left: $card-spacer-x;
}
}
//
// Optional textual caps
//
.card-header {
padding: $card-cap-padding-y $card-cap-padding-x;
margin-bottom: 0; // Removes the default margin-bottom of <hN>
color: $card-cap-color;
background-color: $card-cap-bg;
border-bottom: $card-border-width solid $card-border-color;
&:first-child {
@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
}
}
.card-footer {
padding: $card-cap-padding-y $card-cap-padding-x;
color: $card-cap-color;
background-color: $card-cap-bg;
border-top: $card-border-width solid $card-border-color;
&:last-child {
@include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
}
}
//
// Header navs
//
.card-header-tabs {
margin-right: -$card-cap-padding-x / 2;
margin-bottom: -$card-cap-padding-y;
margin-left: -$card-cap-padding-x / 2;
border-bottom: 0;
@if $nav-tabs-link-active-bg != $card-bg {
.nav-link.active {
background-color: $card-bg;
border-bottom-color: $card-bg;
}
}
}
.card-header-pills {
margin-right: -$card-cap-padding-x / 2;
margin-left: -$card-cap-padding-x / 2;
}
// Card image
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: $card-img-overlay-padding;
@include border-radius($card-inner-border-radius);
}
.card-img,
.card-img-top,
.card-img-bottom {
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
}
.card-img,
.card-img-top {
@include border-top-radius($card-inner-border-radius);
}
.card-img,
.card-img-bottom {
@include border-bottom-radius($card-inner-border-radius);
}
//
// Card groups
//
.card-group {
// The child selector allows nested `.card` within `.card-group`
// to display properly.
> .card {
margin-bottom: $card-group-margin;
}
@include media-breakpoint-up(sm) {
display: flex;
flex-flow: row wrap;
// The child selector allows nested `.card` within `.card-group`
// to display properly.
> .card {
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
flex: 1 0 0%;
margin-bottom: 0;
+ .card {
margin-left: 0;
border-left: 0;
}
// Handle rounded corners
@if $enable-rounded {
&:not(:last-child) {
@include border-end-radius(0);
.card-img-top,
.card-header {
// stylelint-disable-next-line property-disallowed-list
border-top-right-radius: 0;
}
.card-img-bottom,
.card-footer {
// stylelint-disable-next-line property-disallowed-list
border-bottom-right-radius: 0;
}
}
&:not(:first-child) {
@include border-start-radius(0);
.card-img-top,
.card-header {
// stylelint-disable-next-line property-disallowed-list
border-top-left-radius: 0;
}
.card-img-bottom,
.card-footer {
// stylelint-disable-next-line property-disallowed-list
border-bottom-left-radius: 0;
}
}
}
}
}
}

229
demo/pages/scss/bootstrap/scss/_carousel.scss Normal file
View File

@ -0,0 +1,229 @@
// Notes on the classes:
//
// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
// even when their scroll action started on a carousel, but for compatibility (with Firefox)
// we're preventing all actions instead
// 2. The .carousel-item-start and .carousel-item-end is used to indicate where
// the active slide is heading.
// 3. .active.carousel-item is the current slide.
// 4. .active.carousel-item-start and .active.carousel-item-end is the current
// slide in its in-transition state. Only one of these occurs at a time.
// 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end
// is the upcoming slide in transition.
.carousel {
position: relative;
}
.carousel.pointer-event {
touch-action: pan-y;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
@include clearfix();
}
.carousel-item {
position: relative;
display: none;
float: left;
width: 100%;
margin-right: -100%;
backface-visibility: hidden;
@include transition($carousel-transition);
}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
display: block;
}
/* rtl:begin:ignore */
.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
transform: translateX(100%);
}
.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
transform: translateX(-100%);
}
/* rtl:end:ignore */
//
// Alternate transitions
//
.carousel-fade {
.carousel-item {
opacity: 0;
transition-property: opacity;
transform: none;
}
.carousel-item.active,
.carousel-item-next.carousel-item-start,
.carousel-item-prev.carousel-item-end {
z-index: 1;
opacity: 1;
}
.active.carousel-item-start,
.active.carousel-item-end {
z-index: 0;
opacity: 0;
@include transition(opacity 0s $carousel-transition-duration);
}
}
//
// Left/right controls for nav
//
.carousel-control-prev,
.carousel-control-next {
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
// Use flex for alignment (1-3)
display: flex; // 1. allow flex styles
align-items: center; // 2. vertically center contents
justify-content: center; // 3. horizontally center contents
width: $carousel-control-width;
padding: 0;
color: $carousel-control-color;
text-align: center;
background: none;
border: 0;
opacity: $carousel-control-opacity;
@include transition($carousel-control-transition);
// Hover/focus state
&:hover,
&:focus {
color: $carousel-control-color;
text-decoration: none;
outline: 0;
opacity: $carousel-control-hover-opacity;
}
}
.carousel-control-prev {
left: 0;
background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
}
.carousel-control-next {
right: 0;
background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
}
// Icons for within
.carousel-control-prev-icon,
.carousel-control-next-icon {
display: inline-block;
width: $carousel-control-icon-width;
height: $carousel-control-icon-width;
background-repeat: no-repeat;
background-position: 50%;
background-size: 100% 100%;
}
/* rtl:options: {
"autoRename": true,
"stringMap":[ {
"name" : "prev-next",
"search" : "prev",
"replace" : "next"
} ]
} */
.carousel-control-prev-icon {
background-image: escape-svg($carousel-control-prev-icon-bg);
}
.carousel-control-next-icon {
background-image: escape-svg($carousel-control-next-icon-bg);
}
// Optional indicator pips/controls
//
// Add a container (such as a list) with the following class and add an item (ideally a focusable control,
// like a button) with data-bs-target for each slide your carousel holds.
.carousel-indicators {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
display: flex;
justify-content: center;
padding: 0;
// Use the .carousel-control's width as margin so we don't overlay those
margin-right: $carousel-control-width;
margin-bottom: 1rem;
margin-left: $carousel-control-width;
list-style: none;
[data-bs-target] {
box-sizing: content-box;
flex: 0 1 auto;
width: $carousel-indicator-width;
height: $carousel-indicator-height;
padding: 0;
margin-right: $carousel-indicator-spacer;
margin-left: $carousel-indicator-spacer;
text-indent: -999px;
cursor: pointer;
background-color: $carousel-indicator-active-bg;
background-clip: padding-box;
border: 0;
// Use transparent borders to increase the hit area by 10px on top and bottom.
border-top: $carousel-indicator-hit-area-height solid transparent;
border-bottom: $carousel-indicator-hit-area-height solid transparent;
opacity: $carousel-indicator-opacity;
@include transition($carousel-indicator-transition);
}
.active {
opacity: $carousel-indicator-active-opacity;
}
}
// Optional captions
//
//
.carousel-caption {
position: absolute;
right: (100% - $carousel-caption-width) / 2;
bottom: $carousel-caption-spacer;
left: (100% - $carousel-caption-width) / 2;
padding-top: $carousel-caption-padding-y;
padding-bottom: $carousel-caption-padding-y;
color: $carousel-caption-color;
text-align: center;
}
// Dark mode carousel
.carousel-dark {
.carousel-control-prev-icon,
.carousel-control-next-icon {
filter: $carousel-dark-control-icon-filter;
}
.carousel-indicators [data-bs-target] {
background-color: $carousel-dark-indicator-active-bg;
}
.carousel-caption {
color: $carousel-dark-caption-color;
}
}

40
demo/pages/scss/bootstrap/scss/_close.scss Normal file
View File

@ -0,0 +1,40 @@
// transparent background and border properties included for button version.
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
.btn-close {
box-sizing: content-box;
width: $btn-close-width;
height: $btn-close-height;
padding: $btn-close-padding-y $btn-close-padding-x;
color: $btn-close-color;
background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
border: 0; // for button elements
@include border-radius();
opacity: $btn-close-opacity;
// Override <a>'s hover style
&:hover {
color: $btn-close-color;
text-decoration: none;
opacity: $btn-close-hover-opacity;
}
&:focus {
outline: 0;
box-shadow: $btn-close-focus-shadow;
opacity: $btn-close-focus-opacity;
}
&:disabled,
&.disabled {
pointer-events: none;
user-select: none;
opacity: $btn-close-disabled-opacity;
}
}
.btn-close-white {
filter: $btn-close-white-filter;
}

41
demo/pages/scss/bootstrap/scss/_containers.scss Normal file
View File

@ -0,0 +1,41 @@
// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.
@if $enable-grid-classes {
// Single container class with breakpoint max-widths
.container,
// 100% wide container at all breakpoints
.container-fluid {
@include make-container();
}
// Responsive containers that are 100% wide until a breakpoint
@each $breakpoint, $container-max-width in $container-max-widths {
.container-#{$breakpoint} {
@extend .container-fluid;
}
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
%responsive-container-#{$breakpoint} {
max-width: $container-max-width;
}
// Extend each breakpoint which is smaller or equal to the current breakpoint
$extend-breakpoint: true;
@each $name, $width in $grid-breakpoints {
@if ($extend-breakpoint) {
.container#{breakpoint-infix($name, $grid-breakpoints)} {
@extend %responsive-container-#{$breakpoint};
}
// Once the current breakpoint is reached, stop extending
@if ($breakpoint == $name) {
$extend-breakpoint: false;
}
}
}
}
}
}

240
demo/pages/scss/bootstrap/scss/_dropdown.scss Normal file
View File

@ -0,0 +1,240 @@
// The dropdown wrapper (`<div>`)
.dropup,
.dropend,
.dropdown,
.dropstart {
position: relative;
}
.dropdown-toggle {
white-space: nowrap;
// Generate the caret automatically
@include caret();
}
// The dropdown menu
.dropdown-menu {
position: absolute;
z-index: $zindex-dropdown;
display: none; // none by default, but block on "open" of the menu
min-width: $dropdown-min-width;
padding: $dropdown-padding-y $dropdown-padding-x;
margin: 0; // Override default margin of ul
@include font-size($dropdown-font-size);
color: $dropdown-color;
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
list-style: none;
background-color: $dropdown-bg;
background-clip: padding-box;
border: $dropdown-border-width solid $dropdown-border-color;
@include border-radius($dropdown-border-radius);
@include box-shadow($dropdown-box-shadow);
&[data-bs-popper] {
top: 100%;
left: 0;
margin-top: $dropdown-spacer;
}
}
// scss-docs-start responsive-breakpoints
// We deliberately hardcode the `bs-` prefix because we check
// this custom property in JS to determine Popper's positioning
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.dropdown-menu#{$infix}-start {
--bs-position: start;
&[data-bs-popper] {
right: auto #{"/* rtl:ignore */"};
left: 0 #{"/* rtl:ignore */"};
}
}
.dropdown-menu#{$infix}-end {
--bs-position: end;
&[data-bs-popper] {
right: 0 #{"/* rtl:ignore */"};
left: auto #{"/* rtl:ignore */"};
}
}
}
}
// scss-docs-end responsive-breakpoints
// Allow for dropdowns to go bottom up (aka, dropup-menu)
// Just add .dropup after the standard .dropdown class and you're set.
.dropup {
.dropdown-menu[data-bs-popper] {
top: auto;
bottom: 100%;
margin-top: 0;
margin-bottom: $dropdown-spacer;
}
.dropdown-toggle {
@include caret(up);
}
}
.dropend {
.dropdown-menu[data-bs-popper] {
top: 0;
right: auto;
left: 100%;
margin-top: 0;
margin-left: $dropdown-spacer;
}
.dropdown-toggle {
@include caret(end);
&::after {
vertical-align: 0;
}
}
}
.dropstart {
.dropdown-menu[data-bs-popper] {
top: 0;
right: 100%;
left: auto;
margin-top: 0;
margin-right: $dropdown-spacer;
}
.dropdown-toggle {
@include caret(start);
&::before {
vertical-align: 0;
}
}
}
// Dividers (basically an `<hr>`) within the dropdown
.dropdown-divider {
height: 0;
margin: $dropdown-divider-margin-y 0;
overflow: hidden;
border-top: 1px solid $dropdown-divider-bg;
}
// Links, buttons, and more within the dropdown menu
//
// `<button>`-specific styles are denoted with `// For <button>s`
.dropdown-item {
display: block;
width: 100%; // For `<button>`s
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
clear: both;
font-weight: $font-weight-normal;
color: $dropdown-link-color;
text-align: inherit; // For `<button>`s
text-decoration: if($link-decoration == none, null, none);
white-space: nowrap; // prevent links from randomly breaking onto new lines
background-color: transparent; // For `<button>`s
border: 0; // For `<button>`s
// Prevent dropdown overflow if there's no padding
// See https://github.com/twbs/bootstrap/pull/27703
@if $dropdown-padding-y == 0 {
&:first-child {
@include border-top-radius($dropdown-inner-border-radius);
}
&:last-child {
@include border-bottom-radius($dropdown-inner-border-radius);
}
}
&:hover,
&:focus {
color: $dropdown-link-hover-color;
text-decoration: if($link-hover-decoration == underline, none, null);
@include gradient-bg($dropdown-link-hover-bg);
}
&.active,
&:active {
color: $dropdown-link-active-color;
text-decoration: none;
@include gradient-bg($dropdown-link-active-bg);
}
&.disabled,
&:disabled {
color: $dropdown-link-disabled-color;
pointer-events: none;
background-color: transparent;
// Remove CSS gradients if they're enabled
background-image: if($enable-gradients, none, null);
}
}
.dropdown-menu.show {
display: block;
}
// Dropdown section headers
.dropdown-header {
display: block;
padding: $dropdown-header-padding;
margin-bottom: 0; // for use with heading elements
@include font-size($font-size-sm);
color: $dropdown-header-color;
white-space: nowrap; // as with > li > a
}
// Dropdown text
.dropdown-item-text {
display: block;
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
color: $dropdown-link-color;
}
// Dark dropdowns
.dropdown-menu-dark {
color: $dropdown-dark-color;
background-color: $dropdown-dark-bg;
border-color: $dropdown-dark-border-color;
@include box-shadow($dropdown-dark-box-shadow);
.dropdown-item {
color: $dropdown-dark-link-color;
&:hover,
&:focus {
color: $dropdown-dark-link-hover-color;
@include gradient-bg($dropdown-dark-link-hover-bg);
}
&.active,
&:active {
color: $dropdown-dark-link-active-color;
@include gradient-bg($dropdown-dark-link-active-bg);
}
&.disabled,
&:disabled {
color: $dropdown-dark-link-disabled-color;
}
}
.dropdown-divider {
border-color: $dropdown-dark-divider-bg;
}
.dropdown-item-text {
color: $dropdown-dark-link-color;
}
.dropdown-header {
color: $dropdown-dark-header-color;
}
}

9
demo/pages/scss/bootstrap/scss/_forms.scss Normal file
View File

@ -0,0 +1,9 @@
@import "forms/labels";
@import "forms/form-text";
@import "forms/form-control";
@import "forms/form-select";
@import "forms/form-check";
@import "forms/form-range";
@import "forms/floating-labels";
@import "forms/input-group";
@import "forms/validation";

205
demo/pages/scss/bootstrap/scss/_functions.scss Normal file
View File

@ -0,0 +1,205 @@
// Bootstrap functions
//
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
// Ascending
// Used to evaluate Sass maps like our grid breakpoints.
@mixin _assert-ascending($map, $map-name) {
$prev-key: null;
$prev-num: null;
@each $key, $num in $map {
@if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
// Do nothing
} @else if not comparable($prev-num, $num) {
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
} @else if $prev-num >= $num {
@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
}
$prev-key: $key;
$prev-num: $num;
}
}
// Starts at zero
// Used to ensure the min-width of the lowest breakpoint starts at 0.
@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
@if length($map) > 0 {
$values: map-values($map);
$first-value: nth($values, 1);
@if $first-value != 0 {
@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
}
}
}
// Internal Bootstrap function to turn maps into its negative variant.
// It prefixes the keys with `n` and makes the value negative.
@function negativify-map($map) {
$result: ();
@each $key, $value in $map {
@if $key != 0 {
$result: map-merge($result, ("n" + $key: (-$value)));
}
}
@return $result;
}
// Get multiple keys from a sass map
@function map-get-multiple($map, $values) {
$result: ();
@each $key, $value in $map {
@if (index($values, $key) != null) {
$result: map-merge($result, ($key: $value));
}
}
@return $result;
}
// Replace `$search` with `$replace` in `$string`
// Used on our SVG icon backgrounds for custom forms.
//
// @author Hugo Giraudel
// @param {String} $string - Initial string
// @param {String} $search - Substring to replace
// @param {String} $replace ('') - New value
// @return {String} - Updated string
@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
// See https://codepen.io/kevinweber/pen/dXWoRw
//
// Requires the use of quotes around data URIs.
@function escape-svg($string) {
@if str-index($string, "data:image/svg+xml") {
@each $char, $encoded in $escaped-characters {
// Do not escape the url brackets
@if str-index($string, "url(") == 1 {
$string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
} @else {
$string: str-replace($string, $char, $encoded);
}
}
}
@return $string;
}
// Color contrast
// See https://github.com/twbs/bootstrap/pull/30168
// A list of pre-calculated numbers of pow(($value / 255 + .055) / 1.055, 2.4). (from 0 to 255)
// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
$foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
$max-ratio: 0;
$max-ratio-color: null;
@each $color in $foregrounds {
$contrast-ratio: contrast-ratio($background, $color);
@if $contrast-ratio > $min-contrast-ratio {
@return $color;
} @else if $contrast-ratio > $max-ratio {
$max-ratio: $contrast-ratio;
$max-ratio-color: $color;
}
}
@warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
@return $max-ratio-color;
}
@function contrast-ratio($background, $foreground: $color-contrast-light) {
$l1: luminance($background);
$l2: luminance(opaque($background, $foreground));
@return if($l1 > $l2, ($l1 + .05) / ($l2 + .05), ($l2 + .05) / ($l1 + .05));
}
// Return WCAG2.0 relative luminance
// See https://www.w3.org/WAI/GL/wiki/Relative_luminance
// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
@function luminance($color) {
$rgb: (
"r": red($color),
"g": green($color),
"b": blue($color)
);
@each $name, $value in $rgb {
$value: if($value / 255 < .03928, $value / 255 / 12.92, nth($_luminance-list, $value + 1));
$rgb: map-merge($rgb, ($name: $value));
}
@return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
}
// Return opaque color
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
@function opaque($background, $foreground) {
@return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
}
// scss-docs-start color-functions
// Tint a color: mix a color with white
@function tint-color($color, $weight) {
@return mix(white, $color, $weight);
}
// Shade a color: mix a color with black
@function shade-color($color, $weight) {
@return mix(black, $color, $weight);
}
// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}
// scss-docs-end color-functions
// Return valid calc
@function add($value1, $value2, $return-calc: true) {
@if $value1 == null {
@return $value2;
}
@if $value2 == null {
@return $value1;
}
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
@return $value1 + $value2;
}
@return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
}
@function subtract($value1, $value2, $return-calc: true) {
@if $value1 == null and $value2 == null {
@return null;
}
@if $value1 == null {
@return -$value2;
}
@if $value2 == null {
@return $value1;
}
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
@return $value1 - $value2;
}
@return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
}

22
demo/pages/scss/bootstrap/scss/_grid.scss Normal file
View File

@ -0,0 +1,22 @@
// Row
//
// Rows contain your columns.
@if $enable-grid-classes {
.row {
@include make-row();
> * {
@include make-col-ready();
}
}
}
// Columns
//
// Common styles for small and large grid columns
@if $enable-grid-classes {
@include make-grid-columns();
}

7
demo/pages/scss/bootstrap/scss/_helpers.scss Normal file
View File

@ -0,0 +1,7 @@
@import "helpers/clearfix";
@import "helpers/colored-links";
@import "helpers/ratio";
@import "helpers/position";
@import "helpers/visually-hidden";
@import "helpers/stretched-link";
@import "helpers/text-truncation";

Some files were not shown because too many files have changed in this diff Show More