From 2b030780b5a43e91dfb029f45261f479d12da73f Mon Sep 17 00:00:00 2001 From: Velma Date: Thu, 1 Feb 2024 08:08:21 +0300 Subject: [PATCH] add images and design implementation --- .../images/favicon-32x32.png | Bin 0 -> 1063 bytes .../images/icon-music.svg | 1 + .../images/illustration-hero.svg | 1 + .../images/pattern-background-desktop.svg | 1 + .../images/pattern-background-mobile.svg | 1 + challenges/order_summary_component/index.html | 75 +++++++++++++++++- .../tailwind.config.js | 8 ++ 7 files changed, 83 insertions(+), 4 deletions(-) create mode 100644 challenges/order_summary_component/images/favicon-32x32.png create mode 100644 challenges/order_summary_component/images/icon-music.svg create mode 100644 challenges/order_summary_component/images/illustration-hero.svg create mode 100644 challenges/order_summary_component/images/pattern-background-desktop.svg create mode 100644 challenges/order_summary_component/images/pattern-background-mobile.svg diff --git a/challenges/order_summary_component/images/favicon-32x32.png b/challenges/order_summary_component/images/favicon-32x32.png new file mode 100644 index 0000000000000000000000000000000000000000..1e2df7f089f46dd930239e418bf13e8e4c1cca0f GIT binary patch literal 1063 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dyEa{HEjtmSN`?>!lvVtU&J%W50 z7^>757#dm_7=8hT8eT9klo~KFyh>nTu$sZZAYL$MSD+081EY0-Plzi}!G9Wnr(eF` z|M+F+!xzhMK3;zF(cgdn_B?v|`rD7+fB)V2@MY=EN9|{BEWPpQ{f}RtfBl|!^+Ea3 z%d2iZe)i@2x9`6{eg66V&!4ULpSPU4KJ)Uu^RM22`~BzO$wz&&PyPA(@7<4I`yRjQ zJAZr1#XB#){D-o5+r^Vjdc3)fsquh@R{^yA;Z|8C!Zw`1zDvzMNK{QUFr z^G~yvU&yK5nOnE3q5ts2d8Z#d`S9=G|MwriU%2{m%ii0owp@Sy>dXGuA$NemCsPvS z7YvLEt(>(tKmBDkpML+hROc(RL;oBPGFiO5x8~1ErS?rgb&N^g?k~Ih+L^ zk;M!Q+`=Ht$S`Y;1W=H@#M9T6{SlWiKeL>x)y)*39#2mf#}JFtt&`J}n+ycniko-@ z3;26vOWyCzeS7I$?C$UX{_kIKV}WAF+24(KRQ;Wbm=(hXgpO=b(eBb|byZ~P5M3dt zyDB-nDx`Zw9LoWN-GrY`kHxRfy}Q3KfBxRdclJCv_%N_mL-x0j+x*I+s%JIY&vgg3Y zTes?8j%DMbh5PocynFBNZJq}$w`Q+tKfe6=^y}tkkv_Zb+uQBmSHB|O-+X(*4%OrO zQF%8%OSj*z`t$7X`oHyz%ReTa40^8r7Z}c}C9V-ADTyViR>?)FK#IZ0z|cb1&_LJF zGQ`l-%D~vl*g)IB$jZQAv*1E06b-rgDVb@NxHTN|kz5AU01WSllAy$Lg@U5|w9K4T zg_6pGRE5lfl4J&kiaC!z@o*G|X=t4CKYhmYX%GXmGPhnbx3IFX_hb=fVFi~4lfx;@ u%9}$JPT#n4;>ejJGDp}?H+U@Y(qnifE?Dx($#g2v3I \ 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..2051323b 100644 --- a/challenges/order_summary_component/index.html +++ b/challenges/order_summary_component/index.html @@ -26,13 +26,70 @@ href="../images/favicon-16x16.png" /> + + + - +
-
+
+
+ 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/tailwind.config.js b/challenges/order_summary_component/tailwind.config.js index e10a8224..58445355 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%)', + 'dark-blue': 'hsl(223, 47%, 23%)', + 'desaturated-blue': 'hsl(224, 23%, 55%)', + 'very-pale-blue': 'hsl(225, 100%, 98%)', + }, + fontFamily: { + 'red-hat-display': ['Red Hat Display'], }, }, },