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!
Eventcred is a modern template for All kind of Event management system
Eventcred is a HTML5 Responsive Bootstrap Template. Eventcred Template has modern design and beautiful color variation. It meets all the need for making a website related to various type of event management. It have all the necessary section and elements. It comes with three pre-made Home Page along with necessary sections
Eventcred 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.
Eventcred 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 class="banner-block-wrap pt-70 pb-50">
<div class="sec-line">
<span class="line first-line"></span>
<span class="line second-line"></span>
<span class="line third-line"></span>
</div>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="banner-block-3">
<h1 class="wow fadeInDown" data-wow-duration='1s' data-wow-offset='0'>Digital Event</h1>
<p class="wow fadeInDown" data-wow-duration='1s' data-wow-offset='0'>Praesent vitae auctor turpis. Fusce ornare pretium orci vel dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus vulputate interdum massa sed elementum.</p>
<div class="banner-countdown-wrap wow fadeInUp" data-wow-duration='1s' data-wow-offset='0'>
<div class="countdown banner-countdown" data-time="2019/12/18 00:00:00"></div>
</div>
</div>
</div>
</div>
</div>
<div class="banner-image wow fadeInRight" data-wow-duration='1s' data-wow-offset='0'>
<img src="images/header/banner-image.png" class="" alt="">
</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 style.css which is on css filder of root directory. This is the generated output from the scss files on sass directory.
style.css files codelines are decorated on such level:
/* Table of content
--------------------------------------------
01.0 General Style
02.0 Banner Style
03.0 Header Style
04.0 Event Style
05.0 Video Style
06.0 Pricing Style
07.0 Blog Style
08.0 Sponsor Style
09.0 Footer Style
10.0 About Style
11.0 Call to Action Style
12.0 Pagination Style
13.0 Contact Style
14.0 Speaker Style
15.0 Nav Style
16.0 Gallery Style
17.0 Feature Style
18.0 Stuff Style
19.0 Activity Style
20.0 Testimonial Style
21.0 Roles Style
22.0 Conduct Style
23.0 Volunteer Style
24.0 Venue 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:
/*
05.0 Video Style
-----------------------------------------------*/
.video-play {
background: url(../images/bg/video-bg.jpg) no-repeat center;
background-size: cover;
height: 570px;
position: relative;
}
.video-play .content {
position: absolute;
bottom: 0;
right: 0;
padding: 70px 20px 70px 100px;
color: #ffffff;
width: 50%;
max-width: 750px;
min-width: 320px;
background: rgba(66, 103, 178, 0.9);
}
.video-play .content h4 {
font-size: 2.4rem;
font-weight: 500;
font-family: "Roboto", sans-serif;
color: #ffffff;
margin-bottom: 10px;
}
.video-play .content a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-family: "Roboto", sans-serif;
font-weight: 300;
font-size: 1.4rem;
}
.video-play .content a span {
height: 40px;
width: 40px;
border: 1px solid #ffffff;
border-radius: 50%;
display: inline-block;
margin-right: 10px;
position: relative;
}
.video-play .content a span img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@media all and (max-width: 991px) {
.video-play {
height: 420px;
}
.video-play .content {
padding: 50px 20px 50px 50px;
}
}
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 main.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 a.dropdown-toggle').on('click', 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() < 992) {
$(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 - 11.09.2019
========================
- 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.
YourComanyName Team