From 5adbe2fd87de4f9f4e169edf83de627536a28518 Mon Sep 17 00:00:00 2001
From: Mansi523 <kumarimansi523@gmail.com>
Date: Thu, 21 Sep 2023 03:43:24 -0700
Subject: [PATCH] last commit

---
 favourite.html      |  24 ++---
 index.html          |  84 +++++++++++------
 js/index.js         |  50 ++++++----
 style/favourite.css | 224 ++++++++++++++++++++++++++------------------
 style/index.css     | 210 +++++++++++++++++++++++++++++++++++++++--
 style/slider.css    |  88 +++++++++++------
 6 files changed, 490 insertions(+), 190 deletions(-)

diff --git a/favourite.html b/favourite.html
index c88b88d..1e809c8 100644
--- a/favourite.html
+++ b/favourite.html
@@ -17,36 +17,30 @@
 
             <div class="nav-left">
                 <div class="nav-logo">
-                    <a href="index.html"><i class="fa-solid fa-utensils"></i></a>
+                   <a href="index.html"><i class="fa-solid fa-utensils"></i></a> 
                     <span>Pour Tous</span>
                 </div>
             </div>
-
+           
 
             <div class="nav-right">
 
-                <div class="nav-input-container">
-                    <input id="InputValue" type="text" placeholder="Search for your meal">
-                    <button onclick="handleScearch()"><img
-                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAdVBMVEX///8AAADc3NzNzc3m5ub39/f6+vqMjIyvr6/T09Ozs7NnZ2eRkZHl5eWsrKzq6uphYWGHh4c/Pz/w8PAgICA0NDSjo6MVFRXJyclqampbW1s8PDwmJiZ3d3dVVVW3t7dKSkoPDw99fX3BwcEtLS2ZmZmXl5ccVvkXAAAEj0lEQVR4nO2ciXaiQBBF0xjADUVU3KPEJP//idMmnCQzIdhAd1U18+4X9D08oRbk4QEAAAAAAAAAAAAAAAAAAAAAAAAAAABgTJKH3EdwTKCKRcJ9CKcESjPZch/DIe+GSh3H3AdxRmmoWTxyn8UNX4Z9Det3Q6XWQ+7z2Odvw1tY59xHsswPQx3WAfehrFJhqFQ261EZUGmodBnQm7D+YqhJexLW3w37EtY6Q6VWPSgD6g01e9/DetdQlwF+h9XAUKlN7HGDZWTodVhNDXWDNYu4D9sKc0ONl2FtZOhlGdDQ8HZn5T5yQxobKt/C2sbQr7C2M1Tq4E1Y2xpqYj8arA6GnkwDOhl60WB1NFTyw9rdUHrNasNQdljtGOoGS+wGy5ahEhtWi4ZKvQwFhtWqociwWjbUpMI2WPYNlToOJU0DXBgqUetWR4aC1q3ODMWsWx0aKhnrVreGEsLq2vA2DeC9s7o3VMxhJTFknQYQGeoGi6tmJTO81awsYSU0VDxzVlpDfWclDyu1IX2DRW+oiKcBLIZKvdCNrpgMlSrioOeGiurOymlI824Ar6EiWLcuF6enFa8jQc0ahck1j58KNke6dwPm23GcHlguKenoKkpG19dTeihoHekbrGg5H+TxKaNzzLimAWFwzp8vBYkk6zQgDK6z533m+lfK/yLLMhmdp6f9iztHIevWcPmonzDp0YnjRtBSQF/TwTmfrDe2JeWtW+eja37aZxZND8Mlt1QV+lc6i0+XwoqjwHXrJ9HtCbO4dJeUF9Z/SbbDxb5THXiU+G7AD0JdB76d9uuWkv68z6qfMNs83rUQ5S8DGhKO8qeGjiuiqU5XPqr55ldxNRWwaq0nevzoyJqqvXMZi77ZJO9ddYfqbjLiVqjG0hOxmMorbJaPwXhqqaq5jCW9evSwHG3z5/Rir3/ciYmn7i5edwfb3YWAeEbLxFmHmPF+iCRMAl2DpW1rsPvwxTMKtuNFmrnp6z9543i4hyOqaduaOJ66xppRTkwJH+7z9zu/zZnEfYo3kvHTfHB+m7j+pVWxdvxw594+pQ7jGQXnKfMG8ei2NWLfAWeuWyNmQ4K7J6fhiuSPfXyGVJ07lyFd7cliSNq5MxhmtJ07uSF5a0RsyDD3pDQ8sHTudIY7pt0DlSHfWJ7EkLpzpzZknnu6NtxMuV8ccWv4cuYfy7s0lLE1cma4irnjWeLI0Hnnbo4TQ5eDpcbYN1zF/Fuj79g2lLdzt2soZ6n5hU1DYfEssWZI3LmbY8mQqzUywIqh6DeWuhvydO7mdDWU/2HBboai41nSwdD1UtMSrQ3lx7OknWEhpTUyoI3hWlztWUdzQ2/iWdLQUEznbk4jQ0GduzkNDEV17uaYGm58eLhXYmZ48eKvOdWYGMqYe7blvqH0bz3f445hJuPbh12oNRTcuZtTY+h7PEt+MxTyaU4LVBv6VnvWUWXoz382TfhheOxNPEv+MfS09qzju+GqX/Es+TJce1x71hH0N54lQX/jWRIwfh2WhuCpRw93AAAAAAAAAAAAAAAAAAAAAAAAAAAA/nf+AKHCTVKRBPClAAAAAElFTkSuQmCC"
-                            height="30" width="30" /></button>
-                </div>
-
+             
+                
                 <div class="nav-meal">
-                    <a href="./meal.html">Meal</a>
+                <a href="./meal.html">Meal</a>
                 </div>
 
                 <div class="like-button">
-                    <a href="./favourite.html"> <i class="fa-sharp fa-solid fa-heart"></i>
-                        <span id="like-conunt">0</span></a>
+                  <a href="./favourite.html" > <i class="fa-sharp fa-solid fa-heart"></i>
+                    <span id="like-conunt">0</span></a>
                 </div>
-
+                
             </div>
 
         </div>
-
+    
     </nav>
-
     <main>
 
         <!-- for showing common data to Deliver Restaurants in India-->
diff --git a/index.html b/index.html
index ce88d6e..2eddf9c 100644
--- a/index.html
+++ b/index.html
@@ -9,10 +9,7 @@
     <Link rel="stylesheet" href="./style/index.css">
     </Link>
      <link rel="stylesheet" href="./style/slider.css"></link>
-     <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
-    />
+    
      <!-- bootstrap cdn -->
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    
@@ -22,9 +19,7 @@
      <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
      <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" integrity="sha512-OTcub78R3msOCtY3Tc6FzeDJ8N9qvQn1Ph49ou13xgA9VsH9+LRxoFU6EqLhW4+PKRfU+/HReXmSZXHEkpYoOA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
 
-     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-     
+     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
     
 </head>
 
@@ -33,10 +28,10 @@
     <nav>
         <div class="nav-container">
 
-            <div class="nav-left">
+            <div class="nav-left d-block">
                 <div class="nav-logo">
                    <a href="index.html"><i class="fa-solid fa-utensils"></i></a> 
-                    <span>Pour Tous</span>
+                    <span id="pour-tous">Pour Tous</span>
                 </div>
             </div>
            
@@ -103,15 +98,24 @@
     </div>   
 
     <!-- category section -->
-    
-    <div class="container-fluid py-4" style="background-color:#FEDE00; height:400px;">
-         <h3 class="py-2" style="color:black; font-size:2rem;font-weight:400;">What's on your mind?</h3>
-        <div id="category" class="owl-carousel owl-theme">
-       
-        <!-- data is fetched from index.js -->
 
-    </div>
-    </div>
+    <section class="slider_container pt-3" style="background-color:#FEDE00; height:300px;">
+        <div class="container">
+        
+            <div class="card_slider swiper">
+                <div class="swiper-wrapper" id="category">
+
+                </div>
+                <div class="swiper-button-next"></div>
+                <div class="swiper-button-prev"></div>
+                <div class="swiper-pagination"></div>
+            </div>
+        </div>
+        
+        </section>
+
+
+
 <!-- for showing common data to Deliver Restaurants in India-->
     <div class="container-fluid py-1" style="background-color:black">
         <h3 class="py-1" style="color:#FEDE00; font-size:2rem;font-weight:400;">You can also try</h3>
@@ -167,6 +171,7 @@ <h3 class="py-1" style="color:#FEDE00; font-size:2rem;font-weight:400;">You can
         </div>
       
 
+     </div>
      </div>
     </fotter>
 
@@ -188,16 +193,41 @@ <h3 class="py-1" style="color:#FEDE00; font-size:2rem;font-weight:400;">You can
 <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
 
 <!-- Initialize Swiper -->
-<script>
-  var swiper = new Swiper(".mySwiper", {
-    slidesPerView: 4,
-    spaceBetween: 30,
-    centeredSlides: true,
-    pagination: {
-      el: ".swiper-pagination",
-      clickable: true
-    }
-  });
+<script type="text/javascript">
+    var swiper = new Swiper(".card_slider", {
+slidesPerView: 3,
+spaceBetween: 70,
+loop:true,
+pagination: {
+el: ".swiper-pagination",
+clickable: true,
+},
+autoplay: {
+delay: 2500,
+disableOnInteraction: false,
+},
+navigation: {
+nextEl: ".swiper-button-next",
+prevEl: ".swiper-button-prev",
+},  breakpoints: {
+320: {
+  slidesPerView: 1,
+ 
+},
+480: {
+  slidesPerView: 2,
+ 
+},
+768: {
+  slidesPerView: 3,
+
+},
+1200: {
+  slidesPerView: 4,
+
+},
+},
+});
 </script>
 </body>
 
diff --git a/js/index.js b/js/index.js
index 35fd3c3..b6a5c1b 100644
--- a/js/index.js
+++ b/js/index.js
@@ -13,6 +13,7 @@ let MainFoodList =[];
 let suggestedFoodList=[];
 let suggestdata ="";
 let dummy = "";
+
 let favouriteItemList = JSON.parse(window.localStorage.getItem("favourite")) || [];
 
 count.innerHTML=favouriteItemList.length;
@@ -92,6 +93,7 @@ try{
   showSuggestion()
 }catch(err){
       console.log(err);
+      alert("Sorry,this item is not available right now!!")
 }
   
 }
@@ -115,12 +117,14 @@ InputValue.addEventListener("input",async()=>{
     try{
       const suggestionapi = await fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${inputdata}`);
       const suggestiondata = await suggestionapi.json();
-     
+      
       suggestedFoodList=suggestiondata.meals;
       console.log("suggestedFoodList",suggestedFoodList);
-     
+      if(suggestedFoodList==null){
+        return;
+      }
     }catch(err){
-          // alert("Sorry,this item is not available right now!!")
+        console.log(err); 
     }
     // suggestedFoodList = [1,2,3,4,5,6];
     displaysuggestion.innerHTML= "";
@@ -153,24 +157,31 @@ InputValue.addEventListener("input",async()=>{
         const categoryapi = await fetch("https://www.themealdb.com/api/json/v1/1/categories.php");
         const categorydata = await categoryapi.json();
         console.log(categorydata);
-        categoryList=categorydata.categories.slice(0,5);
+        categoryList=categorydata.categories;
 
         showInCategory();
       }
       
       handleCategory();
+
+
+
         //function for showing category
       function showInCategory(){
         console.log(categoryList.categories);
         category.innerHTML += categoryList.map((categories,index)=>(
     
                   `
-                  <div style="text-align:center;" class="item" onclick="handleCategoryList(${index})">
-                   
-                  <img src="${categories.strCategoryThumb
-                  }"/>
-                  <span style="font-size:1.3rem;font-weight:500;">${categories.strCategory}</span>
+
+                  <div class="swiper-slide pb-5"
+                  onclick="handleCategoryList(${index})">
+                  <div class="img-box text-center">
+                      <img src="${categories.strCategoryThumb
+                        }" alt=""/>
+                      <span class="text-d">${categories.strCategory}</span>
                   </div>
+              </div>
+            
 
                   `         
         ))
@@ -186,7 +197,8 @@ InputValue.addEventListener("input",async()=>{
 
 function MainDisplay(){
     // fetched data from api in the category section.
-    let categoryname = "";
+let categorynamemain = "p";
+
     async function handleMainFood(){
         dummy =document.getElementById("InputValue").value;
          document.getElementById("InputValue").value="";
@@ -198,28 +210,32 @@ function MainDisplay(){
         try {
           const categoryObject = JSON.parse(localcategory);
           console.log("***", categoryObject.strCategory);
-           categoryname = categoryObject.strCategory;
+          categorynamemain  = categoryObject.strCategory;
         } catch (error) {
           console.error("Error parsing JSON:", error);
         }
         const defaultdummy = "p";
         console.log(dummy);
-        console.log(categoryname,localcategory);
+        console.log(categorynamemain ,localcategory);
         // suggestdata = JSON.parse(window.localStorage.getItem("suggestion"));
         // console.log("suggestdata",suggestdata.strMeal);
         // InputValue.value = suggestdata.strMeal;
-        console.log(dummy,categoryname,defaultdummy);
+        console.log(dummy,categorynamemain ,defaultdummy);
         try{
-          const categoryapi = await fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${dummy==="" ? categoryname : dummy}`);
+          const categoryapi = await fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${dummy==="" ? categorynamemain  : dummy}`);
           const categorydata = await categoryapi.json();
           // suggestdata ="";
+        
           MainFoodList=categorydata.meals;
           console.log("MainFoodList",MainFoodList);
           // InputValue.value="";
-
+          if(MainFoodList === null){
+            alert("Sorry,this item is not available right now!!")
+            return;
+          }
           showInMain();
         }catch(err){
-              // alert("Sorry,this item is not available right now!!")
+              alert("Sorry,this item is not available right now!!")
               console.log("err",err);
         }
      
@@ -233,7 +249,7 @@ function MainDisplay(){
         mainFoodSection.innerHTML += MainFoodList?.map((meals,index)=>(
                   `
              
-                  <div class="items my-3 mx-1" >
+                  <div class="items my-3 mx-1" id="item-imp" >
                    <div class="container-main-meals my-4 ">
                    <img onclick="addMeal(${meals.idMeal })" src="${meals.strMealThumb
                    }"/>
diff --git a/style/favourite.css b/style/favourite.css
index a7fea3e..fb256d4 100644
--- a/style/favourite.css
+++ b/style/favourite.css
@@ -7,104 +7,101 @@
  }
  nav{
   
-     display:flex;
-     flex-direction:row;  
-     width:100%;  
-     height:12vh;
-     /* margin-top:-8px; */
-     background-color:#FEDE00;
- }
- 
- .nav-container{
-     display:flex;
-     flex-direction:row;
-     justify-content:space-between;
-     width:100%;
-     /* position:fixed; */
- }
- .nav-logo i{
-    margin:6px;
-     color:black;
-     font-size:40px;
-     padding:10px;
- }
- .nav-logo span{
-     font-size:2rem;
-     color:black;
- }
+    display:flex;
+    flex-direction:row;  
+    width:100%;  
+    height:12vh;
+    background-color:#FEDE00;
+   
+}
+
+.nav-container{
+    display:flex;
+    flex-direction:row;
+    justify-content:space-between;
+    width:100%;
+    /* position:fixed; */
+}
+.nav-logo i{
+   margin:6px;
+    color:black;
+    font-size:40px;
+    padding:10px;
+}
+.nav-logo span{
+    font-size:2rem;
+    color:black;
+}
+
+.nav-right{
+    width:70%;
+    display:flex;
+    justify-content:space-around;
+}
+.nav-input-container{
+    display:flex;
+    justify-content:center;
+    align-items:center;
+    color:black;
+}
+
+.nav-input-container input{
+    padding:10px;
+    width:360px;
+    border:none;
+    border-radius:20px 0px 0px 20px;
+    align-items: center;
+    font-size:1.4rem;
+    color:black;
+}
+
  
- .nav-right{
-     width:70%;
-     display:flex;
-     justify-content:space-around;
- }
- .nav-input-container{
-     display:flex;
-     justify-content:center;
-     align-items:center;
+.nav-input-container input:focus{
+    outline:none;
+}
+.nav-input-container button{
+    background-color:white;
+     height:46px;
+     width:60px;
+     padding:8px;
      color:black;
- }
- 
- .nav-input-container input{
-     padding:10px;
-     width:360px;
+     margin-right:10px;
      border:none;
-     border-radius:20px 0px 0px 20px;
-     align-items: center;
-     font-size:1.4rem;
-     color:black;
- }
- 
- .nav-input-container input:hover{
-     box-shadow: 0 0 10px inset black;
- }
-  
- .nav-input-container input:focus{
      outline:none;
- }
- .nav-input-container button{
-     background-color:white;
-      height:46px;
-      width:60px;
-      padding:8px;
-      color:black;
-      margin-right:10px;
-      border:none;
-      outline:none;
-      border-radius:0px 20px 20px 0px;
- }
- 
- .nav-meal{
-     position: relative;
- }
- .nav-meal a{
-     color:black;
-    font-size:2.5rem;
-    text-decoration:none;
-    padding:8px;
-    position: absolute;
-    top:5px;
-   
- }
- 
- 
- .like-button i{
-     color:orangered;
-     font-size:50px;
-     padding:5px;
-     margin-top:10px;
-     position:relative;
- }
- 
- .like-button span{
-    position:absolute;
+     border-radius:0px 20px 20px 0px;
+}
+
+.nav-meal{
+    position: relative;
+}
+.nav-meal a{
     color:black;
-    font-size:1.6rem;
-    top:1px;
-    right:95px;
-    z-index:1;
-    font-weight:700;
- }
+   font-size:2.5rem;
+   text-decoration:none;
+   padding:8px;
+   position: absolute;
+   top:5px;
+  
+}
+
+
+.like-button i{
+    color:orangered;
+    font-size:50px;
+    padding:5px;
+    margin-top:10px;
+    position:relative;
+}
+
+.like-button span{
+   position:absolute;
+   color:black;
+   font-size:1.6rem;
+   left:82.6%;
+   top:5px;
+   z-index:1;
+   font-weight:700;
+}
 
 /* main-section */
 
@@ -235,6 +232,7 @@
     flex-direction:column;
     justify-content:center;
     align-items:center; 
+    overflow:hidden;
 }
 
 .soical-icons-div{
@@ -277,4 +275,44 @@
     flex-direction:column;
     justify-content:center;
     align-items:center;
+}
+
+
+/* media queries for different devices */
+
+
+@media screen and (max-width:975px){
+    .soical-icons-div{
+        width:80%;
+    }
+    .fotter-options{
+        width:70%;
+        font-size:1rem;
+        flex-direction:column;
+        text-align:center;
+     }
+}
+
+@media screen and (max-width:676px){
+    .nav-logo i{
+        font-size:30px;
+    }
+    .nav-logo span{
+        font-size:1.3rem;
+    }
+    .like-button{
+        font-size:30px;
+    }
+   
+}
+
+@media screen and (max-width:502px){
+  
+     .nav-right{
+        width:70%;
+     }
+    .nav-meal a{
+        padding:7px;
+    }
+   
 }
\ No newline at end of file
diff --git a/style/index.css b/style/index.css
index b226f58..b518e29 100644
--- a/style/index.css
+++ b/style/index.css
@@ -187,7 +187,7 @@ cursor:pointer;
     flex-direction:column;
     justify-content:center;
     align-items:center;
-    
+    overflow: hidden; 
 }
 .soical-icons-div{
  display:flex;
@@ -404,7 +404,18 @@ cursor:pointer;
     } 
 }
 
+@media screen and (max-width:982px){
+    .soical-icons-div{
+        width:50%;
+    }
+     .fotter-options{
+        width:70%;
+        font-size:1rem;
 
+     }
+
+}
+  
 
 @media screen and (max-width:910px) {
   .nav-left{
@@ -446,10 +457,22 @@ cursor:pointer;
    
 }
 
-@media screen and (max-width:739px) {
-    nav{
-        height:7vh;
+@media screen and (max-width:857px) {
+    .fotter-options{
+        width:60%;
+        flex-direction:column;
+        text-align:center;
+    }
+    .soical-icons-div{
+        margin-top:200px;
     }
+}
+
+
+
+
+@media screen and (max-width:739px) {
+   
     .nav-right{
         width:80%;
     }
@@ -469,8 +492,181 @@ cursor:pointer;
   }
 }
 
-@media screen and (max-width:400px) {
-   #display_common_food{
-    margin-left:10px;
+
+
+@media screen and (max-width:672px) {
+  .nav-right{
+    width:70%;
+  }
+  .nav-meal a{
+    font-size:1.2rem;
+    padding:3px;
+    margin-left: -23px;
+
+}
+.nav-input-container input{
+    font-size:1rem;
+    padding:7px;
+    width:231px;
+}
+.nav-input-container button{
+    padding:7px;
+    height:41.5px;
+}
+.like-button i{
+    font-size:25px;
+    padding:2px;
+}
+.like-button span{
+  left:95%;
+  margin-left:10px;
+}
+.nav-left{
+    width:30%;
+}
+  
+}
+
+@media screen and (max-width:641px){
+    .nav-input-container button{
+        height:41.5px !important;
+    }  
+}
+
+
+@media screen and (max-width:569px) {
+
+    .nav-input-container input{
+        font-size:1rem;
+        padding:5px;
+        width:200px;
+    }
+    .nav-input-container button{
+        padding:6px;
+        height: 37.5px;
+        width:40px;
+    }
+    .nav-input-container img{
+        height: 20px;
+        width:20px;
+    }
+    .like-button span{
+        left:93.5%;
+        margin-left:10px;
+      }
+}
+
+@media screen and (max-width:568px){
+    .nav-input-container button{
+        padding:6px !important;
+        height:37.5px !important;
+   
+    }
+    .nav-input-container img{
+        height:15px;
+        width:20px;
+    }
+}
+
+
+  
+@media screen and (max-width:583px) {
+   .soical-icons-div{
+    width:80%;
    } 
+ }
+
+ @media screen and (max-width:497px) {
+    .nav-input-container input{
+        font-size:1rem;
+        padding:5px;
+        width:170px;
+    }
+  }
+ 
+@media screen and (max-width:457px) {
+    .nav-left{
+        width:35%;
+      }
+      .nav-input-container input{
+        width:120px;
+      } 
+}
+
+ @media screen and (max-width:423px) {
+    .soical-icons-div{
+     width:80%;
+    } 
+    .container-main-meals{
+        width:320px;
+    }
+    .container-main-meals img{
+        width:320px;
+    }
+    .container-meals-left{
+        width:70%;
+        font-size:0.6rem;
+    }
+    .container-meals-right{
+        width:40%;
+    }
+    .container-meals-right i{
+        font-size:30px;
+    }
+    .container-meals-right span{
+        font-size:1rem;
+    }
+  }
+
+  @media screen and (max-width:400px){
+    #pour-tous{
+        display:none !important;
+    }
+    .nav-right{
+        width:85%;
+    }
+    .nav-left{
+        width:10%;
+    }
+    .like-button span{
+       left:90%;
+    }
+ 
+  }
+
+  @media screen and (max-width:397px){
+
+    .container-main-meals{
+        height:350px;
+        width:280px;
+    }
+
+    .container-main-meals img{
+        width:280px;
+        height:250px;
+    }
+    .container-meals-left{
+        width:60%;
+        font-size:0.5rem;
+    }
+    .container-meals-right{
+        width:60%;
+    }
+    .container-meals-right i{
+        font-size:20px;
+    }
+    .container-meals-right span{
+        font-size:0.7rem;
+    }
+  }
+
+
+  @media screen and (max-width:789px){
+    #display_common_food{
+        display:flex;
+        justify-content:center !important;
+        align-items:center;
+        flex-wrap:wrap;
+    }
+  
 }
\ No newline at end of file
diff --git a/style/slider.css b/style/slider.css
index c499f3d..4bd94b6 100644
--- a/style/slider.css
+++ b/style/slider.css
@@ -1,36 +1,62 @@
+.img-box img{
+  max-width:100%;
 
-    body {
-      position: relative;
-      height: 100%;
-    }
+}
 
-    body {
-      background: #eee;
-      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
-      font-size: 14px;
-      color: #000;
-      margin: 0;
-      padding: 0;
-    }
+.slider_container .container{
+ padding: 0 15px;
+ max-width: 1230px;
+ margin: 0 auto;
+}
 
-    .swiper {
-      width: 100%;
-      height: 100%;
-    }
+.card_slider {
+  padding: 50px 0;
+ 
+}
+.text-d{
+  font-size:1.5rem;
+  font-weight:700;
+}
+.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
+  content: 'next';
+  color: black;
+}
+.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
+  content: 'prev';
+  color: black;
+}
 
-    .swiper-slide {
-      text-align: center;
-      font-size: 18px;
-      background: #fff;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
 
-    .swiper-slide img {
-      display: block;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  
\ No newline at end of file
+
+.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
+  background-color:black;
+}
+
+@media screen and (max-width:525px){
+  .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
+    display: none !important;;
+  }
+  .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
+   display:none !important;
+  }
+  .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
+    display:none !important;
+  }
+  .slider_container{
+    padding:0 !important;
+    height:250px !important;
+    margin:0 !important;
+  }
+  .swiper-slide{
+    padding:0 !important;
+    margin:0 !important;
+  }
+  .text-d{
+    display:none !important;
+  }
+  .img-box img{
+    height:150px !important;
+    width:150px !important;
+    border-radius:50% !important;
+  }
+}
\ No newline at end of file