diff --git a/assets/hero/intro.svg b/assets/hero/intro.svg index 0ab7b63..5f342fc 100644 --- a/assets/hero/intro.svg +++ b/assets/hero/intro.svg @@ -1,27 +1,9 @@ - - - - + + - - - - - - - - - - - - - - - - - - - - + + + + diff --git a/css/output.css b/css/output.css index c8ba364..f66b49c 100644 --- a/css/output.css +++ b/css/output.css @@ -600,46 +600,6 @@ video { background-size: 50px 50px; } -/* For FAQ page */ - -.faq-item { - margin-top: 1.25rem; - margin-bottom: 1.25rem; - border-radius: 0.375rem; - border-width: 1px; - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); - padding-left: 1rem; - padding-right: 1rem; - padding-top: 1rem; - --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.faq-question { - display: flex; - width: 100%; - align-items: center; - justify-content: space-between; - gap: 1rem; - text-align: left; -} - -.faq-answer { - margin-top: 0.5rem; - margin-bottom: 0.5rem; - max-height: 0px; - overflow: hidden; - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 500ms; -} - .fixed { position: fixed; } @@ -664,14 +624,6 @@ video { top: -1.25rem; } -.bottom-0 { - bottom: 0px; -} - -.left-0 { - left: 0px; -} - .left-2 { left: 0.5rem; } @@ -757,6 +709,10 @@ video { margin-bottom: 1rem; } +.mb-8 { + margin-bottom: 2rem; +} + .ml-1 { margin-left: 0.25rem; } @@ -869,10 +825,6 @@ video { height: 20rem; } -.h-96 { - height: 24rem; -} - .h-\[11\.25rem\] { height: 11.25rem; } @@ -881,10 +833,6 @@ video { height: 26rem; } -.h-\[3\.75rem\] { - height: 3.75rem; -} - .h-\[313px\] { height: 313px; } @@ -937,6 +885,25 @@ video { height: 100vh; } +.h-72 { + height: 18rem; +} + +.h-56 { + height: 14rem; +} + +.h-40 { + height: 10rem; +} +.h-64 { + height: 16rem; +} + +.max-h-0 { + max-height: 0px; +} + .max-h-screen { max-height: 100vh; } @@ -957,6 +924,10 @@ video { width: 33.333333%; } +.w-12 { + width: 3rem; +} + .w-2 { width: 0.5rem; } @@ -985,18 +956,6 @@ video { width: 1.5rem; } -.w-8 { - width: 2rem; -} - -.w-80 { - width: 20rem; -} - -.w-\[13\.75rem\] { - width: 13.75rem; -} - .w-\[220px\] { width: 220px; } @@ -1033,22 +992,22 @@ video { width: 100%; } -.w-12 { - width: 3rem; +.w-40 { + width: 10rem; } .max-w-3xl { max-width: 48rem; } -.max-w-5xl { - max-width: 64rem; -} - .max-w-6xl { max-width: 72rem; } +.max-w-\[100vw\] { + max-width: 100vw; +} + .max-w-full { max-width: 100%; } @@ -1066,14 +1025,14 @@ 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)); } +.grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + .grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); } @@ -1094,6 +1053,10 @@ video { flex-direction: column; } +.flex-col-reverse { + flex-direction: column-reverse; +} + .content-center { align-content: center; } @@ -1122,14 +1085,14 @@ video { justify-content: space-between; } -.justify-items-center { - justify-items: center; -} - .gap-16 { gap: 4rem; } +.gap-2 { + gap: 0.5rem; +} + .gap-4 { gap: 1rem; } @@ -1175,10 +1138,6 @@ video { white-space: nowrap; } -.rounded-3xl { - border-radius: 1.5rem; -} - .rounded-\[1\.71rem\] { border-radius: 1.71rem; } @@ -1199,6 +1158,10 @@ video { border-radius: 0.75rem; } +.rounded-lg { + border-radius: 0.5rem; +} + .border { border-width: 1px; } @@ -1207,10 +1170,6 @@ video { border-width: 4px; } -.border-8 { - border-width: 8px; -} - .border-r-2 { border-right-width: 2px; } @@ -1248,14 +1207,14 @@ video { border-color: rgb(0 0 0 / var(--tw-border-opacity)); } -.border-slate-600 { +.border-gray-300 { --tw-border-opacity: 1; - border-color: rgb(71 85 105 / var(--tw-border-opacity)); + border-color: rgb(209 213 219 / var(--tw-border-opacity)); } -.border-white { +.border-slate-600 { --tw-border-opacity: 1; - border-color: rgb(255 255 255 / var(--tw-border-opacity)); + border-color: rgb(71 85 105 / var(--tw-border-opacity)); } .bg-\[\#009042\] { @@ -1308,10 +1267,6 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.bg-opacity-60 { - --tw-bg-opacity: 0.6; -} - .bg-celeb-banner { background-image: url('../assets/celebrationbg/celeb_banner.svg'); } @@ -1361,6 +1316,11 @@ video { padding: 2rem; } +.px-4 { + padding-left: 1rem; + padding-right: 1rem; +} + .px-8 { padding-left: 2rem; padding-right: 2rem; @@ -1385,6 +1345,18 @@ video { padding-top: 0px; } +.pt-4 { + padding-top: 1rem; +} + +.pt-8 { + padding-top: 2rem; +} + +.pt-6 { + padding-top: 1.5rem; +} + .text-left { text-align: left; } @@ -1551,6 +1523,11 @@ video { color: rgb(156 163 175 / var(--tw-text-opacity)); } +.text-gray-500 { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + .text-gray-700 { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity)); @@ -1561,14 +1538,14 @@ video { color: rgb(31 41 55 / var(--tw-text-opacity)); } -.text-gray-900 { +.text-green-600 { --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); + color: rgb(22 163 74 / var(--tw-text-opacity)); } -.text-green-600 { +.text-purple-600 { --tw-text-opacity: 1; - color: rgb(22 163 74 / var(--tw-text-opacity)); + color: rgb(147 51 234 / var(--tw-text-opacity)); } .text-white { @@ -1576,6 +1553,11 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.text-gray-600 { + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); +} + .underline { text-decoration-line: underline; } @@ -1600,15 +1582,6 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.grayscale { - --tw-grayscale: grayscale(100%); - 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); -} - -.filter { - 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); -} - .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; @@ -1623,6 +1596,10 @@ video { transition-duration: 150ms; } +.duration-500 { + transition-duration: 500ms; +} + @font-face { font-family: "Bahnschrift"; @@ -1686,8 +1663,18 @@ video { } @media (min-width: 640px) { - .sm\:grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); + .sm\:text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; + } + + .sm\:text-base { + font-size: 1rem; + line-height: 1.5rem; + } + + .sm\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); } } @@ -1728,16 +1715,41 @@ video { height: 3.5rem; } + .md\:h-\[3\.75rem\] { + height: 3.75rem; + } + .md\:h-\[4\.75rem\] { height: 4.75rem; } + .md\:h-36 { + height: 9rem; + } + + .md\:h-72 { + height: 18rem; + } + + .md\:h-80 { + height: 20rem; + } + + .md\:w-\[13\.75rem\] { + width: 13.75rem; + } + .md\:w-auto { width: auto; } - .md\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); + .md\:gap-2 { + gap: 0.5rem; + } + + .md\:text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; } .md\:text-xl { @@ -1780,10 +1792,18 @@ video { display: none; } + .lg\:h-16 { + height: 4rem; + } + .lg\:h-\[4\.75rem\] { height: 4.75rem; } + .lg\:min-h-96 { + min-height: 24rem; + } + .lg\:w-44 { width: 11rem; } @@ -1804,6 +1824,14 @@ video { align-items: center; } + .lg\:justify-start { + justify-content: flex-start; + } + + .lg\:gap-6 { + gap: 1.5rem; + } + .lg\:gap-8 { gap: 2rem; } @@ -1852,6 +1880,10 @@ video { padding-right: 1rem; } + .lg\:text-start { + text-align: start; + } + .lg\:text-sm { font-size: 0.875rem; line-height: 1.25rem; @@ -1878,6 +1910,10 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } + .lg\:\*\:w-\[40\%\] > * { + width: 40%; + } + .lg\:hover\:cursor-pointer:hover { cursor: pointer; } @@ -1919,6 +1955,14 @@ video { } @media (min-width: 1280px) { + .xl\:h-20 { + height: 5rem; + } + + .xl\:w-\[40vw\] { + width: 40vw; + } + .xl\:gap-10 { gap: 2.5rem; } @@ -1927,4 +1971,9 @@ video { padding-left: 10%; padding-right: 10%; } -} + + .xl\:text-5xl { + font-size: 3rem; + line-height: 1; + } +} \ No newline at end of file diff --git a/gallery.json b/gallery.json new file mode 100644 index 0000000..5ac1a7a --- /dev/null +++ b/gallery.json @@ -0,0 +1,22 @@ +[ + { + "image": "image1.png", + "date": "9 Sep", + "description": "Pre Event Meetup" + }, + { + "image": "image2.png", + "date": "10 Sep", + "description": "Event Planning" + }, + { + "image": "path/to/your/image3.png", + "date": "11 Sep", + "description": "Sponsor Outreach" + }, + { + "image": "path/to/your/image3.png", + "date": "11 Sep", + "description": "Sponsor Outreach" + } +] \ No newline at end of file diff --git a/index.html b/index.html index 31d4c64..2bc2296 100644 --- a/index.html +++ b/index.html @@ -9,40 +9,41 @@ -
-
-
-
-

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

+
+
+
+

+ + Celebrate + Software + + + Freedom Day + 2024 with + + Nepal Open Source Klub + "A celebration of innovation and open collaboration!"

-
-

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

-
-
+
-
- SFD Horizontal - Nosk Logo +
+ SFD Horizontal + Nosk Logo
-
- Candle Ceremony NOSK +
+ Candle Ceremony NOSK
@@ -59,7 +60,7 @@ Time: 10:00 AM
-
+
diff --git a/js/gallery.js b/js/gallery.js new file mode 100644 index 0000000..d67230a --- /dev/null +++ b/js/gallery.js @@ -0,0 +1,27 @@ +// Fetch the gallery data from the JSON file and insert it into the HTML +fetch("../gallery.json") // Adjusted path to gallery.json + .then((response) => response.json()) + .then((data) => { + const galleryContainer = document.getElementById("gallery"); + data.forEach((item) => { + const galleryItem = document.createElement("div"); + galleryItem.classList.add( + "block", + "bg-white", + "shadow-md", + "rounded-lg", + "overflow-hidden", + ); + + galleryItem.innerHTML = ` + ${item.description} +
+

${item.date}

+

${item.description}

+
+ `; + + galleryContainer.appendChild(galleryItem); + }); + }) + .catch((error) => console.error("Error loading gallery data:", error)); diff --git a/js/navbar.js b/js/navbar.js index e2b34fe..21c25ec 100644 --- a/js/navbar.js +++ b/js/navbar.js @@ -26,7 +26,10 @@ const navCode = `