Skip to content

Commit

Permalink
new solution
Browse files Browse the repository at this point in the history
  • Loading branch information
@VladaProskura
VladaProskura committed Jul 3, 2024
1 parent 953ad8a commit f10a2a6
Show file tree
Hide file tree
Showing 14 changed files with 489 additions and 165 deletions.
Binary file added src/images/benefits__images/background-first.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/images/benefits__images/first-background.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions src/images/benefits__images/first-image.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/benefits__images/image-first.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/images/benefits__images/rectangle-third.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
342 changes: 235 additions & 107 deletions src/index.html
View file

Large diffs are not rendered by default.

175 changes: 161 additions & 14 deletions src/styles/blocks/benefits.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,28 +69,171 @@

@include on-tablet {
height: 357px;

@include page-grid;

}

@include on-desktop {
height: 828px;
}

@include on-tablet {
@include page-grid;
}

&__image {
display: none;

@include hover(transform, scale(1.05));


&-images {
display: none;
box-sizing: border-box;
width: 633px;
height: 828px;
margin-left: -135px;


@include on-desktop {
display: block;
background-image: url(/src/images/benefits__images/full_image.svg);
width: 633px;
height: 828px;
position: absolute;
margin-left: -135px;
position: relative;
grid-column: 1 / 6;
}


.image {

&__block {
position: absolute;
background: #FFF;
box-sizing: border-box;


@include hover(transform, scale(1.05));

&--first {
width: 214.3px;
height: 240.13px;
transform: rotate(-20deg);
top: 88.2px;
left: 86.58px;
}

&--second {
width: 189.33px;
height: 212.11px;
transform: rotate(-28.89deg);
top: 41px;
left: 306.86px;
}

&--third {
width: 214.29px;
height: 240.14px;
top: 359px;
left: 50px;
z-index: 2;
}

&--fourth {
width: 214.3px;
height: 240.13px;
transform: rotate(-15.19deg);
top: 265px;
left: 258px;
}

&--fifth {
width: 214.3px;
height: 240.13px;
transform: rotate(-15.19deg);
top: 549.61px;
left: 136.6px;
z-index: 1;
}

&--sixth {
width: 214.33px;
height: 240.1px;
transform: rotate(-30.43deg);
top: 493.13px;
left: 355.39px;
z-index: 2;
}



&-photo {
display: block;
margin: auto;

&--first {
margin-top: 19.46px;
width: 182.55px;
height: 182.64px;
}

&--second {
margin-top: 19.06px;
width: 161.28px;
height: 161.33px;
}

&--third {
margin-top: 15.9px;
width: 182.55px;
height: 182.65px;
}

&--fourth {
margin-top: 21px;
width: 182.55px;
height: 182.64px;
}

&--fifth {
margin-top: 21px;
width: 182.55px;
height: 182.64px;
}

&--sixth {
margin-top: 21px;
width: 182.57px;
height: 182.63px;
}
}

&-paragraph {
color: $middle-light-grey;
font-family: $Proxima_Nova;
font-size: 8.74px;
font-style: normal;
font-weight: 400;
line-height: 131.5%;
margin-top: 6.18px;

&--first {
margin-left: 18px;
}

&--second {
margin-left: 21.76px;

}

&--third {
margin-left: 15.9px;
}

&--fourth {
margin-left: 15.9px;
}

&--fifth {
margin-left: 15.9px;
}

&--sixth {
margin-left: 15.9px;
}
}
}
}
}

Expand Down Expand Up @@ -144,7 +287,7 @@
@include on-desktop {
width: 346px;
top: 186px;
left: 798px;
left: 814px;
}

&__title {
Expand Down Expand Up @@ -243,7 +386,7 @@
@include on-desktop {
position: absolute;
top: 452px;
left: 500px;
left: 530px;
}


Expand All @@ -254,6 +397,10 @@
font-weight: 600;
line-height: 150%; /* 21px */
text-transform: uppercase;

@include on-tablet {
font-family: $Manrope;
}
}

&__arrow {
Expand Down
17 changes: 9 additions & 8 deletions src/styles/blocks/footer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
}


&__address {
&-address {
display: none;

@include on-tablet {
Expand All @@ -37,7 +37,7 @@
}


&__title {
&-title {
color: $black;
font-family: $Bebas-Neue;
font-size: 24px;
Expand All @@ -49,7 +49,7 @@
margin-bottom: 10px;
}

&__point {
&-point {
color: $black;
font-family: $Manrope;
font-size: 16px;
Expand All @@ -60,7 +60,7 @@
}


&__top {
&-top {
@include on-tablet {
grid-column: 3 / 5;
}
Expand All @@ -69,7 +69,7 @@
grid-column: 6 / 8;
}

&__network {
&-network {
position: absolute;
top: -48px;
width: 230px;
Expand Down Expand Up @@ -111,13 +111,14 @@
}
}

&__text {
&-link {
display: flex;
text-align: center;
justify-content: center;
width: 170px;
height: 54px;
margin-left: 44.02px;
text-decoration: none;

@include on-tablet {
margin: 0;
Expand All @@ -133,7 +134,7 @@
left: 3px;
}

&__paragraph {
&-paragraph {
color: $black;
text-align: center;
font-family: $Bebas-Neue;
Expand All @@ -150,7 +151,7 @@
}
}

&__bottom {
&-bottom {
@include on-tablet {
grid-column: 5 / 7;
position: relative;
Expand Down
2 changes: 1 addition & 1 deletion src/styles/blocks/for_whom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -394,7 +394,7 @@
background-image: url(/src/images/rectangle.svg);
}

&--number {
&-number {
width: 15px;
height: 46px;
color: $black;
Expand Down
16 changes: 7 additions & 9 deletions src/styles/blocks/header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@



&__title {
&-title {
margin-top: 25px;
margin-bottom: 30px;
-webkit-text-stroke-width: 0.68px;
Expand Down Expand Up @@ -204,7 +204,7 @@
@include hover(transform, scale(1.1));
}

&__action {
&-action {
height: 80px;
width: 139px;
margin-bottom: 20px;
Expand All @@ -222,7 +222,7 @@
left: 533px;
}

&--price {
&-price {
margin-bottom: 1px;
color: $dark-grey;
font-family: $Manrope;
Expand All @@ -236,7 +236,7 @@
}
}

&--text {
&-text {
display: flex;
width: 139px;
height: 43px;
Expand All @@ -251,7 +251,7 @@
}
}

&__button {
&-button {
display: flex;
justify-content: center;
text-align: center;
Expand All @@ -278,7 +278,7 @@

}

&__text {
&-text {
margin-top: 13px;
color: #121212;
font-family: $Manrope;
Expand All @@ -289,11 +289,9 @@
text-transform: uppercase;
}

&__arrow {
&-arrow {
margin-top: 20px;
}
}


}
}
Loading

0 comments on commit f10a2a6

Please sign in to comment.