Project Overviewlink

Petopia is a static HTML template designed for pet care and animal rescue organizations. Built with the Bootstrap 5.3 framework, it features a clean, modern, and fully responsive interface. The template includes over a dozen complete pages such as Home, Services Detail, Blog, Team, Gallery, etc., with interactive features like carousels, video embedding, and masonry gallery, making it suitable for quickly building pet service websites.

Tech Stacklink

• HTML5 + CSS3 (custom styles + CSS variable system)
• Bootstrap 5.3 (responsive layout framework)
• jQuery (interaction logic)
• Font Awesome 6 (icon library)
• Swiper (carousel component)
• AOS / Animate.css (page animations)
• Inter font + Just Another Hand handwriting font

Project Structurelink

petopiohtml-10/Petopia HTML/
├── DOCUMENTATION/          # Official documentation
│   └── index.html
└── HTML_TEMPLATE/          # Actual template files
    ├── index.html          # Home page
    ├── about-us.html       # About us
    ├── services.html       # Services list
    ├── services-detail.html
    ├── blog.html           # Blog list
    ├── single-post.html    # Blog detail
    ├── team.html           # Team members
    ├── gallery.html        # Gallery
    ├── pricing-plan.html   # Pricing plans
    ├── faqs.html           # Frequently asked questions
    ├── contact-us.html     # Contact us
    ├── 404.html
    ├── css/
    │   └── style.css       # Main stylesheet (includes CSS variable definitions)
    ├── js/
    │   ├── script.js       # Main script
    │   ├── masonry.js      # Masonry layout (jQuery Isotope)
    │   ├── swiper-script.js # Carousel logic
    │   ├── video_embedded.js # Video click embedding
    │   └── share.js
    ├── font/               # Font Awesome font files
    ├── image/              # Image assets
    └── php/
        └── form_process.php # Backend form processing

Core File Descriptionslink

• HTML_TEMPLATE/css/style.css — Main stylesheet defining color variables, typography, layout components, and animations
• HTML_TEMPLATE/js/script.js — Main page interaction logic
• HTML_TEMPLATE/js/masonry.js — Masonry gallery layout logic
• HTML_TEMPLATE/js/video_embedded.js — Dynamically embeds video iframes on button click
• HTML_TEMPLATE/php/form_process.php — Backend processing script for the contact form

Quick Startlink

1. Open HTML_TEMPLATE/index.html directly in a browser to preview the full effect
2. To run with a local server, execute:
   bashcontent_copyCopy

   python3 -m http.server 8080
   

   Then visit http://localhost:8080/HTML_TEMPLATE/

Usage Recommendationslink

• Before formal deployment, deploy php/form_process.php to a PHP-supported server, or replace it with another backend service
• Template images are placeholders (dummy-img-*), replace them with actual pet/organization images
• Animation libraries are loaded via CDN, ensure the deployment environment has internet access