работа над планшетной версией

eldarsarkynov · May 11, 2024 · d52e78a · d52e78a
1 parent 384a4bc
commit d52e78a
Show file tree

Hide file tree

Showing 15 changed files with 235 additions and 99 deletions.
diff --git a/source/icons/cat-wide-tablet.svg b/source/icons/cat-wide-tablet.svg
diff --git a/source/index.html b/source/index.html
@@ -4,7 +4,6 @@
 
 <head>
   <meta charset="UTF-8">
-
   <title>mobile</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" href="styles/styles.css">
@@ -62,28 +61,25 @@
       </div>
     </div>
   </header>
-  <main class="container promo">
+  <main class="container">
     <section class="promo">
       <div class="promo__block">
         <div class="promo__wrapper">
           <h1 class="promo__title">Функциональное<br> питание для котов</h1>
-          <header class="promo__header">
-            <h2 class="visually-hidden">Реклама подбора программы питания</h2>
-            <p class="promo__slogan">Занялся собой? Займись котом!</p>
-            <picture>
-              <source media="(min-width: 1200px)" width="552" height="499" type="image/jpeg" srcset="images/index-can-deskstop@1x.png, images/index-can-deskstop@2x.png 2x">
-              <source media="(min-width: 768px)" width="709" height="609" type="image/jpeg" srcset="images/index-can-tablet@1x.png, images/index-can-tablet@2x.png 2x">
-              <img class="promo__background" src="images/index-can-mobile@1x.png" width="280" height="270" srcset="images/index-can-mobile@2x.png 2x" alt="Задний фон на зеленом цвете, кот облизывающий свои усы">
-            </picture>
-          </header>
+          <h2 class="visually-hidden">Реклама подбора программы питания</h2>
+          <p class="promo__slogan">Занялся собой? Займись котом!</p>
+          <picture>
+            <source media="(min-width: 1200px)" width="552" height="499" type="image/jpeg" srcset="images/index-can-deskstop@1x.png, images/index-can-deskstop@2x.png 2x">
+            <source media="(min-width: 768px)" width="709" height="609" type="image/jpeg" srcset="images/index-can-tablet@1x.png, images/index-can-tablet@2x.png 2x">
+            <img class="promo__background" src="images/index-can-mobile@1x.png" width="280" height="270" srcset="images/index-can-mobile@2x.png 2x" alt="Задний фон на зеленом цвете, кот облизывающий свои усы">
+          </picture>
         </div>
       </div>
-    </section>
-    <div class="program">
-      <div class="program__wrapper">
+      <div class="program">
         <a class="program__link" href="catalog.html">Подобрать программу</a>
       </div>
-    </div>
+    </section>
+
     <section class="preview">
       <div class="preview__wrapper">
         <h2 class="visually-hidden">Описание программы питания</h2>
@@ -176,7 +172,7 @@ <h2 class="visually-hidden">Слайдер кота до и после</h2>
     <section class="contacts">
       <div class="contacts__wrapper">
         <h2 class="visually-hidden">Адрес магазина</h2>
-        <h2 class="contacts__title">Приглашаем к сотрудничеству дилеров!</h2>
+        <h2 class="contacts__title">Приглашаем<br> к сотрудничеству дилеров!</h2>
         <p class="contacts__description">ул. Большая
           Конюшенная, д. 19/8
           Санкт-Петербург</p>

diff --git a/source/styles/blocks/advantages.scss b/source/styles/blocks/advantages.scss
@@ -13,7 +13,7 @@
   font-size: 36px;
   line-height: 40px;
   color: $base-color-title;
-  margin: 23px 0 0;
+  margin: 21px 0 0;
 }
 
 .advantages__list {
@@ -33,10 +33,11 @@
   display: flex;
   list-style: none;
   padding: 0;
-  margin: 2.5px 0 4px;
+  margin: 2px 0 4px;
 }
 
 .advantages__description {
+  padding: 0;
   margin: 0 0 0 80px;
   position: relative;
   width: 200px;
@@ -62,7 +63,7 @@
   width: 60px;
   height: 60px;
   background-image: url("../../icons/stack.svg#icon-cooking");
-  background-size: 26px 30px;
+  background-size: 26px 29px;
   background-repeat: no-repeat;
   background-position: center;
   position: absolute;
@@ -90,7 +91,7 @@
   width: 60px;
   height: 60px;
   background-image: url("../../icons/stack.svg#icon-time");
-  background-size: 26px 30px;
+  background-size: 27px 30px;
   background-repeat: no-repeat;
   background-position: center;
   position: absolute;

diff --git a/source/styles/blocks/copyright.scss b/source/styles/blocks/copyright.scss
@@ -1,21 +1,21 @@
 .copyright {
   display: flex;
   justify-content: space-between;
-  align-items: center;
   position: relative;
 }
 
 .copyright::before {
   content: "  ";
   position: absolute;
-  top: -23px;
-  left: -24px;
+  top: -21px;
+  left: 0;
   background: #d9d9d9;
-  width: 322px;
+  width: 280px;
   height: 1px;
 }
 
 .copyright__link {
+  margin-top: 7px;
   text-decoration: none;
   font-family: "Lato";
   font-size: 16px;

diff --git a/source/styles/blocks/location.scss b/source/styles/blocks/location.scss
@@ -4,7 +4,8 @@
 }
 
 .location__map {
-  min-height: 320px;
+  width: 100%;
+  min-height: 362px;
 }
 
 .location iframe {

diff --git a/source/styles/blocks/main-footer.scss b/source/styles/blocks/main-footer.scss
@@ -19,6 +19,7 @@
 
 .main-footer__social {
   margin: 0;
+  padding: 0;
 }
 
 .main-footer__copyright{

diff --git a/source/styles/blocks/main-header.scss b/source/styles/blocks/main-header.scss
@@ -12,6 +12,7 @@
     display: block;
     padding-top: 25px;
     margin: 0;
+    min-width: 768px;
   }
 }
 
@@ -25,8 +26,8 @@
 @media (min-width: $tablet-width) {
   .main-header__wrapper {
     display: flex;
-    justify-content: space-between;
     width: 704px;
+    justify-content: space-between;
     padding: 0;
     flex-direction: row;
     margin: 0 auto;

diff --git a/source/styles/blocks/main-nav.scss b/source/styles/blocks/main-nav.scss
@@ -24,7 +24,8 @@
   .main-nav__wrapper {
     margin: 0;
     padding: 14px 0 12px;
-    width: 436px;
+    gap: 8px;
+    min-width: 436px;
   }
 }
 

diff --git a/source/styles/blocks/meta.scss b/source/styles/blocks/meta.scss
@@ -13,7 +13,7 @@
 
 .meta__information {
   display: flex;
-  min-width: 124px;
+  min-width: 123px;
   min-height: 55px;
   margin: 0;
   border-radius: 4%;
@@ -27,7 +27,6 @@
 .meta__content {
   margin: 0;
   padding: 0;
-  // border: 2px solid red;
 }
 
 .meta__content--title {
@@ -37,13 +36,14 @@
   font-size: 12px;
   font-weight: 400;
   line-height: 12px;
-  margin: 60px 0 0 3px;
+  margin: 60px 0 0;
   position: absolute;
   padding: 0;
   background: #eaeaea;
 }
 
 .meta__content--text {
+  display: block;
   font-family: "Oswald", sans-serif;
   font-size: 24px;
   line-height: 24px;