Beatsclub

Night Club HTML Template

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!

Introduction

Beatsclub - Night Club HTML Template

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.

Template Features

Beatsclub has lot of features and functionality:

  • Modern Design
  • Beautiful color and typography
  • Fully Responsive Template
  • 6 Home Variations
  • 5 Blog Variations
  • Total 15 Pages
  • HTML5, CSS3, Bootstrap 4
  • SCSS File Included
  • Separated SCSS file for each element type
  • Made with CSS Flex Box
  • Custom Music Player
  • All essential section and Pages including Blog, Blog Detail.
  • MailChimp Integrated for Subscriptions.
  • Free Google Fonts.
  • Free Font Icons
  • All Modern Browser Supported.
  • W3C Validated Code.
  • Well Documented.
  • +Many More

HTML Structure

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>
      

CSS files and structure

Our external styles files are seperated on css folders on the assets folder having all the external CSS plugins

  • Bootstrap CSS
  • Font Awesome CSS
  • Owl Carousel CSS
  • Audio Player CSS
  • Magnific Popup CSS etc...

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;
}
              

JavaScript & Ajax

This template has following javascript plugins:

  • jQuery JS
  • Bootstrap JS
  • CountDown JS
  • Owl Carousel JS
  • Magnific Popup JS
  • Audio Player JS

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');
      }
    });
  }
              

Changelog

Version 1.0 - 09.02.2020
========================
- Initial Release
              

Thank you

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