diff --git a/Resources.css b/Resources.css index b2dbd04..56bf7a4 100644 --- a/Resources.css +++ b/Resources.css @@ -1,91 +1,117 @@ - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - +/* General Styles */ body { - font-family: "Josefin Sans", sans-serif; - background-color: #f0f0f0; -} - -.nav { - background-color: #ffebcc; + margin: 0; + font-family: 'Arial', sans-serif; + background-color: #f0f4f8; + color: #333; + } + + .header { display: flex; - justify-content: center; + justify-content: space-between; align-items: center; - height: 10vh; -} - -.text { - color: #333; + padding: 20px; + background-color:#0044cc; + color: white; + } + + .nav-links a { + margin-left: 15px; + text-decoration: none; + color: white; font-weight: bold; - font-size: 2rem; - text-align: center; -} + transition: color 0.3s; + } + + .nav-links a:hover { + color: #ffcc00; + } -.main { - padding: 20px; - display: flex; - justify-content: space-around; - flex-wrap: wrap; + #free-tag{ + font-size: 50px; + font-weight: 600; + } + + .mini-intro { + text-align: center; + padding: 50px 20px; + background-color: #003366; + color: white; + } + + .resource-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; -} - -.resource-box { + padding: 40px; + } + + .resource-card { background-color: white; border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 20px; - width: 300px; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); text-align: center; - transition: transform 0.3s ease, box-shadow 0.3s ease; -} - -.resource-box h2 { - font-size: 1.5rem; - color: #333; - margin-bottom: 10px; -} - -.resource-box p { - color: #666; - font-size: 1rem; - margin-top:9px; -} + transition: transform 0.3s, box-shadow 0.3s; + line-height: 2; + } + .resource-card h3{ + font-size: 20px; + font-weight: 500; + } + + .resource-card:hover { + transform: translateY(-10px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); + } + + .resource-icon { + width: 80px; + height: 80px; + margin-bottom: 15px; + } -.resource-box a { + .resource-card.dark-mode-card { + background-color: #1e1e1e; /* Dark background */ + color: #fff; /* White text */ + } + + .visit-button { display: inline-block; - margin-top: 10px; - padding: 8px 12px; - background-color: #007bff; + background-color: #28a745; color: white; - text-decoration: none; + padding: 10px 20px; border-radius: 5px; - font-size: 1rem; - transition: background-color 0.3s ease; -} - -.resource-box a:hover { - background-color: #0056b3; -} - -.resource-box:hover { - transform: translateY(-10px); - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); -} - -/* Responsive styling */ -@media (max-width: 768px) { - .main { - flex-direction: column; - align-items: center; - } - - .resource-box { - width: 100%; - max-width: 400px; - } -} + text-decoration: none; + transition: background-color 0.3s; + } + + .visit-button:hover { + background-color: #218838; + } + + .footerrr{ + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px; + background-color: #003366; + color: white; + } + + .social-icons-box{ + display: flex; + justify-content: space-between; + } + .social-icons-box img { + width: 30px; + margin-left: 10px; + cursor: pointer; + transition: transform 0.3s; + } + + .social-icons img:hover { + transform: scale(1.2); + } + \ No newline at end of file diff --git a/Resources.html b/Resources.html index 1d6b769..be01273 100644 --- a/Resources.html +++ b/Resources.html @@ -86,126 +86,115 @@ + +
+

Free Learning Resources

+

Your go-to place for curated resources to boost your knowledge and skills.

+
+ +
+ +
+ Git & GitHub +

Git & GitHub

+

Instructor: Kunal Kushwah

+

Language: English

+ Visit Here +
+ + +
+ Android Development +

Android App Development

+

Instructor: Hitesh Choudhary

+

Language: English

+ Visit Here +
+ +
+ Golang +

Golang

+

Instructor: Neat Roots

+

Language: Hindi

+ Visit Here +
+ +
+ Python +

Python Tutorial for Beginners

+

Instructor: CodeWithHarry

+

Language: Hindi

+ Visit Here +
+ +
+ JavaScript +

JavaScript Tutorial for Beginners

+

Instructor: Shradha Khapra

+

Language: Hindi

+ Visit Here +
+ +
+ Machine Learning +

Machine Learning

+

Instructor: FreeCodeCamp

+

Language: English

+ Visit Here +
+ +
+ Blockchain +

Blockchain Development

+

Instructor: Dapp University

+

Language: English

+ Visit Here +
+ +
+ Web 3.0 +

Web 3.0 Fundamentals

+

Instructor: Whiteboard Crypto

+

Language: English

+ Visit Here +
+ +
+ Data Science +

Data Science with Python

+

Instructor: Krish Naik

+

Language: English

+ Visit Here +
+ +
+ DSA +

DSA Course

+

Instructor: Apna College

+

Language: Hindi

+ Visit Here +
+
+ DSA +

Harvard CS50-Full Computer Science Course

+

Instructor: FreeCodeCamp.org

+

Language: English

+ Visit Here +
+
+ DSA +

DevOps Bootcamp

+

Instructor: Kunal Kushwah

+

Language: English

+ Visit Here +
-
-
-

Free Learning Resources

-
-
- -
-
-

DSA with Java

-

Instructor: Kunal Kushwah

- Visit Here -

Language: English

-
- -
-

DSA With C++

-

Instructor: Rohit Negi (Coder Army)

- Visit Here -

Language: Hindi

-
- -
-

Full Stack Web Development

-

Instructor: CodeWithHarry

- Visit Here -

Language: Hindi

-
- -
-

Full Stack Web Development

-

Instructor: FreeCodeCamp.org

- Visit Here -

Language: English

-
- -
-

DevOps Bootcamp

-

Instructor: Kunal Kushwah

- Visit Here -

Language: English

-
- -
-

DevOps Bootcamp

-

Instructor: TrainWithShubham

- Visit Here -

Language: Hindi

-
- -
-

Open Source Guide

-

Instructor: Piyush Garg

- Visit Here -

Language:Hindi

-
- -
-

Git & GitHub

-

Instructor: Kunal Kushwah

- Visit Here -

Language: English

-
- -
-

Android App Development Course

-

Instructor:Neat Roots

- Visit Here -

Language: Hindi

-
- -
-

Golang

-

Instructor:Hitesh Choudhary

- Visit Here -

Language: English

-
- -
-

Python Tutorial For Beginners

-

Instructor: CodeWithHarry

- Visit Here -

Language:Hindi

-
- -
-

Javascript Tutorial For Beginners

-

Instructor:Shradha Khapra

- Visit Here -

Language:Hindi

-
- - -
-

Machine Learning

-

Instructor: FreeCodeCamp.org

- Visit Here -

Language:English

-
- -
-

Harvard CS50-Full Computer Science Course

-

Instructor: FreeCodeCamp.org

- Visit Here -

Language:English

-
- -
-

C++ Programming Course - Beginner to Advanced

-

Instructor:FreeCodeCamp.org

- Visit Here -

Language:English

-
- - - - -
+ +
+ + + + + + diff --git a/darkmode.js b/darkmode.js index 6a12213..66688ee 100644 --- a/darkmode.js +++ b/darkmode.js @@ -5,50 +5,76 @@ const body = document.body; const footer = document.querySelector("footer"); const footerSpan = footer.querySelector(".website-name"); const footerParagraph = footer.querySelector(".footer-about-text"); +// Select all resource cards +const resourceCards = document.querySelectorAll(".resource-card"); // Enable Dark Mode const enableDarkMode = () => { - body.classList.add("dark-mode"); - body.classList.remove("light-mode"); - footer.classList.add("dark-mode-footer"); - footer.classList.remove("light-mode-footer"); - footerSpan.classList.add("dark-text"); - footerSpan.classList.remove("light-text"); - footerParagraph.classList.add("dark-text"); - footerParagraph.classList.remove("light-text"); - localStorage.setItem("darkmode", "active"); - themeToggleBtn.querySelector(".theme-icon-light").style.opacity = '0'; - themeToggleBtn.querySelector(".theme-icon-dark").style.opacity = '1'; + body.classList.add("dark-mode"); + body.classList.remove("light-mode"); + + footer.classList.add("dark-mode-footer"); + footer.classList.remove("light-mode-footer"); + + footerSpan.classList.add("dark-text"); + footerSpan.classList.remove("light-text"); + + footerParagraph.classList.add("dark-text"); + footerParagraph.classList.remove("light-text"); + + // Add dark mode styles to each resource card + resourceCards.forEach((card) => { + card.classList.add("dark-mode-card"); + }); + + // Set the theme icons + themeToggleBtn.querySelector(".theme-icon-light").style.opacity = "0"; + themeToggleBtn.querySelector(".theme-icon-dark").style.opacity = "1"; + + localStorage.setItem("darkmode", "active"); + themeIcon.src = "images/light-mode.png"; }; -// Disable Dark Mode (Switch to Light Mode) +// Disable Dark Mode const disableDarkMode = () => { - body.classList.remove("dark-mode"); - body.classList.add("light-mode"); - footer.classList.remove("dark-mode-footer"); - footer.classList.add("light-mode-footer"); - footerSpan.classList.add("light-text"); - footerSpan.classList.remove("dark-text"); - footerParagraph.classList.add("light-text"); - footerParagraph.classList.remove("dark-text"); - localStorage.setItem("darkmode", "inactive"); - themeToggleBtn.querySelector(".theme-icon-light").style.opacity = '1'; - themeToggleBtn.querySelector(".theme-icon-dark").style.opacity = '0'; + body.classList.remove("dark-mode"); + body.classList.add("light-mode"); + + footer.classList.remove("dark-mode-footer"); + footer.classList.add("light-mode-footer"); + + footerSpan.classList.add("light-text"); + footerSpan.classList.remove("dark-text"); + + footerParagraph.classList.add("light-text"); + footerParagraph.classList.remove("dark-text"); + + // Remove dark mode styles from each resource card + resourceCards.forEach((card) => { + card.classList.remove("dark-mode-card"); + }); + + // Set the theme icons + themeToggleBtn.querySelector(".theme-icon-light").style.opacity = "1"; + themeToggleBtn.querySelector(".theme-icon-dark").style.opacity = "0"; + + localStorage.setItem("darkmode", "inactive"); + themeIcon.src = "images/dark-mode.png"; }; // Apply the saved theme on page load if (darkmode === "active") { - enableDarkMode(); // Start in dark mode if the user prefers it + enableDarkMode(); // Start in dark mode if the user prefers it } else { - disableDarkMode(); // Otherwise, start in light mode + disableDarkMode(); // Otherwise, start in light mode } // Toggle dark mode on button click themeToggleBtn.addEventListener("click", () => { - darkmode = localStorage.getItem("darkmode"); // Get the current state - if (darkmode === "active") { - disableDarkMode(); // Switch to light mode - } else { - enableDarkMode(); // Switch to dark mode - } + darkmode = localStorage.getItem("darkmode"); // Get the current state + if (darkmode === "active") { + disableDarkMode(); // Switch to light mode + } else { + enableDarkMode(); // Switch to dark mode + } });