diff --git a/challenges/order_summary_component/images/icon-music.svg b/challenges/order_summary_component/images/icon-music.svg new file mode 100644 index 00000000..1421b034 --- /dev/null +++ b/challenges/order_summary_component/images/icon-music.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/order_summary_component/images/illustration-hero.svg b/challenges/order_summary_component/images/illustration-hero.svg new file mode 100644 index 00000000..c7f3534f --- /dev/null +++ b/challenges/order_summary_component/images/illustration-hero.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/order_summary_component/images/pattern-background-desktop.svg b/challenges/order_summary_component/images/pattern-background-desktop.svg new file mode 100644 index 00000000..c6e640c4 --- /dev/null +++ b/challenges/order_summary_component/images/pattern-background-desktop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/order_summary_component/images/pattern-background-mobile.svg b/challenges/order_summary_component/images/pattern-background-mobile.svg new file mode 100644 index 00000000..905cb4ba --- /dev/null +++ b/challenges/order_summary_component/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..2a80753f 100644 --- a/challenges/order_summary_component/index.html +++ b/challenges/order_summary_component/index.html @@ -28,11 +28,62 @@ - +
-
+
+
+ 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
+ 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 e10a8224..4d798585 100644 --- a/challenges/order_summary_component/tailwind.config.js +++ b/challenges/order_summary_component/tailwind.config.js @@ -5,6 +5,14 @@ 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%)', + }, + fontFamily: { + 'red-hat': ['Red Hat Display', 'sans-serif'], }, }, },