attractive footer

i committed some changes to enhance footer look .... changing some colors adding some styling hovering effect many much enhance future
Anjaliavv51 · Oct 21, 2024 · 614546e · 614546e
1 parent d393add
commit 614546e
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 63 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "ritwickdey.liveserver"
+    ]
+}
diff --git a/Css-files/style.css b/Css-files/style.css
@@ -352,8 +352,8 @@ body {
 
 }
 
-/* .footer {
-    background-color:  rgb(224, 224, 252);;
+/*.footer {
+    background-color: #212123;
     height: 700px;
 } */
 

diff --git a/index.html b/index.html
@@ -1097,68 +1097,68 @@ <h2 style="display: flex; justify-content: center; align-items: center; margin-t
 
     </section>
 
-    <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>
+    <div class="app_download">
+        <h4 >Free Delivery!</h4>
+        <h2 >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>
+        <p >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>
 
     </div>
 
-    <div class="footer" style="background-color: hsl(20, 43%, 93%);">
+    <div class="footer">
         <footer>
-            <div class="foot-panel2" style="background-color:hsl(20, 43%, 93%);font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">
+            <div class="foot-panel2">
                 <ul>
-                    <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);text-align: left;">Our Pages</p>
-
-                    <a href="#" >Home</a>
-                    <a href="Html-files/menu.html" >About</a>
-                    <a href="Html-files/services.html" >Services</a>
-                    <a href="Html-files/contact.html" >Contact us</a>
-                    <a href="Html-files/cart.html" >Cart</a>
-                    <a href="Html-files/museums.html" >Museums</a>
-                    <a href="Html-files/reviews.html">Share Experience</a>
+                    <p>Our Pages</p>
+                   <li>
+                    <a href="#" >Home</a></li>
+                  <li>  <a href="Html-files/menu.html" style="color: crimson;">About</a></li>
+                 <li>   <a href="Html-files/services.html" style="color: crimson;">Services</a>  </li>
+                    <li> <a href="Html-files/contact.html" style="color: crimson;">Contact us</a> </li>
+                    <li> <a href="Html-files/cart.html" style="color: crimson;">Cart</a> </li>
+                    <li> <a href="Html-files/museums.html" style="color: crimson;">Museums</a> </li>
+                    <li> <a href="Html-files/reviews.html" style="color: crimson;">Share Experience</a> </li>
                 </ul>
                 <ul>
-                    <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher); text-align:left"> Exclusive Offers</p>
-                    <a href="#" >Retro Discounts</a>
-                    <a href="#" >Limited-Time Promotions</a>
-                    <a href="#" >Special Event Packages</a>
-                    <a href="#" >Membership Benefits</a>
-                    <a href="#" >Early Access to New Collections</a>
-                    <a href="#" >VIP Retro Events</a>
-                    <a href="#" >Personalized Culinary Experiences</a>
+                    <p> Exclusive Offers</p>
+                    <li>  <a href="#" style="color: crimson;">Retro Discounts</a>
+                        <li> <a href="#" style="color: crimson;">Limited-Time Promotions</a> </li>
+                            <li> <a href="#" style="color: crimson;">Special Event Packages</a> </li>
+                    <a href="#" style="color: crimson;">Membership Benefits</a> </li>
+                    <li> <a href="#" style="color: crimson;">Early Access to New Collections</a></li>
+                    <li>   <a href="#" style="color: crimson;">VIP Retro Events</a></li>
+                        <li>  <a href="#" style="color: crimson;">Personalized Culinary Experiences</a> </li>
 
 
                 </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" >Secure Checkout</a>
-                    <a href="./Html-files/payment2.html" >Credit/Debit Cards</a>
-                    <a href="./Html-files/payment2.html" >Online Payment</a>
-                    <a href="./Html-files/payment2.html" >Mobile Wallets</a>
-                    <a href="./Html-files/payment2.html" >Contactless Payments</a>
+                    <p >Payment Products</p>
+                    <li>  <a href="./Html-files/payment2.html" style="color: crimson;">Secure Checkout</a> </li>
+                        <li>  <a href="./Html-files/payment2.html"  style="color: crimson;">Credit/Debit Cards</a> </li>
+                            <li>  <a href="./Html-files/payment2.html"  style="color: crimson;">Online Payment</a> </li>
+                                <li>   <a href="./Html-files/payment2.html" style="color: crimson;">Mobile Wallets</a> </li>
+                                    <li> <a href="./Html-files/payment2.html" style="color: crimson;">Contactless Payments</a> </li>
                 </ul>
                 <form id="contactForm">
-                    <h3 style="font-family: var(--ff-philosopher); color: hsl(357, 82%, 35%);">Contact Us!</h3>
+                    <p><h3 style="color: white;  text-decoration: underline;" >Contact Us!</h3></p>
 
-                    <div style="position: relative; margin-bottom: 15px;">
-                        <i class="fas fa-envelope" style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; color: gray;"></i>
+                    <div>
+                        <i class="fas fa-envelope" ></i>
                         <input type="email" id="email" name="email" placeholder="Your Email" required 
-                               style="padding-left: 30px;">
+                              >
                     </div>
 
-                    <div style="position: relative; margin-bottom: 15px;">
-                        <i class="fas fa-comment" style="position: absolute; left: 10px; top: 10px; font-size: 14px; color: gray;"></i>
+                    <div>
+                        <i class="fas fa-comment"></i>
                         <textarea id="message" name="message" placeholder="Your Message" required 
-                                  style="padding-left: 30px;"></textarea>
+                                  ></textarea>
                     </div>
 
-                    <button id="butt" type="submit" style="font-family: ui-serif;">Send Message</button>
+                    <button id="butt" type="submit">Send Message</button>
                 </form>
 
 
@@ -1169,9 +1169,9 @@ <h3 style="font-family: var(--ff-philosopher); color: hsl(357, 82%, 35%);">Conta
             </div>
 
 
-            <div class="foot_panel4" style="background-color: transparent;">
+            <div class="foot_panel4">
                 <div class="pages">
-                    <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow Us</h4>
+                    <h4>Follow Us</h4>
 
                     <div class="social-icons">
 
@@ -1183,15 +1183,15 @@ <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow
                         <a class="fa-brands fa-snapchat"  href="https://www.snapchat.com" ></a>
 
                     </div>
-                    <p style="font-family: var(--ff-philosopher);background-color: hsl(20, 43%, 93%);color: hsl(203, 30%, 26%);margin-bottom:0;">Stay connected with us on social media for the latest updates, latest collection, and vintage adventures.
+                    <p>Stay connected with us on social media for the latest updates, latest collection, and vintage adventures.
                     </p>
-                    <div class="copyright" style="font-family: var(--ff-philosopher);background-color: hsl(20, 43%, 93%);color: black;">
+                    <div class="copyright">
 
                         &copy;<span id="copyright"></span> Retro . All Rights Reserved. | Developed by <span id="author">
-                            <a href="https://www.linkedin.com" target="_blank" style="text-decoration: none;">Retro Team</a>
+                            <a href="https://www.linkedin.com" target="_blank">Retro Team</a>
                     </div>
                     <div>
-                        <button id="sr" style="z-index: 1000; display: block;">
+                        <button id="sr">
                         <div class="circle1">
                           <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
                             <path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"></path>

diff --git a/style.css b/style.css
@@ -480,23 +480,31 @@ body {
 }
 
 .app_download {
-  background-color: brown;
+  background-color:crimson;
   height: 350px;
   color: white;
   padding-left: 50px;
   padding-top: 80px;
+  border: 2px solid black ;
+  border-radius:5%;
 }
 
 .app_download h4 {
   font-size: 2rem;
+  font-family:Arial, Helvetica, sans-serif;
 }
 
 .app_download h2 {
   font-size: 3.5rem;
-}
+
+  text-decoration: underline;
+
+} 
 
 .app_download p {
   font-size: 1.3rem;
+  font-family: cursive;
+  font-style: italic;
 }
 
 .btn a {
@@ -509,8 +517,8 @@ body {
 }
 
 .app-download-img {
-  max-height: 70px;
-
+  max-height:70px;
+   
   padding: 10px;
 }
 
@@ -525,10 +533,12 @@ body {
   padding-top: 10px;
 }
 
-/* .footer {
-    background-color:  rgb(224, 224, 252);;
+ .footer {
+    background-color:black;
     height: 700px;
-} */
+    margin-top:20px;
+    border:2px solid white;
+} 
 
 /* .footer .container {
     border: 2px solid rgb(22, 6, 6);
@@ -589,9 +599,8 @@ body {
 } */
 
 .foot-panel2 {
-  background-color: rgb(138, 37, 37);
-  color: white;
   height: 300px;
+  border:2px #000 solid ;
   /* height: fit-content; */
   display: flex;
   /* padding: 10px; */
@@ -603,17 +612,21 @@ body {
 }
 
 ul p {
-  font-weight: 700;
+  font-weight: 900;
+  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+text-decoration:  solid underline;
+color:white;
 }
 
-ul a {
+ ul li {
   display: block;
   font-size: 0.85rem;
   margin-top: 10px;
-  /* color: #dddddd; */
   text-decoration: none;
+  color:crimson;
 }
 
+
 /* .foot-pannel3{
     background-color:rgb(66, 16, 16);
     color: white;
@@ -625,11 +638,13 @@ ul a {
 
 
 .foot_panel4 {
-  background-color: rgb(66, 16, 16);
-  color: white;
-  height: 160px;
+  background-color:crimson;
+  color:black;
+  height: 180px;
   font-size: 0.9rem;
+  border:#000000 solid 2px;
   text-align: center;
+  text-decoration: underline;
 }
 
 .pages {
@@ -645,6 +660,7 @@ form {
   display: grid;
   /* gap: 10px; */
   padding-bottom: 100px;
+  color:crimson;
 }
 
 label {
@@ -663,7 +679,7 @@ textarea {
 }
 
 #butt {
-  background-color: brown;
+  background-color:brown;
   color: white !important;
   padding: 3px;
   border: 1px solid white;
@@ -672,15 +688,15 @@ textarea {
 }
 
 #butt:hover {
-  background-color: rgb(196, 89, 89);
+  background-color:crimson;
 }
 
 .social-icons a {
   font-size: 1rem;
   padding: 7px;
   margin: 7px 6px 0 8px; 
   text-decoration: none;
-  color: brown !important;
+  color: white !important;
 }
 
 .social-icons a:hover {