Create breathtaking AI-generated images with just a few clicks. Our advanced algorithms turn your text descriptions into high-quality visuals in seconds.
Preview our pages and access documentation
Documentation for the AI Image Generator Website
Explore our comprehensive Auth Pages
Explore our comprehensive Other Pages
AIGenerator is a modern and powerful AI Image Generator website template. It's designed for showcasing cutting-edge AI technology that transforms text prompts into stunning visuals. Built with HTML5, CSS3, Bootstrap 5, SCSS, and JavaScript, it offers a dynamic and engaging user experience across all devices.
Leverage state-of-the-art AI to generate high-quality, photorealistic images.
Offer users a choice from over 50+ artistic styles to craft unique masterpieces.
Generate images in seconds and download them in stunning 4K resolution.
imgai/
├── images/
├── css/
│ ├── style.css
│ ├── bootstrap
│ └── swiper-bundle.min.css
├── js/
│ ├── bootstrap.bundle.min.js
│ ├── gsap.min.js
│ ├── script.js
│ ├── scroll-trigger.min.js
│ └── swiper-bundle.min.js
├── scss/
│ ├── components/
│ ├── layout/
│ ├── plugin/
│ ├── _variables.scss
│ └── style.scss
├── coming-soon.html
├── index.html
├── index2.html
├── not-found.html
├── signup.html
├── signin.html
├── CHANGELOG.md
└── README.mdEdit scss/_variables.scss to update the color scheme and theme variables.
Replace images in images/ with your own high-quality visuals.
Update js/script.js to modify the GSAP animations and interactive effects.
Edit text content directly in the respective HTML files for each page (e.g., index.html, signin.html).
Modify SCSS files in scss/ for layout and design changes.
Here are the key libraries and their usage in this project:
| Library | Version | Usage |
|---|---|---|
Bootstrap 5 |
5.3.x | CSS framework for responsive layout and components |
Bootstrap Icons |
1.10.x | Icon library for Bootstrap |
Remix Icon |
3.5.x | Additional icon set used throughout the website |
Swiper |
10.x | Touch slider for image galleries and content sliders |
GSAP |
3.12.x | Animation library for smooth transitions and effects |
css/ and js/ directories.scss/ directory and compile to css/style.css.assets/ - Images and icons used
throughout the site
scss/ - Source SCSS files for
styling
js/ - JavaScript functionality
css/ - Compiled CSS files
index.html - Homepage with hero section, features, and gallery.
signin.html - User sign-in page.
signup.html - User sign-up page.
scss/_variables.scss - Customize colors, fonts, and other variables.
js/script.js - Main JavaScript file with GSAP animations.
_variables.scss and recompile the SCSS.
Edit scss/_variables.scss to customize colors:
// Theme Colors
$primary: #4f46e5;
$secondary: #6c757d;
$success: #10b981;
$info: #06b6d4;
$warning: #f59e0b;
$danger: #ef4444;
$light: #f8f9fa;
$dark: #212529;
$purple: #8b5cf6;Font settings in scss/_variables.scss:
// Font Families
$font-family-base: "Sora", sans-serif; // For body text
$font-family-code: "Quantico", sans-serif; // For headings and special elements
// Font Sizes
$font-size-base: 1rem;
// Google Fonts import in scss/_variables.scss:
@import url('https://fonts.googleapis.com/css2?family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Sora:[email protected]&display=swap');We offer 6 months of support for any questions or issues you may encounter.
Discover the powerful technologies and tools that make our platform exceptional
Web Structure
Modern Styling
Responsive UI Framework
Smooth Animations
Mobile Friendly
Web Typography
Vector Graphics
Clean Aesthetics
Flexible Components
Optimized Structure
Clear Guides
Always Available