Project Overview
Levonic is a multipurpose responsive landing page template built on Bootstrap, offering 6 different homepage variants (index-1 through index-6). It is suitable for startups, SaaS product showcases, resume portfolios, and more. The template includes interactive features such as smooth scroll navigation, counter animations, typewriter effects, and client carousels.
Tech Stack
- Bootstrap 5.3.2
- jQuery (handles form validation and DOM manipulation)
- Gumshoe (navigation highlighting)
- SmoothScroll (smooth scrolling)
- tiny-slider (client carousel)
- SCSS (source code included, customizable theme variables)
- PHP (contact.php backend form)
Project Structure
Levonic_HTML_v2.0.0/
├── HTML/
│ ├── index-*.html # 6 homepage variants
│ ├── css/
│ │ └── style.css # Main stylesheet
│ ├── js/
│ │ └── app.js # Core interaction logic
│ ├── images/ # Background images and assets
│ ├── fonts/ # Icon fonts
│ ├── php/
│ │ └── contact.php # Contact form backend
│ └── scss/ # SCSS source files
└── Documentation/ # Official documentation
Key Files
HTML/index-*.html— 6 landing page entry points, choose or combine as neededHTML/css/style.css— Main stylesheet containing general layout, color system, buttons, responsive breakpoints, etc.HTML/js/app.js— Interaction logic: sticky navigation, form validation, carousel, counter animations, typewriter effectHTML/php/contact.php— Contact form POST receiver, requires a server environmentHTML/scss/_general.scss— SCSS variables and general styles, can be compiled to customize theme colorsHTML/scss/_counter.scss— Counter section styles, background referencesimages/img-1.jpg
Quick Start
Static usage: Simply open HTML/index-1.html (or any index variant) in a browser — no build tools required.
Form functionality: Deploy the HTML directory to a PHP-enabled web server and update the form action to the correct path.
Custom styling: Modify files in the scss/ directory, then regenerate style.css using an SCSS compiler.
Usage Suggestions
The template uses a default brand color of blue-purple (#565ae3). To change it, globally replace the color at the top of style.css or in the corresponding SCSS variables. The contact.php file is a basic example; for production, add email sending logic and security validation.
