fix маска html

assets/css/gp-style-tablet.css

@@ -626,6 +626,9 @@ main{
 .form__checkbox-block{
     align-items: start;
 }
+.free .title-1{
+    text-align: center;
+}
 }
 
 /* reviews */

assets/js/main.js

@@ -48,7 +48,7 @@ const projectsSwiper = new Swiper('.projects-swiper', {
             spaceBetween: 24,
         },
         996: {
-            slidesPerView: 1
+            slidesPerView: 10
         },
     },
     // Navigation arrows
@@ -251,6 +251,40 @@ itemModels.forEach(item => {
 })
 // open-modal end
 
+// masks
+
+let phoneInputs = document.querySelectorAll('.input__field[type=phone]');
+
+phoneInputs.forEach(phoneInput => {
+    phoneInput.onfocus = function (event) {
+        let value = phoneInput.value;
+
+        if (value.length == 0) {
+            phoneInput.value += '+7 '
+        }
+    }
+
+    phoneInput.addEventListener('input', function(event) {
+        let value = phoneInput.value,
+            data = event.data,
+            length = value.length;
+
+        if (value.charAt(0) == '+' && length == 1) return;
+
+        if (isNaN(data)) {
+            phoneInput.value = data.slice(0, -1)
+        }
+    
+        if (typeof data != 'object') {
+            if (length == 6 || length == 10) {
+                phoneInput.value = value + ' ';
+            }
+        }
+        
+    });
+})
+
+
 // resize
 window.addEventListener('resize', () => {
     let screenWidth = window.screen.width;

index.html

@@ -278,7 +278,7 @@
                 <div class="phone-search__content">
                     <input type="text" class="phone-search__input" placeholder="Поиск">
 
-                    <div class="phone-search__found">
+                    <div class="phone-search__found active">
                         <!-- <p class="text-1">
                             К сожалению, по вашему запросу ничего не найдено
                         </p> -->
@@ -671,20 +671,20 @@
                         <form class="form" method="post" action="/send-telegram.php">
                             <div class="form__item">
                                 <div class="input__block">
-                                    <input class="input__field" type="text" name="Имя" minlength="2" placeholder="" required>
+                                    <input class="input__field" type="text"  minlength="2" placeholder="" required>
                                     <label class="input__label">Имя</label>
                                     <span class="input__error">Имя введено не верно</span>
                                 </div>
                             </div>
                             <div class="form__item form__item--two">
                                 <div class="input__block">
-                                    <input class="input__field" type="phone" name="Имя" minlength="2" placeholder="" required>
+                                    <input class="input__field" type="phone" pattern="+7\s[0-9]{3}\s[0-9]{3}\s[0-9]{4}" minlength="15" maxlength="15" placeholder="" required>
                                     <label class="input__label">Телефон</label>
                                     <span class="input__error">Телефон введен не верно</span>
                                 </div>
     
                                 <div class="input__block">
-                                    <input class="input__field" type="email" name="Имя" minlength="2" placeholder="" required>
+                                    <input class="input__field" type="email"  minlength="2" placeholder="" required>
                                     <label class="input__label">E-mail</label>
                                     <span class="input__error">E-mail введен не верно</span>
                                 </div>
@@ -693,9 +693,9 @@
                             <div class="form__additional">
                                 <input type="file" id="free__file">
                                 <label for="free__file" class="form__file">
-                                    <button href="#" class="btn-social form__mini-btn">
+                                    <div href="#" class="btn-social form__mini-btn">
                                         <img src="/assets/img/icon/paper-clip.svg" alt="">
-                                    </button>
+                                    </div>
                                     <p class="form-additional__text text-3">Загрузить свой проект на просчет</p>
                                 </label>
                             </div>
@@ -900,21 +900,21 @@
                         <form action="" class="form">
                             <div class="form__item">
                                 <div class="input__block">
-                                    <input class="input__field" type="text" name="Имя" minlength="2" placeholder="" required="">
+                                    <input class="input__field" type="text"  minlength="2" placeholder="" required="">
                                     <label class="input__label">Имя</label>
                                     <span class="input__error">Имя введино не верно</span>
                                 </div>
                             </div>
                             <div class="form__item">
                                 <div class="input__block">
-                                    <input class="input__field" type="phone" name="Имя" minlength="2" placeholder="" required="">
+                                    <input class="input__field" type="phone" pattern="+7\s[0-9]{3}\s[0-9]{3}\s[0-9]{4}" minlength="15" maxlength="15"   minlength="2" placeholder="" required="">
                                     <label class="input__label">Телефон</label>
                                     <span class="input__error">Телефон введен не верно</span>
                                 </div>
                             </div>
                             <div class="form__item">
                                 <div class="input__block">
-                                    <input class="input__field" type="email" name="Имя" minlength="2" placeholder="" required="">
+                                    <input class="input__field" type="email"  minlength="2" placeholder="" required="">
                                     <label class="input__label">E-mail</label>
                                     <span class="input__error">E-mail введен не верно</span>
                                 </div>
@@ -1102,20 +1102,20 @@
                 <form class="form" method="post" action="/send-telegram.php">
                     <div class="form__item">
                         <div class="input__block">
-                            <input class="input__field" type="text" name="Имя" minlength="2" placeholder="" required="">
+                            <input class="input__field" type="text"  minlength="2" placeholder="" required="">
                             <label class="input__label">Имя</label>
                             <span class="input__error">Имя введено не верно</span>
                         </div>
                     </div>
                     <div class="form__item form__item--two">
                         <div class="input__block">
-                            <input class="input__field" type="phone" name="Имя" minlength="2" placeholder="" required="">
+                            <input class="input__field" type="phone" pattern="+7\s[0-9]{3}\s[0-9]{3}\s[0-9]{4}" minlength="15" maxlength="15"   minlength="2" placeholder="" required="">
                             <label class="input__label">Телефон</label>
                             <span class="input__error">Телефон введен не верно</span>
                         </div>
 
                         <div class="input__block">
-                            <input class="input__field" type="email" name="Имя" minlength="2" placeholder="" required="">
+                            <input class="input__field" type="email"  minlength="2" placeholder="" required="">
                             <label class="input__label">E-mail</label>
                             <span class="input__error">E-mail введен не верно</span>
                         </div>
@@ -1124,17 +1124,17 @@
                     <div class="form__additional">
                         <input type="file" id="free__file">
                         <label for="free__file" class="form__file">
-                            <button href="#" class="btn-social form__mini-btn">
+                            <div href="#" class="btn-social form__mini-btn">
                                 <img src="/assets/img/icon/paper-clip.svg" alt="">
-                            </button>
+                            </div>
                             <p class="form-additional__text text-3">Загрузить свой проект на просчет</p>
                         </label>
                     </div>
 
 
                     <div class="form__additional">
-                        <label for="free__agreement" class="form__checkbox-block">
+                        <label for="free__agreement-1" class="form__checkbox-block">
-                            <input type="checkbox" id="free__agreement" class="form__checkbox" required="">
+                            <input type="checkbox" id="free__agreement-1" class="form__checkbox" required="">
                             <div class="form-checkbox__square"></div>
                             <p class="form-additional__text text-3">
                                 Я принимаю<br>
@@ -1162,28 +1162,28 @@
                 <form class="form" method="post" action="/send-telegram.php">
                     <div class="form__item">
                         <div class="input__block">
-                            <input class="input__field" type="text" name="Имя" minlength="2" placeholder="" required="">
+                            <input class="input__field" type="text"  minlength="2" placeholder="" required="">
                             <label class="input__label">Имя</label>
                             <span class="input__error">Имя введено не верно</span>
                         </div>
                     </div>
                     <div class="form__item form__item--two">
                         <div class="input__block">
-                            <input class="input__field" type="phone" name="Имя" minlength="2" placeholder="" required="">
+                            <input class="input__field" type="phone" pattern="+7\s[0-9]{3}\s[0-9]{3}\s[0-9]{4}" minlength="15" maxlength="15"   minlength="2" placeholder="" required="">
                             <label class="input__label">Телефон</label>
                             <span class="input__error">Телефон введен не верно</span>
                         </div>
 
                         <div class="input__block">
-                            <input class="input__field" type="email" name="Имя" minlength="2" placeholder="" required="">
+                            <input class="input__field" type="email"  minlength="2" placeholder="" required="">
                             <label class="input__label">E-mail</label>
                             <span class="input__error">E-mail введен не верно</span>
                         </div>
                     </div>
 
                     <div class="form__additional">
-                        <label for="free__agreement" class="form__checkbox-block">
+                        <label for="free__agreement-2" class="form__checkbox-block">
-                            <input type="checkbox" id="free__agreement" class="form__checkbox" required="">
+                            <input type="checkbox" id="free__agreement-2" class="form__checkbox" required="">
                             <div class="form-checkbox__square"></div>
                             <p class="form-additional__text text-3">
                                 Я принимаю<br>