diff --git a/index.html b/index.html index 3b2fab555..dddfa7353 100644 --- a/index.html +++ b/index.html @@ -1803,6 +1803,7 @@

Have a Feedback?    Click
  • Contact Us
    • + Our Contributors

    Have a Feedback?    Click here to share your thoughts with us ;)

    diff --git a/project_showcase/contributor.css b/project_showcase/contributor.css new file mode 100644 index 000000000..ce20e1e87 --- /dev/null +++ b/project_showcase/contributor.css @@ -0,0 +1,566 @@ +{ + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + margin: 0; + padding: 0; + box-sizing: border-box; + } + .container { + text-align: center; + } + + .title { + display: inline-block; + font-size: 3em; + margin-bottom: 20px; + padding: 10px; + color: #fffdff; + text-shadow: 1px 1px 2px rgb(11, 11, 11), 0 0 1em rgba(27, 3, 239, 0.617), + 0 0 0.2em rgba(114, 125, 231, 0.623); + /* border-radius: 20px; */ + /* background-color: rgba(209, 209, 255, 0.8); */ + } + + .theme-switch::before { + content: ""; + position: absolute; + top: 3px; + left: 3px; + width: 24px; + height: 24px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + transition: left 0.3s ease-in-out, background-image 0.3s ease-in-out; + background-image: url("../Assets/moon.png"); + } + + .theme-switch.dark-theme::before { + left: 33px; + background-image: url("../Assets/sun.png"); + } + + .contributors-grid { + + width: 100vw; + flex-wrap: wrap; + gap: 40px; + padding: 20px; + display: grid; + grid-template-columns: repeat(7, minmax(100px,5fr)); + } + + .contributor-card { + /* width: auto; + height: auto; */ + min-width: 200px; + min-height: 300px; + display: flex; + justify-content: center; + position: relative; + overflow: hidden; + max-width: calc(55% - 16px); + display: flex; + flex-direction: column; + align-items: center; + background-color: #FDE1D9; + border: 1px solid #ca74cf; + border-radius: 8px; + box-shadow: 0 0px 8px rgba(0, 0, 0, 1); + padding: 16px; + transition: transform 0.5s ease-in-out, box-shadow 0.3s ease; + text-decoration: none; + color: inherit; + /* margin-bottom: 16px; */ + word-wrap: wrap; + transition: transform 0.5s ease-in-out, box-shadow 0.3s ease; + + } + + #contributors { + perspective: 1000px; /* This adds depth for 3D transformations */ + } + + /* .contributor-card:hover { + transform: scale(1.02); + box-shadow: 1px 1px 23px rgba(14, 6, 14, 0.915); + border: none; + cursor: pointer; + transform: translateZ(50px); /* Moves the card forward in 3D space */ + + } + */ + .contributor-card::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(132deg, #76ABAE 50%, rgb(206, 206, 206) 51%); + /* background: linear-gradient(130deg, #3b89ff 50%, #eef6ff 50%); */ + transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; + transform: translate(-100%, -100%); + opacity: 0; + z-index: -1; + } + + .contributor-card:hover::before { + transform: translate(0, 0); + opacity: 1; + } + + .contributor-card img { + border-radius: 50%; + width: 100px; + height: 100px; + object-fit: cover; + margin-bottom: 10px; + transition: box-shadow 0.3s ease-in-out, border 0.1s ease-in-out; + } + + .contributor-card:hover img { + border: 2px solid rgb(255, 234, 0); + box-shadow: -1px 2px 27px rgb(0, 217, 255); + } + + /* + .contributor-card h2 { + margin: 0 0 10px; + } */ + /* + .contributor-card p { + } */ + + .contributor-card h2 { + color: #040404; + position: relative; + z-index: 1; + transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out; + } + + .contributor-card p { + font-size: 1.2em; + color: #040404; + position: relative; + z-index: 1; + transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out; + margin: 0 0 10px; + } + + .contributor-card:hover h2 { + text-shadow: 1px 1px 2px rgb(0, 108, 108), 0 0 0.2em rgb(0, 14, 108), + 0 0 0.8em rgb(0, 14, 108); + color: white; + } + + .contributor-card:hover p { + text-shadow: 1px 1px 2px rgba(4, 0, 127, 0.715), 0 0 0.2em rgb(5, 18, 168), + 0 0 0.3em rgb(134, 136, 250); + color: white; + + /* font-weight: 400; */ + } + + body { + background-color: #f8f9fa; + color: #212529; + } + + header { + height: 100px; + } + + .logo { + margin: 30px 0 0 0; + } + + footer { + background-color: #333; + color: white; + text-align: center; + padding: 20px 0; + margin-top: auto; + } + + .footer-container { + max-width: 800px; + margin: auto; + padding: 0 20px; + } + + /* .footer-links, + .footer-socials, + .footer-contact { + margin: 10px 0; + } + + .footer-links a, + .footer-socials a { + color: white; + text-decoration: none; + margin: 0 10px; + transition: color 0.3s; + } + + .footer-links a:hover, + .footer-socials a:hover { + color: #007bff; + } */ + + /* .footer-socials a { + font-size: 24px; + margin: 0 15px; + } */ + + .footer-contact a { + color: white; + } + + header { + height: 100px; + } + body { + min-height: 100vh; + max-width: 100vw; + } + .logo { + margin: 5px 0px 0px 0px; + } + + footer { + background: #333; + color: white; + text-align: center; + padding: 20px 0; + margin-top: auto; + } + + .footer-container { + max-width: 800px; + margin: auto; + padding: 0 20px; + } + + /* .footer-links, + .footer-socials { + margin: 10px 0; + } + + .footer-links a, + .footer-socials a { + color: white; + text-decoration: none; + margin: 0 10px; + transition: color 0.3s; + } + + .footer-links a:hover, + .footer-socials a:hover { + color: #007bff; + } + + .footer-contact { + margin: 10px 0; + } */ + + @media (max-width: 900px) { + header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 0.5rem; + /* Adjust padding to reduce overall height */ + } + + header nav { + flex-direction: column; + align-items: flex-start; + max-width: 100vw; + } + + header nav .hamburger { + display: block; + font-size: 28px; + cursor: pointer; + color: #fff; + padding: 1rem; /* Adjust padding for hamburger icon */ + position: absolute; + top: 0; + right: 1rem; /* Adjust right position as needed */ + } + + header nav ul { + flex-direction: column; + align-items: flex-start; + display: none; /* Hide the navbar items */ + max-height: 100vw; /* Full width for mobile view */ + position: absolute; + top: 100%; + right: 0; + background-color: #333; /* Background color for the floating menu */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a box shadow */ + padding: 1rem; /* Add padding */ + border-radius: 0 0 8px 8px; /* Rounded corners at the bottom */ + } + + header nav ul.show { + display: flex; /* Show the navbar items when the hamburger is clicked */ + align-items: flex-start; + } + + header nav ul li { + margin: 0.5rem 1rem; /* Adjust margin for vertical spacing */ + } + header nav ul li a:hover { + color: #00c6ff; + + border-bottom: 2px solid #00c6ff; + + /* color: #000; */ + /* border-radius: .75rem; Rounded corners for active link */ + } + } + + /* Styles for larger screens */ + @media (min-width: 901px) { + header { + height: auto; + } + header nav .hamburger { + display: none; + } + + header nav ul { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + } + + /* header nav ul li { + margin: 0 0.5rem; /* Reduce margin between items */ + } + */ header nav ul li a:hover { + background-color: #00c6ff; + color: #000; + border-radius: 0.75rem; /* Rounded corners for active link */ + } + + footer { + background-color: #1a1a1a; + color: white; + padding: 40px 0; + text-align: center; + } + + footer p { + margin: 10px 0; + } + + footer p a { + color: #00c6ff; + text-decoration: none; + } + + footer p a:hover { + text-decoration: underline; + } + + /* Footer Styles */ + footer { + background-color: #1a1a1a; + color: white; + padding: 40px 0; + text-align: center; + } + + footer p { + margin: 10px 0; + } + + footer p a { + color: #00c6ff; + text-decoration: none; + } + + footer p a:hover { + text-decoration: underline; + } + + footer { + background: #333; + color: white; + text-align: center; + padding: 20px 0; + margin-top: auto; + } + + .footer-container { + max-width: 800px; + margin: auto; + padding: 0 20px; + } + + /* .footer-links, + .footer-socials { + margin: 10px 0; + } + + .footer-links a, + .footer-socials a { + color: white; + text-decoration: none; + margin: 0 10px; + transition: color 0.3s; + } + + .footer-links a:hover, + .footer-socials a:hover { + color: #007bff; + } */ + + .footer-contact { + margin: 10px 0; + } + + + + + + html { + scroll-behavior: smooth; + max-width: 100vw; + max-height: 100vh; + } + + body { + background-color: #FBC1B7; + overflow-x: hidden; + margin: 0; + + + } + + header { + background-color: #1a1a1a; + padding: 0px 20px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); + position: sticky; + top: 0; + z-index: 1000; + border-bottom: 3px solid #00c6ff; + display: flex; + justify-content: space-between; + align-items: center; + } + + header nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 1rem; + } + + header nav ul { + list-style: none; + display: flex; + gap: 30px; + } + + header nav ul li a { + color: #fff; + text-decoration: none; + font-weight: 600; + font-size: 18px; + transition: color 0.3s, border-bottom 0.3s; + background-color: rgb(72, 71, 71); + padding: 15px; + } + + header nav ul li a:hover { + background-color: #00c6ff; + color: #000; + border-radius: 0.75rem; + } + + @media (max-width: 900px) { + header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 1rem; + } + + header nav { + flex-direction: column; + align-items: flex-start; + width: 100%; + } + + header nav .hamburger { + display: block; + font-size: 28px; + cursor: pointer; + color: #fff; + padding: 1rem; + position: absolute; + top: 0; + right: 1rem; + } + + header nav ul { + flex-direction: column; + display: none; + width: 100%; + height: 100vh; + background-color: #333; + padding: 1rem; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + border-radius: 0 0 8px 8px; + } + + header nav ul.show { + display: flex; + } + } + + @media (min-width: 901px) { + header nav .hamburger { + display: none; + } + + header nav ul { + display: flex; + flex-direction: row; + align-items: center; + } + } + + header .logo h1 { + color: #fff; + font-weight: 700; + font-size: 28px; + margin: 0; + } + + +.homeBtn{ + text-decoration: none; + color: #000; + top: 20px; + left: 20px; + position: absolute; + background-color: #0e99ea; + width: 60px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 40px; + border: #000 2px solid; + } +.homeBtn:hover{ + background-color: #00c6ff; + color: #000; + border: #00c6ff 2px solid; +} \ No newline at end of file diff --git a/project_showcase/contributor.html b/project_showcase/contributor.html new file mode 100644 index 000000000..bf0a3f426 --- /dev/null +++ b/project_showcase/contributor.html @@ -0,0 +1,40 @@ + + + + + + + + + + + master-web-development + + + + + + + + + + + + + + + + +
    +

    Our Contributors

    +
    +
    + + + + + \ No newline at end of file diff --git a/project_showcase/contributor.js b/project_showcase/contributor.js new file mode 100644 index 000000000..a34cc04f5 --- /dev/null +++ b/project_showcase/contributor.js @@ -0,0 +1,52 @@ +document.addEventListener("DOMContentLoaded", () => { + const contributorsContainer = document.getElementById("contributors"); + + async function fetchContributors() { + let contributors = []; + let page = 1; + let perPage = 100; // Max per page is 100 + let moreContributors = true; + + while (moreContributors) { + try { + const response = await fetch( + `https://api.github.com/repos/iamrahulmahato/master-web-development/contributors?page=${page}&per_page=${perPage}` + ); + const data = await response.json(); + + // If no more contributors, stop fetching + if (data.length === 0) { + moreContributors = false; + } else { + contributors = contributors.concat(data); + page++; + } + } catch (error) { + console.error("Error fetching contributors:", error); + break; // Exit loop if there's an error + } + } + + displayContributors(contributors); + } + + function displayContributors(contributors) { + contributorsContainer.innerHTML = ""; + contributors.forEach((contributor) => { + const contributorCard = document.createElement("div"); + contributorCard.className = "contributor-card"; + + contributorCard.innerHTML = ` + + ${contributor.login} + +

    ${contributor.login}

    +

    Contributions: ${contributor.contributions}

    + `; + + contributorsContainer.appendChild(contributorCard); + }); + } + + fetchContributors(); + });