Skip to content

Commit

Permalink
Merge pull request #926 from sau-mili/main
Browse files Browse the repository at this point in the history
feat: FAQ Page inproved
  • Loading branch information
apu52 authored Jul 4, 2024
2 parents 47a73d3 + e3c0f54 commit 01122e3
Show file tree
Hide file tree
Showing 6 changed files with 613 additions and 167 deletions.
2 changes: 1 addition & 1 deletion counter.css
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
background: linear-gradient(white,rgb(153, 139, 251));
border-bottom: 10px solid #40349c;
}
i {
.countitem i {
color: #06006e;
font-size: 2.5em;
text-align: center;
Expand Down
184 changes: 168 additions & 16 deletions faq-website.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,38 @@

* {
box-sizing: border-box;
border-radius: 20px;
}


:root{
--color-primary: #ffd54b;
--color-text: #545d7a;
--color-white: #fff;
--color-title: #242e4c;
--color-background: #f7f8fb;
--color-border: #dae1f5;

/* Fonts */
/* --font-family: "Satoshi", sans-serif;
--fs-sm: 1.4rem;
--fs-md: 1.6rem;
--fs-lg: 2.2rem;
--fw-regular: 400;
--fw-medium: 500;
--fw-bold: 700; */

/* Transition & Box Shadow */
--transition: 0.4s ease-in-out;
--shadow: 0px 60px 56px -12px rgba(9, 40, 163, 0.05);

}


.faq-container {
margin: 0 auto;
max-width: 600px;
max-width: 900px !important;
width: 80%;
}

.faq {
Expand Down Expand Up @@ -57,15 +84,42 @@
}

.faq-text {
display: none;
/* display: none; */
margin: 30px 0 0;
color: black;
}

.faq.active .faq-text {
display: block;
}

/* Colors */

/* html {
font-size: 62.5%;
} */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* box-sizing: content-box; */
}

body {
background-color: var(--color-background);
font-family: var(--font-family);
color: var(--color-text);
font-size: var(--fs-md);
font-weight: var(--fw-regular);
}

.container{
width: 100% !important;

margin: auto;
min-height: 100vh;
padding: 2rem;
display: grid;
place-items: center;
}
.faq-toggle {
align-items: center;
background: rgb(239, 239, 239);
Expand All @@ -87,15 +141,113 @@
display: none;
}

.faq.active .faq-toggle .fa-times {
color: #fff;
display: block;
}

.faq-toggle .fa-chevron-down {
display: block;
}

.faq.active .faq-toggle {
background-color: #9fa4a8;
}


.accordion__wrapper {
background-color: var(--color-white);
box-shadow: var(--shadow);
border-radius:10px;
width: 100%;
/* max-width: 60rem; */
padding: 5rem;
}

.accordion__title{
font-size: 25px;
font-weight:800;
color: var(--color-title);
text-align: center;
margin-bottom: 4rem;
}

.accordion {
border-bottom: 0.1rem solid var(--color-border);
padding-bottom: 2rem;
margin-bottom: 3rem;
width: 100%;
}

.accordion__header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
cursor: pointer;
}

.accordion__icon {
background-color: var(--color-primary);
width: 2.2rem;
height: 2.2rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
color: var(--color-white);
flex-shrink: 0;
}

.accordion__question{
font-size: 18px;
font-weight: 700;
color: var(--color-title);
width: 100%;
}

.accordion__answer{
padding: 2rem 0;
font-size: 16px;
}

.accordion__content{
overflow: hidden;
height: 0;
transition: var(--transition);
}

@media screen and (min-width: 580px) {
.accordion__wrapper {
padding: 5rem 8rem;
}
}


.more{
padding: 50px;
background-color: aliceblue;
margin: 10px auto;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.more p{
color:grey;
}

.moreemail{
padding: 10px 20px;
font-size: 18px;
border-radius: 10px;
color: white;
background-color: rgb(40, 87, 241);
}



















22 changes: 18 additions & 4 deletions faq-website.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,21 @@
const toggles = document.querySelectorAll(".faq-toggle");

toggles.forEach((toggle) => {
toggle.addEventListener("click", () => {
toggle.parentElement.classList.toggle("active");
const accordions = document.querySelectorAll(".accordion");

accordions.forEach((accordion, index) => {
const header = accordion.querySelector(".accordion__header");
const content = accordion.querySelector(".accordion__content");
const icon = accordion.querySelector("#accordion-icon");

header.addEventListener("click", () => {
const isOpen = content.style.height === `${content.scrollHeight}px`;

accordions.forEach((a, i) => {
const c = a.querySelector(".accordion__content");
const ic = a.querySelector("#accordion-icon");

c.style.height = i === index && !isOpen ? `${c.scrollHeight}px` : "0px";
ic.classList.toggle("ri-add-line", i !== index || !isOpen);
ic.classList.toggle("ri-subtract-fill", i === index && !isOpen);
});
});
});
Loading

0 comments on commit 01122e3

Please sign in to comment.