Rosella - HTML Template


Rosella is a modern, elegant, and fully responsive HTML template crafted specifically for beauty salons, hair studios, skincare clinics, spas, makeup artists, and wellness centers. Designed with a perfect balance of aesthetics and usability, Rosella helps you showcase your services, treatments, portfolios, pricing packages, and booking information with a luxurious, clean, and professional online presence.

The template folders and files are organized as follows.

Folders

  1. css - Includes CSS files
  2. images - Includes Images Files
  3. js - Includes Javascript Files
  4. webfonts - Includes Fonts Files

Files

  1. about-us.html - About Us Page
  2. blog-grid.html - Blog Grid Page
  3. blog-single.html - Blog Single Page
  4. blog-three-columns.html - Blog Three Columns Page
  5. blogs.html - Blog Page
  6. blogs-list.html - Blog List Page
  7. contact.html - Contact Page
  8. cart.html - Cart Page
  9. checkout.html - Checkout Page
  10. downloads.html - Shop > Shop Pages > My Account > Downloads Page
  11. edit-account.html - Shop > Shop Pages > My Account > Account Details Page
  12. edit-address.html - Shop > Shop Pages > My Account > Addresses Page
  13. error.html - 404 Error Page
  14. faq.html - FAQ Page
  15. form-process.php - Contact Form Processing Script
  16. home-slider.html - Home Slider Page
  17. home-video.html - Home Video Page
  18. index.html - Home Page
  19. my-account.html - Shop > Shop Pages > My Account Page
  20. orders.html - Shop > Shop Pages > My Account > Orders Page
  21. our-team.html - Our Team Page
  22. pricing-plans.html - Pricing Plans Page
  23. service-single.html - Service Details Page
  24. service.html - Services Page
  25. shop.html - Shop Main Page
  26. shop-single.html - Shop Single Page
  27. team-detail.html - Team Member Details Page
  28. testimonials.html - Testimonials Page
  29. wishlist.html - Wishlist Page

We have used the following CSS files to design various layouts.

  1. all.css - Font Icons - Font Awesome CSS
  2. animate.css - CSS animations library
  3. bootstrap.min.css - Bootstrap Framework CSS
  4. custom.css - Custom CSS for layouts
  5. magnific-popup.css - CSS of Popup for screenshot, images & video
  6. mousecursor.css - Mouse Cursor CSS
  7. plyr.css - Audio Player CSS
  8. slicknav.min.css - Responsive Slick Menu CSS
  9. swiper-bundle.min.css - Swiper Carousel CSS
  10. select2.css - Select2 dropdown styles
  11. select2.min.css - Select2 dropdown styles (minified)
  12. cursor.css - Cursor Styles (inside JS folder)

We have used the following Javascript files to design various layouts.

  1. bootstrap.js - Bootstrap JavaScript
  2. bootstrap.min.js - Minified Bootstrap JavaScript
  3. script.js - Custom Functions
  4. gsap.min.js - GSAP Animation Library
  5. jquery-3.7.1.min.js - jQuery v3.7.1
  6. jquery.counterup.min.js - CounterUp Plugin
  7. jquery.magnific-popup.min.js - Magnific Popup Plugin
  8. jquery.mb.YTPlayer.min.js - YouTube Background Player
  9. jquery.slicknav.js - SlickNav Menu
  10. jquery.waypoints.min.js - Waypoints Plugin
  11. magiccursor.js - Custom Cursor Script
  12. plyr.js - Media Player (Plyr)
  13. ScrollTrigger.min.js - GSAP ScrollTrigger Plugin
  14. select2.full.min.js - Select2 Dropdown Plugin
  15. SmoothScroll.js - Smooth Scrolling
  16. SplitText.js - GSAP SplitText Plugin
  17. swiper-bundle.min.js - Swiper Slider
  18. validator.min.js - Form Validation
  19. wow.js - WOW.js Animation on Scroll
  20. cursor.js - Cursor Script (inside cursor folder)
Please note that form-process.php file is used for sending an email in contact form
 
You need to add your email, please open form-process.php file and edit variable $EmailTo value.
For ex. $EmailTo = info@yourdomain.com;

Font Library

  1. Fontawesome : Here you can see icon cheatsheet https://fontawesome.com/search
Bootstrap framework:
Icons: