Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Faq accordion card #148

Open
wants to merge 7 commits into
base: faq_accordion_card
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
ensured all test passed, adjusted position of the box, and changed th…
…e path of images
ngumokenneth committed Oct 22, 2023
commit 641f73c01282a818dfcd81c2608bbadaffab8dd8
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
64 changes: 42 additions & 22 deletions challenges/faq_accordion_card/index.html
Original file line number Diff line number Diff line change
@@ -39,31 +39,31 @@
<div
class="relative flex flex-col items-center rounded-2xl bg-white lg:flex-row"
>
<div class="flex flex-col items-center justify-center">
<div class="flex flex-col items-center justify-center overflow-hidden">
<img
src="../images/illustration-woman-online-mobile.svg"
src="images/illustration-woman-online-mobile.svg"
alt="illustration of a woman online"
class="absolute -top-24 w-52 lg:hidden"
/>
<img
src="../images/bg-pattern-mobile.svg"
src="images/bg-pattern-mobile.svg"
alt="background pattern"
class="lg:hidden"
/>
<img
src="../images/illustration-woman-online-desktop.svg"
src="images/illustration-woman-online-desktop.svg"
alt="woman online illustration"
class="hidden w-64 -translate-x-8 lg:block"
/>
<img
src="../images/bg-pattern-desktop.svg"
src="images/bg-pattern-desktop.svg"
alt="background pattern"
class="absolute -top-4 -left-24 hidden w-80 lg:block"
/>
<img
src="../images/illustration-box-desktop.svg"
src="images/illustration-box-desktop.svg"
alt="box image"
class="absolute -left-10 bottom-16 hidden w-24 lg:block"
class="absolute -left-12 bottom-24 hidden w-28 lg:block"
/>
</div>

@@ -78,10 +78,14 @@ <h1 class="text-2xl font-bold">FAQ</h1>
@click="open = open"
class="flex flex-col py-3"
>
<div class="relative flex w-full items-center bg-white">
<a href="#">How many team members can I invite?</a>
<div
class="hover:text-soft-red relative flex w-full items-center bg-white"
>
<a href="#" :class="{ 'font-bold' : open=open}"
>How many team members can I invite?</a
>
<img
src="../images/icon-arrow-down.svg"
src="images/icon-arrow-down.svg"
alt="down arrow icon"
:class="{'rotate-180': open = open}"
class="absolute right-0 flex"
@@ -103,10 +107,14 @@ <h1 class="text-2xl font-bold">FAQ</h1>
@click="open = !open"
class="flex flex-col py-3"
>
<div class="relative flex w-full items-center bg-white">
<a href="#">What is the maximum file upload size?</a>
<div
class="hover:text-soft-red relative flex w-full items-center bg-white"
>
<a href="#" :class="{ 'font-bold' : open=open}"
>What is the maximum file upload size?</a
>
<img
src="../images/icon-arrow-down.svg"
src="images/icon-arrow-down.svg"
alt="down arrow icon"
:class="{'rotate-180': open = open}"
class="absolute right-0 flex"
@@ -128,10 +136,14 @@ <h1 class="text-2xl font-bold">FAQ</h1>
@click="open = !open"
class="flex flex-col py-3"
>
<div class="relative flex w-full items-center bg-white">
<a href="#">How do I reset my password?</a>
<div
class="hover:text-soft-red relative flex w-full items-center bg-white"
>
<a href="#" :class="{ 'font-bold' : open=open}"
>How do I reset my password?</a
>
<img
src="../images/icon-arrow-down.svg"
src="images/icon-arrow-down.svg"
alt="down arrow icon"
:class="{'rotate-180': open = open}"
class="absolute right-0 flex"
@@ -153,10 +165,14 @@ <h1 class="text-2xl font-bold">FAQ</h1>
@click="open = !open"
class="flex flex-col py-3"
>
<div class="relative flex w-full items-center bg-white">
<a href="#">Can I cancel my subscription?</a>
<div
class="hover:text-soft-red relative flex w-full items-center bg-white"
>
<a href="#" :class="{ 'font-bold' : open=open}"
>Can I cancel my subscription?</a
>
<img
src="../images/icon-arrow-down.svg"
src="images/icon-arrow-down.svg"
alt="down arrow icon"
:class="{'rotate-180': open = open}"
class="absolute right-0 flex"
@@ -178,10 +194,14 @@ <h1 class="text-2xl font-bold">FAQ</h1>
@click="open = !open"
class="flex flex-col py-3"
>
<div class="relative flex w-full items-center bg-white">
<a href="#">Do you provide additional support?</a>
<div
class="hover:text-soft-red relative flex w-full items-center bg-white"
>
<a href="#" :class="{ 'font-bold' : open=open}"
>Do you provide additional support?</a
>
<img
src="../images/icon-arrow-down.svg"
src="images/icon-arrow-down.svg"
alt="down arrow icon"
:class="{'rotate-180': open = open}"
class="absolute right-0 flex"