Merge pull request #8 from Nez27/feature/welcome

Merge feature/welcome into html-css-practice-two

practice/practice-02/src/assets/images/welcome/search-icon-btn.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bx:bx-search">
+<path id="Vector" d="M10 18C11.775 17.9996 13.4988 17.4054 14.897 16.312L19.293 20.708L20.707 19.294L16.311 14.898C17.405 13.4997 17.9996 11.7754 18 10C18 5.589 14.411 2 10 2C5.589 2 2 5.589 2 10C2 14.411 5.589 18 10 18ZM10 4C13.309 4 16 6.691 16 10C16 13.309 13.309 16 10 16C6.691 16 4 13.309 4 10C4 6.691 6.691 4 10 4Z" fill="white"/>
+</g>
+</svg>

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

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")