From c4a871961d43ed4646f99535be540f0d6634a244 Mon Sep 17 00:00:00 2001
From: Paolo Bautista <paolo.bautista@uconn.edu>
Date: Sun, 6 Mar 2022 23:18:10 -0500
Subject: [PATCH] CSS Showcase: Content-Visibility

---
 css-showcase/index.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/css-showcase/index.html b/css-showcase/index.html
index 897b539..0ca2237 100644
--- a/css-showcase/index.html
+++ b/css-showcase/index.html
@@ -80,7 +80,7 @@
 
   <div id="why-div">
     <h1 id="why-title">Why Use It?</h1>
-    <img id="why-img" width="90%" height="90%" src="img/CV-chunks.jpg">
+    <img id="why-img" width="90%" height="90%" alt="Chunks Demo" src="img/CV-chunks.jpg">
     <p id="why-desc">Applying <code>content-visibility: auto;</code> to chunked content areas gives a 7x rendering performance boost on initial load.</p>
   </div>
 
@@ -92,16 +92,16 @@
   
     <div id="img-text-div">
       <button type="button" class="img-text-content" id="display-text">display: none;</button>
-      <div class="explain-div"id="disp-exp-div">
+      <div class="explain-div" id="disp-exp-div">
         <p class="explain-text" id="disp-exp">The <code>display: none;</code> property Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off. To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.
         </p>
       </div>
 
       <button type="button" class="img-text-content" id="visibility-text">visibility: hidden;</button>
-      <div class="explain-div"id="vis-exp-div"><p class="explain-text" id="vis-exp">The <code>visibility: hidden;</code> property is invisible (not drawn), but still affects layout as normal. Descendants of the element will be visible if they have visibility set to visible. The element cannot receive focus (such as when navigating through tab indexes).</p></div>
+      <div class="explain-div" id="vis-exp-div"><p class="explain-text" id="vis-exp">The <code>visibility: hidden;</code> property is invisible (not drawn), but still affects layout as normal. Descendants of the element will be visible if they have visibility set to visible. The element cannot receive focus (such as when navigating through tab indexes).</p></div>
 
       <button type="button" class="img-text-content" id="content-text">content-visibility: hidden;</button>
-      <div class="explain-div"id="cont-exp-div"><p class="explain-text" id="cont-exp">The <code>content-visibility: hidden;</code> property skips its elements contents. The skipped contents must not be accessible to user-agent features, such as find-in-page, tab-order navigation, etc., nor be selectable or focusable. This is similar to giving the contents display: none.</p></div>
+      <div class="explain-div" id="cont-exp-div"><p class="explain-text" id="cont-exp">The <code>content-visibility: hidden;</code> property skips its elements contents. The skipped contents must not be accessible to user-agent features, such as find-in-page, tab-order navigation, etc., nor be selectable or focusable. This is similar to giving the contents display: none.</p></div>
 
       <button type="button" id="reset">Reset</button>
     </div>