ADD CONTRIBUTOR PAGE AND CONNECT TO OTHER PAGES (#130)

Anjaliavv51 · Jan 13, 2025 · 9a63fba · 9a63fba
2 parents fa86ca5 + e4e721f
commit 9a63fba
Show file tree

Hide file tree

Showing 9 changed files with 1,096 additions and 666 deletions.
diff --git a/contributors/contributor.css b/contributors/contributor.css
@@ -0,0 +1,171 @@
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Poppins', sans-serif;
+    color: #fff;
+    background: #edeef1;
+    overflow-x: hidden; 
+  }
+
+  /* Navbar */
+
+
+  h1 {
+    text-align: center;
+
+    justify-content: center;
+    font-size: 3rem;
+    color: #fff;
+    margin-bottom: 40px;
+    font-weight: bold;
+    letter-spacing: 2px;
+  }
+
+
+  h2{
+
+    text-align: center;
+    justify-content: center;
+    font-size: 3rem;
+    color: #fff;
+    margin: 40px;
+    font-weight: bold;
+    letter-spacing: 2px;
+
+  }
+
+  /* Contributor Card Grid */
+  .contributors-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: calc(10px + 1vw); 
+    justify-items: center; 
+    align-items: center;
+    width: 100%; 
+  }
+
+  /* Contributor Card Styling */
+  .contributor-card {
+    border:red 8px double;
+    background: #f8e6e6;
+    color: #333;
+    border-radius: 15px;
+    padding: 20px;
+    width: 250px;
+    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    position: relative;
+    margin: 30px;
+  }
+
+  .contributor-card:hover {
+
+    transform: translateY(-10px); 
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+
+  }
+
+  .contributor-card img {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    border: 3px solid #121115; 
+    margin-bottom: 15px;
+  }
+
+  .contributor-card h3 {
+    font-size: 1.4rem;
+    font-weight: bold;
+    margin: 10px 0;
+  }
+
+
+  .container {
+    margin-top: 100px;
+    padding: 20px;
+  }
+  .contributor-card a {
+    display: inline-block;
+    margin: 5px 0;
+    color: #d82de7;
+    font-weight: bold;
+    text-decoration: none;
+    transition: color 0.3s ease;
+    border-radius: 10px;
+    border: #f5cbcb 2px solid;
+    padding: 4px;
+  }
+
+  .contributor-card a:hover {
+    color: #004e64; 
+    text-decoration: none;
+  }
+
+  /* Animated Button */
+  .button {
+    background: #004e64;
+    color: #fff;
+    padding: 12px 24px;
+    font-size: 1rem;
+    border: none;
+    border-radius: 30px;
+    cursor: pointer;
+    margin-top: 30px;
+    transition: transform 0.2s ease, background 0.3s ease;
+    text-transform: uppercase;
+  }
+
+  .button:hover {
+    transform: scale(1.05);
+    background: #004e64; 
+  }
+
+  .button:focus {
+    outline: none;
+  }
+
+  /* Hamburger Menu */
+  .hamburger {
+    display: none;
+    flex-direction: column;
+    cursor: pointer;
+    gap: 5px;
+  }
+
+  .hamburger span {
+    display: block;
+    width: 25px;
+    height: 3px;
+    background-color: #fff;
+    border-radius: 5px;
+  }
+
+  /* Responsive Design for Mobile */
+  @media (max-width: 768px) {
+
+
+    .container {
+      padding: 20px;
+    }
+
+    h1 {
+      font-size: 2rem;
+      margin-bottom: 20px;
+    }
+
+    /* Adjust the grid gap for mobile */
+    .contributors-grid {
+      gap: calc(10px + 2vw); 
+    }
+  }
+
+  /* Responsive Design for Tablet/Desktop */
+  @media (min-width: 768px) {
+    .contributors-grid {
+      gap: calc(10px + 1.5vw); 
+    }
+  }
+
+
+
diff --git a/contributors/contributor.html b/contributors/contributor.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link
+      rel="icon"
+      href="../DALL·E 2024-08-28 12.19.31 - A clean and moderately detailed logo for a Sanskrit education website. T.webp"
+    />
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Contributors Page</title>
+
+  <link rel="stylesheet" href="contributor.css">
+  <link rel="stylesheet" href="../styles.css" />
+    <link rel="stylesheet" href="../animations.css" />
+    <link rel="stylesheet" href="../scontentcss.css" />
+    <link rel="stylesheet" href="../footercss.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
+    />
+     <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+    />
+
+</head>
+
+<body>
+<header>
+  <!-- Navbar -->
+  <nav class="navbar">
+    <a href="#hero" class="logo">मातृबोधः</a>
+    <div class="hamburger">
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+    <ul class="nav-links">
+      <li><a href="../index.html" >Home</a></li>
+      <li><a href="../index.html#wisdom" >About</a></li>
+      <li><a href="contributor.html" >Contributor</a></li>
+
+      <li class="dropdown">
+          <a href="#">Content</a>
+          <ul class="dropdown-content">
+              <li><a href="../countingpage.html" >Counting</a></li>
+              <li><a href="#" >Days</a></li>
+              <li><a href="#" >Activities</a></li>
+              <li><a href="../feedback.html" >Feedback</a></li>
+
+          </ul>
+      </li>
+      <li><a href="../login.html" >Login</a></li>
+
+  <a href="#" class="btn-contact" >Contact</a>
+  </ul>
+
+  </nav>
+</header>
+
+  <div class="container">
+    <h1>Meet Our Contributors</h1>
+    <h2>Admin/Mentor</h2><br>
+    <div id="admin-mentor" class="contributors-grid"></div>
+    <h2>Top 3 Contributors</h2><br>
+    <div id="top-contributors" class="contributors-grid"></div>
+    <h2>remaining-contributors </h2><br>
+    <div id="remaining-contributors" class="contributors-grid"></div>
+
+
+  </div>
+
+  <!-- Footer -->
+  <footer class="main-footer">
+    <div class="footer-content">
+      <div class="footer-section">
+        <h3>मातृबोधः</h3>
+        <p>
+          Educating children through India's timeless wisdom and cultural
+          heritage.
+        </p>
+        <div class="social-links">
+          <a
+            href="https://github.com/Anjaliavv51/Matrubodhah"
+            target="_blank"
+            aria-label="Facebook"
+            ><i class="fab fa-facebook"></i
+          ></a>
+          <a
+            href="https://github.com/Anjaliavv51/Matrubodhah"
+            target="_blank"
+            aria-label="Twitter"
+            ><i class="fab fa-twitter"></i
+          ></a>
+          <a
+            href="https://github.com/Anjaliavv51/Matrubodhah"
+            target="_blank"
+            aria-label="Instagram"
+            ><i class="fab fa-instagram"></i
+          ></a>
+          <a
+            href="https://github.com/Anjaliavv51/Matrubodhah"
+            target="_blank"
+            aria-label="YouTube"
+            ><i class="fab fa-youtube"></i
+          ></a>
+          <a
+            href="https://github.com/Anjaliavv51/Matrubodhah"
+            target="_blank"
+            aria-label="Linkedin"
+            ><i class="fa-brands fa-linkedin-in"></i
+          ></a>
+        </div>
+      </div>
+
+      <div class="footer-section">
+        <h4>Quick Links</h4>
+        <ul>
+          <li><a href="#hero">Home</a></li>
+          <li><a href="#wisdom">About Us</a></li>
+          <li><a href="#content">Our Courses</a></li>
+          <!-- need to add contact page link -->
+          <li><a href="#hero">Contact</a></li>
+        </ul>
+      </div>
+
+      <div class="footer-section">
+        <h4>Learning Paths</h4>
+        <ul>
+          <!-- need to add respective page link -->
+          <li><a href="countingpage.html">Counting</a></li>
+          <li><a href="#hero">Days</a></li>
+          <li><a href="#hero">Activities</a></li>
+        </ul>
+      </div>
+
+      <div class="footer-section">
+        <h4>Contact Us</h4>
+        <ul class="contact-info">
+          <li>
+            <i class="fas fa-envelope"></i
+            ><a href="mailto:[email protected]">[email protected]</a>
+          </li>
+          <li><i class="fas fa-map-marker-alt"></i><span>India</span></li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="footer-bottom">
+      <p>
+        &copy; 2024 मातृबोधः. Made with <span class="heart">❤️</span> by
+        <a href="https://github.com/Anjaliavv51/Matrubodhah" target="_blank"
+          >@Sakthi</a
+        >
+      </p>
+    </div>
+  </footer>
+
+
+  <script src="contributor.js"></script>
+</body>
+</html>