From 2b1adf79810c63251956796b26d6358c5d589aad Mon Sep 17 00:00:00 2001 From: Ayiko Fred Date: Tue, 19 Sep 2023 20:32:15 +0300 Subject: [PATCH 1/3] Finish mobile version --- .../images/bg-pattern-desktop.svg | 1 + .../images/bg-pattern-mobile.svg | 1 + .../images/icon-arrow-down.svg | 1 + .../images/illustration-box-desktop.svg | 1 + .../illustration-woman-online-desktop.svg | 1 + .../illustration-woman-online-mobile.svg | 1 + challenges/faq_accordion_card/index.html | 246 ++++++++++++++++-- challenges/faq_accordion_card/style.css | 6 + .../faq_accordion_card/tailwind.config.js | 9 + 9 files changed, 241 insertions(+), 26 deletions(-) create mode 100644 challenges/faq_accordion_card/images/bg-pattern-desktop.svg create mode 100644 challenges/faq_accordion_card/images/bg-pattern-mobile.svg create mode 100644 challenges/faq_accordion_card/images/icon-arrow-down.svg create mode 100644 challenges/faq_accordion_card/images/illustration-box-desktop.svg create mode 100644 challenges/faq_accordion_card/images/illustration-woman-online-desktop.svg create mode 100644 challenges/faq_accordion_card/images/illustration-woman-online-mobile.svg 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..5f131296 100644 --- a/challenges/faq_accordion_card/index.html +++ b/challenges/faq_accordion_card/index.html @@ -27,37 +27,231 @@ /> + - -
+
-
- Frontend Mentor challenge +
+
+ Mobile illustration woman online + Mobile background pattern SVG +
+
+

+ FAQ +

+ +
+
+

+ How many team members can I invite? +

+ Arrow down icon +
+
+

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

+
+
+ +
+
+

+ What is the maximum file upload size? +

+ Arrow down icon +
+
+

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

+
+
+ +
+
+

+ How do I reset my password? +

+ Arrow down icon +
+
+

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

+
+
+ +
+
+

+ Do you provide additional support? +

+ Arrow down icon +
+
+

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

+
+
+ + +
+
+

+ Do you provide additional support? +

+ Arrow down icon +
+
+

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

+
+
+
+
-
- for - Optimum BH - Internship. -
+ +
+
+ Frontend Mentor challenge +
+
+ for + Optimum BH + Internship. +
-
- Source code +
+ Source code +
-
+
diff --git a/challenges/faq_accordion_card/style.css b/challenges/faq_accordion_card/style.css index b5c61c95..8cde68f0 100644 --- a/challenges/faq_accordion_card/style.css +++ b/challenges/faq_accordion_card/style.css @@ -1,3 +1,9 @@ +@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap'); + @tailwind base; @tailwind components; @tailwind utilities; + +[x-cloak] { + display: none !important; +} diff --git a/challenges/faq_accordion_card/tailwind.config.js b/challenges/faq_accordion_card/tailwind.config.js index 880a8462..38a0af19 100644 --- a/challenges/faq_accordion_card/tailwind.config.js +++ b/challenges/faq_accordion_card/tailwind.config.js @@ -5,6 +5,15 @@ 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'], }, }, }, From ad6072670cb974b9b815b11c578caf286f53d3f5 Mon Sep 17 00:00:00 2001 From: Ayiko Fred Date: Thu, 21 Sep 2023 12:41:34 +0300 Subject: [PATCH 2/3] Redo mobile version --- challenges/faq_accordion_card/index.html | 410 +++++++++--------- .../faq_accordion_card/tailwind.config.js | 4 + 2 files changed, 211 insertions(+), 203 deletions(-) diff --git a/challenges/faq_accordion_card/index.html b/challenges/faq_accordion_card/index.html index 5f131296..149b5a86 100644 --- a/challenges/faq_accordion_card/index.html +++ b/challenges/faq_accordion_card/index.html @@ -32,226 +32,230 @@ src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" > - -
+
-
+ +
+ + Mobile illustration woman online + + +
+
+

+ FAQ +

+
-
+
+

+ How many team members can I invite? +

Mobile illustration woman online +
+
+

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

+
+
+ +
+
+

+ What is the maximum file upload size? +

Mobile background pattern SVG
-
-

- FAQ -

- -
-
-

- How many team members can I invite? -

- Arrow down icon -
-
-

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

-
-
- -
-
-

- What is the maximum file upload size? -

- Arrow down icon -
-
-

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

-
-
- -
-
-

- How do I reset my password? -

- Arrow down icon -
-
-

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

-
-
- -
-
-

- Do you provide additional support? -

- Arrow down icon -
-
-

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

-
-
- - -
-
-

- Do you provide additional support? -

- Arrow down icon -
-
-

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

-
-
+
+

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

-
- -
-
- Frontend Mentor challenge +
+
+

+ How do I reset my password? +

+ Arrow down icon +
+
+

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

+
-
- for - Optimum BH +
+
+

+ Can I cancel my subscription? +

+ Arrow down icon +
+
- Internship. +

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

+
-
- Source code +
+
+

+ Do you provide additional support? +

+ Arrow down icon +
+
+

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

+
-
+
+ +
+
+ Frontend Mentor challenge +
+
+ for + Optimum BH + Internship. +
+ +
+ Source code +
+
diff --git a/challenges/faq_accordion_card/tailwind.config.js b/challenges/faq_accordion_card/tailwind.config.js index 38a0af19..539a657e 100644 --- a/challenges/faq_accordion_card/tailwind.config.js +++ b/challenges/faq_accordion_card/tailwind.config.js @@ -15,6 +15,10 @@ module.exports = { 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')", + }, }, }, plugins: [], From 80d4382563b33a81acfc0bd0d7b1b62b5cb0f5bc Mon Sep 17 00:00:00 2001 From: Ayiko Fred Date: Wed, 27 Sep 2023 11:46:47 +0300 Subject: [PATCH 3/3] Finish Desktop design --- challenges/faq_accordion_card/index.html | 123 +++++++++-------------- challenges/faq_accordion_card/style.css | 20 +++- 2 files changed, 64 insertions(+), 79 deletions(-) diff --git a/challenges/faq_accordion_card/index.html b/challenges/faq_accordion_card/index.html index 149b5a86..c7ad8015 100644 --- a/challenges/faq_accordion_card/index.html +++ b/challenges/faq_accordion_card/index.html @@ -36,15 +36,17 @@ class="font-kumbh-sans from-soft-violet to-soft-blue m-0 flex min-h-screen flex-col place-content-center bg-gradient-to-b text-xs" >
+ +
-
+

@@ -67,17 +71,17 @@

-

How many team members can I invite? -

+ Arrow down icon
-
-

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

-
+

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

-

What is the maximum file upload size? -

+ Arrow down icon
-
-

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

-
+

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

-

How do I reset my password? -

+ Arrow down icon
-
-

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

-
+

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

-

Can I cancel my subscription? -

+ Arrow down icon
-
-

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

-
+

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

@@ -201,12 +177,12 @@ class="border-b py-4" >
-

Do you provide additional support? -

+ Arrow down icon
-
-

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

-
+

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

-
+