Skip to content

Commit

Permalink
Merge pull request #27 from anishkn04/sfd-2024
Browse files Browse the repository at this point in the history 
Added certain degree of responsibility to hero section
  • Loading branch information
@SatyaRajAwasth1
SatyaRajAwasth1 authored Sep 12, 2024
2 parents 0f1690a + f846dc8 commit ed15e3d
Show file tree
Hide file tree
Showing 4 changed files with 152 additions and 59 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.
119 changes: 111 additions & 8 deletions css/output.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -833,10 +833,6 @@ video {
height: 26rem;
}

.h-\[3\.75rem\] {
height: 3.75rem;
}

.h-\[313px\] {
height: 313px;
}
Expand Down Expand Up @@ -889,6 +885,17 @@ video {
height: 100vh;
}

.h-72 {
height: 18rem;
}

.h-56 {
height: 14rem;
}

.h-40 {
height: 10rem;
}
.h-64 {
height: 16rem;
}
Expand Down Expand Up @@ -949,10 +956,6 @@ video {
width: 1.5rem;
}

.w-\[13\.75rem\] {
width: 13.75rem;
}

.w-\[220px\] {
width: 220px;
}
Expand Down Expand Up @@ -989,6 +992,10 @@ video {
width: 100%;
}

.w-40 {
width: 10rem;
}

.max-w-3xl {
max-width: 48rem;
}
Expand All @@ -997,6 +1004,10 @@ video {
max-width: 72rem;
}

.max-w-\[100vw\] {
max-width: 100vw;
}

.max-w-full {
max-width: 100%;
}
Expand Down Expand Up @@ -1042,6 +1053,10 @@ video {
flex-direction: column;
}

.flex-col-reverse {
flex-direction: column-reverse;
}

.content-center {
align-content: center;
}
Expand Down Expand Up @@ -1074,6 +1089,10 @@ video {
gap: 4rem;
}

.gap-2 {
gap: 0.5rem;
}

.gap-4 {
gap: 1rem;
}
Expand Down Expand Up @@ -1330,6 +1349,14 @@ video {
padding-top: 1rem;
}

.pt-8 {
padding-top: 2rem;
}

.pt-6 {
padding-top: 1.5rem;
}

.text-left {
text-align: left;
}
Expand Down Expand Up @@ -1636,6 +1663,16 @@ video {
}

@media (min-width: 640px) {
.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));
}
Expand Down Expand Up @@ -1678,14 +1715,43 @@ 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\:gap-2 {
gap: 0.5rem;
}

.md\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}

.md\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
Expand Down Expand Up @@ -1726,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;
}
Expand All @@ -1750,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;
}
Expand Down Expand Up @@ -1798,6 +1880,10 @@ video {
padding-right: 1rem;
}

.lg\:text-start {
text-align: start;
}

.lg\:text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
Expand All @@ -1824,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;
}
Expand Down Expand Up @@ -1865,6 +1955,14 @@ video {
}

@media (min-width: 1280px) {
.xl\:h-20 {
height: 5rem;
}

.xl\:w-\[40vw\] {
width: 40vw;
}

.xl\:gap-10 {
gap: 2.5rem;
}
Expand All @@ -1873,4 +1971,9 @@ video {
padding-left: 10%;
padding-right: 10%;
}

.xl\:text-5xl {
font-size: 3rem;
line-height: 1;
}
}
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
11 changes: 9 additions & 2 deletions js/navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@ const navCode = `<nav class="flex z-50 flex-row w-full p-8 lg:p-0 bg-[#f6f6ff] l
<li>
<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>
</li>
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 Down

0 comments on commit ed15e3d

Please sign in to comment.