Meetco
Meetco - Event & Conference HTML Template
- Created: 01/06/2025
- Latest Update: 01/06/2025
- by: XpressBuddy
- email: support@xpressbuddy.com
Installation
Follow the steps below to get started with Meetco - Event & Conference HTML Template :
-
Open the
Package/MeetcoFolder 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:
-
Meetco HTML/assets/css, js, fonts- Stylesheets, JavaScript, Fonts etc Folder -
Meetco HTML/assets/img- Images Folder -
Meetco HTML/assets/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 5.x
- Fontawesome Used
- Google Font Used
- Fixed Menu
- Google Map
- Eye Catching Design
- W3C Validate Code
HTML Structure
Meetco has follows a simple coding structure. here is the sample:
<!doctype html> <html class="no-js" lang="zxx"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Meetco - Event & Conference HTML Template</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" type="image/x-icon" href="img/favicon.svg"> <!-- Place favicon.svg in the root directory --> <!-- CSS here --> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/slick.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/aos.css"> <link rel="stylesheet" href="css/magnific-popup.css"> <link rel="stylesheet" href="css/meanmenu.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 class="main-header"> <div class="header-bottom-area"> <div class="header-bottom-wrapper"> <div class="container-fluid"> <div class="row align-items-center"> <div class="col-xl-8 col-lg-8"> <div class="main-menu"> <nav id="mobile-menu"> <ul> <li><a href="#">Home+</a> <ul class="submenu"> <li><a href="index.html">Home One</a></li> <li><a href="index-2.html">Home Two</a></li> </ul> </li> <li><a href="about.html">About</a></li> <li><a href="causes.html">Causes+</a> <ul class="submenu"> <li><a href="causes.html">Causes</a></li> <li><a href="causes-details.html">Causes Details</a></li> </ul> </li> <li><a href="team.html">Team</a> <ul class="submenu"> <li><a href="team.html">Team</a></li> <li><a href="team-details.html">Team Details</a></li> </ul> </li> <li><a href="news.html">News+</a> <ul class="submenu"> <li><a href="news.html">News</a></li> <li><a href="news-details.html">News Details</a></li> </ul> </li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </div> </div> <div class="col-xl-4 col-lg-4"> <div class="header-right d-none d-lg-block"> <div class="icon cart-icon f-right"> <a href="#"> <i class="ti-shopping-cart"> <span class="cart-number">0</span> </i> </a> </div> <div class="icon search-box f-right"> <a href="#"><i class="ti-search"></i></a> <div class="search-overlay search-popup"></div> </div> <div class="icon header-bar bar f-right"> <a href="#"><i class="fas fa-bars"></i></a> </div> </div> </div> </div> </div> </div> </div> </header> <!-- header 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/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
- Swiper used
- Sass used
- Favicon used
- Fontawesome used
- Style.css used
- and some other necessary css files
style.css situated on Meetco/css/ contain the the all necessary custom style which is well organized and following are the style.css file structure :
Project Name: Meetco - Event & Conference HTML Template Author: XpressBuddy -->> (https://themeforest.net/user/xpressbuddy) Support: wasimmia.info@gmail.com Description: Nonprofit ICO & Crypto Landing HTML Template Developer: Wasim Mia Version: 1.0 /* CSS Index ----------------------------------- 1. Theme default css 2. header 3. slider 4. feature 5. about 6. counter 7. causes 8. campaign 9. video 10. testimonial 11. team 12. volenteer 13. gallery 14. news 15. footer 16. cta 17. info bar 18. page title 19. events 20. faq 21. contact 22. header search 23 preloader */
/* 2. header */ .header-top-area { background: #051f33; padding-left: 200px; padding-right: 200px; padding-top: 30px; padding-bottom: 65px; } .header-top ul li { float: left; margin-right: 35px; display: flex; align-items: center; } .header-top ul li:last-child { margin-right: 0; } .header-top ul li span { float: left; } .header-top-content { float: left; margin-left: 13px; max-width: 210px; } .header-top-content p { margin-bottom: 2px; line-height: 1.4; color: #a2bacc; font-weight: 500; font-size: 15px; } .header-top-content h6 { font-size: 16px; line-height: 1.5; color: #fff; font-weight: 500; margin: 0; font-family: 'Roboto', sans-serif; }
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
- 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' }); }) // side-bar $(".bar").on("click", function () { $(".btn-menu-main,.offcanvas-overly").addClass("btn-menu-main-right"); return false; }); $(".crose,.offcanvas-overly").on("click", function () { $(".btn-menu-main,.offcanvas-overly").removeClass("btn-menu-main-right"); }); // 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") + ") ") }) // 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
