mirror of
https://github.com/Nezumi-2711/html-css-practice-two.git
synced 2026-09-23 04:09:56 +00:00
Update code
This commit is contained in:
@@ -17,8 +17,7 @@
|
||||
}
|
||||
|
||||
&__introduction .footer__description {
|
||||
margin-top: 8 px;
|
||||
font-size: $fs-md;
|
||||
margin-top: 8px;
|
||||
max-width: 325px;
|
||||
}
|
||||
|
||||
@@ -60,61 +59,68 @@
|
||||
}
|
||||
|
||||
&__contact {
|
||||
margin-top: 30px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
&__contact .footer__description {
|
||||
max-width: 379px;
|
||||
color: $black;
|
||||
margin-top: 37px;
|
||||
font-size: $fs-md;
|
||||
}
|
||||
|
||||
&__form {
|
||||
@include size(378px, auto);
|
||||
@extend %d-flex;
|
||||
@include flex-layout($justify: space-between, $gap: 15px, $wrap: wrap);
|
||||
|
||||
max-width: 338px;
|
||||
margin-top: 27px;
|
||||
}
|
||||
|
||||
&__email-input {
|
||||
@include size(178px, 48px);
|
||||
|
||||
margin-right: 15px;
|
||||
border-radius: 40px;
|
||||
padding-left: 25px;
|
||||
border: none;
|
||||
background-color: #e8e8e8;
|
||||
font-size: $fs-xx-sm;
|
||||
}
|
||||
|
||||
&__submit-btn {
|
||||
@include size(118px, 50px);
|
||||
|
||||
border-radius: 40px;
|
||||
border-radius: 30px;
|
||||
color: $white;
|
||||
background-color: $primary-color;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: $fs-xx-sm;
|
||||
|
||||
&:hover {
|
||||
background-color: $secondary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__copyright {
|
||||
@extend %mr-ml-auto;
|
||||
@include size(fit-content, auto);
|
||||
|
||||
font-size: $fs-x-sm;
|
||||
font-family: $secondary-font;
|
||||
margin-top: 80px;
|
||||
padding-bottom: 29px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 840px) {
|
||||
@media screen and (min-width: 600px) {
|
||||
.footer {
|
||||
&__container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
max-width: $max-width;
|
||||
width: auto;
|
||||
padding-inline: 90px;
|
||||
column-gap: 10px;
|
||||
padding-inline: 10px;
|
||||
}
|
||||
|
||||
&__introduction {
|
||||
@@ -128,33 +134,52 @@
|
||||
&__contact {
|
||||
grid-column: -2;
|
||||
}
|
||||
|
||||
&__information {
|
||||
@include flex-layout($justify: space-between);
|
||||
|
||||
max-width: 310px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 840px) {
|
||||
.footer {
|
||||
&__container {
|
||||
padding-inline: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
.footer {
|
||||
&__container {
|
||||
grid-template-columns: auto auto auto;
|
||||
grid-template-columns: 505px auto auto;
|
||||
padding-left: 135px;
|
||||
column-gap: 10px;
|
||||
column-gap: 30px;
|
||||
}
|
||||
|
||||
&__introduction {
|
||||
padding-top: 119px;
|
||||
padding-left: 112px;
|
||||
padding-top: 89px;
|
||||
padding-left: unset;
|
||||
}
|
||||
|
||||
&__information {
|
||||
padding-top: 155px;
|
||||
}
|
||||
@include flex-layout($justify: space-between, $gap: 30px);
|
||||
|
||||
&__description {
|
||||
margin-top: 9px;
|
||||
padding-left: 1px;
|
||||
max-width: 304px;
|
||||
padding-top: 138px;
|
||||
}
|
||||
|
||||
&__contact {
|
||||
padding-top: 125px;
|
||||
padding-top: 138px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1300px) {
|
||||
.footer__introduction {
|
||||
padding-left: 112px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,33 +2,39 @@
|
||||
@extend %absolute;
|
||||
@include set-location($top: 0, $right: 0, $left: 0);
|
||||
|
||||
max-width: 428px;
|
||||
width: 428px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
.header__container {
|
||||
@extend %d-flex;
|
||||
@include flex-layout($align: center);
|
||||
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
max-width: 428px;
|
||||
min-width: $min-width;
|
||||
padding: 24px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
.header__content {
|
||||
@extend %d-flex;
|
||||
@include flex-layout($justify: space-between);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
.header {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 840px) {
|
||||
.header {
|
||||
@include size(auto, auto);
|
||||
|
||||
max-width: $max-width;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
.header__container {
|
||||
@include flex-layout($gap: 10px);
|
||||
|
||||
padding-top: 32px;
|
||||
@@ -37,7 +43,7 @@
|
||||
max-width: 1309px;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
.header__content {
|
||||
@include flex-layout($gap: 10px);
|
||||
@include size(100%, auto);
|
||||
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
}
|
||||
|
||||
%style-category-item {
|
||||
font-size: $fs-md;
|
||||
padding: 8px 18px;
|
||||
border-radius: 50px;
|
||||
}
|
||||
@@ -40,7 +39,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__category-item:focus {
|
||||
&__category-item:first-child {
|
||||
@extend %style-category-item;
|
||||
|
||||
color: $white;
|
||||
@@ -73,7 +72,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 840px) {
|
||||
@media screen and (min-width: 600px) {
|
||||
.menu {
|
||||
&__container {
|
||||
max-width: $max-width;
|
||||
@@ -83,6 +82,16 @@
|
||||
max-width: 653px;
|
||||
}
|
||||
|
||||
&__card-list {
|
||||
grid-auto-columns: unset;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
row-gap: 66px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 840px) {
|
||||
.menu {
|
||||
&__list-category {
|
||||
margin-inline: 59px;
|
||||
}
|
||||
|
||||
+108
-56
@@ -1,40 +1,87 @@
|
||||
.nav-list {
|
||||
@extend %absolute;
|
||||
@include size(max-content, auto);
|
||||
.nav {
|
||||
&__icon-menu {
|
||||
@include base-icon-menu;
|
||||
|
||||
display: none;
|
||||
list-style: none;
|
||||
transition: 0.1s;
|
||||
border: 2px solid $primary-color;
|
||||
top: 100px;
|
||||
right: 25px;
|
||||
background-color: $white;
|
||||
z-index: 2;
|
||||
border-radius: 20px;
|
||||
}
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
top: -5px;
|
||||
|
||||
.nav-download-btn {
|
||||
display: none;
|
||||
&:before {
|
||||
@extend .line-icon-menu;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
top: -11px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
font-size: $fs-xx-sm;
|
||||
padding: 14px;
|
||||
border-bottom: 1px solid $black;
|
||||
&:after {
|
||||
@extend .line-icon-menu;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: unset;
|
||||
top: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .nav-link {
|
||||
color: $secondary-color;
|
||||
}
|
||||
}
|
||||
&__toggle-menu {
|
||||
@extend %absolute;
|
||||
@include size(36px, 27px);
|
||||
|
||||
.nav-link {
|
||||
color: $black;
|
||||
top: 37px;
|
||||
right: 21px;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&__toggle-menu:checked ~ &__icon-menu {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&__toggle-menu:checked ~ &__icon-menu:before {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
&__toggle-menu:checked ~ &__icon-menu:after {
|
||||
top: 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
&__toggle-menu:checked ~ &__list {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__list {
|
||||
@extend %absolute;
|
||||
@include size(max-content, auto);
|
||||
|
||||
display: none;
|
||||
list-style: none;
|
||||
transition: 0.1s;
|
||||
border: 2px solid $primary-color;
|
||||
top: 100px;
|
||||
right: 25px;
|
||||
background-color: $white;
|
||||
z-index: 2;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
&__download-btn {
|
||||
display: none;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__item-wrapper {
|
||||
font-size: $fs-xx-sm;
|
||||
padding: 14px;
|
||||
border-bottom: 1px solid $black;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: unset;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 840px) {
|
||||
@@ -42,35 +89,40 @@
|
||||
@include size(100%, auto);
|
||||
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.nav-download-btn {
|
||||
display: block;
|
||||
&__icon-menu,
|
||||
&__toggle-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $secondary-color;
|
||||
&__download-btn {
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
background-color: $secondary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__list {
|
||||
@include size(auto, auto);
|
||||
@include flex-layout(
|
||||
$justify: space-between,
|
||||
$direction: row,
|
||||
$gap: 10px
|
||||
);
|
||||
|
||||
display: flex;
|
||||
position: unset;
|
||||
border: none;
|
||||
max-width: 660px;
|
||||
margin: unset;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&__item-wrapper {
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
@include size(auto, auto);
|
||||
@include flex-layout($justify: space-between, $direction: row, $gap: 10px);
|
||||
|
||||
display: flex;
|
||||
position: unset;
|
||||
border: none;
|
||||
max-width: 660px;
|
||||
margin: unset;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// .nav-link:hover {
|
||||
// color: $secondary-color;
|
||||
// }
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
|
||||
&__dot-background {
|
||||
@extend %absolute;
|
||||
@include set-location($top: 168px, $left: 0px);
|
||||
@include set-location($top: 168px, $left: 0);
|
||||
|
||||
display: none;
|
||||
}
|
||||
@@ -27,7 +27,6 @@
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: $fs-md;
|
||||
font-weight: 400;
|
||||
text-transform: capitalize;
|
||||
text-align: center;
|
||||
@@ -60,7 +59,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 840px) {
|
||||
@media screen and (min-width: 600px) {
|
||||
.offer {
|
||||
max-width: $max-width;
|
||||
|
||||
@@ -78,6 +77,10 @@
|
||||
|
||||
row-gap: 30px;
|
||||
}
|
||||
|
||||
&__description {
|
||||
padding-inline: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
|
||||
&__main-image {
|
||||
@extend %absolute;
|
||||
@include set-location($top: 0px, $left: 60px);
|
||||
@include set-location($top: 0, $left: 60px);
|
||||
}
|
||||
|
||||
&__image-food:first-child {
|
||||
@@ -66,7 +66,6 @@
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: $fs-md;
|
||||
color: $black;
|
||||
margin-top: 31px;
|
||||
max-width: 366px;
|
||||
@@ -80,29 +79,48 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
.platform {
|
||||
&__container {
|
||||
max-width: $max-width;
|
||||
}
|
||||
|
||||
&__image-container {
|
||||
width: fit-content;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
@include set-location($top: 0, $left: 28px);
|
||||
}
|
||||
|
||||
&__heading,
|
||||
&__description {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 840px) {
|
||||
.platform {
|
||||
&__container {
|
||||
@include flex-layout($direction: row-reverse, $align: center);
|
||||
@include flex-layout(
|
||||
$direction: row-reverse,
|
||||
$align: center,
|
||||
$justify: space-between
|
||||
);
|
||||
|
||||
// width: 100%;
|
||||
display: flex;
|
||||
max-width: $max-width;
|
||||
max-height: 632px;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
&__image-container {
|
||||
@include size(100%, 500px);
|
||||
}
|
||||
|
||||
&__background-img {
|
||||
@include set-location($top: 0px, $right: 0px);
|
||||
|
||||
position: absolute;
|
||||
margin-inline: unset;
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
@include set-location($top: 0px, $right: 58px, $left: unset);
|
||||
@include set-location($top: 0, $right: 58px, $left: unset);
|
||||
}
|
||||
|
||||
&__image-food:first-child {
|
||||
@@ -141,43 +159,35 @@
|
||||
}
|
||||
|
||||
&__image-container {
|
||||
@include size(600px, 632px);
|
||||
@include size(auto, 632px);
|
||||
|
||||
padding-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
@include set-location($top: 20px, $right: 105px);
|
||||
}
|
||||
|
||||
&__background-img {
|
||||
@include set-location($top: 20px, $right: 00px);
|
||||
}
|
||||
|
||||
&__image-food:first-child {
|
||||
@include set-location($bottom: -65px, $right: 263px);
|
||||
}
|
||||
|
||||
&__image-food:nth-child(2) {
|
||||
@include set-location($bottom: -40px, $right: 190px);
|
||||
}
|
||||
|
||||
&__image-food:nth-child(3) {
|
||||
@include set-location($bottom: -8px, $right: 125px);
|
||||
@include set-location($top: 20px, $right: 107px);
|
||||
}
|
||||
|
||||
&__image-food:first-child,
|
||||
&__image-food:nth-child(2),
|
||||
&__image-food:nth-child(3),
|
||||
&__image-food:nth-child(4) {
|
||||
@include set-location($bottom: 80px, $right: 80px);
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-top: 33px;
|
||||
}
|
||||
|
||||
&__heading,
|
||||
&__description,
|
||||
&__store-container {
|
||||
padding-left: 47px;
|
||||
padding-left: 45px;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: 52px;
|
||||
margin-top: 58px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,29 +22,24 @@
|
||||
}
|
||||
|
||||
&__img-container {
|
||||
@include size(auto, 436.81px);
|
||||
|
||||
padding-top: 75px;
|
||||
position: relative;
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
&__background-img {
|
||||
@extend %absolute;
|
||||
@include set-location($top: 75px, $left: 0);
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
&__main-img {
|
||||
@extend %absolute;
|
||||
@include set-location($top: 70px, $left: 35px);
|
||||
@include set-location($top: 73px, $left: 35px);
|
||||
}
|
||||
|
||||
&__vegetable-img {
|
||||
@extend %absolute;
|
||||
@include set-location($bottom: -10px, $left: 50px);
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
&__content {
|
||||
margin-top: 65px;
|
||||
margin-top: 61px;
|
||||
padding-inline: 24px;
|
||||
|
||||
z-index: 1;
|
||||
@@ -52,7 +47,6 @@
|
||||
|
||||
&__heading {
|
||||
margin-top: 30px;
|
||||
margin-inline: auto;
|
||||
font-size: $fs-xx-lg;
|
||||
line-height: 129.9%;
|
||||
font-weight: 700;
|
||||
@@ -61,9 +55,7 @@
|
||||
|
||||
&__description {
|
||||
margin-top: 29px;
|
||||
margin-inline: auto;
|
||||
max-width: 381px;
|
||||
font-size: $fs-md;
|
||||
}
|
||||
|
||||
&__category {
|
||||
@@ -88,14 +80,12 @@
|
||||
}
|
||||
|
||||
&__name-category {
|
||||
font-size: $fs-md;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
margin-top: 43px;
|
||||
max-width: 74px;
|
||||
text-transform: capitalize;
|
||||
padding: 10px 20px;
|
||||
|
||||
@@ -105,15 +95,40 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
.service {
|
||||
max-width: $max-width;
|
||||
|
||||
&__img-container {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
&__main-img {
|
||||
@include set-location($top: 30px, $left: 25px);
|
||||
}
|
||||
|
||||
&__heading {
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: 690px;
|
||||
}
|
||||
|
||||
&__category {
|
||||
@include flex-layout($direction: row, $gap: 10px);
|
||||
|
||||
margin-top: 29px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 840px) {
|
||||
%absolute_840 {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.service {
|
||||
max-width: $max-width;
|
||||
margin-inline: auto;
|
||||
|
||||
&__container {
|
||||
@include flex-layout($align: center);
|
||||
|
||||
@@ -151,12 +166,12 @@
|
||||
}
|
||||
|
||||
&__main-img {
|
||||
@include set-location($top: 95px, $left: 35px);
|
||||
@include set-location($top: 55px, $left: 25px);
|
||||
@extend %absolute_840;
|
||||
}
|
||||
|
||||
&__vegetable-img {
|
||||
@include set-location($bottom: 145px, $left: 50px);
|
||||
@include set-location($bottom: 180px, $left: 50px);
|
||||
@extend %absolute_840;
|
||||
}
|
||||
|
||||
@@ -164,16 +179,6 @@
|
||||
max-width: 452px;
|
||||
margin: unset;
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: 690px;
|
||||
}
|
||||
|
||||
&__category {
|
||||
@include flex-layout($direction: row, $gap: 10px);
|
||||
|
||||
margin-top: 29px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -188,25 +193,31 @@
|
||||
}
|
||||
|
||||
&__background-img {
|
||||
@include set-location($top: 0px, $left: 0);
|
||||
@include set-location($top: 0, $left: 0);
|
||||
@extend %absolute_1200;
|
||||
}
|
||||
|
||||
&__img-container {
|
||||
margin-inline: unset;
|
||||
}
|
||||
|
||||
&__background-color {
|
||||
@include set-location($left: -150px);
|
||||
@include set-location($left: -151px);
|
||||
@include size(500px, 50%);
|
||||
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(253, 197, 94, 0.6),
|
||||
rgba(253, 197, 94, 0.4),
|
||||
rgba(253, 197, 94, 0.3),
|
||||
rgba(253, 197, 94, 0.2),
|
||||
rgba(253, 197, 94, 0.1),
|
||||
rgba(253, 197, 94, 0.06),
|
||||
rgba(253, 197, 94, 0.01),
|
||||
rgba(253, 197, 94, 0),
|
||||
rgba(253, 197, 94, 0)
|
||||
);
|
||||
|
||||
clip-path: polygon(30% 0, 100% 0, 100% 100%, 30% 100%);
|
||||
}
|
||||
|
||||
&__description {
|
||||
@@ -230,8 +241,12 @@
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-top: 78px;
|
||||
padding-top: 69px;
|
||||
padding-left: 29px;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
margin-top: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
.delivery-text-box {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: $fs-xx-lg;
|
||||
}
|
||||
|
||||
.welcome {
|
||||
@@ -47,7 +48,7 @@
|
||||
|
||||
&__food-img:nth-child(4) {
|
||||
@extend %absolute;
|
||||
@include set-location($bottom: 0px, $right: 80px);
|
||||
@include set-location($bottom: 0, $right: 80px);
|
||||
}
|
||||
|
||||
&__food-img:nth-child(5) {
|
||||
@@ -62,7 +63,7 @@
|
||||
|
||||
&__rate-card {
|
||||
@extend %absolute;
|
||||
@include set-location($top: 103px, $right: 0);
|
||||
@include set-location($top: 103px, $right: -5px);
|
||||
}
|
||||
|
||||
&__background-banner {
|
||||
@@ -78,17 +79,19 @@
|
||||
&__arrow-img-up {
|
||||
@extend %absolute;
|
||||
@include set-location($top: -15px, $right: 40px);
|
||||
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&__mint-img {
|
||||
@extend %absolute;
|
||||
@include set-location($bottom: 90px, $right: 0px);
|
||||
@include set-location($bottom: 90px, $right: 0);
|
||||
}
|
||||
// End banner
|
||||
|
||||
// Start content
|
||||
&__content {
|
||||
@include size(calc(428px - 48px), auto);
|
||||
@include size(380px, auto);
|
||||
@extend %d-flex;
|
||||
@include flex-layout($direction: column);
|
||||
|
||||
@@ -117,11 +120,11 @@
|
||||
border-radius: 100px;
|
||||
padding: 4px;
|
||||
margin-left: 10px;
|
||||
font-size: $fs-xx-sm;
|
||||
}
|
||||
|
||||
&__text-box-content {
|
||||
font-family: $secondary-font;
|
||||
font-size: $fs-xx-sm;
|
||||
}
|
||||
|
||||
&__icon-container {
|
||||
@@ -139,20 +142,19 @@
|
||||
}
|
||||
|
||||
&__heading {
|
||||
margin-top: 12px;
|
||||
margin-top: 16px;
|
||||
font-size: $fs-xx-lg;
|
||||
text-transform: capitalize;
|
||||
font-weight: 900;
|
||||
max-width: 530px;
|
||||
}
|
||||
|
||||
&__underline-img-container {
|
||||
@extend %absolute;
|
||||
@include set-location($bottom: -27px, $left: 0px);
|
||||
@include set-location($bottom: -15px, $left: 0);
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: 40px;
|
||||
margin-top: 36px;
|
||||
font-size: $fs-x-md;
|
||||
line-height: 140%;
|
||||
letter-spacing: -0.2px;
|
||||
@@ -162,7 +164,7 @@
|
||||
&__search-form {
|
||||
@extend %d-flex;
|
||||
|
||||
margin-top: 32px;
|
||||
margin-top: 30px;
|
||||
border-radius: 100px;
|
||||
border: 0.5px solid $black;
|
||||
max-width: 471px;
|
||||
@@ -177,7 +179,6 @@
|
||||
&__text-input {
|
||||
@include size(100%, auto);
|
||||
|
||||
font-size: $fs-md;
|
||||
border: none;
|
||||
|
||||
&:focus {
|
||||
@@ -269,6 +270,68 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
.welcome {
|
||||
&__container {
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
&__banner-container {
|
||||
width: unset;
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
margin-inline: auto;
|
||||
position: relative;
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
&__food-img:nth-child(2) {
|
||||
@extend %absolute;
|
||||
@include set-location($bottom: 75px, $left: 14px);
|
||||
}
|
||||
|
||||
&__food-img:nth-child(3) {
|
||||
@extend %absolute;
|
||||
@include set-location($bottom: -7px, $left: 105px);
|
||||
}
|
||||
|
||||
&__food-img:nth-child(4) {
|
||||
@extend %absolute;
|
||||
@include set-location($bottom: 0, $right: 80px);
|
||||
}
|
||||
|
||||
&__food-img:nth-child(5) {
|
||||
@extend %absolute;
|
||||
@include set-location($bottom: 85px, $right: 15px);
|
||||
}
|
||||
|
||||
&__review-card {
|
||||
@extend %absolute;
|
||||
@include set-location($top: 100px, $left: 10px);
|
||||
}
|
||||
|
||||
&__rate-card {
|
||||
@extend %absolute;
|
||||
@include set-location($top: 103px, $right: 0);
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: unset;
|
||||
padding-inline: unset;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
&__underline-img-container {
|
||||
@include set-location($bottom: 0px, $left: 0);
|
||||
}
|
||||
|
||||
&__underline-img {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 840px) {
|
||||
.welcome {
|
||||
&__container {
|
||||
@@ -284,11 +347,16 @@
|
||||
}
|
||||
|
||||
// Start content
|
||||
|
||||
&__head-arrow-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__content {
|
||||
@include size(auto, auto);
|
||||
|
||||
padding-left: 70px;
|
||||
padding-right: 0px;
|
||||
padding-right: 0;
|
||||
padding-top: 70px;
|
||||
max-width: 560px;
|
||||
}
|
||||
@@ -304,8 +372,12 @@
|
||||
line-height: 125%;
|
||||
}
|
||||
|
||||
&__underline-img {
|
||||
width: unset;
|
||||
}
|
||||
|
||||
&__underline-img-container {
|
||||
@include set-location($bottom: -25px, $left: 8px);
|
||||
@include set-location($bottom: -10px, $left: 8px);
|
||||
}
|
||||
|
||||
&__description {
|
||||
@@ -346,7 +418,7 @@
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
.welcome {
|
||||
padding-top: 0px;
|
||||
padding-top: 0;
|
||||
|
||||
// Start banner
|
||||
&__banner {
|
||||
@@ -374,11 +446,11 @@
|
||||
}
|
||||
|
||||
&__lines-background {
|
||||
@include set-location($top: -85px, $right: -98px);
|
||||
@include set-location($top: -85px, $right: -96px);
|
||||
}
|
||||
|
||||
&__review-card {
|
||||
@include set-location($top: 160px, $left: -47px);
|
||||
@include set-location($top: 160px, $left: 1px);
|
||||
}
|
||||
|
||||
&__rate-card {
|
||||
@@ -386,11 +458,11 @@
|
||||
}
|
||||
|
||||
&__food-img:nth-child(2) {
|
||||
@include set-location($bottom: 108px, $left: -68px);
|
||||
@include set-location($bottom: 108px, $left: -18px);
|
||||
}
|
||||
|
||||
&__food-img:nth-child(3) {
|
||||
@include set-location($bottom: -29px, $left: 102);
|
||||
@include set-location($bottom: -29px, $left: 151px);
|
||||
}
|
||||
|
||||
&__food-img:nth-child(4) {
|
||||
@@ -411,10 +483,18 @@
|
||||
padding-top: 81px;
|
||||
}
|
||||
|
||||
&__heading {
|
||||
max-width: 530px;
|
||||
}
|
||||
|
||||
&__text-box {
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
||||
.delivery-text-box {
|
||||
font-size: $fs-xxx-lg;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: 29px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user