Update proj0.html

Author: cjxthecoder

project-0/proj0.html

@@ -8,8 +8,9 @@ <h2 id="s2-title" class="title">1. Selfie: The Wrong Way vs. The Right Way</h2>
   </div>
 
   <!-- Text BEFORE the comparison images -->
-  <p class="lead" contenteditable="true" 
+  <p class="lead" contenteditable="false" 
      data-placeholder="Describe what you’re comparing (this text appears before both images)">
+    The left image is taken close up at a 1x zoom, while the right is taken with a zoom of 3x.
   </p>
 
   <!-- Force side-by-side -->
@@ -19,15 +20,13 @@ <h2 id="s2-title" class="title">1. Selfie: The Wrong Way vs. The Right Way</h2>
         <img class="media" src="images/6367A9C4-1A7F-4ECB-B132-EA9D9A954DA3.JPG" 
              alt="Left image description" loading="lazy" width="270" height="360"/>
       </div>
-      <figcaption contenteditable="true" data-placeholder="Caption for left image (A)"></figcaption>
     </figure>
 
     <figure style="flex:1; text-align:center;">
       <div class="figure-wrap">
         <img class="media" src="images/3BD82594-9699-45EC-957B-931D293111B5.JPG" 
              alt="Right image description" loading="lazy" width="270" height="360"/>
       </div>
-      <figcaption contenteditable="true" data-placeholder="Caption for right image (B)"></figcaption>
     </figure>
   </div>
 </section>
@@ -40,8 +39,9 @@ <h2 id="s2-title" class="title">2. Architectural Perspective Compression</h2>
   </div>
 
   <!-- Text BEFORE the comparison images -->
-  <p class="lead" contenteditable="true" 
+  <p class="lead" contenteditable="false" 
      data-placeholder="Describe what you’re comparing (this text appears before both images)">
+    The left image is taken at a zoom of 6x, while the right image is taken close up at 1x zoom.
   </p>
 
   <!-- Force side-by-side -->
@@ -51,15 +51,13 @@ <h2 id="s2-title" class="title">2. Architectural Perspective Compression</h2>
         <img class="media" src="images/0D2BC572-0289-4D45-AAB0-6067DC33B69D.JPG" 
              alt="Left image description" loading="lazy" width="270" height="360"/>
       </div>
-      <figcaption contenteditable="true" data-placeholder="Caption for left image (A)"></figcaption>
     </figure>
 
     <figure style="flex:1; text-align:center;">
       <div class="figure-wrap">
         <img class="media" src="images/5C1F6645-7FF6-4B38-A1CE-0DE6AB11DCEE.JPG" 
              alt="Right image description" loading="lazy" width="270" height="360"/>
       </div>
-      <figcaption contenteditable="true" data-placeholder="Caption for right image (B)"></figcaption>
     </figure>
   </div>
 </section>
@@ -73,12 +71,13 @@ <h2 id="s3-title" class="title">3. The Dolly Zoom</h2>
 
 
 <!-- Text BEFORE the GIF -->
-<p class="lead" contenteditable="true" data-placeholder="Write any notes or description here before the GIF appears…"></p>
+<p class="lead" contenteditable="false" data-placeholder="Write any notes or description here before the GIF appears…">
+  The following GIF gradually goes from 1x to 2x zoom.
+</p>
 
 
 <figure>
 <img class="media" src="images/IMG_9405.gif" alt="Describe the animation" loading="lazy" width="640" height="360"/>
-<figcaption contenteditable="true" data-placeholder="Optional caption for the GIF (below image)"></figcaption>
 </figure>
 </section>