diff --git a/practice/practice-02/src/assets/fonts/poppins-medium.ttf b/practice/practice-02/src/assets/fonts/poppins-medium.ttf new file mode 100644 index 0000000..6bcdcc2 Binary files /dev/null and b/practice/practice-02/src/assets/fonts/poppins-medium.ttf differ diff --git a/practice/practice-02/src/assets/fonts/poppins-medium.woff2 b/practice/practice-02/src/assets/fonts/poppins-medium.woff2 new file mode 100644 index 0000000..406acb6 Binary files /dev/null and b/practice/practice-02/src/assets/fonts/poppins-medium.woff2 differ diff --git a/practice/practice-02/src/index.pug b/practice/practice-02/src/index.pug index 9eba337..e5f0787 100644 --- a/practice/practice-02/src/index.pug +++ b/practice/practice-02/src/index.pug @@ -6,10 +6,11 @@ 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-menu + header.header + .header-container + .logo-wrapper + a.logo-link(href="javascript:void(0)") + img.logo(src="./assets/images/logo.svg", alt="Food Hut logo") + .header-content + include layouts/nav-menu include layouts/welcome diff --git a/practice/practice-02/src/styles/abstracts/_variables.scss b/practice/practice-02/src/styles/abstracts/_variables.scss index ea34243..d3a50b3 100644 --- a/practice/practice-02/src/styles/abstracts/_variables.scss +++ b/practice/practice-02/src/styles/abstracts/_variables.scss @@ -1,5 +1,6 @@ $primary-font: "Sofia Pro"; $secondary-font: "Inter"; +$tertiary-font: "Poppins"; // Color $black: #000; diff --git a/practice/practice-02/src/styles/bases/_typography.scss b/practice/practice-02/src/styles/bases/_typography.scss index e337b24..889a589 100644 --- a/practice/practice-02/src/styles/bases/_typography.scss +++ b/practice/practice-02/src/styles/bases/_typography.scss @@ -34,6 +34,12 @@ $font-path: "../assets/fonts"; url("#{$font-path}/inter.ttf") format("truetype"); } +@font-face { + font-family: "Poppins"; + src: url("#{$font-path}/poppins-medium.woff2") format("woff2"), + url("#{$font-path}/poppins-medium.ttf") format("truetype"); +} + * { font-family: $primary-font; } diff --git a/practice/practice-02/src/styles/components/_logo.scss b/practice/practice-02/src/styles/components/_logo.scss index 637f73e..aeb0333 100644 --- a/practice/practice-02/src/styles/components/_logo.scss +++ b/practice/practice-02/src/styles/components/_logo.scss @@ -1,5 +1,9 @@ +.logo { + @include size(100%, 100%); +} + .logo-wrapper { - @include size(121px, 78px); + @include size(97px, 62px); flex-shrink: 0; } @@ -9,3 +13,9 @@ display: inline-block; } + +@media screen and (min-width: 840px) { + .logo-wrapper { + @include size(121px, 78px); + } +} diff --git a/practice/practice-02/src/styles/layouts/_header.scss b/practice/practice-02/src/styles/layouts/_header.scss index 4166abe..d795f72 100644 --- a/practice/practice-02/src/styles/layouts/_header.scss +++ b/practice/practice-02/src/styles/layouts/_header.scss @@ -1,4 +1,11 @@ .header { + @include setAbsoluteAndLocation($top: 0, $right: 0, $left: 0); + + max-width: 428px; + margin: auto; +} + +.header-container { @include flex-container(space-between, $align-items: center); position: relative; @@ -14,6 +21,10 @@ @media screen and (min-width: 840px) { .header { + max-width: $max-width; + } + + .header-container { padding-top: 32px; padding-left: 70px; padding-right: 61px; diff --git a/practice/practice-02/src/styles/layouts/_navbar.scss b/practice/practice-02/src/styles/layouts/_navbar.scss index ae65128..d349b76 100644 --- a/practice/practice-02/src/styles/layouts/_navbar.scss +++ b/practice/practice-02/src/styles/layouts/_navbar.scss @@ -60,6 +60,7 @@ border: none; max-width: 600px; margin: unset; + background-color: transparent; } .nav-item { diff --git a/practice/practice-02/src/styles/layouts/_welcome.scss b/practice/practice-02/src/styles/layouts/_welcome.scss index bacace0..f7f1e49 100644 --- a/practice/practice-02/src/styles/layouts/_welcome.scss +++ b/practice/practice-02/src/styles/layouts/_welcome.scss @@ -7,6 +7,12 @@ @include flex-container(center, column); margin: auto; max-width: 428px; + padding-top: 117px; + background: linear-gradient( + 180deg, + rgba(245, 71, 72, 0.06) 0%, + rgba(245, 71, 72, 0) 100% + ); // Start banner &__banner-container { @@ -144,8 +150,11 @@ } &__action-container { - @include flex-container($gap: 31px); + @include flex-container($justify-content: space-between); + + width: 100%; margin-top: 44px; + max-width: 376px; } &__watch-video-link { @@ -155,12 +164,12 @@ &:hover { .welcome__play-icon-wrapper { - width: 100%; - background-color: $secondary-color; + transform: scale(1.2); + transition: 0.2s; } .welcome__text-download-btn { - color: $white; + color: $primary-color; } } } @@ -182,6 +191,7 @@ &__text-download-btn { color: $gray; font-size: $fs-sm; + font-family: $tertiary-font; margin-left: 70px; transition: 0.5s; z-index: 1; @@ -210,7 +220,7 @@ $justify-content: space-between ); - padding-top: 20px; + padding-top: 130px; width: 100%; max-width: $max-width; @@ -259,6 +269,7 @@ &__heading { font-size: $fs-xx-lg; + line-height: 125%; } &__underline-img-container { @@ -269,6 +280,18 @@ font-size: $fs-lg; } + &__watch-video-link:hover { + .welcome__play-icon-wrapper { + transform: unset; + width: 100%; + background-color: $secondary-color; + } + + .welcome__text-download-btn { + color: $white; + } + } + &__arrow-down-img-wrapper { @include setAbsoluteAndLocation($top: -50px, $left: 220px);