Modern Landing Page Template
Dariush Samari
Landing Page Demo
A fully-featured, modern landing page template showcasing advanced web design techniques using HTML5, Bootstrap 5, AOS (Animate On Scroll), and vanilla JavaScript. It includes theming, a loader, parallax hero, animations, responsive layout, interactive components, and a newsletter form.
🔧 Features
- Page Loader: Full-screen spinner overlay until all assets load.
- Dark/Light Mode Toggle: Switch between light and dark themes with smooth CSS class rotation.
- Parallax Hero Section: Full-height background image with centered dynamic text and AOS fade-down animation.
- Dynamic Hero Text: Rotating keywords
Innovation, Creativity, Excellence) via JavaScript.- Modal Popup: Bootstrap modal triggered from the hero
Learn More button.- Features Grid: Three-card responsive section with flip animations on scroll.
- Image Carousel: Bootstrap carousel with uniform-height images using
object-fit: cover.- Newsletter Form: Centered email subscription form.
- Custom Buttons: Globally styled black buttons overriding Bootstrap defaults.
- Responsive Design: Built on Bootstrap’s grid and utility classes for mobile-first layouts.
🗂️ File Structure
⚙️ Installation & Usage
1. Clone or Download this repository:
2. Host Locally
- Simply open
index.html in your browser, or - Serve via a simple HTTP server (recommended for AOS animations):
3. Ensure Internet Access for CDN assets (Bootstrap & AOS). To use locally, download and link those libraries instead.
🎨 Customization
- Theme Colors: Tweak CSS variables in
:root of style.css:- Hero Images: Replace the URL in the inline
style of the .parallax section or point to local assets.- Carousel Slides: Edit the
<img> src attributes within the #demoCarousel container.- Loader Spinner Color: Change
.spinner-border class to desired utility (e.g., text-primary).- Toggle Label Text: Adjust the logic in the
<script> for modeLabel.textContent and the checkbox state.- Animation Settings: Modify
AOS.init parameters (e.g., duration, delay, easing) or per-element data-aos-* attributes.- Custom Buttons: The
.btn override in style.css can be removed or altered if using default Bootstrap styles.📚 Dependencies
- [Bootstrap 5.3.0](https://getbootstrap.com/)
- [AOS 2.3.4](https://michalsnik.github.io/aos/)
All other functionality is implemented with vanilla JavaScript and CSS.
🤝 Credits
- Bootstrap Components & Grid — Bootstrap contributors
- Animations — AOS (Animate On Scroll)
- Loader Spinner — Bootstrap utility classes
Image Credits
Photo by Luca Dugaro
📜 License
This project is open source and available under the MIT License.
Like this project
Posted Jul 20, 2025
A fully-featured, modern landing page template showcasing advanced web design techniques using HTML5, Bootstrap 5, AOS, and vanilla JavaScript.
