Merge pull request #18 from TartejBrothers/Changes

Completed Mentees Page
TartejBrothers · Dec 9, 2023 · c56d1ab · c56d1ab
2 parents ad921b5 + 591b47b
commit c56d1ab
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 11 deletions.
diff --git a/activites.html b/activites.html
@@ -62,7 +62,9 @@
           </ul>
         </div>
         <div class="dropdownbody">
-          <a href="#" class="menu-item"><h5>Mentorship Program</h5></a>
+          <a href="mentees.html" class="menu-item"
+            ><h5>Mentorship Program</h5></a
+          >
         </div>
       </div>
       <hr class="splitter" />

diff --git a/css/mentees.css b/css/mentees.css
@@ -34,6 +34,18 @@
   background-size: 100%;
   color: #ffffff;
 }
+.mentorsformbody {
+  display: none;
+  padding: 40px;
+  background-image: url("/images/mentees/mentors.png");
+  background-repeat: no-repeat;
+
+  flex-direction: column;
+  align-items: center;
+  gap: 40px;
+  background-size: 100%;
+  color: #ffffff;
+}
 .menteesmain {
   display: flex;
   flex-direction: row;
@@ -42,12 +54,14 @@
   width: 100%;
   gap: 40px;
 }
-.menteesformbody h1 {
+.menteesformbody h1,
+.mentorsformbody h1 {
   font-size: 80px;
   text-align: center;
   margin-bottom: 40px;
 }
-.menteesformbody p {
+.menteesformbody p,
+.mentorsformbody p {
   font-size: 20px;
   text-align: center;
   margin: 0px auto 40px auto;
@@ -71,13 +85,14 @@
   align-items: center;
   width: 150px;
   height: 50px;
-  background-color: #f2f2f2;
+
   font-size: 20px;
   font-family: mediamoure;
   color: #000000;
 }
 .menteesbutton {
   border-radius: 0px 30px 0px 0px;
+  border: 3px solid #1b204a;
   border-bottom: none;
   background: #1b204a;
   color: #ffffff;
@@ -86,12 +101,14 @@
   border-radius: 30px 30px 0px 0px;
   border: 3px solid #1b204a;
   border-bottom: none;
+  background-color: #f2f2f2;
 }
 input {
-  color: #fff;
+  color: rgba(255, 255, 255, 0.8);
 }
 input::placeholder {
-  color: #fff;
+  color: rgba(255, 255, 255, 0.8);
+
   font-family: mediamoure;
 }
 .submitbtn {
@@ -115,6 +132,9 @@ input::placeholder {
   display: flex;
   justify-content: end;
 }
+.mentorsformbody .submitbtn {
+  background: #b92024;
+}
 
 @media screen and (max-width: 1000px) {
   .menteesbody h1 {
@@ -124,4 +144,17 @@ input::placeholder {
     width: 80%;
     font-size: 18px;
   }
+  .menteesmain {
+    flex-direction: column;
+  }
+  .menteesformbodyleft {
+    width: 80%;
+  }
+  .menteesformbodyright {
+    margin-top: 10px;
+  }
+  .menteesformbody,
+  .mentorsformbody {
+    background-size: 100% 100%;
+  }
 }
diff --git a/index.html b/index.html
@@ -64,7 +64,9 @@
           </ul>
         </div>
         <div class="dropdownbody">
-          <a href="#" class="menu-item"><h5>Mentorship Program</h5></a>
+          <a href="mentees.html" class="menu-item"
+            ><h5>Mentorship Program</h5></a
+          >
         </div>
       </div>
       <hr class="splitter" />

diff --git a/js/script.js b/js/script.js
@@ -12,3 +12,27 @@ function toggleMenu() {
     dropdownMenu.style.animation = "slideIn 0.6s ease-out";
   }
 }
+function changemenumentees() {
+  var mentees = document.getElementById("mentees");
+  var mentors = document.getElementById("mentors");
+  var menteesbutton = document.getElementById("buttonmentees");
+  var mentorsbutton = document.getElementById("buttonmentors");
+  mentors.style.display = "none";
+  menteesbutton.style.backgroundColor = "#1B204A";
+  menteesbutton.style.color = "#fff";
+  mentorsbutton.style.backgroundColor = "#fff";
+  mentorsbutton.style.color = "#1B204A";
+  mentees.style.display = "flex";
+}
+function changemenumentors() {
+  var mentees = document.getElementById("mentees");
+  var mentors = document.getElementById("mentors");
+  var menteesbutton = document.getElementById("buttonmentees");
+  var mentorsbutton = document.getElementById("buttonmentors");
+  mentees.style.display = "none";
+  mentors.style.display = "flex";
+  mentorsbutton.style.backgroundColor = "#1B204A";
+  mentorsbutton.style.color = "#fff";
+  menteesbutton.style.backgroundColor = "#fff";
+  menteesbutton.style.color = "#1B204A";
+}
diff --git a/mentees.html b/mentees.html
@@ -62,7 +62,7 @@
           </ul>
         </div>
         <div class="dropdownbody">
-          <a href="#" class="menu-item"><h5>Mentorship Program</h5></a>
+          <a href="mentees.html" class="menu-item"><h5>Mentorship Program</h5></a>
         </div>
       </div>
       <hr class="splitter" />
@@ -77,10 +77,22 @@ <h1>Join Our Mentorship Community</h1>
     </div>
     <div class="menteesform">
       <div class="switchbuttons">
-        <div class="menteesbutton"><p>Mentees</p></div>
-        <div class="mentorsbutton"><p>Mentors</p></div>
+        <div
+          class="menteesbutton"
+          onclick="changemenumentees()"
+          id="buttonmentees"
+        >
+          <p>Mentees</p>
+        </div>
+        <div
+          class="mentorsbutton"
+          onclick="changemenumentors()"
+          id="buttonmentors"
+        >
+          <p>Mentors</p>
+        </div>
       </div>
-      <div class="menteesformbody">
+      <div class="menteesformbody" id="mentees">
         <div class="menteesmain">
           <div class="menteesformbodyleft">
             <h1>Mentees</h1>
@@ -123,6 +135,49 @@ <h1>Mentees</h1>
           <img src="images/assests/logo.png" alt="logo" />
         </div>
       </div>
+      <div class="mentorsformbody" id="mentors">
+        <div class="menteesmain">
+          <div class="menteesformbodyleft">
+            <h1>Mentors</h1>
+            <p>
+              Are you an expert in your field? A seasoned professional? Your
+              knowledge is invaluable, and your guidance can shape the future.
+              Become a mentor at AD life and inspire the next generation.
+            </p>
+            <p>
+              Share your experiences, offer insights, and be a catalyst for
+              success. Together, we can create a community that thrives on
+              mentorship.
+            </p>
+          </div>
+          <div class="menteesformbodyright">
+            <form>
+              <input type="text" placeholder="First Name" class="inputhalf" />
+              <input type="text" placeholder="Last Name" class="inputhalf" />
+              <input
+                type="text"
+                placeholder="Mobile Number"
+                class="inputhalf"
+              />
+              <input type="number" placeholder="Age" class="inputhalf" />
+              <input type="text" placeholder="Address" class="inputfull" />
+              <input
+                type="text"
+                placeholder="Area Of Interest"
+                class="inputfull"
+              />
+              <input type="text" placeholder="E-Mail" class="inputfull" />
+
+              <input type="text" placeholder="Citizen" class="inputhalf" />
+              <br />
+              <button class="submitbtn">Submit</button>
+            </form>
+          </div>
+        </div>
+        <div class="menteesformlogo">
+          <img src="images/assests/logo.png" alt="logo" />
+        </div>
+      </div>
     </div>
     <div class="footer">
       <div class="footerleft">