# Toddly - Colorful Kindergarten & Preschool HTML5 Template

Created: 01/06/2025

Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to open a new ticket at our support forum

### 24/7 Support: Send us a message

Email: info@vecuro.com

## Template Installation

### FTP Upload:

- Open up your FTP manager and connect to your hosting
- Browse to required directory (Normally public_html)
- Upload the files inside toddly folder.
- Below is the folder structure you will see in your website root directory:
  - `toddly/assets/css` - Stylesheet files
  - `toddly/assets/fonts` - Fonts files
  - `toddly/assets/img` - Image files
  - `toddly/assets/js` - JS files
  - `toddly/assets/sass` - SCSS files
  - `mail.php` - PHP files for Contact Form

# HTML Structure

We are used Bootstrap Latest Version `v5.3.3` framework & GSAP, Lenis Smooth Scroll in this template.
The general template structure is the same throughout the template. Here is the general structure.

                <head>
                  <meta charset="utf-8">
                  <meta http-equiv="x-ua-compatible" content="ie=edge">
                  <title>
                    Toddly - Colorful Kindergarten & Preschool HTML5 Template | Vecuro | Home 1
                  </title>
                  <meta name="author" content="vecuro">
                  <meta name="description" content="Toddly - Colorful Kindergarten & Preschool HTML5 Template">
                  <meta name="keywords" content="Toddly - Colorful Kindergarten & Preschool HTML5 Template">
                  <meta name="robots" content="INDEX,FOLLOW">
                  <!-- Mobile Specific Metas -->
                  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                  <!-- Favicons - Place favicon.ico in the root directory -->
                  <link rel="apple-touch-icon" sizes="57x57" href="assets/img/favicons/apple-icon-57x57.png">
                  <link rel="apple-touch-icon" sizes="60x60" href="assets/img/favicons/apple-icon-60x60.png">
                  <link rel="apple-touch-icon" sizes="72x72" href="assets/img/favicons/apple-icon-72x72.png">
                  <link rel="apple-touch-icon" sizes="76x76" href="assets/img/favicons/apple-icon-76x76.png">
                  <link rel="apple-touch-icon" sizes="114x114" href="assets/img/favicons/apple-icon-114x114.png">
                  <link rel="apple-touch-icon" sizes="120x120" href="assets/img/favicons/apple-icon-120x120.png">
                  <link rel="apple-touch-icon" sizes="144x144" href="assets/img/favicons/apple-icon-144x144.png">
                  <link rel="apple-touch-icon" sizes="152x152" href="assets/img/favicons/apple-icon-152x152.png">
                  <link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons/apple-icon-180x180.png">
                  <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/favicon-32x32.png">
                  <link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicons/favicon-96x96.png">
                  <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicons/favicon-16x16.png">
                  <link rel="manifest" href="assets/img/favicons/manifest.json">
                  <meta name="msapplication-TileColor" content="#ffffff">
                  <meta name="msapplication-TileImage" content="assets/img/favicons/ms-icon-144x144.png">
                  <meta name="theme-color" content="#ffffff">
                  <!--==============================
                    Google Fonts
                  ============================== -->
                  <link rel="preconnect" href="https://fonts.googleapis.com">
                  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
                  <link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Baloo+2:wght@400..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
                  <!--==============================
                      All CSS File
                  ============================== -->
                  <!-- Bootstrap -->
                  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
                  <!-- Fontawesome Icon -->
                  <link rel="stylesheet" href="assets/css/fontawesome.min.css">
                  <!-- Magnific Popup -->
                  <link rel="stylesheet" href="assets/css/magnific-popup.min.css">
                  <!-- Slick Slider -->
                  <link rel="stylesheet" href="assets/css/swiper-bundle.css">
                  <!-- animate css -->
                  <link rel="stylesheet" href="assets/css/animate.min.css">
                  <!-- Theme Custom CSS -->
                  <link rel="stylesheet" href="assets/css/style.css">
                </head>

                <body class="vs-body">
                <!-- [if lte IE 9] -->
                <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
                  <![endif]-->

                  <!-- ********************************
                      Code Start From Here
                  ******************************** -->

                  <!-- ==============================
                    Preloader
                  ============================== -->
                  <div class="preloader">
                  .
                  .
                  </div>

                  <!-- ==============================
                    Mobile Menu
                  ============================== -->
                  <div class="vs-menu-wrapper">
                  .
                  .
                  </div>

                  <!--==============================
                    Offcanvas
                  ============================== -->
                  <div class="sidemenu-wrapper">
                  .
                  .
                  </div>

                  <!-- ==============================
                    Popup Search Box
                  ============================== -->
                  <div class="popup-search-box">
                  .
                  .
                  </div>

                  <!--==============================
                    Cart Sidebar
                  ===============================-->
                  <div class="sideCart-wrapper">
                  .
                  .
                  </div>

                  <!-- Header Layout1 -->
                  <header id="header" class="vs-header">
                  .
                  .
                  </header>
                  <!-- Header Layout1 End -->
                  <!--********************************
                      Start Main Content
                  ******************************** -->
                  <main class="vs-page__main">
                    <!-- Main Layouts -->

                    <section></section>
                    .
                    .
                    <div>
                    .
                    .
                    </div>
                    .
                    .
                    <section></section>

                    </footer>
                    <!-- Footer Start -->
                    </main>
                    <!--********************************
                        End Main Content
                    ******************************** -->

                  <button class="back-to-top" id="backToTop" aria-label="Back to Top">
                    <span class="progress-circle">
                        <svg viewBox="0 0 100 100">
                            <circle class="bg" cx="50" cy="50" r="40"></circle>
                            <circle class="progress" cx="50" cy="50" r="40"></circle>
                        </svg>
                        <span class="progress-percentage" id="progressPercentage">0%</span>
                    </span>
                  </button>

                  <!-- ********************************
                  Code End Here
                  ******************************** -->

                  <!-- ==============================
                        All Js File
                  ============================== -->

                  <!-- Jquery -->
                  <script src="assets/js/vendor/jquery-3.7.1.min.js"></script>

                  <!-- Bootstrap -->
                  <script src="assets/js/bootstrap.min.js"></script>

                  <!-- WOW.js Animation -->
                  <script src="assets/js/wow.min.js"></script>

                  <!-- Magnific Popup -->
                  <script src="assets/js/jquery.magnific-popup.min.js"></script>

                  <!-- Gsap -->
                  <script src="assets/js/gsap.min.js"></script>
                  <script src="assets/js/ScrollTrigger.min.js"></script>
                  <script src="assets/js/gsap-scroll-to-plugin.js"></script>
                  <script src="assets/js/SplitText.js"></script>
                  <script src="assets/js/lenis.min.js"></script>

                  <!-- Swiper Slider -->
                  <script src="assets/js/swiper-bundle.js"></script>

                  <!-- Main Js File -->
                  <script src="assets/js/main.js"></script>

                </body>
              </html>

# Favicon Settings

Favicon Will be found in `<head>` section.

                <link rel="apple-touch-icon" sizes="57x57" href="assets/img/favicons/apple-icon-57x57.png">
                <link rel="apple-touch-icon" sizes="60x60" href="assets/img/favicons/apple-icon-60x60.png">
                <link rel="apple-touch-icon" sizes="72x72" href="assets/img/favicons/apple-icon-72x72.png">
                <link rel="apple-touch-icon" sizes="76x76" href="assets/img/favicons/apple-icon-76x76.png">
                <link rel="apple-touch-icon" sizes="114x114" href="assets/img/favicons/apple-icon-114x114.png">
                <link rel="apple-touch-icon" sizes="120x120" href="assets/img/favicons/apple-icon-120x120.png">
                <link rel="apple-touch-icon" sizes="144x144" href="assets/img/favicons/apple-icon-144x144.png">
                <link rel="apple-touch-icon" sizes="152x152" href="assets/img/favicons/apple-icon-152x152.png">
                <link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons/apple-icon-180x180.png">
                <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/favicon-32x32.png">
                <link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicons/favicon-96x96.png">
                <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicons/favicon-16x16.png">

# Font Settings

Font Will be found in `<head>` section.

            <link rel="preconnect" href="https://fonts.googleapis.com">
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
            <link
              href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Baloo+2:wght@400..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
              rel="stylesheet">

# Logo Settings

Logo Will be found in `<header>` Layout.

            <div class="vs-header__logo">
              <a href="index.html"><img src="assets/img/logo.svg" alt="Toddly" class="logo"></a>
            </div>

## Pages

### Total 29 Pages

#### 3 Home Pages

- `index.html` => Home Page 1
- `index-2.html` => Home Page 2
- `index-3.html` => Home Page 3

#### 26 Inner Pages

1. `404.html` => Error Page
2. `about.html` => About Page
3. `auth.html` => Authentication
4. `blog.html` => Blog List
5. `blog-details.html` => Blog Details
6. `cart.html` => Shopping Cart
7. `checkout.html` => Checkout Page
8. `class.html` => Class List
9. `class-details.html` => Class Details
10. `coming-soon.html` => Coming Soon
11. `contact.html` => Contact Page
12. `event-details.html` => Event Details
13. `events.html` => Events List
14. `gallery.html` => Gallery
15. `mail.php` => Contact Form Backend
16. `myaccount.html` => User Account
17. `registration.html` => Register Page
18. `service-details.html` => Service Details
19. `shop.html` => Shop Grid
20. `shop-details.html` => Product Details
21. `shop-full.html` => Shop Fullwidth
22. `shop-right-sidebar.html` => Shop Sidebar
23. `team.html` => Team List
24. `team-details.html` => Team Member Details
25. `why-choose-us.html` => Why Choose Us
26. `wishlist.html` => Wishlist

## Fonts

### Google free fonts:

- Baloo 2 & Roboto & Amatic SC

Open assets/css/style.css file to find the fonts name from typography area. That's it...

## Source File (CSS)

<!-- Bootstrap --> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <!-- Fontawesome Icon --> <link rel="stylesheet" href="assets/css/fontawesome.min.css"> <!-- Magnific Popup --> <link rel="stylesheet" href="assets/css/magnific-popup.min.css"> <!-- Slick Slider --> <link rel="stylesheet" href="assets/css/swiper-bundle.css"> <!-- animate css --> <link rel="stylesheet" href="assets/css/animate.min.css"> <!-- Theme Custom CSS --> <link rel="stylesheet" href="assets/css/style.css">

## Source File (Js)

<!-- Jquery --> <script src="assets/js/vendor/jquery-3.7.1.min.js"></script> <!-- Bootstrap --> <script src="assets/js/bootstrap.min.js"></script> <!-- WOW.js Animation --> <script src="assets/js/wow.min.js"></script> <!-- Magnific Popup --> <script src="assets/js/jquery.magnific-popup.min.js"></script> <!-- GSAP --> <script src="assets/js/gsap.min.js"></script> <script src="assets/js/ScrollTrigger.min.js"></script> <script src="assets/js/gsap-scroll-to-plugin.js"></script> <script src="assets/js/SplitText.js"></script> <script src="assets/js/lenis.min.js"></script> <!-- Swiper Slider --> <script src="assets/js/swiper-bundle.js"></script> <!-- Main Js File --> <script src="assets/js/main.js"></script>

## Customization

### How to Change Menu Links

### How to Change Email Address

⇧