diff --git a/assets/js/script.js b/assets/js/script.js index e79ef23..a7d9599 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -55,47 +55,3 @@ btnLeft.addEventListener('click', (e)=> { btnRight.addEventListener('click', (e)=> { changeTestimonialPosition(350); }); -// Testimonials Script... - - - -// our-Team-member-section... - - - -// let teamMemberSection = document.getElementById('our-Team-member-section'); -// let teamMemberChilds = document.querySelectorAll('#our-Team-member-section div.col'); -// let teamMemberPos = 0, teamMemberIndex = 0; - -// const changeTOurTeamPosition = (val)=> { - -// setTimeout(() => { -// teamMemberPos += val; -// let currPos = (teamMemberPos >= 0)? teamMemberPos: teamMemberPos * -1; - -// teamMemberSection.style.transform = `translateX(${teamMemberPos}px)`; - -// if((teamMemberChilds.length*500) < currPos) { - -// teamMemberPos = 350; -// } - -// changeTOurTeamPosition(-350); -// }, 1000); - -// // console.log(teamMemberChilds[teamMemberIndex]) -// } - -// setTimeout(() => { -// changeTOurTeamPosition(-350); -// }, 1000); - -// // btnLeft.addEventListener('click', (e)=> { -// // changeTestimonialPosition(350); -// // }); - -// // btnRight.addEventListener('click', (e)=> { -// // changeTestimonialPosition(-350); -// // }); - -// // our-Team-member-section... diff --git a/darkmode.css b/darkmode.css new file mode 100644 index 0000000..24d2c19 --- /dev/null +++ b/darkmode.css @@ -0,0 +1,156 @@ +/* 🌞 Light Mode */ +:root { + --bg-color: #ffffff; + --text-color: #000000; + --header-bg: #f9f9f9; + --nav-link-color: #000000; + --section-bg: #ffffff; + --button-bg: #e0e0e0; + --button-text: #000000; +} + +/* 🌙 Dark Mode */ +[data-theme="dark"] { + --bg-color: #121212; + --text-color: #ffffff; + --header-bg: #1e1e1e; + --nav-link-color: #ffffff; + --section-bg: #1a1a1a; + --button-bg: #333333; + --button-text: #ffffff; +} + +/* Apply Theme to Whole Page */ +body { + margin: 0; + font-family: Arial, sans-serif; + background-color: var(--bg-color); + color: var(--text-color); + transition: background-color 0.3s ease, color 0.3s ease; +} + +header, main, section, footer { + background-color: var(--section-bg); + transition: background-color 0.3s ease, color 0.3s ease; +} + +/* Navbar */ +header { + padding: 0.5rem 1rem; + display: flex; + justify-content: center; + align-items: center; + background-color: var(--header-bg); +} + +.nav-links { + display: flex; + gap: 1rem; + list-style: none; + margin: 0; + padding: 0; +} + +.nav-links li a { + text-decoration: none; + color: var(--nav-link-color); + font-weight: bold; + transition: color 0.3s ease; +} + +/* 🌙 Floating Dark Mode Button */ +.theme-btn { + position: fixed; + top: 12px; + right: 12px; + width: 36px; + height: 36px; + border-radius: 50%; + background-color: rgba(0, 0, 0, 0.1); /* Light background for light mode */ + backdrop-filter: blur(4px); + border: none; + font-size: 1.2rem; + cursor: pointer; + z-index: 2000; + color: var(--text-color); + display: flex; + align-items: center; + justify-content: center; + transition: background-color 0.3s ease, transform 0.3s ease; +} + +.theme-btn:hover { + transform: scale(1.15); +} + + +/* Buttons */ +button { + background-color: var(--button-bg); + color: var(--button-text); + border: none; + padding: 0.5rem 1rem; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease, color 0.3s ease; +} + +/* 🌙 Image Dimming in Dark Mode */ +[data-theme="dark"] img { + filter: brightness(0.8); + transition: filter 0.3s ease; +} + +/* Change background for dark mode */ +[data-theme="dark"] .theme-btn { + background-color: rgba(255, 255, 255, 0.1); +} +/* 🌙 Preserve Brand Colors */ +[data-theme="dark"] h1, +[data-theme="dark"] h2 { + color: inherit !important; /* keep original brand colors */ +} + +/* Only make paragraph and normal text white */ +[data-theme="dark"] p, +[data-theme="dark"] li, +[data-theme="dark"] span, +[data-theme="dark"] a { + color: #ffffff !important; +} + +/* Keep Logo Colors Bright */ +[data-theme="dark"] header img, +[data-theme="dark"] .logo img { + filter: brightness(1.3) !important; +} + +/* Fix Buttons */ +[data-theme="dark"] button, +[data-theme="dark"] .btn { + background-color: #333 !important; + color: #fff !important; + border: 1px solid #fff !important; + transition: all 0.3s ease; +} +/* 🌙 Fix Header & Navbar */ +[data-theme="dark"] header, +[data-theme="dark"] nav, +[data-theme="dark"] .navbar, +[data-theme="dark"] .top-header { + background-color: #181818 !important; /* soft dark gray */ + color: #ffffff !important; +} + +[data-theme="dark"] nav a, +[data-theme="dark"] .navbar a, +[data-theme="dark"] .menu a { + color: #ffffff !important; +} + +/* Keep Logo Background Transparent */ +[data-theme="dark"] header img, +[data-theme="dark"] .logo img { + background: transparent !important; + filter: brightness(1.1) !important; +} diff --git a/darkmode.html b/darkmode.html new file mode 100644 index 0000000..e9d6d4e --- /dev/null +++ b/darkmode.html @@ -0,0 +1,40 @@ + + + + + + Dark Mode - GDF + + + +
+
+ + + + + + +
+
+ +
+

Welcome to GDF

+

This page demonstrates Dark Mode integration.

+
+ + + + diff --git a/darkmode.js b/darkmode.js new file mode 100644 index 0000000..3ad58e0 --- /dev/null +++ b/darkmode.js @@ -0,0 +1,17 @@ +const toggleBtn = document.getElementById('theme-toggle'); +const currentTheme = localStorage.getItem('theme'); + +// Load saved theme or default to light +if (currentTheme) { + document.documentElement.setAttribute('data-theme', currentTheme); + toggleBtn.textContent = currentTheme === 'dark' ? '☀️' : '🌙'; +} else { + document.documentElement.setAttribute('data-theme', 'light'); +} + +toggleBtn.addEventListener('click', () => { + const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'; + document.documentElement.setAttribute('data-theme', theme); + localStorage.setItem('theme', theme); + toggleBtn.textContent = theme === 'dark' ? '☀️' : '🌙'; +}); diff --git a/index.html b/index.html index 7fadee2..42c5962 100644 --- a/index.html +++ b/index.html @@ -14,54 +14,66 @@ - + + + + -
-
+

Gurukul Dream Foundation - -

-

- Be a part of Gurukul Community -

-
- Support Us + +

+

+ Be a part of Gurukul Community +

+
+ Support Us Join Us
-
+
-
+
- ... + ...
- ... + ...
- ... + ...
- ... + ...
- ... + ...
-
+
Our Achievements @@ -71,10 +83,12 @@

-
+
-
+
0
@@ -84,10 +98,12 @@

-
+
-
+
0
@@ -97,10 +113,12 @@

-
+
- -
+ +
0
@@ -110,10 +128,12 @@

-
+
-
+
0
@@ -123,41 +143,47 @@

-
+
-
+
0
Jobs provided - +
-
+
-
+
0
Internships provided - +
-
+
-
+
0
- Students Counseled through "Safarnama" + Students Counseled through "Safarnama"
@@ -167,15 +193,19 @@

-
+
- ... + ...

About Gurukul

- Welcome to Gurukul Dream Foundation, where we empower the youth of tier 2/3 cities. Our goal is to provide tailored support and opportunities for young individuals to thrive. Through workshops, internships, and more, we aim to equip them with the skills they need to succeed. Join us as we shape a brighter future for every aspiring young mind. + Welcome to Gurukul Dream Foundation, where we empower the youth of tier 2/3 cities. Our goal + is to provide tailored support and opportunities for young individuals to thrive. Through + workshops, internships, and more, we aim to equip them with the skills they need to succeed. + Join us as we shape a brighter future for every aspiring young mind.

-
Workshops & Fun Events -
+
Workshops & Fun Events +
-
-
+
+
- why gurukul logoes - + why gurukul logoes +
Internships & Job Opportunities
-
-
+
+
- why gurukul logoes - + why gurukul logoes +
Career & Education Counseling
-
-
+
+
- why gurukul logoes + why gurukul logoes
-
Placement & Training Support -
+
Placement & Training Support +
-
-
+
+
- why gurukul logoes - + why gurukul logoes +
Industrial Visits -
+
-
+
- why gurukul logoes - + why gurukul logoes +
-
Mental Health Support -
+
Mental Health Support +
-
-
+
+
- why gurukul logoes + why gurukul logoes
@@ -275,11 +320,13 @@

About Gurukul

-
-
+
+
- why gurukul logoes - + why gurukul logoes +
Adventure Trips
@@ -289,7 +336,7 @@

About Gurukul

-
- +
-
+
- ... + ...

Founder's Message

- Gurukul Dream Foundation is dedicated to connecting youth with job opportunities, internships, and employment through non-profit and faith-based organizations. The mission is to create a respectful environment fostering skill development and community change. Gurukul nurtures talent, providing an environment for exponential growth in professional, personal, and social life. It serves as a platform for young talent, igniting their potential despite failures. Akash Barua's message to the next generation emphasizes education, resilience, and self-motivation, urging them to be role models and overcome challenges. -

+ Gurukul Dream Foundation is dedicated to connecting youth with job opportunities, + internships, and employment through non-profit and faith-based organizations. The mission is + to create a respectful environment fostering skill development and community change. Gurukul + nurtures talent, providing an environment for exponential growth in professional, personal, + and social life. It serves as a platform for young talent, igniting their potential despite + failures. Akash Barua's message to the next generation emphasizes education, resilience, and + self-motivation, urging them to be role models and overcome challenges. +

-
+
- ...
@@ -410,10 +466,10 @@

Active Members

-
+
- ...
@@ -424,10 +480,10 @@

Active Members

-
+
- ...
@@ -452,10 +508,10 @@

Active Members

-->
-
+
- ...
@@ -465,161 +521,176 @@

Active Members

-
- +
+
- +

Testimonials


- - -
- + + +
+
- +
-
+
... + src="./assets/images/testimonials/abhiraj.jpg" class="card-img-top" alt="...">
-
+

-

"Gurukul made a huge difference in my life! The workshops boosted my confidence, and the career guidance helped me find my path. Now, I feel ready for my career journey, all thanks to Gurukul!" -

+

"Gurukul made a huge difference in my life! The + workshops boosted my confidence, and the career guidance helped me find my path. + Now, I feel ready for my career journey, all thanks to Gurukul!" +

Abhiraj Sahu

Student - @ Maharaja Mansingh College

+ @ Maharaja Mansingh College

-
+
... + src="./assets/images/testimonials/aryan.jpg" class="card-img-top" alt="...">
-
+

-

"Gurukul gave me the tools I needed to succeed. Through internships and mentorship, I gained valuable skills and experience. Now, I'm confident and prepared for whatever comes next. Thanks, Gurukul!"

- - Aryan Sahu - -

Student @ -Amity University

+

"Gurukul gave me the tools I needed to + succeed. Through internships and mentorship, I gained valuable skills and + experience. Now, I'm confident and prepared for whatever comes next. Thanks, + Gurukul!"

+ + Aryan Sahu + +

Student @ + Amity University

-
+
... + src="./assets/images/testimonials/kumkum.jpg" class="card-img-top" alt="...">
-
+
-

"Gurukul has been my guiding light through college. The industrial visits and job support paved the way for my career journey. Now, I'm ready to tackle the world with confidence, thanks to Gurukul!"

- +

"Gurukul has been my guiding light through + college. The industrial visits and job support paved the way for my career + journey. Now, I'm ready to tackle the world with confidence, thanks to + Gurukul!"

+ Kumkum Jha -

Student @ J.C mill College

+

Student @ J.C mill College

-
+
... + src="./assets/images/testimonials/sakshi.jpg" class="card-img-top" alt="...">
-
+
-

"Gurukul has been a lifeline during my college years. The mental health support and networking opportunities helped me stay balanced and connected. Now, I'm excited about my future career, all thanks to Gurukul!" -

+

"Gurukul has been a lifeline during my college + years. The mental health support and networking opportunities helped me stay + balanced and connected. Now, I'm excited about my future career, all thanks to + Gurukul!" +

Sakshi Bhadouriya - -

Student @ KRG College

- + +

Student @ KRG College

+
- -
- + +
+ + + + + - +

Our Partners

- our-partners-images - our-partners-images - our-partners-images - our-partners-images - our-partners-images - our-partners-images - our-partners-images - our-partners-images - our-partners-images - our-partners-images - our-partners-images - our-partners-images - our-partners-images + our-partners-images + our-partners-images + our-partners-images + our-partners-images + our-partners-images + our-partners-images + our-partners-images + our-partners-images + our-partners-images + our-partners-images + our-partners-images + our-partners-images + our-partners-images
@@ -631,24 +702,25 @@

Our Partners

+ // Dynamically load the header and footer from PHP files + const loadComponent = (selector, url) => { + fetch(url) + .then(res => { + if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`); + return res.text(); + }) + .then(html => { + document.querySelector(selector).innerHTML = html; + }) + .catch(err => { + console.error(`Could not load ${url}:`, err); + }); + }; + + loadComponent('#header', '_header.html'); + loadComponent('#footer', '_footer.html'); + + \ No newline at end of file