Documentation version 1.0
First of all, Thank you so much for purchasing this template and for being my loyal customer.
You are awesome!
You are entitled to get free lifetime updates to this product + exceptional support from the author directly.
This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here, here and here.
You will need the following sofwares to customize this template.
The template is based on Bootstrap 4 https://getbootstrap.com/
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
....
....
This template comes with 14 files for predefined color skins, all are located under assets/css/skins
In the example below, you need only to change the green.css file with your new color.
Open css/style.css and go to Line 619 and change the path http://via.placeholder.com/1920x1080.jpg with the path to your image.
In index-video.html file go to line 61 and change the pathhttps://path_to_your_video.mp with the path to your video.
In order to update your portfolio items correctly you should insert the real dimensions of your image in data-size attribute
....
Important
Images in Portfolio should have a minimum height of 1080 pixels or a minimum width of 960 pixels
In order to receive emails in your inbox, open php/process-form.php and go to Line 9 : and replace youremail@mail.com with your email, that's it !
All scripts are initialized in custom.js file that is located under assets/js directory
(function($) {
"use strict";
$(window).bind("load", function() {
/* ----------------------------------------------------------- */
/* PAGE PRELOADER
/* ----------------------------------------------------------- */
$("body").toggleClass("loaded");
setTimeout(function() {
$("body").addClass("loaded");
}, 3000);
});
$(document).ready(function() {
/* ----------------------------------------------------------- */
/* REMOVE # FROM URL
/* ----------------------------------------------------------- */
$("a[href='#']").on("click", (function(e) {
e.preventDefault();
}));
/* ----------------------------------------------------------- */
/* MENU ANIMATION
/* ----------------------------------------------------------- */
$('#navigation li a').on('click', function () {
setTimeout(function() {
$('.navigation-trigger').click();
}, 800);
});
var offset = 300;
var navigationContainer = $('#navigation'),
mainNavigation = navigationContainer.find('#main-navigation ul');
checkMenu();
$('.navigation-trigger').on('click', function(){
$(this).toggleClass('menu-is-open');
mainNavigation.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible');
setTimeout(function() {
ResumeCarousels();
}, 1200);
});
function checkMenu() {
navigationContainer.find('.navigation-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
mainNavigation.addClass('has-transitions');
});
}
/* ----------------------------------------------------------- */
/* PORTFOLIO GRID ITEM ANIMATION ON HOVER
/* ----------------------------------------------------------- */
$('.grid__item a').each(function() {
$(this).on('mouseenter', function() {
var portfolioTitle = $('.item-title-hover');
if ($(this).data('title')) {
portfolioTitle.html($(this).data('title') + '' + $(this).data('category') + '');
portfolioTitle.addClass('visible');
}
$(document).on('mousemove', function(e) {
$('.item-title-hover').css({
left: e.clientX - 10,
top: e.clientY + 25
});
});
}).on('mouseleave', function() {
$('.item-title-hover').removeClass('visible');
});
});
/* ----------------------------------------------------------- */
/* PAGE TRANSITION
/* ----------------------------------------------------------- */
var links = [...document.querySelectorAll('.link-page')];
var breaker = document.querySelector('#transitionblock');
links.forEach(link => link.addEventListener('click', function (e) {
var $el = $(this);
setTimeout(function () {
$('#main-navigation li a').removeClass('active');
$el.addClass('active');
}, 1000);
e.preventDefault();
var page = link.getAttribute("href");
if (document.querySelector(page)) {
if (page != "#home") {
setTimeout(function () {
$('#wrapper').css('overflow','auto');
}, 1000);
} else {
setTimeout(function () {
$('#wrapper').css('overflow','hidden');
}, 1000);
}
function transitionblock() {
breaker.style.display = 'block';
breaker.addEventListener('animationend', function () {
this.style.display = "none";
})
}
transitionblock()
function changepage() {
var pages = links.map(a => a.getAttribute("href"))
if ($(window).width() > 991) {
setTimeout(function () {
pages.forEach(a => document.querySelector(a).style.display = 'none');
document.querySelector(page).style.display = 'block';
$( ".simplebar-content-wrapper" ).scrollTop(0);
}, 1000);
} else {
setTimeout(function () {
pages.forEach(a => document.querySelector(a).style.display = 'none');
document.querySelector(page).style.display = 'block';
$("#wrapper").scrollTop(0);
}, 1000);
}
}
changepage()
}
}))
/* ----------------------------------------------------------- */
/* EXPERIENCE & EDUCATION CAROUSELS
/* ----------------------------------------------------------- */
function ResumeCarousels() {
$('#experience').on('click', function () {
$('#educationcarousel').owlCarousel('destroy');
$('#experience').addClass('active');
$('#education').removeClass('active');
$('#educationcarousel').removeClass('visiblecarousel').addClass('hiddencarousel');
$('#experiencecarousel').removeClass('hiddencarousel').addClass('visiblecarousel');
$('#experiencecarousel').owlCarousel({
loop: false,
margin: 30,
nav: false,
responsive: {
0: {
items: 1,
dots: true
},
768: {
items: 2
},
992: {
items: 3
}
}
});
});
$('#education').on('click', function () {
$('#experiencecarousel').owlCarousel('destroy');
$('#education').addClass('active');
$('#experience').removeClass('active');
$('#experiencecarousel').removeClass('visiblecarousel').addClass('hiddencarousel');
$('#educationcarousel').removeClass('hiddencarousel').addClass('visiblecarousel');
$('#educationcarousel').owlCarousel({
loop: false,
margin: 30,
nav: false,
responsive: {
0: {
items: 1,
dots: true
},
768: {
items: 2
},
992: {
items: 3
}
}
});
})
}
if ($("body").hasClass("index")) {
$('#experiencecarousel').owlCarousel({
loop: false,
margin: 30,
nav: false,
responsive: {
0: {
items: 1,
dots: true
},
768: {
items: 2
},
992: {
items: 3
}
}
});
ResumeCarousels();
}
/* ----------------------------------------------------------- */
/* RE-INITALIZE EXPERIENCE CAROUSEL IF ABOUT SECTION WAS HIDDEN
/* ----------------------------------------------------------- */
$('.link-about').on('click', function() {
setTimeout(function () {
$('#experiencecarousel').owlCarousel('destroy');
$('#experiencecarousel').owlCarousel({
loop:false,
margin:30,
nav: false,
responsive:{
0:{
items:1,
dots:true
},
768:{
items:2
},
992:{
items:3
}
}
});
}, 2000);
});
/* ----------------------------------------------------------- */
/* UPDATE ACTIVE ITEMS IN NAVIGATION
/* ----------------------------------------------------------- */
$('#link-about').on('click', function() {
setTimeout(function () {
$('#main-navigation li a').removeClass('active');
$('#main-navigation li a.link-about').addClass('active');
if ($('.navigation-trigger').hasClass('menu-is-open')) {
$('.navigation-trigger').click();
}
ResumeCarousels();
}, 1000);
});
/* ----------------------------------------------------------- */
/* AJAX CONTACT FORM
/* ----------------------------------------------------------- */
$(".formcontact").on("submit", function() {
$(".output_message").text("Sending...");
var form = $(this);
$.ajax({
url: form.attr("action"),
method: form.attr("method"),
data: form.serialize(),
success: function(result) {
if (result == "success") {
$(".contactform").find(".form-message").addClass("d-block");
$(".contactform").find(".output_message").addClass("success");
$(".output_message").html("Your Message has been Sent!");
$(".formcontact")[0].reset();
} else {
$(".contactform").find(".form-message").addClass("d-block");
$(".contactform").find(".output_message").addClass("d-block error");
$(".output_message").text("Error Sending!");
}
}
});
return false;
});
});
$(window).on('resize',function(){
/* ----------------------------------------------------------- */
/* RE-INITIALIZE OWL CAROUSEL ON RESIZE
/* ----------------------------------------------------------- */
if ($("body").hasClass("index")) {
$('#experiencecarousel').owlCarousel('destroy');
$('#educationcarousel').owlCarousel('destroy');
if ($('#experiencecarousel').hasClass('visiblecarousel')) {
$('#experiencecarousel').owlCarousel({
loop: false,
margin: 30,
nav: false,
responsive: {
0: {
items: 1,
dots: true
},
768: {
items: 2
},
992: {
items: 3
}
}
});
} else {
$('#educationcarousel').owlCarousel({
loop: false,
margin: 30,
nav: false,
responsive: {
0: {
items: 1,
dots: true
},
768: {
items: 2
},
992: {
items: 3
}
}
});
}
}
});
})(jQuery);