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 f6f5849..0000000 Binary files a/practice/practice-02/src/assets/images/welcome/search-btn.png and /dev/null differ diff --git a/practice/practice-02/src/assets/images/welcome/search-icon-btn.svg b/practice/practice-02/src/assets/images/welcome/search-icon-btn.svg new file mode 100644 index 0000000..3f461c2 --- /dev/null +++ b/practice/practice-02/src/assets/images/welcome/search-icon-btn.svg @@ -0,0 +1,5 @@ + + + + + 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..9eba337 100644 --- a/practice/practice-02/src/index.pug +++ b/practice/practice-02/src/index.pug @@ -11,4 +11,5 @@ html(lang="en") 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 + include layouts/nav-menu + include layouts/welcome 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.pug b/practice/practice-02/src/layouts/welcome.pug new file mode 100644 index 0000000..110e085 --- /dev/null +++ b/practice/practice-02/src/layouts/welcome.pug @@ -0,0 +1,53 @@ +- var welcome_img_path = "./assets/images/welcome/"; + +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 + = " " + span serious + = " for " + span food + = " & " + 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="#") + .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")