From 163a26f9d367942f97fe161482bd4c044c3e928b Mon Sep 17 00:00:00 2001 From: ngumokenneth Date: Tue, 3 Oct 2023 15:58:44 +0300 Subject: [PATCH 1/8] checked on failing test --- challenges/images/icon-music.svg | 1 + challenges/images/illustration-hero.svg | 1 + .../images/pattern-background-desktop.svg | 1 + .../images/pattern-background-mobile.svg | 1 + challenges/order_summary_component/index.html | 43 ++++++++++++++++++- 5 files changed, 45 insertions(+), 2 deletions(-) create mode 100644 challenges/images/icon-music.svg create mode 100644 challenges/images/illustration-hero.svg create mode 100644 challenges/images/pattern-background-desktop.svg create mode 100644 challenges/images/pattern-background-mobile.svg diff --git a/challenges/images/icon-music.svg b/challenges/images/icon-music.svg new file mode 100644 index 00000000..1421b034 --- /dev/null +++ b/challenges/images/icon-music.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/images/illustration-hero.svg b/challenges/images/illustration-hero.svg new file mode 100644 index 00000000..c7f3534f --- /dev/null +++ b/challenges/images/illustration-hero.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/images/pattern-background-desktop.svg b/challenges/images/pattern-background-desktop.svg new file mode 100644 index 00000000..c6e640c4 --- /dev/null +++ b/challenges/images/pattern-background-desktop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/images/pattern-background-mobile.svg b/challenges/images/pattern-background-mobile.svg new file mode 100644 index 00000000..905cb4ba --- /dev/null +++ b/challenges/images/pattern-background-mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/order_summary_component/index.html b/challenges/order_summary_component/index.html index f838b6e5..902b7b51 100644 --- a/challenges/order_summary_component/index.html +++ b/challenges/order_summary_component/index.html @@ -28,10 +28,49 @@ - +
+
+
+ hero illustration +
+
+

Order Summary

+

+ You can now listen to millions of songs, audiobooks, and podcasts on + any device anywhere you like! +

+
+ +
+ music icon + +
+

+ Annual Plan + $59.99/year +

+
+ Change +
+ + Proceed to Payment + + +
+
Source code
From f5749b3532d389deb1053148a066e22904b81ea6 Mon Sep 17 00:00:00 2001 From: ngumokenneth Date: Sun, 8 Oct 2023 14:23:24 +0300 Subject: [PATCH 2/8] added the background pattern --- challenges/order_summary_component/index.html | 69 +++++++++++-------- .../tailwind.config.js | 5 ++ 2 files changed, 44 insertions(+), 30 deletions(-) diff --git a/challenges/order_summary_component/index.html b/challenges/order_summary_component/index.html index 902b7b51..695ff659 100644 --- a/challenges/order_summary_component/index.html +++ b/challenges/order_summary_component/index.html @@ -28,50 +28,54 @@ - +
hero illustration
-
-

Order Summary

-

- You can now listen to millions of songs, audiobooks, and podcasts on - any device anywhere you like! -

-
- -
- music icon - -
-

- Annual Plan - $59.99/year -

+
+
+

Order Summary

+

+ You can now listen to millions of songs, audiobooks, and podcasts + on any device anywhere you like! +

- Change -
+ music icon +
+

+ Annual Plan + $59.99/year +

+
- Proceed to Payment + Change +
+
+ Proceed to Payment +
+
-
+
>
+ background-pattern diff --git a/challenges/order_summary_component/tailwind.config.js b/challenges/order_summary_component/tailwind.config.js index e10a8224..fa48bfb7 100644 --- a/challenges/order_summary_component/tailwind.config.js +++ b/challenges/order_summary_component/tailwind.config.js @@ -5,6 +5,11 @@ module.exports = { colors: { 'optimum-blue': '#009efc', 'optimum-darkblue': '#0389e1', + 'pale-blue': 'hsl(225, 100%, 94%)', + 'bright-blue': 'hsl(245, 75%, 52%)', + 'very-pale-blue': 'hsl(225, 100%, 98%)', + 'desaturated-blue': 'hsl(224, 23%, 55%)', + 'dark-blue': 'hsl(223, 47%, 23%)', }, }, }, From 4ec985d225be37230fc5b133e351fadf47dbf20f Mon Sep 17 00:00:00 2001 From: ngumokenneth Date: Wed, 18 Oct 2023 15:03:22 +0300 Subject: [PATCH 3/8] changed the font, margins and paddings. Also changed the path of the image --- challenges/order_summary_component/index.html | 69 +++++++++++-------- challenges/order_summary_component/style.css | 1 + .../tailwind.config.js | 3 + 3 files changed, 44 insertions(+), 29 deletions(-) diff --git a/challenges/order_summary_component/index.html b/challenges/order_summary_component/index.html index 695ff659..faaa6c61 100644 --- a/challenges/order_summary_component/index.html +++ b/challenges/order_summary_component/index.html @@ -28,51 +28,57 @@ - +
- hero illustration + hero illustration
-
+

Order Summary

-

+

You can now listen to millions of songs, audiobooks, and podcasts on any device anywhere you like!

-
- music icon -
-

- Annual Plan - $59.99/year -

-
- Change -
-
- Proceed to Payment +
+ music icon +
+

+ Annual Plan + $59.99/year +

+ Change +
+
+ Proceed to Payment
- +
+ +
@@ -97,15 +103,20 @@

Source code

+ background pattern background-pattern diff --git a/challenges/order_summary_component/style.css b/challenges/order_summary_component/style.css index b5c61c95..42a1de16 100644 --- a/challenges/order_summary_component/style.css +++ b/challenges/order_summary_component/style.css @@ -1,3 +1,4 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Kumbh+Sans:wght@400;700&family=Manrope:wght@600;800&family=Outfit:wght@400;700&family=Overpass:wght@300;600&family=Red+Hat+Display:wght@500;700;800&family=Ubuntu:ital,wght@0,700;1,400&display=swap'); @tailwind base; @tailwind components; @tailwind utilities; diff --git a/challenges/order_summary_component/tailwind.config.js b/challenges/order_summary_component/tailwind.config.js index fa48bfb7..4d798585 100644 --- a/challenges/order_summary_component/tailwind.config.js +++ b/challenges/order_summary_component/tailwind.config.js @@ -11,6 +11,9 @@ module.exports = { 'desaturated-blue': 'hsl(224, 23%, 55%)', 'dark-blue': 'hsl(223, 47%, 23%)', }, + fontFamily: { + 'red-hat': ['Red Hat Display', 'sans-serif'], + }, }, }, plugins: [], From 22b5de9f0a619e84c328ef0b480e15354197706b Mon Sep 17 00:00:00 2001 From: ngumokenneth Date: Wed, 18 Oct 2023 20:15:08 +0300 Subject: [PATCH 4/8] moved the images directory into the order_summary_directory --- .../images/android-chrome-192x192.png | Bin .../images/android-chrome-512x512.png | Bin .../images/apple-touch-icon.png | Bin .../images/favicon-16x16.png | Bin .../images/favicon-32x32.png | Bin .../images/icon-music.svg | 0 .../images/illustration-hero.svg | 0 .../images/pattern-background-desktop.svg | 0 .../images/pattern-background-mobile.svg | 0 challenges/order_summary_component/index.html | 8 ++++---- 10 files changed, 4 insertions(+), 4 deletions(-) rename challenges/{ => order_summary_component}/images/android-chrome-192x192.png (100%) rename challenges/{ => order_summary_component}/images/android-chrome-512x512.png (100%) rename challenges/{ => order_summary_component}/images/apple-touch-icon.png (100%) rename challenges/{ => order_summary_component}/images/favicon-16x16.png (100%) rename challenges/{ => order_summary_component}/images/favicon-32x32.png (100%) rename challenges/{ => order_summary_component}/images/icon-music.svg (100%) rename challenges/{ => order_summary_component}/images/illustration-hero.svg (100%) rename challenges/{ => order_summary_component}/images/pattern-background-desktop.svg (100%) rename challenges/{ => order_summary_component}/images/pattern-background-mobile.svg (100%) diff --git a/challenges/images/android-chrome-192x192.png b/challenges/order_summary_component/images/android-chrome-192x192.png similarity index 100% rename from challenges/images/android-chrome-192x192.png rename to challenges/order_summary_component/images/android-chrome-192x192.png diff --git a/challenges/images/android-chrome-512x512.png b/challenges/order_summary_component/images/android-chrome-512x512.png similarity index 100% rename from challenges/images/android-chrome-512x512.png rename to challenges/order_summary_component/images/android-chrome-512x512.png diff --git a/challenges/images/apple-touch-icon.png b/challenges/order_summary_component/images/apple-touch-icon.png similarity index 100% rename from challenges/images/apple-touch-icon.png rename to challenges/order_summary_component/images/apple-touch-icon.png diff --git a/challenges/images/favicon-16x16.png b/challenges/order_summary_component/images/favicon-16x16.png similarity index 100% rename from challenges/images/favicon-16x16.png rename to challenges/order_summary_component/images/favicon-16x16.png diff --git a/challenges/images/favicon-32x32.png b/challenges/order_summary_component/images/favicon-32x32.png similarity index 100% rename from challenges/images/favicon-32x32.png rename to challenges/order_summary_component/images/favicon-32x32.png diff --git a/challenges/images/icon-music.svg b/challenges/order_summary_component/images/icon-music.svg similarity index 100% rename from challenges/images/icon-music.svg rename to challenges/order_summary_component/images/icon-music.svg diff --git a/challenges/images/illustration-hero.svg b/challenges/order_summary_component/images/illustration-hero.svg similarity index 100% rename from challenges/images/illustration-hero.svg rename to challenges/order_summary_component/images/illustration-hero.svg diff --git a/challenges/images/pattern-background-desktop.svg b/challenges/order_summary_component/images/pattern-background-desktop.svg similarity index 100% rename from challenges/images/pattern-background-desktop.svg rename to challenges/order_summary_component/images/pattern-background-desktop.svg diff --git a/challenges/images/pattern-background-mobile.svg b/challenges/order_summary_component/images/pattern-background-mobile.svg similarity index 100% rename from challenges/images/pattern-background-mobile.svg rename to challenges/order_summary_component/images/pattern-background-mobile.svg diff --git a/challenges/order_summary_component/index.html b/challenges/order_summary_component/index.html index faaa6c61..67e4624e 100644 --- a/challenges/order_summary_component/index.html +++ b/challenges/order_summary_component/index.html @@ -36,7 +36,7 @@ class="mx-auto flex w-[330px] flex-col items-center overflow-hidden rounded-2xl bg-white lg:w-[380px]" >
- hero illustration + hero illustration
@@ -51,7 +51,7 @@

Order Summary

- music icon + music icon

Annual Plan @@ -109,12 +109,12 @@

background pattern From 3a8641f54198dd5de0d9379715ef0b6f4c8f5fc5 Mon Sep 17 00:00:00 2001 From: ngumokenneth Date: Wed, 25 Oct 2023 20:40:44 +0300 Subject: [PATCH 5/8] Fix the file structure --- .../images/android-chrome-192x192.png | Bin .../images/android-chrome-512x512.png | Bin .../images/apple-touch-icon.png | Bin .../images/favicon-16x16.png | Bin .../images/favicon-32x32.png | Bin .../images/icon-music.svg | 0 .../images/illustration-hero.svg | 0 .../images/pattern-background-desktop.svg | 0 .../images/pattern-background-mobile.svg | 0 9 files changed, 0 insertions(+), 0 deletions(-) rename challenges/{order_summary_component => }/images/android-chrome-192x192.png (100%) rename challenges/{order_summary_component => }/images/android-chrome-512x512.png (100%) rename challenges/{order_summary_component => }/images/apple-touch-icon.png (100%) rename challenges/{order_summary_component => }/images/favicon-16x16.png (100%) rename challenges/{order_summary_component => }/images/favicon-32x32.png (100%) rename challenges/{order_summary_component => }/images/icon-music.svg (100%) rename challenges/{order_summary_component => }/images/illustration-hero.svg (100%) rename challenges/{order_summary_component => }/images/pattern-background-desktop.svg (100%) rename challenges/{order_summary_component => }/images/pattern-background-mobile.svg (100%) diff --git a/challenges/order_summary_component/images/android-chrome-192x192.png b/challenges/images/android-chrome-192x192.png similarity index 100% rename from challenges/order_summary_component/images/android-chrome-192x192.png rename to challenges/images/android-chrome-192x192.png diff --git a/challenges/order_summary_component/images/android-chrome-512x512.png b/challenges/images/android-chrome-512x512.png similarity index 100% rename from challenges/order_summary_component/images/android-chrome-512x512.png rename to challenges/images/android-chrome-512x512.png diff --git a/challenges/order_summary_component/images/apple-touch-icon.png b/challenges/images/apple-touch-icon.png similarity index 100% rename from challenges/order_summary_component/images/apple-touch-icon.png rename to challenges/images/apple-touch-icon.png diff --git a/challenges/order_summary_component/images/favicon-16x16.png b/challenges/images/favicon-16x16.png similarity index 100% rename from challenges/order_summary_component/images/favicon-16x16.png rename to challenges/images/favicon-16x16.png diff --git a/challenges/order_summary_component/images/favicon-32x32.png b/challenges/images/favicon-32x32.png similarity index 100% rename from challenges/order_summary_component/images/favicon-32x32.png rename to challenges/images/favicon-32x32.png diff --git a/challenges/order_summary_component/images/icon-music.svg b/challenges/images/icon-music.svg similarity index 100% rename from challenges/order_summary_component/images/icon-music.svg rename to challenges/images/icon-music.svg diff --git a/challenges/order_summary_component/images/illustration-hero.svg b/challenges/images/illustration-hero.svg similarity index 100% rename from challenges/order_summary_component/images/illustration-hero.svg rename to challenges/images/illustration-hero.svg diff --git a/challenges/order_summary_component/images/pattern-background-desktop.svg b/challenges/images/pattern-background-desktop.svg similarity index 100% rename from challenges/order_summary_component/images/pattern-background-desktop.svg rename to challenges/images/pattern-background-desktop.svg diff --git a/challenges/order_summary_component/images/pattern-background-mobile.svg b/challenges/images/pattern-background-mobile.svg similarity index 100% rename from challenges/order_summary_component/images/pattern-background-mobile.svg rename to challenges/images/pattern-background-mobile.svg From 14b598a588719f314536c5abdb6c2c9d7f020101 Mon Sep 17 00:00:00 2001 From: ngumokenneth Date: Wed, 25 Oct 2023 20:45:44 +0300 Subject: [PATCH 6/8] Fix the path of images --- challenges/order_summary_component/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/challenges/order_summary_component/index.html b/challenges/order_summary_component/index.html index 67e4624e..55e4b7e0 100644 --- a/challenges/order_summary_component/index.html +++ b/challenges/order_summary_component/index.html @@ -36,7 +36,7 @@ class="mx-auto flex w-[330px] flex-col items-center overflow-hidden rounded-2xl bg-white lg:w-[380px]" >
- hero illustration + hero illustration
@@ -51,7 +51,7 @@

Order Summary

- music icon + music icon

Annual Plan @@ -109,12 +109,12 @@

background pattern From 9eb619ddcab1dbe1ae65aeba7c9b389b19350242 Mon Sep 17 00:00:00 2001 From: ngumokenneth Date: Sun, 29 Oct 2023 13:21:54 +0300 Subject: [PATCH 7/8] Improve the design and fix file structure --- .../images/android-chrome-192x192.png | Bin .../images/android-chrome-512x512.png | Bin .../images/apple-touch-icon.png | Bin .../images/favicon-16x16.png | Bin .../images/favicon-32x32.png | Bin .../images/icon-music.svg | 0 .../images/illustration-hero.svg | 0 .../images/pattern-background-desktop.svg | 0 .../images/pattern-background-mobile.svg | 0 challenges/order_summary_component/index.html | 30 ++++++++++-------- 10 files changed, 16 insertions(+), 14 deletions(-) rename challenges/{ => order_summary_component}/images/android-chrome-192x192.png (100%) rename challenges/{ => order_summary_component}/images/android-chrome-512x512.png (100%) rename challenges/{ => order_summary_component}/images/apple-touch-icon.png (100%) rename challenges/{ => order_summary_component}/images/favicon-16x16.png (100%) rename challenges/{ => order_summary_component}/images/favicon-32x32.png (100%) rename challenges/{ => order_summary_component}/images/icon-music.svg (100%) rename challenges/{ => order_summary_component}/images/illustration-hero.svg (100%) rename challenges/{ => order_summary_component}/images/pattern-background-desktop.svg (100%) rename challenges/{ => order_summary_component}/images/pattern-background-mobile.svg (100%) diff --git a/challenges/images/android-chrome-192x192.png b/challenges/order_summary_component/images/android-chrome-192x192.png similarity index 100% rename from challenges/images/android-chrome-192x192.png rename to challenges/order_summary_component/images/android-chrome-192x192.png diff --git a/challenges/images/android-chrome-512x512.png b/challenges/order_summary_component/images/android-chrome-512x512.png similarity index 100% rename from challenges/images/android-chrome-512x512.png rename to challenges/order_summary_component/images/android-chrome-512x512.png diff --git a/challenges/images/apple-touch-icon.png b/challenges/order_summary_component/images/apple-touch-icon.png similarity index 100% rename from challenges/images/apple-touch-icon.png rename to challenges/order_summary_component/images/apple-touch-icon.png diff --git a/challenges/images/favicon-16x16.png b/challenges/order_summary_component/images/favicon-16x16.png similarity index 100% rename from challenges/images/favicon-16x16.png rename to challenges/order_summary_component/images/favicon-16x16.png diff --git a/challenges/images/favicon-32x32.png b/challenges/order_summary_component/images/favicon-32x32.png similarity index 100% rename from challenges/images/favicon-32x32.png rename to challenges/order_summary_component/images/favicon-32x32.png diff --git a/challenges/images/icon-music.svg b/challenges/order_summary_component/images/icon-music.svg similarity index 100% rename from challenges/images/icon-music.svg rename to challenges/order_summary_component/images/icon-music.svg diff --git a/challenges/images/illustration-hero.svg b/challenges/order_summary_component/images/illustration-hero.svg similarity index 100% rename from challenges/images/illustration-hero.svg rename to challenges/order_summary_component/images/illustration-hero.svg diff --git a/challenges/images/pattern-background-desktop.svg b/challenges/order_summary_component/images/pattern-background-desktop.svg similarity index 100% rename from challenges/images/pattern-background-desktop.svg rename to challenges/order_summary_component/images/pattern-background-desktop.svg diff --git a/challenges/images/pattern-background-mobile.svg b/challenges/order_summary_component/images/pattern-background-mobile.svg similarity index 100% rename from challenges/images/pattern-background-mobile.svg rename to challenges/order_summary_component/images/pattern-background-mobile.svg diff --git a/challenges/order_summary_component/index.html b/challenges/order_summary_component/index.html index 55e4b7e0..2a80753f 100644 --- a/challenges/order_summary_component/index.html +++ b/challenges/order_summary_component/index.html @@ -33,15 +33,15 @@ class="absolute z-10 flex h-[100vh] w-full flex-col place-content-center text-center" >
- hero illustration + hero illustration

Order Summary

-

+

You can now listen to millions of songs, audiobooks, and podcasts on any device anywhere you like!

@@ -51,9 +51,9 @@

Order Summary

- music icon + music icon
-

+

Annual Plan $59.99/year

Change
- Proceed to Payment +
+ Proceed to Payment +
-
@@ -109,12 +111,12 @@

background pattern From aa50785d3e9450d31e97c8762079e713d898f455 Mon Sep 17 00:00:00 2001 From: ngumokenneth Date: Sun, 29 Oct 2023 13:25:48 +0300 Subject: [PATCH 8/8] Fix file structure --- .../images/android-chrome-192x192.png | Bin .../images/android-chrome-512x512.png | Bin .../images/apple-touch-icon.png | Bin .../images/favicon-16x16.png | Bin .../images/favicon-32x32.png | Bin 5 files changed, 0 insertions(+), 0 deletions(-) rename challenges/{order_summary_component => }/images/android-chrome-192x192.png (100%) rename challenges/{order_summary_component => }/images/android-chrome-512x512.png (100%) rename challenges/{order_summary_component => }/images/apple-touch-icon.png (100%) rename challenges/{order_summary_component => }/images/favicon-16x16.png (100%) rename challenges/{order_summary_component => }/images/favicon-32x32.png (100%) diff --git a/challenges/order_summary_component/images/android-chrome-192x192.png b/challenges/images/android-chrome-192x192.png similarity index 100% rename from challenges/order_summary_component/images/android-chrome-192x192.png rename to challenges/images/android-chrome-192x192.png diff --git a/challenges/order_summary_component/images/android-chrome-512x512.png b/challenges/images/android-chrome-512x512.png similarity index 100% rename from challenges/order_summary_component/images/android-chrome-512x512.png rename to challenges/images/android-chrome-512x512.png diff --git a/challenges/order_summary_component/images/apple-touch-icon.png b/challenges/images/apple-touch-icon.png similarity index 100% rename from challenges/order_summary_component/images/apple-touch-icon.png rename to challenges/images/apple-touch-icon.png diff --git a/challenges/order_summary_component/images/favicon-16x16.png b/challenges/images/favicon-16x16.png similarity index 100% rename from challenges/order_summary_component/images/favicon-16x16.png rename to challenges/images/favicon-16x16.png diff --git a/challenges/order_summary_component/images/favicon-32x32.png b/challenges/images/favicon-32x32.png similarity index 100% rename from challenges/order_summary_component/images/favicon-32x32.png rename to challenges/images/favicon-32x32.png