T H E M E L O C K . C O M
Thank you so much for purchasing our item from Theme Forest.
Introduction
- Item Name : Hunky - Creative Marketing Agency HTML Template
- Version : 1.0
- Author : Qubohub
Hunky - Creative Marketing Agency HTML Template is a modern, sleek design perfect for businesses looking to enhance their online presence. Built using HTML, CSS/SCSS, JS, and jQuery, it offers smooth animations and responsive layouts. With Bootstrap 5 integration and scroll animations powered by wow.js, the template provides an engaging, dynamic user experience. The clean code structure ensures easy editing and scalability for future updates. Ideal for marketing agencies, this template will help showcase your services in a professional and interactive way.
Files & Sources
- 1. bootstrap.min.css (bootstrap)
- 3. animate.min.css (animate css)
- 4. splitting.min.css (splitting)
- 5. carouselTicker.css (carousel ticker)
- 6. all.min.css (fontawesome)
- 7. flaticon.css (flaticon)
- 8. slick.css (slick)
- 9. slick-theme.css (slick theme)
- 10. fancybox.css (slick theme)
- 11. main.css (all styles of site)
- 1. jquery-3.7.1.min.js (jQuery)
- 4. popper.min.js (popper)
- 5. bootstrap.min.js (bootstrap)
- 6. splitting.min.js (splitting)
- 2. jquery.waypoints.js (jQuery waypoints)
- 3. jquery.counterup.min.js (jQuery counter)
- 7. wow.min.js (wow)
- 8. gsap.min.js (gsap)
- 9. jquery.carouselTicker.min.js (carousel ticker)
- 10. slick.min.js (slick)
- 11. fancybox.umd.js (fancybox)
- 12. google map/li>
- 13. main.js - (all scripts of site)
HTML structure
Hero Section
We Are A 
Creative Digital 
Agency
We are digital agency that helps businesses develop immersive
and engaging
user
experiences
that
drive top level growth
view my works
1800 +
Projects Finished
CSS file & Structure
CSS Files
CSS Structure
/*
Theme Name: Hunky
Author: QuboHub
Author URI: https://themeforest.net/user/qubohub
Description: Hunky - Creative Marketing Agency HTML Template
Version: 1.0.0
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*::before,
*::after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
main,
body {
overflow-x: clip;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
}
.breadcrumb,
ul,
ol {
margin-bottom: 0;
padding-left: 0;
list-style: none;
}
a {
text-decoration: none;
display: inline-block;
}
button {
border: none;
outline: none;
cursor: pointer;
}
JavaScript file & Structure
JavaScript Files
JavaScript Structure
$(function () {
"use strict";
$(window).on("load", function () {
/**
* counter init
*/
$(".counter").counterUp({
time: 1000,
});
// preloader
$(".preloader").fadeOut(() => {
/**
* splitting.js init
*/
Splitting();
});
});
/**
* wow.js init
*/
new WOW({ animateClass: "animated", offset: 100 }).init();
// btn hover effect
$(".btn__primary").on("mousemove", function (e) {
const x = e.pageX - $(this).offset().left;
const y = e.pageY - $(this).offset().top;
$(".btn__primary").css("--x", x + "px");
$(".btn__primary").css("--y", y + "px");
});
/**
* mouse move effect
*/
const $pointer = $(".pointer");
if ($(window).width() >= 768) {
$(document).on("mousemove", function (e) {
gsap.to($pointer, {
duration: 0.6,
left: e.clientX,
top: e.clientY,
ease: "power2.out",
});
});
}
/**
* 1. header fixed on scroll
*/
$(window).on("scroll", () => {
if ($(window).scrollTop() > 100) {
$(".header").addClass("header__fixed");
$(".header--2 .header__logo img").attr(
"src",
"assets/img/logo.png"
);
} else {
$(".header").removeClass("header__fixed");
$(".header--2 .header__logo img").attr(
"src",
"assets/img/logo-white.png"
);
}
});
$(".mobile__dropdown__btn").click(function () {
const dropdown = $(this).next();
dropdown.slideToggle();
});
/**
* when hover on elements add class enlarged to pointer
*/
$("a,h1,h2,h3,h4,h5,h6,p,ul,ol,img").hover(
function () {
$(".pointer").addClass("enlarged");
},
function () {
$(".pointer").removeClass("enlarged");
}
);
/**
* ticker init
*/
$(".running").carouselTicker({
speed: 1,
delay: 30,
direction: "prev",
mode: "horizontal",
});
/**
* 2. testimonial slider init
*/
$("#testimonial-2").slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: "#testimonial-2__img",
autoplay: true,
});
$("#testimonial-2__img").slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: "#testimonial-2",
dots: false,
arrows: false,
});
/**
* 3. testimonial slider init
*/
$(".testimonial-3__box__slider").slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
prevArrow: $(".arrow__btn__prev"),
nextArrow: $(".arrow__btn__next"),
});
/**
* 4. testimonial slider init
*/
$(".testimonial-4__box__slider").slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
prevArrow: $(".arrow__btn-2__prev"),
nextArrow: $(".arrow__btn-2__next"),
});
/**
* 1. project slider init
*/
$(".project-2__slider").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 2,
slidesToScroll: 1,
nextArrow: $(".arrow__btn-1__next"),
prevArrow: $(".arrow__btn-1__prev"),
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
],
});
/**
* google map init
*/
const map = $("#map");
if (map.length) {
function initMap() {
const location = { lat: 22.4030606, lng: 91.8642081 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 16,
center: location,
});
const marker = new google.maps.Marker({
position: location,
map: map,
});
}
window.onload = initMap;
}
/**
* fancybox init
*
*/
Fancybox.bind("[data-fancybox]", {});
/**
* scroll to top init
*/
const circle = $("#circleFill");
const scrollToTopBtn = $(".b-progress");
const pathLength = circle[0].getTotalLength();
circle.css({
"stroke-dasharray": pathLength,
"stroke-dashoffset": pathLength,
});
function scroll() {
const scrollHeight = $(document).height() - $(window).height();
const scrollPosition = $(window).scrollTop();
const scrollPercentage = (scrollPosition / scrollHeight) * 100;
const scrollPercentageText = $("#scrollPercentage");
const offset = pathLength - pathLength * (scrollPercentage / 100);
circle.css("stroke-dashoffset", offset);
scrollPercentageText.text(Math.round(scrollPercentage) + "%");
if (scrollPosition > 200) {
scrollToTopBtn.fadeIn();
} else {
scrollToTopBtn.fadeOut();
}
}
scroll();
$(window).scroll(scroll);
scrollToTopBtn.on("click", function () {
$("html, body").animate({ scrollTop: 0 }, 600);
});
});
Customization
Logo Change
First of all, open index.html and go to line 36.
Replace the img src path.
Copyright Text Change
First of all, open index.html and go to line 1005 and
replace the copyright text.
Copyright © 2024 Qubohub
Colors
Open the _variables.scss file from this directory:
assets/scss/utils/_variables.scss
// | color variables start |
$primary-color: #88e64a;
$secondary-color: #0e0e0e;
$secondary-color-10: rgba(14, 14, 14, 10%);
$secondary-color-20: rgba(14, 14, 14, 20%);
$secondary-color-30: rgba(14, 14, 14, 30%);
$secondary-color-shadow-20: 0 8px 80px rgba(14, 14, 14, 20%);
$tertiary-color: #f6f5f3;
$tertiary-color-50: rgba(246, 245, 243, 50%);
$quaternary-color: #1a1a1a;
$white-color: #fff;
$gray-color-50: rgba(200, 200, 205, 50%);
$primary-color-30: rgba(136, 230, 74, 30%);
// | color variables end |
Typography
(Font Size,Weight & Font Family)
Open the _fonts.scss file from this directory:
assets/scss/base/_fonts.scss
/* | google font start | */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/* | google font end | */
@font-face {
font-family: "ClashDisplay";
src: url("./../fonts/ClashDisplay-Medium.woff");
font-weight: 400;
}
@font-face {
font-family: "ClashDisplay";
src: url("./../fonts/ClashDisplay-Semibold.woff");
font-weight: 600;
}
@font-face {
font-family: "ClashDisplay";
src: url("./../fonts/ClashDisplay-Bold.woff");
font-weight: 800;
}
Open the _typography.scss file from this directory:
assets/scss/base/_typography.scss
h1 {
font-size: clamp(2.75rem, 1.6911rem + 4.8408vw, 7.5rem); // 120
font-weight: 700;
line-height: clamp(3.4375rem, 2.5318rem + 4.1401vw, 7.5rem);
}
h2 {
font-size: clamp(2.5rem, 2.082rem + 1.9108vw, 4.375rem); // 70
font-weight: 700;
line-height: clamp(2.5rem, 2.082rem + 1.9108vw, 4.375rem);
}
h3 {
font-size: 36px;
font-weight: 700;
line-height: 36px;
}
h4 {
font-size: 24px;
font-weight: 600;
line-height: 24px;
}
h5,
button,
a {
font-size: 16px;
font-weight: 600;
line-height: 1.2;
}
li,
p {
font-size: 18px;
font-weight: 400;
line-height: 30px;
}
h6 {
font-size: 14px;
font-weight: 600;
line-height: 1.2;
}
FAQ
A FAQ is a list of frequently asked questions (FAQs) and answers on a particular topic.
1. Am I allowed to modify the item that I purchased?
2. What does royalty free mean?
the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.
Please note that there may be some limits placed on uses under the different license types available on the marketplaces.
3. What do you mean by item and end product?
The item is what you purchase from Envato Market. The end product is what you build with that item.
4. What are examples of permitted end products?
- - You can buy a web template, add your text and images, and use it as your website.
- - You can buy an HTML site template, convert it to WordPress, and use it as your website (but not as a stock template for sale)
Source & Credits
Icons:
Google Fonts:
Images & Illustration Used:
Support
Please visit our profile page or ask question qubohub.help@gmail.com
We provide Basic Support for:- * Responding to questions or problems regarding the item and its features
- * Fixing bugs and reported issues
- * Providing updates to ensure compatibility with new software versions
- * Customization and installation services
- * Support for third party software and plug-ins
Version History (Changelog)
Changelog
-----------------------------------------
Version 1.2 - 29 September 2024
-----------------------------------------
1. Fixed padding & margin for mobile & tablet devices
2. Added ticker slider to the branding section
-----------------------------------------
Version 1.1 - 27 September 2024
-----------------------------------------
1. Added 2 new home pages
2. Fixed minor bugs & issues
-----------------------------------------
Version 1.0 - 27 September 2024
------------------------------------------
1. Initial release!