VasiliyVD/commit-it
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Загрузить файлы в «src/css»

Browse Source
This commit is contained in:
VasiliyVD
2026-03-27 12:27:17 +09:00
parent 2f73b0e67e
commit 453c1b85f9
5 changed files with 638 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/css/Button.css Normal file
View File

@@ -0,0 +1,35 @@
.button{
display: flex;
flex-direction: row;
padding: 8px 20px;
justify-content: center;
border-radius: 100px;
gap: 4px;
align-items: center;
cursor: pointer;
margin: auto;
transition: all 0.2s ease;
}
.buttonOff{
display: flex;
flex-direction: row;
padding: 8px 20px;
justify-content: center;
border-radius: 100px;
gap: 4px;
align-items: center;
margin: auto;
transition: all 0.2s ease;
}
.button:hover{
box-shadow: 1px 1px 1px 1px rgba(138, 139, 139, 0.96);
}
.button:active{
box-shadow: 3px 3px 3px 3px rgba(138, 139, 139, 0.96);
}
.logo{
padding: 0;
height: 10px;
width: 10px;
}

551
src/css/Home.css Normal file
View File

@@ -0,0 +1,551 @@
.hero{
background-color: #F6F6F9;
width:100%;
border-radius: 16px;
height: 617px;
display: flex;
overflow: hidden;
gap: 40px;
.backround{
height: 420px;
padding: 40px;
@media only screen and (max-width: 1340px) {
display: none;
height: auto;
width: auto;
}
}
.leftSide{
width: 50%;
gap:15px;
display: flex;
flex-direction: column;
padding: 40px;
.leftSide1{
min-width: 570px;
margin-right: auto;
font-size: 12px;
padding: 10px 18px;
color: #828282;
background-color: rgb(255, 255, 255);
border-radius: 999px;
@media only screen and (max-width: 940px) {
min-width: 0px;
}
}
.leftSide2{
width:100%;
font-weight: 500;
line-height: 120%;
color: #1E1E1E;
font-style: normal;
font-size: 36px;
letter-spacing: -0.02em;
a{
color: #1C8EFF;
}
@media only screen and (max-width: 940px) {
font-size: 16px;
}
}
.leftSide3{
width:100%;
font-size: 16px;
color: #828282;
}
.leftSide4{
min-width: 366px;
width:100%;
gap: 15px;
margin-top: 2px;
align-items: flex-start;
display: flex;
flex-direction: row;
}
.leftSide5{
width:100%;
font-size: 12px;
color: #828282;
}
@media only screen and (max-width: 1340px) {
width:100%;
}
@media only screen and (max-width: 460px) {
padding-right: 50px;
}
}
}
.homeContainer{
overflow: hidden;
display:flex;
flex-direction: column;
align-items: center;
gap: 100px
}
.title{
display: flex;
gap: 15px;
justify-content: center;
}
.benefit{
width: 100%;
display: flex;
flex-direction: column;
/* animation: flex auto linear;
animation-timeline: scroll(block); */
.benefitCarousel{
/* animation: slide auto linear;
animation-timeline: scroll(block); */
width: 97%;
padding-top: 50px;
padding-bottom: 50px;
display: flex;
flex-direction: row;
gap: 400px;
align-self: flex-start;
overflow-x: hidden;
overflow-y: hidden;
.BCItem{
position: relative;
min-width: 360px;
max-width: 360px;
height: 440px;
background-color: #F6F6F9;
border-radius: 16px;
.container{
align-items: flex-start;
padding: 40px;
display: flex;
flex-direction: column;
gap: 10px;
}
}
}
.benefitCarousel::-webkit-scrollbar {
display: none;
}
}
.partnerContainer{
position: relative;
width: 99vw;
overflow: hidden;
height: 155px;
display: flex;
align-content: flex-start;
flex-direction: column;
background-color: #F6F6F9;
.partners{
animation: parnters 40s linear infinite;
position: absolute;
left: 100px;
padding: 40px;
display: flex;
gap: 100px;
width: 100%;
max-height: 155px;
}
}
.homeElement{
width: 100%;
}
.services{
display: flex;
flex-direction: column;
gap: 41px;
.serviceBox{
display: flex;
flex-direction: row;
gap: 25px;
.leftSide{
display: flex;
flex-direction: column;
gap: 25px;
.background{
background-color: #2589F8;
border-radius: 16px;
width: 420px;
height: 558px;
.container{
display: flex;
padding: 40px;
flex-direction: column;
align-content: flex-start;
gap:18px;
.top{
width: auto;
font-size:12px;
color: white;
margin-right: auto;
padding: 6px 18px ;
background-color: #FFFFFF4D;
border-radius: 16px;}
}
}
.text{
width: 400px ;
}
}
}
}
.listGrid{
padding-top: 25px;
display: flex;
flex-direction: row;
gap: 25px;
}
.listItemBg{
width: 420px;
height: 580px;
border-radius: 16px;
background-color: #F6F6F9;
}
.listItem{
padding: 10px;
.productImage{
width: 400px;
height: 200px
}
}
.gridItemText{
display: flex;
flex-direction: column;
gap:20px;
padding: 30px;
}
.gridNote{
display: flex;
flex-direction: column;
gap:16px;
}
.noteLogo{
padding-top: 5px;
height: 18px;
align-self: flex-start;
}
.gridNoteItem{
align-items: center;
gap: 10px;
display: flex;
}
.serviceBg{
width: 865px;
height: 266px;
border-radius: 16px;
background-color: #F6F6F9;
}
.serviceContainer{
display: flex;
flex-direction: row;
gap: 40px;
padding: 40px;
}
.largeText{
width: 130px;
display: flex;
align-items: center;
height: 100px;
}
.serviceList{
display: flex;
flex-direction: column;
gap: 25px;
}
.gridNoteList{
display: flex;
flex-direction: column;
gap: 16px;
width: 363px;
min-width: 363px;
}
.middleText{
width: 226px;
}
.license{
background-color: #F6F6F9;
border-radius: 16px;
max-width: 1310px;
.container{
display: flex;
flex-direction: column;
gap: 40px;
padding: 40px;overflow: hidden;
.licenseCarousel{
position: relative;
width: 100%;
align-self: flex-start;
gap: 25px;
display: flex;
flex-direction: row;
transition: all 0.2s ease;
.licenseItem{
display: flex;
height: 390px;
width: 275px;
cursor: pointer;
transition: all 0.2s ease;
}
.licenseItem:active{
box-shadow: 3px 3px 3px 3px rgba(138, 139, 139, 0.96);
}
}
.buttons{
display: flex;
flex-direction: row;
align-self: center;
gap: 24px;
cursor: pointer;
.button{
transition: all 0.2s ease;
padding: 0;
}
.button:hover{
box-shadow: 1px 1px 1px 1px rgba(138, 139, 139, 0.96);
}
.button:active{
box-shadow: 3px 3px 3px 3px rgba(138, 139, 139, 0.96);
}
}
}
}
.case{
max-width: 1310px;
.container{
display: flex;
flex-direction: row;
.left{
border-radius: 16px 0 0 16px ;
background-color: #1C8EFF;
.topContainer{
display: flex;
flex-direction: column;
padding: 40px;
gap:18px;
.top{
width: auto;
font-size:12px;
color: white;
margin-right: auto;
padding: 6px 18px ;
background-color: #FFFFFF4D;
border-radius: 16px;
}
}
}
.right{
border-radius: 0 16px 16px 0;
background-color: #F6F6F9;
.Rightcontainer{
padding: 20px;
gap:20px;
display: flex;
flex-direction: column;
.containerItembg{
background-color: white;
border-radius: 16px;
.containerItem{
display: flex;
flex-direction: column;
padding: 40px;
gap: 20px;
}
}
.containerItembg2{
background-color: rgb(0, 0, 0);
border-radius: 16px;
.containerItem2{
display: flex;
flex-direction: column;
padding: 40px;
gap: 20px;
}
}
}
}
}
}
.formContainer{
display: flex;
flex-direction: row;
max-width: 1310px;
.form{
padding: 40px;
display: flex;
width: 700px;
flex-direction: column;
align-items: flex-start;
gap:16px;
.gridNoteItem{
display: flex;
}
.input{
width: 100%;
display: flex;
padding: 14px 0px 14px 26px;
border-radius: 25px;
border: 1px solid #1C8EFF;
resize: none;
background-color: white;
}
.input::placeholder{
font-size: 16px;
color: #828282;
}
.textareaContainer{
width: 700px;
position: relative;
}
.textareaContainer textarea{
width: 100%;
padding: 14px 0px 14px 26px;
border-radius: 25px;
border: 1px solid #1C8EFF;
resize: none;
font-family: 'Inter';
font-size: 16px;
background-color: white;
}
.textareaContainer label{
position: absolute;
top: 2px;
left: 11px;
user-select: none;
cursor: text;
padding: 8px 16px;
color: #828282;
}
.textareaContainer label::after{
content: ' { необязательно }';
color: #1C8EFF;
}
.textareaContainer textarea:invalid+label {
display: inline-block;
}
.textareaContainer textarea:valid + label {
display: none;
}
.checkBox{
.chek{
width: 22px;
height: 22px;
}
.policy{
color: #828282;
a{
text-decoration: underline;
color: #1C8EFF;
}
}
gap: 20px;
display: flex;
flex-direction: row;
align-items: flex-start;
}
.acceptance{
color:#828282;
a{
text-decoration: underline;
color: #1C8EFF;
}
}
}
.right{
background-color:#F6F6F9;
border-radius: 16px;
.container{
display: flex;
flex-direction: column;
padding: 40px 40px 0 40px;
gap:40px;
.list{
display: flex;
flex-direction: column;
gap: 25px;
.item{
gap:8px;
display: flex;
flex-direction: row;
}
}
.security{
background-color:#ffffff;
border-radius: 16px;
.cnt{
display: flex;
flex-direction: column;
padding: 20px 40px ;
gap: 4px;
.list{
gap:10px;
display: flex;
flex-direction: row;
}
}
}
}
}
}
@keyframes parnters {
0%{
translate: 0% ;
}
50%{
translate: -100% ;
}
100%{
translate: 0% ;
}
}
@keyframes flex {
0%{
align-items: center;
}
36%{
align-items: center;
justify-content : flex-end;
}
}
@keyframes slide {
0%{
column-gap:400px;
}
100%{
column-gap:0px;
}
}

20
src/css/Layout.css Normal file
View File

@@ -0,0 +1,20 @@
.content{
width: 100%;
min-height: 600px;
padding-top: 100px;
@media only screen and (max-width: 480px) {
padding-top: 200px;
}
.inside {
width: 100%;
background: #fff;
min-height: 100%;
@media only screen and (max-width: 480px) {
padding: 0 0;
}
}
}

14
src/css/Padding.css Normal file
View File

@@ -0,0 +1,14 @@
.padding {
display: flex;
flex-direction: column;
width: 94%;
padding-left: 3%;
padding-right: 3%;
padding-bottom: 100px;
background-color: white;
gap: 50px;
@media (max-width: 600px) {
padding-left: 5px;
padding-right: 5px;
}
}

18
src/css/Title.css Normal file
View File

@@ -0,0 +1,18 @@
.textElement{
font-size: 36px;
font-weight: 500;
color: black;
text-align:start ;
@media only screen and (max-width: 1170px) {
font-size: 30px;
}
@media only screen and (max-width: 980px) {
font-size: 24px;
}
@media only screen and (max-width: 790px) {
font-size: 20px;
}
@media only screen and (max-width: 600px) {
font-size: 20px;
}
}