nezumi/loi-phan-internship
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/loi-phan-internship.git synced 2026-09-22 13:38:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add style for offers UI

Browse Source
This commit is contained in:
Nezumi
2023-07-23 09:24:49 +07:00
parent efcd19046c
commit 89dfc60210
10 changed files with 257 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
practice/practice-02/src/styles/abstracts/_mixins.scss
+4 -1
View File
@@ -49,12 +49,15 @@
}
@mixin setAbsoluteAndLocation(
$absolute: false,
$top: null,
$left: null,
$right: null,
$bottom: null
) {
position: absolute;
@if $absolute {
position: absolute;
}
@if $top != null {
top: $top;
practice/practice-02/src/styles/abstracts/_variables.scss
+2 -1
View File
@@ -1,8 +1,9 @@
$primary-font: "Sofia Pro";
$secondary-font: "Inter";
$tertiary-font: "Poppins";
// Color
$black: #000;
$black: #191919;
$white: #fff;
$gray: #686d77;
$primary-color: #f54748;
practice/practice-02/src/styles/bases/_base.scss
+4
View File
@@ -9,3 +9,7 @@
.secondary-text {
color: $secondary-color;
}
* {
line-height: normal;
}
practice/practice-02/src/styles/bases/_typography.scss
+6
View File
@@ -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;
}
practice/practice-02/src/styles/components/_logo.scss
+11 -1
View File
@@ -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);
}
}
practice/practice-02/src/styles/layouts/_header.scss
+16
View File
@@ -1,4 +1,16 @@
.header {
@include setAbsoluteAndLocation(
$absolute: true,
$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 +26,10 @@
@media screen and (min-width: 840px) {
.header {
max-width: $max-width;
}
.header-container {
padding-top: 32px;
padding-left: 70px;
padding-right: 61px;
practice/practice-02/src/styles/layouts/_navbar.scss
+1
View File
@@ -60,6 +60,7 @@
border: none;
max-width: 600px;
margin: unset;
background-color: transparent;
}
.nav-item {
practice/practice-02/src/styles/layouts/_offer.scss
+163
View File
@@ -0,0 +1,163 @@
.offer {
&__container {
@include flex-container($justify-content: center, $flex-direction: column);
max-width: 380px;
margin: auto;
padding-top: 101px;
position: relative;
}
&__dot-background {
@include setAbsoluteAndLocation(true, $top: 168px, $left: 0px);
display: none;
}
&__heading {
font-size: $fs-x-lg;
text-align: center;
font-weight: 700;
}
&__description {
font-size: $fs-md;
font-weight: 400;
text-transform: capitalize;
text-align: center;
color: $black;
margin-top: 15px;
max-width: 856px;
margin-inline: auto;
}
&__card-list {
display: grid;
padding-top: 65px;
grid-auto-flow: column;
grid-auto-columns: 100%;
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
&__card-item {
@include flex-container($align-items: center, $flex-direction: column);
@include size(auto, 516px);
position: relative;
}
&__food-image {
@include setAbsoluteAndLocation(true, $top: 29px);
margin: auto;
}
&__price {
@include setAbsoluteAndLocation(true, $top: 176px, $right: 110px);
@include size(52px, 52px);
color: $white;
border: 4px solid $white;
border-radius: 50px;
background-color: $secondary-color;
font-size: $fs-md;
text-align: center;
line-height: 50px;
}
&__content-card {
@include setAbsoluteAndLocation(true, $bottom: 60px);
@include size(100%, auto);
@include flex-container($align-items: center, $flex-direction: column);
}
&__rate {
@include flex-container($align-items: center, $gap: 10px);
}
&__avatar-container {
position: relative;
@include size(74px, 38px);
}
&__avatar {
&-1 {
@include setAbsoluteAndLocation(true, $left: 38px);
z-index: 2;
}
&-2 {
@include setAbsoluteAndLocation(true, $left: 19px);
z-index: 1;
}
&-3 {
@include setAbsoluteAndLocation(true, $left: 0);
}
}
&__food-name {
margin-top: 30px;
color: $primary-color;
font-size: $fs-lg;
font-weight: 600;
}
&__food-description {
@include size(100%, auto);
max-width: 243px;
margin-top: 16px;
text-align: center;
text-transform: capitalize;
color: $black;
}
&__order-btn {
@include setAbsoluteAndLocation(true, $bottom: 0px);
padding: 10px 20px;
background-color: $primary-color;
border-radius: 100px;
color: $white;
text-transform: capitalize;
}
}
@media screen and (min-width: 840px) {
.offer {
padding-inline: 73px;
&__container {
max-width: 1440px;
}
&__food-image {
@include setAbsoluteAndLocation($top: 29px, $right: 55px);
}
&__card-list {
@include flex-container(
$align-items: center,
$gap: 18px,
$justify-content: center
);
row-gap: 30px;
flex-wrap: wrap;
}
&__price {
@include setAbsoluteAndLocation($top: 176px, $right: 70px);
}
}
}
@media screen and (min-width: 1200px) {
.offer__dot-background {
display: block;
}
}
practice/practice-02/src/styles/layouts/_welcome.scss
+49 -14
View File
@@ -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 {
@@ -21,18 +27,18 @@
}
&__lines-background {
@include setAbsoluteAndLocation($top: -76px, $right: 0);
@include setAbsoluteAndLocation($absolute: true, $top: -76px, $right: 0);
@include size(187px, 430px);
}
&__arrow-img-up {
@include setAbsoluteAndLocation($top: -15px, $right: 50px);
@include setAbsoluteAndLocation($absolute: true, $top: -15px, $right: 50px);
@include size(43px, 215px);
}
&__mint-img {
@include setAbsoluteAndLocation($bottom: 100px, $right: 0);
@include setAbsoluteAndLocation($absolute: true, $bottom: 100px, $right: 0);
}
// End banner
@@ -51,7 +57,7 @@
}
&__orange-img-wrapper {
@include setAbsoluteAndLocation($top: 0, $right: 35px);
@include setAbsoluteAndLocation($absolute: true, $top: 0, $right: 35px);
}
&__text-box {
@@ -78,7 +84,7 @@
&__head-arrow-container {
@include size(13px, 7.3px);
@include setAbsoluteAndLocation($right: 107px);
@include setAbsoluteAndLocation($absolute: true, $right: 107px);
}
&__heading {
@@ -90,7 +96,11 @@
}
&__underline-img-container {
@include setAbsoluteAndLocation($bottom: -20px, $left: 0px);
@include setAbsoluteAndLocation(
$absolute: true,
$bottom: -20px,
$left: 0px
);
}
&__description {
@@ -144,8 +154,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 +168,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 +195,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 +224,7 @@
$justify-content: space-between
);
padding-top: 20px;
padding-top: 130px;
width: 100%;
max-width: $max-width;
@@ -259,6 +273,7 @@
&__heading {
font-size: $fs-xx-lg;
line-height: 125%;
}
&__underline-img-container {
@@ -269,8 +284,24 @@
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);
@include setAbsoluteAndLocation(
$absolute: true,
$top: -50px,
$left: 220px
);
display: block;
transition: 0.2s;
@@ -282,7 +313,11 @@
&__slider-container {
display: block;
@include setAbsoluteAndLocation($bottom: -135px, $left: 65px);
@include setAbsoluteAndLocation(
$absolute: true,
$bottom: -135px,
$left: 65px
);
}
// End content
@@ -304,7 +339,7 @@
}
&__arrow-down-img-wrapper {
@include setAbsoluteAndLocation($top: -95px, $left: 230px);
@include setAbsoluteAndLocation($top: -75px, $left: 230px);
}
}
}
practice/practice-02/src/styles/main.scss
+1
View File
@@ -16,3 +16,4 @@
@import "./layouts/navbar";
@import "./layouts/header";
@import "./layouts/welcome";
@import "./layouts/offer";