## FreeBuild - Construction HTML Template

Created: 25 May, 2019

24/7 Support: Send us a message

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

### 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 freebuild folder.

### Pages

- index.html is for default home page
- index-2.html is for 2nd home page
- index-3.html is for 3rd home page
- about.html is for about page of template
- contact.html is for contact page of template
- portfolio.html is for portfolio page of template
- single-portfolio.html is for single portfolio page of template
- services.html is for services page of template
- service-details.html is for single service page of template
- testimonials.html is for testimonials page of template
- blog.html is for blog page of template
- shop.html is for shop(woocommerce) page of template
- single-blog.html is for single blog page of template

### Fonts

    	<!-- Google Fonts
    	============================================ -->
    	 Yantramanav  - <link href='https://fonts.google.com/specimen/Yantramanav' rel='stylesheet' type='text/css'>

### Source File (CSS)

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

    	<!-- fontawesome css plugins
    	============================================ -->
    	<link rel="stylesheet" href="assets/css/font-awesome.min.css">

    	<!-- animate CSS
    	============================================ -->
    	<link rel="stylesheet" href="assets/css/animate.css">

            <!-- default CSS
            ============================================ -->
            <link rel="stylesheet" href="assets/css/default.css">

    	<!-- magnific-popup CSS
    	============================================ -->
    	<link rel="stylesheet" href="assets/css/magnific-popup.css">

    	<!-- Owl Carousel CSS
    	============================================ -->
    	<link rel="stylesheet" href="assets/css/owl.carousel.min.css">

            <!-- Owl Carousel CSS
            ============================================ -->
            <link rel="stylesheet" href="assets/css/owl.theme.css">

    	<!-- Bootstrap CSS
    	============================================ -->
    	<link href="assets/css/bootstrap.min.css" rel="stylesheet">

    	<!-- Style CSS
    	============================================ -->
    	<link rel="stylesheet" href="style.css">

    	<!-- Responsive CSS
    	============================================ -->
    	<link rel="stylesheet" href="assets/css/responsive.css">

### Source File (JS)

    		<!-- All JS Plugins -->

    		<!-- jQuery
    		============================================ -->
    		<script src="assets/js/jquery-1.12.4.min.js"></script>

    		<!-- Bootstrap
    		============================================ -->
    		<script src="assets/js/bootstrap.min.js"></script>

    		<!-- Others jQuery Plugins
    		============================================ -->
    		<script src="assets/js/jquery.easing.1.3.js"></script>
    		<script src="assets/js/popper.min.js"></script>
    		<script src="assets/js/isotope.pkgd.min.js"></script>
    		<script src="assets/js/imageload.min.js"></script>
    		<script src="assets/js/scrollUp.min.js"></script>
    		<script src="assets/js/owl.carousel.min.js"></script>
    		<script src="assets/js/magnific-popup.min.js"></script>
    		<script src="assets/js/waypoint.js"></script>
    		<script src="assets/js/counterup.min.js"></script>
    		<script src="assets/js/wow.min.js"></script>
    		<script src="assets/js/equalheights.min.js"></script>
    		<script src="assets/js/ajax-mail.js"></script>
    		<script src="assets/js/sticky.js"></script>
                    <script src="assets/js/meanmenu.min.js"></script>

    		<!-- Active JS
    		============================================ -->
    		<script src="assets/js/active.js"></script>

### Customization

#### How to Change Logo

#### How to Change Favicon

#### How to Change Add Page Titile Background & Breadcrumb

#### How to Change Section Title

#### How to Change Hero - 1 Content

#### How to Change Hero - 2 Content

#### How to Change Hero - 3 Content

#### How to Change Social Links

#### How to Change Price Table

#### How to Change Count Up

#### How to Change Client Feedback

#### How to Change Mail with Your Email Address (mail.php)

#### How to Change Single Blog - Blog

#### How to Change Sidebar - Blog

#### How to Change Copyright

#### CSS Structure

I'm using One CSS files in this theme. You change the CSS Code of style.css file

    =================================
    |***  Table of contents:   ***|
    =================================

    1. General styles
    2. Typography
    3. Helpers
    4. Preloader
    5. Go up button
    6. Header and navigation
    7. Welcome Hero Section
    8. About Me
    9. Shop
    10. Services
    11. Facts - CountToUp
    12. Portfolio
    13. Video Section
    14. Testimonials
    15. Clients Logo Carousel
    16. Blog Section
    17. Contact Form
    19. Contact Information & Address
    20. Social Network Icons Button
    21. Footer
    21. Blog - Single Blog Post Page

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.

#### Change the Hero Section CSS - find and change it on style.css

    .single-hero-slide {
        position: relative;
        overflow: hidden;
        height: 690px;
        background-color: #f2f3f5;
    }

#### Change section padding CSS - find and change it on style.css

      .section-padding {
      padding: 120px 0px;
    }

#### JavaScript Customization

Change Fun fact - count up init Section with your's

    	 /*==========================
           Count up init
        ============================*/
        $('.single-countup span').counterUp({
            delay: 20,
            time: 2000
        });

Change Hero Slider with your's choice

        /*==================================
         # SLide Item Carousel
         ==================================*/
        $('.hero-slide-active').owlCarousel({
            items: 1,
            autoplay: true,
            loop: true,
            margin: 0,
            nav: false,
            dots: false,
        });

        /*==================================
         # home page one - slide Item Carousel
         ==================================*/
        $('.hero-slides, .hero-slider').owlCarousel({
            items: 1,
            autoplay: true,
            loop: true,
            margin: 0,
            nav: false,
            dots: false,
        });

#### Credits And Sources

- Bootstrap
- jQuery Library
- Font Awesome
- Google Fonts
- Magnific Popup
- WOW JS
- YTPlayer
- Isotope Js
- Smooth scroll Js
- Owl Carousel
- Counter Up
- Waypoints
- Animate.css
- Themify Icons
- Unsplash Images

### Thanks

#### Once again thank you for purchasing one of our Templates

## Best Regards

### ModinaTheme