•Hover

khushi-joshi-05 · Jul 23, 2024 · bbd3676 · bbd3676
1 parent 925b5d6
commit bbd3676
Show file tree

Hide file tree

Showing 7 changed files with 390 additions and 8 deletions.
diff --git a/Css-files/RateUs.css b/Css-files/RateUs.css
@@ -41,6 +41,13 @@ body {
     font-weight: bold;
     margin-bottom: 20px;
     text-align: center;
+    /* added */
+    transition: text-shadow 0.3s, transform 0.3s;
+}
+/* added */
+.rateus-heading:hover {
+    text-shadow: 0 0 10px #ffcc00;
+    transform: scale(1.05);
 }
 
 /* Star Rating Styles */
@@ -55,11 +62,15 @@ body {
     color: #ccc;
     cursor: pointer;
     transition: color 0.3s;
+    /* added */
+    transform: 0.3s;
 }
 
 .star:hover,
 .star.selected {
     color: #ffcc00;
+    /* added */
+    transform: scale(1.2);
 }
 
 /* Textarea Styles */
@@ -73,11 +84,15 @@ body {
     font-size: 16px;
     color: black;
     transition: border-color 0.3s;
+    /* added */
+    box-shadow :0.3s;
 }
 
 .feedback-textarea:focus {
     outline: none;
     border-color: #ffcc00;
+    /* added */
+    box-shadow: 0 0 10px #ffcc00;
 }
 
 /* Submit Button Styles */

diff --git a/Css-files/content.css b/Css-files/content.css
@@ -884,4 +884,42 @@ td {
 	background-color: #dc3545; 
 	cursor: pointer;
   }
+
+  /* added */
+  .menu-items .card {
+    transition: transform 0.4s, box-shadow 0.4s;
+}
+
+.menu-items .card:hover {
+    transform: translateY(-5px); 
+    box-shadow: 0 0 10px rgba(224, 224, 252, 0.678); 
+}
+.menu-items .card .btn {
+    transition: all 0.3s ease-in-out;
+}
+
+.menu-items .card .btn:hover {
+    background-color: white; 
+    color: orangered; 
+    border-color: orangered; 
+}
+.menu-items .card-thumbnail img {
+
+    transition: transform 0.4s, box-shadow 0.4s;
+}
+
+.menu-items .card-thumbnail img:hover {
+    transform: scale(1.1); 
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); 
+}
+
+.menu-items .items .caption {
+    transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
+}
+
+.menu-items .items .caption:hover {
+    color: orangered;
+    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); 
+}
+
 
diff --git a/Css-files/footer.css b/Css-files/footer.css
@@ -14,15 +14,42 @@ footer {
 }
 
 .foot-panel1 .nav-link {
+  /* font-size: 0.85rem;
+  color: #dddddd;
+  padding: 0; */
+
+  /* added */
   font-size: 0.85rem;
   color: #dddddd;
   padding: 0;
+  position: relative;
+  display: inline-block;
+  transition: color 0.3s ease, text-decoration 0.3s ease;
 }
 
 .foot-panel1 .nav-link:hover {
   text-decoration: underline;
   color: #dddddd;
 }
+/* added */
+.foot-panel1 .nav-link::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 2px;
+  display: block;
+  margin-top: 2px;
+  right: 0;
+  background: #ffffff;
+  transition: width 0.3s ease;
+}
+
+.foot-panel1 .nav-link:hover::after {
+  width: 100%;
+  left: 0;
+  background: #ffffff;
+}
+
 
 #footer-email,
 #footer-message {
@@ -31,6 +58,8 @@ footer {
   background-color: rgba(210, 167, 167, 0.5);
   color: white;
   border: none;
+  /* added */
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 #footer-email:focus,
@@ -46,11 +75,17 @@ footer {
 .foot-panel1 .btn {
   background-color: rgb(117, 21, 21);
   border: none;
+  /* added */
+  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
 }
 
 .foot-panel1 .btn:is(:hover, :focus) {
   background-color: rgb(196, 89, 89);
   border: none;
+
+  /* added */
+  transform: scale(1.05);
+  box-shadow: 0 0 10px rgba(196, 89, 89, 0.7);
 }
 
 .foot-panel2 {
@@ -70,6 +105,13 @@ footer {
   background-color: white;
   border-radius: 50%;
   transition: 0.2s;
+  /* added */
+  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, rotate 0.3s ease;
+}
+/* added */
+.foot-panel2 .social-icons a:hover {
+  transform: scale(1.2) rotate(10deg);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
 .foot-panel2 .fa-facebook:hover {
@@ -110,6 +152,13 @@ footer {
 #author {
   padding: 3px;
   color: #dddddd;
+  /* added */
+  transition: color 0.3s ease, text-shadow 0.3s ease;
+}
+/* added */
+#author:hover {
+  color: #ffffff;
+  text-shadow: 0 0 5px #ffffff;
 }
 
 .foot-panel2 .copyright {
@@ -122,13 +171,24 @@ footer {
 
 .social-icons :hover{
   transform:scale(1.3);
+  /* added */
+  transform: scale(1.3) rotate(5deg);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 
 }
 .media-handles h4:hover{
   /* transform:scale(1.1); */
-color:#d24b29;
+/* added */
+color: #d24b29;
+transition: color 0.3s ease, transform 0.3s ease;
+transform: scale(1.1);
 }
+
 .row h5:hover,
 .row h3:hover {
   color:#d24b29;
+  /* added */
+  transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
+  transform: scale(1.1);
+  text-shadow: 0 0 5px #d24b29;
 }
diff --git a/Css-files/login.css b/Css-files/login.css
@@ -2,19 +2,27 @@
 
 .main-content-login {
   background-color: brown;
-  padding: 4rem 0;
+  /* padding: 4rem 0; */
+  /* added */
+  padding: 4rem 1.5rem;
+  text-align: center;
+
   font-family: 'Noto Sans', sans-serif;
 }
 .login-image {
   max-width: 100%;
   height: auto;
-  border-radius: 8px; /* Rounded corners for the image */
+  border-radius: 12px; /* Rounded corners for the image */
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Soft shadow effect */
-  transition: transform 0.3s ease-in-out; /* Smooth transform animation */
+  /* transition: transform 0.3s ease-in-out;  */
+  /* added */
+  transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
 }
 
 .login-image:hover {
   transform: scale(1.1); /* Scale up the image on hover */
+  /* added */
+  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
 }
 
 /* Example animation for subtle background pattern */
@@ -46,7 +54,7 @@
   background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent white */
   border-radius: 50%;
   opacity: 0;
-  transition: opacity 0.3s ease-in-out;
+  transition: opacity 0.4s ease-in-out;
 }
 
 .login-image:hover::before {
@@ -80,6 +88,9 @@
 
 .card-body {
   padding: 7%;
+  /* added */
+  padding: 5%;
+  border-radius: 12px; 
 }
 
 .textfield {
@@ -94,6 +105,8 @@
 
 .textfield>label {
   font-weight: bold;
+  /* added */
+  margin-bottom: 5px;
 }
 
 .textfield>input {
@@ -106,6 +119,8 @@
   font-size: 12pt;
   box-shadow: 0px 2px 5px #00000056;
   outline: none;
+  /* added */
+  border: 1px solid #ddd;
 }
 
 .textfield>input::placeholder {
@@ -118,6 +133,14 @@
 
 .right-login .row a{
   text-align: right;
+  /* added */
+  color: rgb(208, 50, 50); 
+  text-decoration: none;
+  transition: color 0.3s ease-in-out;
+}
+/* added */
+.right-login .row a:hover {
+  color: #a03030; 
 }
 
 .btn-login {
@@ -133,10 +156,15 @@
   color: white;
   background: rgb(208, 50, 50);
   box-shadow: 0px 10px 40px -12px #b10f1f85;
+
+  /* added */
+  transition: 0.3s ease-in-out, box-shadow 0.3s ease-in-out; 
 }
 
 .btn-login:hover {
   background: rgba(208, 50, 50, 0.9);
+  /* added */
+  box-shadow: 0 12px 50px -12px rgba(208, 50, 50, 0.6);
 }
 
 #login-hide {
@@ -192,3 +220,5 @@
 	font-size:13px;
 	font-weight: bold;
 }
+
+