From 453c1b85f9fb11cfe21a47004f41e0e4fc9472da Mon Sep 17 00:00:00 2001
From: VasiliyVD <avepupsik@gmail.com>
Date: Fri, 27 Mar 2026 12:27:17 +0900
Subject: [PATCH] =?UTF-8?q?=D0=97=D0=B0=D0=B3=D1=80=D1=83=D0=B7=D0=B8?=
 =?UTF-8?q?=D1=82=D1=8C=20=D1=84=D0=B0=D0=B9=D0=BB=D1=8B=20=D0=B2=20=C2=AB?=
 =?UTF-8?q?src/css=C2=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/Button.css  |  35 +++
 src/css/Home.css    | 551 ++++++++++++++++++++++++++++++++++++++++++++
 src/css/Layout.css  |  20 ++
 src/css/Padding.css |  14 ++
 src/css/Title.css   |  18 ++
 5 files changed, 638 insertions(+)
 create mode 100644 src/css/Button.css
 create mode 100644 src/css/Home.css
 create mode 100644 src/css/Layout.css
 create mode 100644 src/css/Padding.css
 create mode 100644 src/css/Title.css

diff --git a/src/css/Button.css b/src/css/Button.css
new file mode 100644
index 0000000..89ec149
--- /dev/null
+++ b/src/css/Button.css
@@ -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;
+}
\ No newline at end of file
diff --git a/src/css/Home.css b/src/css/Home.css
new file mode 100644
index 0000000..319fa89
--- /dev/null
+++ b/src/css/Home.css
@@ -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;
+        
+    }
+}
\ No newline at end of file
diff --git a/src/css/Layout.css b/src/css/Layout.css
new file mode 100644
index 0000000..181533e
--- /dev/null
+++ b/src/css/Layout.css
@@ -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;
+        }
+    }
+}
+
diff --git a/src/css/Padding.css b/src/css/Padding.css
new file mode 100644
index 0000000..d1d10d6
--- /dev/null
+++ b/src/css/Padding.css
@@ -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;
+    }
+}
diff --git a/src/css/Title.css b/src/css/Title.css
new file mode 100644
index 0000000..5cbfe5c
--- /dev/null
+++ b/src/css/Title.css
@@ -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;
+        }
+}
\ No newline at end of file