← Back to Devanshu AI

Devanshu AI Template

Documentation & Help

1. Overview

Devanshu AI Template is a modern, responsive HTML template built for AI tools, SaaS, and software landing pages. It includes 14 fully designed pages, Bootstrap 5, AOS scroll animations, Swiper sliders, and a dark theme with cyan/purple accents.

Tech stack: HTML5, CSS3, Bootstrap 5, AOS (Animate On Scroll), Swiper, Remix Icon, Vanilla Tilt, vanilla JavaScript. No Node.js or build step required.

2. Setup & Requirements

What you need

• A modern web browser (Chrome, Firefox, Safari, Edge).
• No server-side language or database required – the template is static HTML/CSS/JS.
• Optional: a local web server or any hosting (shared hosting, VPS, Netlify, Vercel, GitHub Pages) to deploy.

Viewing locally (on your computer)

1. Unzip the template package and open the Main_Files folder.
2. Option A – Double-click: Open index.html in your browser to view the homepage. Other pages (e.g. about.html, pricing.html) can be opened the same way.
3. Option B – Local server (recommended for full behaviour): Some features (e.g. smooth navigation, preloader) work best over HTTP. From the Main_Files folder run:

   # Python 3
   python -m http.server 8000
   
   # Node.js (npx)
   npx serve .
   
   # PHP
   php -S localhost:8000

   Then open http://localhost:8000 in your browser. Replace 8000 with another port if needed.

Opening this documentation

Open Documentation/index.html in your browser (double-click the file or drag it into the browser). You can also go to http://localhost:8000/Documentation/ if you are using a local server.

3. File Structure

Main_Files/
├── index.html          # Homepage
├── about.html          # About page
├── contact.html        # Contact page
├── faq.html            # FAQ page
├── pricing.html        # Pricing page
├── services.html       # Services page
├── blog.html           # Blog listing
├── portfolio.html      # Portfolio / case studies
├── signin.html         # Sign in / Sign up
├── coming-soon.html    # Coming soon page
├── 404.html            # Error page
├── terms.html          # Terms of Service
├── privacy.html        # Privacy Policy
├── cookie.html         # Cookie Policy
├── README.md           # Quick reference (this setup in text form)
├── license.txt         # License & third-party credits
├── Documentation/
│   └── index.html      # This documentation (open in browser)
└── assets/
    ├── css/            # Stylesheets (style.css, bootstrap, animate, swiper, etc.)
    ├── js/             # main.js, preloader.js, swiper, bootstrap, vanilla-tilt
    ├── scss/           # Source SCSS (optional – compile to css/style.css)
    └── images/         # hero, testimonials, showcase, footer, icons

4. Installation (deploy to a live server)

Upload to your web host

1. Unzip the downloaded package and locate the Main_Files folder.
2. Upload all contents of Main_Files to your web server (e.g. public_html, www, or your project root) via FTP, cPanel File Manager, or your host’s file upload.
3. Keep the folder structure intact: assets/, Documentation/, and all HTML files must stay in the same relative positions.
4. Set index.html as the default document if your server requires it (most hosts use index.html by default).
5. Visit your site URL in a browser. No build or compile step is required.

Troubleshooting

• Styles or scripts not loading: Check that assets/css/ and assets/js/ were uploaded and paths in the HTML match (e.g. assets/css/style.css).
• Animations not working: AOS is loaded from a CDN. Ensure your server has internet access or host AOS locally (see Credits for the source).
• Preloader stuck: If the preloader never finishes locally, try opening the site via a local server (see Setup above) instead of file://.

5. Customization

Colors & Theme

Edit CSS variables in assets/css/style.css (or assets/scss/abstracts/_variables.scss if you use SCSS):

:root {
  --bg-dark: #030610;
  --accent-cyan: #7dd3fc;
  --accent-purple: #a78bfa;
  --text-main: #ffffff;
  --text-muted: #d6defc;
}

Fonts

Plus Jakarta Sans is loaded from Google Fonts in each HTML file. To use a different font, replace the <link> in the <head> and update --font-main in your CSS.

Content & Images

Replace placeholder content and images in:

• assets/images/hero/ – Hero section images
• assets/images/testimonials/ – Testimonial avatars
• assets/images/showcase/ – Showcase/feature graphics
• assets/images/footer/ – Footer images

Update contact details (email, address, social links) in contact.html and the footer of each page.

SCSS (Optional)

If you prefer to edit SCSS, run: npx sass assets/scss/style.scss assets/css/style.css

6. Pages Overview

Page	Description
index.html	Homepage – Hero, features, pipeline, integrations, testimonials, pricing, FAQ, CTA
about.html	About – Team, mission, story
contact.html	Contact form, map, sidebar info
faq.html	FAQ accordion + support card
pricing.html	Pricing plans
services.html	Services/features grid
blog.html	Blog listing with cards
portfolio.html	Portfolio/case studies grid
signin.html	Sign in / Sign up forms
coming-soon.html	Coming soon with countdown
404.html	Custom 404 error page
terms.html	Terms of Service
privacy.html	Privacy Policy
cookie.html	Cookie Policy

7. Credits & Licenses

This template uses the following third-party assets. Please ensure you comply with their respective licenses when using this template:

Asset	License	Link
Bootstrap 5	MIT	getbootstrap.com
AOS (Animate On Scroll)	MIT	michalsnik.github.io/aos
Swiper	MIT	swiperjs.com
Remix Icon	Apache 2.0	remixicon.com
Plus Jakarta Sans	SIL Open Font License	Google Fonts
Animate.css	MIT	animate.style
Vanilla Tilt	MIT	vanilla-tilt.js

Thank you for choosing Devanshu AI. For support, please refer to the marketplace where you purchased this template.