mirror of
https://github.com/Nezumi-2711/html-css-practice-two.git
synced 2026-09-22 13:38:40 +00:00
Change structure project
This commit is contained in:
Nezumi
@@ -0,0 +1,510 @@
|
||||
.delivery-text-box {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: $fs-xx-lg;
|
||||
}
|
||||
|
||||
.welcome {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(245, 71, 72, 0.06) 0%,
|
||||
rgba(245, 71, 72, 0) 100%
|
||||
);
|
||||
|
||||
padding-top: 50px;
|
||||
|
||||
&__container {
|
||||
@extend %d-flex;
|
||||
@include flex-layout($justify: center, $direction: column);
|
||||
|
||||
margin: auto;
|
||||
max-width: 428px;
|
||||
padding-top: 67px;
|
||||
}
|
||||
// Start banner
|
||||
&__banner-container {
|
||||
@extend %d-flex;
|
||||
@include size(428px, auto);
|
||||
@include flex-layout($justify: center, $direction: column);
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
text-align: right;
|
||||
padding-right: 25px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__food-img:nth-child(2) {
|
||||
@extend %absolute;
|
||||
@include set-location($bottom: 75px, $left: 12px);
|
||||
}
|
||||
|
||||
&__food-img:nth-child(3) {
|
||||
@extend %absolute;
|
||||
@include set-location($bottom: -7px, $left: 110);
|
||||
}
|
||||
|
||||
&__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: -5px);
|
||||
}
|
||||
|
||||
&__background-banner {
|
||||
@extend %absolute;
|
||||
@include size(100%, 100%);
|
||||
}
|
||||
|
||||
&__lines-background {
|
||||
@extend %absolute;
|
||||
@include set-location($top: -85px, $right: 1px);
|
||||
}
|
||||
|
||||
&__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: 0);
|
||||
}
|
||||
// End banner
|
||||
|
||||
// Start content
|
||||
&__content {
|
||||
@include size(380px, auto);
|
||||
@extend %d-flex;
|
||||
@include flex-layout($direction: column);
|
||||
|
||||
position: relative;
|
||||
padding-top: 58px;
|
||||
padding-inline: 24px;
|
||||
}
|
||||
|
||||
&__arrow-down-img-wrapper {
|
||||
@extend %absolute;
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__orange-img-wrapper {
|
||||
@extend %absolute;
|
||||
@include set-location($top: 7px, $right: 0);
|
||||
}
|
||||
|
||||
&__text-box {
|
||||
@extend %d-flex;
|
||||
@include flex-layout($align: center, $gap: 6px);
|
||||
@include size(fit-content);
|
||||
|
||||
background-color: #feeae9;
|
||||
border-radius: 100px;
|
||||
padding: 4px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&__text-box-content {
|
||||
font-family: $secondary-font;
|
||||
font-size: $fs-xx-sm;
|
||||
}
|
||||
|
||||
&__icon-container {
|
||||
@include size(20px, 20px);
|
||||
}
|
||||
|
||||
&__love-icon {
|
||||
@include size(100%, 100%);
|
||||
}
|
||||
|
||||
&__head-arrow-container {
|
||||
@include size(13px, 7.3px);
|
||||
@extend %absolute;
|
||||
@include set-location($right: 107px);
|
||||
}
|
||||
|
||||
&__heading {
|
||||
margin-top: 16px;
|
||||
font-size: $fs-xx-lg;
|
||||
text-transform: capitalize;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
&__underline-img-container {
|
||||
@extend %absolute;
|
||||
@include set-location($bottom: -15px, $left: 0);
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: 36px;
|
||||
font-size: $fs-x-md;
|
||||
line-height: 140%;
|
||||
letter-spacing: -0.2px;
|
||||
max-width: 517px;
|
||||
}
|
||||
|
||||
&__search-form {
|
||||
@extend %d-flex;
|
||||
|
||||
margin-top: 30px;
|
||||
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);
|
||||
|
||||
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: $secondary-light-color;
|
||||
transition: 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
&__action-container {
|
||||
@extend %d-flex;
|
||||
@include flex-layout($justify: space-between, $gap: 10px);
|
||||
|
||||
width: 100%;
|
||||
margin-top: 35px;
|
||||
max-width: 376px;
|
||||
}
|
||||
|
||||
&__watch-video-link {
|
||||
@extend %d-flex;
|
||||
@include flex-layout($align: center, $gap: 21px);
|
||||
|
||||
position: relative;
|
||||
&:hover {
|
||||
.welcome__play-icon-wrapper {
|
||||
transform: scale(1.2);
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.welcome__text-download-btn {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__play-icon {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
&__play-icon-wrapper {
|
||||
@extend %absolute;
|
||||
@include size(12px, 17px);
|
||||
|
||||
padding: 17.5px 20px;
|
||||
border-radius: 50px;
|
||||
background-color: $white;
|
||||
box-shadow: 0 25px 50px 3px rgba($color: $primary-color, $alpha: 0.4);
|
||||
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;
|
||||
}
|
||||
|
||||
&__download-btn:hover {
|
||||
background-color: $secondary-color;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
&__slider-container {
|
||||
@extend %absolute;
|
||||
|
||||
display: none;
|
||||
}
|
||||
// End content
|
||||
}
|
||||
|
||||
.slider-container {
|
||||
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 {
|
||||
@include flex-layout(
|
||||
$direction: row-reverse,
|
||||
$justify: space-between,
|
||||
$align: center
|
||||
);
|
||||
|
||||
padding-top: 130px;
|
||||
width: 100%;
|
||||
max-width: $max-width;
|
||||
}
|
||||
|
||||
// Start content
|
||||
|
||||
&__head-arrow-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__content {
|
||||
@include size(auto, auto);
|
||||
|
||||
padding-left: 70px;
|
||||
padding-right: 0;
|
||||
padding-top: 70px;
|
||||
max-width: 560px;
|
||||
}
|
||||
|
||||
&__orange-img-wrapper {
|
||||
@include set-location($top: 170px, $right: -50px);
|
||||
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
&__heading {
|
||||
font-size: $fs-xxx-lg;
|
||||
line-height: 125%;
|
||||
}
|
||||
|
||||
&__underline-img {
|
||||
width: unset;
|
||||
}
|
||||
|
||||
&__underline-img-container {
|
||||
@include set-location($bottom: -10px, $left: 8px);
|
||||
}
|
||||
|
||||
&__description {
|
||||
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 set-location($top: -50px, $left: 220px);
|
||||
|
||||
display: block;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
&__search-form {
|
||||
@include size(auto, 54px);
|
||||
}
|
||||
|
||||
&__slider-container {
|
||||
display: block;
|
||||
@include set-location($bottom: -135px, $left: 65px);
|
||||
}
|
||||
|
||||
// End content
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
.welcome {
|
||||
padding-top: 0;
|
||||
|
||||
// Start banner
|
||||
&__banner {
|
||||
padding-right: 96px;
|
||||
}
|
||||
|
||||
&__banner-container {
|
||||
@include size(100%, auto);
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
padding-right: 29px;
|
||||
}
|
||||
|
||||
&__arrow-img-up {
|
||||
@include set-location($top: 4px, $right: -34px);
|
||||
}
|
||||
|
||||
&__orange-img-wrapper {
|
||||
@include set-location($top: 110px, $right: -50px);
|
||||
}
|
||||
|
||||
&__arrow-down-img-wrapper {
|
||||
@include set-location($top: -40px, $left: 223px);
|
||||
}
|
||||
|
||||
&__lines-background {
|
||||
@include set-location($top: -85px, $right: -96px);
|
||||
}
|
||||
|
||||
&__review-card {
|
||||
@include set-location($top: 160px, $left: 1px);
|
||||
}
|
||||
|
||||
&__rate-card {
|
||||
@include set-location($top: 168px, $right: -62px);
|
||||
}
|
||||
|
||||
&__food-img:nth-child(2) {
|
||||
@include set-location($bottom: 108px, $left: -18px);
|
||||
}
|
||||
|
||||
&__food-img:nth-child(3) {
|
||||
@include set-location($bottom: -29px, $left: 151px);
|
||||
}
|
||||
|
||||
&__food-img:nth-child(4) {
|
||||
@include set-location($bottom: -19px, $right: 107px);
|
||||
}
|
||||
|
||||
&__food-img:nth-child(5) {
|
||||
@include set-location($bottom: 125px, $right: -1px);
|
||||
}
|
||||
|
||||
// End banner
|
||||
|
||||
&__container {
|
||||
@include flex-layout($align: unset, $gap: 50px);
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-top: 81px;
|
||||
}
|
||||
|
||||
&__heading {
|
||||
max-width: 530px;
|
||||
}
|
||||
|
||||
&__text-box {
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
||||
.delivery-text-box {
|
||||
font-size: $fs-xxx-lg;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: 29px;
|
||||
}
|
||||
|
||||
&__search-form {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
&__slider-container {
|
||||
@include set-location($bottom: -58px, $left: 68px);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user