Skip to content

Commit

Permalink
made some changes in the css of index,favourite and meal page.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mansi523
Mansi523 committed Sep 20, 2023
1 parent 0089d83 commit a76e9e3
Show file tree
Hide file tree
Showing 7 changed files with 318 additions and 106 deletions.
6 changes: 3 additions & 3 deletions favourite.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,12 +51,12 @@

<!-- for showing common data to Deliver Restaurants in India-->
<div class="container-fluid py-1" style="background-color:black;">
<h3 id="display-fav" class="py-1" style="color:orange; font-size:2rem;font-weight:300;padding:50px;">Your Favourite Food Section
<h3 id="display-fav" class="py-1" style="color:#FEDE00; font-size:2rem;font-weight:300;padding:50px;">Your Favourite Food Section
</h3>
<div id="go-back">
<h3 class="text">Your Favourite Meal is empty </h3>
<h3 class="text-a">Your Favourite Meal is empty </h3>
<button id="btn"><a href="index.html">Go-Back</a></button>
<h3 class="text"> Add Something to the cart.</h3>
<h3 class="text-b"> Add Something to the cart.</h3>
</div>

<div id="display_common_food">
Expand Down
30 changes: 25 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@

<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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

Expand Down Expand Up @@ -40,6 +44,7 @@
<div class="nav-right">
<div class="parent-div-input mt-3">
<div class="nav-input-container">

<input id="InputValue" type="text" placeholder="Search for your meal">
<button id="btnsearch" 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>
Expand Down Expand Up @@ -99,16 +104,17 @@

<!-- category section -->

<div class="container-fluid py-1" style="background-color:black;">
<h3 class="py-1" style="color:orange; font-size:2rem;font-weight:300;">What's on your mind?</h3>
<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>
<!-- 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:orange; font-size:2rem;font-weight:300;">You can also try</h3>
<h3 class="py-1" style="color:#FEDE00; font-size:2rem;font-weight:400;">You can also try</h3>
<div id="display_common_food">
<!-- data is fetched from index.js -->

Expand Down Expand Up @@ -178,7 +184,21 @@ <h3 class="py-1" style="color:orange; font-size:2rem;font-weight:300;">You can a
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

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

<!-- Swiper JS -->
<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>
</body>

</html>
Expand Down
5 changes: 3 additions & 2 deletions js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ InputValue.addEventListener("input",async()=>{
suggestion.style.borderTop = "none";
btnsearch.style.borderLeft = "none";
btnsearch.style.height = "45px";

try{
const suggestionapi = await fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${inputdata}`);
const suggestiondata = await suggestionapi.json();
Expand Down Expand Up @@ -165,10 +165,11 @@ InputValue.addEventListener("input",async()=>{
category.innerHTML += categoryList.map((categories,index)=>(

`
<div class="item" onclick="handleCategoryList(${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>
`
Expand Down
63 changes: 37 additions & 26 deletions style/favourite.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
width:100%;
height:12vh;
/* margin-top:-8px; */
background-color:black;
background-color:#FEDE00;
}

.nav-container{
Expand All @@ -24,13 +24,13 @@
}
.nav-logo i{
margin:6px;
color:orange;
color:black;
font-size:40px;
padding:10px;
}
.nav-logo span{
font-size:2rem;
color:orange;
color:black;
}

.nav-right{
Expand All @@ -42,7 +42,7 @@
display:flex;
justify-content:center;
align-items:center;
color:orange;
color:black;
}

.nav-input-container input{
Expand All @@ -52,11 +52,11 @@
border-radius:20px 0px 0px 20px;
align-items: center;
font-size:1.4rem;
color:orange;
color:black;
}

.nav-input-container input:hover{
box-shadow: 0 0 10px inset orange;
box-shadow: 0 0 10px inset black;
}

.nav-input-container input:focus{
Expand All @@ -67,7 +67,7 @@
height:46px;
width:60px;
padding:8px;
color:orange;
color:black;
margin-right:10px;
border:none;
outline:none;
Expand All @@ -78,7 +78,7 @@
position: relative;
}
.nav-meal a{
color:orange;
color:black;
font-size:2.5rem;
text-decoration:none;
padding:8px;
Expand All @@ -98,7 +98,7 @@

.like-button span{
position:absolute;
color:orange;
color:black;
font-size:1.6rem;
top:1px;
right:95px;
Expand All @@ -120,7 +120,7 @@
/* border:2px solid white;*/
margin:20px;
border-radius:30px;
background-color:orange;
background-color:#FEDE00;
position:relative;
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add transitions for smooth effect */
cursor: pointer;
Expand Down Expand Up @@ -157,16 +157,16 @@
.container-meals-left{
width:80%;
margin-left:40px;
color:white;
color:black;
font-size:1rem;
font-weight:500;
font-weight:600;
}
.container-meals-right{
width:50%;
margin-left:110px;
display:flex;
flex-direction:column;
color:white;
color:black;
font-weight:5rem;
position:relative;

Expand All @@ -180,7 +180,7 @@
}
.container-meals-right span{
font-size:1.3rem;
color:white;
color:black;
position:absolute;
top:40%;
}
Expand All @@ -189,27 +189,38 @@
display:flex;
flex-direction:column;
align-items:center;
height:400px;
}
.text{
color:orange;
.text-a{
margin-top:50px;
margin-bottom:50px;
color:white;
font-size:2rem;
}
.text-b{
margin-top:50px;
color:white;
font-size:2rem;
}
#btn{
margin:10px;
padding:10px;
width:150px;
background-color:orangered;
background-color:white;
border-radius:5px;
}
#btn a{
text-decoration:none;
color:white;
color:black;
font-weight:500;
font-size:1rem;
}

#btn:hover{
background-color:#FEDE00;
}
#btn a:hover{
color:blue;
color:white;

}


Expand All @@ -219,7 +230,7 @@
.fotter-div{
height:500px;
width:100%;
background-color:black;
background-color:#FEDE00;
display:flex;
flex-direction:column;
justify-content:center;
Expand All @@ -236,22 +247,22 @@
cursor:pointer;
}
.soical-icons{
border:1px solid grey;
border:1px solid black;
height:60px;
width:60px;
display:flex;
flex-direction:row;
border-radius:50%;
}
.soical-icons:hover{
box-shadow: 5px 5px 10px orange;
box-shadow: 5px 5px 10px black;
}
.soical-icons i{
color:orange;
color:black;
margin:auto;
}
.fotter-options{
color:orange;
color:black;
display:flex;
justify-content:space-around;
width:90%;
Expand All @@ -261,7 +272,7 @@

.fotter-copyrighgt-span{
margin-bottom:40px;
color:orange;
color:black;
display:flex;
flex-direction:column;
justify-content:center;
Expand Down
Loading

0 comments on commit a76e9e3

Please sign in to comment.