Стартовая стилизация

htmlacademy-adaptive · Dec 8, 2024 · 7347ed4 · 7347ed4
1 parent 0329f94
commit 7347ed4
Show file tree

Hide file tree

Showing 96 changed files with 195 additions and 42 deletions.
diff --git a/source/favicon-152.ico b/source/favicon-152.ico
diff --git a/source/favicon.ico b/source/favicon.ico
diff --git a/source/favicons/152.png b/source/favicons/152.png
diff --git a/source/favicons/16.png b/source/favicons/16.png
diff --git a/source/favicons/32.png b/source/favicons/32.png
diff --git a/source/favicons/favicon-152.svg b/source/favicons/favicon-152.svg
diff --git a/source/favicons/favicon-16.svg b/source/favicons/favicon-16.svg
diff --git a/source/favicons/favicon-32.svg b/source/favicons/favicon-32.svg
diff --git a/source/images/cat-skinny-photo-mobile.png → source/images/after-mobile.png b/source/images/cat-skinny-photo-mobile.png → source/images/after-mobile.png
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/after-tablet.png b/source/images/after-tablet.png
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/cat-fat-photo-mobile.png → source/images/before-mobile.png b/source/images/cat-fat-photo-mobile.png → source/images/before-mobile.png
diff --git a/source/images/[email protected] b/source/images/[email protected]
diff --git a/source/images/before-tablet.png b/source/images/before-tablet.png
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/buckwheat1000@[email protected] b/source/images/buckwheat1000@[email protected]
diff --git a/source/images/buckwheat1000@[email protected] b/source/images/buckwheat1000@[email protected]
diff --git a/source/images/buckwheat1000@[email protected] b/source/images/buckwheat1000@[email protected]
diff --git a/source/images/buckwheat1000@[email protected] b/source/images/buckwheat1000@[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/buckwheat500@[email protected] b/source/images/buckwheat500@[email protected]
diff --git a/source/images/buckwheat500@[email protected] b/source/images/buckwheat500@[email protected]
diff --git a/source/images/buckwheat500@[email protected] b/source/images/buckwheat500@[email protected]
diff --git a/source/images/buckwheat500@[email protected] b/source/images/buckwheat500@[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/cat-case@[email protected] b/source/images/cat-case@[email protected]
diff --git a/source/images/cat-case@[email protected] b/source/images/cat-case@[email protected]
diff --git a/source/images/cat-case@[email protected] b/source/images/cat-case@[email protected]
diff --git a/source/images/cat-case@[email protected] b/source/images/cat-case@[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/chicken1000@[email protected] b/source/images/chicken1000@[email protected]
diff --git a/source/images/chicken1000@[email protected] b/source/images/chicken1000@[email protected]
diff --git a/source/images/chicken1000@[email protected] b/source/images/chicken1000@[email protected]
diff --git a/source/images/chicken1000@[email protected] b/source/images/chicken1000@[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/chicken500@[email protected] b/source/images/chicken500@[email protected]
diff --git a/source/images/chicken500@[email protected] b/source/images/chicken500@[email protected]
diff --git a/source/images/chicken500@[email protected] b/source/images/chicken500@[email protected]
diff --git a/source/images/chicken500@[email protected] b/source/images/chicken500@[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/fish1000@[email protected] b/source/images/fish1000@[email protected]
diff --git a/source/images/fish1000@[email protected] b/source/images/fish1000@[email protected]
diff --git a/source/images/fish1000@[email protected] b/source/images/fish1000@[email protected]
diff --git a/source/images/fish1000@[email protected] b/source/images/fish1000@[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/fish500@[email protected] b/source/images/fish500@[email protected]
diff --git a/source/images/fish500@[email protected] b/source/images/fish500@[email protected]
diff --git a/source/images/fish500@[email protected] b/source/images/fish500@[email protected]
diff --git a/source/images/fish500@[email protected] b/source/images/fish500@[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/rice500@[email protected] b/source/images/rice500@[email protected]
diff --git a/source/images/rice500@[email protected] b/source/images/rice500@[email protected]
diff --git a/source/images/rice500@[email protected] b/source/images/rice500@[email protected]
diff --git a/source/images/rice500@[email protected] b/source/images/rice500@[email protected]
diff --git a/source/images/slider-vector.svg b/source/images/slider-vector.svg
diff --git a/source/index.html b/source/index.html
@@ -6,6 +6,10 @@
   <title>Кокой-то Cat Energy</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" href="styles/styles.css">
+  <link rel="icon" href="favicon.ico">
+  <link rel="icon" href="favicons/icon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="favicons/apple.png">
+  <link rel="manifest" href="manifest.webmanifest">
   <script src="scripts/index.js" defer></script>
 </head>
 
@@ -99,28 +103,28 @@ <h2 class="description__title">Живой пример</h2>
       </div>
 
       <div class="slider">
-        <input type="radio" name="point" id="slide1" checked>
-        <input type="radio" name="point" id="slide2">
         <div class="slider__container">
-
-          <div class="slides slide1">
-            <picture>
-
-              <source media="(min-width: 1200px)" width="560" height="512" type="image/png" srcset="./images/cat-fat-photo-desktop@1x.png 1x, ./images/cat-fat-photo-desktop@2 2x">
-              <source media="(min-width: 768px)" width="560" height="512" type="image/png" srcset="./images/[email protected] 1x, ./images/cat-fat-photo-tablet@2x 2x">
-              <img src="./images/cat-fat-photo-mobile.png" srcset="./images/[email protected] 2x" width="280" height="256" alt="Толстенький котик">
-            </picture>
-          </div>
-
-          <div class="slides slide2">
-            <img src="./images/cat-skinny-photo-mobile.png" alt="Худенький котик">
-          </div>
-
-          <div class="controls">
-            <label for="slide1"></label>
-            <label for="slide2"></label>
-          </div>
+          <ul class="slider__list">
+            <li class="slider__screen slider__screen--before">
+              <picture>
+                <source media="(min-width: 768px)" width="560" height="512" type="image/png" srcset="./images/before-tablet.png, ./images/[email protected] 2x">
+                <img src="./images/before-mobile.png" srcset="./images/before-mobile@2x.png 2x" width="280" height="256" alt="Толстенький котик">
+              </picture>
+            </li>
+
+            <li class="slider__screen slider__screen--after">
+              <picture>
+                <source media="(min-width: 768px)" width="560" height="512" type="image/png" srcset="./images/after-tablet.png, ./images/[email protected] 2x">
+                <img src="./images/after-mobile.png" srcset="./images/after-mobile@2x.png 2x" width="280" height="256" alt="Худенький котик">
+              </picture>
+            </li>
+          </ul>
+          <button class="slider__control" type="button">
+            <span class="visually-hidden">Показывает разницу</span>
+          </button>
         </div>
+
+      </div>
       </div>
     </section>
 

diff --git a/source/manifest.webmanifest b/source/manifest.webmanifest
@@ -0,0 +1,19 @@
+{
+  "icons": [
+    {
+      "src": "favicons/16.png",
+      "type": "image/png",
+      "sizes": "16x16"
+    },
+    {
+      "src": "favicons/32.png",
+      "type": "image/png",
+      "sizes": "32x32"
+    },
+    {
+      "src": "favicons/152.png",
+      "type": "image/png",
+      "sizes": "152x152"
+    }
+  ]
+}
diff --git a/source/scripts/index.js b/source/scripts/index.js
@@ -1 +1,13 @@
-/* в этот файл добавляет скрипты*/
+const sliderControl = document.querySelector('.slider__control');
+const slider = document.querySelector('.slider');
+
+let flag = false;
+sliderControl.addEventListener('click', () => {
+  if (!flag) {
+    slider.classList.add('slider--after');
+    flag = true;
+  }else{
+    slider.classList.toggle('slider--after');
+    slider.classList.toggle('slider--before');
+  }
+});
diff --git a/source/styles/blocks/description.scss b/source/styles/blocks/description.scss
@@ -47,5 +47,5 @@
   text-align: center;
   text-transform: uppercase;
   margin: 0;
-  padding: 20px 0 0;
+  padding: 20px 0;
 }
diff --git a/source/styles/blocks/footer.scss b/source/styles/blocks/footer.scss
@@ -26,14 +26,15 @@
 }
 
 .footer__logo {
-  text-align: center;
   display: block;
+  text-align: center;
 }
 
 .link__developer {
   border-top: 1px solid #d9d9d9;
   padding: 20px 20px 0;
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
 }
 
@@ -48,3 +49,4 @@
   width: 27px;
   height: 34px;
 }
+
diff --git a/source/styles/blocks/slider.scss b/source/styles/blocks/slider.scss
@@ -9,3 +9,104 @@
   margin: 0 auto;
   position: relative;
 }
+
+.slider__list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.slider__screen {
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+
+.slider__screen--before {
+  z-index: 5;
+  width: 50%;
+  background-color: #eaeaea;
+  transition: width 2s ease;
+}
+
+.slider__screen--after {
+  z-index: 1;
+  width: 100%;
+}
+
+.slider--before .slider__screen--before {
+  width: 100%;
+}
+
+.slider--after .slider__screen--before {
+  width: 0;
+}
+
+.slider__control {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  left: 50%;
+  background-color: #ffffff;
+  z-index: 10;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid #666666;
+  transition: left 2s ease;
+}
+
+.slider--before .slider__control {
+  left: 100%;
+}
+
+.slider--after .slider__control {
+  left: 0;
+}
+
+.slider__control::before {
+  content: "";
+  position: absolute;
+  height: 256px;
+  width: 4px;
+  border-radius: 2px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #666666;
+}
+
+.slider__control::after {
+  content: "";
+  position: absolute;
+  height: 37px;
+  width: 37px;
+  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #ffffff;
+  background-image: url("../../images/slider-vector.svg");
+}
+
+.slider__control:hover {
+  border: 2px solid #68b738;
+}
+
+.slider__control:hover::before {
+  background-color: #68b738;
+}
+
+.slider__control:focus {
+  border: 2px solid #5eaa2f;
+}
+
+.slider__control:focus::before {
+  background-color: #5eaa2f;
+}
diff --git a/source/styles/blocks/social.scss b/source/styles/blocks/social.scss
@@ -4,9 +4,10 @@
   padding: 0;
   list-style: none;
   display: flex;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
   justify-content: center;
   gap: 24px;
+  max-width: 132px;
 }
 
 .social__link {
@@ -20,14 +21,42 @@
 
 }
 
+
 .social__link--vk {
   mask: url("../../icons/vkontakte.svg");
 }
 
+.social__link--vk:hover {
+  background-color: #68b738;
+}
+
+.social__link--vk:active {
+  background-image: #68b738;
+  opacity: 30%;
+}
+
 .social__link--youtube {
   mask: url("../../icons/youtube.svg");
 }
 
+.social__link--youtube:hover {
+  background-color: #68b738;
+}
+
+.social__link--youtube:active {
+  background-image: #68b738;
+  opacity: 30%;
+}
+
 .social__link--telegram {
   mask: url("../../icons/telegram.svg");
 }
+
+.social__link--telegram:hover {
+  background-color: #68b738;
+}
+
+.social__link--telegram:active {
+  background-image: #68b738;
+  opacity: 30%;
+}