Merge pull request #11 from AlexeyRezanov/master

htmlacademy-adaptive · Jun 16, 2024 · cdb0d4c · cdb0d4c
2 parents 5609f54 + 9551469
commit cdb0d4c
Show file tree

Hide file tree

Showing 17 changed files with 201 additions and 91 deletions.
diff --git a/source/catalog.html b/source/catalog.html
@@ -49,7 +49,9 @@ <h1 class="products__title">Каталог продукции</h1>
         <h2 class="visually-hidden">Основные товары</h2>
         <ul class="products__list products-list">
           <li class="products-list__item card">
-            <h3 class="card__title">Cat Energy&nbsp;<br>PRO<br>&nbsp;500&nbsp;г</h3>
+            <a href="#">
+              <h3 class="card__title">Cat Energy&nbsp;<br>PRO<br>&nbsp;500&nbsp;г</h3>
+            </a>
             <a class="card__link" href="#">
               <picture>
                 <source media="(min-width: 768px)" type="image/webp"
@@ -76,10 +78,12 @@ <h3 class="card__title">Cat Energy&nbsp;<br>PRO<br>&nbsp;500&nbsp;г</h3>
                 <dd class="card__dd">700&nbsp;₽</dd>
               </div>
             </dl>
-            <button class="card__button button" type="button">Заказать</button>
+            <a class="card__button button" href="#">Заказать</a>
           </li>
           <li class="products-list__item card">
-            <h3 class="card__title">Cat Energy&nbsp;<br>PRO<br>&nbsp;1000&nbsp;г</h3>
+            <a href="#">
+              <h3 class="card__title">Cat Energy&nbsp;<br>PRO<br>&nbsp;1000&nbsp;г</h3>
+            </a>
             <a class="card__link" href="#">
               <picture>
                 <source media="(min-width: 1440px)" type="image/webp"
@@ -110,10 +114,12 @@ <h3 class="card__title">Cat Energy&nbsp;<br>PRO<br>&nbsp;1000&nbsp;г</h3>
                 <dd class="card__dd">1000&nbsp;₽</dd>
               </div>
             </dl>
-            <button class="card__button button" type="button">Заказать</button>
+            <a class="card__button button" href="#">Заказать</a>
           </li>
           <li class="products-list__item card">
-            <h3 class="card__title">Cat Energy&nbsp;<br>PRO<br>&nbsp;500&nbsp;г</h3>
+            <a href="#">
+              <h3 class="card__title">Cat Energy&nbsp;<br>PRO<br>&nbsp;500&nbsp;г</h3>
+            </a>
             <a class="card__link" href="#">
               <picture>
                 <source media="(min-width: 768px)" type="image/webp"
@@ -140,10 +146,12 @@ <h3 class="card__title">Cat Energy&nbsp;<br>PRO<br>&nbsp;500&nbsp;г</h3>
                 <dd class="card__dd">700&nbsp;₽</dd>
               </div>
             </dl>
-            <button class="card__button button" type="button">Заказать</button>
+            <a class="card__button button" href="#">Заказать</a>
           </li>
           <li class="products-list__item card">
-            <h3 class="card__title">Cat Energy&nbsp;<br>PRO<br>&nbsp;1000&nbsp;г</h3>
+            <a href="#">
+              <h3 class="card__title">Cat Energy&nbsp;<br>PRO<br>&nbsp;1000&nbsp;г</h3>
+            </a>
             <a class="card__link" href="#">
               <picture>
                 <source media="(min-width: 1440px)" type="image/webp"
@@ -174,10 +182,12 @@ <h3 class="card__title">Cat Energy&nbsp;<br>PRO<br>&nbsp;1000&nbsp;г</h3>
                 <dd class="card__dd">1000&nbsp;₽</dd>
               </div>
             </dl>
-            <button class="card__button button" type="button">Заказать</button>
+            <a class="card__button button" href="#">Заказать</a>
           </li>
           <li class="products-list__item card">
-            <h3 class="card__title">Cat Energy&nbsp;<br>SLIM<br>&nbsp;500&nbsp;г</h3>
+            <a href="#">
+              <h3 class="card__title">Cat Energy&nbsp;<br>SLIM<br>&nbsp;500&nbsp;г</h3>
+            </a>
             <a class="card__link" href="#">
               <picture>
                 <source media="(min-width: 768px)" type="image/webp"
@@ -204,10 +214,12 @@ <h3 class="card__title">Cat Energy&nbsp;<br>SLIM<br>&nbsp;500&nbsp;г</h3>
                 <dd class="card__dd">400&nbsp;₽</dd>
               </div>
             </dl>
-            <button class="card__button button" type="button">Заказать</button>
+            <a class="card__button button" href="#">Заказать</a>
           </li>
           <li class="products-list__item card">
-            <h3 class="card__title">Cat Energy&nbsp;<br>SLIM<br>&nbsp;1000&nbsp;г</h3>
+            <a href="#">
+              <h3 class="card__title">Cat Energy&nbsp;<br>SLIM<br>&nbsp;1000&nbsp;г</h3>
+            </a>
             <a class="card__link" href="#">
               <picture>
                 <source media="(min-width: 1440px)" type="image/webp"
@@ -238,10 +250,12 @@ <h3 class="card__title">Cat Energy&nbsp;<br>SLIM<br>&nbsp;1000&nbsp;г</h3>
                 <dd class="card__dd">700&nbsp;₽</dd>
               </div>
             </dl>
-            <button class="card__button button" type="button">Заказать</button>
+            <a class="card__button button" href="#">Заказать</a>
           </li>
           <li class="products-list__item card">
-            <h3 class="card__title">Cat Energy&nbsp;<br>SLIM<br>&nbsp;500&nbsp;г</h3>
+            <a href="#">
+              <h3 class="card__title">Cat Energy&nbsp;<br>SLIM<br>&nbsp;500&nbsp;г</h3>
+            </a>
             <a class="card__link" href="#">
               <picture>
                 <source media="(min-width: 768px)" type="image/webp"
@@ -268,12 +282,14 @@ <h3 class="card__title">Cat Energy&nbsp;<br>SLIM<br>&nbsp;500&nbsp;г</h3>
                 <dd class="card__dd">500&nbsp;₽</dd>
               </div>
             </dl>
-            <button class="card__button button" type="button">Заказать</button>
+            <a class="card__button button" href="#">Заказать</a>
           </li>
           <li class="products-list__item card card--more">
-            <h3 class="card__title card__title--more">Показать еще 100500&nbsp;товаров</h3>
+            <a href="#">
+              <h3 class="card__title card__title--more">Показать еще 100500&nbsp;товаров</h3>
+            </a>
             <p class="card__text">На самом деле вкусов гораздо&nbsp;больше!</p>
-            <button class="card__button button button--more" type="button">Показать все</button>
+            <a class="card__button button button--more" href="#">Показать все</a>
           </li>
         </ul>
       </section>
@@ -282,7 +298,9 @@ <h2 class="additional-products__title">Дополнительные товары
         <div class="additional-products__container-inner">
           <ul class="additional-products__list products-list">
             <li class="products-list__item products-list__item--additional card">
-              <h3 class="card__title card__title--additional">Сахарозаменитель</h3>
+              <a href="#">
+                <h3 class="card__title card__title--additional">Сахарозаменитель</h3>
+              </a>
               <dl class="card__dl card__dl--additional">
                 <div class="card__item card__item--additional">
                   <dt class="visually-hidden">Объём</dt>
@@ -293,10 +311,12 @@ <h3 class="card__title card__title--additional">Сахарозаменитель
                   <dd class="card__dd">200&nbsp;₽</dd>
                 </div>
               </dl>
-              <button class="card__button button" type="button">Заказать</button>
+              <a class="card__button button" href="#">Заказать</a>
             </li>
             <li class="products-list__item products-list__item--additional card">
-              <h3 class="card__title card__title--additional">Питьевая вода</h3>
+              <a href="#">
+                <h3 class="card__title card__title--additional">Питьевая вода</h3>
+              </a>
               <dl class="card__dl card__dl--additional">
                 <div class="card__item card__item--additional">
                   <dt class="visually-hidden">Объём</dt>
@@ -307,10 +327,12 @@ <h3 class="card__title card__title--additional">Питьевая вода</h3>
                   <dd class="card__dd">50&nbsp;₽</dd>
                 </div>
               </dl>
-              <button class="card__button button" type="button">Заказать</button>
+              <a class="card__button button" href="#">Заказать</a>
             </li>
             <li class="products-list__item products-list__item--additional card">
-              <h3 class="card__title card__title--additional">Молоко</h3>
+              <a href="#">
+                <h3 class="card__title card__title--additional">Молоко</h3>
+              </a>
               <dl class="card__dl card__dl--additional">
                 <div class="card__item card__item--additional">
                   <dt class="visually-hidden">Объём</dt>
@@ -321,10 +343,12 @@ <h3 class="card__title card__title--additional">Молоко</h3>
                   <dd class="card__dd">100&nbsp;₽</dd>
                 </div>
               </dl>
-              <button class="card__button button" type="button">Заказать</button>
+              <a class="card__button button" href="#">Заказать</a>
             </li>
             <li class="products-list__item products-list__item--additional card">
-              <h3 class="card__title card__title--additional">Витамины</h3>
+              <a href="#">
+                <h3 class="card__title card__title--additional">Витамины</h3>
+              </a>
               <dl class="card__dl card__dl--additional">
                 <div class="card__item card__item--additional">
                   <dt class="visually-hidden">Объём</dt>
@@ -335,12 +359,12 @@ <h3 class="card__title card__title--additional">Витамины</h3>
                   <dd class="card__dd">300&nbsp;₽</dd>
                 </div>
               </dl>
-              <button class="card__button button" type="button">Заказать</button>
+              <a class="card__button button" href="#">Заказать</a>
             </li>
           </ul>
           <div class="additional-products__text-wrapper">
             <p class="additional-products__text">
-              Закажите все и получите чехол для кота в подарок!
+              Закажите все и&nbsp;получите чехол&nbsp;для кота в подарок!
             </p>
           </div>
         </div>
@@ -358,7 +382,7 @@ <h2 class="visually-hidden">Где мы находимся</h2>
             </address>
           </div>
         </div>
-        <iframe class="location__map"
+        <iframe class="location__map location__map--nojs"
           src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1998.6036257198232!2d30.320472477388492!3d59.938719162093484!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4696310fca145cc1%3A0x42b32648d8238007!2z0JHQvtC70YzRiNCw0Y8g0JrQvtC90Y7RiNC10L3QvdCw0Y8g0YPQuy4sIDE5LzgsINCh0LDQvdC60YIt0J_QtdGC0LXRgNCx0YPRgNCzLCAxOTExODY!5e0!3m2!1sru!2sru!4v1713266432749!5m2!1sru!2sru"
           width="320"
           height="362"
@@ -367,6 +391,20 @@ <h2 class="visually-hidden">Где мы находимся</h2>
           referrerpolicy="no-referrer-when-downgrade"
           title="Карта Санкт-Петербурга"
         ></iframe>
+        <picture>
+          <source media="(min-width: 1440px)" type="image/webp"
+          srcset="img/location-desktop.webp 1x, img/location-desktop@2x.webp 2x" width="1440" height="400">
+          <source media="(min-width: 768px)" type="image/webp"
+            srcset="img/location-tablet.webp 1x, img/location-tablet@2x.webp 2x" width="768" height="400">
+          <source type="image/webp"
+            srcset="img/location-mobile.webp 1x, img/location-mobile@2x.webp 2x" width="320" height="362">
+          <source media="(min-width: 1440px)" type="image/png"
+            srcset="img/location-desktop.png 1x, img/location-desktop@2x.png 2x" width="1440" height="400">
+          <source media="(min-width: 768px)" type="image/png"
+            srcset="img/location-tablet.png 1x, img/location-tablet@2x.png 2x" width="768" height="400">
+          <img class="location__img location__img--nojs" src="img/location-mobile.png"
+            srcset="img/location-mobile@2x.png 2x" width="320" height="362" alt="Карта с геолокацией">
+        </picture>
       </section>
     </main>
 

diff --git a/source/form.html b/source/form.html
@@ -106,13 +106,13 @@ <h1 class="form-section__title">Подбор программы</h1>
               <legend class="form__title">Контактные данные (владельца кота)</legend>
               <ul class="form__list">
                 <li class="form__item">
-                  <label class="form__label">
+                  <label class="form__label form__label--email">
                     <span class="form__text">E-&NoBreak;mail:*</span>
                     <input class="form__input form__input--email" type="email" placeholder="kuklachev@gmail.com" name="mail" required>
                   </label>
                 </li>
                 <li class="form__item">
-                  <label class="form__label">
+                  <label class="form__label form__label--tel">
                     <span class="form__text">Телефон:*</span>
                     <input class="form__input form__input--tel" type="tel" placeholder="8 (960) 900-60-90" name="phone" required>
                   </label>
@@ -175,7 +175,7 @@ <h2 class="visually-hidden">Где мы находимся</h2>
             </address>
           </div>
         </div>
-        <iframe class="location__map"
+        <iframe class="location__map location__map--nojs"
           src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1998.6036257198232!2d30.320472477388492!3d59.938719162093484!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4696310fca145cc1%3A0x42b32648d8238007!2z0JHQvtC70YzRiNCw0Y8g0JrQvtC90Y7RiNC10L3QvdCw0Y8g0YPQuy4sIDE5LzgsINCh0LDQvdC60YIt0J_QtdGC0LXRgNCx0YPRgNCzLCAxOTExODY!5e0!3m2!1sru!2sru!4v1713266432749!5m2!1sru!2sru"
           width="320"
           height="362"
@@ -184,6 +184,20 @@ <h2 class="visually-hidden">Где мы находимся</h2>
           referrerpolicy="no-referrer-when-downgrade"
           title="Карта Санкт-Петербурга"
         ></iframe>
+        <picture>
+          <source media="(min-width: 1440px)" type="image/webp"
+          srcset="img/location-desktop.webp 1x, img/location-desktop@2x.webp 2x" width="1440" height="400">
+          <source media="(min-width: 768px)" type="image/webp"
+            srcset="img/location-tablet.webp 1x, img/location-tablet@2x.webp 2x" width="768" height="400">
+          <source type="image/webp"
+            srcset="img/location-mobile.webp 1x, img/location-mobile@2x.webp 2x" width="320" height="362">
+          <source media="(min-width: 1440px)" type="image/png"
+            srcset="img/location-desktop.png 1x, img/location-desktop@2x.png 2x" width="1440" height="400">
+          <source media="(min-width: 768px)" type="image/png"
+            srcset="img/location-tablet.png 1x, img/location-tablet@2x.png 2x" width="768" height="400">
+          <img class="location__img location__img--nojs" src="img/location-mobile.png"
+            srcset="img/location-mobile@2x.png 2x" width="320" height="362" alt="Карта с геолокацией">
+        </picture>
       </section>
     </main>
 

diff --git a/source/img/location-desktop.png b/source/img/location-desktop.png
diff --git a/source/img/location-desktop@2x.png b/source/img/location-desktop@2x.png
diff --git a/source/img/location-mobile.png b/source/img/location-mobile.png
diff --git a/source/img/location-mobile@2x.png b/source/img/location-mobile@2x.png
diff --git a/source/img/location-tablet.png b/source/img/location-tablet.png
diff --git a/source/img/location-tablet@2x.png b/source/img/location-tablet@2x.png
diff --git a/source/index.html b/source/index.html
@@ -120,7 +120,7 @@ <h2 class="work-principle__title">Как это работает</h2>
             <p class="work-principle__text">
               Уже через месяц
               наслаждайтесь изменениями
-              к лучшему вашего питомца!
+              к лучшему вашего&nbsp;питомца!
             </p>
           </li>
         </ul>
@@ -195,7 +195,7 @@ <h2 class="visually-hidden">Где мы находимся</h2>
             </address>
           </div>
         </div>
-        <iframe class="location__map"
+        <iframe class="location__map location__map--nojs"
           src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1998.6036257198232!2d30.320472477388492!3d59.938719162093484!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4696310fca145cc1%3A0x42b32648d8238007!2z0JHQvtC70YzRiNCw0Y8g0JrQvtC90Y7RiNC10L3QvdCw0Y8g0YPQuy4sIDE5LzgsINCh0LDQvdC60YIt0J_QtdGC0LXRgNCx0YPRgNCzLCAxOTExODY!5e0!3m2!1sru!2sru!4v1713266432749!5m2!1sru!2sru"
           width="320"
           height="362"
@@ -204,6 +204,20 @@ <h2 class="visually-hidden">Где мы находимся</h2>
           referrerpolicy="no-referrer-when-downgrade"
           title="Карта Санкт-Петербурга"
         ></iframe>
+        <picture>
+          <source media="(min-width: 1440px)" type="image/webp"
+          srcset="img/location-desktop.webp 1x, img/location-desktop@2x.webp 2x" width="1440" height="400">
+          <source media="(min-width: 768px)" type="image/webp"
+            srcset="img/location-tablet.webp 1x, img/location-tablet@2x.webp 2x" width="768" height="400">
+          <source type="image/webp"
+            srcset="img/location-mobile.webp 1x, img/location-mobile@2x.webp 2x" width="320" height="362">
+          <source media="(min-width: 1440px)" type="image/png"
+            srcset="img/location-desktop.png 1x, img/location-desktop@2x.png 2x" width="1440" height="400">
+          <source media="(min-width: 768px)" type="image/png"
+            srcset="img/location-tablet.png 1x, img/location-tablet@2x.png 2x" width="768" height="400">
+          <img class="location__img location__img--nojs" src="img/location-mobile.png"
+            srcset="img/location-mobile@2x.png 2x" width="320" height="362" alt="Карта с геолокацией">
+        </picture>
       </section>
     </main>
 

diff --git a/source/js/script.js b/source/js/script.js
@@ -1,9 +1,14 @@
 let header = document.querySelector('.header');
 let nav = document.querySelector('.nav');
 let navToggle = document.querySelector('.nav__toggle');
+let locationImg = document.querySelector('.location__img');
+let locationMap = document.querySelector('.location__map');
 
 header.classList.remove('header--nojs');
 nav.classList.remove('nav--nojs');
+locationImg.classList.remove('location__img--nojs');
+locationMap.classList.remove('location__map--nojs');
+
 
 navToggle.addEventListener('click', function () {
   if (nav.classList.contains('nav--closed')) {

diff --git a/source/sass/_variables.scss b/source/sass/_variables.scss
@@ -12,7 +12,7 @@
   --color-dark: #000000;
   --color-accent-opacity: rgb(104, 183, 56, 0.85);
   --color-accent: #68b738;
-  --color-accent-alt: rgb(94, 170, 47, 0.6);
+  --color-accent-alt: #5eaa2f;
   --color-error: #ff8282;
 
   --container-width: 320px;

diff --git a/source/sass/blocks/_additional-products.scss b/source/sass/blocks/_additional-products.scss
@@ -62,7 +62,7 @@
 
 .additional-products__text {
   position: relative;
-  max-width: 160px;
+  max-width: 170px;
   margin-top: 0;
   margin-bottom: 43px;
   font-size: 16px;
@@ -115,7 +115,7 @@
   }
 
   .additional-products__text {
-    margin-right: 125px;
+    margin-right: 116px;
     margin-bottom: 0;
     text-align: left;
 

diff --git a/source/sass/blocks/_card.scss b/source/sass/blocks/_card.scss
@@ -1,10 +1,13 @@
 .card {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
+  padding-top: 20px;
+  padding-bottom: 25px;
   align-items: center;
 
   &--more {
     grid-template-columns: 1fr;
+    padding: 25px 0;
     align-content: end;
   }
 }
@@ -107,15 +110,21 @@
 
 @media (min-width: $tablet-width) {
   .card {
+    --space-top: 81px;
     position: relative;
     grid-template-columns: 1fr;
     grid-template-rows: auto auto 1fr auto;
+    padding: 10px 38px 40px;
     align-items: end;
     background-color: var(--color-grey-light);
+    box-shadow: inset 0 var(--space-top) 0 var(--color-light);
 
     &--more {
       position: relative;
       grid-template-rows: auto;
+      margin-top: var(--space-top);
+      padding: 50px 38px 40px;
+      box-shadow: none;
       background-color: transparent;
     }
 
@@ -242,7 +251,8 @@
     &--additional {
       grid-area: 1/2/2/3;
       margin: 0;
-      justify-content: space-between;
+      display: grid;
+      grid-template-columns: 1fr minmax(42px, auto);
     }
   }
 }