diff --git a/.gitignore b/.gitignore
index 71af972..dd6ee56 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,5 @@
-dist
+.parcel-cache
node_modules
-.parcel
\ No newline at end of file
+dist
\ No newline at end of file
diff --git a/.parcel-cache/0bfcabde0dbcd037 b/.parcel-cache/0bfcabde0dbcd037
deleted file mode 100644
index ca1b550..0000000
Binary files a/.parcel-cache/0bfcabde0dbcd037 and /dev/null differ
diff --git a/.parcel-cache/111fa517def971cc b/.parcel-cache/111fa517def971cc
deleted file mode 100644
index 2a8bca6..0000000
Binary files a/.parcel-cache/111fa517def971cc and /dev/null differ
diff --git a/.parcel-cache/3561170c4a119370 b/.parcel-cache/3561170c4a119370
deleted file mode 100644
index 280ebc3..0000000
Binary files a/.parcel-cache/3561170c4a119370 and /dev/null differ
diff --git a/.parcel-cache/41357bd729edb548 b/.parcel-cache/41357bd729edb548
deleted file mode 100644
index f6f5849..0000000
Binary files a/.parcel-cache/41357bd729edb548 and /dev/null differ
diff --git a/.parcel-cache/6a87ec45c573ce0a b/.parcel-cache/6a87ec45c573ce0a
deleted file mode 100644
index d94592a..0000000
Binary files a/.parcel-cache/6a87ec45c573ce0a and /dev/null differ
diff --git a/.parcel-cache/8a2534fa30898aa7 b/.parcel-cache/8a2534fa30898aa7
deleted file mode 100644
index 8d4eebf..0000000
Binary files a/.parcel-cache/8a2534fa30898aa7 and /dev/null differ
diff --git a/.parcel-cache/data.mdb b/.parcel-cache/data.mdb
index fc161b4..134b329 100644
Binary files a/.parcel-cache/data.mdb and b/.parcel-cache/data.mdb differ
diff --git a/.parcel-cache/e68b24a92e9bec1a b/.parcel-cache/e68b24a92e9bec1a
deleted file mode 100644
index 7b56957..0000000
Binary files a/.parcel-cache/e68b24a92e9bec1a and /dev/null differ
diff --git a/.parcel-cache/lock.mdb b/.parcel-cache/lock.mdb
index e6c0c5a..c0b60bc 100644
Binary files a/.parcel-cache/lock.mdb and b/.parcel-cache/lock.mdb differ
diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index 9fb01bb..0000000
--- a/.prettierrc
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "bracketSameLine": false,
- "bracketSpacing": true,
- "embeddedLanguageFormatting": "auto",
- "printWidth": 120,
- "tabWidth": 2
-}
diff --git a/package-lock.json b/package-lock.json
index e4fe1b7..0567e8b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2211,9 +2211,9 @@
}
},
"node_modules/caniuse-lite": {
- "version": "1.0.30001516",
- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001516.tgz",
- "integrity": "sha512-Wmec9pCBY8CWbmI4HsjBeQLqDTqV91nFVR83DnZpYyRnPI1wePDsTg0bGLPC5VU/3OIZV1fmxEea1b+tFKe86g==",
+ "version": "1.0.30001515",
+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001515.tgz",
+ "integrity": "sha512-eEFDwUOZbE24sb+Ecsx3+OvNETqjWIdabMy52oOkIgcUtAsQifjUG9q4U9dgTHJM2mfk4uEPxc0+xuFdJ629QA==",
"dev": true,
"funding": [
{
@@ -2596,9 +2596,9 @@
"dev": true
},
"node_modules/electron-to-chromium": {
- "version": "1.4.461",
- "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.461.tgz",
- "integrity": "sha512-1JkvV2sgEGTDXjdsaQCeSwYYuhLRphRpc+g6EHTFELJXEiznLt3/0pZ9JuAOQ5p2rI3YxKTbivtvajirIfhrEQ==",
+ "version": "1.4.459",
+ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.459.tgz",
+ "integrity": "sha512-XXRS5NFv8nCrBL74Rm3qhJjA2VCsRFx0OjHKBMPI0otij56aun8UWiKTDABmd5/7GTR021pA4wivs+Ri6XCElg==",
"dev": true
},
"node_modules/entities": {
diff --git a/src/assets/fonts/inter-regular.ttf b/src/assets/fonts/inter-regular.ttf
deleted file mode 100644
index 8d4eebf..0000000
Binary files a/src/assets/fonts/inter-regular.ttf and /dev/null differ
diff --git a/src/assets/fonts/inter-regular.woff2 b/src/assets/fonts/inter-regular.woff2
deleted file mode 100644
index d94592a..0000000
Binary files a/src/assets/fonts/inter-regular.woff2 and /dev/null differ
diff --git a/src/assets/fonts/inter.ttf b/src/assets/fonts/inter.ttf
new file mode 100644
index 0000000..ec3164e
Binary files /dev/null and b/src/assets/fonts/inter.ttf differ
diff --git a/src/assets/fonts/inter.woff2 b/src/assets/fonts/inter.woff2
new file mode 100644
index 0000000..350bbbc
Binary files /dev/null and b/src/assets/fonts/inter.woff2 differ
diff --git a/src/assets/fonts/sofia-pro-bold.ttf b/src/assets/fonts/sofia-pro-bold.ttf
new file mode 100644
index 0000000..14b7899
Binary files /dev/null and b/src/assets/fonts/sofia-pro-bold.ttf differ
diff --git a/src/assets/fonts/sofia-pro-bold.woff2 b/src/assets/fonts/sofia-pro-bold.woff2
new file mode 100644
index 0000000..56d881b
Binary files /dev/null and b/src/assets/fonts/sofia-pro-bold.woff2 differ
diff --git a/src/assets/fonts/sofia-pro-medium.ttf b/src/assets/fonts/sofia-pro-medium.ttf
new file mode 100644
index 0000000..0a891eb
Binary files /dev/null and b/src/assets/fonts/sofia-pro-medium.ttf differ
diff --git a/src/assets/fonts/sofia-pro-medium.woff2 b/src/assets/fonts/sofia-pro-medium.woff2
new file mode 100644
index 0000000..03e4a1d
Binary files /dev/null and b/src/assets/fonts/sofia-pro-medium.woff2 differ
diff --git a/src/assets/fonts/sofia-pro-semi-bold.ttf b/src/assets/fonts/sofia-pro-semi-bold.ttf
new file mode 100644
index 0000000..93dcfad
Binary files /dev/null and b/src/assets/fonts/sofia-pro-semi-bold.ttf differ
diff --git a/src/assets/fonts/sofia-pro-semi-bold.woff2 b/src/assets/fonts/sofia-pro-semi-bold.woff2
new file mode 100644
index 0000000..7217441
Binary files /dev/null and b/src/assets/fonts/sofia-pro-semi-bold.woff2 differ
diff --git a/src/assets/images/background-banner.png b/src/assets/images/background-banner.png
deleted file mode 100644
index 280ebc3..0000000
Binary files a/src/assets/images/background-banner.png and /dev/null differ
diff --git a/src/assets/images/food-1.png b/src/assets/images/food-1.png
deleted file mode 100644
index 89fedb2..0000000
Binary files a/src/assets/images/food-1.png and /dev/null differ
diff --git a/src/assets/images/food-2.png b/src/assets/images/food-2.png
deleted file mode 100644
index 5e68611..0000000
Binary files a/src/assets/images/food-2.png and /dev/null differ
diff --git a/src/assets/images/food-3.png b/src/assets/images/food-3.png
deleted file mode 100644
index 6e9684b..0000000
Binary files a/src/assets/images/food-3.png and /dev/null differ
diff --git a/src/assets/images/food-4.png b/src/assets/images/food-4.png
deleted file mode 100644
index 0b2fd84..0000000
Binary files a/src/assets/images/food-4.png and /dev/null differ
diff --git a/src/assets/images/love-icon.svg b/src/assets/images/love-icon.svg
deleted file mode 100644
index 9f9c091..0000000
--- a/src/assets/images/love-icon.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
diff --git a/src/assets/images/person.png b/src/assets/images/person.png
deleted file mode 100644
index 7b56957..0000000
Binary files a/src/assets/images/person.png and /dev/null differ
diff --git a/src/assets/images/rate-card.png b/src/assets/images/rate-card.png
deleted file mode 100644
index ca1b550..0000000
Binary files a/src/assets/images/rate-card.png and /dev/null differ
diff --git a/src/assets/images/review-card.png b/src/assets/images/review-card.png
deleted file mode 100644
index 2a8bca6..0000000
Binary files a/src/assets/images/review-card.png and /dev/null differ
diff --git a/src/assets/images/search-icon.png b/src/assets/images/search-icon.png
deleted file mode 100644
index f6f5849..0000000
Binary files a/src/assets/images/search-icon.png and /dev/null differ
diff --git a/src/assets/images/welcome/arrow-desktop-2.png b/src/assets/images/welcome/arrow-desktop-2.png
new file mode 100644
index 0000000..a26d2d8
Binary files /dev/null and b/src/assets/images/welcome/arrow-desktop-2.png differ
diff --git a/src/assets/images/welcome/arrow-desktop.png b/src/assets/images/welcome/arrow-desktop.png
new file mode 100644
index 0000000..e6d43b7
Binary files /dev/null and b/src/assets/images/welcome/arrow-desktop.png differ
diff --git a/src/assets/images/welcome/arrow-mobile.png b/src/assets/images/welcome/arrow-mobile.png
new file mode 100644
index 0000000..7646c20
Binary files /dev/null and b/src/assets/images/welcome/arrow-mobile.png differ
diff --git a/src/assets/images/welcome/head-arrow.png b/src/assets/images/welcome/head-arrow.png
new file mode 100644
index 0000000..0690b5a
Binary files /dev/null and b/src/assets/images/welcome/head-arrow.png differ
diff --git a/src/assets/images/welcome/lines-background-desktop.png b/src/assets/images/welcome/lines-background-desktop.png
new file mode 100644
index 0000000..c2a863c
Binary files /dev/null and b/src/assets/images/welcome/lines-background-desktop.png differ
diff --git a/src/assets/images/welcome/lines-background-mobile.png b/src/assets/images/welcome/lines-background-mobile.png
new file mode 100644
index 0000000..0b3c964
Binary files /dev/null and b/src/assets/images/welcome/lines-background-mobile.png differ
diff --git a/src/assets/images/welcome/love-icon.png b/src/assets/images/welcome/love-icon.png
new file mode 100644
index 0000000..3912543
Binary files /dev/null and b/src/assets/images/welcome/love-icon.png differ
diff --git a/src/assets/images/welcome/mint.png b/src/assets/images/welcome/mint.png
new file mode 100644
index 0000000..a686fc9
Binary files /dev/null and b/src/assets/images/welcome/mint.png differ
diff --git a/src/assets/images/welcome/orange-desktop.png b/src/assets/images/welcome/orange-desktop.png
new file mode 100644
index 0000000..33ceed0
Binary files /dev/null and b/src/assets/images/welcome/orange-desktop.png differ
diff --git a/src/assets/images/welcome/orange.png b/src/assets/images/welcome/orange.png
new file mode 100644
index 0000000..a621f55
Binary files /dev/null and b/src/assets/images/welcome/orange.png differ
diff --git a/src/assets/images/welcome/play-icon.svg b/src/assets/images/welcome/play-icon.svg
new file mode 100644
index 0000000..0d78f2e
--- /dev/null
+++ b/src/assets/images/welcome/play-icon.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/images/welcome/search-icon-btn.svg b/src/assets/images/welcome/search-icon-btn.svg
new file mode 100644
index 0000000..3f461c2
--- /dev/null
+++ b/src/assets/images/welcome/search-icon-btn.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/assets/images/welcome/search-icon.png b/src/assets/images/welcome/search-icon.png
new file mode 100644
index 0000000..3aafe91
Binary files /dev/null and b/src/assets/images/welcome/search-icon.png differ
diff --git a/src/assets/images/welcome/slider.png b/src/assets/images/welcome/slider.png
new file mode 100644
index 0000000..7e5aae4
Binary files /dev/null and b/src/assets/images/welcome/slider.png differ
diff --git a/src/assets/images/welcome/underline.png b/src/assets/images/welcome/underline.png
new file mode 100644
index 0000000..c01e5dd
Binary files /dev/null and b/src/assets/images/welcome/underline.png differ
diff --git a/src/assets/images/welcome/welcome-image-desktop.png b/src/assets/images/welcome/welcome-image-desktop.png
new file mode 100644
index 0000000..fb14277
Binary files /dev/null and b/src/assets/images/welcome/welcome-image-desktop.png differ
diff --git a/src/assets/images/welcome/welcome-image-mobile.png b/src/assets/images/welcome/welcome-image-mobile.png
new file mode 100644
index 0000000..93b0bc8
Binary files /dev/null and b/src/assets/images/welcome/welcome-image-mobile.png differ
diff --git a/src/includes/mixins.pug b/src/includes/mixins.pug
new file mode 100644
index 0000000..e69de29
diff --git a/src/index.pug b/src/index.pug
index 44cb50e..9eba337 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -6,6 +6,10 @@ html(lang="en")
link(rel="stylesheet", href="./styles/main.scss")
title Food Hut
body
- .background
- include layouts/header
- include layouts/welcome
+ 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/src/layouts/header.pug b/src/layouts/header.pug
deleted file mode 100644
index 5393d61..0000000
--- a/src/layouts/header.pug
+++ /dev/null
@@ -1,6 +0,0 @@
-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
diff --git a/src/layouts/nav-menu.pug b/src/layouts/nav-menu.pug
index bdce33c..5ffe22f 100644
--- a/src/layouts/nav-menu.pug
+++ b/src/layouts/nav-menu.pug
@@ -1,10 +1,10 @@
- var list = ["Today Special Offers", "Why FoodHut", "Our Menu", "Our Popular Food"];
-nav.nav.mr-auto.h-auto
+nav.nav
input.toggle-menu(type="checkbox")
.icon-menu
- ul.nav-list.flex.justify-content-between.h-auto.w-auto
+ ul.nav-list
each val in list
li.nav-item
- a.nav-link.no-underline(href="javascrip:void(0)")= val
+ a.nav-link.no-underline(href="javascript:void(0)")= val
a.btn.nav-download-btn.no-underline(href="javascript:void(0)") Download App
diff --git a/src/layouts/welcome.pug b/src/layouts/welcome.pug
index 7d96929..5a9fc61 100644
--- a/src/layouts/welcome.pug
+++ b/src/layouts/welcome.pug
@@ -1,3 +1,100 @@
+- var welcome_img_path = "./assets/images/welcome/";
+
section.welcome
- include welcome/banner
- include welcome/content
+ .welcome__banner
+ .welcome__banner-container
+ img.welcome__banner-img(
+ src=welcome_img_path + "welcome-image-mobile.png",
+ alt="Welcome banner image"
+ )
+ picture
+ source(
+ media="(min-width: 840px)",
+ srcset=welcome_img_path + "lines-background-desktop.png"
+ )
+ img.welcome__lines-background(
+ src=welcome_img_path + "lines-background-mobile.png",
+ alt="Lines background"
+ )
+ picture
+ source(
+ media="(min-width: 840px)",
+ srcset=welcome_img_path + "arrow-desktop.png",
+ alt="Arrow image"
+ )
+ img.welcome__arrow-img-up(
+ src=welcome_img_path + "arrow-mobile.png",
+ alt="Arrow image"
+ )
+ img.welcome__mint-img(
+ src=welcome_img_path + "mint.png",
+ alt="Mint image"
+ )
+ .welcome__content
+ .welcome__arrow-down-img-wrapper
+ img.welcome__arrow-img-down(
+ src=welcome_img_path + "arrow-desktop-2.png",
+ alt="Arrow image down"
+ )
+ .welcome__orange-img-wrapper
+ picture
+ source(
+ media="(min-width: 840px)",
+ srcset=welcome_img_path + "orange-desktop.png"
+ )
+ 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"
+ )
+ .welcome__head-arrow-container
+ img(src=welcome_img_path + "head-arrow.png", alt="Head arrow image")
+ p.welcome__text-box-content People Trust us
+ h1.welcome__heading We're
+ = " "
+ span.primary-text serious
+ = " for "
+ span.primary-text food
+ = " & "
+ .delivery-text-box
+ span.secondary-text delivery
+ .welcome__underline-img-container
+ img(src=welcome_img_path + "underline.png", alt="Underline image")
+ = "."
+
+ 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", placeholder="Search food")
+ button.welcome__submit-btn(type="submit")
+ img.welcome__search-icon-btn(
+ src=welcome_img_path + "search-icon-btn.svg",
+ alt="Search button image"
+ )
+ .welcome__action-container
+ a.welcome__download-btn.btn(href="javascript:void(0)") Download App
+ a.welcome__watch-video-link.no-underline(href="javascript:void(0)")
+ .welcome__play-icon-wrapper
+ svg.welcome__play-icon(
+ width="12",
+ height="12",
+ viewBox="0 0 12 13",
+ fill="none",
+ xmlns="http://www.w3.org/2000/svg"
+ )
+ path(
+ d="M12 6.5L0.749999 12.9952L0.75 0.00480889L12 6.5Z",
+ fill="currentColor"
+ )
+ span.welcome__text-download-btn Watch Video
+ .welcome__slider-container
+ img.welcome__slider-img(
+ src=welcome_img_path + "slider.png",
+ alt="Slider image"
+ )
diff --git a/src/layouts/welcome/banner.pug b/src/layouts/welcome/banner.pug
deleted file mode 100644
index 47524d3..0000000
--- a/src/layouts/welcome/banner.pug
+++ /dev/null
@@ -1,12 +0,0 @@
-- 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")
diff --git a/src/layouts/welcome/content.pug b/src/layouts/welcome/content.pug
deleted file mode 100644
index 66a5a1c..0000000
--- a/src/layouts/welcome/content.pug
+++ /dev/null
@@ -1,14 +0,0 @@
-.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
diff --git a/src/styles/abstracts/_mixins.scss b/src/styles/abstracts/_mixins.scss
index 13db803..52ff198 100644
--- a/src/styles/abstracts/_mixins.scss
+++ b/src/styles/abstracts/_mixins.scss
@@ -1,5 +1,6 @@
@mixin base-icon-menu {
- height: 3px;
+ @include size(36px, 3px);
+
background: #000000;
border-radius: 10px;
transition: 0.3s;
@@ -12,3 +13,62 @@
position: absolute;
right: 0;
}
+
+@mixin flex-container(
+ $justify-content: null,
+ $flex-direction: null,
+ $align-items: null,
+ $gap: null
+) {
+ display: flex;
+ @if $justify-content != null {
+ justify-content: $justify-content;
+ }
+
+ @if $flex-direction != null {
+ flex-direction: $flex-direction;
+ }
+
+ @if $align-items != null {
+ align-items: $align-items;
+ }
+
+ @if $gap != null {
+ gap: $gap;
+ }
+}
+
+@mixin size($width: null, $height: null) {
+ @if $width != null {
+ width: $width;
+ }
+
+ @if $height != null {
+ height: $height;
+ }
+}
+
+@mixin setAbsoluteAndLocation(
+ $top: null,
+ $left: null,
+ $right: null,
+ $bottom: null
+) {
+ position: absolute;
+
+ @if $top != null {
+ top: $top;
+ }
+
+ @if $left != null {
+ left: $left;
+ }
+
+ @if $right != null {
+ right: $right;
+ }
+
+ @if $bottom != null {
+ bottom: $bottom;
+ }
+}
diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
index e2baab0..ea34243 100644
--- a/src/styles/abstracts/_variables.scss
+++ b/src/styles/abstracts/_variables.scss
@@ -4,6 +4,7 @@ $secondary-font: "Inter";
// Color
$black: #000;
$white: #fff;
+$gray: #686d77;
$primary-color: #f54748;
$secondary-color: #fdc55e;
@@ -12,6 +13,7 @@ $fs-xx-sm: 14px;
$fs-x-sm: 16px;
$fs-sm: 17px;
$fs-md: 18px;
+$fs-x-md: 20px;
$fs-lg: 24px;
$fs-x-lg: 48px;
$fs-xx-lg: 58px;
diff --git a/src/styles/bases/_base.scss b/src/styles/bases/_base.scss
index 4015254..926044f 100644
--- a/src/styles/bases/_base.scss
+++ b/src/styles/bases/_base.scss
@@ -1,23 +1,11 @@
-.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;
}
+
+.primary-text {
+ color: $primary-color;
+}
+
+.secondary-text {
+ color: $secondary-color;
+}
diff --git a/src/styles/bases/_typography.scss b/src/styles/bases/_typography.scss
index 04cb1af..e337b24 100644
--- a/src/styles/bases/_typography.scss
+++ b/src/styles/bases/_typography.scss
@@ -4,12 +4,34 @@ $font-path: "../assets/fonts";
font-family: "Sofia Pro";
src: url("#{$font-path}/sofia-pro-regular.woff2") format("woff2"),
url("#{$font-path}/sofia-pro-regular.ttf") format("truetype");
+ font-weight: 400;
+}
+
+@font-face {
+ font-family: "Sofia Pro";
+ src: url("#{$font-path}/sofia-pro-medium.woff2") format("woff2"),
+ url("#{$font-path}/sofia-pro-medium.ttf") format("truetype");
+ font-weight: 600;
+}
+
+@font-face {
+ font-family: "Sofia Pro";
+ src: url("#{$font-path}/sofia-pro-semi-bold.woff2") format("woff2"),
+ url("#{$font-path}/sofia-pro-semi-bold.ttf") format("truetype");
+ font-weight: 700;
+}
+
+@font-face {
+ font-family: "Sofia Pro";
+ src: url("#{$font-path}/sofia-pro-bold.woff2") format("woff2"),
+ url("#{$font-path}/sofia-pro-bold.ttf") format("truetype");
+ font-weight: 900;
}
@font-face {
font-family: "Inter";
- src: url("#{$font-path}/inter-regular.woff2") format("woff2"),
- url("#{$font-path}/inter-regular.ttf") format("truetype");
+ src: url("#{$font-path}/inter.woff2") format("woff2"),
+ url("#{$font-path}/inter.ttf") format("truetype");
}
* {
diff --git a/src/styles/components/_button.scss b/src/styles/components/_button.scss
index 7224562..229e758 100644
--- a/src/styles/components/_button.scss
+++ b/src/styles/components/_button.scss
@@ -7,4 +7,5 @@
color: $white;
white-space: nowrap;
transition: 0.2s;
+ text-decoration: none;
}
diff --git a/src/styles/components/_logo.scss b/src/styles/components/_logo.scss
index aae8812..637f73e 100644
--- a/src/styles/components/_logo.scss
+++ b/src/styles/components/_logo.scss
@@ -1,11 +1,11 @@
.logo-wrapper {
- width: 121px;
- height: 78px;
+ @include size(121px, 78px);
+
flex-shrink: 0;
}
.logo-link {
+ @include size(100%, 100%);
+
display: inline-block;
- width: 100%;
- height: 100%;
}
diff --git a/src/styles/components/_toggle-menu.scss b/src/styles/components/_toggle-menu.scss
index 98a1b78..57cd366 100644
--- a/src/styles/components/_toggle-menu.scss
+++ b/src/styles/components/_toggle-menu.scss
@@ -1,33 +1,28 @@
-$width-icon-menu: 36px;
-
.icon-menu {
@include base-icon-menu;
position: relative;
- width: $width-icon-menu;
cursor: pointer;
&:before {
@include icon-menu;
top: -10px;
- width: $width-icon-menu;
}
&:after {
@include icon-menu;
top: 10px;
- width: $width-icon-menu;
}
}
.toggle-menu {
+ @include size(36px, 27px);
+
position: absolute;
top: 46px;
right: 21px;
- width: 36px;
- height: 27px;
cursor: pointer;
z-index: 1;
opacity: 0;
@@ -48,7 +43,7 @@ $width-icon-menu: 36px;
}
.toggle-menu:checked ~ .nav-list {
- right: 0;
+ display: block;
}
@media screen and (min-width: 840px) {
diff --git a/src/styles/layouts/_header.scss b/src/styles/layouts/_header.scss
index afc2d28..4166abe 100644
--- a/src/styles/layouts/_header.scss
+++ b/src/styles/layouts/_header.scss
@@ -1,21 +1,30 @@
.header {
+ @include flex-container(space-between, $align-items: center);
+
position: relative;
- align-items: center;
- max-width: $max-width;
+ max-width: 428px;
min-width: $min-width;
padding: 24px;
+ margin: auto;
+}
+
+.header-content {
+ @include flex-container(space-between);
}
@media screen and (min-width: 840px) {
.header {
padding-top: 32px;
- padding-inline: 24px;
+ padding-left: 70px;
+ padding-right: 61px;
gap: 10px;
+ max-width: 1309px;
}
.header-content {
+ @include size(100%, auto);
+
gap: 10px;
- width: 100%;
max-width: 918px;
}
}
diff --git a/src/styles/layouts/_navbar.scss b/src/styles/layouts/_navbar.scss
index bacec67..ae65128 100644
--- a/src/styles/layouts/_navbar.scss
+++ b/src/styles/layouts/_navbar.scss
@@ -1,19 +1,21 @@
.nav-list {
- flex-direction: column;
+ @include size(max-content, auto);
+
+ display: none;
list-style: none;
transition: 0.1s;
- position: fixed;
+ position: absolute;
border: 2px solid $primary-color;
- top: 0;
- right: -300px;
- margin-top: 105px;
- margin-right: 10px;
- margin-left: 10px;
+ top: 100px;
+ right: 25px;
background-color: $white;
+ z-index: 2;
}
.nav-download-btn {
display: none;
+
+ z-index: 1;
}
.nav-item {
@@ -36,7 +38,9 @@
@media screen and (min-width: 840px) {
.nav {
- width: 100%;
+ @include size(100%, auto);
+
+ margin: auto;
}
.nav-download-btn {
@@ -48,6 +52,9 @@
}
.nav-list {
+ @include size(auto, auto);
+ @include flex-container(space-between, column);
+
position: unset;
flex-direction: row;
border: none;
diff --git a/src/styles/layouts/_welcome.scss b/src/styles/layouts/_welcome.scss
new file mode 100644
index 0000000..bacace0
--- /dev/null
+++ b/src/styles/layouts/_welcome.scss
@@ -0,0 +1,310 @@
+.delivery-text-box {
+ position: relative;
+ display: inline-block;
+}
+
+.welcome {
+ @include flex-container(center, column);
+ margin: auto;
+ max-width: 428px;
+
+ // Start banner
+ &__banner-container {
+ @include size(428px, auto);
+ @include flex-container(center, column);
+
+ position: relative;
+ }
+
+ &__banner-img {
+ z-index: 1;
+ }
+
+ &__lines-background {
+ @include setAbsoluteAndLocation($top: -76px, $right: 0);
+ @include size(187px, 430px);
+ }
+
+ &__arrow-img-up {
+ @include setAbsoluteAndLocation($top: -15px, $right: 50px);
+
+ @include size(43px, 215px);
+ }
+
+ &__mint-img {
+ @include setAbsoluteAndLocation($bottom: 100px, $right: 0);
+ }
+ // End banner
+
+ // Start content
+ &__content {
+ @include flex-container($flex-direction: column);
+ @include size(calc(428px - 48px), auto);
+
+ position: relative;
+ padding-top: 63.37px;
+ padding-inline: 24px;
+ }
+
+ &__arrow-down-img-wrapper {
+ display: none;
+ }
+
+ &__orange-img-wrapper {
+ @include setAbsoluteAndLocation($top: 0, $right: 35px);
+ }
+
+ &__text-box {
+ @include flex-container($align-items: center, $gap: 6px);
+ @include size(fit-content);
+
+ background-color: #feeae9;
+ border-radius: 100px;
+ padding: 6px;
+ font-size: $fs-xx-sm;
+ }
+
+ &__text-box-content {
+ font-family: $secondary-font;
+ }
+
+ &__icon-container {
+ @include size(20px, 20px);
+ }
+
+ &__love-icon {
+ @include size(100%, 100%);
+ }
+
+ &__head-arrow-container {
+ @include size(13px, 7.3px);
+ @include setAbsoluteAndLocation($right: 107px);
+ }
+
+ &__heading {
+ margin-top: 20px;
+ font-size: $fs-x-lg;
+ text-transform: capitalize;
+ font-weight: 900;
+ max-width: 530px;
+ }
+
+ &__underline-img-container {
+ @include setAbsoluteAndLocation($bottom: -20px, $left: 0px);
+ }
+
+ &__description {
+ margin-top: 35px;
+ font-size: $fs-x-md;
+ line-height: 140%;
+ letter-spacing: -0.2px;
+ max-width: 517px;
+ }
+
+ &__search-form {
+ @include flex-container();
+
+ margin-top: 32px;
+ border-radius: 100px;
+ border: 0.5px solid $black;
+ max-width: 471px;
+ }
+
+ &__search-icon-wrapper {
+ @include size(24px, 24px);
+
+ padding: 14px;
+ }
+
+ &__text-input {
+ @include size(100%, auto);
+
+ font-size: $fs-md;
+ border: none;
+
+ &:focus {
+ outline: none;
+ }
+ }
+
+ &__submit-btn {
+ @include size(42px, 42px);
+
+ background-color: #fdc55e;
+ border-radius: 100px;
+ border: none;
+ padding: 9px;
+ margin: 5px 4px;
+ cursor: pointer;
+
+ &:hover {
+ background-color: #f7d699;
+ transition: 0.2s;
+ }
+ }
+
+ &__action-container {
+ @include flex-container($gap: 31px);
+ margin-top: 44px;
+ }
+
+ &__watch-video-link {
+ @include flex-container($align-items: center, $gap: 21px);
+
+ position: relative;
+
+ &:hover {
+ .welcome__play-icon-wrapper {
+ width: 100%;
+ background-color: $secondary-color;
+ }
+
+ .welcome__text-download-btn {
+ color: $white;
+ }
+ }
+ }
+
+ &__play-icon {
+ color: $primary-color;
+ }
+
+ &__play-icon-wrapper {
+ @include size(12px, 17px);
+ position: absolute;
+ padding: 17.5px 20px;
+ border-radius: 50px;
+ background-color: $white;
+ box-shadow: 0 40px 50px 3px rgba($color: $primary-color, $alpha: 0.5);
+ transition: width 0.5s;
+ }
+
+ &__text-download-btn {
+ color: $gray;
+ font-size: $fs-sm;
+ margin-left: 70px;
+ transition: 0.5s;
+ z-index: 1;
+ }
+
+ &__download-btn:hover {
+ background-color: $secondary-color;
+ transition: 0.2s;
+ }
+
+ &__slider-container {
+ display: none;
+ }
+ // End content
+}
+
+.slider-container {
+ display: none;
+}
+
+@media screen and (min-width: 840px) {
+ .welcome {
+ @include flex-container(
+ $flex-direction: row-reverse,
+ $align-items: center,
+ $justify-content: space-between
+ );
+
+ padding-top: 20px;
+ width: 100%;
+ max-width: $max-width;
+
+ // Start banner
+ &__banner-img {
+ @include size(100%, 100%);
+
+ max-width: 650px;
+ }
+
+ &__lines-background {
+ @include setAbsoluteAndLocation($top: -150px, $right: 0px);
+ @include size(313px, 718px);
+ }
+
+ &__arrow-img-up {
+ @include size(117px, 315px);
+ @include setAbsoluteAndLocation($top: -40px, $right: 5px);
+ transition: 0.2s;
+ }
+
+ &__head-arrow-container {
+ display: none;
+ }
+
+ &__banner-container {
+ @include size(auto, auto);
+
+ max-width: 1000px;
+ min-width: 500px;
+ }
+ // End banner
+
+ // Start content
+ &__content {
+ @include size(auto, auto);
+ padding-left: 70px;
+ padding-right: 0px;
+ max-width: 560px;
+ }
+
+ &__orange-img-wrapper {
+ @include setAbsoluteAndLocation($top: 170px, $right: -50px);
+ transition: 0.2s;
+ }
+
+ &__heading {
+ font-size: $fs-xx-lg;
+ }
+
+ &__underline-img-container {
+ @include setAbsoluteAndLocation($bottom: -25px, $left: 8px);
+ }
+
+ &__description {
+ font-size: $fs-lg;
+ }
+
+ &__arrow-down-img-wrapper {
+ @include setAbsoluteAndLocation($top: -50px, $left: 220px);
+
+ display: block;
+ transition: 0.2s;
+ }
+
+ &__search-form {
+ @include size(auto, 54px);
+ }
+
+ &__slider-container {
+ display: block;
+ @include setAbsoluteAndLocation($bottom: -135px, $left: 65px);
+ }
+
+ // End content
+ }
+}
+
+@media screen and (min-width: 1200px) {
+ .welcome {
+ &__banner-container {
+ padding-right: 74px;
+ }
+
+ &__arrow-img-up {
+ @include setAbsoluteAndLocation($top: 8px, $right: 62px);
+ }
+
+ &__orange-img-wrapper {
+ @include setAbsoluteAndLocation($top: 110px, $right: -50px);
+ }
+
+ &__arrow-down-img-wrapper {
+ @include setAbsoluteAndLocation($top: -95px, $left: 230px);
+ }
+ }
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 7545e54..890d387 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -15,3 +15,4 @@
// Layouts
@import "./layouts/navbar";
@import "./layouts/header";
+@import "./layouts/welcome";