Project Overviewlink

Toddly is a colorful HTML5 website template designed for kindergartens and preschool education institutions. Built with Bootstrap 5.3.3, it integrates GSAP animations, Lenis smooth scrolling, and Swiper carousel components. The template includes 30+ pages such as Home, Blog, Courses, Shop, Team, and Events, making it ideal for quickly building educational business websites.

Tech Stacklink

• HTML5 + CSS3 (static pages)
• Bootstrap v5.3.3
• jQuery
• GSAP (animation engine)
• Lenis (smooth scrolling)
• Swiper Slider (carousel component)
• Google Fonts (Baloo 2, Roboto, Amatic SC)

Project Structurelink

toddlyhtml-10/
├── documentation/           # Template documentation
│   ├── index.html
│   └── assets/
│       ├── css/style.css
│       └── js/main.js
└── download version/        # Complete template package (production-ready)
    ├── index.html
    ├── about.html
    ├── blog.html
    ├── shop.html
    ├── contact.html
    ├── mail.php             # Contact form backend
    └── assets/
        ├── css/             # All stylesheets
        ├── fonts/           # Font files
        └── js/              # All scripts

Key Fileslink

• download version/index.html — Homepage template with Hero carousel section
• download version/assets/css/style.css — Main stylesheet (includes full CSS variable system)
• download version/assets/js/main.js — Core interaction scripts (GSAP, Swiper, animations, and 39 functional modules)
• download version/mail.php — AJAX contact form backend processing
• documentation/index.html — Template usage documentation

Quick Startlink

1. Upload the contents of the download version folder to your server's root directory
2. Open index.html directly in your browser to preview
3. The contact form requires server-side PHP environment support

Usage Tipslink

The template uses a modular structure — simply locate the corresponding HTML and CSS blocks for modifications. For dark themes or custom color schemes, quickly apply global color changes via the CSS variables (e.g., --vs-theme-color1) at the top of style.css.