Update code

2026-09-22 20:01:23 +00:00 · 2023-07-18 16:21:26 +07:00
parent d0a548d7b4
commit 2cd22c69f1
44 changed files with 268 additions and 117 deletions
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 8426">
+<circle id="Ellipse 43" cx="10" cy="10" r="10" fill="#F54748"/>
+<path id="Vector" d="M16.6613 7.45916C16.4441 6.97793 16.1309 6.54185 15.7392 6.17532C15.3472 5.80769 14.8851 5.51555 14.3779 5.31477C13.852 5.10575 13.288 4.99876 12.7185 5.00001C11.9195 5.00001 11.1401 5.20933 10.4627 5.60472C10.3006 5.6993 10.1467 5.80319 10.0008 5.91638C9.85495 5.80319 9.701 5.6993 9.53894 5.60472C8.86155 5.20933 8.08206 5.00001 7.28313 5.00001C6.70783 5.00001 6.15036 5.10545 5.62368 5.31477C5.11483 5.51634 4.65621 5.80629 4.26241 6.17532C3.87023 6.54143 3.55695 6.97762 3.34032 7.45916C3.11506 7.95999 3 8.49182 3 9.03916C3 9.55549 3.1102 10.0935 3.32897 10.6409C3.5121 11.0983 3.77463 11.5727 4.11008 12.0519C4.64162 12.8101 5.37249 13.6008 6.28 14.4025C7.78388 15.7313 9.27317 16.6492 9.33637 16.6864L9.72045 16.9221C9.8906 17.026 10.1094 17.026 10.2795 16.9221L10.6636 16.6864C10.7268 16.6476 12.2145 15.7313 13.72 14.4025C14.6275 13.6008 15.3584 12.8101 15.8899 12.0519C16.2254 11.5727 16.4895 11.0983 16.671 10.6409C16.8898 10.0935 17 9.55549 17 9.03916C17.0016 8.49182 16.8865 7.95999 16.6613 7.45916Z" fill="#FDC55E"/>
+</g>
+</svg>
@@ -6,9 +6,6 @@ html(lang="en")
    link(rel="stylesheet", href="./styles/main.scss")
    title Food Hut
  body
-    header.header
-      .logo-wrapper
-        a.logo-link(href="javascript:void(0)")
-          img.logo(src="./assets/images/logo.svg", alt="Food Hut logo")
-      .header-content
-        include nav-menu
+    .background
+      include layouts/header
+      include layouts/welcome
@@ -0,0 +1,6 @@
+header.header.flex.justify-content-between.mr-auto
+  .logo-wrapper
+    a.logo-link(href="javascript:void(0)")
+      img.logo(src="./assets/images/logo.svg", alt="Food Hut logo")
+  .header-content.flex.justify-content-between.h-auto
+    include nav-menu
@@ -0,0 +1,10 @@
+- var list = ["Today Special Offers", "Why FoodHut", "Our Menu", "Our Popular Food"];
+
+nav.nav.mr-auto.h-auto
+  input.toggle-menu(type="checkbox")
+  .icon-menu
+  ul.nav-list.flex.justify-content-between.h-auto.w-auto
+    each val in list
+      li.nav-item
+        a.nav-link.no-underline(href="javascrip:void(0)")= val
+a.btn.nav-download-btn.no-underline(href="javascript:void(0)") Download App
@@ -0,0 +1,3 @@
+section.welcome
+  include welcome/banner
+  include welcome/content
@@ -0,0 +1,12 @@
+- var path = "./assets/images/";
+
+.welcome__banner
+  .welcome__banner-wrapper
+    .welcome__background-banner
+      img(src=path + "background-banner.png", alt="Background banner")
+    .welcome__person-img
+      img(src="./assets/images/person.png", alt="Main character")
+    .welcome__rate-card
+      img(src="./assets/images/rate-card.png", alt="Rate card")
+    .welcome__review-card
+    img(src="./assets/images/review-card.png", alt="Review card")
@@ -0,0 +1,14 @@
+.welcome__content
+  .welcome__text-box
+    .welcome__love-icon
+      img(src="./assets/images/love-icon.svg", alt="Love icon")
+    .welcome__text People Trust us
+  .welcome__title We're serious for food & Delivery.
+  .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="javascript:void(0)")
+    input.welcome__input(type="text")
+    button(type="submit")
+      img(src="./assets/images/search-icon.png", alt="Search icon")
+  .welcome__action
+    a.btn.welcome__button-download(href="javascript:void(0)") Download App
+    a.welcome__button-watch(href="javascript:void(0)") Watch Video
@@ -1,3 +0,0 @@
-mixin navItem(content)
-  li.nav-item
-    a.nav-link(href="javascrip:void(0)")= content
@@ -1,8 +0,0 @@
-nav.nav
-  input.toggle-menu(type="checkbox")
-  .icon-menu
-  ul.nav-list
-    each val in ["Today Special Offers","Why FoodHut","Our Menu","Our Popular Food"]
-      li.nav-item
-        a.nav-link(href="javascrip:void(0)")= val
-a.btn(href="javascript:void(0)") Download App
@@ -1,6 +1,5 @@
@mixin base-icon-menu {
  height: 3px;
-  width: auto;
  background: #000000;
  border-radius: 10px;
  transition: 0.3s;
@@ -0,0 +1,23 @@
+.flex {
+  display: flex;
+}
+
+.justify-content-between {
+  justify-content: space-between;
+}
+
+.mr-auto {
+  margin: auto;
+}
+
+.h-auto {
+  height: auto;
+}
+
+.w-auto {
+  width: auto;
+}
+
+.no-underline {
+  text-decoration: none;
+}
@@ -0,0 +1,143 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote {
+  &:before,
+  &:after {
+    content: "";
+    content: none;
+  }
+}
+
+q {
+  &:before,
+  &:after {
+    content: "";
+    content: none;
+  }
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
@@ -1,11 +1,17 @@
 $font-path: "../assets/fonts";

@font-face {
-  src: url("#{$font-path}/sofia-pro-regular.otf") format("opentype");
  font-family: "Sofia Pro";
+  src: url("#{$font-path}/sofia-pro-regular.woff2") format("woff2"),
+    url("#{$font-path}/sofia-pro-regular.ttf") format("truetype");
 }

@font-face {
-  src: url("#{$font-path}/inter-regular.ttf") format("truetype");
  font-family: "Inter";
+  src: url("#{$font-path}/inter-regular.woff2") format("woff2"),
+    url("#{$font-path}/inter-regular.ttf") format("truetype");
+}
+
+* {
+  font-family: $primary-font;
 }
@@ -1,54 +0,0 @@
-$background-color_1: transparent;
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  font: inherit;
-  &:before {
-    box-sizing: border-box;
-  }
-  &:after {
-    box-sizing: border-box;
-  }
-}
-img {
-  display: block;
-  max-width: 100%;
-}
-picture {
-  display: block;
-  max-width: 100%;
-}
-svg {
-  display: block;
-  max-width: 100%;
-}
-video {
-  display: block;
-  max-width: 100%;
-}
-input {
-  background-color: $background-color_1;
-  outline: none;
-}
-select {
-  background-color: $background-color_1;
-  outline: none;
-}
-textarea {
-  background-color: $background-color_1;
-  outline: none;
-}
-button {
-  cursor: pointer;
-  background-color: $background-color_1;
-  outline: none;
-  border: 0;
-}
-body {
-  min-height: 100vh;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 1;
-}
@@ -1,22 +1,10 @@
 .btn {
  align-self: center;
-  display: none;
  padding: 13px 20px;
  background-color: $primary-color;
  border-radius: 100px;
  font-size: $fs-md;
  color: $white;
-  text-decoration: none;
  white-space: nowrap;
  transition: 0.2s;
 }
-
-@media screen and (min-width: 840px) {
-  .btn {
-    display: block;
-
-    &:hover {
-      background-color: $secondary-color;
-    }
-  }
-}
@@ -1,29 +1,31 @@
+$width-icon-menu: 36px;
+
 .icon-menu {
  @include base-icon-menu;

  position: relative;
-  top: 27px;
-  width: 36px;
+  width: $width-icon-menu;
  cursor: pointer;

  &:before {
    @include icon-menu;

    top: -10px;
-    width: 36px;
+    width: $width-icon-menu;
  }

  &:after {
    @include icon-menu;

    top: 10px;
-    width: 36px;
+    width: $width-icon-menu;
  }
 }

 .toggle-menu {
  position: absolute;
-  top: 40px;
+  top: 46px;
+  right: 21px;
  width: 36px;
  height: 27px;
  cursor: pointer;
@@ -46,7 +48,7 @@
 }

 .toggle-menu:checked ~ .nav-list {
-  right: 0px;
+  right: 0;
 }

@media screen and (min-width: 840px) {
@@ -1,11 +1,9 @@
 .header {
  position: relative;
-  display: flex;
-  justify-content: space-between;
+  align-items: center;
  max-width: $max-width;
  min-width: $min-width;
  padding: 24px;
-  margin: auto;
 }

@media screen and (min-width: 840px) {
@@ -16,11 +14,8 @@
  }

  .header-content {
-    display: flex;
-    justify-content: space-between;
    gap: 10px;
    width: 100%;
    max-width: 918px;
-    height: auto;
  }
 }
@@ -1,19 +1,23 @@
 .nav-list {
+  flex-direction: column;
  list-style: none;
  transition: 0.1s;
  position: fixed;
  border: 2px solid $primary-color;
-  top: 0px;
+  top: 0;
  right: -300px;
-  width: auto;
-  height: auto;
-  margin-top: 80px;
+  margin-top: 105px;
  margin-right: 10px;
-  z-index: 2;
+  margin-left: 10px;
+  background-color: $white;
+}
+
+.nav-download-btn {
+  display: none;
 }

 .nav-item {
-  font-size: 14px;
+  font-size: $fs-xx-sm;
  padding: 14px;
  border-bottom: 1px solid $black;

@@ -27,29 +31,33 @@
 }

 .nav-link {
-  text-decoration: none;
  color: $black;
 }

@media screen and (min-width: 840px) {
  .nav {
-    margin: auto;
    width: 100%;
-    height: auto;
+  }
+
+  .nav-download-btn {
+    display: block;
+
+    &:hover {
+      background-color: $secondary-color;
+    }
  }

  .nav-list {
    position: unset;
-    display: flex;
-    justify-content: space-between;
+    flex-direction: row;
    border: none;
-    margin: auto;
    max-width: 600px;
+    margin: unset;
  }

  .nav-item {
    border-bottom: none;
-    padding: 0px;
+    padding: 0;

    &:hover {
      background-color: unset;
@@ -3,18 +3,15 @@
@import "./abstracts/variables";

 // Bases
+@import "./bases/base";
@import "./bases/typography";
-@import "./bases/reset.scss";
+@import "./bases/reset";

 // Components
@import "./components/button";
-@import "./components/menu-button";
+@import "./components/toggle-menu";
@import "./components/logo";

 // Layouts
@import "./layouts/navbar";
@import "./layouts/header";
-
-* {
-  font-family: $primary-font;
-}