Подключаю к проекту favicons (#7)

MaksimDoronin · Nov 10, 2024 · a31aac4 · a31aac4
1 parent bb70095
commit a31aac4
Show file tree

Hide file tree

Showing 72 changed files with 80 additions and 13 deletions.
diff --git a/source/catalog.html b/source/catalog.html
@@ -3,11 +3,15 @@
 
 <head>
   <meta charset="utf-8">
-  <title>CAT ENERGY: интернет магазин питания для котов</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
-  <meta name="keywords" content="питание, здоровье, кот, кошка, коты, кошки, интернет-магазин">
-  <meta name="description" content="Магазин здорового питания для котов, кошек">
+  <meta name="keywords" content="функциональное питание для котов, CAT Energy, здоровое питание для кошек, питание для активных котов, корм для поддержания веса котов, витамины для кошек, магазин кошачьего корма, сбалансированный корм для котов">
+  <meta name="description" content="Интернет-магазин CAT Energy предлагает функциональное питание для котов. У нас вы найдете сбалансированные корма, которые поддерживают активность и здоровье вашего питомца. Подберите идеальный рацион для вашей кошки.">
+  <link rel="icon" href="favicon.ico">
+  <link rel="icon" href="favicons/icon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="favicons/180.png">
+  <link rel="manifest" href="manifest.webmanifest">
   <link rel="stylesheet" href="styles/styles.css">
+  <title>CAT ENERGY: интернет магазин питания для котов</title>
   <script src="scripts/index.js" defer></script>
 </head>
 
@@ -43,7 +47,11 @@ <h1 class="catalog__title">Каталог продукции</h1>
         <li class="catalog__item product-card">
           <div class="product-card__image-wrapper">
             <a class="product-card__link" href="#">
-              <img class="product-card__image" src="/" width="100" height="100" alt="Cat energy pro 500 г">
+              <picture>
+                <source width="161" height="172" type="image/png" media="(min-width: 1440px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
+                <source width="161" height="172" type="image/png" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
+                <img class="product-card__image" src="images/[email protected]" srcset="images/[email protected] 2x" width="68" height="86" alt="Cat energy pro 500 г">
+              </picture>
             </a>
           </div>
           <div class="product-card__info-wrapper">
@@ -61,7 +69,11 @@ <h2 class="product-card__title">Cat energy pro 500 г</h2>
         <li class="catalog__item product-card">
           <div class="product-card__image-wrapper">
             <a class="product-card__link" href="#">
-              <img class="product-card__image" src="/" width="100" height="100" alt="Cat energy pro 1000 г">
+              <picture>
+                <source width="172" height="196" type="image/png" media="(min-width: 1440px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
+                <source width="168" height="206" type="image/png" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
+                <img class="product-card__image" src="images/[email protected]" srcset="images/[email protected] 2x" width="84" height="100" alt="Cat energy pro 1000 г">
+              </picture>
             </a>
           </div>
           <div class="product-card__info-wrapper">
@@ -79,7 +91,11 @@ <h2 class="product-card__title">Cat energy pro 1000 г</h2>
         <li class="catalog__item product-card">
           <div class="product-card__image-wrapper">
             <a class="product-card__link" href="#">
-              <img class="product-card__image" src="/" width="100" height="100" alt="Cat energy pro 500 г">
+              <picture>
+                <source width="163" height="174" type="image/png" media="(min-width: 1440px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
+                <source width="163" height="174" type="image/png" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
+                <img class="product-card__image" src="images/[email protected]" srcset="images/[email protected] 2x" width="68" height="78" alt="Cat energy pro 500 г">
+              </picture>
             </a>
           </div>
           <div class="product-card__info-wrapper">
@@ -97,7 +113,11 @@ <h2 class="product-card__title">Cat energy pro 500 г</h2>
         <li class="catalog__item product-card">
           <div class="product-card__image-wrapper">
             <a class="product-card__link" href="#">
-              <img class="product-card__image" src="/" width="100" height="100" alt="Cat energy pro 1000 г">
+              <picture>
+                <source width="172" height="196" type="image/png" media="(min-width: 1440px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
+                <source width="168" height="200" type="image/png" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
+                <img class="product-card__image" src="images/[email protected]" srcset="images/[email protected] 2x" width="84" height="100" alt="Cat energy pro 1000 г">
+              </picture>
             </a>
           </div>
           <div class="product-card__info-wrapper">
@@ -115,7 +135,11 @@ <h2 class="product-card__title">Cat energy pro 1000 г</h2>
         <li class="catalog__item product-card">
           <div class="product-card__image-wrapper">
             <a class="product-card__link" href="#">
-              <img class="product-card__image" src="/" width="100" height="100" alt="Cat energy slim 500 г">
+              <picture>
+                <source width="161" height="171" type="image/png" media="(min-width: 1440px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
+                <source width="161" height="171" type="image/png" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
+                <img class="product-card__image" src="images/[email protected]" srcset="images/[email protected] 2x" width="68" height="78" alt="Cat energy slim 500 г">
+              </picture>
             </a>
           </div>
           <div class="product-card__info-wrapper">
@@ -133,7 +157,11 @@ <h2 class="product-card__title">Cat energy slim 500 г</h2>
         <li class="catalog__item product-card">
           <div class="product-card__image-wrapper">
             <a class="product-card__link" href="#">
-              <img class="product-card__image" src="/" width="100" height="100" alt="Cat energy slim 1000 г">
+              <picture>
+                <source width="172" height="196" type="image/png" media="(min-width: 1440px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
+                <source width="168" height="200" type="image/png" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
+                <img class="product-card__image" src="images/[email protected]" srcset="images/[email protected] 2x" width="84" height="100" alt="Cat energy slim 1000 г">
+              </picture>
             </a>
           </div>
           <div class="product-card__info-wrapper">
@@ -151,7 +179,11 @@ <h2 class="product-card__title">Cat energy slim 1000 г</h2>
         <li class="catalog__item product-card">
           <div class="product-card__image-wrapper">
             <a class="product-card__link" href="#">
-              <img class="product-card__image" src="/" width="100" height="100" alt="Cat energy slim 500 г">
+              <picture>
+                <source width="163" height="174" type="image/png" media="(min-width: 1440px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
+                <source width="163" height="174" type="image/png" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x">
+                <img class="product-card__image" src="images/[email protected]" srcset="images/[email protected] 2x" width="72" height="84" alt="Cat energy slim 500 г">
+              </picture>
             </a>
           </div>
           <div class="product-card__info-wrapper">

diff --git a/source/favicon.ico b/source/favicon.ico
diff --git a/source/favicons/180.png b/source/favicons/180.png
diff --git a/source/favicons/192.png b/source/favicons/192.png
diff --git a/source/favicons/512.png b/source/favicons/512.png
diff --git a/source/favicons/icon.svg b/source/favicons/icon.svg
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/index.html b/source/index.html
@@ -6,6 +6,10 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <meta name="keywords" content="функциональное питание для котов, CAT Energy, здоровое питание для кошек, питание для активных котов, корм для поддержания веса котов, витамины для кошек, магазин кошачьего корма, сбалансированный корм для котов">
   <meta name="description" content="Интернет-магазин CAT Energy предлагает функциональное питание для котов. У нас вы найдете сбалансированные корма, которые поддерживают активность и здоровье вашего питомца. Подберите идеальный рацион для вашей кошки.">
+  <link rel="icon" href="favicon.ico">
+  <link rel="icon" href="favicons/icon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="favicons/180.png">
+  <link rel="manifest" href="manifest.webmanifest">
   <link rel="stylesheet" href="styles/styles.css">
   <title>CAT ENERGY: интернет магазин питания для котов</title>
   <script src="scripts/index.js" defer></script>
@@ -45,7 +49,11 @@ <h1 class="visually-hidden">Интернет-магазин товаров дл
         <h2 class="promo__title">Функциональное питание для котов</h2>
         <p class="promo__lead">Занялся собой? Займись котом!</p>
       </div>
-      <img class="promo__image" src="/" width="100" height="100" alt="">
+      <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">
@@ -98,8 +106,15 @@ <h2 class="example__title">Живой пример</h2>
       </div>
       <div class="example__slider slider">
         <div class="slider__wrapper">
-          <img class="slider__image" src="/" width="100" height="100" alt="Стройный кот">
-          <img class="slider__image" src="/" width="100" height="100" alt="Жирный кот">
+          <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>

diff --git a/source/manifest.webmanifest b/source/manifest.webmanifest
@@ -0,0 +1,14 @@
+{
+  "icons": [
+    {
+      "src": "favicons/192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "favicons/512.png",
+      "type": "image/png",
+      "sies": "512x512"
+    }
+  ]
+}