Main File Structure

All the file are well organized, its so easy to work with the template.
1. Unzip the files.
2. Open "Main File" folder.
You will find the four folder arrange by different header version file on the root that will be edited.
Also you will see 4 directories, css, js, fonts, img and images.
In the first folder Content you will find style.css and other styling files the all the other files expect the htmls.
Js folder contain only the jquery library. Fonts folder contain essetial font files for fonts.

                
                    GFolio-html/
                    ├── css
                    ├── fonts
                    ├── images
                    ├── js
                    │── vendor
                    ├── index.html
                    ├── blog-details.html
                
                

HTML Structure

	<!--Main-Menu Area Start-->
	<div class="mainmenu-area">
		<div class="container">
			<div class="row">
				<div class="col-lg-12">                 
					<nav class="navbar navbar-expand-lg navbar-light">
						<a class="navbar-brand" href="index.html">
							<img src="assets/images/logo.png" alt="">
						</a>
						<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_menu" aria-controls="main_menu"
							aria-expanded="false" aria-label="Toggle navigation">
							<span class="navbar-toggler-icon"></span>
						</button>
						<div class="collapse navbar-collapse fixed-height" id="main_menu">
							<ul class="navbar-nav ml-auto">
						
								<li class="nav-item">
									<a class="nav-link" href="#features">Feature
											<div class="mr-hover-effect"></div></a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="#important-features">Overview
											<div class="mr-hover-effect"></div></a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="#pricing">Pricing
											<div class="mr-hover-effect"></div></a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="#faq-area">FAQ
											<div class="mr-hover-effect"></div></a>
								</li>
								<li class="nav-item dropdown">
									<a class="nav-link dropdown-toggle" href="#blog-section" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
										Blog
										<div class="mr-hover-effect"></div>
									</a>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="blog.html">Blog Grid</a>
										<a class="dropdown-item" href="blog-with-sidebar.html">Blog With Sidebar</a>
										<a class="dropdown-item" href="blog-details.html">Blog Details</a>
									</div>
								</li>
							</ul>
							<a href="#" class="base-btn2"> Download</a>
						</div>
					</nav>
				</div>
			</div>
		</div>
	</div>
	<!--Main-Menu Area Start-->

CSS Structure

				

                    /* Section Heading Css */
                    .section-heading {
                      text-align: center; }
                      .section-heading .subtitle {
                        font-size: 28px;
                        line-height: 38px;
                        font-weight: 600;
                        color: #2364d2;
                        margin-bottom: 11px; }
                        .section-heading .subtitle.extra-padding {
                          margin-bottom: 17px; }
                      .section-heading .title {
                        font-size: 50px;
                        line-height: 60px;
                        font-weight: 700;
                        color: #1e375a;
                        margin-bottom: 10px; }
                        .section-heading .title.extra-padding {
                          margin-bottom: 20px; }
                      .section-heading .text {
                        font-size: 24px;
                        line-height: 36px;
                        font-weight: 300; }
                    
                    /* Preloader Css */
                    .preloader {
                      position: fixed;
                      top: 0;
                      left: 0;
                      width: 100%;
                      height: 100%;
                      background-color: #fff;
                      z-index: 9999999;
                      display: -webkit-box;
                      display: -ms-flexbox;
                      display: flex;
                      -webkit-box-orient: vertical;
                      -webkit-box-direction: normal;
                      -ms-flex-direction: column;
                      flex-direction: column;
                      -webkit-box-align: center;
                      -ms-flex-align: center;
                      align-items: center;
                      -webkit-box-pack: center;
                      -ms-flex-pack: center;
                      justify-content: center; }
                      .preloader.hide {
                        opacity: 0;
                        display: none; }
                    
                    .loader {
                      position: relative;
                      width: 60px;
                      height: 60px;
                      border-radius: 50%;
                      margin: 75px;
                      display: inline-block;
                      vertical-align: middle; }
                    
                    .loader-1 .loader-outter {
                      position: absolute;
                      border: 4px solid #2364d2;
                      border-left-color: transparent;
                      border-bottom: 0;
                      width: 100%;
                      height: 100%;
                      border-radius: 50%;
                      -webkit-animation: loader-1-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
                      animation: loader-1-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite; }
                    
                    .loader-1 .loader-inner {
                      position: absolute;
                      border: 4px solid #2364d2;
                      border-radius: 50%;
                      width: 40px;
                      height: 40px;
                      left: calc(50% - 20px);
                      top: calc(50% - 20px);
                      border-right: 0;
                      border-top-color: transparent;
                      -webkit-animation: loader-1-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
                      animation: loader-1-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite; }
                    
                    /* bottomtotop Css */
                    .bottomtotop i {
                      width: 50px;
                      height: 50px;
                      line-height: 50px;
                      position: fixed;
                      font-size: 14px;
                      text-align: center;
                      border-radius: 50%;
                      color: #fff;
                      cursor: pointer;
                      -webkit-transform: rotate(-90deg);
                      -ms-transform: rotate(-90deg);
                      transform: rotate(-90deg);
                      bottom: 15px;
                      right: 15px;
                      -webkit-box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.2);
                      box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.2);
                      z-index: 999;
                      -webkit-transition: all linear 0.3s;
                      -o-transition: all linear 0.3s;
                      transition: all linear 0.3s;
                      background: #2364d2; }
                    
                    /* Breadcrumb Area Start */
                    .breadcrumb-area {
                      padding: 215px 0px 115px;
                      background: url(../images/bc-bg-2.jpg);
                      background-repeat: no-repeat !important;
                      background-position: center !important;
                      background-size: cover !important; }
                      .breadcrumb-area.extra-padding {
                        padding: 215px 0px 171px; }
                      .breadcrumb-area .title {
                        font-size: 50px;
                        line-height: 60px;
                        font-weight: 600;
                        margin-bottom: 15px;
                        color: #fff; }
                        .breadcrumb-area .title.extra-padding {
                          margin-bottom: 26px; }
                      .breadcrumb-area .breadcrumb-list li {
                        display: inline-block; }
                        .breadcrumb-area .breadcrumb-list li span {
                          margin: 0px 7px;
                          color: #fff; }
                        .breadcrumb-area .breadcrumb-list li a {
                          font-size: 16px;
                          -webkit-transition: all 0.3s ease-in;
                          -o-transition: all 0.3s ease-in;
                          transition: all 0.3s ease-in;
                          color: #fff; }
                          .breadcrumb-area .breadcrumb-list li a:hover {
                            color: #f1f1f1; }
                          .breadcrumb-area .breadcrumb-list li a.active {
                            color: #f1f1f1; }

					
				

JavaScript Structure

					

                        // Hero Area Slider
                        var $review_slider = $('.review-slider');
                        $review_slider.owlCarousel({
                            loop: true,
                            navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
                            nav: true,
                            dots: false,
                            autoplay: false,
                            margin: 30,
                            autoplayTimeout: 6000,
                            smartSpeed: 1000,
                            responsive: {
                                0: {
                                    items: 1
                                },
                                500: {
                                    items: 1
                                },
                                768: {
                                    items: 2
                                },
                                992: {
                                    items: 3
                                },
                                1200: {
                                    items: 3
                                },
                                1920: {
                                    items: 3
                                }
                            }
                        });
                    
				
			

Sources & Credits

• Fonts Google Fonts
• Icons
  • FontAwesome
• Images GoogleGoogle

Supports

Thank you for reading the documentaion. If you still have any question or any problem, please contact with us. We will give you best support. Thanks.

Sliders Structure

    
    <!-- code will be here -->