Added Footer

css/style.css

@@ -14,6 +14,10 @@
   font-family: roboto;
   src: url("/fonts/roboto.ttf");
 }
+@font-face {
+  font-family: opensans;
+  src: url("/fonts/opensans.ttf");
+}
 * {
   margin: 0;
   padding: 0;
@@ -394,6 +398,76 @@ input[type="radio"]:checked {
   background: #1b204a;
 }
 
+.footer {
+  background: linear-gradient(180deg, #000 0%, #1d1e20 100%);
+  color: #fff;
+  font-family: opensans;
+  padding: 40px 20px 40px 20px;
+  display: flex;
+  justify-content: center;
+}
+.footerlefthead {
+  display: flex;
+  align-items: center;
+  font-size: 10px;
+  color: #e6222b;
+  gap: 5px;
+}
+.footerlefthead img {
+  height: 30px;
+}
+.footerleftside {
+  display: flex;
+  font-size: 10px;
+  margin: 10px 0 10px 0;
+}
+.footerright {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+.footerleft {
+  width: 30%;
+  padding: 10px;
+}
+.footerrightbody {
+  width: 32%;
+  padding: 10px;
+  font-size: 15px;
+}
+.footerrightheader {
+  color: #e6222b;
+  font-size: 20px;
+}
+.footerrightsplitter {
+  width: 20%;
+  border: 1px solid #e6222b;
+  margin: 20px 0 20px 0;
+}
+.footer ul {
+  list-style-type: none;
+}
+.footer ul li {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  margin-bottom: 10px;
+}
+.socials {
+  display: flex;
+  gap: 10px;
+  margin: 20px auto 20px auto;
+}
+.copyright {
+  font-size: 10px;
+  background-color: #e6222b;
+  padding: 30px 10px 30px 10px;
+  display: flex;
+  justify-content: center;
+  font-family: opensans;
+  color: #fff;
+}
 @media screen and (max-width: 1000px) {
   .navitems {
     display: none;
@@ -448,6 +522,21 @@ input[type="radio"]:checked {
   .donationbtn {
     padding: 20px;
   }
+  .footer {
+    flex-direction: column;
+  }
+  .footerright {
+    flex-direction: column;
+  }
+  .footerleft {
+    width: 100%;
+  }
+  .footerrightbody {
+    width: 100%;
+  }
+  .socials {
+    justify-content: center;
+  }
 }
 
 @media screen and (min-width: 1400px) {

index.html

@@ -204,6 +204,70 @@ <h1>Donation</h1>
         </form>
       </div>
     </div>
+    <div class="footer">
+      <div class="footerleft">
+        <div class="footerlefthead">
+          <img src="images/assests/logo.png" alt="logo" />
+          <h1>AD LIFE</h1>
+        </div>
+        <div class="footerleftside"><p>ADDING VALUE TO LIFE</p></div>
+        <div class="footerleftbody">
+          <p>
+            Our trust is registered under the Indian Trusts Act, 1882 with
+            Sub-Registrar at Kengeri, Bangalore since January 3rd, 2005.
+          </p>
+        </div>
+      </div>
+      <div class="footerright">
+        <div class="footerrightbody">
+          <div class="footerrightheader">WHO WE ARE</div>
+          <hr class="footerrightsplitter" />
+          <ul>
+            <li>> Homepage</li>
+            <li>> Activities</li>
+            <li>> Information</li>
+            <li>> Contribute Now</li>
+            <li>> Contact</li>
+          </ul>
+        </div>
+        <div class="footerrightbody">
+          <div class="footerrightheader">WHERE WE WORK</div>
+          <hr class="footerrightsplitter" />
+          <ul>
+            <li>
+              <img src="images/assests/map.png" alt="map" />B-803, 10-3-163/1
+              Amri Central Court Apartments Old Lance Lines , Secunderabad -
+              500025
+            </li>
+            <li>
+              <img src="images/assests/phone.png" alt="phone" />+91-9505051521
+            </li>
+
+            <li>
+              <img
+                src="images/assests/mail.png"
+                alt="mail"
+              />[email protected]
+            </li>
+          </ul>
+        </div>
+        <div class="footerrightbody">
+          <div class="footerrightheader">FOLLOW US</div>
+          <hr class="footerrightsplitter" />
+          <p>
+            For more Regular updates and event announcements. Make sure to
+            follow us:
+          </p>
+          <div class="socials">
+            <img src="images/assests/fb.png" alt="facebook" />
+            <img src="images/assests/insta.png" alt="instagram" />
+            <img src="images/assests/twitter.png" alt="twitter" />
+            <img src="images/assests/yt.png" alt="youtube" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="copyright">Copyright 2023 © AD Life Trust.</div>
     <script src="js/script.js"></script>
   </body>
 </html>