WaveSurfer - HTML Template


WaveSurfer is a sleek and modern HTML template, for surfing and water sports enthusiasts. Dive into the world of adventure with this sleek and dynamic theme designed specifically for websites related to surfing, kiteboarding, paddleboarding, and other water sports activities. With its vibrant design, immersive imagery, and user-friendly interface, WaveSurfer is perfect for surf schools, water sports clubs, beach resorts, and individual athletes looking to showcase their passion online. Whether you’re a professional surfer or a beach lover, WaveSurfer has everything you need to make a splash on the web. Get ready to ride the waves with WaveSurfer!

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. videos - Includes Video Files
  5. webfonts - Includes Fonts Files

Files

  1. about.html - About us Page
  2. activities.html - Activities Page
  3. blog-grid.html - Blogs with Grid Page
  4. blog-left-sidebar.html - Blogs with Left Sidebar Page
  5. blog-no-sidebar.html - Blogs with No Sidebar Page
  6. blog-right-sidebar.html - Blogs with Right Sidebar Page
  7. blog-single.html - Blog Single Page
  8. blog-type-quote.html - Blog Type of Quote Page
  9. blog-type-standard.html - Blog Type of Standard Page
  10. blog-type-video.html - Blog Type of Video Page
  11. blogs.html - Blogs Main Page
  12. cart.html - Cart Page
  13. checkout.html - Checkout Page
  14. contact.html - Contact Page
  15. downloads.html - Shop > Shop Pages > My Account > Downloads Page
  16. edit-account.html - Shop > Shop Pages > My Account > Account Details Page
  17. edit-address.html - Shop > Shop Pages > My Account > Addresses Page
  18. events-list.html - Events List Page
  19. events-single.html - Event Single Page
  20. faq.html - FAQ Page
  21. form-process.php - Contact Form Process File
  22. gallery.html - Gallery Page
  23. home-page-2.html - Second Home Page
  24. index.html - Main Page
  25. lessons-list.html - Lessons Page
  26. lessons-single.html - Lessons Single Page
  27. my-account.html - Shop > Shop Pages > My Account Page
  28. orders.html - Shop > Shop Pages > My Account > Orders Page
  29. our-crew.html - Our Crew Page
  30. our-services.html - Our Services Page
  31. pricing-plans.html - Pricing Plans Page
  32. product-single.html - Product Single Page
  33. shop-four-columns.html - Shop with Four Columns Page
  34. shop-full-width.html - Shop with Full Width Page
  35. shop-three-columns.html - Shop with Three Columns Page
  36. shop.html - Shop Main Page

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

  1. all.css - Font Icons - Font Awesome CSS
  2. animate.css - Animated CSS
  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

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

  1. bootstrap.min.js - Bootstrap Framework
  2. function.js - Configuration code for layouts
  3. gsap.min.js - GSAP Library
  4. jquery.counterup.min.js - Animates a number from zero, counting up to the target value.
  5. jquery.magnific-popup.min.js - Magnific Popup
  6. jquery.mb.YTPlayer.min.js - Youtube Video Background
  7. jquery.slicknav.js - Responsive Menu
  8. jquery.waypoints.min.js - Trigger a function when you scroll to an element
  9. jquery-3.7.1.min.js - Javascript Library
  10. magiccursor.js - Magic Animated Cursor
  11. parallaxie.js - Parallax Effect
  12. plyr.js - Audio Player Library
  13. ScrollTrigger.min.js - Trigger a Text Effect
  14. SmoothScroll.js - Smooth Scroll
  15. SplitText.js - Split Paragram to Words and Charactor
  16. swiper-bundle.min.js - Swiper Carousel
  17. validator.min.js - Form Validation
  18. wow.js - Animation Effect
Please note that form-process.php file is used for sending an email
 
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: