Merge pull request #1097 from thevijayshankersharma/organization

Added organization section

new-website/home.js

@@ -2,6 +2,12 @@
 document.querySelector("input[type='checkbox']#dark-toggle").addEventListener("click", darkModeListener);
 function toggleDarkMode() {
     document.documentElement.classList.toggle('dark');
+    // Check if dark mode is enabled
+    const isDarkModeEnabled = document.documentElement.classList.contains('dark');
+    // Get the image element
+    const orgLogoImg = document.getElementById('org-logo');
+    // Set the new image source based on dark mode state
+    orgLogoImg.src = isDarkModeEnabled ? 'assets/GSSocDark.png' : 'assets/GSSocLight.png';
 }
 
 // For particles

new-website/index.html

@@ -7,6 +7,7 @@
     <title>ResourceHub</title>
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]" defer></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">  
     <link rel="stylesheet" href="style.css">
     <script>
         tailwind.config = {
@@ -148,6 +149,23 @@ <h1 class=" text-xl text-center sm:text-2xl md:text-6xl lg:text-8xl font-bold mb
 
         </div>
     </center>
+    <div class="container">
+        <div class="content">
+            <div class="title-container">
+                <i class="fas fa-link link-icon"></i>
+                <h1 class="title dark:text-white">Organization</h1>
+            </div>
+            <p class="description">
+                ResourceHub is participating in GirlScript Summer of Code (GSSoC), an annual open-source program by the
+                GirlScript Foundation. GSSoC promotes gender diversity and inclusion in tech by enabling participants to
+                contribute to various projects under expert mentorship. We are excited to collaborate with talented
+                individuals and advance our project through this initiative.
+            </p>
+        </div>
+        <div class="logo">
+            <img id="org-logo" src="assets/GSSocLight.png" alt="GirlScript Summer of Code Logo">
+        </div>
+    </div>
     <!-- for particle effet -->
 
     <script>

new-website/style.css

@@ -1026,4 +1026,71 @@ body{
 .dark\:hover\:text-black:hover:where(.dark, .dark *) {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.dark .container{
+  color: white;
+  background-color: black;;
+}
+
+.dark .description{
+  color: white;
+}
+
+.dark #org-logo{
+
+}
+
+/* Add these styles to the end of your existing style.css file */
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 90%;
+  max-width: 1000px;
+  background-color: #ffffff;
+  padding: 20px;
+  /* Remove box-shadow property */
+  box-sizing: border-box;
+  margin: 40px auto; /* Adjust as needed */
+}
+
+.content {
+  flex: 1;
+  max-width: 600px;
+  padding-right: 20px;
+  box-sizing: border-box;
+}
+
+.title-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.link-icon {
+  font-size: 1.5em;
+  margin-right: 10px;
+}
+
+.title {
+  font-size: 2em;
+  margin: 0;
+}
+
+.description {
+  font-size: 1em;
+  line-height: 1.5;
+  color: #333333;
+}
+
+.logo {
+  flex-shrink: 0;
+  margin-left: 20px;
+}
+
+.logo img {
+  max-width: 400px;
+  height: auto;
 }