From 5db7949e3398cc1e035656c6dfb9ba94e0f2fb80 Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Wed, 19 Jul 2023 16:16:25 +0700 Subject: [PATCH] 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