Адаптивная сетка

source/form.html

@@ -16,7 +16,7 @@
 
   <header class="page__header page-header">
 
-    <div class="page-header__container-header">
+    <div class="page-header__container-header container">
       <a class="page-header__logo logo" href="index.html">
         <picture>
           <source width="202" height="59" media="(min-width: 1240px)" srcset="images/logo-desktop.svg"
@@ -26,34 +26,36 @@
           <img class="logo__image" src="./images/logo-mobile.svg" width="33" height="38" alt="Логотип Cat Energy.">
         </picture>
       </a>
-      </picture>
 
-      <a class="page-header__logo-sign" href="index.html">
-        <img src="./images/logo-sign.svg" width="101" height="19" aria-current="page"
-          alt="Логотип Cat Energy.">
+      <a class="page-header__logo-sign" href="#" tabindex="-1">
+        <img src="./images/logo-sign.svg" width="101" height="19" aria-current="page" alt="Логотип Cat Energy.">
       </a>
-      <button class="page-header__toggler-open" type="button">
-        <span class="visually-hidden">Открыть меню.</span>
+
+      <button class="page-header__toggler js-burger" aria-label="бургер меню" type="button">
+        <span class="page-header__toggler-burger"></span>
+        <span class="page-header__toggler-burger"></span>
+        <span class="page-header__toggler-burger"></span>
       </button>
 
     </div>
 
-    <nav class="page-header__nav">
-      <ul class="page-header__menu site-menu">
-        <li class="site-menu__item">
-          <a class="site-menu__link site-menu__link--active" href="index.html" >главная</a>
+    <nav class="page-header__nav site-list js-nav-menu">
+      <ul class="site-list__menu">
+        <li class="site-list__item site-list__item--active">
+          <a class="site-list__link" href="index.html">главная</a>
         </li>
-        <li class="site-menu__item">
-          <a class="site-menu__link" href="catalog.html">каталог продукции</a>
+        <li class="site-list__item">
+          <a class="site-list__link" href="catalog.html">каталог продукции</a>
         </li>
-        <li class="site-menu__item">
-          <a class="site-menu__link" href="#" aria-current="page" tabindex="-1">подбор программы</a>
+        <li class="site-list__item">
+          <a class="site-list__link" href="#" aria-current="page" tabindex="-1">подбор программы</a>
         </li>
       </ul>
     </nav>
   </header>
 
   <main class="page__main page-main">
+
     <section class="page-main__header container">
       <h1 class="page-main__heading common-heading">Подбор программы</h1>
       <p class="page-main__subheading">Заполните анкету, и мы подберем
@@ -89,10 +91,10 @@ <h2 class="visually-hidden">Форма анкеты.</h2>
           </ul>
         </fieldset>
 
-        <fieldset class="form__group field-group">
+        <fieldset class="form__group form__group--target field-group field-group--target">
           <legend class="visually-hidden">Цель программы.</legend>
 
-          <ul class="field-group__list">
+          <ul class="field-group__list field-group__list--target">
             <li class="field-group__item">
               <label class="control control--radio">
                 <input class="control__input" name="target" type="radio" value="fit">
@@ -114,42 +116,50 @@ <h2 class="visually-hidden">Форма анкеты.</h2>
           </ul>
         </fieldset>
 
-        <fieldset class="form__group field-group">
+        <fieldset class="form__group form__group--contacts field-group">
           <legend class="field-group__heading underlined-heading">Контактные данные
             (владельца кота)</legend>
 
-          <ul class="field-group__list">
+          <ul class="field-group__list field-group__list--contacts">
             <li class="field-group__item">
               <label class="field">
                 <span class="field__lead">E-mail:*</span>
-                <input class="field__input field__input--icon" name="e-mail" type="email" placeholder="[email protected]" required>
-                <svg class="field__icon" width="24" height="24" fill="none" stroke="black" viewBox="0 0 24 24" aria-hidden="true">
+                <input class="field__input field__input--icon" name="e-mail" type="email"
+                  placeholder="[email protected]" required>
+                <svg class="field__icon" width="24" height="24" fill="none" stroke="black" viewBox="0 0 24 24"
+                  aria-hidden="true">
                   <use href="./images/icons/stack.svg#ico-mail"></use>
                 </svg>
               </label>
             </li>
             <li class="field-group__item">
               <label class="field">
                 <span class="field__lead">Телефон:*</span>
-                <input class="field__input field__input--icon" name="phone" type="tel" placeholder="8 (960) 900-60-90" required>
-                <svg class="field__icon"  width="24" height="24" fill="none" stroke="black" viewBox="0 0 24 24" aria-hidden="true">
+                <input class="field__input field__input--icon" name="phone" type="tel" placeholder="8 (960) 900-60-90"
+                  required>
+                <svg class="field__icon" width="24" height="24" fill="none" stroke="black" viewBox="0 0 24 24"
+                  aria-hidden="true">
                   <use href="./images/icons/stack.svg#ico-phone"></use>
                 </svg>
               </label>
             </li>
           </ul>
         </fieldset>
 
-        <div class="form__group  field-group">
+        <div class="form__group form__group--comment  field-group">
           <label class="field-group__heading underlined-heading" for="comment">Комментарий</label>
-          <textarea class="field-group__input" name="comment" id="comment" rows="5"
-            placeholder="Расскажите обо всех повадках кота"></textarea>
+
+          <div class="field-group__field field field--no-label">
+            <textarea class="field__input field__input--textarea" name="comment" id="comment" rows="5"
+              placeholder="Расскажите обо всех повадках кота"></textarea>
+          </div>
+
         </div>
 
-        <fieldset class="form__group field-group">
-          <legend class="field-group__heading underlined-heading">Дополнительно.</legend>
+        <fieldset class="form__group form__group--additional field-group field-group--additional">
+          <legend class="field-group__heading underlined-heading">Дополнительно</legend>
 
-          <ul class="field-group__list">
+          <ul class="field-group__list field-group__list--additional">
             <li class="field-group__item">
               <label class="control control--checkbox">
                 <input class="control__input" name="additional" type="checkbox" value="sweetener" checked>
@@ -177,19 +187,24 @@ <h2 class="visually-hidden">Форма анкеты.</h2>
           </ul>
         </fieldset>
 
-        <button class="form__button button" type="submit">Отправить заявку</button>
-        <p class="form__additional">* — Обязательные поля</p>
+        <div class="form__footer">
+          <button class="form__button button" type="submit">Отправить заявку</button>
+          <p class="form__additional">* — Обязательные поля</p>
+        </div>
       </form>
     </section>
 
     <footer class="page-main__footer contacts">
       <h2 class="visually-hidden">Контакты.</h2>
 
-      <p class="contacts__heading">приглашаем
-        к сотрудничеству
-        дилеров!</p>
-      <address class="contacts__address">ул. Большая Конюшенная, д. 19/8 Санкт-Петербург</address>
-      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1998.6036257198127!2d30.32047247728289!3d59.93871916209366!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4696310fca145cc1%3A0x42b32648d8238007!2z0JHQvtC70YzRiNCw0Y8g0JrQvtC90Y7RiNC10L3QvdCw0Y8g0YPQuy4sIDE5LzgsINCh0LDQvdC60YIt0J_QtdGC0LXRgNCx0YPRgNCzLCAxOTExODY!5e0!3m2!1sru!2sru!4v1701614447519!5m2!1sru!2sru" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+      <div class="contacts__container container">
+        <p class="contacts__heading">приглашаем
+          к сотрудничеству
+          дилеров!</p>
+        <address class="contacts__address">ул. Большая Конюшенная, д. 19/8 Санкт-Петербург</address>
+      </div>
+      <iframe class="contacts__map"
+        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1998.6036257198127!2d30.32047247728289!3d59.93871916209366!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4696310fca145cc1%3A0x42b32648d8238007!2z0JHQvtC70YzRiNCw0Y8g0JrQvtC90Y7RiNC10L3QvdCw0Y8g0YPQuy4sIDE5LzgsINCh0LDQvdC60YIt0J_QtdGC0LXRgNCx0YPRgNCzLCAxOTExODY!5e0!3m2!1sru!2sru!4v1701614447519!5m2!1sru!2sru"></iframe>
     </footer>
   </main>
 
@@ -201,38 +216,43 @@ <h2 class="visually-hidden">Контакты.</h2>
 
       <ul class="page-footer__social social">
         <li class="social__item">
-          <a class="social__link" href="#">
+          <a class="social__link" href="https://vk.com/htmlacademy">
             <span class="visually-hidden">Вконтакте</span>
-            <svg width="27" height="17" viewBox="0 0 27 17">
+            <svg class="social__img" width="27" height="17" viewBox="0 0 27 17">
               <use href="./images/icons/stack.svg#vk"></use>
             </svg>
           </a>
         </li>
         <li class="social__item">
-          <a class="social__link" href="#">
+          <a class="social__link" href="https://www.youtube.com/user/htmlacademyru">
             <span class="visually-hidden">YouTube</span>
-            <svg width="24" height="18" viewBox="0 0 24 18">
+            <svg class="social__img" width="24" height="18" viewBox="0 0 24 18">
               <use href="./images/icons/stack.svg#youtube"></use>
             </svg>
           </a>
         </li>
         <li class="social__item">
-          <a class="social__link" href="#">
+          <a class="social__link" href="https://t.me/htmlacademy">
             <span class="visually-hidden">Telegram</span>
-            <svg width="20" height="18" viewBox="0 0 20 18">
+            <svg class="social__img" width="20" height="18" viewBox="0 0 20 18">
               <use href="./images/icons/stack.svg#telegram"></use>
             </svg>
           </a>
         </li>
       </ul>
 
-      <div class="page-footer__developer developer">
-        <a class="developer__link" href="https://htmlacademy.ru/intensive/adaptive">
+
+      <div class="page-footer__developer-conteiner">
+        <a class="page-footer__developer developer" href="https://htmlacademy.ru/intensive/adaptive">
           <span class="visually-hidden">Разработано в</span>
           HTML Academy
         </a>
-        <a class="developer__link" href="https://htmlacademy.ru/intensive/adaptive">
-          <img class="developer__image" src="./images/icons/stack.svg#logo-academy" width="27" height="34" alt="Логотип HTML Academy.">
+        <a class="page-footer__developer developer" href="https://htmlacademy.ru/intensive/adaptive">
+          <span class="visually-hidden">HTML Academy logo</span>
+          <svg class="developer__image" width="27" height="34" viewBox="0 0 27 34">
+            <use href="./images/icons/stack.svg#logo-academy">
+            </use>
+          </svg>
         </a>
       </div>
     </div>