Compare commits
11 Commits
32ae338e51
...
alika
| Author | SHA1 | Date | |
|---|---|---|---|
| 17bf9df061 | |||
| c5e45e0cdc | |||
| be47f2dde8 | |||
| f1a952202d | |||
| c3514ab1d8 | |||
| 5fb284e4b6 | |||
| e7c1d50e9f | |||
| 8704a98f70 | |||
| 5d398d05f6 | |||
| 09446d6bcd | |||
| 8d8eec6a03 |
38
.htaccess
Normal file
38
.htaccess
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
|
||||||
|
|
||||||
|
# RewriteEngine On
|
||||||
|
|
||||||
|
# # Remove .php extension from URLs (e.g., /contactt -> contact.php)
|
||||||
|
# RewriteCond %{REQUEST_FILENAME} !-d
|
||||||
|
# RewriteCond %{REQUEST_FILENAME}\.php -f
|
||||||
|
# RewriteRule ^(.*)$ $1.php [L]
|
||||||
|
|
||||||
|
# # Redirect direct access to .php files to clean URLs (optional)
|
||||||
|
# RewriteCond %{THE_REQUEST} \s/+(.*?)\.php[\s?] [NC]
|
||||||
|
# RewriteRule ^ /%1 [R=301,L,NE]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<Files "mailQuery.php">
|
||||||
|
RewriteEngine Off
|
||||||
|
</Files>
|
||||||
|
<Files "mailContact.php">
|
||||||
|
RewriteEngine Off
|
||||||
|
</Files>
|
||||||
|
|
||||||
|
|
||||||
|
RewriteEngine On
|
||||||
|
DirectoryIndex index.php
|
||||||
|
|
||||||
|
# 1. Redirect any index.php request to its directory URL
|
||||||
|
RewriteCond %{THE_REQUEST} \s/(.*)index\.php[\s?] [NC]
|
||||||
|
RewriteRule ^(.*)index\.php$ /%1 [R=301,L]
|
||||||
|
|
||||||
|
# 2. Remove .php extension from URLs (e.g., /contactt -> contact.php)
|
||||||
|
RewriteCond %{REQUEST_FILENAME} !-d
|
||||||
|
RewriteCond %{REQUEST_FILENAME}\.php -f
|
||||||
|
RewriteRule ^(.*)$ $1.php [L]
|
||||||
|
|
||||||
|
# 3. Redirect direct access to .php files to clean URLs (optional)
|
||||||
|
RewriteCond %{THE_REQUEST} \s/+(.*?)\.php[\s?] [NC]
|
||||||
|
RewriteRule ^ /%1 [R=301,L,NE]
|
||||||
55
bib-toaster/toaster.css
Normal file
55
bib-toaster/toaster.css
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
.flash-toaster {
|
||||||
|
position: fixed;
|
||||||
|
top: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
z-index: 9999;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
min-width: 250px;
|
||||||
|
max-width: 320px;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
transform: translateX(100%); /* start off-screen */
|
||||||
|
opacity: 0;
|
||||||
|
transition: transform 0.4s ease, opacity 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast.show {
|
||||||
|
transform: translateX(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Status colors */
|
||||||
|
.toast--success {
|
||||||
|
background: #198754;
|
||||||
|
}
|
||||||
|
.toast--error {
|
||||||
|
background: #dc3545;
|
||||||
|
}
|
||||||
|
.toast--warning {
|
||||||
|
background: #ffc107;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Close button */
|
||||||
|
.toast__close {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: inherit;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
line-height: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide animation */
|
||||||
|
.toast.hide {
|
||||||
|
transform: translateX(100%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
27
bib-toaster/toaster.js
Normal file
27
bib-toaster/toaster.js
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const toast = document.getElementById('flashToast');
|
||||||
|
if (!toast) return;
|
||||||
|
|
||||||
|
// Show it
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
toast.classList.add('show');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close on [×]
|
||||||
|
toast.querySelector('.toast__close').addEventListener('click', () => {
|
||||||
|
hideToast();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Auto-hide after 3s
|
||||||
|
const hideTimeout = setTimeout(hideToast, 3000);
|
||||||
|
|
||||||
|
function hideToast(){
|
||||||
|
clearTimeout(hideTimeout);
|
||||||
|
toast.classList.add('hide');
|
||||||
|
// Remove from DOM after transition
|
||||||
|
toast.addEventListener('transitionend', () => {
|
||||||
|
toast.remove();
|
||||||
|
}, { once: true });
|
||||||
|
}
|
||||||
|
});
|
||||||
33
contact.php
33
contact.php
@@ -1,4 +1,4 @@
|
|||||||
<?php include ('header.php'); ?>
|
<?php include('header.php'); ?>
|
||||||
|
|
||||||
<div class="container-fluid bg-breadcrumb">
|
<div class="container-fluid bg-breadcrumb">
|
||||||
<div class="container text-center py-5" style="max-width: 900px;">
|
<div class="container text-center py-5" style="max-width: 900px;">
|
||||||
@@ -23,7 +23,7 @@
|
|||||||
<i class="fas fa-map-marked-alt fa-3x " style="color:#f54813;"></i>
|
<i class="fas fa-map-marked-alt fa-3x " style="color:#f54813;"></i>
|
||||||
<div class="ps-3">
|
<div class="ps-3">
|
||||||
<h5 class="mb-3">Location</h5>
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@@ -35,11 +35,12 @@
|
|||||||
<h5 class="mb-3">Contact</h5>
|
<h5 class="mb-3">Contact</h5>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<h6 class="mb-0">Phone:</h6>
|
<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>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<h6 class="mb-0">Email:</h6>
|
<h6 class="mb-0">Email:</h6>
|
||||||
<a href="mailto: info@orientabroad.com" class="fs-5 text-primary" target="_blank">info@orientabroad.com</a>
|
<a href="mailto: info@orientabroad.com" class="fs-5 text-primary"
|
||||||
|
target="_blank">info@orientabroad.com</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -52,41 +53,42 @@
|
|||||||
<h5 class="sub-title pe-3">Message Us</h5>
|
<h5 class="sub-title pe-3">Message Us</h5>
|
||||||
</div>
|
</div>
|
||||||
<h1 class="display-5 mb-4">Send Your Message</h1>
|
<h1 class="display-5 mb-4">Send Your Message</h1>
|
||||||
<form>
|
<form action="mailContact.php" method="POST">
|
||||||
<div class="row g-4">
|
<div class="row g-4">
|
||||||
<div class="col-lg-12 col-xl-6">
|
<div class="col-lg-12 col-xl-6">
|
||||||
<div class="form-floating">
|
<div class="form-floating">
|
||||||
<input type="text" class="form-control" id="name" placeholder="Your Name">
|
<input type="text" class="form-control" id="name" placeholder="Your Name" name="name">
|
||||||
<label for="name">Your Name</label>
|
<label for="name">Your Name</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-12 col-xl-6">
|
<div class="col-lg-12 col-xl-6">
|
||||||
<div class="form-floating">
|
<div class="form-floating">
|
||||||
<input type="email" class="form-control" id="email" placeholder="Your Email">
|
<input type="email" class="form-control" id="email" placeholder="Your Email" name="email">
|
||||||
<label for="email">Your Email</label>
|
<label for="email">Your Email</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-12 col-xl-6">
|
<div class="col-lg-12 col-xl-6">
|
||||||
<div class="form-floating">
|
<div class="form-floating">
|
||||||
<input type="phone" class="form-control" id="phone" placeholder="Phone">
|
<input type="tel" class="form-control" id="phone" name="phone" pattern="[0-9]{10}" maxlength="10"
|
||||||
|
placeholder="Enter 10-digit phone number" required>
|
||||||
<label for="phone">Your Phone</label>
|
<label for="phone">Your Phone</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-12 col-xl-6">
|
<div class="col-lg-12 col-xl-6">
|
||||||
<div class="form-floating">
|
<div class="form-floating">
|
||||||
<input type="text" class="form-control" id="project" placeholder="Address">
|
<input type="text" class="form-control" id="address" placeholder="Address" name="address">
|
||||||
<label for="address">Your Address</label>
|
<label for="address">Your Address</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="form-floating">
|
<div class="form-floating">
|
||||||
<input type="text" class="form-control" id="subject" placeholder="Subject">
|
<input type="text" class="form-control" id="subject" placeholder="Subject" name="subject">
|
||||||
<label for="subject">Subject</label>
|
<label for="subject">Subject</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="form-floating">
|
<div class="form-floating">
|
||||||
<textarea class="form-control" placeholder="Leave a message here" id="message"
|
<textarea class="form-control" placeholder="Leave a message here" id="message" name="message"
|
||||||
style="height: 160px"></textarea>
|
style="height: 160px"></textarea>
|
||||||
<label for="message">Message</label>
|
<label for="message">Message</label>
|
||||||
</div>
|
</div>
|
||||||
@@ -103,9 +105,10 @@
|
|||||||
|
|
||||||
<div class="col-12 pt-5 wow zoomIn" data-wow-delay="0.1s">
|
<div class="col-12 pt-5 wow zoomIn" data-wow-delay="0.1s">
|
||||||
<div class="rounded h-100">
|
<div class="rounded h-100">
|
||||||
<iframe class="rounded w-100" style="height: 500px;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3532.8720945893288!2d85.33298677611329!3d27.690347826239755!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39eb19860a58dced%3A0x9a2314f109088c48!2sNew%20Baneshwor%20Plaza!5e0!3m2!1sen!2snp!4v1720153851635!5m2!1sen!2snp"
|
<iframe class="rounded w-100" style="height: 500px;"
|
||||||
loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3532.8720945893288!2d85.33298677611329!3d27.690347826239755!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39eb19860a58dced%3A0x9a2314f109088c48!2sNew%20Baneshwor%20Plaza!5e0!3m2!1sen!2snp!4v1720153851635!5m2!1sen!2snp"
|
||||||
|
loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -114,4 +117,4 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<?php include ('footer.php'); ?>
|
<?php include('footer.php'); ?>
|
||||||
2
css/bootstrap.min.css
vendored
2
css/bootstrap.min.css
vendored
@@ -499,7 +499,7 @@ progress {
|
|||||||
|
|
||||||
@media(min-width: 1200px) {
|
@media(min-width: 1200px) {
|
||||||
.display-1 {
|
.display-1 {
|
||||||
font-size: 5rem
|
font-size: 3rem
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -387,11 +387,13 @@ h6{
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-size: 60% 60%;
|
background-size: 60% 60%;
|
||||||
transition: 0.5s;
|
transition: 0.5s;
|
||||||
|
/* margin-top: 280%; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.carousel-header .carousel-control-next .carousel-control-next-icon {
|
.carousel-header .carousel-control-next .carousel-control-next-icon {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-right: -60px;
|
margin-right: -60px;
|
||||||
|
/* margin-top: 280%; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.carousel-header .carousel .carousel-indicators {
|
.carousel-header .carousel .carousel-indicators {
|
||||||
@@ -437,16 +439,30 @@ h6{
|
|||||||
left: 0;
|
left: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: left;
|
||||||
text-align: center;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-header .carousel-inner .carousel-item .carousel-caption_1 {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: right;
|
||||||
|
text-align: center;
|
||||||
|
background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0.6));
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.carousel-header {
|
.carousel-header {
|
||||||
height: 700px !important;
|
height: 945px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carousel-header .carousel-control-prev .carousel-control-prev-icon,
|
.carousel-header .carousel-control-prev .carousel-control-prev-icon,
|
||||||
@@ -755,7 +771,7 @@ h6{
|
|||||||
}
|
}
|
||||||
|
|
||||||
.country .country-item .country-name a.fs-4:hover {
|
.country .country-item .country-name a.fs-4:hover {
|
||||||
color: var(--bs-secondary) !important;
|
color: white!important;
|
||||||
}
|
}
|
||||||
/*** Country End ***/
|
/*** Country End ***/
|
||||||
|
|
||||||
@@ -866,6 +882,9 @@ h6{
|
|||||||
|
|
||||||
|
|
||||||
/*** Contact Start ***/
|
/*** Contact Start ***/
|
||||||
|
.form-control{
|
||||||
|
color: black !important;
|
||||||
|
}
|
||||||
.contact .office .office-item {
|
.contact .office .office-item {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
@@ -950,3 +969,17 @@ h6{
|
|||||||
.mr-250{
|
.mr-250{
|
||||||
margin-right: -650px;
|
margin-right: -650px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ml-350{
|
||||||
|
margin-left: -350px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-left{
|
||||||
|
text-align: left !important;
|
||||||
|
}
|
||||||
|
.text-right{
|
||||||
|
text-align: right !important;
|
||||||
|
}
|
||||||
|
.home-destination .card{
|
||||||
|
height: 345px;
|
||||||
|
}
|
||||||
253
demo/pages/404.html
Normal file
253
demo/pages/404.html
Normal 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
520
demo/pages/about.html
Normal 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
424
demo/pages/contact.html
Normal 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
456
demo/pages/countries.html
Normal 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
6
demo/pages/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
928
demo/pages/css/style.css
Normal file
928
demo/pages/css/style.css
Normal 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
441
demo/pages/feature.html
Normal 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
BIN
demo/pages/img/08.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 543 KiB |
BIN
demo/pages/img/Orient.png
Normal file
BIN
demo/pages/img/Orient.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
BIN
demo/pages/img/about-2.png
Normal file
BIN
demo/pages/img/about-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
BIN
demo/pages/img/about-3.jpg
Normal file
BIN
demo/pages/img/about-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
demo/pages/img/ausflag.png
Normal file
BIN
demo/pages/img/ausflag.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
demo/pages/img/australia.jpg
Normal file
BIN
demo/pages/img/australia.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
BIN
demo/pages/img/australia.png
Normal file
BIN
demo/pages/img/australia.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 798 KiB |
BIN
demo/pages/img/brand-logo.png
Normal file
BIN
demo/pages/img/brand-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
demo/pages/img/brazil.jpg
Normal file
BIN
demo/pages/img/brazil.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
demo/pages/img/breadcrumb.png
Normal file
BIN
demo/pages/img/breadcrumb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 412 KiB |
BIN
demo/pages/img/canada.png
Normal file
BIN
demo/pages/img/canada.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
demo/pages/img/canadaflag.png
Normal file
BIN
demo/pages/img/canadaflag.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
BIN
demo/pages/img/carousel-1.jpg
Normal file
BIN
demo/pages/img/carousel-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
demo/pages/img/carousel-2.jpg
Normal file
BIN
demo/pages/img/carousel-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
BIN
demo/pages/img/country-1.jpg
Normal file
BIN
demo/pages/img/country-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
demo/pages/img/country-2.jpg
Normal file
BIN
demo/pages/img/country-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
demo/pages/img/country-3.jpg
Normal file
BIN
demo/pages/img/country-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
demo/pages/img/country-4.jpg
Normal file
BIN
demo/pages/img/country-4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
demo/pages/img/india.jpg
Normal file
BIN
demo/pages/img/india.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
demo/pages/img/italy.jpg
Normal file
BIN
demo/pages/img/italy.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
demo/pages/img/japan.png
Normal file
BIN
demo/pages/img/japan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 685 KiB |
BIN
demo/pages/img/japanflag.png
Normal file
BIN
demo/pages/img/japanflag.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
demo/pages/img/langclass.jpg
Normal file
BIN
demo/pages/img/langclass.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
BIN
demo/pages/img/logo.png
Normal file
BIN
demo/pages/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
demo/pages/img/newzealand.png
Normal file
BIN
demo/pages/img/newzealand.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 873 KiB |
BIN
demo/pages/img/newzealandflag.png
Normal file
BIN
demo/pages/img/newzealandflag.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
demo/pages/img/office-1.jpg
Normal file
BIN
demo/pages/img/office-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
demo/pages/img/office-2.jpg
Normal file
BIN
demo/pages/img/office-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
demo/pages/img/office-3.jpg
Normal file
BIN
demo/pages/img/office-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
demo/pages/img/office-4.jpg
Normal file
BIN
demo/pages/img/office-4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
demo/pages/img/profile.png
Normal file
BIN
demo/pages/img/profile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 200 KiB |
BIN
demo/pages/img/pte_coaching.png
Normal file
BIN
demo/pages/img/pte_coaching.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 429 KiB |
BIN
demo/pages/img/reg-form.jpg
Normal file
BIN
demo/pages/img/reg-form.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 MiB |
BIN
demo/pages/img/service-1.jpg
Normal file
BIN
demo/pages/img/service-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
demo/pages/img/service-2.jpg
Normal file
BIN
demo/pages/img/service-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
demo/pages/img/service-3.jpg
Normal file
BIN
demo/pages/img/service-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
demo/pages/img/service-4.jpg
Normal file
BIN
demo/pages/img/service-4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
demo/pages/img/singapore.jpg
Normal file
BIN
demo/pages/img/singapore.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 412 KiB |
BIN
demo/pages/img/slider.png
Normal file
BIN
demo/pages/img/slider.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
demo/pages/img/testibg.png
Normal file
BIN
demo/pages/img/testibg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 917 KiB |
BIN
demo/pages/img/testimonial-1.jpg
Normal file
BIN
demo/pages/img/testimonial-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
demo/pages/img/testimonial-2.jpg
Normal file
BIN
demo/pages/img/testimonial-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
demo/pages/img/testimonial-3.jpg
Normal file
BIN
demo/pages/img/testimonial-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
demo/pages/img/toefl.png
Normal file
BIN
demo/pages/img/toefl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 392 KiB |
BIN
demo/pages/img/training-1.jpg
Normal file
BIN
demo/pages/img/training-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
BIN
demo/pages/img/training-2.jpg
Normal file
BIN
demo/pages/img/training-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
demo/pages/img/training-3.jpg
Normal file
BIN
demo/pages/img/training-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
demo/pages/img/training-4.jpg
Normal file
BIN
demo/pages/img/training-4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
BIN
demo/pages/img/uk.png
Normal file
BIN
demo/pages/img/uk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 967 KiB |
BIN
demo/pages/img/ukflag.png
Normal file
BIN
demo/pages/img/ukflag.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
BIN
demo/pages/img/usa.jpg
Normal file
BIN
demo/pages/img/usa.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
demo/pages/img/usa.png
Normal file
BIN
demo/pages/img/usa.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1024 KiB |
944
demo/pages/index.html
Normal file
944
demo/pages/index.html
Normal 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
105
demo/pages/js/main.js
Normal 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&modestbranding=1&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
1579
demo/pages/lib/animate/animate.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
11
demo/pages/lib/animate/animate.min.css
vendored
Normal file
11
demo/pages/lib/animate/animate.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
11
demo/pages/lib/counterup/counterup.min.js
vendored
Normal file
11
demo/pages/lib/counterup/counterup.min.js
vendored
Normal 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
168
demo/pages/lib/easing/easing.js
Normal 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
1
demo/pages/lib/easing/easing.min.js
vendored
Normal 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
23
demo/pages/lib/owlcarousel/LICENSE
Normal 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
BIN
demo/pages/lib/owlcarousel/assets/ajax-loader.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
170
demo/pages/lib/owlcarousel/assets/owl.carousel.css
Normal file
170
demo/pages/lib/owlcarousel/assets/owl.carousel.css
Normal 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
6
demo/pages/lib/owlcarousel/assets/owl.carousel.min.css
vendored
Normal 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
50
demo/pages/lib/owlcarousel/assets/owl.theme.default.css
Normal 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
6
demo/pages/lib/owlcarousel/assets/owl.theme.default.min.css
vendored
Normal 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
50
demo/pages/lib/owlcarousel/assets/owl.theme.green.css
Normal 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
6
demo/pages/lib/owlcarousel/assets/owl.theme.green.min.css
vendored
Normal 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
BIN
demo/pages/lib/owlcarousel/assets/owl.video.play.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
3275
demo/pages/lib/owlcarousel/owl.carousel.js
Normal file
3275
demo/pages/lib/owlcarousel/owl.carousel.js
Normal file
File diff suppressed because it is too large
Load Diff
7
demo/pages/lib/owlcarousel/owl.carousel.min.js
vendored
Normal file
7
demo/pages/lib/owlcarousel/owl.carousel.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
5
demo/pages/lib/waypoints/links.php
Normal file
5
demo/pages/lib/waypoints/links.php
Normal 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
7
demo/pages/lib/waypoints/waypoints.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
542
demo/pages/lib/wow/wow.js
Normal file
542
demo/pages/lib/wow/wow.js
Normal 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
3
demo/pages/lib/wow/wow.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
32
demo/pages/scss/bootstrap.scss
vendored
Normal file
32
demo/pages/scss/bootstrap.scss
vendored
Normal 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
118
demo/pages/scss/bootstrap/scss/_accordion.scss
Normal 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
57
demo/pages/scss/bootstrap/scss/_alert.scss
Normal 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
29
demo/pages/scss/bootstrap/scss/_badge.scss
Normal 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
28
demo/pages/scss/bootstrap/scss/_breadcrumb.scss
Normal 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
139
demo/pages/scss/bootstrap/scss/_button-group.scss
Normal 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
111
demo/pages/scss/bootstrap/scss/_buttons.scss
Normal 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
215
demo/pages/scss/bootstrap/scss/_card.scss
Normal 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
229
demo/pages/scss/bootstrap/scss/_carousel.scss
Normal 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
40
demo/pages/scss/bootstrap/scss/_close.scss
Normal 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
41
demo/pages/scss/bootstrap/scss/_containers.scss
Normal 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
240
demo/pages/scss/bootstrap/scss/_dropdown.scss
Normal 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
9
demo/pages/scss/bootstrap/scss/_forms.scss
Normal 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";
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user