Ayeverse - Multi-Purpose HTML Template
Thank you so much for purchasing our item from Theme Forest.
Introduction
- Item Name : Ayeverse - Multi-Purpose HTML Template
- Version : 1.0
- Author : Qubohub
The Ayeverse - Multi-Purpose HTML Template offers a flexible and contemporary solution for website development. It leverages HTML for structure, CSS and SASS for styling, and Bootstrap 5 for seamless responsiveness across all devices. Featuring jQuery for dynamic content, AOS animation for smooth scrolling effects, and Swiper JS for captivating carousels and sliders, Ayeverse includes three distinct home page layouts to cater to diverse requirements. This blend of technologies ensures the creation of visually appealing and highly functional websites.
Files & Sources
- 1. bootstrap.min.css (bootstrap)
- 2. all.min.css (fontawesome)
- 3. nice-select.css (nice-select tag )
- 4. leaflet.css (map)
- 5. swiper-bundle.css (swiper slideshow)
- 6. aos.css (scroll animation)
- 7. style.css (all styles of site)
- 1. jquery-3.7.1.min.js (jQuery)
- 2. jquery.waypoints.js (jQuery waypoints)
- 3. jquery.counterup.min.js (jQuery counter)
- 4. popper.min.js (popper)
- 5. bootstrap.min.js (bootstrap)
- 6. mouse.parallax.js (mouse parallax)
- 7. aos.js (scroll animation)
- 8. swiper-bundle.min.js (swiper slideshow)
- 9. isotope.pkgd.min.js (isotope)
- 10. imagesloaded.pkgd.min.js (isotope image loaded)
- 11. jquery.nice-select.min.js (nice-select)
- 12. leaflet.js (map)
- 13. main.js - (all scripts of site)
HTML structure
Hero Section
Revolutionize the way you
connect
Hire Me
CSS file & Structure
CSS Files
Shared on THEMELOCK.COM - Ayeverse - Multi-Purpose HTML Template
CSS Structure
/*
Theme Name: Ayeverse
Author: QuboHub
Author URI: https://themeforest.net/user/qubohub
Description: Ayeverse - Multi-Purpose HTML Template
Version: 1.0.0
*/
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*::after,
*::before {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
html,
body {
overflow-x: hidden;
}
body {
font-family: "Lora", serif;
font-style: normal;
}
ul,
ol {
list-style-type: none;
margin-bottom: 0;
padding-left: 0;
margin-left: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-bottom: 0;
}
JavaScript file & Structure
JavaScript Files
JavaScript Structure
$(function () {
"use strict";
/*
|==============================
| preloader
|==============================
*/
$(window).on("load", function () {
$(".preloader").fadeOut(1000);
/*
|==============================
| aos js init
|==============================
*/
AOS.init({
once: true,
});
});
});
Customization
Logo Change
First of all, open index.html and go to line 39.
Replace the img src path.
Copyright Text Change
First of all, open index.html and go to line 1088 and
replace the copyright text.
Colors
Open the _colors.scss file from this directory:
scss/utils/_colors.scss
:root {
--primary: #d589dd;
--secondary: #5a76ff;
--secondary-100: #5a76ff40;
--tertiary: #090f32;
--tertiary-dark: #151b3c;
--tertiary-100: rgba(9, 15, 50, 0.3);
--white: #fff;
--gray: #cccccc;
--gray-light: #f3f7f8;
--gray-dark: #4f4f4f;
}
Typography
(Font Size,Weight & Font Family)
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
h1 {
font-size: clamp(50px, 5vw, 82px);
font-weight: 400;
}
h2 {
font-size: clamp(44px, 3.4vw, 64px);
font-weight: 500;
}
h3 {
font-size: clamp(1.75rem, 1.5131rem + 1.0828vw, 2.8125rem);
font-weight: 500;
}
h4 {
font-size: clamp(30px, 2.1vw, 40px);
font-weight: 500;
}
h5 {
font-size: clamp(26px, 1.7vw, 32px);
font-weight: 500;
}
h6 {
font-size: clamp(20px, 1.3vw, 24px);
font-weight: 500;
}
a,
p {
font-weight: 400;
}
body {
font-family: "Lora", serif;
font-style: normal;
}
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.0
-----------------------------------------------------------------------------------------
1. Initial Release