mirror of
https://github.com/Nezumi-2711/html-css-practice-two.git
synced 2026-09-22 13:38:40 +00:00
Update code
This commit is contained in:
@@ -1,5 +1,17 @@
|
||||
.header {
|
||||
@include flex-container(space-between, $align-items: center);
|
||||
@include setAbsoluteAndLocation(
|
||||
$absolute: true,
|
||||
$top: 0,
|
||||
$right: 0,
|
||||
$left: 0
|
||||
);
|
||||
|
||||
max-width: 428px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
@include flex-container(true, space-between, $align-items: center);
|
||||
|
||||
position: relative;
|
||||
max-width: 428px;
|
||||
@@ -9,11 +21,15 @@
|
||||
}
|
||||
|
||||
.header-content {
|
||||
@include flex-container(space-between);
|
||||
@include flex-container(true, space-between);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 840px) {
|
||||
.header {
|
||||
max-width: $max-width;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
padding-top: 32px;
|
||||
padding-left: 70px;
|
||||
padding-right: 61px;
|
||||
|
||||
@@ -53,13 +53,14 @@
|
||||
|
||||
.nav-list {
|
||||
@include size(auto, auto);
|
||||
@include flex-container(space-between, column);
|
||||
@include flex-container(true, space-between, column);
|
||||
|
||||
position: unset;
|
||||
flex-direction: row;
|
||||
border: none;
|
||||
max-width: 600px;
|
||||
margin: unset;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
|
||||
@@ -0,0 +1,186 @@
|
||||
.offer {
|
||||
position: relative;
|
||||
max-width: 428px;
|
||||
margin-inline: auto;
|
||||
|
||||
&__container {
|
||||
@include flex-container(
|
||||
true,
|
||||
$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(
|
||||
true,
|
||||
$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(
|
||||
true,
|
||||
$align-items: center,
|
||||
$flex-direction: column
|
||||
);
|
||||
}
|
||||
|
||||
&__rate {
|
||||
@include flex-container(true, $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;
|
||||
}
|
||||
|
||||
&__rosemary-container {
|
||||
@include setAbsoluteAndLocation(true, $bottom: -120px, $right: 0);
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 840px) {
|
||||
.offer {
|
||||
max-width: $max-width;
|
||||
|
||||
&__container {
|
||||
max-width: $max-width;
|
||||
}
|
||||
|
||||
&__food-image {
|
||||
@include setAbsoluteAndLocation($top: 29px, $right: 55px);
|
||||
}
|
||||
|
||||
&__card-list {
|
||||
@include flex-container(
|
||||
true,
|
||||
$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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
.service {
|
||||
max-width: 428px;
|
||||
margin-inline: auto;
|
||||
|
||||
&__container {
|
||||
@include size(auto, auto);
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__background-color {
|
||||
@include setAbsoluteAndLocation(true, $top: 200px, $left: 0);
|
||||
@include size(100%, 50%);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(253, 197, 94, 0.01) 0%,
|
||||
rgba(253, 197, 94, 0.06) 50%,
|
||||
rgba(253, 197, 94, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
&__img-container {
|
||||
@include size(auto, 436.81px);
|
||||
|
||||
position: relative;
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
&__background-img {
|
||||
@include setAbsoluteAndLocation(true, $top: 65px, $left: 0);
|
||||
}
|
||||
|
||||
&__main-img {
|
||||
@include setAbsoluteAndLocation(true, $top: 60px, $left: 35px);
|
||||
}
|
||||
|
||||
&__vegetable-img {
|
||||
@include setAbsoluteAndLocation(true, $bottom: 0, $left: 50px);
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-inline: 24px;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__heading {
|
||||
margin-top: 30px;
|
||||
font-size: $fs-x-lg;
|
||||
line-height: 129.9%;
|
||||
font-weight: 700;
|
||||
max-width: 380px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: 29px;
|
||||
max-width: 381px;
|
||||
margin-inline: auto;
|
||||
font-size: $fs-md;
|
||||
}
|
||||
|
||||
&__category {
|
||||
@include flex-container(true, $flex-direction: column, $gap: 41px);
|
||||
|
||||
margin-top: 81px;
|
||||
&-list {
|
||||
@include flex-container(true, $flex-direction: column, $gap: 30px);
|
||||
}
|
||||
}
|
||||
|
||||
&__category-item {
|
||||
@include flex-container(true, $align-items: center, $gap: 10px);
|
||||
}
|
||||
|
||||
&__name-category {
|
||||
font-size: $fs-md;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
display: block;
|
||||
margin-top: 43px;
|
||||
max-width: 74px;
|
||||
text-transform: capitalize;
|
||||
padding: 10px 20px;
|
||||
|
||||
&:hover {
|
||||
background-color: $secondary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 840px) {
|
||||
.service {
|
||||
max-width: $max-width;
|
||||
margin-inline: auto;
|
||||
|
||||
&__container {
|
||||
@include flex-container(true, $align-items: center);
|
||||
|
||||
padding-top: 200px;
|
||||
}
|
||||
|
||||
&__img-container {
|
||||
@include size($width: 100%);
|
||||
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
&__background-img {
|
||||
@include setAbsoluteAndLocation(true, $top: 35px, $left: 0);
|
||||
}
|
||||
|
||||
&__main-img {
|
||||
@include setAbsoluteAndLocation(true, $top: 30px, $left: 35px);
|
||||
}
|
||||
|
||||
&__vegetable-img {
|
||||
@include setAbsoluteAndLocation(true, $bottom: 30, $left: 50px);
|
||||
}
|
||||
|
||||
&__heading {
|
||||
max-width: 452px;
|
||||
margin: unset;
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: 690px;
|
||||
}
|
||||
|
||||
&__category {
|
||||
flex-direction: row;
|
||||
margin-top: 29px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
.service {
|
||||
&__container {
|
||||
@include flex-container($align-items: center, $gap: 150px);
|
||||
}
|
||||
&__background-color {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__img-container {
|
||||
@include size(100%, 619px);
|
||||
}
|
||||
|
||||
&__background-img {
|
||||
@include setAbsoluteAndLocation(true, $top: -200px, $left: 0);
|
||||
}
|
||||
|
||||
&__main-img {
|
||||
@include setAbsoluteAndLocation(true, $top: 70px, $left: 70px);
|
||||
}
|
||||
|
||||
&__vegetable-img {
|
||||
@include setAbsoluteAndLocation(true, $bottom: 10, $left: 95px);
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-top: 220px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -4,14 +4,20 @@
|
||||
}
|
||||
|
||||
.welcome {
|
||||
@include flex-container(center, column);
|
||||
@include flex-container(true, 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 {
|
||||
@include size(428px, auto);
|
||||
@include flex-container(center, column);
|
||||
@include flex-container(true, center, column);
|
||||
|
||||
position: relative;
|
||||
}
|
||||
@@ -21,24 +27,24 @@
|
||||
}
|
||||
|
||||
&__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
|
||||
|
||||
// Start content
|
||||
&__content {
|
||||
@include flex-container($flex-direction: column);
|
||||
@include flex-container(true, $flex-direction: column);
|
||||
@include size(calc(428px - 48px), auto);
|
||||
|
||||
position: relative;
|
||||
@@ -51,11 +57,11 @@
|
||||
}
|
||||
|
||||
&__orange-img-wrapper {
|
||||
@include setAbsoluteAndLocation($top: 0, $right: 35px);
|
||||
@include setAbsoluteAndLocation($absolute: true, $top: 0, $right: 35px);
|
||||
}
|
||||
|
||||
&__text-box {
|
||||
@include flex-container($align-items: center, $gap: 6px);
|
||||
@include flex-container(true, $align-items: center, $gap: 6px);
|
||||
@include size(fit-content);
|
||||
|
||||
background-color: #feeae9;
|
||||
@@ -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 {
|
||||
@@ -102,7 +112,7 @@
|
||||
}
|
||||
|
||||
&__search-form {
|
||||
@include flex-container();
|
||||
@include flex-container(true);
|
||||
|
||||
margin-top: 32px;
|
||||
border-radius: 100px;
|
||||
@@ -144,23 +154,26 @@
|
||||
}
|
||||
|
||||
&__action-container {
|
||||
@include flex-container($gap: 31px);
|
||||
@include flex-container(true, $justify-content: space-between);
|
||||
|
||||
width: 100%;
|
||||
margin-top: 44px;
|
||||
max-width: 376px;
|
||||
}
|
||||
|
||||
&__watch-video-link {
|
||||
@include flex-container($align-items: center, $gap: 21px);
|
||||
@include flex-container(true, $align-items: center, $gap: 21px);
|
||||
|
||||
position: relative;
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -177,11 +190,13 @@
|
||||
background-color: $white;
|
||||
box-shadow: 0 40px 50px 3px rgba($color: $primary-color, $alpha: 0.5);
|
||||
transition: width 0.5s;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
&__text-download-btn {
|
||||
color: $gray;
|
||||
font-size: $fs-sm;
|
||||
font-family: $tertiary-font;
|
||||
margin-left: 70px;
|
||||
transition: 0.5s;
|
||||
z-index: 1;
|
||||
@@ -210,7 +225,7 @@
|
||||
$justify-content: space-between
|
||||
);
|
||||
|
||||
padding-top: 20px;
|
||||
padding-top: 130px;
|
||||
width: 100%;
|
||||
max-width: $max-width;
|
||||
|
||||
@@ -259,6 +274,7 @@
|
||||
|
||||
&__heading {
|
||||
font-size: $fs-xx-lg;
|
||||
line-height: 125%;
|
||||
}
|
||||
|
||||
&__underline-img-container {
|
||||
@@ -269,8 +285,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 +314,11 @@
|
||||
|
||||
&__slider-container {
|
||||
display: block;
|
||||
@include setAbsoluteAndLocation($bottom: -135px, $left: 65px);
|
||||
@include setAbsoluteAndLocation(
|
||||
$absolute: true,
|
||||
$bottom: -135px,
|
||||
$left: 65px
|
||||
);
|
||||
}
|
||||
|
||||
// End content
|
||||
@@ -304,7 +340,7 @@
|
||||
}
|
||||
|
||||
&__arrow-down-img-wrapper {
|
||||
@include setAbsoluteAndLocation($top: -95px, $left: 230px);
|
||||
@include setAbsoluteAndLocation($top: -75px, $left: 230px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user