<html lang="en">

<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.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<link rel="stylesheet" href="./style.css">

<link rel="stylesheet" href="./media.css">

<title>Fast Food</title>

<div class="main">

<div class="header">

<nav>

<img src="./imgs/food_logo.png" alt="_logo">

<h3>f.palace</h3>

<img class="burger" src="./imgs/nav_food.png" alt="_burger">

<i class="fa-solid fa-magnifying-glass"></i>

<i class="fa-solid fa-cart-shopping" onclick="viewBasket()"></i>

<i class="fa-solid fa-bars"></i>

</nav>

</div>

<div class="sidebar">

<i class="fa-solid fa-xmark"></i>

<ul class="cont">

<span><i class="fa-solid fa-house"></i></span> <li class="items"><a href="#">Home</a></li>

<span><i class="fa-solid fa-info"></i></span> <li class="items"><a href="#">About</a></li>

<span><i class="fa-solid fa-bell-concierge"></i></span> <li class="items"><a href="#">Services</a></li>

<span><i class="fa-solid fa-table-list"></i></span> <li class="items"><a href="#">Recipes</a></li>

</ul>

</div>

<div class="container_first">

<div class="txts_container">

<h3>__Restaurant</h3>

<h1>Good F<img src="./imgs/food_firs.png" alt="o"><img src="./imgs/food_firs.png" alt="o">d</h1>

<h1>Good M<img src="./imgs/Mood 1.png" alt="o"> <img src="./imgs/Mood 1.png" alt="o">d</h1>

<p class="text_cont">The food palace is an neighborhood restaurent serving seasonal global cuisine driven by the faire.</p>

<button class="explore">Explore food menu</button>

<div class="icons_social">

<i class="fa-brands fa-facebook"></i>

<i class="fa-brands fa-instagram"></i>

<i class="fa-brands fa-twitter"></i>

</div>

</div>

<div class="imgs_container">

<img class="main_food" src="./imgs/Big food.png" alt="#">

<div class="round"></div>

<div class="little_imgs">

<img src="./imgs/big_food_first.png" alt="#">

<img src="./imgs/big_food_last.png" alt="#">

<img src="./imgs/big_food_last.png" alt="#">

</div>

</div>

</div>

<div class="container_second">

<div class="img_container_sec">

<img src="./imgs/container_ketchup_food.png" alt="">

</div>

<div class="txt_container_sec">

<h3>About us</h3>

<h1>Simple Way of <br> Eating Delicious</h1>

<p>Keep healthy food readily available. When you <br> get hungry, you’re more likely to eat the first <br> thing you see on the counter or in the</p>

<button>Explore our story</button>

</div>

</div>

<div class="container_third">

<div class="side_food">

<img src="./imgs/container1_left_food.png" alt="">

<img src="./imgs/container_right_food.png" alt="">

</div>

<div class="main_text">

<h3>Features</h3>

<h1>Our Awesome Services</h1>

<div class="icons_services">

<img src="./imgs/container_logo_first.png" alt="#">

<img src="./imgs/container_logo_sec.png" alt="#">

<img src="./imgs/container_logo_third.png" alt="#">

</div>

<div class="head_txts">

<h3>Quality Food</h3>

<h3>Super Taste</h3>

<h3>Fast Delivery</h3>

</div>

<div class="foot_txts">

<p>Keep healthy food readily available. When you get hungry, you’re more likely to</p>

<p>Keep healthy food readily available. When you get hungry, you’re more likely to</p>

<p>Keep healthy food readily available. When you get hungry, you’re more likely to</p>

</div>

</div>

</div>

<div class="container_fourth">

<div class="txt_third_cont">

<h3>Recipes</h3>

<h1>Most Popular Items</h1>

<span><img src="./imgs/container2_menu.png" alt=""></span>

</div>

<div class="cards">

<div class="img1">

<img src="./imgs/container_menu_first.png" alt="">

<div class="first_line">

<h3>Flame-boiled dish</h3>

<p>8.5</p>

</div>

<div class="second_line">

<button class="add">Add to cart</button>

<p class="price">$19.99</p>

</div>

</div>

<div class="img1">

<img src="./imgs/container_menu_sec.png" alt="">

<div class="first_line">

<h3>Peach Melba dish</h3>

<p>9.5</p>

</div>

<div class="second_line">

<button class="add">Add to cart</button>

<p class="price">$21.99</p>

</div>

</div>

<div class="img1">

<img src="./imgs/container_menu_third.png" alt="">

<div class="first_line">

<h3>Delmonico Steak dish</h3>

<p>9.0</p>

</div>

<div class="second_line">

<button class="add" onclick="addToCart()">Add to cart</button>

<p class="price">$20.99</p>

</div>

</div>

</div>

</div>

</div>

<script src="./main.js"></script>