Merge pull request #17 from ViktorSvertoka/hero

ViktorSvertoka · Dec 14, 2023 · ac8ffd5 · ac8ffd5
2 parents bdde176 + c337567
commit ac8ffd5
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 17 deletions.
diff --git 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);
 }
diff --git a/src/js/13-hero.js 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;
+  });
diff --git 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';
diff --git 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/[email protected] 2x
           "
         />
         <source
-          media="(min-width: 1280px)"
+          media="(min-width: 1440px)"
           srcset="
             ./img/hero-image-desktop.jpg    1x,
             ./img/[email protected] 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>