Merge pull request #2 from KristinaHranovska/quotefavorite

quote favorite is ready
KristinaHranovska · Feb 8, 2024 · 55a4379 · 55a4379
2 parents 6f60a88 + 9c65080
commit 55a4379
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 1 deletion.
diff --git a/src/css/components/variables.css b/src/css/components/variables.css
@@ -10,6 +10,7 @@
     --not-color-star: rgba(27, 27, 27, 0.2);
     --border-color: rgba(27, 27, 27, 0.4);
     --text-color-alfa: rgba(246, 246, 246, 0.6);
+    --text: rgba(27, 27, 27, 0.6);
     --white-color: #FFFFFF;
     --hover-button-icon: #5F6560;
 }
diff --git a/src/css/quote-favorities.css b/src/css/quote-favorities.css
@@ -0,0 +1,100 @@
+.quote-favorites-thumb {
+    min-height: 272px;
+    width: 100%;
+    background-image: url('../img/quotefavorites/quote_mobile.webp');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    border-radius: 30px;
+}
+
+@media screen and (min-width: 320px) and (min-resolution: 192dpi) {
+    .quote-favorites-thumb {
+        background-image: url('../img/quotefavorites/quote_mobile@2x.webp');
+    }
+}
+
+.quote-motivation-block {
+    background-color: var(--white-color);
+    border-radius: 30px;
+
+    padding: 96px 101px;
+}
+
+.icon-static-dumbbell {
+    fill: var(--text-dark);
+
+    margin-bottom: 15px;
+}
+
+.quote-static-title {
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 1;
+    color: var(--text-dark);
+
+    margin-bottom: 6px;
+}
+
+.quote-static-paragraf {
+    font-size: 14px;
+    line-height: 1.29;
+    color: var(--text);
+}
+
+@media screen and (min-width: 768px) {
+    .quote {
+        margin-bottom: 16px;
+    }
+
+    .quote-favorites-thumb {
+        height: 302px;
+        background-image: url('../img/quotefavorites/quote_tablet.webp');
+    }
+
+    @media screen and (min-width: 768px) and (min-resolution: 192dpi) {
+        .quote-favorites-thumb {
+            background-image: url('../img/quotefavorites/quote_tablet@2x.webp');
+        }
+    }
+
+    .favorities-thumb {
+        display: flex;
+        align-items: stretch;
+    }
+
+    .quote-favorites-thumb {
+        flex: 1;
+        max-width: 50%;
+    }
+
+    .quote-motivation-block {
+        flex: 1;
+        max-width: 50%;
+        border-radius: 50px;
+
+        padding: 106px 118px;
+    }
+}
+
+@media screen and (min-width: 1440px) {
+    .quote {
+        margin-bottom: 0;
+    }
+
+    .quote-favorites-thumb {
+        width: 352px;
+        background-image: url('../img/quotefavorites/quote_1440.webp');
+    }
+
+    @media screen and (min-width: 1440px) and (min-resolution: 192dpi) {
+        .quote-favorites-thumb {
+            background-image: url('../img/quotefavorites/quote_1440@2x.webp');
+        }
+    }
+
+    .quote-motivation-block {
+        width: 352px;
+        padding: 106px 109px;
+    }
+}
diff --git a/src/css/quote.css b/src/css/quote.css
@@ -46,7 +46,7 @@
 }
 
 .quote-img {
-    height: 335px;
+    height: 272px;
     background-image: url('../img/quote/quote_mobile.webp');
     background-repeat: no-repeat;
     background-size: contain;
@@ -62,6 +62,7 @@
 @media screen and (min-width: 768px) {
     .quote {
         position: relative;
+        border-radius: 50px;
         padding: 64px 80px;
     }
 

diff --git a/src/partials/quote-favorities.html b/src/partials/quote-favorities.html
@@ -0,0 +1,30 @@
+<section class="section">
+  <div class="container quote-block">
+    <div class="quote">
+      <div class="quote-main-title">
+        <svg class="icon-quote-fitness" width="34" height="32">
+          <use href="./img/icons/sprite.svg#icon-quote-fitness"></use>
+        </svg>
+        <h2 class="quote-title">Quote of the day</h2>
+        <svg class="icon-quote" width="28" height="28">
+          <use href="./img/icons/sprite.svg#icon-quote"></use>
+        </svg>
+      </div>
+
+      <div class="quote-thumb">
+        <p class="quote-paragraf js-quote"></p>
+        <p class="quote-author js-author"></p>
+      </div>
+    </div>
+    <div class="favorities-thumb">
+      <div class="quote-favorites-thumb"></div>
+      <div class="quote-motivation-block">
+        <svg class="icon-static-dumbbell" width="20" height="20">
+          <use href="./img/icons/sprite.svg#icon-static-dumbbell"></use>
+        </svg>
+        <h2 class="quote-static-title">110 min</h2>
+        <p class="quote-static-paragraf">Daily norm of sports</p>
+      </div>
+    </div>
+  </div>
+</section>