Hey there, fruit lovers and web developers! 🌟
We’re excited to present a brand-new Fruit Shop HTML Template that’s perfect for setting up your own online fruit store. Whether you're launching a small fruit shop or expanding your grocery business online, this fresh, responsive, and easy-to-use template will get you up and running in no time!
Here’s the starter template that you can use to create your website and start selling your fresh fruits.
Starter Template Code:
HTML Code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" /> <link rel="stylesheet" href="./assets/css/style.css"> <link rel="stylesheet" href="./assets/css/responsive.css"> <title>Fresh Fruit</title> </head> <body> <!-- Header Section Starts Here --> <!-- Header Section Ends Here --> <!-- Hero Section Starts Here --> <!-- Hero Section Ends Here --> <!-- Premium Fruits Section Starts Here --> <!-- Premium Fruits Section Ends Here --> <!-- Fresh Fruits Section Starts Here --> <!-- Fresh Fruits Section Ends Here --> <!-- About Us Section Starts Here --> <!-- About Us Section Ends Here --> <!-- Why Choose Us Section Starts Here --> <!-- Why Choose Us Section Ends Here --> <!-- Newsletter Section Starts Here --> <!-- Newsletter Section Ends Here --> <!-- Contact Section Starts Here --> <!-- Contact Section Ends Here --> <!-- Footer Section Starts Here --> <!-- Footer Section Ends Here --> <script src="https://unpkg.com/scrollreveal"></script> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> <script src="./assets/js/script.js"></script> </body> </html> CSS Code:
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap'); :root { --primary-color: #f9cf23; --light-color: #fff; --dark-color: #000; --secondary-color: #FAF9F6; --primary-font: "FreshFruits"; --secondary-font: "Poppins", sans-serif; } * { padding: 0; margin: 0; box-sizing: border-box; scroll-behavior: smooth; } @font-face { font-family: "FreshFruits"; src: url("../Font.ttf"); } How to Use This Template:
Step 1: Link Your CSS and JS Files
Make sure to include the stylesheet and JavaScript libraries such as Font Awesome, Swiper, and ScrollReveal. These libraries will help enhance your website with beautiful icons, smooth animations, and responsive sliders.
Step 2: Customize Sections
This template comes with placeholders for different sections of your website:
- Header Section: For your store’s logo and navigation.
- Hero Section: A beautiful introduction banner.
- Premium Fruits and Fresh Fruits Sections: To showcase your fruit products.
- About Us and Why Choose Us Sections: Let your customers know why they should shop with you.
- Newsletter and Contact Sections: To capture customer details and offer support.
Step 3: Use Swiper for Interactive Sliders
Swiper.js is included for setting up sliders to display your fruit products interactively. You can customize the Swiper functionality by updating the JavaScript code in script.js.
Ready to Customize?
Now that you have the template, you can modify it to fit your brand. Add your own content, tweak the styles, and create a standout fruit shop website!
Tutorial: Watch the Full Step-by-Step Guide 🎥
For a detailed walkthrough of how to edit and deploy this template, check out our video tutorial.