From 63da7791305603c08ed13ff6d2a99cf37f41d01d Mon Sep 17 00:00:00 2001
From: Julie <saganjules@gmail.com>
Date: Sat, 21 Dec 2024 21:34:51 +0200
Subject: [PATCH] Added a for cards and German's comments

---
 04-lection2/01-histogram/histogram.css |  2 ++
 components/card/card.css               | 16 +++--------
 index.html                             | 39 +++++++++++++-------------
 3 files changed, 25 insertions(+), 32 deletions(-)

diff --git a/04-lection2/01-histogram/histogram.css b/04-lection2/01-histogram/histogram.css
index 4b51585..2d76fc2 100644
--- a/04-lection2/01-histogram/histogram.css
+++ b/04-lection2/01-histogram/histogram.css
@@ -25,12 +25,14 @@
     opacity: 0.8;
     line-height: 1.5;
     padding-bottom: 6px;
+    color: var(--black);
 }
 
 .histogram__value {
     font-family: 'Inter', sans-serif;
     font-size: 20px;
     line-height: 1.3;
+    color: var(--black);
 }
 
 .histogram__link {
diff --git a/components/card/card.css b/components/card/card.css
index 3c9ffba..b3d7dd6 100644
--- a/components/card/card.css
+++ b/components/card/card.css
@@ -6,12 +6,9 @@
     background-color: var(--white);
     border-radius: 12px;
     box-shadow: 0px 2px 4px 0px rgba(33, 36, 41, 0.05);
-    flex: 1 1 calc(33.333% - 30px);
-    /* min-width: 350px; */
-    width: auto;
+    min-width: 350px;
     min-height: 367px;
-    height: auto;
-    pointer-events: none;
+    text-decoration: none;
 }
 
 .card__preview {
@@ -21,6 +18,7 @@
     align-items: center;
     width: 100%;
     flex-grow: 1;
+    pointer-events: none;
 }
 
 .card__title {
@@ -37,13 +35,7 @@
 
 @media screen and (max-width: 1024px) {
     .card {
-        flex: 1 1 calc(50% - 20px);
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .card {
-        flex: 1 1 calc(100% - 10px);
+        flex: 1 1 50%;
     }
 }
 
diff --git a/index.html b/index.html
index d49f278..faa965a 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,7 @@ <h1 class="header__title">Reusable component library</h1>
         <main class="content">
             <div class="container">
                 <div class="content__wrapper">
-                    <div class="card">
+                    <a href="#" class="card">
                         <div class="card__preview">
                             <div class="tooltip">
                                 <div class="tooltip__trigger">
@@ -40,27 +40,27 @@ <h1 class="header__title">Reusable component library</h1>
                                             fill="#212429" />
                                     </svg>
                                 </div>
-                    
+
                                 <div class="tooltip__bubble">
                                     <span>Helper text</span>
                                 </div>
                             </div>
                         </div>
                         <p class="card__title">Tooltip</p>
-                    </div>
-                    
-                    <div class="card">
+                    </a>
+
+                    <a href="#" class="card">
                         <div class="card__preview"></div>
                         <p class="card__title">Custom form elements</p>
-                    </div>
+                    </a>
 
-                    <div class="card">
+                    <a href="#" class="card">
                         <div class="card__preview">
                             <div class="calendar">
                                 <div class="calendar__header">
                                     <span class="calendar__title">October 2019</span>
                                 </div>
-                    
+
                                 <div class="calendar__items">
                                     <div class="calendar__item calendar__item_day">Mon</div>
                                     <div class="calendar__item calendar__item_day">Tue</div>
@@ -69,7 +69,6 @@ <h1 class="header__title">Reusable component library</h1>
                                     <div class="calendar__item calendar__item_day">Fri</div>
                                     <div class="calendar__item calendar__item_day">Sat</div>
                                     <div class="calendar__item calendar__item_day">Sun</div>
-                    
                                     <div class="calendar__item calendar__item_date"></div>
                                     <div class="calendar__item calendar__item_date"></div>
                                     <div class="calendar__item calendar__item_date"></div>
@@ -109,14 +108,14 @@ <h1 class="header__title">Reusable component library</h1>
                             </div>
                         </div>
                         <p class="card__title">Calendar</p>
-                    </div>
+                    </a>
 
-                    <div class="card">
+                    <a href="#" class="card">
                         <div class="card__preview"></div>
                         <p class="card__title">Modal dialog</p>
-                    </div>
+                    </a>
 
-                    <div class="card">
+                    <a href="#" class="card">
                         <div class="card__preview">
                             <div class="histogram">
                                 <div class="histogram__header">
@@ -124,7 +123,7 @@ <h1 class="header__title">Reusable component library</h1>
                                         <span class="histogram__title">Total orders</span>
                                         <span class="histogram__value">50254</span>
                                     </div>
-                                    <a href="#" class="histogram__link">View all</a>
+                                    <span class="histogram__link">View all</span>
                                 </div>
                                 <div class="histogram__body">
                                     <div class="histogram__bar" style="height: 60%;"></div>
@@ -145,14 +144,14 @@ <h1 class="header__title">Reusable component library</h1>
                             </div>
                         </div>
                         <p class="card__title">Histogram</p>
-                    </div>
+                    </a>
 
-                <div class="card">
-                    <div class="card__preview"></div>
-                    <p class="card__title">Avatar</p>
-                </div>
+                    <a href="#" class="card">
+                        <div class="card__preview"></div>
+                        <p class="card__title">Avatar</p>
+                    </a>
 
-            </div>
+                </div>
         </main>
 
         <footer class="footer">