From 8c0a7ac111e4fc4cc7d919eb32fab380bee9f2e8 Mon Sep 17 00:00:00 2001
From: S G Sumanth <sumanthusha01@gmail.com>
Date: Tue, 15 Oct 2024 18:21:09 +0530
Subject: [PATCH] Made the footer section attractive and dynamic for the
 website

---
 index.html |  69 +++++++++++++++++++-----------
 style.css  | 121 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 164 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index 0c2e5a8b..245232c4 100644
--- a/index.html
+++ b/index.html
@@ -719,13 +719,18 @@ <h2 class="accordion-header" id="headingSix">
 
     <div class="app_download" style="background-color: hsl(20, 43%, 93%);">
         <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Free Delivery!</h4>
-        <h2 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Download the App now!</h2>
+        <h2 class="knockout" style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Download the App now!</h2>
         <br>
-        <p style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);text-align:left;">For best discounts and free delivery download the app now from your Google Play Store or App Store.</p>
-        <a href="https://play.google.com/store/games?device=windows"><img src="./Images/get_it_on_google_play_store.png" class="app-download-img"
-                alt="Get it on Google Play Store"></a>
-        <a href="https://www.apple.com/in/app-store/"><img src="./Images/download-on-the-app-store.png" class="app-download-img"
-                alt="Download on the Apple App Store"></a>
+        <p style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);text-align:center;">For best discounts and free delivery download the app now from your Google Play Store or App Store.</p>
+        <div style="text-align: center;">
+            <a href="https://play.google.com/store/games?device=windows">
+                <img src="./Images/get_it_on_google_play_store.png" class="app-download-img" alt="Get it on Google Play Store" style="margin: 0 10px;">
+            </a>
+            <a href="https://www.apple.com/in/app-store/">
+                <img src="./Images/download-on-the-app-store.png" class="app-download-img" alt="Download on the Apple App Store" style="margin: 0 10px;">
+            </a>
+        </div>
+        
 
     </div>
 
@@ -734,39 +739,53 @@ <h2 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Downlo
             <div class="foot-panel2" style="background-color:hsl(20, 43%, 93%);font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">
                 <ul>
                     <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);text-align: left;">Our Pages</p>
-                    <a href="#" style="color: black;">Home</a>
-                    <a href="Html-files/menu.html" style="color: black;">About</a>
-                    <a href="Html-files/services.html" style="color: black;">Services</a>
-                    <a href="Html-files/contact.html" style="color: black;">Contact us</a>
+                    <a href="#" class="hover-underline-animation" style="color: black;">Home</a>
+                    <br>
+                    <a href="Html-files/menu.html" class="hover-underline-animation" style="color: black;">About</a>
+                    <br>
+                    <a href="Html-files/services.html" class="hover-underline-animation" style="color: black;">Services</a>
+                    <br>
+                    <a href="Html-files/contact.html" class="hover-underline-animation" style="color: black;">Contact us</a>
+                    <br>
                     <a href="Html-files/cart.html" style="color: black;">Cart</a>
                 </ul>
                 <ul>
                     <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher); text-align:left"> Exclusive Offers</p>
-                    <a href="#" style="color: black;">Retro Discounts</a>
-                    <a href="#" style="color: black;">Limited-Time Promotions</a>
-                    <a href="#" style="color: black;">Special Event Packages</a>
-                    <a href="#" style="color: black;">Membership Benefits</a>
-                    <a href="#" style="color: black;">Early Access to New Collections</a>
-                    <a href="#" style="color: black;">VIP Retro Events</a>
-                    <a href="#" style="color: black;">Personalized Culinary Experiences</a>
+                    <a href="#" class="hover-underline-animation" style="color: black;">Retro Discounts</a>
+                    <br>
+                    <a href="#" class="hover-underline-animation" style="color: black;">Limited-Time Promotions</a>
+                    <br>
+                    <a href="#" class="hover-underline-animation" style="color: black;">Special Event Packages</a>
+                    <br>
+                    <a href="#" class="hover-underline-animation" style="color: black;">Membership Benefits</a>
+                    <br>
+                    <a href="#" class="hover-underline-animation" style="color: black;">Early Access to New Collections</a>
+                    <br>
+                    <a href="#" class="hover-underline-animation" style="color: black;">VIP Retro Events</a>
+                    <br>
+                    <a href="#" class="hover-underline-animation" style="color: black;">Personalized Culinary Experiences</a>
 
                 </ul>
                 <ul>
                     <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);text-align:left">Payment Products</p>
-                    <a href="./Html-files/payment2.html" style="color: black;">Secure Checkout</a>
-                    <a href="./Html-files/payment2.html" style="color: black;">Credit/Debit Cards</a>
-                    <a href="./Html-files/payment2.html" style="color: black;">Online Payment</a>
-                    <a href="./Html-files/payment2.html" style="color: black;">Mobile Wallets</a>
-                    <a href="./Html-files/payment2.html" style="color: black;">Contactless Payments</a>
+                    <a href="./Html-files/payment2.html" class="hover-underline-animation" style="color: black;">Secure Checkout</a>
+                    <br> 
+                    <a href="./Html-files/payment2.html" class="hover-underline-animation" style="color: black;">Credit/Debit Cards</a>
+                    <br>
+                    <a href="./Html-files/payment2.html" class="hover-underline-animation" style="color: black;">Online Payment</a>
+                    <br>
+                    <a href="./Html-files/payment2.html" class="hover-underline-animation" style="color: black;">Mobile Wallets</a>
+                    <br>
+                    <a href="./Html-files/payment2.html" class="hover-underline-animation" style="color: black;">Contactless Payments</a>
                 </ul>
                 <form id="contactForm">
                     <h3 style="font-family: var(--ff-philosopher);color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);">Contact Us!</h3>
                     
-                    <input type="email" id="email" name="email" placeholder="Your Email" required>
+                    <input type="email" id="email" name="email" class="textbox-input" placeholder="Your Email" required>
 
-                    <textarea id="message" name="message" placeholder="Your Message" required></textarea>
+                    <textarea id="message" name="message" class="textbox-input" placeholder="Your Message" required></textarea>
 
-                    <button id="butt" type="submit" style="font-family: ui-serif;">Send Message</button>
+                    <button id="butt" type="submit" class="glow-on-hover" style="font-family: ui-serif;">Send Message</button>
                 </form>
 
             </div>
diff --git a/style.css b/style.css
index 97ce82e6..ef1a9d52 100644
--- a/style.css
+++ b/style.css
@@ -1090,4 +1090,123 @@ padding-left:2px;
   cursor: pointer;
   margin-top: 5px;
   width: 60%;
-}
\ No newline at end of file
+}
+.hover-underline-animation {
+  display: inline-block;
+  position: relative;
+  color: rgb(19, 18, 18);
+}
+.hover-underline-animation:after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: rgb(18, 18, 18);
+  transform-origin: bottom right;
+  transition: transform 0.25s ease-out;
+}
+.hover-underline-animation:hover:after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
+}
+.textbox-input {
+  transition: all 0.3s ease;
+}
+.textbox-input:focus {
+  border-color: rgb(94, 96, 23);
+  box-shadow: 0 0 10px rgb(83, 99, 13);
+}
+.glow-on-hover {
+  width: 220px;
+  height: 50px;
+  border: none;
+  outline: none;
+  color: #fff;
+  background: #111;
+  cursor: pointer;
+  position: relative;
+  z-index: 0;
+  border-radius: 10px;
+}
+
+.glow-on-hover:before {
+  content: '';
+  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
+  position: absolute;
+  top: -2px;
+  left:-2px;
+  background-size: 400%;
+  z-index: -1;
+  filter: blur(5px);
+  width: calc(100% + 4px);
+  height: calc(100% + 4px);
+  animation: glowing 20s linear infinite;
+  opacity: 0;
+  transition: opacity .3s ease-in-out;
+  border-radius: 10px;
+}
+
+.glow-on-hover:active {
+  color: #000
+}
+
+.glow-on-hover:active:after {
+  background: transparent;
+}
+
+.glow-on-hover:hover:before {
+  opacity: 1;
+}
+
+.glow-on-hover:after {
+  z-index: -1;
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: #380808;
+  left: 0;
+  top: 0;
+  border-radius: 10px;
+}
+
+@keyframes glowing {
+  0% { background-position: 0 0; }
+  50% { background-position: 400% 0; }
+  100% { background-position: 0 0; }
+}
+.knockout {
+  
+  vertical-align: middle;
+  text-align: center;
+  font-family: 'Pacifico', cursive;
+  font-size:50pt;
+  color: blue;
+  color: #fff;
+  background: linear-gradient(110deg, #756a40 33%, rgba(133, 62, 62, 0) 33%), linear-gradient(110deg, #71c49d 34%, #88d8b0 34%);
+  background-size: 400%;
+   -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;
+}
+.knockout{
+    animation: Gradient 5s ease infinite;
+    -webkit-animation: Gradient 15s ease infinite;
+    -moz-animation: Gradient 5s ease infinite;
+}
+
+@-webkit-keyframes Gradient {
+  0% {
+    background-position: 30% 50%
+  }
+  50% {
+    background-position: 25% 50%
+  }
+  100% {
+    background-position: 30% 50%
+  }
+  
+}
+