<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Wellness hub</title> <script src="https://kit.fontawesome.com/0e53af926d.js" crossorigin="anonymous" ></script> <link rel="stylesheet" href="style.css" /> </head> <body> <!--header section--> <header> <div id="header"> <nav class="header-list-nav"> <div class="header-logo"> <a href="indext.html"><img src="images/logo.png" height="50px" alt="" /></a> </div> <ul> <li><a class="active" href="index.html">Home</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </nav> <div class="header-list-icon"> <a href=""><i class="fa fa-bag-shopping"></i></a> <a href="" class="menu"><i class="fa fa-bars" aria-hidden="true"></i></a> </div> <!-- <div class="sub-menu-wrap"> <div class="sub-menu"> <a class="sub-menu-link"> <i class="fa-solid fa-house"></i> <p>Home</p> </a> <a class="sub-menu-link"> <i class="fa-solid fa-house"></i> <p>Home</p> </a> <a class="sub-menu-link"> <i class="fa-solid fa-house"></i> <p>Home</p> </a> </div> </div> --> </div> </header> <section id="landing"> <h2>Unbeatable deals</h2> <h1>On healthy meals</h1> <!-- <p>25% off!</p> --> <button>Discover now</button> </section> <section id="shops" class="main-padding"> <div class="shops-collection"> <h1>Shop1</h1> <h1>Shop2</h1> <h1>Shop3</h1> <h1>Shop4</h1> <h1>Shop5</h1> <h1>Shop6</h1> </div> </section> <section class="product-section" > <div class="top main-padding"> <h1>Top dishes</h1> <div class="view_all_btn"> <a href=""></a><button>View all</button></a> </div> </div> <div class="slider"> <div class="slide"> <div class="pro-collection"> <div class="product-cart"> <img src="images/meal1.jpg" alt="product image" /> <span>Shop</span> <h4>Healthy Dish</h4> <div class="stars"> <i class="fa-solid fa-star"></i> <span><span class="specific">4.5 </span>(630)</span> </div> <h4 class="price">EGP 260</h4> <a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a> </div> <div class="product-cart"> <img src="images/meal1.jpg" alt="product image" /> <span>Shop</span> <h4>Healthy Dish</h4> <div class="stars"> <i class="fa-solid fa-star"></i> <span><span class="specific">4.5 </span>(630)</span> </div> <h4 class="price">EGP 260</h4> <a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a> </div> <div class="product-cart"> <img src="images/meal1.jpg" alt="product image" /> <span>Shop</span> <h4>Healthy Dish</h4> <div class="stars"> <i class="fa-solid fa-star"></i> <span><span class="specific">4.5 </span>(630)</span> </div> <h4 class="price">EGP 260</h4> <a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a> </div> <div class="product-cart"> <img src="images/meal1.jpg" alt="product image" /> <span>Shop</span> <h4>Healthy Dish</h4> <div class="stars"> <i class="fa-solid fa-star"></i> <span><span class="specific">4.5 </span>(630)</span> </div> <h4 class="price">EGP 260</h4> <a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a> </div> </div> </div> <div class="slide"> <div class="pro-collection"> <div class="product-cart"> <img src="images/meal1.jpg" alt="product image" /> <span>Shop</span> <h4>Healthy Dish</h4> <div class="stars"> <i class="fa-solid fa-star"></i> <span><span class="specific">4.5 </span>(630)</span> </div> <h4 class="price">EGP 270</h4> <a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a> </div> <div class="product-cart"> <img src="images/meal1.jpg" alt="product image" /> <span>Shop</span> <h4>Healthy Dish</h4> <div class="stars"> <i class="fa-solid fa-star"></i> <span><span class="specific">4.5 </span>(630)</span> </div> <h4 class="price">EGP 270</h4> <a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a> </div> <div class="product-cart"> <img src="images/meal1.jpg" alt="product image" /> <span>Shop</span> <h4>Healthy Dish</h4> <div class="stars"> <i class="fa-solid fa-star"></i> <span><span class="specific">4.5 </span>(630)</span> </div> <h4 class="price">EGP 280</h4> <a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a> </div> <div class="product-cart"> <img src="images/meal1.jpg" alt="product image" /> <span>Shop</span> <h4>Healthy Dish</h4> <div class="stars"> <i class="fa-solid fa-star"></i> <span><span class="specific">4.5 </span>(630)</span> </div> <h4 class="price">EGP 280</h4> <a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a> </div> </div> </div> <button class="prev" onclick="prevSlide()">❮</button> <button class="next" onclick="nextSlide()">❯</button> </div> </section> <section id="info"class= "main-padding"> <div class="info-collection"> <div class="info-col"> <div> 100+</div> <div> Satisfied customers </div> </div> <div class="info-col"> <div> 4.0</div> <div> Customer rating </div> </div> <div class="info-col"> <div> 200+</div> <div> Healthy recipes </div> </div> </div> </section> <section class="product-section recipe-section" > <div class="top main-padding"> <h1>Recipes</h1> <div class="view_all_btn"> <a href=""></a><button>View all</button></a> </div> </div> <div class="pro-collection "> <div class="product-cart"> <img src="images/meal1.jpg" alt="product image" /> <span>Chef</span> <h4>Recipe</h4> <div class="stars"> <i class="fa-solid fa-star"></i> <span><span class="specific">4.5 </span>(630)</span> </div> <!-- <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel</div> --> <!-- <a href="#"><i class="fa-solid fa-heart"></i></a> --> </div> <div class="product-cart"> <img src="images/meal1.jpg" alt="product image" /> <span>Chef</span> <h4>Recipe</h4> <div class="stars"> <i class="fa-solid fa-star"></i> <span><span class="specific">4.5 </span>(630)</span> </div> <!-- <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel</div> --> <!-- <a href="#"><i class="fa-solid fa-heart"></i></a> --> </div> <div class="product-cart"> <img src="images/meal1.jpg" alt="product image" /> <span>Chef</span> <h4>Recipe</h4> <div class="stars"> <i class="fa-solid fa-star"></i> <span><span class="specific">4.5 </span>(630)</span> </div> <!-- <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel</div> --> <!-- <a href="#"><i class="fa-solid fa-heart"></i></a> --> </div> <div class="product-cart"> <img src="images/meal1.jpg" alt="product image" /> <span>Chef</span> <h4>Recipe</h4> <div class="stars"> <i class="fa-solid fa-star"></i> <span><span class="specific">4.5 </span>(630)</span> </div> <!-- <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel</div> --> <!-- <a href="#"><i class="fa-solid fa-heart"></i></a> --> </div> </div> </section> <section id="newsletter" class= ""> <div class="container main-padding"> <div class="new-text"> <div> Stay in touch for newsletters </div> <div> get updates about latest dishes & offers </div> </div> <label> <input type="text" placeholder="" /> <button>Submit</button> </label> </div> </section> <footer class="footer"> <div class="container"> <div class="row"> <div class="footer-col"> <h1>wellness <br /> kitchen</h1> <p class="c-rights"> © Copyright 2024<br /> Wellness Kitchen </p> </div> <div class="footer-col"> <ul> <li><a href="#">about us</a></li> <li><a href="#">Blog</a></li> <li><a href="#">our services</a></li> <li><a href="#">privacy policy</a></li> <li><a href="#">affiliate program</a></li> </ul> </div> <div class="footer-col"> <ul> <li><a href="#">FAQ</a></li> <li><a href="#">shipping</a></li> <li><a href="#">returns</a></li> <li><a href="#">order status</a></li> <li><a href="#">payment options</a></li> </ul> </div> <div class="footer-col"> <h4>follow us</h4> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-whatsapp"></i></a> </div> <div class="G-play"> <a href=""><img src="images/play.jpg" alt="" /></a> </div> </div> </div> </div> </footer> <script src="main.js" ></script> <script src="main.js"></script> </body> </html>