From 24258962c4909011306b58a1b3b9e9de6513f1ee Mon Sep 17 00:00:00 2001
From: RobinB27 <robin.bacher1@gmail.com>
Date: Tue, 7 Oct 2025 17:49:43 +0200
Subject: [PATCH] Task4

---
 task_1_html_css/src/card.css   | 14 +++++++++++++-
 task_1_html_css/src/index.html |  3 ++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/task_1_html_css/src/card.css b/task_1_html_css/src/card.css
index 3526896..c20064b 100644
--- a/task_1_html_css/src/card.css
+++ b/task_1_html_css/src/card.css
@@ -22,12 +22,20 @@ article:has(header) {
   }
 }
 
+article:has(.card-check:checked) {
+  #special {
+    opacity: 0%;
+    max-height: 0;
+        transition: opacity 0.2s, max-height 0.2s ease 0.2s;
+  }
+}
+
 article {
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   width: 350px;
   line-height: 1.5rem;
-  /* new */
+
   height: min-content;
 
   & header {
@@ -50,6 +58,10 @@ article {
     padding: var(--space);
     width: inherit;
 
+    /* Need to use max-height. Only works on explicit values */
+    max-height: 2000px;
+    transition: max-height 0.2s ease, opacity 0.2s 0.2s;
+
     /* new */
     &:has(img) {
       padding: 0;
diff --git a/task_1_html_css/src/index.html b/task_1_html_css/src/index.html
index ddf7406..2363437 100644
--- a/task_1_html_css/src/index.html
+++ b/task_1_html_css/src/index.html
@@ -48,8 +48,9 @@
         <header>
           <h1>How to start?</h1>
           <a href="#"><i class="fa fa-solid fa-edit"></i> Edit</a>
+          <a href="#"><input type="checkbox" id="card-check" class="card-check"></a>
         </header>
-        <main>
+        <main id="special">
           <h1>Here are some tips</h1>
           <p>First think about where to you need some flexbox layout.</p>
           <ol>