form

Ayronhayd · Aug 25, 2024 · 7488827 · 7488827
1 parent 612c763
commit 7488827
Show file tree

Hide file tree

Showing 24 changed files with 129 additions and 7 deletions.
diff --git a/source/img/form/form-desktop.jpg b/source/img/form/form-desktop.jpg
diff --git a/source/img/form/form-desktop.webp b/source/img/form/form-desktop.webp
diff --git a/source/img/form/[email protected] b/source/img/form/[email protected]
diff --git a/source/img/form/[email protected] b/source/img/form/[email protected]
diff --git a/source/img/form/form-mobil.jpg b/source/img/form/form-mobil.jpg
diff --git a/source/img/form/form-mobil.webp b/source/img/form/form-mobil.webp
diff --git a/source/img/form/[email protected] b/source/img/form/[email protected]
diff --git a/source/img/form/[email protected] b/source/img/form/[email protected]
diff --git a/source/img/form/form_tablet.jpg → source/img/form/form-tablet.jpg b/source/img/form/form_tablet.jpg → source/img/form/form-tablet.jpg
diff --git a/source/img/form/form_tablet.webp → source/img/form/form-tablet.webp b/source/img/form/form_tablet.webp → source/img/form/form-tablet.webp
diff --git a/source/img/form/[email protected] → source/img/form/[email protected] b/source/img/form/[email protected] → source/img/form/[email protected]
diff --git a/source/img/form/[email protected] → source/img/form/[email protected] b/source/img/form/[email protected] → source/img/form/[email protected]
diff --git a/source/img/form/form_desktop.jpg b/source/img/form/form_desktop.jpg
diff --git a/source/img/form/form_desktop.webp b/source/img/form/form_desktop.webp
diff --git a/source/img/form/[email protected] b/source/img/form/[email protected]
diff --git a/source/img/form/[email protected] b/source/img/form/[email protected]
diff --git a/source/img/form/form_mobile.jpg b/source/img/form/form_mobile.jpg
diff --git a/source/img/form/form_mobile.webp b/source/img/form/form_mobile.webp
diff --git a/source/img/form/[email protected] b/source/img/form/[email protected]
diff --git a/source/img/form/[email protected] b/source/img/form/[email protected]
diff --git a/source/index.html b/source/index.html
@@ -919,20 +919,19 @@ <h2 class="gallery__title title" data-shadow="Фотогалерея">Фотог
     <section class="form" data-test="form">
       <div class="form__container">
         <h2 class="form__title">Остались вопросы?</h2>
-        <p>Заполните форму и наш оператор свяжется с вами для консультации.</p>
+        <p>Заполните форму и наш оператор свяжется<br> с вами для консультации.</p>
+
         <form class="form__form" action="https://echo.htmlacademy.ru/" method="post">
           <div class="form__container">
             <label class="form__label">
               <span class="visually-hidden">Телефон</span>
-              <input class="form__input form__input--phone" name="phone" type="tel" placeholder="Телефон" required>
-              <span class="form__error form__error-phone">Tолько цифры</span>
+              <input class="form__input form__input--phone" name="phone" type="tel" placeholder="+7(000)-000-00-00" required>
             </label>
           </div>
           <div class="form__container">
             <label class="form__label">
               <span class="visually-hidden">Email</span>
-              <input class="form__input form__input--name" name="name" type="text" placeholder="Имя" required>
-              <span class="form__error form__error-name">только буквы и пробелы</span>
+              <input class="form__input form__input--email" name="email" type="email" placeholder="[email protected]" required>
             </label>
           </div>
           <button class="form__button button" type="submit">Отправить</button>

diff --git a/source/js/modules/form-valid.js b/source/js/modules/form-valid.js
@@ -1,6 +1,6 @@
 const form = document.querySelector('.form__form');
-const nameInput = form.querySelector('.form__input--name');
-const nameError = form.querySelector('.form__error-name');
+const nameInput = form.querySelector('.form__input--email');
+const nameError = form.querySelector('.form__error-email');
 const phoneInput = form.querySelector('.form__input--phone');
 const phoneError = form.querySelector('.form__error-phone');
 const NAME_VALID = /^[a-zA-Zа-яА-ЯЁё\s]+$/;

diff --git a/source/sass/blocks/form.scss b/source/sass/blocks/form.scss
@@ -0,0 +1,122 @@
+.form {
+  background-color: $bg-header;
+  color: $color-white;
+  text-align: center;
+
+  margin-top: 3px;
+  padding: 177px 31px 174px;
+
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-image:
+    image-set(url("../../img/form/form-mobil.webp") 1x type("image/webp"),
+    url("../../img/form/[email protected]") 2x type("image/webp"),
+    url("../../img/form/form-mobil.jpg") 1x type("image/jpeg"),
+    url("../../img/form/[email protected]") 2x type("image/jpeg"));
+
+  @media (min-width: $tablet-width) {
+    padding: 187px 31px 184px;
+    background-image:
+      image-set(url("../../img/form/form-tablet.webp") type("image/webp") 1x,
+      url("../../img/form/[email protected]") type("image/webp") 2x,
+      url("../../img/form/form-tablet.jpg") type("image/jpeg") 1x,
+      url("../../img/form/[email protected]") type("image/jpeg") 2x);
+  }
+
+  @media (min-width: $desktop-width) {
+    padding: 296px 31px 292px;
+    background-image:
+      image-set(
+        url("../../img/form/form-desktop.webp") type("image/webp") 1x,
+        url("../../img/form/[email protected]") type("image/webp") 2x,
+        url("../../img/form/form-desktop.jpg") type("image/jpeg") 1x,
+        url("../../img/form/[email protected]") type("image/jpeg") 2x);
+  }
+
+
+  h2 {
+    font-family: $font-800;
+    font-size: 22px;
+    font-weight: 800;
+    line-height: 22px;
+    margin: 0 0 17px;
+    padding: 0;
+
+    @media (min-width: $tablet-width) {
+      font-size: 25px;
+      line-height: 25px;
+      margin: 0 0 22px;
+    }
+
+    @media (min-width: $desktop-width) {
+      font-size: 35px;
+      line-height: 100%;
+      margin: 0 0 18px;
+    }
+  }
+
+  p {
+    font-size: 12px;
+    line-height: 18px;
+    margin: 0 0 20px;
+    padding: 0;
+
+    @media (min-width: $tablet-width) {
+      font-size: 16px;
+      line-height: 24px;
+      padding: 0 180px;
+      margin: 0 0 25px;
+    }
+
+    @media (min-width: $desktop-width) {
+      margin: 0 0 39px;
+    }
+  }
+}
+
+.form p > br {
+  @media (min-width: $tablet-width) {
+    display: none;
+  }
+}
+
+.form__form {
+  @media (min-width: $desktop-width) {
+    display: flex;
+    justify-content: center;
+    gap: 30px;
+  }
+}
+
+.form__input {
+  width: 258px;
+  padding: 15px 15px 17px;
+  margin-bottom: 8px;
+  border-radius: 2px;
+  border: 1px solid rgba($border, 0.1);
+
+  @media (min-width: $tablet-width) {
+    width: 360px;
+    padding: 20px 30px 17px;
+    margin-bottom: 12px;
+  }
+
+  @media (min-width: $desktop-width) {
+    margin: 0;
+  }
+}
+
+.form__button {
+  margin: 0 auto;
+  width: 258px;
+
+  @media (min-width: $tablet-width) {
+    width: 360px;
+    padding: 20px 20px 17px;
+  }
+
+  @media (min-width: $desktop-width) {
+    margin: 0;
+    width: 180px;
+  }
+}
diff --git a/source/sass/style.scss b/source/sass/style.scss
@@ -27,3 +27,4 @@
 @import "./blocks/reviews";
 @import "./blocks/adv";
 @import "./blocks/gallery";
+@import "./blocks/form";