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 1 commit
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
247 changes: 247 additions & 0 deletions contributors/contributor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,247 @@
body {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
color: #fff;
background: #637090;
overflow-x: hidden;
}

/* Navbar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background-image: linear-gradient(to right,#f3c3f9, #2a2a48,#c3d2f9);
position: sticky;
top: 0;
z-index: 1000;
height:90px;
width: 100%;
box-sizing: border-box;
border-bottom:#ffcc00 5px solid;
}

.navbar-logo {
font-size: 25px;
font-weight: 600;
color: #FFD369;
}

.navbar-links {

display: flex;
gap: 30px;
list-style: none;
margin-right:20px;
}

.navbar-link {
text-decoration: none;
color: #fff;
font-size: 20px;
font-weight: 300;
transition: color 0.3s ease;

}
.navbar-link:hover{
text-decoration: underline;
transition: color 0.3s ease;
}

.navbar-link:hover {
color: #FFD369;
}

h1 {
align-items: 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;
}

.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;
}

.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) {

.navbar-logo {
font-size: 24px;
}

.navbar-links {

display: none;
flex-direction: column;
background-color: #1B1B2F;
position: absolute;
top: 65%;
right: 0;
width: 100%;
padding: 20px 0;
gap: 10px;
margin: 30px -5px;
width: 100%;

}

.navbar-link{
padding: 5px 5px;
}

.navbar-links.show {
display: flex;

}

.hamburger {
display: flex;
}
.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);
}
}


/* Footer */
.footer {
border-top:#ffcc00 5px solid;
margin-top: 20px;
text-align: center;
padding: 20px;
background-color: #01070b;
color: #F3F4F6;
}
79 changes: 79 additions & 0 deletions contributors/contributor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<!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="../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"
/>
<link rel="stylesheet" href="contributor.css">
</head>

<body>

<!-- 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" class="navbar-link">Home</a></li>
<li><a href="../index.html#wisdom" class="navbar-link">About</a></li>
<li><a href="contributor.html" class="navbar-link">Contributor</a></li>

<li class="dropdown">
<a href="#">Content</a>
<ul class="dropdown-content">
<li><a href="../countingpage.html" class="navbar-link">Counting</a></li>
<li><a href="#" class="navbar-link">Days</a></li>
<li><a href="#" class="navbar-link">Activities</a></li>
<li><a href="../feedback.html" class="navbar-link">Feedback</a></li>

</ul>
</li>
<li><a href="../login.html" class="navbar-link">Login</a></li>

<a href="#" class="btn-contact" class="navbar-link">Contact</a>
</ul>

</nav>

<div class="container">
<h1>Meet Our Contributors</h1>
<h2>Admin/Mentor</h2>
<div id="admin-mentor" class="contributors-grid"></div>
<h2>Top 3 Contributors</h2>
<div id="top-contributors" class="contributors-grid"></div>
<h2>remaining-contributors </h2>
<div id="remaining-contributors" class="contributors-grid"></div>


</div>

<!-- Footer -->
<footer class="footer">
<p>&copy; 2025 Matrubodhah. All rights reserved.</p>
</footer>

<script src="contributor.js"></script>
</body>
</html>
Loading
Loading