Added Activities

TartejBrothers · Dec 8, 2023 · f3bc07d · f3bc07d
1 parent 089ae39
commit f3bc07d
Show file tree

Hide file tree

Showing 14 changed files with 354 additions and 1 deletion.
diff --git a/activites.html b/activites.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Activites</title>
+    <link rel="stylesheet" href="css/activites.css" />
+  </head>
+  <body>
+    <div class="header">
+      <div class="navbar">
+        <div class="navleft">
+          <img src="images/assests/logo.png" alt="logo" />
+          <input type="text" id="search" />
+        </div>
+        <div class="navright">
+          <a href="index.html" class="navitems">Home</a>
+
+          <a href="contact.html" class="navitems">Contact Us</a>
+          <a href="volunteer.html" class="navitems">Volunteer</a>
+          <img src="images/assests/gripblack.png" alt="menu" />
+        </div>
+      </div>
+      <hr class="splitter" />
+    </div>
+    <div class="activities">
+      <h1>Activities</h1>
+      <p>
+        AD Life Trust focuses on empowering individuals through health
+        improvement, education, and livelihood development. They prioritize
+        vulnerable populations, offering health camps, counseling, and
+        nutritional support. The trust supports higher education for
+        economically weak girls and preserves traditional knowledge.
+      </p>
+      <p>
+        Livelihood development, particularly for women, involves skill training
+        and creating market linkages for sustainable incomes. They emphasize
+        evidence-based work, conducting monitoring and evaluation for project
+        effectiveness and supporting academic research with policy impact
+        potential.
+      </p>
+    </div>
+    <img src="images/activities/top.png" alt="top" class="fullwidth" />
+    <div class="help">
+      <h1>We <font color="#E6222B">Need</font> Your Help</h1>
+
+      <hr class="helpsplitter" />
+      <p>
+        “Creating a difference in the lives of people, by helping people to help
+        themselves”
+      </p>
+      <div class="helpbody">
+        <div class="helpbodychild">
+          <img src="images/assests/education.png" alt="education" />
+          <p>Education</p>
+        </div>
+        <div class="helpbodychild">
+          <img src="images/assests/health.png" alt="education" />
+          <p>Health</p>
+        </div>
+        <div class="helpbodychild">
+          <img src="images/assests/livelihoods.png" alt="education" />
+          <p>Livelihoods</p>
+        </div>
+        <div class="helpbodychild">
+          <img src="images/assests/research.png" alt="education" />
+          <p>Research and Documentation</p>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/css/activites.css b/css/activites.css
@@ -0,0 +1,184 @@
+@font-face {
+  font-family: mediamoure;
+  src: url("/fonts/mediamoure.ttf");
+}
+@font-face {
+  font-family: abhayalibre;
+  src: url("/fonts/AbhayaLibre.ttf");
+}
+@font-face {
+  font-family: lora;
+  src: url("/fonts/lora.ttf");
+}
+@font-face {
+  font-family: roboto;
+  src: url("/fonts/roboto.ttf");
+}
+@font-face {
+  font-family: opensans;
+  src: url("/fonts/opensans.ttf");
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+body {
+  width: 100%;
+  overflow-x: hidden;
+}
+*::-webkit-scrollbar {
+  display: none;
+}
+.header {
+  background-image: none;
+  background-color: #fff;
+  color: #000;
+}
+.headerbody h1 {
+  font-family: mediamoure;
+  color: #000;
+}
+
+input#search {
+  color: #000;
+  border-radius: 21.5px;
+  border: 1px solid #000;
+  font-size: 16px;
+  background-color: transparent;
+  background-image: url("/images/assests/searchdark.png");
+  background-position: 5px 5px;
+  background-repeat: no-repeat;
+  width: 100%;
+  padding: 6px 20px 6px 40px;
+}
+
+.navbar {
+  padding: 20px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.navleft {
+  padding-left: 20px;
+  display: flex;
+  gap: 20px;
+  align-items: center;
+}
+
+.navright {
+  padding-right: 20px;
+  display: flex;
+  gap: 50px;
+  align-items: center;
+}
+
+.navbar a {
+  color: #000;
+  text-decoration: none;
+  font-family: abhayalibre;
+  font-size: 20px;
+}
+.splitter {
+  margin: 20px auto 20px auto;
+  width: 80%;
+}
+.activities {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 60px;
+  font-family: mediamoure;
+}
+.activities h1 {
+  font-size: 96px;
+}
+.activities p {
+  width: 70%;
+  font-size: 22px;
+}
+.fullwidth {
+  width: 100%;
+  object-fit: contain;
+  margin-bottom: 60px;
+}
+.help {
+  font-family: roboto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: #f2f1f1;
+  align-items: center;
+  padding: 50px 0px 50px 0px;
+}
+.helpsplitter {
+  margin: 20px auto 20px auto;
+  width: 20%;
+  border: 1px solid #e6222b;
+}
+.helpbody {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+.help h1 {
+  font-family: lora;
+  font-size: 50px;
+}
+.help p {
+  font-size: 18px;
+  width: 70%;
+  text-align: center;
+  margin-bottom: 20px;
+}
+.helpbody {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+}
+.helpbodychild {
+  width: 35%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex;
+  align-items: center;
+}
+.helpbodychild img {
+  height: 40px;
+}
+.helpbodychild p {
+  margin-top: 20px;
+  color: #e6222b;
+  font-size: 10px;
+  text-align: center;
+}
+@media screen and (max-width: 1000px) {
+  .navitems {
+    display: none;
+  }
+  .headerbody h1 {
+    width: 80%;
+    font-size: 40px;
+  }
+  .headerbtn {
+    padding: 20px 40px 20px 40px;
+    font-size: 20px;
+  }
+  .navleft {
+    gap: 0px;
+    margin-right: 10px;
+  }
+  .navleft img {
+    margin-right: 10px;
+  }
+  .activities h1 {
+    font-size: 60px;
+  }
+}
diff --git a/css/style.css b/css/style.css
@@ -88,6 +88,73 @@ input#search {
   margin: 20px auto 20px auto;
   width: 80%;
 }
+#menu-container {
+  position: relative;
+}
+
+#menu-button {
+  cursor: pointer;
+  padding: 15px;
+
+  color: #fff;
+  text-align: center;
+}
+
+#dropdown-menu {
+  display: none;
+  position: absolute;
+  top: 60px;
+  right: 0;
+  width: 25%;
+  background-color: #000;
+  color: #fff;
+  font-family: abhayalibre;
+  z-index: 1;
+  overflow: hidden;
+  animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    height: 0;
+  }
+  to {
+    height: 200px;
+  }
+}
+@keyframes slideOut {
+  from {
+    height: 200px;
+  }
+  to {
+    height: 0;
+  }
+}
+
+.menu-item {
+  padding: 12px;
+  text-decoration: none;
+  color: #333;
+  display: block;
+  transition: background-color 0.3s;
+}
+
+.menu-item:hover {
+  background-color: #f1f1f1;
+}
+#close-button {
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+  color: #fff;
+  padding: 10px;
+  text-align: center;
+  cursor: pointer;
+  padding: 20px;
+}
+#close-button img {
+  height: 25px;
+}
 .headerbody {
   display: flex;
   flex-direction: column;

diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/images/activities/top.png b/images/activities/top.png
diff --git a/images/assests/close.png b/images/assests/close.png
diff --git a/images/assests/education.png b/images/assests/education.png
diff --git a/images/assests/gripblack.png b/images/assests/gripblack.png
diff --git a/images/assests/health.png b/images/assests/health.png
diff --git a/images/assests/livelihoods.png b/images/assests/livelihoods.png
diff --git a/images/assests/research.png b/images/assests/research.png
diff --git a/images/assests/searchdark.png b/images/assests/searchdark.png
diff --git a/index.html b/index.html
@@ -20,8 +20,24 @@
 
           <a href="contact.html" class="navitems">Contact Us</a>
           <a href="volunteer.html" class="navitems">Volunteer</a>
-          <img src="images/assests/grip.png" alt="menu" />
+          <img
+            src="images/assests/grip.png"
+            alt="menu"
+            id="menu-button"
+            onclick="toggleMenu()"
+          />
+        </div>
+      </div>
+      <div id="dropdown-menu">
+        <div id="close-button" onclick="toggleMenu()">
+          <img src="images/assests/close.png" alt="close" />
+        </div>
+        <div class="dropdownbody">
+          <a href="activites.html" class="menu-item"><h5>Activities</h5></a>
         </div>
+        <a href="#" class="menu-item">Item 1</a>
+        <a href="#" class="menu-item">Item 2</a>
+        <a href="#" class="menu-item">Item 3</a>
       </div>
       <hr class="splitter" />
       <div class="headerbody">

diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,14 @@
+function toggleMenu() {
+  var dropdownMenu = document.getElementById("dropdown-menu");
+
+  if (dropdownMenu.style.display === "block") {
+    dropdownMenu.style.animation = "slideOut 0.3s ease-in-out";
+    setTimeout(function () {
+      dropdownMenu.style.display = "none";
+      dropdownMenu.style.animation = "";
+    }, 300);
+  } else {
+    dropdownMenu.style.display = "block";
+    dropdownMenu.style.animation = "slideIn 0.3s ease-out";
+  }
+}