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

Update background style

Browse Source
This commit is contained in:
nezumi
2023-07-24 14:20:08 +07:00
parent 4d4c2cd9db
commit 939410d0c7
2 changed files with 45 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
practice/practice-02/src/assets/images/service/background-desktop.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 856 KiB

After

Width:  |  Height:  |  Size: 84 KiB

practice/practice-02/src/styles/layouts/_service.scss
+45 -15
View File
@@ -14,7 +14,7 @@
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
rgba(253, 197, 94, 0.01) 0%, rgba(253, 197, 94, 0.01) 0%,
rgba(253, 197, 94, 0.06) 50%, rgba(253, 197, 94, 0.1) 50%,
rgba(253, 197, 94, 0) 100% rgba(253, 197, 94, 0) 100%
); );
} }
@@ -107,16 +107,33 @@
max-width: 460px; max-width: 460px;
} }
&__img-container {
@include size(100%, 619px);
}
&__background-img { &__background-img {
@include setAbsoluteAndLocation(true, $top: 35px, $left: 0); @include setAbsoluteAndLocation(true, $top: 100px, $left: 0);
}
&__background-color {
@include setAbsoluteAndLocation($top: 400px, $left: -100px);
@include size(400px, 50%);
border-radius: 50%;
background: radial-gradient(
circle,
rgba(253, 197, 94, 0.2),
rgba(253, 197, 94, 0.1),
rgba(253, 197, 94, 0.01),
rgba(253, 197, 94, 0)
);
} }
&__main-img { &__main-img {
@include setAbsoluteAndLocation(true, $top: 30px, $left: 35px); @include setAbsoluteAndLocation(true, $top: 95px, $left: 35px);
} }
&__vegetable-img { &__vegetable-img {
@include setAbsoluteAndLocation(true, $bottom: 30, $left: 50px); @include setAbsoluteAndLocation(true, $bottom: 145px, $left: 50px);
} }
&__heading { &__heading {
@@ -140,28 +157,41 @@
&__container { &__container {
@include flex-container($align-items: center, $gap: 150px); @include flex-container($align-items: center, $gap: 150px);
} }
&__background-color {
display: none;
}
&__img-container {
@include size(100%, 619px);
}
&__background-img { &__background-img {
@include setAbsoluteAndLocation(true, $top: -200px, $left: 0); @include setAbsoluteAndLocation(true, $top: 0px, $left: 0);
}
&__background-color {
@include setAbsoluteAndLocation($left: -150px);
@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.2),
rgba(253, 197, 94, 0.06),
rgba(253, 197, 94, 0.01),
rgba(253, 197, 94, 0),
rgba(253, 197, 94, 0)
);
}
&__description {
margin-top: 21px;
} }
&__main-img { &__main-img {
@include setAbsoluteAndLocation(true, $top: 70px, $left: 70px); @include setAbsoluteAndLocation(true, $top: -17px, $left: 70px);
} }
&__vegetable-img { &__vegetable-img {
@include setAbsoluteAndLocation(true, $bottom: 10, $left: 95px); @include setAbsoluteAndLocation(true, $bottom: 95px, $left: 105px);
} }
&__content { &__content {
padding-top: 220px; padding-top: 50px;
} }
} }
} }