Thank you for purchasing our product. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
Beatsclub is a modern template for club and party management system
Beatsclub is a HTML5 Responsive Bootstrap Template. Beatsclub Template has modern design and beautiful color variation. It meets all the need for making a website related to various type of club and party management system. It have all the necessary section and elements. It comes with six pre-made Home Page along with necessary sections
Beatsclub is built with SCSS, Bootstrap Framework 4, HTML5 & CSS3. MailChimp Integrated for Subscription form. It is Responsive, Retina ready & Multi-Device supported. All code is beautifully wirtten & W3C Validated.
This Documentation provide you a clear guideline for how to use and customize this template. If you facing any problem, please don't forget to ask any question or contact with us for support. Thank you for purchasing our product.
Beatsclub has lot of features and functionality:
All the HTML codes and section are well seprated by linespace and comments so that you can modify easily. As example here below is the sample codes for Main Banner section:
<div id="home" class="banner-light-wrap"> <div class="container"> <div class="banner-light"> <div class="banner-light-content"> <h4>Let’s do the party</h4> <h1>We provides agile digital product companies.</h1> <div class="banner-buttons"> <a href="#" class="get-start">Get Started Now</a> <a href="#" class="buy">Buy Ticket</a> </div> </div> <div class="banner-thumb"> <img src="images/banner/thumb-1.png" alt=""> </div> </div> </div> </div>
Our external styles files are seperated on css folders on the assets folder having all the external CSS plugins
And our template have its custom CSS files name main.css which is on css filder of root directory. This is the generated output from the scss files on sass directory.
main.css files codelines are decorated on such level:
/* Table of content -------------------------------------------- 01.0 General Style 02.0 Banner Style 03.0 Feature Style 04.0 Header Style 05.0 Service Style 06.0 Gallery Style 07.0 CTA Style 08.0 DJ Style 09.0 Blog Style 10.0 Form Style 11.0 Contact Style 12.0 Footer Style 13.0 Event Style 14.0 About Style 15.0 Performer Style 16.0 Pricing Style 17.0 Client Style 18.0 Breadcrumb Style 19.0 Pagination Style 20.0 Widget Style 21.0 Audio-player Style 22.0 Nav Style -------------------------------------------*/
Our css rules are seperated beautifully for each section. So it's easy to customize. Such as, If you want to change the style of Banner section and you are not familiar with sass than simply go to appropriate section on css file and change the styles as your want:
/*---------------------------------------------- 02.0 Banner Style -----------------------------------------------*/ .banner-light-wrap { overflow: hidden; } .banner-light { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 830px; } .banner-light .banner-light-content { -webkit-box-flex: 0; -ms-flex: 0 0 65%; flex: 0 0 65%; } .banner-light .banner-light-content h4 { font-size: 2.8rem; color: #ffffff; background: #2E387B; font-family: "Muli", sans-serif; border-radius: 40px; line-height: 74px; display: inline-block; padding: 0 70px; } .banner-light .banner-light-content h1 { margin-top: 40px; font-size: 6.3rem; color: #49225A; font-family: "Roboto", sans-serif; font-weight: 500; } .banner-light .banner-light-content .banner-buttons { margin-top: 40px; } .banner-light .banner-light-content .banner-buttons a { text-align: center; width: 270px; line-height: 80px; font-family: "Roboto", sans-serif; font-weight: 400; font-size: 2.2rem; border-radius: 10px; margin-bottom: 20px; } .banner-light .banner-light-content .banner-buttons .get-start { background-image: -webkit-gradient(linear, right top, left top, from(#ED5492), to(#F6424B)); background-image: -webkit-linear-gradient(right, #ED5492, #F6424B); background-image: -o-linear-gradient(right, #ED5492, #F6424B); background-image: linear-gradient(to left, #ED5492, #F6424B); color: #ffffff; margin-right: 20px; } .banner-light .banner-light-content .banner-buttons .buy { border: 2px solid #49225A; color: #49225A; line-height: 76px; } .banner-light .banner-thumb img { max-width: 520px; }
This template has following javascript plugins:
all these files are located on assets/js folder, And our main js is on separated js folder on root directory.
Like CSS and HTML our JavaScript codes on our custom.js file are also well organized and well commented.
For example if you want to change the functionality of Navbar just find the following block of codes and change it according to your need:
/*----------------------------------- Navbar -----------------------------------*/ $('.dropdown-menu').on('click', 'a.dropdown-toggle', function(e) { var $el = $(this); var $parent = $(this).offsetParent(".dropdown-menu"); if (!$(this).next().hasClass('show')) { $(this).parents('.dropdown-menu').first().find('.show').removeClass("show"); } var $subMenu = $(this).next(".dropdown-menu"); $subMenu.toggleClass('show'); $(this).parent("li").toggleClass('show'); $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function (e) { $('.dropdown-menu .show').removeClass("show"); }); if (!$parent.parent().hasClass('navbar-nav')) { $el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4}); } return false; }); if($(window).width() < 1199) { $(document).on('click', function(event) { var clickover = $(event.target); var _opened = $('#navbarSupportedContent').hasClass('show'); if(_opened === true && !(clickover.is('.navbar-nav li, .navbar-nav .dropdown *'))) { $('button.navbar-toggler').trigger('click'); } }); }
Version 1.0 - 09.02.2020 ======================== - Initial Release
We are thankful to...
Once again, thank you so much for purchasing this product. As we said at the beginning, We'd be glad to help you if you have any questions relating to this product. No guarantees, but we'll do our best to assist. If you have a more general question relating to this product on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
AppsCred Team