Project Overview
Vakavia is a versatile Bootstrap-based Landing Page template featuring 6 homepage variations, integrated with carousels, video popups, form validation, and other common components. Ideal for app promotion, product introductions, or corporate showcase pages.
Tech Stack
- Bootstrap 5.3.2 (responsive framework)
- jQuery (DOM manipulation & interactions)
- Owl Carousel (client/review carousel)
- FlexSlider (image slider)
- Magnific Popup (video popup)
- Parsley.js (form validation)
- jQuery Easing (smooth scroll animations)
Project Structure
vakaviahtml-210/Vakavia_HTML_v2.1.0/
├── Landing/ # Main template directory for actual use
│ ├── index.html ~ index_6.html # 6 homepage layouts
│ ├── css/
│ │ ├── style.css # Main styles (Loader, buttons, navigation, etc.)
│ │ ├── bootstrap.min.css
│ │ ├── owl.carousel.css
│ │ ├── flexslider.css
│ │ └── themify-icons.css
│ ├── js/
│ │ ├── app.js # Core interaction logic (carousel, form, popup)
│ │ ├── jquery.min.js
│ │ ├── bootstrap.bundle.min.js
│ │ └── owl.carousel.min.js
│ └── images/
└── Documentation/ # Official documentation (can be ignored)
Key File Descriptions
Landing/index.html— Main homepage template with complete sections: Hero, Features, Services, Team, Pricing, ContactLanding/css/style.css— Theme's main stylesheet defining Loader, buttons, navigation bar, background images, etc.Landing/js/app.js— Interaction logic: navigation scrolling, Owl Carousel initialization, video popup, AJAX form submissionLanding/index_2.html ~ index_6.html— Different homepage layout variations, replaceable as needed
Quick Start
Open Landing/index.html directly in a browser, or use any local server (e.g., Live Server). All resources are CDN or local files — no additional dependencies required.
Usage Recommendations
- For form submission, configure a backend endpoint or modify the
urlin$.ajaxwithinapp.jsto your actual API address - Image assets are located in the
images/directory; replace them with your project's actual media - To modify the theme color, locate
.text-custom(#f56363 red) and related variables instyle.css
