Skip to content

Commit

Permalink
Created FAQs/Code of Conduct Page.
Browse files Browse the repository at this point in the history
-Added links to faqs.html in footer.
-Fixed minor alignment issue in the faqs.html
  • Loading branch information
IntelligentBeaver committed Sep 11, 2024
1 parent 5805b4e commit af85453
Show file tree
Hide file tree
Showing 8 changed files with 2,632 additions and 152 deletions.
100 changes: 75 additions & 25 deletions css/output.css
Original file line number Diff line number Diff line change
Expand Up @@ -666,6 +666,10 @@ video {
margin-bottom: 0.5rem;
}

.mb-4 {
margin-bottom: 1rem;
}

.mb-8 {
margin-bottom: 2rem;
}
Expand Down Expand Up @@ -778,10 +782,6 @@ video {
height: 11.25rem;
}

.h-\[243px\] {
height: 243px;
}

.h-\[26rem\] {
height: 26rem;
}
Expand All @@ -790,6 +790,10 @@ video {
height: 3.75rem;
}

.h-\[313px\] {
height: 313px;
}

.h-\[37rem\] {
height: 37rem;
}
Expand Down Expand Up @@ -818,6 +822,10 @@ video {
height: 66px;
}

.h-\[70px\] {
height: 70px;
}

.h-\[7rem\] {
height: 7rem;
}
Expand All @@ -834,14 +842,6 @@ video {
height: 100vh;
}

.h-\[313px\] {
height: 313px;
}

.h-\[70px\] {
height: 70px;
}

.max-h-screen {
max-height: 100vh;
}
Expand Down Expand Up @@ -934,6 +934,10 @@ video {
width: 100%;
}

.max-w-3xl {
max-width: 48rem;
}

.max-w-full {
max-width: 100%;
}
Expand Down Expand Up @@ -1023,6 +1027,12 @@ video {
gap: 2rem;
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
Expand Down Expand Up @@ -1054,6 +1064,10 @@ video {
border-radius: 9999px;
}

.rounded-lg {
border-radius: 0.5rem;
}

.rounded-md {
border-radius: 0.375rem;
}
Expand All @@ -1070,6 +1084,10 @@ video {
border-width: 4px;
}

.border-b {
border-bottom-width: 1px;
}

.border-r-2 {
border-right-width: 2px;
}
Expand Down Expand Up @@ -1152,14 +1170,19 @@ video {
background-color: rgb(246 246 255 / var(--tw-bg-opacity));
}

.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-black {
.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.bg-celeb-banner {
Expand Down Expand Up @@ -1198,6 +1221,10 @@ video {
padding: 1rem;
}

.p-6 {
padding: 1.5rem;
}

.p-8 {
padding: 2rem;
}
Expand All @@ -1222,6 +1249,10 @@ video {
padding-bottom: 0.5rem;
}

.pb-4 {
padding-bottom: 1rem;
}

.pt-0 {
padding-top: 0px;
}
Expand Down Expand Up @@ -1316,6 +1347,10 @@ video {
font-weight: 300;
}

.font-medium {
font-weight: 500;
}

.font-normal {
font-weight: 400;
}
Expand Down Expand Up @@ -1348,6 +1383,11 @@ video {
color: rgb(106 190 82 / var(--tw-text-opacity));
}

.text-\[\#DAA520\] {
--tw-text-opacity: 1;
color: rgb(218 165 32 / var(--tw-text-opacity));
}

.text-\[\#E4554E\] {
--tw-text-opacity: 1;
color: rgb(228 85 78 / var(--tw-text-opacity));
Expand All @@ -1358,11 +1398,6 @@ video {
color: rgb(255 199 0 / var(--tw-text-opacity));
}

.text-\[\#FFCD29\] {
--tw-text-opacity: 1;
color: rgb(255 205 41 / var(--tw-text-opacity));
}

.text-\[\#FFDD50\] {
--tw-text-opacity: 1;
color: rgb(255 221 80 / var(--tw-text-opacity));
Expand All @@ -1383,19 +1418,29 @@ video {
color: rgb(156 163 175 / var(--tw-text-opacity));
}

.text-white {
.text-gray-600 {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
color: rgb(75 85 99 / var(--tw-text-opacity));
}

.text-red-900 {
.text-gray-700 {
--tw-text-opacity: 1;
color: rgb(127 29 29 / var(--tw-text-opacity));
color: rgb(55 65 81 / var(--tw-text-opacity));
}

.text-\[\#DAA520\] {
.text-gray-800 {
--tw-text-opacity: 1;
color: rgb(218 165 32 / var(--tw-text-opacity));
color: rgb(31 41 55 / var(--tw-text-opacity));
}

.text-purple-600 {
--tw-text-opacity: 1;
color: rgb(147 51 234 / var(--tw-text-opacity));
}

.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}

.opacity-100 {
Expand Down Expand Up @@ -1484,6 +1529,11 @@ video {
color: rgb(220 38 38 / var(--tw-text-opacity));
}

.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}

.group:hover .group-hover\:text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
Expand Down
38 changes: 1 addition & 37 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -253,43 +253,7 @@
<p class="text-8xl font-bold text-white">Learn - Enjoy - Discover</p>
</section>

<!-- JUST COMMENTING FOR NOW.. -->
<!-- This is obsolete -->
<!-- <section
class="mt-7 flex h-80 w-full items-center justify-center bg-celeb-banner bg-no-repeat"
>
<p class="text-center text-5xl font-bold text-white">
CELEBRATE THE FREEDOM OF COLLABORATION
</p>
</section>
<section class="h-[313px] w-full bg-[#111111] flex items-center justify-center mt-8">
<div class="h-[54%] w-1/2 flex items-center justify-center flex-col gap-8">
<div class="w-full h-1/2 flex items-center justify-center gap-8">
<div class="w-[66px] h-[66px] bg-white flex items-center justify-center rounded-full"><a href="#" target="_blank"><img src="../assets/socialmedia/instagram.svg" alt="instagram"></a></div>
<div class="w-[66px] h-[66px] bg-white flex items-center justify-center rounded-full"><a href="#" target="_blank"><img src="../assets/socialmedia/x.svg" alt="instagram"></a></div>
<div class="w-[66px] h-[66px] bg-white flex items-center justify-center rounded-full"><a href="#" target="_blank"><img src="../assets/socialmedia/facebook.svg" alt="instagram"></a></div>
<div class="w-[66px] h-[66px] bg-white flex items-center justify-center rounded-full"><a href="#" target="_blank"><img src="../assets/socialmedia/linkedin.svg" alt="instagram"></a></div>
<div class="w-[66px] h-[66px] bg-white flex items-center justify-center rounded-full"><a href="#" target="_blank"><img src="../assets/socialmedia/website.svg" alt="instagram"></a></div>
</div>
<div class="w-full h-1/2">
<ul class="flex items-center justify-center gap-4 ">
<li><a href="" target="_blank" class="text-white font-semibold text-xl hover:text-red-600">Home</a></li>
<li><a href="" target="_blank" class="text-white font-semibold text-xl hover:text-red-600">About</a></li>
<li><a href="" target="_blank" class="text-white font-semibold text-xl hover:text-red-600">Itinerary</a></li>
<li><a href="" target="_blank" class="text-white font-semibold text-xl hover:text-red-600">Team</a></li>
<li><a href="" target="_blank" class="text-white font-semibold text-xl hover:text-red-600">Highlights</a></li>
<li><a href="" target="_blank" class="text-white font-semibold text-xl hover:text-red-600">FAQs</a></li>
<li><a href="" target="_blank" class="text-white font-semibold text-xl hover:text-red-600">Contact</a></li>
</ul>
</ul>
</div>
</div>
</section>
<section class="h-[70px] w-full bg-black flex items-center justify-center">
<p class="bg-black text-white text-center">Copyright© Software Freedom Day 2024 x Nepal Open Source Club</p>
</section> -->

<!-- Footer Section (from js/footer.js) -->
<footer></footer>


Expand Down
18 changes: 18 additions & 0 deletions js/faqs.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
document.addEventListener('DOMContentLoaded', () => {
const faqItems = document.querySelectorAll('.faq-item');

faqItems.forEach(item => {
const question = item.querySelector('.faq-question');
const answer = item.querySelector('.faq-answer');

question.addEventListener('click', () => {
if (answer.style.maxHeight && answer.style.maxHeight !== "0px") {
answer.style.maxHeight = "0px";
question.querySelector('span.text-purple-600').textContent = '+';
} else {
answer.style.maxHeight = answer.scrollHeight + "px";
question.querySelector('span.text-purple-600').textContent = '-';
}
});
});
});
2 changes: 1 addition & 1 deletion js/footer.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const footerCode = `<section
<li><a href="" target="_blank" class="text-white font-semibold text-xl hover:text-red-600">Itinerary</a></li>
<li><a href="" target="_blank" class="text-white font-semibold text-xl hover:text-red-600">Team</a></li>
<li><a href="" target="_blank" class="text-white font-semibold text-xl hover:text-red-600">Highlights</a></li>
<li><a href="" target="_blank" class="text-white font-semibold text-xl hover:text-red-600">FAQs</a></li>
<li><a href="/pages/faqs.html" target="_blank" class="text-white font-semibold text-xl hover:text-red-600">FAQs</a></li>
<li><a href="" target="_blank" class="text-white font-semibold text-xl hover:text-red-600">Contact</a></li>
</ul>
</ul>
Expand Down
Loading

0 comments on commit af85453

Please sign in to comment.