From 1a1b8aea8e310e8ae6e5db5b51d6657a4f6165b4 Mon Sep 17 00:00:00 2001
From: Priya <priya.rathore.cer19@itbhu.ac.in>
Date: Fri, 15 Oct 2021 17:44:13 +0530
Subject: [PATCH] Add transition on hover

---
 assets/css/style.css     | 67 +++++++++++++++++++++++++++++++++++-----
 datasets/indian_food.csv |  4 ++-
 index.html               | 10 +++---
 3 files changed, 67 insertions(+), 14 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index c4663a9..e1d7ac9 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -124,6 +124,7 @@ body {
   max-height: 14vh;
   background: var(--clr-main);
   width: 100%;
+  background-color: whitesmoke;
 }
 header {
   display: flex;
@@ -134,6 +135,7 @@ header {
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
+  
 }
 
 .logo {
@@ -144,6 +146,7 @@ header {
 }
 
 .logo-span {
+  
   color: var(--clr-accent);
 }
 
@@ -160,6 +163,7 @@ nav {
   padding: 1rem;
   border-bottom: 1px solid var(--clr-dark-opc);
   border-left: 1px solid var(--clr-dark-opc);
+  background-color: whitesmoke;
 }
 
 nav ul {
@@ -171,9 +175,16 @@ nav ul {
 
 nav ul li {
   position: relative;
+
   padding-bottom: 1.5em;
   border-bottom: 1px solid var(--clr-dark-opc);
 }
+nav ul li:hover {
+  border-bottom: 1px solid ;
+  color : grey;
+  transition: color 0.5s , bottom-border 0.4s;
+
+}
 
 li {
   list-style: none;
@@ -365,11 +376,13 @@ ul li::before {
     display: flex;
     position: static;
     margin-top: 0;
+
     margin-left: 5em;
     padding: 0;
     border: none;
   }
 
+
   nav ul {
     flex-direction: row;
     align-items: center;
@@ -397,16 +410,31 @@ ul li::before {
     height: 22px;
   }
 }
-@media (min-width: 1000px) {
+@media (min-width: 500px) {
   nav ul li {
     margin-left: 2em;
   }
+
 }
 
+
 @media screen and (max-width: 600px) {
   body {
     overflow-x: hidden;
   }
+
+   .heading{
+    margin-bottom :20px;
+  }
+
+.tile-logo{
+  align-items: center;
+}
+
+  
+  #db-search-form{
+     margin: auto;
+  }
 }
 
 .nav-active {
@@ -497,15 +525,13 @@ ul li::before {
   width: fit-content;
 }
 .card {
-  border: 1px solid;
-  border-radius: 4px;
+  border-bottom: 1px solid;
+ 
   box-shadow: rgba(90, 90, 90, 0.2) 0px 2px 8px 0px;
-  display: flex;
+ 
 
   display: none;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-evenly;
+
   align-items: center;
   width: fit-content;
   margin: 20px;
@@ -548,6 +574,20 @@ a {
   justify-content: center;
 }
 
+.d-logo:hover {
+  
+  color: blueviolet;
+}
+.copy-button:hover{
+  background-color:skyblue ;
+  font-weight: 547;
+  color: black;
+}
+.card:hover{
+  background-color: whitesmoke;
+  box-shadow:  0 0 10px #74ADC8;;
+}
+
 .logo-button {
   text-decoration: none;
   color: var(--text-color);
@@ -563,12 +603,23 @@ a {
 }
 
 @media (max-width: 768px) {
-  body {
+  body {`
     display: flex;
     flex-direction: column;
   }
 }
 
+  @media screen and (max-width: 570px) {
+  .heading{
+    margin-left: 135px;
+   }
+  }
+  @media screen and (max-width: 550px) {
+  .heading{
+    margin-left: 110px;
+   }
+  }
+
 .d-title li::before {
   list-style-type: none;
 }
diff --git a/datasets/indian_food.csv b/datasets/indian_food.csv
index 72619f0..abdb40b 100644
--- a/datasets/indian_food.csv
+++ b/datasets/indian_food.csv
@@ -1,4 +1,6 @@
-name,ingredients,diet,prep_time,cook_time,flavor_profile,course,state,region
+NAME,INGREDIENTS,DIET,PREP_TIME,COOK_TIME,FLAVOR_PROFILE,COURSE,STATE,REGION
+
+
 Balu shahi,"Maida flour, yogurt, oil, sugar",vegetarian,45,25,sweet,dessert,West Bengal,East
 Boondi,"Gram flour, ghee, sugar",vegetarian,80,30,sweet,dessert,Rajasthan,West
 Gajar ka halwa,"Carrots, milk, sugar, ghee, cashews, raisins",vegetarian,15,60,sweet,dessert,Punjab,North
diff --git a/index.html b/index.html
index 13ddcb0..f1021c1 100644
--- a/index.html
+++ b/index.html
@@ -32,15 +32,15 @@
     <div class="header-wrapper">
         <header>
 
-            <div class="logo">
+            <div class="logo" height="100px">
                 <h4>Data<span class="logo-span">4</span>ALL</h4>
             </div>
             <nav>
             <ul class="nav-links">
-                <li class="all"><a href="#" onclick="filterSelection('all')">all</a></li>
-                <li class="beginner" onclick="filterSelection('beginner-db')"><a href="#">beginner</a></li>
-                <li class="inter" onclick="filterSelection('intermediate-db')"><a href="#">intermediate</a></li>
-                <li class="adv" onclick="filterSelection('advanced-db')"><a href="#">advanced</a></li>
+                <li class="all"><a href="#" onclick="filterSelection('all')">All</a></li>
+                <li class="beginner" onclick="filterSelection('beginner-db')"><a href="#">Beginner</a></li>
+                <li class="inter" onclick="filterSelection('intermediate-db')"><a href="#">Intermediate</a></li>
+                <li class="adv" onclick="filterSelection('advanced-db')"><a href="#">Advanced</a></li>
                 <button id="theme-switcher" class="theme" ></button>
             </ul>
         </nav>