redrockjs/fire-exam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fotter

Browse Source
This commit is contained in:
Valery Grunenko
2025-06-06 13:00:19 +03:00
parent e861d2e025
commit dd452a950d
9 changed files with 344 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
src/views/home/ui/contacts/contacts.module.scss
View File

@@ -1,21 +1,62 @@
.Contacts {
.Container {
position: relative;
z-index: 2;
background: $color-lightgray;
border-radius: rem(28px);
padding: rem(160px) 0;
padding: rem(32px) 0 0;
@include iftablet {
padding: rem(60px) 0 rem(40px);
}
@include iflaptop {
padding: rem(60px) 0 rem(60px);
}
@include ifdesktop {
padding: rem(160px) 0;
}
}
.InnerContainer {
.Contacts {
margin: 0 auto;
width: rem(1340px);
@include iftablet {
width: rem(712px);
}
@include iflaptop {
width: rem(930px);
}
@include ifdesktop {
width: rem(1340px);
}
}
.Header {
font-family: $font-open-sans;
font-weight: $font-semi-bold;
font-size: rem(60px);
font-size: rem(26px);
line-height: 100%;
color: $color-text;
margin-bottom: rem(80px);
margin-bottom: rem(40px);
padding: 0 rem(20px);
@include iftablet {
font-size: rem(28px);
padding: unset;
}
@include iflaptop {
font-size: rem(36px);
margin-bottom: rem(60px);
}
@include ifdesktop {
font-size: rem(60px);
margin-bottom: rem(80px);
}
}
.Clients {
@@ -26,8 +67,25 @@
justify-content: space-around;
align-items: center;
gap: rem(40px);
max-width: rem(1200px);
margin-bottom: rem(160px);
padding: 0 0 rem(32px);
@include iftablet {
gap: rem(40px);
max-width: rem(1200px);
margin-bottom: rem(160px);
}
@include iflaptop {
gap: rem(40px);
max-width: rem(1200px);
margin-bottom: rem(160px);
}
@include ifdesktop {
gap: rem(40px);
max-width: rem(1200px);
margin-bottom: rem(160px);
}
.Client {
@@ -42,13 +100,33 @@
position: relative;
background: #292E3D;
display: flex;
flex-direction: row;
flex-direction: column;
gap: rem(40px);
overflow: hidden;
padding: rem(60px) rem(50px);
border-radius: rem(28px);
overflow: hidden;
margin-bottom: rem(80px);
@include iftablet {
flex-direction: row;
gap: unset;
padding: rem(60px) rem(50px);
border-radius: rem(28px);
margin-bottom: rem(120px);
}
@include iflaptop {
padding: rem(60px) rem(50px);
border-radius: rem(28px);
margin-bottom: rem(100px);
}
@include ifdesktop {
padding: rem(60px) rem(50px);
border-radius: rem(28px);
margin-bottom: rem(160px);
}
&:after {
content: '';
display: block;
@@ -78,10 +156,25 @@
z-index: 2;
font-family: $font-open-sans;
font-weight: $font-semi-bold;
font-size: rem(48px);
font-size: rem(26px);
line-height: 100%;
color: $color-white;
margin-bottom: rem(80px);
margin-bottom: rem(16px);
@include iftablet {
font-size: rem(28px);
margin-bottom: rem(60px);
}
@include iflaptop {
font-size: rem(36px);
margin-bottom: rem(80px);
}
@include ifdesktop {
font-size: rem(48px);
margin-bottom: rem(80px);
}
}
.SubTitle {
@@ -89,10 +182,22 @@
z-index: 2;
font-family: $font-open-sans;
font-weight: $font-light;
font-size: rem(32px);
font-size: rem(16px);
line-height: 100%;
color: $color-white;
max-width: rem(720px);
@include iftablet {
font-size: rem(18px);
}
@include iflaptop {
font-size: rem(20px);
}
@include ifdesktop {
font-size: rem(32px);
max-width: rem(720px);
}
}
}
@@ -103,7 +208,12 @@
display: flex;
flex-direction: column;
justify-content: center;
align-self: center;
gap: rem(20px);
@include iftablet {
align-self: unset;
}
}
}
@@ -112,38 +222,109 @@
iframe {
border-radius: rem(28px);
width: 100%;
height: rem(820px);
@include iftablet {
height: rem(300px);
}
@include iflaptop {
height: rem(400px);
}
@include ifdesktop {
height: rem(620px);
}
}
.Contacts {
position: absolute;
z-index: 2;
top: rem(-40px);
right: rem(180px);
border-radius: rem(28px);
background: $color-white;
width: rem(440px);
padding: rem(40px) rem(35px) rem(20px);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
background: $color-white;
bottom: 0;
border-radius: rem(28px);
width: 100%;
height: fit-content;
padding: rem(40px) rem(35px) rem(20px);
@include iftablet {
top: rem(-60px);
right: rem(60px);
border-radius: rem(28px);
width: rem(240px);
padding: rem(20px) rem(20px) rem(10px);
}
@include iflaptop {
top: rem(-30px);
right: rem(100px);
border-radius: rem(28px);
width: rem(260px);
padding: rem(40px) rem(20px) rem(20px);
}
@include ifdesktop {
top: rem(-40px);
right: rem(180px);
border-radius: rem(28px);
width: rem(440px);
padding: rem(40px) rem(35px) rem(40px);
}
.Title {
position: relative;
font-family: $font-open-sans;
font-weight: $font-semi-bold;
font-size: rem(48px);
font-size: rem(28px);
line-height: 100%;
color: $color-text;
text-align: right;
margin-bottom: rem(32px);
margin-bottom: rem(20px);
align-self: center;
@include iftablet {
font-size: rem(28px);
align-self: center;
margin-bottom: rem(40px);
}
@include iflaptop {
font-size: rem(32px);
}
@include ifdesktop {
font-size: rem(48px);
margin-bottom: rem(32px);
}
.LedOn {
position: absolute;
bottom: rem(6px);
left: rem(6px);
bottom: -2px;
left: 0;
width: rem(20px);
@include iftablet {
bottom: -1px;
width: rem(20px);
}
@include iflaptop {
bottom: 1px;
left: 1px;
width: rem(24px);
}
@include ifdesktop {
bottom: rem(6px);
left: rem(6px);
width: unset;
}
}
}
@@ -151,19 +332,51 @@
position: relative;
font-family: $font-open-sans;
font-weight: $font-regular;
font-size: rem(32px);
font-size: rem(16px);
line-height: 130%;
color: $color-text;
margin-bottom: rem(20px);
margin-left: rem(32px);
padding-bottom: rem(20px);
margin: 0 auto;
width: rem(180px);
@include iftablet {
width: unset;
margin: unset;
margin-left: rem(32px);
margin-bottom: rem(20px);
padding-bottom: unset;
}
@include iflaptop {
}
@include ifdesktop {
font-size: rem(32px);
margin-bottom: rem(20px);
margin-left: rem(42px);
}
.Icon {
position: absolute;
left: rem(-48px);
top: rem(8px);
width: rem(32px);
height: rem(32px);
top: 0;
left: rem(-32px);
width: rem(20px);
height: rem(20px);
stroke: #E96526;
@include iftablet {
left: rem(-36px);
width: rem(20px);
height: rem(20px);
}
@include ifdesktop {
top: rem(6px);
left: rem(-48px);
width: rem(32px);
height: rem(32px);
}
}
}
}