Project Overview
Reboost is a modern pet care/social media management HTML template with a dark theme design, featuring gradient accent colors and smooth animations, suitable for quick deployment of pet service or SMM websites.
Tech Stack
- Static HTML5 + CSS3 + Vanilla JS
- Bootstrap 5.3
- Font Awesome 6 (icon font)
- Poppins / Space Grotesk fonts
- Swiper carousel component
- AOS scroll animations
- Isotope masonry layout (Portfolio page)
Project Structure
reboost ver 1.0.3/
├── DOCUMENTATION/
│ ├── index.html # Online documentation (Getting Started, HTML structure, CSS notes, etc.)
│ └── assets/
├── HTML_TEMPLATE/
│ ├── index.html # Homepage entry
│ ├── about-us.html
│ ├── services.html / services-detail.html
│ ├── portofolio.html / portofolio-detail.html
│ ├── blog.html / single-post.html
│ ├── pricing-plan.html / team.html / faqs.html
│ ├── contact-us.html / 404.html
│ ├── css/
│ │ └── style.css # Main stylesheet (includes custom properties, gradients, brush effects)
│ ├── font/ # Font Awesome font files
│ ├── image/ # Logos, image placeholders, icons, etc.
│ └── js/
│ ├── masonry.js # Portfolio masonry layout
│ └── video_embedded.js # Video embed script
Core File Description
HTML_TEMPLATE/index.html— Homepage entry, includes navbar + Hero + services showcase + CTAcss/style.css— Main stylesheet with dark theme colors, gradient text, brush effectsjs/masonry.js— Isotope-powered masonry layout, controls Portfolio gridjs/video_embedded.js— Dynamically generates iframe to embed videos on button clickDOCUMENTATION/index.html— Official online documentation with Getting Started, HTML structure notes, SEO guide, etc.
Quick Start
Simply open HTML_TEMPLATE/index.html in your browser for local preview. All pages are pure static, no build process required.
After modifying image paths (image/ directory) and content, deploy to any static hosting service.
Usage Suggestions
The template defaults to a dark theme, suitable for tech-forward pet service or social media management websites; built-in Bootstrap responsive framework allows page elements to be reused or replaced directly. It is recommended to adjust CSS variables (e.g., --accent-color) in css/style.css according to your brand colors.
