diff --git a/challenges/faq_accordion_card/images/bg-pattern-desktop.svg b/challenges/faq_accordion_card/images/bg-pattern-desktop.svg new file mode 100644 index 00000000..0e7083ce --- /dev/null +++ b/challenges/faq_accordion_card/images/bg-pattern-desktop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/faq_accordion_card/images/bg-pattern-mobile.svg b/challenges/faq_accordion_card/images/bg-pattern-mobile.svg new file mode 100644 index 00000000..63e033bc --- /dev/null +++ b/challenges/faq_accordion_card/images/bg-pattern-mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/faq_accordion_card/images/icon-arrow-down.svg b/challenges/faq_accordion_card/images/icon-arrow-down.svg new file mode 100644 index 00000000..3dcb6eca --- /dev/null +++ b/challenges/faq_accordion_card/images/icon-arrow-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/faq_accordion_card/images/illustration-box-desktop.svg b/challenges/faq_accordion_card/images/illustration-box-desktop.svg new file mode 100644 index 00000000..16791c58 --- /dev/null +++ b/challenges/faq_accordion_card/images/illustration-box-desktop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/faq_accordion_card/images/illustration-woman-online-desktop.svg b/challenges/faq_accordion_card/images/illustration-woman-online-desktop.svg new file mode 100644 index 00000000..6bca509d --- /dev/null +++ b/challenges/faq_accordion_card/images/illustration-woman-online-desktop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/faq_accordion_card/images/illustration-woman-online-mobile.svg b/challenges/faq_accordion_card/images/illustration-woman-online-mobile.svg new file mode 100644 index 00000000..aef55421 --- /dev/null +++ b/challenges/faq_accordion_card/images/illustration-woman-online-mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/faq_accordion_card/index.html b/challenges/faq_accordion_card/index.html index 0dfd3090..c7ad8015 100644 --- a/challenges/faq_accordion_card/index.html +++ b/challenges/faq_accordion_card/index.html @@ -27,11 +27,178 @@ /> + - +
+ + + +
+ + Mobile illustration woman online + + +
+
+

+ FAQ +

+ +
+ +

+ You can invite up to 2 additional users on the Free plan. There is + no limit on team members for the Premium plan. +

+
+ +
+ +

+ No more than 2GB. All files in your account must fit your allotted + storage space. +

+
+ +
+ +

+ Click “Forgot password” from the login page or “Change password” + from your profile page. A reset link will be emailed to you. +

+
+ +
+ +

+ Yes! Send us a message and we’ll process your request no questions + asked. +

+
+ + +
+ +

+ Chat and email support is available 24/7. Phone lines are open + during normal business hours. +

+
+
+
+ +
Source code
diff --git a/challenges/faq_accordion_card/style.css b/challenges/faq_accordion_card/style.css index b5c61c95..714872c9 100644 --- a/challenges/faq_accordion_card/style.css +++ b/challenges/faq_accordion_card/style.css @@ -1,3 +1,25 @@ +@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap'); + @tailwind base; @tailwind components; @tailwind utilities; + +@layer components { + [x-cloak] { + display: none !important; + } + + .pattern-bg-desktop { + background-image: url('images/bg-pattern-desktop.svg'); + background-size: 193%; + background-position: right 63px bottom -110px; + } + + .question { + @apply text-very-dark-grayish-blue cursor-pointer lg:text-[15px] lg:hover:text-[#F47B56]; + } + + .answer { + @apply text-dark-grayish-blue py-2 text-[12px] lg:text-[14px]; + } +} diff --git a/challenges/faq_accordion_card/tailwind.config.js b/challenges/faq_accordion_card/tailwind.config.js index 880a8462..539a657e 100644 --- a/challenges/faq_accordion_card/tailwind.config.js +++ b/challenges/faq_accordion_card/tailwind.config.js @@ -5,6 +5,19 @@ module.exports = { colors: { 'optimum-blue': '#009efc', 'optimum-darkblue': '#0389e1', + 'very-dark-desaturated-blue': 'hsl(238, 29%, 16%)', + 'soft-violet': 'hsl(273, 75%, 66%)', + 'soft-blue': 'hsl(240, 73%, 65%)', + 'very-dark-grayish-blue': 'hsl(237, 12%, 33%)', + 'dark-grayish-blue': 'hsl(240, 6%, 50%)', + 'light-grayish-blue': 'hsl(240, 5%, 91%)', + }, + fontFamily: { + 'kumbh-sans': ['Kumbh Sans', 'sans-serif'], + }, + backgroundImage: { + 'mobile-img-bg': "url('images/bg-pattern-mobile.svg')", + 'desktop-img-bg': "url('images/bg-pattern-desktop.svg')", }, }, },