Высталяю ширину и центрую контент для мобильной версии с помощью mixin

MaksimDoronin · Dec 3, 2024 · 7a4c1f2 · 7a4c1f2
1 parent b7240fd
commit 7a4c1f2
Show file tree

Hide file tree

Showing 26 changed files with 733 additions and 350 deletions.
diff --git a/source/catalog.html b/source/catalog.html
diff --git a/source/index.html b/source/index.html
@@ -44,123 +44,135 @@
   </header>
   <main class="page__main">
     <section class="page__promo promo">
-      <h1 class="visually-hidden">Интернет-магазин товаров для котов Cat energy</h1>
-      <div class="promo__text-wrapper">
-        <h2 class="promo__title">Функциональное питание для котов</h2>
-        <p class="promo__lead">Занялся собой? Займись котом!</p>
+      <div class="promo__container">
+        <h1 class="visually-hidden">Интернет-магазин товаров для котов Cat energy</h1>
+        <div class="promo__text-wrapper">
+          <h2 class="promo__title">Функциональное питание&nbsp;для&nbsp;котов</h2>
+          <p class="promo__lead">Занялся собой? Займись котом!</p>
+        </div>
+        <picture>
+          <source width="552" height="499" type="image/png" media="(min-width: 1440px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
+          <source width="709" height="609" type="image/png" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
+          <img class="promo__image" src="images/[email protected]" srcset="images/[email protected] 2x" width="280" height="270" alt="Банка с едой Кэт энерджи Про с курицей и весом 500 грамм">
+        </picture>
+        <a class="promo__link button" href="#">Подобрать&nbsp;программу</a>
       </div>
-      <picture>
-        <source width="552" height="499" type="image/png" media="(min-width: 1440px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
-        <source width="709" height="609" type="image/png" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
-        <img class="promo__image" src="images/[email protected]" srcset="images/[email protected] 2x" width="100" height="100" alt="">
-      </picture>
-      <a class="promo__link button" href="#">Подобрать программу</a>
     </section>
     <section class="page__programms programms">
-      <h2 class="visually-hidden">Варианты программ питания</h2>
-      <ul class="programms__list">
-        <li class="programms__item">
-          <div class="programms__card">
-            <h3 class="programms__title">Похудение</h3>
-            <p class="programms__text">Ваш кот весит больше собаки и почти утратил способность лазить по деревьям? Пора на диету! Cat Energy Slim поможет вашему питомцу сбросить лишний вес.</p>
-            <a class="programms__link" href="#">Каталог slim</a>
-          </div>
-        </li>
-        <li class="programms__item">
-          <div class="programms__card">
-            <h3 class="programms__title">Набор массы</h3>
-            <p class="programms__text">Заработать авторитет среди дворовых котов и даже собак? Серия Cat Energy Pro поможет вашему коту нарастить необходимые мышцы!</p>
-            <a class="programms__link" href="#">Каталог pro</a>
-          </div>
-        </li>
-      </ul>
+      <div class="programms__container">
+        <h2 class="visually-hidden">Варианты программ питания</h2>
+        <ul class="programms__list">
+          <li class="programms__item">
+            <div class="programms__card">
+              <h3 class="programms__title">Похудение</h3>
+              <p class="programms__text">Ваш кот весит больше собаки и почти утратил способность лазить по деревьям? Пора на диету! Cat Energy Slim поможет вашему питомцу сбросить лишний вес.</p>
+              <a class="programms__link" href="#">Каталог slim</a>
+            </div>
+          </li>
+          <li class="programms__item">
+            <div class="programms__card">
+              <h3 class="programms__title">Набор массы</h3>
+              <p class="programms__text">Заработать авторитет среди дворовых котов и даже собак? Серия Cat Energy Pro поможет вашему коту нарастить необходимые мышцы!</p>
+              <a class="programms__link" href="#">Каталог pro</a>
+            </div>
+          </li>
+        </ul>
+      </div>
     </section>
     <section class="page__features features">
-      <h2 class="features__title">Как это работает</h2>
-      <ul class="features__list">
-        <li class="features__item">
-          <p class="features__desc">Функциональное питание содержит только полезные питательные вещества.</p>
-        </li>
-        <li class="features__item">
-          <p class="features__desc">Выпускается в виде порошка, который нужно лишь залить кипятком и готово.</p>
-        </li>
-        <li class="features__item">
-          <p class="features__desc">Замените один-два приема обычной еды на наше функциональное питание.</p>
-        </li>
-        <li class="features__item">
-          <p class="features__desc">Уже через месяц наслаждайтесь изменениями к лучшему вашего питомца!</p>
-        </li>
-      </ul>
+      <div class="features__container">
+        <h2 class="features__title">Как это работает</h2>
+        <ul class="features__list">
+          <li class="features__item">
+            <p class="features__desc">Функциональное питание содержит только полезные питательные вещества.</p>
+          </li>
+          <li class="features__item">
+            <p class="features__desc">Выпускается в виде порошка, который нужно лишь залить кипятком и готово.</p>
+          </li>
+          <li class="features__item">
+            <p class="features__desc">Замените один-два приема обычной еды на наше функциональное питание.</p>
+          </li>
+          <li class="features__item">
+            <p class="features__desc">Уже через месяц наслаждайтесь изменениями к лучшему вашего питомца!</p>
+          </li>
+        </ul>
+      </div>
     </section>
     <section class="page__example example">
-      <h2 class="example__title">Живой пример</h2>
-      <p class="example__desc">Борис сбросил 5 кг за 2 месяца, просто заменив свой обычный корм на Cat Energy Slim. Отличный результат без изнуряющих тренировок! При этом он не менял своих привычек и по-прежнему спит по 16 часов в день.</p>
-      <div class="example__info-column">
-        <p class="example__info"><span class="example__value">5 кг</span><span class="example__desc">снижение веса</span></p>
-      </div>
-      <div class="example__info-column">
-        <p class="example__info"><span class="example__value">60 ДНЕЙ</span><span class="example__desc">затрачено времени</span></p>
-      </div>
-      <div class="example__info-row">
-        <p class="example__info"><span class="example__value">Затраты на питание:</span><span class="example__desc">15 000 РУБ.</span> </p>
-      </div>
-      <div class="example__slider slider">
-        <div class="slider__wrapper">
-          <picture>
-            <source type="image/png" width="560" height="512" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
-            <img class="slider__image" src="images/[email protected]" srcset="images/[email protected] 2x" width="280" height="256" alt="Жирный кот">
-          </picture>
-          <picture>
-            <source type="image/png" width="560" height="512" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
-            <img class="slider__image" src="images/[email protected]" srcset="images/[email protected] 2x" width="280" height="256" alt="Стройный кот">
-          </picture>
+      <div class="example__container">
+        <h2 class="example__title">Живой&nbsp;пример</h2>
+        <p class="example__desc">Борис сбросил 5 кг за 2 месяца, просто заменив свой обычный корм на Cat Energy Slim. Отличный результат без изнуряющих тренировок! При этом он не менял своих привычек и по-прежнему спит по 16 часов в день.</p>
+        <div class="example__info-column">
+          <p class="example__info"><span class="example__value">5 кг</span><span class="example__desc">снижение веса</span></p>
+        </div>
+        <div class="example__info-column">
+          <p class="example__info"><span class="example__value">60 ДНЕЙ</span><span class="example__desc">затрачено времени</span></p>
+        </div>
+        <div class="example__info-row">
+          <p class="example__info"><span class="example__value">Затраты на питание:</span><span class="example__desc">15 000 РУБ.</span> </p>
+        </div>
+        <div class="example__slider slider">
+          <div class="slider__wrapper">
+            <picture>
+              <source type="image/png" width="560" height="512" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
+              <img class="slider__image" src="images/[email protected]" srcset="images/[email protected] 2x" width="280" height="256" alt="Жирный кот">
+            </picture>
+            <picture>
+              <source type="image/png" width="560" height="512" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
+              <img class="slider__image" src="images/[email protected]" srcset="images/[email protected] 2x" width="280" height="256" alt="Стройный кот">
+            </picture>
 
-          <button class="slider__button" type="button">
-            <span class="visually-hidden">Ползунок</span>
-          </button>
+            <button class="slider__button" type="button">
+              <span class="visually-hidden">Ползунок</span>
+            </button>
+          </div>
         </div>
       </div>
     </section>
     <section class="page__contacts contacts">
-      <h2 class="visually-hidden">Контактная информация</h2>
-      <div class="contacts__wrapper">
-        <p class="contacts__text">Приглашаем к сотрудничеству дилеров!</p>
-        <address class="contacts__address">
-          ул. Большая Конюшенная <br>
-          д. 19/8 <br>
-          Санкт-Петербург
-        </address>
-      </div>
-      <div class="contacts__location">
-        <img class="contacts__map" src="/" width="100" height="100" alt="Адрес на карте">
+      <div class="contacts__container">
+        <h2 class="visually-hidden">Контактная информация</h2>
+        <div class="contacts__wrapper">
+          <p class="contacts__text">Приглашаем к&nbsp;сотрудничеству дилеров!</p>
+          <address class="contacts__address">
+            ул. Большая<br>
+            Конюшенная, д. 19/8<br>
+            Санкт-Петербург
+          </address>
+        </div>
+        <div class="contacts__location">
+          <img class="contacts__map" src="/" width="100" height="100" alt="Адрес на карте">
+        </div>
       </div>
     </section>
   </main>
   <footer class="page__footer footer">
-    <a class="footer__logo" href="#">
-      <img class="logo-text" src="/" width="100" height="100" alt="Логотип кэт энерджи">
-    </a>
-    <ul class="footer__socials socials">
-      <li class="socials__item">
-        <a class="socials__link" href="#">
-          <img class="socials__icon" src="/" width="100" height="100" alt="Вконтакте">
-        </a>
-      </li>
-      <li class="socials__item">
-        <a class="socials__link" href="#">
-          <img class="socials__icon" src="/" width="100" height="100" alt="Ютьюб">
-        </a>
-      </li>
-      <li class="socials__item">
-        <a class="socials__link" href="#">
-          <img class="socials__icon" src="/" width="100" height="100" alt="Телеграм">
-        </a>
-      </li>
-    </ul>
-    <a class="footer__copyright-link" href="https://htmlacademy.ru/intensive/adaptive">
-      <p class="footer__copyright">HTML Academy</p>
-      <img class="footer__copyright-logo" src="/" width="100" height="100" alt="Логотип Аштиэмэльакадеми">
-    </a>
+    <div class="footer__container">
+      <a class="footer__logo" href="#">
+        <img class="logo-text" src="/" width="100" height="100" alt="Логотип кэт энерджи">
+      </a>
+      <ul class="footer__socials socials">
+        <li class="socials__item">
+          <a class="socials__link" href="#">
+            <img class="socials__icon" src="/" width="100" height="100" alt="Вконтакте">
+          </a>
+        </li>
+        <li class="socials__item">
+          <a class="socials__link" href="#">
+            <img class="socials__icon" src="/" width="100" height="100" alt="Ютьюб">
+          </a>
+        </li>
+        <li class="socials__item">
+          <a class="socials__link" href="#">
+            <img class="socials__icon" src="/" width="100" height="100" alt="Телеграм">
+          </a>
+        </li>
+      </ul>
+      <a class="footer__copyright-link" href="https://htmlacademy.ru/intensive/adaptive">
+        <p class="footer__copyright">HTML Academy</p>
+        <img class="footer__copyright-logo" src="/" width="100" height="100" alt="Логотип Аштиэмэльакадеми">
+      </a>
+    </div>
   </footer>
 </body>
 

diff --git a/source/styles/blocks/button.scss b/source/styles/blocks/button.scss
@@ -0,0 +1,3 @@
+.button {
+  @include button;
+}
diff --git a/source/styles/blocks/catalog.scss b/source/styles/blocks/catalog.scss
@@ -0,0 +1,15 @@
+// .catalog {
+
+// }
+
+.catalog__container {
+  @include container;
+}
+
+.catalog__title {
+  @include font($secondary-font, 36px, 36px);
+}
+
+.catalog__list {
+  @include list-style-reset;
+}
diff --git a/source/styles/blocks/contacts.scss b/source/styles/blocks/contacts.scss
@@ -0,0 +1,19 @@
+// .contacts {
+
+// }
+
+.contacts__container {
+  @include container;
+}
+
+.contacts__text {
+  @include font($secondary-font, 16px, 20px);
+  color: $third-color;
+  text-transform: uppercase;
+}
+
+.contacts__address {
+  @include font($primary-font, 14px, 20px);
+  font-style: normal;
+  color: $fifth-color;
+}
diff --git a/source/styles/blocks/example.scss b/source/styles/blocks/example.scss
@@ -0,0 +1,29 @@
+.example {
+  @include block-color($second-color, $tenth-color);
+}
+
+.example__container {
+  @include container;
+}
+
+.example__title {
+  @include font($secondary-font, 36px, 40px);
+}
+
+.example__value {
+  @include font($secondary-font, 24px, 24px);
+  text-transform: uppercase;
+}
+
+.example__info-row .example__value {
+  @include font($secondary-font, 14px, 20px);
+}
+
+.example__desc {
+  @include font($primary-font, 12px, 12px);
+  color: $fifth-color;
+}
+
+.example__info-row .example__desc {
+  @include font($secondary-font, 14px, 20px);
+}
diff --git a/source/styles/blocks/features.scss b/source/styles/blocks/features.scss
@@ -0,0 +1,20 @@
+// .features {
+
+// }
+
+.features__container {
+  @include container;
+}
+
+.features__list {
+  @include list-style-reset;
+}
+
+.features__title {
+  @include font($secondary-font, 36px, 40px);
+}
+
+.features__desc {
+  @include font;
+  color: $fifth-color;
+}
diff --git a/source/styles/blocks/footer.scss b/source/styles/blocks/footer.scss
@@ -0,0 +1,20 @@
+.footer {
+  @include block-color($second-color, $eleventh-color);
+}
+
+.footer__container {
+  @include container;
+}
+
+.footer__socials {
+  @include list-style-reset;
+}
+
+.footer__copyright-link {
+  text-decoration: none;
+}
+
+.footer__copyright {
+  @include font($primary-font, 16px, 20px);
+  color: $fifth-color;
+}
diff --git a/source/styles/blocks/gift-card.scss b/source/styles/blocks/gift-card.scss
@@ -0,0 +1,8 @@
+.gift-card {
+  @include block-color($second-color, $thirteenth-color-lighter);
+}
+
+.gift-card__desc {
+  @include font($primary-font, 16px, 20px);
+  color: $first-color;
+}
diff --git a/source/styles/blocks/header.scss b/source/styles/blocks/header.scss
@@ -1,5 +1,7 @@
-.header {
-  background-color: #663399;
-  color: #ffffff;
-  padding: 10px 15px;
+// .header {
+
+// }
+
+.header__navigation-wrapper {
+  @include container;
 }
diff --git a/source/styles/blocks/logo.scss b/source/styles/blocks/logo.scss
@@ -0,0 +1,3 @@
+// .logo {
+
+// }
diff --git a/source/styles/blocks/navigation.scss b/source/styles/blocks/navigation.scss
@@ -0,0 +1,14 @@
+// .navigation {
+
+// }
+
+.navigation__list {
+  @include list-style-reset;
+}
+
+.navigation__link {
+  @include font($secondary-font, 20px, 20px);
+  color: $second-color;
+  text-transform: uppercase;
+  text-decoration: none;
+}
diff --git a/source/styles/blocks/page.scss b/source/styles/blocks/page.scss
@@ -0,0 +1,3 @@
+// .page {
+
+// }