From 5db7949e3398cc1e035656c6dfb9ba94e0f2fb80 Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Wed, 19 Jul 2023 16:16:25 +0700 Subject: [PATCH 1/3] Init html welcome section --- .../src/assets/images/welcome/search-btn.png | Bin 1211 -> 0 bytes .../assets/images/welcome/search-icon-btn.svg | 5 +++ practice/practice-02/src/includes/mixins.pug | 0 practice/practice-02/src/index.pug | 19 ++++++--- .../src/layouts/{nav => }/nav-menu.pug | 0 .../src/layouts/welcome/banner.pug | 12 ++++++ .../src/layouts/welcome/content.pug | 37 ++++++++++++++++++ 7 files changed, 67 insertions(+), 6 deletions(-) delete mode 100644 practice/practice-02/src/assets/images/welcome/search-btn.png create mode 100644 practice/practice-02/src/assets/images/welcome/search-icon-btn.svg create mode 100644 practice/practice-02/src/includes/mixins.pug rename practice/practice-02/src/layouts/{nav => }/nav-menu.pug (100%) create mode 100644 practice/practice-02/src/layouts/welcome/banner.pug create mode 100644 practice/practice-02/src/layouts/welcome/content.pug diff --git a/practice/practice-02/src/assets/images/welcome/search-btn.png b/practice/practice-02/src/assets/images/welcome/search-btn.png deleted file mode 100644 index f6f584915aa073a5ef29f2b711a164cb9ab1d69f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1211 zcmV;s1VsCZP)Kc ziCcz6Ah8;xAV@M@RFyrJ4ffD8iIaSi-J_Xq&*$pe8zCjAlwSnh^ZTrYJR$f9*bfAY z0QsX6pu*Py5mgYeY>>*h$`+eKh zRpLt@I*Y)-WG+s+rriS?KGUI}U*vH=7#`tVu`Jx@VuHz_;1(WaEvxL~C0< z3Ude?&2mvR^P-z!clHtzB*TIYfJ?UkEZGX!y-aV>7^~LUYoIqb0e*dgsXzh@4+C%0axq>ls~d?1JH{zsmWSvIIn=aN-w;3_^Y$e^bb@e`STOl z7pL2AFROytbV5g!Y;XfoLEP1ZS#KoSa3(1)uWffMNdZ5z&rho)RkEzlsUY0C!#-ol zJsZL`c^&D)u$!Uq990cjD@KlV5bMfRz> zcFd{bXbYp&q9f?@liJJox#=9w5y!7rhe#7R3nhMn_6^=B`YL19k0H})t$9R zz#)`ISVq3<3YCl`BkTci>sckC?ke&GqQCN-ojgiT5Z#kMm69y?3@RAjJ8}+?l2w=@ zQFi{S0x=NjtN)ZR`txHo=BFcj3bmm?ScWu^?G?iF*uVDFtXray7~PjARcGHA^HY-L z$TWadDsbIyM>|@`O@%BQQfAkc#im-9U=ccrC_&*7|69)L;2!r0QQd|5QDf{Be1{`y zWNGv|>#lpQU;)p|SWlNH9~>$nO;2BGy1;zOX4hpcMe30$16rTVDPWIRh_35Iwb~;b zg1G|bf?F=s<8D)|HxoF>Ljbdn!1OAYI+}=z2QbDAB#HkWKw$pQ=5TX!8}hI03AYym zX;jS$SxG)TFWZ( zRRiv-b<`X1Z<`+O+{KVoF5vomEL}bzxWu0vOatUdCk$~gySrF+nhyyve!swdDmu!C z1o + + + + diff --git a/practice/practice-02/src/includes/mixins.pug b/practice/practice-02/src/includes/mixins.pug new file mode 100644 index 0000000..e69de29 diff --git a/practice/practice-02/src/index.pug b/practice/practice-02/src/index.pug index 3ccf801..3a1865c 100644 --- a/practice/practice-02/src/index.pug +++ b/practice/practice-02/src/index.pug @@ -1,3 +1,5 @@ +- var welcome_img_path = "./assets/images/welcome/"; + doctype html html(lang="en") head @@ -6,9 +8,14 @@ html(lang="en") link(rel="stylesheet", href="./styles/main.scss") title Food Hut body - header.header.flex - .logo-wrapper - a.logo-link(href="javascript:void(0)") - img.logo(src="./assets/images/logo.svg", alt="Food Hut logo") - .header-content.flex - include layouts/nav/nav-menu + .background + header.header.flex + .logo-wrapper + a.logo-link(href="javascript:void(0)") + img.logo(src="./assets/images/logo.svg", alt="Food Hut logo") + .header-content.flex + include layouts/nav-menu + section.welcome + include layouts/welcome/banner + include layouts/welcome/content + img(src=welcome_img_path + "slider.png", alt="Slider image") diff --git a/practice/practice-02/src/layouts/nav/nav-menu.pug b/practice/practice-02/src/layouts/nav-menu.pug similarity index 100% rename from practice/practice-02/src/layouts/nav/nav-menu.pug rename to practice/practice-02/src/layouts/nav-menu.pug diff --git a/practice/practice-02/src/layouts/welcome/banner.pug b/practice/practice-02/src/layouts/welcome/banner.pug new file mode 100644 index 0000000..925755e --- /dev/null +++ b/practice/practice-02/src/layouts/welcome/banner.pug @@ -0,0 +1,12 @@ +.welcome__banner + .welcome__banner-container + img( + src=welcome_img_path + "welcome-image-mobile.png", + alt="Welcome banner image" + ) + img( + src=welcome_img_path + "lines-background-mobile.png", + alt="Lines background" + ) + img(src=welcome_img_path + "arrow-mobile.png", alt="Arrow image") + img(src=welcome_img_path + "mint.png", alt="Mint image") diff --git a/practice/practice-02/src/layouts/welcome/content.pug b/practice/practice-02/src/layouts/welcome/content.pug new file mode 100644 index 0000000..5e29a03 --- /dev/null +++ b/practice/practice-02/src/layouts/welcome/content.pug @@ -0,0 +1,37 @@ +.welcome__content + .welcome__orange-image-wrapper + img(src=welcome_img_path + "orange.png", alt="Orange background image") + .welcome__text-box + .welcome__icon-container + img.welcome__love-icon( + src=welcome_img_path + "love-icon.png", + alt="Love icon" + ) + p.welcome__text-box-content People Trust us + h1.welcome__heading We're + = " " + mark serious + = " for " + mark food + = " & " + mark delivery + = "." + p.welcome__description Best cooks and best delivery guys all at your service. Hot tasty food will reach you in 60 minutes. + form.welcome__search-form(action="#") + .welcome__search-icon-wrapper + img.welcome__search-icon( + src=welcome_img_path + "search-icon.png", + alt="Search icon" + ) + input.welcome__text-input(type="text") + .welcome__button-icon-wrapper + button.welcome__submit-btn(type="submit") + img.welcome__search-icon-btn( + src=welcome_img_path + "search-icon-btn.svg", + alt="Search button image" + ) + a.btn(href="javascript:void(0)") Download App + a.welcome__watch-video-button(href="javascript:void(0)") + .welcome__watch-video-wrapper + img(src=welcome_img_path + "play-btn.png", alt="Watch button image") + p Watch Video From c9175afbb87e863ee27ef6c5703b2cc16bfe103f Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Wed, 19 Jul 2023 17:06:18 +0700 Subject: [PATCH 2/3] Update code and delete file --- practice/practice-02/src/index.pug | 18 +++---- practice/practice-02/src/layouts/welcome.pug | 51 +++++++++++++++++++ .../src/layouts/welcome/banner.pug | 12 ----- .../src/layouts/welcome/content.pug | 37 -------------- 4 files changed, 58 insertions(+), 60 deletions(-) create mode 100644 practice/practice-02/src/layouts/welcome.pug delete mode 100644 practice/practice-02/src/layouts/welcome/banner.pug delete mode 100644 practice/practice-02/src/layouts/welcome/content.pug diff --git a/practice/practice-02/src/index.pug b/practice/practice-02/src/index.pug index 3a1865c..19447ee 100644 --- a/practice/practice-02/src/index.pug +++ b/practice/practice-02/src/index.pug @@ -8,14 +8,10 @@ html(lang="en") link(rel="stylesheet", href="./styles/main.scss") title Food Hut body - .background - header.header.flex - .logo-wrapper - a.logo-link(href="javascript:void(0)") - img.logo(src="./assets/images/logo.svg", alt="Food Hut logo") - .header-content.flex - include layouts/nav-menu - section.welcome - include layouts/welcome/banner - include layouts/welcome/content - img(src=welcome_img_path + "slider.png", alt="Slider image") + header.header.flex + .logo-wrapper + a.logo-link(href="javascript:void(0)") + img.logo(src="./assets/images/logo.svg", alt="Food Hut logo") + .header-content.flex + include layouts/nav-menu + include layouts/welcome diff --git a/practice/practice-02/src/layouts/welcome.pug b/practice/practice-02/src/layouts/welcome.pug new file mode 100644 index 0000000..fd2614c --- /dev/null +++ b/practice/practice-02/src/layouts/welcome.pug @@ -0,0 +1,51 @@ +section.welcome + .welcome__banner + .welcome__banner-container + img( + src=welcome_img_path + "welcome-image-mobile.png", + alt="Welcome banner image" + ) + img( + src=welcome_img_path + "lines-background-mobile.png", + alt="Lines background" + ) + img(src=welcome_img_path + "arrow-mobile.png", alt="Arrow image") + img(src=welcome_img_path + "mint.png", alt="Mint image") + .welcome__content + .welcome__orange-image-wrapper + img(src=welcome_img_path + "orange.png", alt="Orange background image") + .welcome__text-box + .welcome__icon-container + img.welcome__love-icon( + src=welcome_img_path + "love-icon.png", + alt="Love icon" + ) + p.welcome__text-box-content People Trust us + h1.welcome__heading We're + = " " + mark serious + = " for " + mark food + = " & " + mark delivery + = "." + p.welcome__description Best cooks and best delivery guys all at your service. Hot tasty food will reach you in 60 minutes. + form.welcome__search-form(action="#") + .welcome__search-icon-wrapper + img.welcome__search-icon( + src=welcome_img_path + "search-icon.png", + alt="Search icon" + ) + input.welcome__text-input(type="text") + .welcome__button-icon-wrapper + button.welcome__submit-btn(type="submit") + img.welcome__search-icon-btn( + src=welcome_img_path + "search-icon-btn.svg", + alt="Search button image" + ) + a.btn(href="javascript:void(0)") Download App + a.welcome__watch-video-button(href="javascript:void(0)") + .welcome__watch-video-wrapper + img(src=welcome_img_path + "play-btn.png", alt="Watch button image") + p Watch Video + img(src=welcome_img_path + "slider.png", alt="Slider image") diff --git a/practice/practice-02/src/layouts/welcome/banner.pug b/practice/practice-02/src/layouts/welcome/banner.pug deleted file mode 100644 index 925755e..0000000 --- a/practice/practice-02/src/layouts/welcome/banner.pug +++ /dev/null @@ -1,12 +0,0 @@ -.welcome__banner - .welcome__banner-container - img( - src=welcome_img_path + "welcome-image-mobile.png", - alt="Welcome banner image" - ) - img( - src=welcome_img_path + "lines-background-mobile.png", - alt="Lines background" - ) - img(src=welcome_img_path + "arrow-mobile.png", alt="Arrow image") - img(src=welcome_img_path + "mint.png", alt="Mint image") diff --git a/practice/practice-02/src/layouts/welcome/content.pug b/practice/practice-02/src/layouts/welcome/content.pug deleted file mode 100644 index 5e29a03..0000000 --- a/practice/practice-02/src/layouts/welcome/content.pug +++ /dev/null @@ -1,37 +0,0 @@ -.welcome__content - .welcome__orange-image-wrapper - img(src=welcome_img_path + "orange.png", alt="Orange background image") - .welcome__text-box - .welcome__icon-container - img.welcome__love-icon( - src=welcome_img_path + "love-icon.png", - alt="Love icon" - ) - p.welcome__text-box-content People Trust us - h1.welcome__heading We're - = " " - mark serious - = " for " - mark food - = " & " - mark delivery - = "." - p.welcome__description Best cooks and best delivery guys all at your service. Hot tasty food will reach you in 60 minutes. - form.welcome__search-form(action="#") - .welcome__search-icon-wrapper - img.welcome__search-icon( - src=welcome_img_path + "search-icon.png", - alt="Search icon" - ) - input.welcome__text-input(type="text") - .welcome__button-icon-wrapper - button.welcome__submit-btn(type="submit") - img.welcome__search-icon-btn( - src=welcome_img_path + "search-icon-btn.svg", - alt="Search button image" - ) - a.btn(href="javascript:void(0)") Download App - a.welcome__watch-video-button(href="javascript:void(0)") - .welcome__watch-video-wrapper - img(src=welcome_img_path + "play-btn.png", alt="Watch button image") - p Watch Video From dc4ac1571c352e03c8811937d6f053aa10906346 Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Wed, 19 Jul 2023 17:18:57 +0700 Subject: [PATCH 3/3] Update code --- practice/practice-02/src/index.pug | 2 -- practice/practice-02/src/layouts/welcome.pug | 8 +++++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/practice/practice-02/src/index.pug b/practice/practice-02/src/index.pug index 19447ee..9eba337 100644 --- a/practice/practice-02/src/index.pug +++ b/practice/practice-02/src/index.pug @@ -1,5 +1,3 @@ -- var welcome_img_path = "./assets/images/welcome/"; - doctype html html(lang="en") head diff --git a/practice/practice-02/src/layouts/welcome.pug b/practice/practice-02/src/layouts/welcome.pug index fd2614c..110e085 100644 --- a/practice/practice-02/src/layouts/welcome.pug +++ b/practice/practice-02/src/layouts/welcome.pug @@ -1,3 +1,5 @@ +- var welcome_img_path = "./assets/images/welcome/"; + section.welcome .welcome__banner .welcome__banner-container @@ -23,11 +25,11 @@ section.welcome p.welcome__text-box-content People Trust us h1.welcome__heading We're = " " - mark serious + span serious = " for " - mark food + span food = " & " - mark delivery + span delivery = "." p.welcome__description Best cooks and best delivery guys all at your service. Hot tasty food will reach you in 60 minutes. form.welcome__search-form(action="#")