Skip to content

Commit

Permalink
Merge branch 'sfd-2024' into sfd-2024
Browse files Browse the repository at this point in the history
  • Loading branch information
@SatyaRajAwasth1
SatyaRajAwasth1 authored Sep 12, 2024
2 parents 703ed08 + ed15e3d commit 7186d63
Show file tree
Hide file tree
Showing 9 changed files with 471 additions and 223 deletions.
30 changes: 6 additions & 24 deletions assets/hero/intro.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
281 changes: 165 additions & 116 deletions css/output.css
View file

Large diffs are not rendered by default.

22 changes: 22 additions & 0 deletions gallery.json
View file
Original file line number Diff line number Diff line change
@@ -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"
}
]
51 changes: 26 additions & 25 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,40 +9,41 @@
</head>

<body class="bg-grid max-w-screen max-h-screen font-bahnschrift" id="body">
<section id="hero" class="flex min-h-[calc(100vh-7.5rem)] w-full items-center justify-center p-3 pt-0">
<div id="holder" class="grid max-w-full grid-cols-2 grid-rows-1">
<div>
<div class="mb-2 text-[44px] font-bold">
<p>
<span class="text-black">Celebrate </span>
<span class="text-[#FFC700]"> Software<br />Freedom Day</span>
<span class="text-[#E4554E]">2024</span> with
<span class="text-[#208820]"><br />Nepal Open Source Klub</span>
<section id="hero" class="flex w-full items-center justify-center p-3 pt-6">
<div id="holder" class="flex flex-col-reverse lg:flex-row justify-center gap-6 lg:gap-8 xl:gap-10 h-full max-w-[100vw] w-full lg:*:w-[40%]">
<div class="flex flex-col justify-center">
<div class="mb-2 text-2xl sm:text-3xl md:text-4xl xl:text-5xl font-bold">
<p class="flex flex-col text-center lg:text-start gap-2 lg:gap-6 ">
<span>
<span class="text-black">Celebrate </span>
<span class="text-[#FFC700]"> Software </span>
</span>
<span>
<span class="text-[#FFC700]">Freedom Day</span>
<span class="text-[#E4554E]">2024</span> with
</span>
<span class="text-[#208820]">Nepal Open Source Klub</span>
<span class="text-sm md:text-xl font-semibold text-[#E4554E]">"A celebration of innovation and open collaboration!"</span>
</p>
</div>
<div class="my-2">
<p class="text-left text-xl font-semibold text-[#E4554E]">
&nbsp;"A celebration of innovation and open collaboration!"
</p>
</div>
<div class="align my-5 flex items-center text-xl font-bold">
<div class="my-5 justify-center lg:justify-start flex items-center text-xl font-bold">
<button
class="mr-2 h-[3.75rem] w-[13.75rem] rounded-[1.71rem] bg-[#FFDD50] text-center hover:border-2 hover:border-solid hover:border-[#FFDD50] hover:bg-transparent shadow-md">
<a href="#" target="_blank" class="text-xl font-bold leading-4 text-black">Learn More</a>
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">
<a href="#" target="_blank" class="text-sm sm:text-base md:text-xl font-bold leading-4 text-black">Learn More</a>
</button>
<button
class="group h-[3.75rem] 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">
<a href="#" target="_blank" class="text-xl font-bold leading-4 text-white group-hover:text-black">Register
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="#" target="_blank" class="text-sm sm:text-base md:text-xl font-bold leading-4 text-white group-hover:text-black">Register
Here</a>
</button>
</div>
<div class="mt-2 flex flex-row">
<img src="../assets/shared/sfd_horizontal.svg" alt="SFD Horizontal" class="max-w-full" />
<img src="../assets/shared/nosk_logo.svg" alt="Nosk Logo" class="max-w-full" />
<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" />
<img src="../assets/shared/nosk_logo.svg" alt="Nosk Logo" class="h-14 lg:h-16 xl:h-20 max-w-full" />
</div>
</div>
<div>
<img src="../assets/hero/intro.svg" alt="Candle Ceremony NOSK" class="z-10 max-w-full" />
<div class="flex justify-center">
<img src="../assets/hero/intro.svg" alt="Candle Ceremony NOSK" class="max-w-full h-40 md:h-72 xl:w-[40vw] lg:min-h-96 object-cover" />
</div>
</div>
</section>
Expand All @@ -59,7 +60,7 @@
<span>Time: <span class="font-extralight">10:00 AM</span></span>
</div>
<div>
<div id="timer" class="flex items-center justify-center text-white">
<div id="timer" class="flex items-center justify-center text-white w-full max-w-[100vw]">
<div class="relative mr-4 grid h-24 w-24 grid-rows-3 rounded-xl border-4 border-slate-600 p-2 font-bahnschrift">
<div class="absolute -top-3 left-5 h-5 w-3 rounded-md border bg-[#D9D9D9]"></div>
<div class="row-span-2 w-full text-center text-6xl font-bold" id="days">
Expand Down
27 changes: 27 additions & 0 deletions js/gallery.js
View file
Original file line number Diff line number Diff line change
@@ -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 = `
<img class="w-full h-64 object-cover" src="${item.image}" alt="${item.description}">
<div class="p-4">
<p class="font-semibold text-lg mb-2">${item.date}</p>
<p class="text-gray-600">${item.description}</p>
</div>
`;

galleryContainer.appendChild(galleryItem);
});
})
.catch((error) => console.error("Error loading gallery data:", error));
100 changes: 55 additions & 45 deletions js/navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,10 @@ const navCode = `<nav class="flex z-50 flex-row w-full p-8 lg:p-0 bg-[#f6f6ff] l
class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2">About NOSK</a>
</li>
<li>
<a href="#" class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2">Gallery</a>
<a href="/pages/gallery.html" class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2">Gallery</a>
</li>
<li>
<a href="#" class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2">Speakers</a>
</li>
<li>
<a href="#" class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2">Sponsors</a>
Expand All @@ -37,8 +40,9 @@ const navCode = `<nav class="flex z-50 flex-row w-full p-8 lg:p-0 bg-[#f6f6ff] l
<span id="itinerary" class="lg:hover:border-b-2"><a href="/pages/itinerary.html">Itinerary</a></span>
<span id="team" class="lg:hover:border-b-2"><a href="/pages/ourteam.html">Our Team</a></span>
<span class="group/activities" id="activities">
<!-- This was named "Activities" before, thus the id and classes. -->
<div
class="lg:hover:bg-transparent lg:border-0 lg:pl-3 lg:pr-4 lg:py-2 lg:p-0 flex items-center justify-between w-full md:w-auto">Activities
class="lg:hover:bg-transparent lg:border-0 lg:pl-3 lg:pr-4 lg:py-2 lg:p-0 flex items-center justify-between w-full md:w-auto">Register
<svg id="activities-drop" class="w-4 h-4 ml-1 lg:group-hover/activities:-rotate-180 transition-all" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
Expand All @@ -52,11 +56,14 @@ const navCode = `<nav class="flex z-50 flex-row w-full p-8 lg:p-0 bg-[#f6f6ff] l
<ul class="py-1" aria-labelledby="dropdownLargeButton">
<li>
<a href="https://forms.gle/ZmT2eDPqyLoLj5Sd6"
class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2">Project Registration</a>
class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2">Open Source Project Exhibition</a>
</li>
<li>
<a href="#" class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2">NOSKODE 5.0</a>
</li>
<li>
<a href="#" class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2">Capture The Flag</a>
</li>
</ul>
</div>
</span>
Expand All @@ -67,49 +74,52 @@ const navCode = `<nav class="flex z-50 flex-row w-full p-8 lg:p-0 bg-[#f6f6ff] l
</nav>
`;

document.addEventListener('DOMContentLoaded', () => {
//To Insert the Navbar in the page
const body = document.querySelector("#body").innerHTML;
document.querySelector("#body").innerHTML = navCode + body
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
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 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("#nav-list").children
for (navChild of navChildren) {
if (currentPage.includes(navChild.id)) {
navChild.style = "color: #E4554E"
}
//For NavItem highlighting
const pathName = window.location.pathname;
let splittedPath = pathName.split("/");
const currentPage = splittedPath[splittedPath.length - 1].replace(
".html",
"",
);
const navChildren = document.querySelector("#nav-list").children;
for (navChild of navChildren) {
if (currentPage.includes(navChild.id)) {
navChild.style = "color: #E4554E";
}
})
}
});
Loading

0 comments on commit 7186d63

Please sign in to comment.