Bildhub
Bildhub - Construction HTML Template
- Created: 02/01/2021
- Latest Update: 28/05/2021
- by: XpressBuddy
- email: wasimmia.info@gmail.com
Installation
Follow the steps below to get started with Bildhub - Construction HTML Template :
-
Open the
Package/BildhubFolder to find all the Templates Files - You will need to Upload these files to your Web Server using FTP or cPanle in order to use it on your Website.
-
Make sure you have upload the required files and folders listed below:
-
Bildhub HTML/css, js, fonts- Stylesheets, JavaScript, Fonts etc Folder -
Bildhub HTML/img- Images Folder -
Bildhub HTML/index.html- Index File/Homepage
-
- You're now ready to go..! Start adding your Content and show off your Brand New Website.
Features At A Glance
- HTML5 & CSS3 & jQuery
- Modern And Creative Design
- Universal menu
- 100% Responsive
- Well documented
- Bootstrap 4.x
- Fontawesome Used
- Google Font Used
- Fixed Menu
- Google Map
- Eye Catching Design
- W3C Validate Code
HTML Structure
Bildhub has follows a simple coding structure. here is the sample:
<!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Bildhub - Construction HTML Template</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="site.webmanifest"> <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"> <!-- Place favicon.ico in the root directory --> <!-- CSS here --> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/owl.carousel.min.css"> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <link rel="stylesheet" href="css/themify-icons.css"> <link rel="stylesheet" href="css/animate.min.css"> <link rel="stylesheet" href="css/magnific-popup.css"> <link rel="stylesheet" href="css/meanmenu.css"> <link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/default.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <!-- preloader start --> <div id="preloader"> <div class="preloader"> <span></span> <span></span> </div> </div> <!-- preloader end --> <!-- header start --> <header> <div class="header-top d-none d-lg-block"> <div class="container"> <div class="row"> <div class="col-12"> <ul class="left"> <li><span><i class="far fa-clock"></i></span> 9:30am - 6:30pm Mon - Sun</li> <li><span><i class="fas fa-phone-alt"></i></span> +800-123-4567 6587</li> <li><span><i class="fas fa-map-marker-alt"></i></span> Anmoore Road Brooklyn, NY 230</li> </ul> <ul class="right"> <li><a href="#"><i class="fab fa-facebook-messenger"></i></a></li> <li><a href="#"><i class="fab fa-twitter"></i></a></li> <li><a href="#"><i class="fab fa-vimeo-v"></i></a></li> <li><a href="#"><i class="fab fa-skype"></i></a></li> <li><a href="#"><i class="fas fa-rss"></i></a></li> </ul> </div> </div> </div> </div> <div class="header-bottom-area"> <div class="container"> <div class="row align-items-center"> <div class="col-xl-2 col-lg-2"> <div class="logo logo-2"> <a href="index.html"><img src="img/logo/logo.png" alt="logo_not_found"></a> </div> </div> <div class="col-xl-10 col-lg-10"> <div class="header-button d-none d-lg-block f-right"> <a class="thm-btn" href="#">Get a quote</a> </div> <div class="main-menu f-right"> <nav id="mobile-menu"> <ul> <li><a href="index.html">Home +</a> <ul class="submenu"> <li><a href="index.html">Home Style 1</a></li> <li><a href="index-2.html">Home Style 2</a></li> </ul> </li> <li><a href="about.html">About</a></li> <li><a href="services.html">Services +</a> <ul class="submenu"> <li><a href="services.html">Service</a></li> <li><a href="services-details.html">Service Details</a></li> </ul> </li> <li><a href="project.html">Project +</a> <ul class="submenu"> <li><a href="project.html">Project</a></li> <li><a href="project-details.html">Project Details</a></li> </ul> </li> <li><a href="#">Pages +</a> <ul class="submenu"> <li><a href="about.html">About</a></li> <li><a href="services.html">Services</a></li> <li><a href="services-details.html">Services Details</a></li> <li><a href="process.html">Process</a></li> <li><a href="project.html">Project</a></li> <li><a href="project-details.html">Project Details</a></li> <li><a href="pricing.html">Pricing</a></li> <li><a href="team.html">Team</a></li> <li><a href="faq.html">FAQ</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="blog-details.html">Blog Details</a></li> <li><a href="contact.html">Contact</a></li> </ul> </li> <li><a href="blog.html">Blog +</a> <ul class="submenu"> <li><a href="blog.html">Blog</a></li> <li><a href="blog-details.html">Blog Details</a></li> </ul> </li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </div> <div class="mobile-menu"></div> </div> </div> </div> </div> </header> <!-- header end --> <main> <!-- slider start --> <section class="slider-area"> <div class="slider-active"> <div class="single-slider slider-height pos-rel d-flex align-items-center" data-background="img/bg/slider-bg-01.jpg"> <div class="container"> <div class="row"> <div class="col-xl-7 col-lg-8"> <div class="slider-content"> <h5 data-animation="fadeInUp" data-delay=".2s">General Contracting</h5> <h1 data-animation="fadeInUp" data-delay=".4s">Build everything you needs<span>.</span></h1> <p data-animation="fadeInUp" data-delay=".6s">Rorem ipsum dolor sit</p> <div class="slider-btn"> <a data-animation="fadeInLeft" data-delay=".6s" class="thm-btn" href="#">Contact us</a> <a data-animation="fadeInRight" data-delay=".6s" class="thm-btn border-btn" href="#">Free Quote</a> </div> </div> </div> </div> </div> </div> <div class="single-slider slider-height pos-rel d-flex align-items-center" data-background="img/bg/slider-bg-03.jpg"> <div class="container"> <div class="row"> <div class="col-xl-7 col-lg-8"> <div class="slider-content"> <h5 data-animation="fadeInUp" data-delay=".2s">General Contracting</h5> <h1 data-animation="fadeInUp" data-delay=".4s">Build everything you needs<span>.</span></h1> <p data-animation="fadeInUp" data-delay=".6s">Rorem ipsum dolor sit</p> <div class="slider-btn"> <a data-animation="fadeInLeft" data-delay=".6s" class="thm-btn" href="#">Contact us</a> <a data-animation="fadeInRight" data-delay=".6s" class="thm-btn border-btn" href="#">Free Quote</a> </div> </div> </div> </div> </div> </div> </div> </section> <!-- slider end --> <!-- footer start --> <footer> <div class="footer-area footer-height pt-40 pb-30"> <div class="container"> <div class="row"> <div class="col-xl-4 col-lg-6 col-md-6"> <div class="footer-left-widget mb-40"> <div class="footer-logo"> <img src="img/logo/logo-02.png" alt="logo_not_found"> </div> <p>Lorem ipsum dolor sit amet, consectetur</p> <div class="footer-social mt-40"> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fas fa-rss"></i></a> <a href="#"><i class="fab fa-dribbble"></i></a> <a href="#"><i class="fab fa-behance"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> </div> </div> </div> <div class="col-xl-2 offset-xl-1 col-lg-6 col-md-6"> <div class="footer-widget footer-widget-space mb-40"> <h3>contact us</h3> <ul class="footer-info"> <li> <div class="footer-address mt-20"> <span><i class="fas fa-map-marker-alt"></i></span> <h5>786/A Romada tower mall Brooklyn, NYC</h5> </div> </li> <li> <div class="footer-address mt-20"> <span><i class="fas fa-phone-alt"></i></span> <h5>018- 375878-345</h5> <h5>9373 93243 - 783</h5> </div> </li> <li> <div class="footer-address mt-20"> <span><i class="fas fa-envelope-open-text"></i></span> <h5>info@yourmail.com</h5> <h5>jobsinfo@webmail.com</h5> </div> </li> </ul> </div> </div> <div class="col-xl-1 offset-xl-1 col-lg-6 col-md-6 pr-0 mb-40"> <div class="footer-widget footer-link"> <h3>Quick links</h3> <ul> <li><a href="#">About us</a></li> <li><a href="#">Our process</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Our Clients</a></li> <li><a href="#">Our Team</a></li> <li><a href="#">Latest News</a></li> </ul> </div> </div> <div class="col-xl-2 offset-xl-1 col-lg-6 col-md-6 pr-0"> <div class="footer-widget footer-gallery"> <h3>Work Gallery</h3> <div class="footer-gallery-item"> <div class="footer-gallery-thumb"> <img src="img/footer/footer-gallery/fg-01.jpg" alt="image_not_found"> </div> <div class="link-img"> <a class="popup-image" href="img/footer/footer-gallery/fg-big-01.jpg"></a> </div> </div> <div class="footer-gallery-item"> <div class="footer-gallery-thumb"> <img src="img/footer/footer-gallery/fg-02.jpg" alt="image_not_found"> </div> <div class="link-img"> <a class="popup-image" href="img/footer/footer-gallery/fg-big-02.jpg"></a> </div> </div> <div class="footer-gallery-item"> <div class="footer-gallery-thumb"> <img src="img/footer/footer-gallery/fg-03.jpg" alt="image_not_found"> </div> <div class="link-img"> <a class="popup-image" href="img/footer/footer-gallery/fg-big-03.jpg"></a> </div> </div> <div class="footer-gallery-item"> <div class="footer-gallery-thumb"> <img src="img/footer/footer-gallery/fg-04.jpg" alt="image_not_found"> </div> <div class="link-img"> <a class="popup-image" href="img/footer/footer-gallery/fg-big-04.jpg"></a> </div> </div> <div class="footer-gallery-item"> <div class="footer-gallery-thumb"> <img src="img/footer/footer-gallery/fg-05.jpg" alt="image_not_found"> </div> <div class="link-img"> <a class="popup-image" href="img/footer/footer-gallery/fg-big-05.jpg"></a> </div> </div> <div class="footer-gallery-item"> <div class="footer-gallery-thumb"> <img src="img/footer/footer-gallery/fg-06.jpg" alt="image_not_found"> </div> <div class="link-img"> <a class="popup-image" href="img/footer/footer-gallery/fg-big-06.jpg"></a> </div> </div> </div> </div> </div> </div> </div> <div class="copyright-area pt-20 pb-20"> <div class="container"> <div class="row"> <div class="col-12"> <div class="copyright-text text-center"> <p>Copyright by @ Mlitipress - 2020.</p> </div> </div> </div> </div> </div> </footer> <!-- footer end --> <!-- All js here --> <script src="js/vendor/modernizr-3.5.0.min.js"></script> <script src="js/vendor/jquery-1.12.4.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/owl.carousel.min.js"></script> <script src="js/waypoints.min.js"></script> <script src="js/jquery.counterup.min.js"></script> <script src="js/jquery.slick.js"></script> <script src="js/jquery.scrollUp.min.js"></script> <script src="js/jquery.meanmenu.min.js"></script> <script src="js/imagesloaded.pkgd.min.js"></script> <script src="js/jquery.magnific-popup.min.js"></script> <script src="js/plugins.js"></script> <script src="js/main.js"></script> </body> </html>
CSS Structure
We are using several CSS files in this Template. XpressBuddy Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
CSS Fiile Included
- Animate css used
- Bootstrap css used
- Owl Carousel used
- slick used
- Favicon used
- Fontawesome used
- Style.css used
- and some other necessary css files
style.css situated on Bildhub/css/ contain the the all necessary custom style which is well organized and following are the style.css file structure :
Project Name: Bildhub - Construction HTML Template Author: XpressBuddy -->> (https://themeforest.net/user/xpressbuddy) Support: wasimmia.info@gmail.com Description: Construction HTML Template Developer: Wasim Mia Version: 1.0 /* CSS Index ----------------------------------- 1. Theme default css 2. header 3. slider 4. about 5. services 6. project 7. brand 8. feature 9. contact 10. counter 11. testimonial 12. team 13. blog 14. footer 15. page title 16. pricing 17. faq 18. Preloader */
/* 2. header */ .header-top { background-color: #002052; } .header-top ul{ overflow: hidden; margin: 0px; } .header-top .left { float: left; } .header-top .left li { list-style: none; display: inline-block; float: left; color: #fff; margin-right: 15px; padding: 13px 0px; border-left: 1px solid #ffffff45; padding-left: 15px; } .header-top .left li:first-child { border: 0; padding-left: 0; } .header-top .left li span{ color: #fff; margin-right: 5px; } .header-top .right { float: right; } .header-top .right li{ list-style: none; display: inline-block; padding: 11px 14px; border-right: 1px solid #ffffff45; } .header-top .right li:first-child { border-left: 1px solid #ffffff45; } .header-top .right li a{ color: #fff; font-size: 18px; } .main-menu ul li { display: inline-block; margin-left: 32px; position: relative; } .main-menu ul li a { display: block; padding: 44px 0; color: #002052; font-size: 14px; font-weight: 700; text-transform: uppercase; } .main-menu ul li:hover > a { color: #ff5e15; } .header-button { margin-top: 26px; margin-left: 40px; } .main-menu ul li ul.submenu { position: absolute; top: 110%; min-width: 230px; background: #fff; padding: 15px 0; border-top: 4px solid #ff5e15; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.05); border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; opacity: 0; visibility: hidden; z-index: 9; } .main-menu ul li:hover > ul.submenu { top: 100%; opacity: 1; visibility: visible; } .main-menu ul li ul.submenu li{ margin: 0; display: block; } .main-menu ul li ul.submenu li a { font-size: 15px; padding: 9px 25px; text-transform: capitalize; } .header-2 .header-top { background-color: transparent; } .header-top-right ul li { float: left; margin-left: 75px; } .header-top-right ul li:first-child { margin-left: 0; } .header-top-right { background: #fff; padding: 40px 40px; } .header-social a { color: #00235a; margin-right: 7px; } .header-top-right ul li span { float: left; font-size: 15px; width: 40px; height: 40px; background: #ff5e15; text-align: center; color: #fff; line-height: 40px; } .header-top-content { float: left; margin-left: 13px; max-width: 210px; } .header-top-content p { margin-bottom: 2px; line-height: 1.2; color: #192e41; font-weight: 500; } .header-top-content h6 { font-size: 16px; line-height: 1.5; color: #ed463a; font-weight: 500; margin: 0; } .header-2 .header-button { margin-top: 0px; margin-left: 0px; } .header-2 .header-bottom { background: #00235a; padding: 0 40px; } .header-2 .main-menu ul li { margin-right: 40px; margin-left: 0; } .header-2 .main-menu ul li:last-child { margin-right: 0; } .header-2 .main-menu ul li a { color: #ffffff; padding: 35px 0; } .header-2 .main-menu ul li:hover > a { color: #ff5e15; } .header-2 .main-menu ul li ul.submenu li a { color: #002052; } .header-2 .main-menu ul li ul.submenu li:hover > a { color: #ff5e15; } .header-2 .header-top-content h6 { font-size: 16px; color: #00235a; font-weight: 600; } .header-color-2 { background: #022660; } .header-2 .logo { margin-left: 23px; } /* 3. slider */ .slider-height { min-height: 800px; background-position: center top; background-repeat: no-repeat; background-size: cover; } .slider-content h5 { font-size: 18px; font-weight: 700; color: #ff5e15; text-transform: uppercase; line-height: 1.2; margin-bottom: 20px; font-family: 'Roboto', sans-serif; } .slider-content h1 { font-size: 65px; font-weight: 700; color: #002052; line-height: 75px; margin-bottom: 15px; text-transform: uppercase; } .slider-content h1 span { text-transform: uppercase; color: #ff5e15; } .slider-content p { font-size: 15px; color: #002359; font-weight: 500; line-height: 27px; padding-right: 80px; } .slider-btn a { margin-top: 22px; margin-right: 25px; } .slider-active button.slick-arrow { position: absolute; height: 80px; width: 80px; top: 45%; left: 0; transform: translateY(-50%); background: none; border: 0; font-size: 18px; padding: 0; color: #10111e; z-index: 2; cursor: pointer; background: #fff; line-height: 73px; transition: .3s; box-shadow: 0px 5px 27px 0px rgba(220, 220, 220, 0.69); } .slider-active button.slick-next { left: auto; right: 0; } .slider-active button.slick-arrow:hover { background: #ff5e15; color: #fff; } .header-transparent { position: absolute; left: 0; width: 100%; background: transparent; z-index: 1; } .slider-height-2 { height: 100vh; } .banner-overlay { position: absolute; height: 100%; width: 100%; left: 0; top: 0; background-color: #020d1e; opacity: .7; } .slider-2 .slider-content h1 { color: #fff; } .slider-2 .slider-content p { color: #fff; } .slider-2 .slider-content { margin-top: 230px; } .slider-2 .slider-active button.slick-arrow { top: 54%; box-shadow: 0px 5px 27px 0px rgba(220, 220, 220, 0.32); }
Js Structure
We are using several Js files in this Template. XpressBuddy Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset Js file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
Js Fiile Included
- jquery.js used
- fontawesome.js used
- jquery-ui.js used
- bootstrap.min.js used
- slick.js used
- scrollUp.min.js used
- owl.carousel.min.js used
- counterup.min.js used
- and some other necessary css files
main.js situated on js/ contain the the all necessary custom style which is well organized and following are the main.js file structure :
(function ($) { "use strict"; // preloader $(window).on('load', function () { $('#preloader').delay(350).fadeOut('slow'); $('body').delay(350).css({ 'overflow': 'visible' }); }) // meanmenu jQuery('#mobile-menu').meanmenu({ meanMenuContainer: '.mobile-menu', meanScreenWidth: "991" }); //data background $("[data-background]").each(function () { $(this).css("background-image", "url(" + $(this).attr("data-background") + ") ") }) //counterUp $('.counter').counterUp({ delay: 10, time: 1000 }); /* magnificPopup img view */ $('.popup-image').magnificPopup({ type: 'image', gallery: { enabled: true } }); /* magnificPopup video view */ $('.popup-video').magnificPopup({ type: 'iframe' }); // brand active $('.brand-active').owlCarousel({ loop:true, margin:0, items:1, dots:false, autoplay:true, smartSpeed: 1000, autoplayTimeout:5000, autoplayHoverPause:true, responsive:{ 0:{ items:1 }, 500:{ items:2 }, 767:{ items:3 }, 992:{ items:3 }, 1200:{ items:5 } } }) // testimonial active $('.testimonial-active').owlCarousel({ loop:true, margin:0, items:1, nav:false, dots:true, autoplay:true, smartSpeed: 1000, autoplayTimeout:5000, autoplayHoverPause:true, responsive:{ 0:{ items:1 }, 767:{ items:1 }, 992:{ items:1 } } }) })(jQuery);
Customization
How to Change Logo
How to Change Copyright
How to Change Google Map
