diff --git a/index.html b/index.html
index cab84b1..a0c71ce 100644
--- a/index.html
+++ b/index.html
@@ -5,8 +5,8 @@
     <script src="scripts/ya.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <noscript><div><img src="https://mc.yandex.ru/watch/96480520" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
-    <link rel="stylesheet" href="style.css?version=6">
-    <script src="scripts/script.js?version=4" defer></script>
+    <link rel="stylesheet" href="style.css?version=8">
+    <script src="scripts/script.js?version=5" defer></script>
     <script src="./scripts/prices.js" defer></script>
     <title>Сочисто! | Уборка квартир в Сочи</title>
     <link rel="icon" href="img/favicon.jpg">
@@ -20,7 +20,7 @@
                     <img class="size-200" src="img/logo400-white.png">
                 </div>
                 <a href="tel:+79628817225">
-                    <div id="phone" class="text-accent white-text">
+                    <div id="phone-in-top" class="text-accent white-text">
                         8 (962) 881-72-25
                     </div>
                 </a>
@@ -50,7 +50,7 @@
                         <h1 class="text-accent white-text place5 fade-in-up">
                         Успейте использовать скидку 10% на первую уборку
                         </h1>
-                        <p class="white-text place5 fade-in-up">
+                        <p class="white-text place5 fade-in-up text">
                             Сделайте первый шаг к безупречной уборке. 
                             Мы обеспечим бережную уборку вашего помещения и  имущества.
                         </p>
@@ -70,6 +70,40 @@ <h1 class="text-accent white-text place5 fade-in-up">
                 </a>
             </div>
         </div>
+        <div id="contact">
+            <div class="container">
+                <h1 class="text-accent">Оставьте заявку</h1>
+                <div id="success" class="fade-in-up">
+                    <div class="container">
+                        <h2 class="centered text-accent">
+                            Спасибо
+                        </h2>
+                        <p class="centered text">
+                            Мы свяжемся с вами в самое ближайшее время для уточнения деталей и записи на уборку.
+                        </p>
+                        <div id="again" class="secondary button text-accent fade-in-up">
+                            Сделать ещё одну заявку
+                        </div>
+                    </div>
+                </div>
+                <div id="hide-after-success">
+                    <p class="text">
+                        Вы сможете узнать всю необходимую информацию и забронировать время уборки.
+                    </p>
+                    <form id="clientForm">
+                        <input class="text input" type="text" id="name" name="name" placeholder="Ваше имя" required>
+                        <input class="text input" type="tel" id="phone" name="phone" placeholder="Ваш телефон" required>
+                        <div class="after-list">
+                            <div id="submit" class="cta button text-accent inner-container">
+                                Перезвоните мне
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                
+                
+            </div>
+        </div>
         <div id="services" class="container">
             <h1 class="text-accent">Какую уборку желаете?</h1>
             <div class="inner-container">
@@ -144,7 +178,7 @@ <h1 class="text-accent">Какую уборку желаете?</h1>
         <div id="special" class="container bg1 white-text">
             <div class="inner-container space-accent">
                 <h2 class="text-accent white-text">Если у Вас особый случай и его нет в списке</h2>
-                <p>
+                <p class="text">
                     При заключении долгосрочных договоров на уборку делаем <span class="text-accent">СКИДКИ</span>.
                 </p>
                 <a href="https://wa.me/+79628817225">
@@ -228,7 +262,7 @@ <h1 class="text-accent">Сколько стоит уборка?</h1>
         </div>
         <div id="closing" class="container">
             <h1 class="text-accent">Оценим точнее по фото</h1>
-            <p>
+            <p class="text">
                 Отправьте нам фотографии и видео с загрязнениями, мы проведём первичную оценку и определим общий объем работ.  
                 Однако, для окончательного подсчёта стоимости, времени и разработки плана действий, 
                 нашему специалисту может понадобиться лично посмотреть и оценить состояние вашего помещения или загрязнения более детально. 
@@ -250,7 +284,7 @@ <h1 class="text-accent">Оценим точнее по фото</h1>
             <h1 class="text-accent">
                 Фотографии процесса
             </h1>
-            <p>
+            <p class="text">
                 Здесь вы можете увидеть процесс в действии. 
                 посмотрите своими глазами, как умелые руки наших клинеров,
                 превращают грязь и беспорядок в идеальный порядок. 
@@ -278,22 +312,22 @@ <h1 class="text-accent">
             </a>
             <div class="flex-space">
                 <a href="https://instagram.com/elizabeth_permanent">
-                    <div class="secondary button btn-icon">
+                    <div class="button btn-icon">
                         <img class="icon size-20" src="img/instagram40.png">
                     </div>
                 </a>
                 <a href="https://vk.me/id854232476">
-                    <div class="secondary button btn-icon">
+                    <div class="button btn-icon">
                         <img class="icon size-20" src="img/vk36.png">
                     </div>
                 </a>
                 <a href="https://t.me/+79628817225">
-                    <div class="secondary button btn-icon">
+                    <div class="button btn-icon">
                         <img class="icon size-20" src="img/telegram40.png">
                     </div>
                 </a>
                 <a href="tel:+79628817225">
-                    <div class="secondary button btn-icon">
+                    <div class="button btn-icon">
                         <img class="icon size-20" src="img/phone40.png">
                     </div>
                 </a>
diff --git a/scripts/script.js b/scripts/script.js
index b09c736..66b6ca0 100644
--- a/scripts/script.js
+++ b/scripts/script.js
@@ -44,4 +44,41 @@ function checkRadio(elementId) {
         };
     }
     scrollToFilters();
-}
\ No newline at end of file
+}
+
+document.getElementById('submit').addEventListener('click', function() {
+    const name = document.getElementById('name').value;
+    const phone = document.getElementById('phone').value;
+    
+    if (name.trim() === '') {
+        console.log('Please fill out NAME!');
+        document.getElementById('name').style.border = '2px solid red'
+        return;
+    }
+    if (phone.trim() === '') {
+        console.log('Please fill out PHONE!');
+        document.getElementById('phone').style.border = '2px solid red'
+        return;
+    }
+     else {
+        console.log('Name:', name);
+        console.log('Phone:', phone);
+
+        document.getElementById('name').disabled = true;
+        document.getElementById('phone').disabled = true;
+        
+        document.getElementById('name').value = '';
+        document.getElementById('phone').value = '';
+
+        document.getElementById('hide-after-success').style.display = 'none';
+        document.getElementById('success').style.display = 'block';
+    };
+});
+
+document.getElementById('again').addEventListener('click', function() {
+    console.log('again click');
+    document.getElementById('name').disabled = false;
+    document.getElementById('phone').disabled = false;
+    document.getElementById('hide-after-success').style.display = 'block';
+    document.getElementById('success').style.display = 'none';
+})
\ No newline at end of file
diff --git a/style.css b/style.css
index 461ac18..15fba88 100644
--- a/style.css
+++ b/style.css
@@ -13,6 +13,8 @@
     --h1-padding: 50px 0;
     --primary: #000;
     --bg-option: #6666ff;
+    --bg-active: #421c75;
+    --success: #b2ff9e;
     --detail-text: #555;
     --adding: #777;
     --standart-radius: 12px;
@@ -118,18 +120,30 @@ body{
     object-fit: cover;
 }
 
-p{
+.text{
     line-height: 25px;
     font-size: 19px;
     font-family: "Roboto"; 
     font-weight: 400;
+}
+
+p{
     margin: 50px 0;
 }
 
-.centespace{
-    text-align: center;
+.input{
+    width: calc(100% - 22px);
+    padding: 10px;
+    border: 1px solid var(--secondary-btn);
+    border-radius: 10px;
+    margin-top: var(--general-margin);
 }
 
+:focus::-webkit-input-placeholder {
+    color: transparent;
+}
+
+
 .logo{
     display: flex;
     justify-content: center;
@@ -212,7 +226,18 @@ a{
     margin: 0 0 var(--general-margin);
     padding: 16px 0;
     border-radius: var(--standart-radius);
-    text-align: center; 
+    text-align: center;
+    user-select: none;
+}
+
+.button:hover{
+    opacity: 0.9;
+    cursor: pointer;
+}
+
+.button:active{
+    background-color: var(--bg-active);
+    box-shadow: none;
 }
 
 .icon{
@@ -296,7 +321,7 @@ input[type="radio"]:checked + label{
     flex-direction: column;
     align-items: center;
     justify-content: space-around;
-    min-width: 50%; 
+    min-width: 50%;
 }
 
 .tile span{
@@ -382,18 +407,17 @@ small{
 
 .photo-grid {
     display: grid;
-    grid-template-columns: repeat(2, 1fr); /* 5 columns for the first row */
-    grid-template-rows: auto auto; /* 2 rows */
-    gap: 10px; /* spacing between photos */
+    grid-template-columns: repeat(2, 1fr); 
+    grid-template-rows: auto auto;
+    gap: 10px;
 }
 
 .photo {
     width: 100%;
     height: auto;
-    object-fit: cover; /* to ensure the image covers the entire area */
+    object-fit: cover;
 }
 
-/* Make the last photo take up 2 columns */
 .photo:nth-child(11) {
     grid-column: span 2;
 }
@@ -406,6 +430,7 @@ small{
 .btn-icon{
     width: 50px;
     height: 20px;
+    margin-bottom: 0px;
 }
 
 .infooter{
@@ -425,7 +450,7 @@ small{
 }
 
 .bubble-container svg {
-	background-color: #00000000;
+    background-color: #00000000;
     margin: -136px 0 -42px;
     width: 100%;
     max-width: 720px;
@@ -462,7 +487,7 @@ circle{
 }
 
 .bubble {
-	animation: rise 4s infinite linear;
+    animation: rise 4s infinite linear;
     -o-animation: rise 4s infinite linear;
     -moz-animation: rise 4s infinite linear;
     -webkit-animation: rise 4s infinite linear;
@@ -474,23 +499,33 @@ circle{
 	opacity: 0;
 }
 
+.centered{
+    text-align: center;
+}
+
+#success{
+    background-color: var(--success);
+    border-radius: 10px;
+    display: none;
+}
+
 @keyframes rise {
-	0% {
-		cy: 200;
+    0% {
+        cy: 200;
 		opacity: 1;
 	}
     50% {
-		opacity: 1;
+        opacity: 1;
 	}
     95% {
-		opacity: .5;
+        opacity: .5;
 	}
     98% {
-		opacity: .1;
+        opacity: .1;
         r: 20;
 	}
 	100% {
-		cy: 100;
+        cy: 100;
 		opacity: 0;
         r: 50;
 	}
@@ -498,12 +533,11 @@ circle{
 
 @keyframes fadeInUp {
     from {
-      opacity: 0;
-      transform: translateY(20px);
+        opacity: 0;
+        transform: translateY(20px);
     }
     to {
-      opacity: 1;
-      transform: translateY(0);
+        opacity: 1;
+        transform: translateY(0);
     }
 }
-  
\ No newline at end of file