From e8db22c696edb2e9b5ee8770e86357de36fa1193 Mon Sep 17 00:00:00 2001
From: JSriwongsa <sriwongsa.jtp@gmail.com>
Date: Tue, 25 Jul 2023 17:04:06 -0500
Subject: [PATCH] added footer

---
 donation_website/index.html | 26 +++++++++++-
 donation_website/style.css  | 85 ++++++++++++++++++++++++++++++-------
 2 files changed, 95 insertions(+), 16 deletions(-)

diff --git a/donation_website/index.html b/donation_website/index.html
index a7d31eb..1f3f62f 100644
--- a/donation_website/index.html
+++ b/donation_website/index.html
@@ -554,7 +554,31 @@
 
         </main>
 
-        <footer></footer>
+        <footer>
+            <div class="footer">
+                <div class="container">
+                    <div class="social-icon">
+                        <a href=""><i class='bx bxl-facebook'></i></a>
+                        <a href=""><i class='bx bxl-instagram' ></i></a>
+                        <a href=""><i class='bx bxl-twitter' ></i></a>
+                        <a href=""><i class='bx bxl-youtube' ></i></a>
+                        <a href=""><i class='bx bxl-gmail' ></i></a>
+                    </div>
+                    <div class="footernav">
+                        <ul>
+                            <li><a href="">News</a></li>
+                            <li><a href="">About</a></li>
+                            <li><a href="">Contact Us</a></li>
+                            <li><a href="">Our Team</a></li>
+                            <li><a href="">Privacy Policy</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="copyright">
+                        <p>Copyright &copy;Blood Bank 2023. All rights reserved.</p>
+                    </div>
+            </div>
+        </footer>
 
         <div class="overlay" data-overlay></div>
 
diff --git a/donation_website/style.css b/donation_website/style.css
index d58593a..90a4a22 100644
--- a/donation_website/style.css
+++ b/donation_website/style.css
@@ -939,20 +939,57 @@ form.search i{
     text-align: center;
     align-items: center;
 }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+/*----- footer -----*/
+.footer{
+    width: 100%;
+    padding: 50px 30px 20px;
+    background-color: whitesmoke;
+}
+.social-icon{
+    display: flex;
+    justify-content: center;
+}
+.social-icon a{
+    width: 40px;
+    height: 40px;
+    background-color: #FA8072;
+    margin: 10px;
+    border-radius: 50%;
+    justify-content: center;
+    text-align: center;
+    line-height: 45px;
+}
+.social-icon a:hover{
+    background-color: #E34234;
+    transition: 0.3s;
+}
+.social-icon a i{
+    font-size: 22px;
+    color: white; 
+}
+.footernav{
+    margin: 30px 0;
+}
+.footernav ul{
+    display: flex;
+    justify-content: center;
+}
+.footernav ul li a{
+    margin: 20px;
+    font-size: 14px;
+    color: #FA8072;
+    transition: 0.5s;
+    font-weight: 600;
+}
+.footernav ul li a:hover{
+    color: #D22B2B;
+}
+.copyright{
+    background-color: whitesmoke;
+    color:#625a71;
+    font-size: 12px;
+    text-align: center;
+}
 
 
 @media only screen and (max-width:1500px){
@@ -1060,10 +1097,28 @@ form.search i{
     }
 }
 
+@media screen and (max-width:700px) {
+    .footernav ul{
+        flex-direction: column;
+    }
+    .footernav ul li{
+        width: 100%;
+        margin: 10px;
+        text-align: center;
+    }
+    .social-icon a i{
+        font-size: 18px;
+    }
+    .social-icon a{
+        width: 30px;
+        height: 30px;
+        line-height: 35px;
+    }
+}
 @media screen and (min-width:768px){
     .guide{
         padding: 1rem 7rem;
-    }
+    } 
 }
 
 @media screen and (max-width:490px){