From c337567369e1ce0d6574705e6addaf160e369ebe Mon Sep 17 00:00:00 2001
From: Tetiana Zorii <tanyusha.zoriy@gmail.com>
Date: Wed, 13 Dec 2023 23:24:26 -0500
Subject: [PATCH] add interactive

---
 src/css/layout/02-hero.css | 33 +++++++++++++++++++++++----------
 src/js/13-hero.js          | 17 +++++++++++++++++
 src/main.js                |  1 +
 src/partials/02-hero.html  | 38 +++++++++++++++++++++++++++++++-------
 4 files changed, 72 insertions(+), 17 deletions(-)
 create mode 100644 src/js/13-hero.js

diff --git a/src/css/layout/02-hero.css b/src/css/layout/02-hero.css
index 2b47e24..7704649 100644
--- a/src/css/layout/02-hero.css
+++ b/src/css/layout/02-hero.css
@@ -17,7 +17,7 @@
     display: none;
 }
 
-@media screen and (min-width: 1280px) {
+@media screen and (min-width: 1440px) {
     .hero__pic {
         position: absolute;
         display: inline-flex;
@@ -52,6 +52,7 @@
 .hero__title {
     text-indent: 50px;
     width: 100%;
+    font-family: DMSans-Regular;
     color: var(--color-black);
     font-size: 38px;
     font-weight: 400;
@@ -75,6 +76,7 @@
 
 .hero__subtitle {
     width: 100%;
+    font-family: DMSans-Regular;
     color: var(--color-black);
     font-size: 14px;
     font-weight: 400;
@@ -99,7 +101,7 @@
     }
 }
 
-@media screen and (min-width: 1280px) {
+@media screen and (min-width: 1440px) {
     .hero__subtitle {
         width: 500px;
         font-size: 18px;
@@ -128,7 +130,7 @@
     }
 }
 
-@media screen and (min-width: 1280px) {
+@media screen and (min-width: 1440px) {
     .hero__image img {
         display: flex;
         width: 100%;
@@ -154,7 +156,7 @@
     }
 }
 
-@media screen and (min-width: 1280px) {
+@media screen and (min-width: 1440px) {
     .hero__hashtags {
         position: absolute;
         top: 144px;
@@ -171,24 +173,35 @@
 
 .hero__hashtag {
     display: flex;
-    padding: 4px 12px;
     justify-content: center;
     align-items: center;
-    gap: 10px;
+}
+
+.hero__hashtag-text {
+    color: var(--color-black);
+    font-family: DMSans-Regular;
+    font-size: 14px;
+    line-height: 1.28;
+    padding: 4px 12px;
+    letter-spacing: -0.1px;
     border-radius: 30px;
     border: 1px solid var(--color-black);
-    line-height: 1.28;
 }
 
 @media screen and (min-width: 768px) {
-    .hero__hashtag {
+    .hero__hashtag-text {
         padding: 4px 16px;
         line-height: 1.5;
     }
 }
 
-@media screen and (min-width: 1280px) {
-    .hero__hashtag {
+@media screen and (min-width: 1440px) {
+    .hero__hashtag-text {
         padding: 4px 16px;
     }
+}
+
+.hero__hashtags a:hover {
+    background: rgba(36, 36, 36, 0.80);
+    color: var(--color-white);
 }
\ No newline at end of file
diff --git a/src/js/13-hero.js b/src/js/13-hero.js
new file mode 100644
index 0000000..a76ca60
--- /dev/null
+++ b/src/js/13-hero.js
@@ -0,0 +1,17 @@
+ var svg = document.getElementById("mySVG");
+
+svg.style.transform = "scale(1)";
+  svg.style.transition = "fill 0.3s ease, transform 0.3s ease";
+
+  var colors = ["var(--color-yellow)", "var(--color-black)", "var(--color-valid)"];
+  var currentColorIndex = 0;
+
+  svg.addEventListener("mouseover", function() {
+    svg.style.fill = colors[currentColorIndex];
+    svg.style.transform = "scale(1.6) rotate(145deg)";
+  });
+
+  svg.addEventListener("mouseout", function() {
+    svg.style.transform = "scale(1) rotate(0deg)";
+    currentColorIndex = (currentColorIndex + 1) % colors.length;
+  });
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 453f98c..8133a1d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,3 +11,4 @@ import './js/09-loader';
 import './js/10-favorites';
 import './js/11-subscribe';
 import './js/12-exercises';
+import './js/13-hero';
\ No newline at end of file
diff --git a/src/partials/02-hero.html b/src/partials/02-hero.html
index bb44317..ccdf8c6 100644
--- a/src/partials/02-hero.html
+++ b/src/partials/02-hero.html
@@ -3,7 +3,7 @@
   <div class="container">
     <div class="hero">
       <div class="hero__icon-title">
-        <svg class="hero__icon" width="38" height="38">
+        <svg id="mySVG" class="hero__icon" width="38" height="38">
           <use href="./img/sprite.svg#icon-sun"></use>
         </svg>
         <h1 class="hero__title">
@@ -31,14 +31,14 @@ <h1 class="hero__title">
           "
         />
         <source
-          media="(min-width: 768px) and (max-width: 1279px)"
+          media="(min-width: 768px) and (max-width: 1439px)"
           srcset="
             ./img/hero-image-tablet.jpg    1x,
             ./img/hero-image-tablet@2x.jpg 2x
           "
         />
         <source
-          media="(min-width: 1280px)"
+          media="(min-width: 1440px)"
           srcset="
             ./img/hero-image-desktop.jpg    1x,
             ./img/hero-image-desktop@2x.jpg 2x
@@ -50,10 +50,34 @@ <h1 class="hero__title">
         />
       </picture>
       <ul class="hero__hashtags">
-        <li class="hero__hashtag">#Sport</li>
-        <li class="hero__hashtag">#Healthy</li>
-        <li class="hero__hashtag">#Workout</li>
-        <li class="hero__hashtag">#Diet</li>
+        <li class="hero__hashtag">
+          <a
+            class="hero__hashtag-text"
+            href="https://www.instagram.com/explore/tags/sport/"
+            >#Sport</a
+          >
+        </li>
+        <li class="hero__hashtag">
+          <a
+            class="hero__hashtag-text"
+            href="https://www.instagram.com/explore/tags/healthy/"
+            >#Healthy</a
+          >
+        </li>
+        <li class="hero__hashtag">
+          <a
+            class="hero__hashtag-text"
+            href="https://www.instagram.com/explore/tags/workout/"
+            >#Workout</a
+          >
+        </li>
+        <li class="hero__hashtag">
+          <a
+            class="hero__hashtag-text"
+            href="https://www.instagram.com/explore/tags/diet/"
+            >#Diet</a
+          >
+        </li>
       </ul>
     </div>
   </div>