build ui header, footer, home page, about page

This commit is contained in:
2026-02-02 16:16:11 +07:00
parent 8d105dda9c
commit d24b9ed33e
38 changed files with 4336 additions and 451 deletions

793
docs/example/about.html Normal file
View File

@@ -0,0 +1,793 @@
<!DOCTYPE html>
<html lang="en">
<!--<< Header Area >>-->
<head>
<!-- ========== Meta Tags ========== -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Gramentheme">
<meta name="description" content="Visaway Immigration & Visa Consulting HTML Template">
<!-- ======== Page title ============ -->
<title>Visaway Immigration & Visa Consulting HTML Template</title>
<!--<< Favcion >>-->
<link rel="shortcut icon" href="assets/img/favicon.png">
<!--<< Bootstrap min.css >>-->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!--<< All Min Css >>-->
<link rel="stylesheet" href="assets/css/all.min.css">
<!--<< Animate.css >>-->
<link rel="stylesheet" href="assets/css/animate.css">
<!--<< Magnific Popup.css >>-->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!--<< MeanMenu.css >>-->
<link rel="stylesheet" href="assets/css/meanmenu.css">
<!--<< Odometer.css >>-->
<link rel="stylesheet" href="assets/css/odometer.css">
<!--<< Swiper Bundle.css >>-->
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
<!--<< Nice Select.css >>-->
<link rel="stylesheet" href="assets/css/nice-select.css">
<!--<< Main.css >>-->
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body class="smooth-scroll-yes">
<!-- Preloader Start -->
<div id="preloader" class="preloader">
<div class="animation-preloader">
<div class="spinner">
</div>
<div class="txt-loading">
<span data-text-preloader="V" class="letters-loading">
V
</span>
<span data-text-preloader="I" class="letters-loading">
I
</span>
<span data-text-preloader="S" class="letters-loading">
S
</span>
<span data-text-preloader="A" class="letters-loading">
A
</span>
<span data-text-preloader="W" class="letters-loading">
W
</span>
<span data-text-preloader="A" class="letters-loading">
A
</span>
<span data-text-preloader="Y" class="letters-loading">
Y
</span>
</div>
<p class="text-center">Loading</p>
</div>
<div class="loader">
<div class="row">
<div class="col-3 loader-section section-left">
<div class="bg"></div>
</div>
<div class="col-3 loader-section section-left">
<div class="bg"></div>
</div>
<div class="col-3 loader-section section-right">
<div class="bg"></div>
</div>
<div class="col-3 loader-section section-right">
<div class="bg"></div>
</div>
</div>
</div>
</div>
<!-- GT Back To Top Start -->
<button id="back-top" class="back-to-top show">
<i class="fa-regular fa-arrow-up"></i>
</button>
<!-- GT MouseCursor Start -->
<div class="mouseCursor cursor-outer"></div>
<div class="mouseCursor cursor-inner"></div>
<!-- Header-Top-Section Start -->
<div class="header-top-section">
<div class="container-fluid">
<div class="header-top-wrapper">
<div class="header-left">
<ul class="list">
<li class="style-2">
<span>Help Line</span>
<i class="fa-solid fa-phone"></i>
<a href="tel:+093783575222">+09 378 357 5222</a>
</li>
<li>
<i class="fa-solid fa-location-dot"></i>
69 Street, 5th AvenueLA, United States
</li>
<li>
<i class="fa-solid fa-envelope"></i>
<a href="mailto:info@example.com">info@example.com</a>
</li>
</ul>
</div>
<div class="header-right">
<div class="flag-wrap">
<div class="flag">
<i class="fa-solid fa-globe"></i>
</div>
<div class="nice-select" tabindex="0">
<span class="current">
English
</span>
<ul class="list">
<li data-value="1" class="option selected focus">
English
</li>
<li data-value="1" class="option">
Bangla
</li>
<li data-value="1" class="option">
Hindi
</li>
</ul>
</div>
</div>
<div class="social-item">
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-youtube"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- Offcanvas Area Start -->
<div class="fix-area">
<div class="offcanvas__info">
<div class="offcanvas__wrapper">
<div class="offcanvas__content">
<div class="offcanvas__top mb-5 d-flex justify-content-between align-items-center">
<div class="offcanvas__logo">
<a href="index.html">
<img src="assets/img/logo/black-logo.svg" alt="logo-img">
</a>
</div>
<div class="offcanvas__close">
<button>
<i class="fas fa-times"></i>
</button>
</div>
</div>
<p class="text d-none d-xl-block">
Nullam dignissim, ante scelerisque the is euismod fermentum odio sem semper the is erat, a feugiat leo urna eget eros. Duis Aenean a imperdiet risus.
</p>
<div class="mobile-menu fix mb-3"></div>
<div class="offcanvas__contact d-xl-block">
<h4 class="d-xl-block">Contact Info</h4>
<ul class="d-xl-block">
<li class="d-flex align-items-center">
<div class="offcanvas__contact-icon">
<i class="fal fa-map-marker-alt"></i>
</div>
<div class="offcanvas__contact-text">
<a target="_blank" href="#">Main Street, Melbourne, Australia</a>
</div>
</li>
<li class="d-flex align-items-center">
<div class="offcanvas__contact-icon mr-15">
<i class="fal fa-envelope"></i>
</div>
<div class="offcanvas__contact-text">
<a href="mailto:info@example.com"><span class="mailto:info@example.com">info@example.com</span></a>
</div>
</li>
<li class="d-flex align-items-center">
<div class="offcanvas__contact-icon mr-15">
<i class="fal fa-clock"></i>
</div>
<div class="offcanvas__contact-text">
<a target="_blank" href="#">Mod-friday, 09am -05pm</a>
</div>
</li>
<li class="d-flex align-items-center">
<div class="offcanvas__contact-icon mr-15">
<i class="far fa-phone"></i>
</div>
<div class="offcanvas__contact-text">
<a href="tel:+11002345909">+11002345909</a>
</div>
</li>
</ul>
<div class="social-icon d-flex align-items-center">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="offcanvas__overlay"></div>
<!-- Header Section Start -->
<header id="header-sticky" class="header-1">
<div class="container-fluid">
<div class="mega-menu-wrapper">
<div class="header-main">
<div class="header-left">
<div class="logo">
<a href="index.html" class="header-logo-2">
<img src="assets/img/logo/black-logo.svg" alt="logo-img">
</a>
</div>
<div class="mean__menu-wrapper">
<div class="main-menu">
<nav id="mobile-menu">
<ul>
<li class="has-dropdown active menu-thumb">
<a href="index.html">
Home
</a>
<ul class="submenu has-homemenu">
<li>
<div class="homemenu-items">
<div class="homemenu">
<div class="homemenu-thumb">
<img src="assets/img/header/home-1.jpg" alt="img">
<div class="demo-button">
<a href="index.html" class="theme-btn">
Multi Page <i class="fa-solid fa-arrow-right"></i>
</a>
</div>
</div>
<div class="homemenu-content text-center">
<h4 class="homemenu-title">
Home 01
</h4>
</div>
</div>
<div class="homemenu">
<div class="homemenu-thumb mb-15">
<img src="assets/img/header/home-2.jpg" alt="img">
<div class="demo-button">
<a href="index-2.html" class="theme-btn">
Multi Page <i class="fa-solid fa-arrow-right"></i>
</a>
</div>
</div>
<div class="homemenu-content text-center">
<h4 class="homemenu-title">
Home 02
</h4>
</div>
</div>
<div class="homemenu">
<div class="homemenu-thumb mb-15">
<img src="assets/img/header/home-3.jpg" alt="img">
<div class="demo-button">
<a href="index-3.html" class="theme-btn">
Multi Page <i class="fa-solid fa-arrow-right"></i>
</a>
</div>
</div>
<div class="homemenu-content text-center">
<h4 class="homemenu-title">
Home 03
</h4>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="has-dropdown active d-xl-none">
<a href="index.html" class="border-none">
Home
</a>
<ul class="submenu">
<li><a href="index.html">Home 01</a></li>
<li><a href="index-2.html">Home 02</a></li>
<li><a href="index-3.html">Home 03</a></li>
</ul>
</li>
<li>
<a href="about.html">About Us</a>
</li>
<li class="has-dropdown">
<a href="news-details.html">
Pages
</a>
<ul class="submenu">
<li class="has-dropdown">
<a href="service-details.html">
Service
<i class="fas fa-angle-right"></i>
</a>
<ul class="submenu">
<li><a href="service.html">Service</a></li>
<li><a href="service-details.html">Service Details</a></li>
</ul>
</li>
<li class="has-dropdown">
<a href="project-details.html">
Country List
<i class="fas fa-angle-right"></i>
</a>
<ul class="submenu">
<li><a href="country-list.html">Country List</a></li>
<li><a href="country-details.html">Country Details</a></li>
</ul>
</li>
<li><a href="pricing.html">Our Pricing</a></li>
<li><a href="appointment.html">Appointment</a></li>
<li><a href="404.html">404 Page</a></li>
<li><a href="coming-soon.html">Coming Soon</a></li>
</ul>
</li>
<li>
<a href="country-details.html">
VISA
</a>
<ul class="submenu">
<li><a href="country-list.html">Visa List</a></li>
<li><a href="country-details.html">Visa Details</a></li>
</ul>
</li>
<li>
<a href="news-details.html">
Blog
</a>
<ul class="submenu">
<li><a href="news-grid.html">Blog Grid</a></li>
<li><a href="news.html">Blog Standard</a></li>
<li><a href="news-details.html">Blog Details</a></li>
</ul>
</li>
<li>
<a href="contact.html">Contact Us</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="header-right d-flex align-items-center mt-0">
<div class="header-call-item">
<a href="#" class="main-header__search search-toggler">
<i class="fa-regular fa-magnifying-glass"></i>
</a>
<a href="contact.html" class="theme-btn">
Apply now
<i class="fa-solid fa-arrow-right"></i>
</a>
<div class="header__hamburger my-auto">
<div class="sidebar__toggle">
<i class="fa-solid fa-bars-staggered"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Search Area Start -->
<div class="search-popup">
<div class="search-popup__overlay search-toggler"></div>
<div class="search-popup__content">
<form role="search" method="get" class="search-popup__form" action="#">
<input type="text" id="search" name="search" placeholder="Search Here...">
<button type="submit" aria-label="search submit" class="search-btn">
<span><i class="fa-regular fa-magnifying-glass"></i></span>
</button>
</form>
</div>
</div>
<!-- Breadcrumb-Wrapper Section Start -->
<section class="breadcrumb-wrapper fix bg-cover" style="background-image: url(assets/img/inner-page/breadcrumb.jpg);">
<div class="shape">
<img src="assets/img/inner-page/shape.png" alt="img">
</div>
<div class="container">
<div class="page-heading">
<h1 class="breadcrumb-title">About Us</h1>
<ul class="breadcrumb-list">
<li>
<a href="index.html">Home</a>
</li>
<li>
<i class="fa-solid fa-chevron-right"></i>
</li>
<li>
About Us
</li>
</ul>
</div>
</div>
</section>
<!--Choose-us Section3 Start -->
<section class="intro-section section-padding fix pb-0">
<div class="container">
<div class="section-title-area">
<div class="section-title">
<span class="sub-title-2 wow fadeInUp">Company Intro</span>
<h2 class="split-text-right split-text-in-right">
Building Pathways to Your Immigration Success
</h2>
</div>
<p>
We provide expert guidance, personalized solutions, and transparent processes to help you achieve your immigration goals. Our dedicated team ensures a smooth journey, building pathways to your international success.
</p>
</div>
<div class="row">
<div class="intro-image tp-clip-anim p-relative">
<img src="assets/img/inner-page/intro.jpg" alt="img" class="tp-anim-img" data-animate="true">
</div>
</div>
</div>
</section>
<!--About Section Start -->
<section class="about-section section-padding fix pb-0">
<div class="top-shape">
<img src="assets/img/home-1/about/globe.png" alt="img">
</div>
<div class="container">
<div class="about-wrapper">
<div class="row g-4">
<div class="col-lg-6">
<div class="about-image">
<img src="assets/img/home-1/about/about-1.jpg" alt="img" class="wow img-custom-anim-left">
<div class="about-image-2">
<img src="assets/img/home-1/about/about-02.jpg" alt="img" class="wow img-custom-anim-right">
</div>
<div class="bg-shape">
<img src="assets/img/home-1/about/Vector.png" alt="img">
</div>
<div class="plane-shape float-bob-y">
<img src="assets/img/home-1/about/plane.png" alt="img">
</div>
<div class="top-shape float-bob-y">
<img src="assets/img/home-1/about/shape.png" alt="img">
</div>
</div>
</div>
<div class="col-lg-6">
<div class="about-content">
<div class="section-title mb-0">
<span class="sub-title wow fadeInUp">About Our Consultancy</span>
<h2 class="split-text-right split-text-in-right">
Turning Study Abroad <span>Dreams</span> Into Reality
</h2>
</div>
<p class="text wow fadeInUp" data-wow-delay=".3s">
We guide students with expert visa consulting, ensuring a smooth process from application to approval, turning study abroad aspirations into life-changing opportunities for a brighter future.
</p>
<div class="about-item wow fadeInUp" data-wow-delay=".5s">
<div class="content">
<span><img src="assets/img/home-1/icon/01.svg" alt=""> Global Reach-</span>
<p>Expanding Opportunities Worldwide</p>
</div>
<div class="content">
<span><img src="assets/img/home-1/icon/01.svg" alt=""> Global Reach-</span>
<p>Expanding Opportunities Worldwide</p>
</div>
</div>
<ul class="list wow fadeInUp" data-wow-delay=".3s">
<li>
<i class="fa-solid fa-chevrons-right"></i>
Fastest Visa form processing with skilled immigration agents
</li>
<li>
<i class="fa-solid fa-chevrons-right"></i>
Partnership with International Educational Institutions
</li>
</ul>
<a href="about.html" class="theme-btn wow fadeInUp" data-wow-delay=".5s">
Get Started
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Choose-us-section-2 Start -->
<section class="choose-us-section-2 section-padding fix bg-cover" style="background-image: url(assets/img/home-2/feature/bg-shape.png);">
<div class="container">
<div class="choose-us-wrapper-2">
<div class="row g-4">
<div class="col-lg-6">
<div class="choose-us-image">
<img src="assets/img/home-2/feature/02.png" alt="img">
</div>
</div>
<div class="col-lg-6">
<div class="feature-content">
<div class="section-title mb-0">
<span class="sub-title-2 wow fadeInUp">Your Travel Made Easy</span>
<h2 class="split-text-right split-text-in-right">
Smooth Visa Journey Guaranteed
</h2>
</div>
<p class="text">
We provide expert guidance for every visa application, ensuring smooth processing, personalized support, and reliable assistance
</p>
<div class="choose-us-box">
<div class="icon">
<img src="assets/img/home-2/icon/01.png" alt="img">
</div>
<div class="content">
<h5>Expert Consultants</h5>
<p>
Skilled and knowledgeable visa advisors. Skilled and knowled geable visa advisors.
</p>
</div>
</div>
<div class="choose-us-box">
<div class="icon">
<img src="assets/img/home-2/icon/01.png" alt="img">
</div>
<div class="content">
<h5>Personalized Support</h5>
<p>
Skilled and knowledgeable visa advisors. Skilled and knowled geable visa advisors.
</p>
</div>
</div>
<div class="choose-us-box">
<div class="icon">
<img src="assets/img/home-2/icon/01.png" alt="img">
</div>
<div class="content">
<h5>Transparent Process</h5>
<p>
Skilled and knowledgeable visa advisors. Skilled and knowled geable visa advisors.
</p>
</div>
</div>
<a href="contact.html" class="theme-btn">
Get Started Today
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--News Section Start -->
<section class="news-section section-padding fix pt-0">
<div class="container">
<div class="section-title-area">
<div class="section-title">
<span class="sub-title">Visa Tips & Guides</span>
<h2 class="split-text-right split-text-in-right">
Latest Insights & Updates
</h2>
</div>
<a href="news.html" class="theme-btn">
view all articies
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
<div class="row">
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="news-card-item">
<div class="news-image">
<img src="assets/img/home-1/news/news-1.jpg" alt="img">
<span>Student Visa</span>
<div class="news-layer-wrapper">
<div class="news-layer-image" style="background-image: url('assets/img/home-1/news/news-1.jpg');"></div>
<div class="news-layer-image" style="background-image: url('assets/img/home-1/news/news-1.jpg');"></div>
<div class="news-layer-image" style="background-image: url('assets/img/home-1/news/news-1.jpg');"></div>
<div class="news-layer-image" style="background-image: url('assets/img/home-1/news/news-1.jpg');"></div>
</div>
</div>
<div class="news-content">
<div class="list">
<span>Comment (08)</span>
<span>_ 20 August ,2025</span>
</div>
<h3>
<a href="news-details.html">
Step-by-Step Guide to Applying for a Student Visa
</a>
</h3>
<div class="news-bottom">
<div class="info-item">
<img src="assets/img/home-1/news/client.png" alt="img">
<span>By Sohel</span>
</div>
<a href="news-details.html" class="link-btn">View Articles<i class="fa-solid fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="news-card-item">
<div class="news-image">
<img src="assets/img/home-1/news/news-2.jpg" alt="img">
<span>IELTS / TOEFL</span>
<div class="news-layer-wrapper">
<div class="news-layer-image" style="background-image: url('assets/img/home-1/news/news-2.jpg');"></div>
<div class="news-layer-image" style="background-image: url('assets/img/home-1/news/news-2.jpg');"></div>
<div class="news-layer-image" style="background-image: url('assets/img/home-1/news/news-2.jpg');"></div>
<div class="news-layer-image" style="background-image: url('assets/img/home-1/news/news-2.jpg');"></div>
</div>
</div>
<div class="news-content">
<div class="list">
<span>Comment (08)</span>
<span>_ 20 August ,2025</span>
</div>
<h3>
<a href="news-details.html">
Tips to Prepare Financial Documents for Visa Approval
</a>
</h3>
<div class="news-bottom">
<div class="info-item">
<img src="assets/img/home-1/news/client.png" alt="img">
<span>By Sohel</span>
</div>
<a href="news-details.html" class="link-btn">View Articles<i class="fa-solid fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="news-card-item">
<div class="news-image">
<img src="assets/img/home-1/news/news-3.jpg" alt="img">
<span>Study Abroad</span>
<div class="news-layer-wrapper">
<div class="news-layer-image" style="background-image: url('assets/img/home-1/news/news-3.jpg');"></div>
<div class="news-layer-image" style="background-image: url('assets/img/home-1/news/news-3.jpg');"></div>
<div class="news-layer-image" style="background-image: url('assets/img/home-1/news/news-3.jpg');"></div>
<div class="news-layer-image" style="background-image: url('assets/img/home-1/news/news-3.jpg');"></div>
</div>
</div>
<div class="news-content">
<div class="list">
<span>Comment (08)</span>
<span>_ 20 August ,2025</span>
</div>
<h3>
<a href="news-details.html">
Post-Arrival Guide What Every Student Should Know
</a>
</h3>
<div class="news-bottom">
<div class="info-item">
<img src="assets/img/home-1/news/client.png" alt="img">
<span>By Sohel</span>
</div>
<a href="news-details.html" class="link-btn">View Articles<i class="fa-solid fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Footer Section Start -->
<footer class="footer-section fix bg-cover" style="background-image: url(assets/img/home-1/footer-bg.jpg);">
<div class="container">
<div class="footer-wrapper">
<div class="row">
<div class="col-xl-12">
<div class="footer-item">
<h2>
<a href="tel:+16336547896">+163 3654 7896</a>
</h2>
<h2 class="text">69 Street, 5th AvenueLA, United States</h2>
<div class="footer-list-item">
<a href="index.html">
<img src="assets/img/logo/white-logo.svg" alt="img">
</a>
<ul class="footer-list">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About Us</a>
</li>
<li>
<a href="country-details.html">Visa</a>
</li>
<li>
<a href="news-details.html">Pages</a>
</li>
<li>
<a href="news.html">Article</a>
</li>
<li>
<a href="contact.html">Contact Us</a>
</li>
</ul>
<div class="social-icon">
<a href="#"><i class="fa-brands fa-twitter"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
<a href="#"><i class="fa-brands fa-youtube"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<!--Footer-Bottom Section Start -->
<div class="footer-bottom">
<div class="container">
<div class="footer-wrapper">
<p>
Copyright© <span>GRAMENTHEME</span> All Rights Reserved.
</p>
<ul class="bottom-list">
<li>
<a href="contact.html">Terms & Conditions</a>
</li>
<li>
<a href="contact.html">Privacy Policy</a>
</li>
<li>
<a href="contact.html">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
<!--<< All JS Plugins >>-->
<script src="assets/js/jquery-3.7.1.min.js"></script>
<!--<< Viewport Js >>-->
<script src="assets/js/viewport.jquery.js"></script>
<!--<< Bootstrap Js >>-->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<!--<< nice-selec Js >>-->
<script src="assets/js/jquery.nice-select.min.js"></script>
<!--<< Waypoints Js >>-->
<script src="assets/js/jquery.waypoints.js"></script>
<!--<< Odometer Js >>-->
<script src="assets/js/odometer.min.js"></script>
<!--<< Swiper Slider Js >>-->
<script src="assets/js/swiper-bundle.min.js"></script>
<!--<< MeanMenu Js >>-->
<script src="assets/js/jquery.meanmenu.min.js"></script>
<!--<< Magnific Popup Js >>-->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!--<< Wow Animation Js >>-->
<script src="assets/js/wow.min.js"></script>
<!--<< circle-progress Js >>-->
<script src="assets/js/circle-progress.js"></script>
<!--<< Wow gsap Js >>-->
<script src="assets/js/gsap.js"></script>
<!--<< Wow lenis.min. Js >>-->
<script src="assets/js/lenis.min.js"></script>
<!--<< Wow ScrollTrigger.min. Js >>-->
<script src="assets/js/ScrollTrigger.min.js"></script>
<!--<< Wow SplitText.min. Js >>-->
<script src="assets/js/SplitText.min.js"></script>
<!--<< Main.js >>-->
<script src="assets/js/main.js"></script>
</body>
</html>

1261
docs/example/index.html Normal file

File diff suppressed because it is too large Load Diff