Merge pull request #1185 from SuhainaFathimaM/main

Added Styles and hovering effect and animations to the kitter Website #939

Projects/Pet_Website/assets/css/style.css

@@ -1,15 +1,3 @@
-/*-----------------------------------*\
-  #style.css
-\*-----------------------------------*/
-
-/**
- * copyright 2022 codewithsadee
- */
-
-
-
-
-
 /*-----------------------------------*\
   #CUSTOM PROPERTY
 \*-----------------------------------*/
@@ -87,10 +75,6 @@
 
 }
 
-
-
-
-
 /*-----------------------------------*\
   #RESET
 \*-----------------------------------*/
@@ -115,7 +99,6 @@ a {
   color: inherit;
   text-decoration: none;
 }
-
 img { height: auto; }
 
 button {
@@ -153,9 +136,6 @@ body {
 ::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }
 
 
-
-
-
 /*-----------------------------------*\
   #REUSED STYLE
 \*-----------------------------------*/
@@ -259,9 +239,6 @@ body {
 .w-100 { width: 100%; }
 
 
-
-
-
 /*-----------------------------------*\
   #HEADER
 \*-----------------------------------*/
@@ -278,6 +255,7 @@ body {
   z-index: 4;
 }
 
+
 .header.active {
   position: fixed;
   box-shadow: var(--shadow-1);
@@ -373,9 +351,6 @@ body {
 }
 
 
-
-
-
 /*-----------------------------------*\
   #HERO
 \*-----------------------------------*/
@@ -467,6 +442,7 @@ body {
   border: 1px solid var(--platinum);
   border-radius: var(--radius-10);
   margin-block-end: 20px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }
 
 .product-card :is(.wrapper, .rating-wrapper) { display: flex; }
@@ -501,8 +477,56 @@ body {
   font-weight: var(--fw-700);
 }
 
+/* Product Card Hover Effects */
+.product-card:is(:hover, :focus-within) .img-cover {
+  transform: scale(1.05); /* Smooth scaling on hover */
+  transition: var(--transition-2); /*  Smooth transition */
+}
 
+.product-card:is(:hover, :focus-within) .card-title {
+  color: var(--portland-orange); /* Title color change on hover */
+}
 
+.product-card .card-action-btn { 
+  display: none; 
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  background-color: var(--portland-orange);
+  color: var(--white);
+  font-size: 20px;
+  padding: 12px;
+  border-radius: 50%;
+  transition: var(--transition-1);
+}
+
+.product-card:is(:hover, :focus-within) .card-action-btn {
+  display: block;
+  opacity: 1;
+}
+
+/* Styling the "Add to Cart" icon */
+.product-card .card-action-btn:is(:hover, :focus) {
+  background-color: var(--white);
+  color: var(--portland-orange);
+  border: 1px solid var(--portland-orange); /* Add a border */
+}
+
+/* Styling the hover image */
+.product-card .img-cover.hover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+}
+
+.product-card:is(:hover, :focus-within) .img-cover.default {
+  opacity: 0;
+}
+
+.product-card:is(:hover, :focus-within) .img-cover.hover {
+  opacity: 1;
+}
 
 
 /*-----------------------------------*\
@@ -610,6 +634,13 @@ body {
   margin-block-end: 25px;
 }
 
+.footer-link {
+  padding-block: 4px;
+  transition: var(--transition-1);
+}
+
+.footer-link:is(:hover, :focus) { color: var(--amber); }
+
 .footer-text .link {
   display: inline-block;
   color: var(--portland-orange);
@@ -630,6 +661,54 @@ body {
   color: var(--portland-orange);
 }
 
+/* Contact Form Styling */
+#contact {
+  padding: 50px 0;
+  background-color: #F7BB4A;
+  margin-bottom: 20rem;
+}
+
+.contact-form-wrapper {
+  background: #fff;
+  padding: 40px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-control {
+  width: 100%;
+  padding: 15px;
+  margin-top: 5px;
+  border-radius: 10px;
+  border: 1px solid #ccc;
+  font-size: 1em;
+  transition: border-color 0.3s, box-shadow 0.3s;
+}
+
+.form-control:focus {
+  border-color: #5cb85c;
+  box-shadow: 0 0 5px rgba(92, 184, 92, 0.5);
+}
+
+.btn-primary {
+  background-color: #5cb85c;
+  border: none;
+  color: white;
+  padding: 15px 25px;
+  font-size: 1.2em;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.btn-primary:hover {
+  background-color: #4cae4c;
+}
+
 .social-list {
   display: flex;
   gap: 10px;
@@ -1053,7 +1132,6 @@ body {
 
 
 
-
 /**
  * responsive for large than 1200px screen
  */
@@ -1106,6 +1184,7 @@ body {
   .footer { padding-block-start: 40px; }
 
 }
+
 /* General Styles */
 body {
   font-family: Arial, sans-serif;
@@ -1170,9 +1249,10 @@ body {
   background-color: #5cb85c;
   border: none;
   color: white;
-  padding: 15px;
+  padding: 15px 25px;
   font-size: 1.2em;
   border-radius: 10px;
+  cursor: pointer;
   transition: background-color 0.3s;
 }