Skip to content

Commit

Permalink
Merge pull request #36 from anishkn04/sfd-2024
Browse files Browse the repository at this point in the history 
Navbar links fixed and added go to top arrow in home
  • Loading branch information
@SatyaRajAwasth1
SatyaRajAwasth1 authored Sep 15, 2024
2 parents 6f2f0fe + 9909507 commit d2a28ee
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 20 deletions.
1 change: 1 addition & 0 deletions assets/hero/arrow.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.
28 changes: 22 additions & 6 deletions css/output.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -691,6 +691,14 @@ video {
top: 3.5rem;
}

.bottom-12 {
bottom: 3rem;
}

.right-12 {
right: 3rem;
}

.z-0 {
z-index: 0;
}
Expand Down Expand Up @@ -940,8 +948,8 @@ video {
max-height: 100vh;
}

.min-h-36 {
min-height: 9rem;
.min-h-48 {
min-height: 12rem;
}

.min-h-dvh {
Expand All @@ -953,10 +961,6 @@ video {
min-height: fit-content;
}

.min-h-48 {
min-height: 12rem;
}

.w-1 {
width: 0.25rem;
}
Expand Down Expand Up @@ -1045,6 +1049,10 @@ video {
width: 100%;
}

.min-w-20 {
min-width: 5rem;
}

.max-w-3xl {
max-width: 48rem;
}
Expand Down Expand Up @@ -1231,6 +1239,10 @@ video {
border-radius: 0.375rem;
}

.rounded {
border-radius: 0.25rem;
}

.border {
border-width: 1px;
}
Expand Down Expand Up @@ -1469,6 +1481,10 @@ video {
padding-top: 1.5rem;
}

.pt-7 {
padding-top: 1.75rem;
}

.text-left {
text-align: left;
}
Expand Down
33 changes: 24 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,8 @@
</div>
</section>

<button id="scroll-to-top" class="hidden fixed bottom-12 right-12 z-50 bg-[#208820] rounded p-3" onclick="goToTop()"><img src="/assets//hero/arrow.svg" alt="Top"></button>

<section
class="flex h-[460px] overflow-hidden w-auto content-center items-center justify-around sm:justify-center p-2 sm:gap-10 md:gap-16 lg:gap-40 xl:gap-56">
<img src="/assets/timer/timer_bg.svg" alt="Timer Background" class="absolute h-96 lg:h-fit object-cover object-left lg:object-cover w-full">
Expand Down Expand Up @@ -103,7 +105,7 @@
</div>
</section>

<section class="flex flex-col-reverse lg:flex-row h-auto w-full items-center justify-center p-10 lg:p-20 gap-8">
<section id="about-sfd-section" class="flex flex-col-reverse lg:flex-row h-auto w-full items-center justify-center p-10 lg:p-20 gap-8">

<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-col gap-8 lg:flex-row">
Expand Down Expand Up @@ -132,8 +134,8 @@
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.</span>
</div>
<div>
<button class="md:w-32 w-[11.5rem] h-12 FFDD50 text-center bg-[#FFDD50] hover:bg-transparent group hover:border-solid hover:border-2 hover:border-[#FFDD50] shadow-lg">
<a href="#" target="_blank" class="text-center text-black text-base font-bold">LEARN MORE</a>
<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>
</div>
</div>
Expand Down Expand Up @@ -164,9 +166,7 @@
</section>


<section class="flex flex-col lg:flex-row h-auto w-full items-center justify-center p-10 lg:p-20 gap-8">


<section id="about-nosk-section" class="flex flex-col lg:flex-row h-auto w-full items-center justify-center p-10 lg:p-20 gap-8">
<div class="flex w-full lg:w-[48%] justify-center flex-col items-center">
<img
src="../assets/shared/nosk_logo.svg"
Expand Down Expand Up @@ -235,7 +235,7 @@

<section class="mt-7 min-h-dvh w-full px-[8%]">
<div>
<div class="w-full text-center text-4xl font-bold">Event Activities</div>
<div class="w-full text-center text-3xl sm:text-4xl font-bold">Event Activities</div>
<div class="mr-4 flex flex-col items-center justify-center">
<span class="ml-1 inline-block w-28 sm:w-40 h-2 border-b-4 border-solid border-[#FFCD29]"></span>
<span class="ml-1 inline-block w-36 sm:w-48 h-2 border-b-4 border-solid border-[#208820]"></span>
Expand All @@ -254,9 +254,9 @@
<p class=" text-3xl sm:text-5xl md:6xl lg:text-7xl font-bold text-white">Learn - Enjoy - Discover</p>
</section>

<section class="mt-7 min-h-fit w-full px-[8%]">
<section id="sponsors-section" class="pt-7 min-h-fit w-full px-[8%]">
<div>
<div class="w-full text-center text-4xl font-bold">Sponsors and Partners</div>
<div class="w-full text-center text-3xl sm:text-4xl font-bold">Sponsors and Partners</div>
<div class="mr-4 flex flex-col items-center justify-center">
<span class="ml-1 inline-block w-28 sm:w-40 h-2 border-b-4 border-solid border-[#FFCD29]"></span>
<span class="ml-1 inline-block w-36 sm:w-48 h-2 border-b-4 border-solid border-[#208820]"></span>
Expand All @@ -277,6 +277,21 @@
<script src="/js/sponsors.js"></script>
<script src="/js/footer.js"></script>
<script>
//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"
}else{
button.style.display = "none"
}
}

function goToTop(){
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}

document.addEventListener("DOMContentLoaded", () => {
const sfdDate = new Date("2024-09-21T10:00:00");
Expand Down
17 changes: 12 additions & 5 deletions js/navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@ const navCode = `<nav class="flex z-50 flex-row w-full p-8 lg:p-0 bg-[#f6f6ff] l
class="hidden lg:absolute *:text-black lg:group-hover/about:block lg:bg-white text-base z-10 list-none divide-y divide-gray-100 lg:rounded lg:shadow w-full lg:w-44 font-normal">
<ul class="py-1" aria-labelledby="dropdownLargeButton">
<li>
<a href="/pages/aboutsfd.html" class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2">About
SFD</a>
<span onclick="scrollNav('about-sfd-section')" class="lg:text-sm hover:cursor-pointer hover:bg-gray-100 block px-8 lg:px-4 py-2">About
SFD</span>
</li>
<li>
<a href="https://nosk.org.np/site/html/about.html"
class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2">About NOSK</a>
<span onclick="scrollNav('about-nosk-section')"
class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2 hover:cursor-pointer">About NOSK</span>
</li>
<li>
<a href="/pages/gallery.html" class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2">Gallery</a>
Expand All @@ -32,7 +32,7 @@ const navCode = `<nav class="flex z-50 flex-row w-full p-8 lg:p-0 bg-[#f6f6ff] l
<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>
<span onclick="scrollNav('sponsors-section')" class="lg:text-sm hover:cursor-pointer hover:bg-gray-100 block px-8 lg:px-4 py-2">Sponsors</span>
</li>
</ul>
</div>
Expand Down Expand Up @@ -81,6 +81,13 @@ const navCode = `<nav class="flex z-50 flex-row w-full p-8 lg:p-0 bg-[#f6f6ff] l
</nav>
`;

const scrollNav = (id)=>{
document.getElementById(id).scrollIntoView({
behavior: "smooth",
block: "start"
});
}

document.addEventListener("DOMContentLoaded", () => {
//To Insert the Navbar in the page
const body = document.querySelector("#body").innerHTML;
Expand Down

0 comments on commit d2a28ee

Please sign in to comment.