Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ADD CONTRIBUTOR PAGE AND CONNECT TO OTHER PAGES #130

Merged
merged 4 commits into from
Jan 13, 2025
+1,096 −666
Merged

ADD CONTRIBUTOR PAGE AND CONNECT TO OTHER PAGES #130

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
19c611b
ADD CONTRIBUTOR PAGE AND CONNECT TO OTHER PAGES
VAIBHAVBABELE Jan 13, 2025
8c7e8a5
ADD CONTRIBUTOR PAGE AND CONNECT TO OTHER PAGES
VAIBHAVBABELE Jan 13, 2025
b28e951
Merge branch 'main' into issue-contributors
VAIBHAVBABELE Jan 13, 2025
e4e721f
Update index.html
Anjaliavv51 Jan 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
171 changes: 171 additions & 0 deletions contributors/contributor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
}



162 changes: 162 additions & 0 deletions contributors/contributor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Loading
Loading