Task4

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;

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>