diff --git a/assets/navbar/closeMenu.svg b/assets/navbar/closeMenu.svg new file mode 100644 index 0000000..2c9f443 --- /dev/null +++ b/assets/navbar/closeMenu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/navbar/hamMenu.svg b/assets/navbar/hamMenu.svg new file mode 100644 index 0000000..48f2e3e --- /dev/null +++ b/assets/navbar/hamMenu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/css/output.css b/css/output.css index 5a67971..839f342 100644 --- a/css/output.css +++ b/css/output.css @@ -554,40 +554,6 @@ video { --tw-contain-style: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - .bg-grid { background-color: #f6f6ff; background-image: linear-gradient( @@ -600,6 +566,10 @@ video { background-size: 50px 50px; } +.fixed { + position: fixed; +} + .absolute { position: absolute; } @@ -608,6 +578,10 @@ video { position: relative; } +.-right-full { + right: -100%; +} + .-top-3 { top: -0.75rem; } @@ -624,10 +598,18 @@ video { left: 1.25rem; } +.right-0 { + right: 0px; +} + .top-1\/2 { top: 50%; } +.top-14 { + top: 3.5rem; +} + .z-0 { z-index: 0; } @@ -636,6 +618,10 @@ video { z-index: 10; } +.z-50 { + z-index: 50; +} + .col-start-6 { grid-column-start: 6; } @@ -672,11 +658,6 @@ video { margin-bottom: 1.5rem; } -.my-auto { - margin-top: auto; - margin-bottom: auto; -} - .-mt-3 { margin-top: -0.75rem; } @@ -685,10 +666,6 @@ video { margin-bottom: 0.5rem; } -.mb-4 { - margin-bottom: 1rem; -} - .mb-8 { margin-bottom: 2rem; } @@ -697,10 +674,6 @@ video { margin-left: 0.25rem; } -.ml-auto { - margin-left: auto; -} - .mr-1 { margin-right: 0.25rem; } @@ -713,14 +686,6 @@ video { margin-right: 1rem; } -.mr-auto { - margin-right: auto; -} - -.mt-10 { - margin-top: 2.5rem; -} - .mt-2 { margin-top: 0.5rem; } @@ -729,14 +694,6 @@ video { margin-top: 1rem; } -.mt-7 { - margin-top: 1.75rem; -} - -.mt-8 { - margin-top: 2rem; -} - .box-border { box-sizing: border-box; } @@ -761,10 +718,18 @@ video { display: none; } +.h-11 { + height: 2.75rem; +} + .h-12 { height: 3rem; } +.h-14 { + height: 3.5rem; +} + .h-24 { height: 6rem; } @@ -785,6 +750,10 @@ video { height: 1.5rem; } +.h-8 { + height: 2rem; +} + .h-\[26rem\] { height: 26rem; } @@ -801,10 +770,6 @@ video { height: 38rem; } -.h-\[4\.75rem\] { - height: 4.75rem; -} - .h-\[40rem\] { height: 40rem; } @@ -825,18 +790,22 @@ video { height: 8.5rem; } -.h-\[calc\(100vh-7\.5rem\)\] { - height: calc(100vh - 7.5rem); -} - .h-full { height: 100%; } +.h-screen { + height: 100vh; +} + .max-h-screen { max-height: 100vh; } +.min-h-\[calc\(100vh-7\.5rem\)\] { + min-height: calc(100vh - 7.5rem); +} + .w-1 { width: 0.25rem; } @@ -845,10 +814,6 @@ video { width: 3rem; } -.w-16 { - width: 4rem; -} - .w-2 { width: 0.5rem; } @@ -893,6 +858,10 @@ video { width: 52%; } +.w-\[60vw\] { + width: 60vw; +} + .w-\[66rem\] { width: 66rem; } @@ -909,8 +878,9 @@ video { max-width: 100%; } -.max-w-md { - max-width: 28rem; +.-rotate-180 { + --tw-rotate: -180deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .transform { @@ -921,10 +891,6 @@ video { list-style-type: none; } -.grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); -} - .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -973,8 +939,8 @@ video { justify-content: space-between; } -.gap-10 { - gap: 2.5rem; +.gap-5 { + gap: 1.25rem; } .gap-56 { @@ -989,12 +955,6 @@ video { gap: 2rem; } -.space-x-4 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(1rem * var(--tw-space-x-reverse)); - margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); -} - .divide-y > :not([hidden]) ~ :not([hidden]) { --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); @@ -1006,12 +966,12 @@ video { border-color: rgb(243 244 246 / var(--tw-divide-opacity)); } -.whitespace-nowrap { - white-space: nowrap; +.overflow-hidden { + overflow: hidden; } -.rounded { - border-radius: 0.25rem; +.whitespace-nowrap { + white-space: nowrap; } .rounded-\[1\.71rem\] { @@ -1026,10 +986,6 @@ video { border-radius: 9999px; } -.rounded-lg { - border-radius: 0.5rem; -} - .rounded-md { border-radius: 0.375rem; } @@ -1099,24 +1055,9 @@ video { background-color: rgb(255 221 80 / var(--tw-bg-opacity)); } -.bg-blue-600 { - --tw-bg-opacity: 1; - background-color: rgb(37 99 235 / var(--tw-bg-opacity)); -} - -.bg-gray-800 { +.bg-\[\#f6f6ff\] { --tw-bg-opacity: 1; - background-color: rgb(31 41 55 / var(--tw-bg-opacity)); -} - -.bg-gray-900 { - --tw-bg-opacity: 1; - background-color: rgb(17 24 39 / var(--tw-bg-opacity)); -} - -.bg-white { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(246 246 255 / var(--tw-bg-opacity)); } .bg-hero-pattern { @@ -1147,18 +1088,8 @@ video { padding: 1rem; } -.p-6 { - padding: 1.5rem; -} - -.px-4 { - padding-left: 1rem; - padding-right: 1rem; -} - -.px-6 { - padding-left: 1.5rem; - padding-right: 1.5rem; +.p-8 { + padding: 2rem; } .px-8 { @@ -1166,11 +1097,6 @@ video { padding-right: 2rem; } -.px-\[1\%\] { - padding-left: 1%; - padding-right: 1%; -} - .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; @@ -1186,14 +1112,6 @@ video { padding-bottom: 0.5rem; } -.pl-3 { - padding-left: 0.75rem; -} - -.pr-4 { - padding-right: 1rem; -} - .pt-0 { padding-top: 0px; } @@ -1338,12 +1256,6 @@ video { opacity: 0.9; } -.shadow { - --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); @@ -1356,10 +1268,6 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.outline { - outline-style: solid; -} - .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; @@ -1374,10 +1282,6 @@ video { transition-duration: 150ms; } -.duration-200 { - transition-duration: 200ms; -} - @font-face { font-family: "Bahnschrift"; @@ -1397,10 +1301,6 @@ video { border-width: 2px; } -.hover\:border-b-2:hover { - border-bottom-width: 2px; -} - .hover\:border-solid:hover { border-style: solid; } @@ -1415,11 +1315,6 @@ video { border-color: rgb(255 221 80 / var(--tw-border-opacity)); } -.hover\:bg-blue-700:hover { - --tw-bg-opacity: 1; - background-color: rgb(29 78 216 / var(--tw-bg-opacity)); -} - .hover\:bg-gray-100:hover { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); @@ -1434,28 +1329,6 @@ video { color: rgb(0 0 0 / var(--tw-text-opacity)); } -.\*\:hover\:cursor-pointer:hover > * { - cursor: pointer; -} - -.group\/about:hover .group-hover\/about\:block { - display: block; -} - -.group\/activities:hover .group-hover\/activities\:block { - display: block; -} - -.group\/about:hover .group-hover\/about\:-rotate-180 { - --tw-rotate: -180deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.group\/activities:hover .group-hover\/activities\:-rotate-180 { - --tw-rotate: -180deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - .group:hover .group-hover\:text-black { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); @@ -1466,13 +1339,11 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } -@media (min-width: 640px) { - .sm\:gap-4 { - gap: 1rem; +@media (min-width: 768px) { + .md\:top-\[4\.75rem\] { + top: 4.75rem; } -} -@media (min-width: 768px) { .md\:col-start-1 { grid-column-start: 1; } @@ -1501,54 +1372,199 @@ video { display: contents; } + .md\:h-14 { + height: 3.5rem; + } + + .md\:h-\[4\.75rem\] { + height: 4.75rem; + } + .md\:w-auto { width: auto; } - .md\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); + .md\:text-xl { + font-size: 1.25rem; + line-height: 1.75rem; } +} - .md\:gap-6 { - gap: 1.5rem; +@media (min-width: 1024px) { + .lg\:static { + position: static; } - .md\:border-0 { - border-width: 0px; + .lg\:absolute { + position: absolute; } - .md\:p-0 { - padding: 0px; + .lg\:top-0 { + top: 0px; } - .md\:px-\[5\%\] { - padding-left: 5%; - padding-right: 5%; + .lg\:my-auto { + margin-top: auto; + margin-bottom: auto; } - .md\:hover\:bg-transparent:hover { - background-color: transparent; + .lg\:mb-4 { + margin-bottom: 1rem; + } + + .lg\:mt-7 { + margin-top: 1.75rem; + } + + .lg\:flex { + display: flex; + } + + .lg\:hidden { + display: none; + } + + .lg\:h-\[4\.75rem\] { + height: 4.75rem; + } + + .lg\:w-44 { + width: 11rem; + } + + .lg\:w-auto { + width: auto; + } + + .lg\:flex-row { + flex-direction: row; + } + + .lg\:items-center { + align-items: center; } -} -@media (min-width: 1024px) { .lg\:gap-8 { gap: 2rem; } - .lg\:px-\[10\%\] { - padding-left: 10%; - padding-right: 10%; + .lg\:rounded { + border-radius: 0.25rem; + } + + .lg\:border-0 { + border-width: 0px; + } + + .lg\:bg-transparent { + background-color: transparent; + } + + .lg\:bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + } + + .lg\:p-0 { + padding: 0px; + } + + .lg\:px-4 { + padding-left: 1rem; + padding-right: 1rem; + } + + .lg\:px-\[7\.5\%\] { + padding-left: 7.5%; + padding-right: 7.5%; + } + + .lg\:py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } + + .lg\:pl-3 { + padding-left: 0.75rem; + } + + .lg\:pr-4 { + padding-right: 1rem; + } + + .lg\:text-sm { + font-size: 0.875rem; + line-height: 1.25rem; } .lg\:text-xl { font-size: 1.25rem; line-height: 1.75rem; } + + .lg\:font-semibold { + font-weight: 600; + } + + .lg\:shadow { + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } + + .lg\:shadow-none { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } + + .lg\:hover\:cursor-pointer:hover { + cursor: pointer; + } + + .lg\:hover\:border-b-2:hover { + border-bottom-width: 2px; + } + + .lg\:hover\:bg-transparent:hover { + background-color: transparent; + } + + .lg\:\*\:hover\:cursor-pointer:hover > * { + cursor: pointer; + } + + .group\/about:hover .lg\:group-hover\/about\:block { + display: block; + } + + .group\/activities:hover .lg\:group-hover\/activities\:block { + display: block; + } + + .group\/about:hover .lg\:group-hover\/about\:-rotate-180 { + --tw-rotate: -180deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } + + .group\/activities:hover .lg\:group-hover\/activities\:-rotate-180 { + --tw-rotate: -180deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } + + .group\/about:active .lg\:group-active\/about\:-rotate-180 { + --tw-rotate: -180deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } } @media (min-width: 1280px) { - .xl\:gap-20 { - gap: 5rem; + .xl\:gap-10 { + gap: 2.5rem; + } + + .xl\:px-\[10\%\] { + padding-left: 10%; + padding-right: 10%; } } diff --git a/index.html b/index.html index 1d74b4c..fadbb7c 100644 --- a/index.html +++ b/index.html @@ -1,222 +1,201 @@ - - - - - NOSK SFD 2024 - - -
-
-
-
-

- Celebrate - Software
Freedom Day - 2024 with -
Nepal Open Source Klub -

-
-
-

-  "A celebration of innovation and open collaboration!" -

-
-
- - -
-
- SFD Horizontal - Nosk Logo -
+ + + + + + NOSK SFD 2024 + + + +
+
+
+
+

+ Celebrate + Software
Freedom Day + 2024 with +
Nepal Open Source Klub +

-
- Candle Ceremony NOSK +
+

+  "A celebration of innovation and open collaboration!" +

+
+
+ + +
+
+ SFD Horizontal + Nosk Logo
-
-
- -
-
- Be a Part of The Celebration
Mark your Calenders
 -
- Event Date: 21st September, 2024
 - Venue: - Nepal College of Information Technology
 - Location: Balkumari, Lalitpur
 - Time: 10:00 AM
-
-
-
-
- 0 -
-
Days
+ Candle Ceremony NOSK +
+
+
+ +
+
+ Be a Part of The Celebration
Mark your Calenders
 +
+ Event Date: 21st September, 2024
 + Venue: + Nepal College of Information Technology
 + Location: Balkumari, Lalitpur
 + Time: 10:00 AM +
+
+
+
+
+
+ 0
-
-
-
- 0 -
-
Hours
+
Days
+
+
+
+
+ 0
-
-
-
- 0 -
-
Minutes
+
Hours
+
+
+
+
+ 0
-
-
-
- 0 -
-
Seconds
+
Minutes
+
+
+
+
+ 0
+
Seconds
-
+
+
-
-
-
-
-

- About The Event
Software Freedom Day - 2024
- "A celebration of innovation and open collaboration!" +

+
+
+
+
+

+ About The Event
Software Freedom Day + 2024
+ "A celebration of innovation and open + collaboration!"

-
-
- - - -
-
- Software Freedom Day (SFD) is an annual global celebration dedicated to promoting the benefits and principles of Free and Open Source Software (FOSS). SFD is celebrated on the third Saturday of September each year and is marked by events, workshops, and conferences held by FOSS communities, tech enthusiasts, and organizations across the world. -

- In Nepal, the celebration of SFD has been actively hosted and organized by the Nepal Open Source Klub (NOSK) for over 20 years. NOSK has been at the forefront of promoting free software. -

- In 2024, NOSK is returning with an even grander edition of Software Freedom Day, This year's event promises to be the largest yet, where developers and enthusiasts can showcase their love for open source. -
-
- +
+ + +
-
- Nosk Vertical Logo +
+ Software Freedom Day (SFD) is an annual global celebration dedicated to promoting the + benefits and principles of Free and Open Source Software (FOSS). SFD is celebrated on the third Saturday of + September each year and is marked by events, workshops, and conferences held by FOSS communities, tech + enthusiasts, and organizations across the world. +

+ In Nepal, the celebration of SFD has been actively hosted and organized by the Nepal Open Source Klub (NOSK) + for over 20 years. NOSK has been at the forefront of promoting free software. +

+ In 2024, NOSK is returning with an even grander edition of Software Freedom Day, This year's event promises + to be the largest yet, where developers and enthusiasts can showcase their love for open source. +
+
-
+
+ Nosk Vertical Logo +
+
+
-
-
-

Got Open Source Project? We Got you!

-

Present them at Software Freedom Day 2024

+
+
+

Got Open + Source Project? We Got you!

+

Present them at Software Freedom + Day 2024

- - + +
-
+
+ + + + + - - - + \ No newline at end of file diff --git a/js/navbar.js b/js/navbar.js index f573c37..cb385a6 100644 --- a/js/navbar.js +++ b/js/navbar.js @@ -1,119 +1,115 @@ -const navCode = ` ` document.addEventListener('DOMContentLoaded', () => { + //To Insert the Navbar in the page const body = document.querySelector("#body").innerHTML; document.querySelector("#body").innerHTML = navCode + body + + //For Hamburger menu + const hamMenu = document.getElementById("hamMenu") + const navList = document.getElementById("nav-list") + hamMenu.addEventListener("click", () => { + let srcNow = hamMenu.getAttribute("src") + if (srcNow == "../assets/navbar/hamMenu.svg") { + hamMenu.setAttribute("src", "../assets/navbar/closeMenu.svg") + } else { + hamMenu.setAttribute("src", "../assets/navbar/hamMenu.svg") + } + navList.classList.toggle("right-0") + navList.classList.toggle("-right-full") + }) + + //For Hamburger Menu bhitra ko + const aboutButton = document.getElementById("about") + const aboutMenu = document.getElementById("about-menu") + const aboutDrop = document.getElementById("about-drop") + const activitiesButton = document.getElementById("activities") + const activitiesMenu = document.getElementById("activities-menu") + const activitiesDrop = document.getElementById("activities-drop") + aboutButton.addEventListener("click", () => { + aboutMenu.classList.toggle("hidden") + aboutDrop.classList.toggle("-rotate-180") + }) + activitiesButton.addEventListener("click", () => { + activitiesMenu.classList.toggle("hidden") + activitiesDrop.classList.toggle("-rotate-180") + }) + + //For NavItem highlighting const pathName = window.location.pathname let splittedPath = pathName.split("/") const currentPage = splittedPath[splittedPath.length - 1].replace(".html", "") - const navChildren = document.querySelector("#navlist").children + const navChildren = document.querySelector("#nav-list").children for (navChild of navChildren) { if (currentPage.includes(navChild.id)) { navChild.style = "color: #E4554E" - } } }) - - -document.addEventListener("DOMContentLoaded", () => { - const sfdDate = new Date("2024-09-21T10:00:00"); - const daysElem = document.getElementById("days"); - const hoursElem = document.getElementById("hours"); - const minutesElem = document.getElementById("minutes"); - const secondsElem = document.getElementById("seconds"); - - function pad(num) { - return num.toString().padStart(2, '0'); - } - - function updateTimer() { - const currDate = new Date(); - let diff = sfdDate - currDate; - - if (diff < 0) { - daysElem.innerText = "00"; - hoursElem.innerText = "00"; - minutesElem.innerText = "00"; - secondsElem.innerText = "00"; - clearInterval(inter); // Stop the interval when the countdown is finished - return; - } - - const days = Math.floor(diff / (1000 * 60 * 60 * 24)); - const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); - const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); - const seconds = Math.floor((diff % (1000 * 60)) / 1000); - - daysElem.innerText = pad(days); - hoursElem.innerText = pad(hours); - minutesElem.innerText = pad(minutes); - secondsElem.innerText = pad(seconds); - } - - const inter = setInterval(updateTimer, 1000); -});