Merge pull request #1549 from nandani-goyal/main

improved the color style of the cards of offers page
khushi-joshi-05 · Aug 7, 2024 · f736917 · f736917
2 parents 301f063 + 78b68b1
commit f736917
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 1 deletion.
diff --git a/Css-files/offers.css b/Css-files/offers.css
@@ -395,6 +395,7 @@ nav {
   border-radius: 0.9375rem;
 }
 
+
 .explore-food .card :hover {
   transform: scale(1.01);
   transition:all .4s ease-in;
@@ -419,11 +420,25 @@ nav {
 
 .explore-food p{
   /* color:var(--text-color); */
-  color: white;
+  color: rgb(167, 166, 166);
   font-size: 14px;
   line-height: 22px;
 }
+.card:hover {
+  transform: translateY(-5px); /* Move the card up slightly on hover */
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Increase shadow on hover */
+}
 
+/* Example of adding a border on hover */
+.card:hover {
+  border: 2px solid #4CAF50;
+}
+
+/* Example of adding a background color change on hover */
+.card:hover {
+  background-color: #f0f0f0;
+
+}
 /*
 ==========================================
  testimonial section Design

diff --git a/Html-files/offers.html b/Html-files/offers.html
@@ -32,6 +32,74 @@
             background-color: #e21f1f;
             z-index: 9999;
         }
+
+.card:hover {
+  transform: translateY(-5px); /* Move the card up slightly on hover */
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Increase shadow on hover */
+}
+
+/* Example of adding a border on hover */
+.card:hover {
+  border: 2px solid #4CAF50;
+}
+
+/* Example of adding a background color change on hover */
+.card:hover {
+  background-color: #f0f0f0;
+
+}
+@media only screen and (max-width:538px){
+  .carousel-caption p{
+    position: relative;
+    top: 60px;
+  }
+  .carousel-caption img{
+    position: relative;
+    top: 46px;
+  }
+}
+@media only screen and (max-width:435px){
+  .carousel-caption p{
+    width: 332px;
+  }
+  .carousel-caption img{
+    max-width: 18.4rem;
+    max-height: 150px;
+  }
+}
+@media only screen and (max-width:390px){
+  .carousel-caption p{
+    position: relative;
+    right: 35px;
+  }
+  .carousel-caption img{
+    right: 24px;
+  }
+}
+
+
+.center-links .nav-item .dropdown-menu {
+  background-color:#212123;
+  color: white;
+  border-radius: 0;
+  border: none;
+  padding-top: 0;
+}
+
+.center-links .nav-item .dropdown-menu {
+  background-color: #ffffff;
+  color: white;
+  border-radius: 0;
+  border: none;
+  padding-top: 0;
+}
+
+.dropdown-item:hover {
+  background-color: #58a9ff;
+  color: #fff;
+  transform: scale(1.1);
+}
+=======
 
         .card:hover {
             transform: translateY(-5px);
@@ -112,6 +180,7 @@
         }
     </style>
 
+
 </head>