Getting Started
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to ask via item's comments. Also if you love this item please don't forget to give item ratings. It would be very meaningful for us. Thanks so much! :)
Song AI is a creative and modern customer-focused responsive html template built for the song ai generator & ai technology startups. this has 1 home pages with diffrent sections and the template is developed with html, bootstrap (v5.x) and jquery. well-commented and easily customizable source code with detailed documentation.
Installation guide:
- Download the package from themeforest.
- There is a template folder called song-ai available inside the downloaded zip file. The zip file needs to be unzipped to find the song-ai-template and documentation folder.
- Open index.html in a browser OR deploy on a server.
The files and folders structure is similar to the following:
📁 song-ai-template/
│── 📂 assets/
│ ├── 📂 audio/
│ ├── 📂 css/
│ ├── 📂 fonts/
│ ├── 📂 images/
│ ├── 📂 js/
│── 📄 index.html
Files Edit & Upload:
Individual pages can be customized by opening in a code editor such as VS Code. Once all the customization completed then to make the website live you need to upload the updated project files to the hosting server for your own domain. The files can be uploaded using FTP client such as FileZilla.
HTML Structure
... header area ...
<section>
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- this is your content -->
</div>
<div class="col-lg-12">
<!-- this is your content -->
</div>
</div>
</div>
</section>
... footer area ...
Head CSS Structure
Followings are the css files which loaded inside the Head Section:
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="assets/css/fontawesome-5.14.0.min.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Aos CSS -->
<link rel="stylesheet" href="assets/css/aos.css">
<!-- Slick CSS -->
<link rel="stylesheet" href="assets/css/slick.min.css">
<!-- Style CSS -->
<link rel="stylesheet" href="assets/css/style.css">
Javascript Structure
Followings are the JS files which loaded before the end of body section:.
<!-- jQuery js -->
<script src="assets/js/jquery-3.6.0.min.js"></script>
<!-- Smooth scroll js -->
<script src="assets/js/smooth-scroll.js"></script>
<!-- Bootstrap js -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<!-- Aos js -->
<script src="assets/js/aos.js"></script>
<!-- Slick js -->
<script src="assets/js/slick.min.js"></script>
<!-- Main js -->
<script src="assets/js/main.js"></script>
Css Structure
File path: assets/css/style.css
/*----------------------------------------------------------------------
Template Name: Song AI Generator One Page HTML Template - Song AI
Description: Song AI is a Creative and Modern customer-focused Responsive HTML template built for the Song AI Generator & AI Technology Startups.
Author: UICodetheme
Author URI: https://themeforest.net/user/uicodetheme
Version: 1.0
----------------------------------------------------------------------
CSS Index
----------------------------------------------------------------------
01. Base Css
02. Header
03. Section Css
3.1 Hero
3.2 Discover
3.3 Song Make
3.4 Features
3.5 Pricing Plans
3.6 Testimonials
3.7 Counter Number
3.8 FAQ
04. Footer
05. SignIn Model
06. Responsive Css
----------------------------------------------------------------------*/
/*--------------------- Write Your Css Code ---------------------*/
Fonts Change
File path: /index.html
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Geologica:wght@300;400;500;600&display=swap" rel="stylesheet">
File path: assets/css/style.css
:root {
--base-font: "Geologica", sans-serif;
}
Theme Color Change Option
File path: assets/css/style.css
:root {
--primary-color-rgb: 26, 189, 182;
--custom-white-rgb: 255, 255, 255;
--mainly-green-2-rgb: 9, 181, 141;
--custom-black-rgb: 0, 0, 0;
--primary-color: rgb(var(--primary-color-rgb));
--secondary-color: #1898b0;
--custom-white: rgb(var(--custom-white-rgb));
--custom-black: rgb(var(--custom-black-rgb));
--dark-gray-1: #a1a1a1;
--dark-gray-2: #949494;
--mainly-green-1: #1abfb6;
--mainly-green-2: rgb(var(--mainly-green-2-rgb));
--mainly-green-3: #769586;
--mainly-blue-1: #194965;
--mainly-blue-2: #0a1c26;
--mainly-blue-3: #162b37;
--mainly-blue-4: #166fab;
--border-radius5: 5px;
--border-radius10: 10px;
--base-font: "Geologica", sans-serif;
}
Javascript Structure
File path: assets/js/main.js
/*----------------------------------------------------------------------
Template Name: Song AI Generator One Page HTML Template - Song AI
Description: Song AI is a Creative and Modern customer-focused Responsive HTML template built for the Song AI Generator & AI Technology Startups.
Author: UICodetheme
Author URI: https://themeforest.net/user/uicodetheme
Version: 1.0
----------------------------------------------------------------------
Js Index Here
----------------------------------------------------------------------
01. Main Menu
02. Inspire Text
03. Sound Wave Playing
04. Hero Section Image
05. Audio Play
06. Pricing
07. Testimonials Slider
08. Counter Number
09. FAQ
10. Sticky Header
11. Back To Top
12. Preloader
13. Custom Cursor
14. AOS Animation
15. Signin And Signup Model
----------------------------------------------------------------------*/
(function($) {
"use strict";
//Write Your Js Code
})(window.jQuery);
Slider Slider
File path: assets/js/main.js
/*--------------------- 07. Testimonials Slider ---------------------*/
if ($(".testimonials-section").length) {
if ($(".testimonials-slider").length > 0) {
$(".testimonials-slider").slick({
dots: false,
arrows: false,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 2000,
responsive: [{
breakpoint: 991,
settings: {
dots: true
}
}]
});
$(".testimonials .next-arrow").on("click", function() {
$(".testimonials-slider").slick("slickNext");
});
$(".testimonials .prev-arrow").on("click", function() {
$(".testimonials-slider").slick("slickPrev");
});
}
}
More Info please browser the link: Slick Docs Options
How to edit/off Preloader
Please remove or comment the below code file path: assets/js/main.js
/*--------------------- 13. Preloader ---------------------*/
$(window).on('load', function() {
$(".loader").delay(1500).fadeOut(1000, function() {});
});
Also, please remove or comment the above code all HTML files
<!-- Start Loader Area -->
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<!-- End Loader Area -->
Animate on scroll
<p data-aos="fade-up" data-aos-duration="1000" class="aos-init aos-animate">Explore how Song AI is revolutionizing the song creation process. Discover the latest trends, insights, and updates in Song AI Generator.></p>
data-aos: sample type of animation. You can see all animation available from: http://daneden.github.io/animate.css/data-aos-duration: determine duration of animation (on second).
class: add animation class
Speed Optimization
Please optimize all images KB, MB also, use the image size following by placeholder file path: assets/images/..
- Tinypng
Please minify all CSS file path: assets/css/..
Please minify all JS file path: assets/js/..
How to Change Image?
Please go to the image file 'path: assets/images/...' replace the image which one you want following placeholder image size & name
Credits
Note: All images are used for preview purpose only and not included in the final purchase files.
Images from:
https://www.freepik.com/
Fonts:
Geologica
IconFont
Fontawesome
Once again, thank you very much for purchasing this theme. As I said at the beginning, if you have any questions regarding this theme, I will be happy to help. I will do my best to help.
UICodetheme