RouteX - Immigration and Visa Consulting HTML5 Template

RouteX - Immigration and Visa Consulting HTML5 Template

Created: 30 May, 2024

24/7 Support: Send us a message

Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to Support

Template Installation

  1. FTP Upload:
    • Open up your FTP manager and connect to your hosting
    • Browse to required directory (Normally public_html)
    • Upload the files inside RouteX-html folder.

Pages

    • index.html 1st Home Page
    • index-2.html 2nd Home Page
    • index-3.html 3rd Home Page
    • 404.html 404 Page
    • about-us.html About-us Page
    • blog-details.html Blog-details Page
    • blog.html Blog Page
    • coaching-details.html Coaching-details Page
    • coaching.html Coaching Page
    • contact.html Contact Page
    • countrie-details.html Countrie-details Page
    • countrie.html Countrie Page
    • faq.html Faq Page
    • gallery.html Gallery Page
    • mail.php mail.php ile Page
    • pricing.html Pricing Page
    • story-details.html Story-details Page
    • story.html Story Page
    • team-details.html Team-details Page
    • team.html Team Page
    • visa-details.html Visa-details Page
    • visa-offers.html Visa-offers Page
    • visa.html Visa Page

img not found

Fonts

    <!-- Google Fonts
    ============================================ -->
    Plus Jakarta Sans - <link href='https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap rel='stylesheet' type='text/css'>

Source File (CSS)

    <!-- ===========  All Stylesheet  ================= -->

    <link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/vendor/animate.min.css">
    <link rel="stylesheet" href="assets/css/vendor/odometer.min.css">
    <link rel="stylesheet" href="assets/css/plugins/swiper.min.css">
    <link rel="stylesheet" href="assets/css/vendor/magnific-popup.css">
    <link rel="stylesheet" href="assets/css/vendor/fontawesome-pro.css">
    <link rel="stylesheet" href="assets/css/vendor/spacing.css">
    <link rel="stylesheet" href="assets/css/vendor/custom-font.css">
    <link rel="stylesheet" href="assets/css/main.css">

Source File (JS)

    <!-- All JS Plugins -->

        <!-- JS here -->
		<script src="assets/js/vendor/jquery-3.6.0.min.js"></script>
		<script src="assets/js/plugins/waypoints.min.js"></script>
		<script src="assets/js/vendor/bootstrap.bundle.min.js"></script>
		<script src="assets/js/plugins/meanmenu.min.js"></script>
		<script src="assets/js/plugins/swiper.min.js"></script>
		<script src="assets/js/plugins/odometer.min.js"></script>
		<script src="assets/js/plugins/wow.js"></script>
		<script src="assets/js/vendor/magnific-popup.min.js"></script>
		<script src="assets/js/vendor/type.js"></script>
		<script src="assets/js/vendor/vanilla-tilt.js"></script>
		<script src="assets/js/vendor/odometer.min.js"></script>
		<script src="assets/js/vendor/jquery-ui.min.js"></script>
		<script src="assets/js/plugins/parallax-scroll.js"></script>
		<script src="assets/js/plugins/jquery.countdown.min.js"></script>
		<script src="assets/js/vendor/smooth-scroll.js"></script>
		<script src="assets/js/plugins/isotope-docs.min.js"></script>
		<script src="assets/js/vendor/ajax-form.js"></script>
		<script src="assets/js/main.js"></script>

Customization

How to Change Logo

How to Change Title

How to Change Favicon

How to Change Main home banner

How to Change Page Banner

How to Change Blog Section Item

How to Change Mail Address with Your's - Open mail.php file and edit.

How to Change Copyright

SCSS Structure

CSS Structure

I'm using One SCSS files in this template. You change the SCSS Code of style.scss file

	/*-----------------------------------------------------------------------------------

    Template Name: RouteX - Immigration and Visa Consulting HTML5 Template
    Author: RRDevs
    Support: https://support.rrdevs.net
    Description: RouteX - Immigration and Visa Consulting HTML5 Template.
    Version: 1.0
    Developer: Soukhin khan (https://github.com/Soukhinkhan)

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

	-----------------
    01. THEME CSS
	-----------------
		1.1 @forward 'colors';
		1.2 @forward 'mixins';
		1.3 @forward 'extends';
		1.4 @forward 'breakpoints';
		1.5 @forward 'typography';
		1.6 @forward 'root';
		1.7 @forward 'common';
		1.8 @forward 'spacing';
		1 index

	-----------------
    02. COMPONENTS CSS
	-----------------
		2.1 @forward 'color';
		2.2 @forward 'background';
		2.3 @forward 'buttons';
		2.4 @forward 'offcanvas';
		2.5 @forward 'section-title';
		2.6 @forward 'breadcrumb';
		2.7 @forward 'lightmode';
		2.8 @forward 'carousel';
		2.9 @forward 'backtotop';
		2.9 @forward 'animation';
		2.9 @forward 'preloader';
		2.10 @forward 'rangeSlider';
		2 index

	-----------------
    03. HEADER CSS
	-----------------
		3.1 @forward 'header-common';
		3.2 @forward 'header-1';
		3.3 @forward 'header-2';
		3.4 @forward 'header-3';
		3 index

    ---------------------------------
	04. MENU CSS
	---------------------------------
		4.1 @forward 'menu';
		4.2 @forward 'meanmenu';
		4 index

	---------------------------------
	05. BLOG CSS
	---------------------------------
		5.1 @forward 'blog';
		5.2 @forward 'postbox';
		5.3 @forward 'sidebar';
		5.4 @forward 'blog-details';
		5 index

	---------------------------------
	06. FOOTER CSS
	---------------------------------
		6.1 @forward 'footer';
		6.3 @forward 'footer-2';
		6.4 @forward 'footer-3';
		6.2 @forward 'footer-copyright';
		6 index

	---------------------------------
	07. CTA CSS
	---------------------------------
		7.1 @forward 'cta';
		7 index

	---------------------------------
	08. BRAND CSS
	---------------------------------
		8.1 @forward 'brand';
		8 index

	---------------------------------
	09. Banner CSS
	---------------------------------
		9.1 @forward 'banner-1';
		9.2 @forward 'banner-2';
		9.3 @forward 'banner-3';
		9 index

	---------------------------------
	10. PAGES CSS
	---------------------------------
		10.1 @forward './404';
		10.2 @forward './faq';
		10.3 @forward './feedback';
		10.4 @forward './portfolio';
		10.5 @forward './pricing';
		10.6 @forward './service';
		10.7 @forward './about';
		10.8 @forward './contact-us';
		10.9 @forward './service-details';
		10.10 @forward './project-details';
		10.11 @forward './team-details';
		10.12 @forward './home1';
		10.13 @forward './home2';
		10.14 @forward './home3';
		10 index
 */

*Note: Responsive css in assests/css/main.css.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

Home Page Hero Banner section CSS - find and change it on _banner-1.scss from "assets/scss/layout/banner/banner-1.scss" folder

	


/*----------------------------------------*/
/*  9.1 banner Style 1
/*----------------------------------------*/

// Banner style
.banner-home{
	border-radius: 50px;
	margin-left: 15px;
	margin-right: 15px;
	overflow: hidden;
	&__all-shape{
		.left-tower{
			position: absolute;
			left: -30px;
			bottom: 0;
			@media(max-width: 1780px){
				display: none;
			}

			img{
				width: 100%;
				height: auto;
			}
		}
	}
	&__content{
		h1{
			color: var(--rr-common-white);
			font-family: var(--rr-ff-heading);
			font-size: var(--rr-fs-h1);
			font-weight: var(--rr-fw-bold);
			line-height: var(--rr-lh-h1);

			
			@media #{$xl} {
				font-size: 65px;
				line-height:70px;
			}
			@media #{$lg} {
				font-size: 58px;
				line-height:78px;
			  }
			  @media #{$md} {
				font-size: 48px;
				line-height:60px;
			  }
			  @media #{$sm} {
				font-size: 40px;
				line-height: 52px;
			  }
			  @media #{$xs} {
				font-size: 30px;
				line-height: 42px;
			  }
			  @media #{$xxs} {
				font-size: 27px;
				line-height: 37px;
			  }
		}

		.description{

			p{
				max-width: 624px;
				color: var(--rr-text-body);
				font-family: var(--rr-ff-body);
				font-weight: var(--rr-fw-regular);
				line-height: var(--rr-lh-h6);
				font-size: 20px;
				margin-bottom: 0;
			}
		}
	}

	&__btn__wrapper{
		row-gap: 20px;

	& .banner-video-button{
			align-items: center;
            gap: 30px;
			height: 50px;
			width: 50px;
			background: #1c5a47;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			padding-top: 6px;
			padding-left: 2px;
			margin-left: 30px;
			margin-right: 10px;
		}

	}

	.video-text{
		color: var(--rr-common-white);
		font-weight: var(--rr-fw-sbold);
		font-size: var(--rr-fs-h6);
		line-height: var(--rr-lh-h6);
		display: flex;
		justify-content: center;
		align-items: center;
		font-style: normal;
	}
	&__shape{
		max-width: 645px;
		
		@media #{$sm, $xs} {
			top: 420px;
		}
		@media #{$xs} {
			top: 350px;
		}
		@media #{$xxs} {
			top: 245px;
		}
		@media #{$mxm} {
			top: 165px;
		}
		@media #{$mxs} {
			top: 100px;
		}
		
		.ball-shape{
			position: absolute;
			bottom: -530px;

			@media(max-width: 895px){
				bottom: -360px;
			}
		}
		.man-img{
			position: absolute;
			bottom: -375px;
			left: -30px;
			z-index: 1;

			@media(max-width: 895px){
				bottom: -270px;
			}
		
		}
		.right-tower{
			position: absolute;
			right: -100px;
			top: -160px;
			transform: rotate(3deg);

			@media(max-width: 895px){
				right: -120px;
				top: -215px;
			}
		}
	}

	& .padding-space{
		padding: 235px 70px 194px 0px;

		@media #{$xl} {
			padding: 200px 0px 194px 0px;
		}
		@media #{$lg} {
			padding: 130px 0px 194px 0px;
		}
		@media #{$md} {
			padding: 120px 0px 105px 0px;
		}
		@media #{$sm, $xs} {
			padding: 135px 0px 685px 0px;
		}
		@media #{$xs} {
			padding: 75px 0px 515px 0px;
		}
		@media #{$mxm} {
			padding: 50px 0px 435px 0px;
		}
		@media #{$mxs} {
			padding: 50px 0px 370px 0px;
		}

	}
}

Credits And Sources

Thanks

Once again thank you for purchasing one of our Templates

Best Regards

RRDevs