Merge pull request #40 from anishkn04/sfd-2024

Fixed Go-To-Top, added links to footer, and much more
noskofficial · Sep 16, 2024 · e2d7c58 · e2d7c58
2 parents e25b768 + a46bf7b
commit e2d7c58
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 67 deletions.
diff --git a/assets/members/Manish.jpg b/assets/members/Manish.jpg
diff --git a/css/output.css b/css/output.css
@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.11 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -667,8 +667,8 @@ video {
   bottom: 0px;
 }
 
-.bottom-16 {
-  bottom: 4rem;
+.bottom-9 {
+  bottom: 2.25rem;
 }
 
 .left-0 {
@@ -687,8 +687,8 @@ video {
   right: 0px;
 }
 
-.right-12 {
-  right: 3rem;
+.right-6 {
+  right: 1.5rem;
 }
 
 .top-1\/2 {
@@ -1805,6 +1805,10 @@ video {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.hover\:cursor-not-allowed:hover {
+  cursor: not-allowed;
+}
+
 .hover\:cursor-pointer:hover {
   cursor: pointer;
 }
@@ -1846,6 +1850,11 @@ video {
   color: rgb(220 38 38 / var(--tw-text-opacity));
 }
 
+.hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .hover\:drop-shadow-2xl:hover {
   --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -1856,11 +1865,6 @@ video {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
-.group:hover .group-hover\:text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
 @media (min-width: 640px) {
   .sm\:hidden {
     display: none;
@@ -1960,6 +1964,10 @@ video {
     left: 1.25rem;
   }
 
+  .md\:right-12 {
+    right: 3rem;
+  }
+
   .md\:top-\[4\.75rem\] {
     top: 4.75rem;
   }
@@ -2084,6 +2092,10 @@ video {
     gap: 2rem;
   }
 
+  .md\:p-0 {
+    padding: 0px;
+  }
+
   .md\:p-\[10px\] {
     padding: 10px;
   }
@@ -2291,6 +2303,14 @@ video {
     justify-content: center;
   }
 
+  .lg\:justify-between {
+    justify-content: space-between;
+  }
+
+  .lg\:gap-0 {
+    gap: 0px;
+  }
+
   .lg\:gap-10 {
     gap: 2.5rem;
   }

diff --git a/data/members.json b/data/members.json
@@ -11,6 +11,18 @@
       "website": "https://anurojbaskota.com.np/"
     }
   },
+  {
+    "name": "Manish Poudel",
+    "designation": "Facilitator",
+    "image": "../assets/members/Manish.jpg",
+    "socialLinks": {
+      "facebook": "https://www.facebook.com/manish.poudel.1297943/",
+      "instagram": "#",
+      "linkedin": "https://www.linkedin.com/in/manish-poudel-b6566a198/",
+      "github": "https://github.com/ManishPoudel",
+      "website": "#"
+    }
+  },
   {
     "name": "Satya Raj Awasthi",
     "designation": "Facilitator",
@@ -80,7 +92,7 @@
       "instagram": "https://www.instagram.com/anishkn04/",
       "linkedin": "https://www.linkedin.com/in/anishkn04/",
       "github": "https://github.com/anishkn04/",
-      "website": "#"
+      "website": "https://anishkn.com.np/"
     }
   },
   {

diff --git a/index.html b/index.html
@@ -37,16 +37,18 @@
         </div>
         <div class="my-5 justify-center lg:justify-start flex items-center text-xl font-bold">
           <button
-            class="mr-2 h-12 w-40 md:h-[3.75rem] md:w-[13.75rem] rounded-[1.71rem] bg-[#FFDD50] text-center hover:border-2 hover:border-solid hover:border-[#FFDD50] hover:bg-transparent transition-all">
-            <span onclick="scrollNav('about-sfd-section')" target="_blank" class="text-sm sm:text-base md:text-xl font-bold leading-4 text-black">Learn
-              More</span>
-          </button>
-          <button
-            class="group h-12 w-40 md:h-[3.75rem] md:w-[13.75rem] rounded-[1.71rem] bg-[#208820] text-center hover:border-2 hover:border-solid hover:border-[#208820] hover:bg-transparent hover:text-black transition-all">
-            <a href="https://forms.gle/dLoKZifnSpCnUgPdA" target="_blank"
-              class="text-sm sm:text-base md:text-xl font-bold leading-4 text-white group-hover:text-black">Register
-              Here</a>
+            onclick="scrollNav('about-sfd-section')"
+            class="mr-2 h-12 w-40 md:h-[3.75rem] md:w-[13.75rem] rounded-[1.71rem] bg-[#FFDD50] text-center hover:border-2 hover:border-solid hover:border-[#FFDD50] hover:bg-transparent transition-all text-sm sm:text-base md:text-xl font-bold leading-4 text-black"
+          >
+          Learn More
           </button>
+          <a
+            class=" h-12 w-40 md:h-[3.75rem] md:w-[13.75rem] rounded-[1.71rem] bg-[#208820] text-center hover:border-2 hover:border-solid hover:border-[#208820] hover:bg-transparent hover:text-black transition-all text-sm sm:text-base md:text-xl font-bold leading-4 text-white flex justify-center items-center"
+            target="_blank"
+            href="https://forms.gle/dLoKZifnSpCnUgPdA"
+            >
+            Register Here
+          </a>
         </div>
         <div class="mt-2 flex justify-center md:gap-2 lg:justify-start h-14 lg:h-16 xl:h-20 max-w-[100vw] w-full">
           <img src="../assets/shared/sfd_horizontal.svg" alt="SFD Horizontal" class="h-14 lg:h-16 xl:h-20 max-w-full" />
@@ -60,7 +62,7 @@
     </div>
   </section>
 
-  <button id="scroll-to-top" class="hidden fixed bottom-16 right-12 z-50 bg-[#208820] rounded p-3"
+  <button id="scroll-to-top" class="hidden fixed bottom-9 right-6 md:right-12 z-50 bg-[#208820] rounded p-3"
     onclick="goToTop()"><img src="/assets//hero/arrow.svg" alt="Top"></button>
 
   <section
@@ -124,7 +126,7 @@
   </section>
 
   <section id="about-sfd-section"
-    class="flex flex-col-reverse lg:flex-row min-h-screen w-full items-center justify-between  px-8 lg:px-[7.5%] xl:px-[10%]">
+    class="flex flex-col-reverse lg:flex-row min-h-screen w-full items-center justify-center lg:justify-between gap-8 lg:gap-0 px-8 lg:px-[7.5%] xl:px-[10%]">
 
     <div class="flex w-full lg:w-[52%] justify-center flex-col gap-4 lg:gap-6 xl:gap-8 items-center lg:items-start">
       <div class="flex items-center justify-between w-full flex-1 flex-col lg:flex-row">
@@ -159,11 +161,13 @@
           be the largest yet, where developers and enthusiasts can showcase their love for open source.</span>
       </div>
       <div>
-        <button
-          class="transition w-full px-4 h-12 FFDD50 text-center bg-[#FFDD50] hover:bg-transparent group hover:border-solid hover:border-2 hover:border-[#FFDD50] shadow-lg">
-          <a href="https://forms.gle/dLoKZifnSpCnUgPdA" target="_blank"
-            class="text-center text-black text-base font-bold block min-w-20">REGISTER NOW</a>
-        </button>
+        <a
+          class="transition w-full px-4 h-12 FFDD50 text-center bg-[#FFDD50] hover:bg-transparent hover:border-solid hover:border-2 hover:border-[#FFDD50] shadow-lg text-black text-base font-bold flex justify-center items-center min-w-20"
+          href="https://forms.gle/dLoKZifnSpCnUgPdA"
+          target="_blank"
+        >
+            REGISTER NOW
+          </a>
       </div>
     </div>
 
@@ -184,14 +188,19 @@
         them at <span class="text-[#FFDD50]">Software Freedom
           Day</span> 2024</p>
       <div class="flex gap-6">
-        <button
-          class="sm:w-[168px] lg:w-[220px] h-[37px] w-[145px] sm:h-[60px] bg-[#FFDD50]  rounded-[27.5px] text-xl hover:border-2 hover:border-solid hover:border-[#FFDD50] hover:bg-transparent group"><a
-            href="" target="" class="text-black group-hover:text-white sm:text-xl text-[16px]">LEARN MORE</a></button>
-        <button
-          class="sm:w-[168px] lg:w-[220px] h-[37px] w-[145px] sm:h-[60px] bg-[#208820] rounded-[27.5px] hover:border-2 hover:border-solid hover:border-[#208820] hover:bg-transparent hover:text-black"><a
-            href="https://forms.gle/ZmT2eDPqyLoLj5Sd6" target="_blank"
-            class="text-[17px] sm:text-xl text-white">REGISTER
-            NOW</a></button>
+        <a
+          class="flex justify-center items-center hover:text-white sm:w-[168px] lg:w-[220px] h-[37px] w-[145px] sm:h-[60px] bg-[#FFDD50] text-black sm:text-xl text-[16px] rounded-[27.5px] text-xl hover:border-2 hover:border-solid hover:border-[#FFDD50] hover:bg-transparent "
+          href=""
+          target="_blank"
+          >
+            LEARN MORE
+          </>
+        <a
+          class="flex justify-center items-center sm:w-[168px] lg:w-[220px] h-[37px] w-[145px] sm:h-[60px] bg-[#208820] rounded-[27.5px] hover:border-2 hover:border-solid hover:border-[#208820] hover:bg-transparent hover:text-white text-[17px] sm:text-xl text-white"
+          href="https://forms.gle/ZmT2eDPqyLoLj5Sd6" target="_blank"
+        >
+        REGISTER NOW
+        </a>
       </div>
     </div>
   </section>
@@ -241,11 +250,13 @@
       </div>
 
       <div class="mt-8">
-        <button
-          class="w-36 h-12 FFDD50 text-center bg-[#208820] hover:bg-transparent group hover:border-solid hover:border-2 hover:border-[#208820] shadow-lg">
-          <a href="https://nosk.org.np/" target="_blank" class="text-center text-white text-base font-bold group-hover:text-black">LEARN
-            MORE</a>
-        </button>
+        <a
+          class="flex justify-center items-center w-36 h-12 FFDD50 text-center bg-[#208820] hover:bg-transparent hover:text-black hover:border-solid hover:border-2 hover:border-[#208820] shadow-lg text-white text-base font-bold group-hover:text-black"
+          href="https://nosk.org.np/"
+          target="_blank"
+          class="">
+          LEARN MORE
+        </a>
       </div>
     </div>
 
@@ -323,11 +334,11 @@
     //For Scroll to rop
     window.onscroll = function () { scrollFunction() };
     function scrollFunction() {
-      const button = document.getElementById("scroll-to-top")
-      if (document.body.scrollTop > 30 || document.documentElement.scrollTop > 30) {
-        button.style.display = "block"
+      const button = document.getElementById("scroll-to-top");
+      if ((document.body.scrollTop > 30 || document.documentElement.scrollTop > 30) && (document.documentElement.scrollTop + window.screen.height) < document.body.scrollHeight) {
+        button.style.display = "block";
       } else {
-        button.style.display = "none"
+        button.style.display = "none";
       }
     }
     function goToTop() {

diff --git a/js/footer.js b/js/footer.js
@@ -8,35 +8,30 @@ const footerCode = `<section class="mt-7 flex h-80 w-full items-center justify-c
   <div class="w-full md:w-1/2 flex items-center justify-center flex-col gap-8">
     <div class="w-full flex flex-wrap items-center justify-center gap-4 md:gap-8">
       <div class="w-[40px] h-[40px] md:w-[48px] md:h-[48px] lg:h-[66px] lg:w-[66px] bg-white flex items-center justify-center rounded-full">
-        <a href="#" target="_blank"><img src="../assets/socialmedia/instagram.svg" alt="instagram" class="h-[35px] w-[35px] md:h-[42px] md:w-[42px] lg:h-[50px] lg:w-[50px]"></a>
+        <a href="https://www.instagram.com/officialnosk/" target="_blank"><img src="../assets/socialmedia/instagram.svg" alt="instagram" class="h-[35px] w-[35px] md:h-[42px] md:w-[42px] lg:h-[50px] lg:w-[50px]"></a>
       </div>
       <div class="w-[40px] h-[40px] md:w-[48px] md:h-[48px] lg:h-[66px] lg:w-[66px] bg-white flex items-center justify-center rounded-full">
-        <a href="#" target="_blank"><img src="../assets/socialmedia/x.svg" alt="instagram" class="h-[35px] w-[35px] md:h-[42px] md:w-[42px] lg:h-[50px] lg:w-[50px]"></a>
+        <a href="https://twitter.com/OfficialNosk" target="_blank"><img src="../assets/socialmedia/x.svg" alt="twitter" class="h-[35px] w-[35px] md:h-[42px] md:w-[42px] lg:h-[50px] lg:w-[50px]"></a>
       </div>
       <div class="w-[40px] h-[40px] md:w-[48px] md:h-[48px] lg:h-[66px] lg:w-[66px] bg-white flex items-center justify-center rounded-full">
-        <a href="#" target="_blank"><img src="../assets/socialmedia/linkedin.svg" alt="instagram" class="h-[35px] w-[35px] md:h-[42px] md:w-[42px] lg:h-[50px] lg:w-[50px]"></a>
+        <a href="https://www.linkedin.com/company/officialnosk/" target="_blank"><img src="../assets/socialmedia/linkedin.svg" alt="linkedin" class="h-[35px] w-[35px] md:h-[42px] md:w-[42px] lg:h-[50px] lg:w-[50px]"></a>
       </div>
       <div class="w-[40px] h-[40px] md:w-[48px] md:h-[48px] lg:h-[66px] lg:w-[66px] bg-white flex items-center justify-center rounded-full">
-        <a href="#" target="_blank"><img src="../assets/socialmedia/facebook.svg" alt="instagram" class="h-[35px] w-[35px] md:h-[42px] md:w-[42px] lg:h-[50px] lg:w-[50px]"></a>
+        <a href="https://www.facebook.com/nosklub" target="_blank"><img src="../assets/socialmedia/facebook.svg" alt="facebook" class="h-[35px] w-[35px] md:h-[42px] md:w-[42px] lg:h-[50px] lg:w-[50px]"></a>
       </div>
       <div class="w-[40px] h-[40px] md:w-[48px] md:h-[48px] lg:h-[66px] lg:w-[66px] bg-white flex items-center justify-center rounded-full">
-        <a href="#" target="_blank"><img src="../assets/socialmedia/website.svg" alt="instagram" class="h-[35px] w-[35px] md:h-[42px] md:w-[42px] lg:h-[50px] lg:w-[50px]"></a>
+        <a href="https://nosk.org.np/" target="_blank"><img src="../assets/socialmedia/website.svg" alt="websites" class="h-[35px] w-[35px] md:h-[42px] md:w-[42px] lg:h-[50px] lg:w-[50px]"></a>
       </div>
 
-   
-   
-    
-   
     </div>
     <div class="w-full">
       <ul class="flex flex-wrap items-center justify-center gap-2 md:gap-4">
-        <li><a href="" target="_blank" class="text-white font-semibold text-sm md:text-base lg:text-xl hover:text-red-600">Home</a></li>
-        <li><a href="" target="_blank" class="text-white font-semibold text-sm md:text-base lg:text-xl hover:text-red-600">About</a></li>
-        <li><a href="" target="_blank" class="text-white font-semibold text-sm md:text-base lg:text-xl hover:text-red-600">Itinerary</a></li>
-        <li><a href="/pages/ourteam.html" target="_blank" class="text-white font-semibold text-sm md:text-base lg:text-xl hover:text-red-600">Team</a></li>
-
-        <li><a href="/pages/faqs.html" target="_blank" class="text-white font-semibold text-sm md:text-base lg:text-xl hover:text-red-600">FAQs</a></li>
-        <li><a href="" target="_blank" class="text-white font-semibold text-sm md:text-base lg:text-xl hover:text-red-600">Contact</a></li>
+        <li><a href="/index.html" class="text-white font-semibold text-sm md:text-base lg:text-xl hover:text-red-600">Home</a></li>
+        <li><a href="/index.html#about-sfd-section" class="text-white font-semibold text-sm md:text-base lg:text-xl hover:text-red-600">About</a></li>
+        <li><a href="/pages/schedule.html" class="text-white font-semibold text-sm md:text-base lg:text-xl hover:text-red-600">Schedule</a></li>
+        <li><a href="/pages/ourteam.html" class="text-white font-semibold text-sm md:text-base lg:text-xl hover:text-red-600">Team</a></li>
+        <li><a href="/pages/faqs.html" class="text-white font-semibold text-sm md:text-base lg:text-xl hover:text-red-600">FAQs</a></li>
+        <li><a href="mailto:[email protected]" class="text-white font-semibold text-sm md:text-base lg:text-xl hover:text-red-600">Contact</a></li>
       </ul>
     </div>
   </div>

diff --git a/js/members.js b/js/members.js
@@ -12,19 +12,19 @@ function createCard(member) {
         
                     <!-- Icons -->
                     <div class="flex justify-center gap-4 mt-4">
-                        <a href="${member.socialLinks.instagram}" class="bg-white rounded-full border-4 flex items-center justify-center w-8 h-8">
+                        <a href="${member.socialLinks.instagram}" class="bg-white rounded-full border-4 flex items-center justify-center w-8 h-8 ${member.socialLinks.instagram == "#" ? "hover:cursor-not-allowed" : ""} ">
                             <img src="../assets/socialmedia/instagram.svg" class="">
                         </a>
-                        <a href="${member.socialLinks.facebook}" class="bg-white rounded-full border-4 flex items-center justify-center w-8 h-8">
+                        <a href="${member.socialLinks.facebook}" class="bg-white rounded-full border-4 flex items-center justify-center w-8 h-8 ${member.socialLinks.facebook == "#" ? "hover:cursor-not-allowed" : ""} ">
                             <img src="../assets/socialmedia/facebook.svg" class="">
                         </a>
-                        <a href="${member.socialLinks.linkedin}" class="bg-white rounded-full border-4 flex items-center justify-center w-8 h-8">
+                        <a href="${member.socialLinks.linkedin}" class="bg-white rounded-full border-4 flex items-center justify-center w-8 h-8 ${member.socialLinks.linkedin == "#" ? "hover:cursor-not-allowed" : ""} ">
                             <img src="../assets/socialmedia/linkedin.svg" class="">
                         </a>
-                        <a href="${member.socialLinks.github}" class="bg-white rounded-full border-4 flex items-center justify-center w-8 h-8">
+                        <a href="${member.socialLinks.github}" class="bg-white rounded-full border-4 flex items-center justify-center w-8 h-8 ${member.socialLinks.github == "#" ? "hover:cursor-not-allowed" : ""} ">
                             <img src="../assets/socialmedia/github.svg" class="">
                         </a>
-                        <a href="${member.socialLinks.website}" class="bg-white rounded-full border-4 flex items-center justify-center w-8 h-8">
+                        <a href="${member.socialLinks.website}" class="bg-white rounded-full border-4 flex items-center justify-center w-8 h-8 ${member.socialLinks.website == "#" ? "hover:cursor-not-allowed" : ""} ">
                             <img src="../assets/socialmedia/website.svg" class="">
                         </a>
                     </div>

diff --git a/js/navbar.js b/js/navbar.js
@@ -9,7 +9,7 @@ const navCode = `<nav class="flex z-50 flex-row w-full p-8 lg:p-0 bg-[#f6f6ff] l
     <a href="/"><img class="h-11 md:h-[4.75rem] lg:w-auto lg:hover:cursor-pointer" src="../assets/shared/nosk_sfd.svg"
             alt="Logo for NOSK-SFD"></a>
     <div id="nav-list"
-        class="h-screen z-50 transition-all shadow-lg bg-[#f6f6ff] lg:shadow-none lg:bg-transparent fixed w-[60vw] lg:w-auto flex flex-col list-none gap-5 top-14 md:top-[4.75rem] lg:top-0 -right-full lg:static lg:flex lg:flex-row xl:gap-10 lg:gap-8 lg:my-auto md:text-xl lg:font-semibold lg:items-center lg:*:hover:cursor-pointer font-bahnschrift lg:h-[4.75rem]">
+        class="h-screen z-50 p-8 md:p-0 transition-all shadow-lg bg-[#f6f6ff] lg:shadow-none lg:bg-transparent fixed w-[60vw] lg:w-auto flex flex-col list-none gap-5 top-14 md:top-[4.75rem] lg:top-0 -right-full lg:static lg:flex lg:flex-row xl:gap-10 lg:gap-8 lg:my-auto md:text-xl lg:font-semibold lg:items-center lg:*:hover:cursor-pointer font-bahnschrift lg:h-[4.75rem]">
         <span class="group/about" id="about">
             <div
                 class="lg:hover:bg-transparent lg:border-0 flex items-center justify-between w-full md:w-auto">About

diff --git a/js/sponsors.js b/js/sponsors.js
@@ -5,7 +5,7 @@ document.addEventListener("DOMContentLoaded", async () => {
     const data = await res.json();
     const sponsorCount = data.length;
     data.forEach(sponsor => {
-        spCards += `<a target="_blank" href="${sponsor.link}" class="w-full h-full min-h-48 bg-white shadow-lg border-[0.2px] border-[#787676] p-8 flex justify-center items-center rounded-lg ">
+        spCards += `<a target="_blank" href="${sponsor.link}" class="w-full h-full min-h-48 bg-white drop-shadow-lg hover:drop-shadow-2xl border-[0.2px] border-[#787676] p-8 flex justify-center items-center rounded-lg ">
             <img src="${sponsor.image}" alt="${sponsor.name}" class="max-w-full max-h-full object-contain">
         </a>`;
     });