Skip to content

Commit 21c1249

Browse files
cjxthecodercjxthecoder
authored
Update proj0.html
1 parent 206ad60 commit 21c1249

File tree

1 file changed

+55
-51
lines changed

1 file changed

+55
-51
lines changed

‎project-0/proj0.html‎

Lines changed: 55 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -2,62 +2,66 @@
22

33

44
<!-- Section 1 -->
5-
<section class="section card" aria-labelledby="s1-title">
6-
<div class="heading">
7-
<h2 id="s1-title" class="title">1. Selfie: The Wrong Way vs. The Right Way</h2>
8-
</div>
9-
10-
11-
<!-- Text BEFORE the comparison images -->
12-
<p class="lead" contenteditable="true" data-placeholder="Describe what you’re comparing (this text appears before both images)"></p>
13-
14-
15-
<div class="two-up" role="group" aria-label="Image comparison">
16-
<figure>
17-
<div class="figure-wrap">
18-
<img class="media" src="images/6367A9C4-1A7F-4ECB-B132-EA9D9A954DA3.JPG" alt="Left image description" loading="lazy" width="270" height="360"/>
19-
</div>
20-
<figcaption contenteditable="true" data-placeholder="Caption for left image (A)"></figcaption>
21-
</figure>
22-
23-
24-
<figure>
25-
<div class="figure-wrap">
26-
<img class="media" src="images/3BD82594-9699-45EC-957B-931D293111B5.JPG" alt="Right image description" loading="lazy" width="270" height="360"/>
27-
</div>
28-
<figcaption contenteditable="true" data-placeholder="Caption for right image (B)"></figcaption>
29-
</figure>
30-
</div>
5+
<section class="section card" aria-labelledby="s2-title">
6+
<div class="heading">
7+
<h2 id="s2-title" class="title">1. Selfie: The Wrong Way vs. The Right Way</h2>
8+
</div>
9+
10+
<!-- Text BEFORE the comparison images -->
11+
<p class="lead" contenteditable="true"
12+
data-placeholder="Describe what you’re comparing (this text appears before both images)">
13+
</p>
14+
15+
<!-- Force side-by-side -->
16+
<div class="two-up" style="display:flex; gap:16px;" role="group" aria-label="Image comparison">
17+
<figure style="flex:1; text-align:center;">
18+
<div class="figure-wrap">
19+
<img class="media" src="images/6367A9C4-1A7F-4ECB-B132-EA9D9A954DA3.JPG"
20+
alt="Left image description" loading="lazy" width="270" height="360"/>
21+
</div>
22+
<figcaption contenteditable="true" data-placeholder="Caption for left image (A)"></figcaption>
23+
</figure>
24+
25+
<figure style="flex:1; text-align:center;">
26+
<div class="figure-wrap">
27+
<img class="media" src="images/3BD82594-9699-45EC-957B-931D293111B5.JPG"
28+
alt="Right image description" loading="lazy" width="270" height="360"/>
29+
</div>
30+
<figcaption contenteditable="true" data-placeholder="Caption for right image (B)"></figcaption>
31+
</figure>
32+
</div>
3133
</section>
3234

3335

3436
<!-- Section 2 (Side-by-Side Comparison) -->
3537
<section class="section card" aria-labelledby="s2-title">
36-
<div class="heading">
37-
<h2 id="s2-title" class="title">2. Architectural Perspective Compression</h2>
38-
</div>
39-
40-
41-
<!-- Text BEFORE the comparison images -->
42-
<p class="lead" contenteditable="true" data-placeholder="Describe what you’re comparing (this text appears before both images)"></p>
43-
44-
45-
<div class="two-up" role="group" aria-label="Image comparison">
46-
<figure>
47-
<div class="figure-wrap">
48-
<img class="media" src="images/0D2BC572-0289-4D45-AAB0-6067DC33B69D.JPG" alt="Left image description" loading="lazy" width="270" height="360"/>
49-
</div>
50-
<figcaption contenteditable="true" data-placeholder="Caption for left image (A)"></figcaption>
51-
</figure>
52-
53-
54-
<figure>
55-
<div class="figure-wrap">
56-
<img class="media" src="images/5C1F6645-7FF6-4B38-A1CE-0DE6AB11DCEE.JPG" alt="Right image description" loading="lazy" width="270" height="360"/>
57-
</div>
58-
<figcaption contenteditable="true" data-placeholder="Caption for right image (B)"></figcaption>
59-
</figure>
60-
</div>
38+
<div class="heading">
39+
<h2 id="s2-title" class="title">2. Architectural Perspective Compression</h2>
40+
</div>
41+
42+
<!-- Text BEFORE the comparison images -->
43+
<p class="lead" contenteditable="true"
44+
data-placeholder="Describe what you’re comparing (this text appears before both images)">
45+
</p>
46+
47+
<!-- Force side-by-side -->
48+
<div class="two-up" style="display:flex; gap:16px;" role="group" aria-label="Image comparison">
49+
<figure style="flex:1; text-align:center;">
50+
<div class="figure-wrap">
51+
<img class="media" src="images/0D2BC572-0289-4D45-AAB0-6067DC33B69D.JPG"
52+
alt="Left image description" loading="lazy" width="270" height="360"/>
53+
</div>
54+
<figcaption contenteditable="true" data-placeholder="Caption for left image (A)"></figcaption>
55+
</figure>
56+
57+
<figure style="flex:1; text-align:center;">
58+
<div class="figure-wrap">
59+
<img class="media" src="images/5C1F6645-7FF6-4B38-A1CE-0DE6AB11DCEE.JPG"
60+
alt="Right image description" loading="lazy" width="270" height="360"/>
61+
</div>
62+
<figcaption contenteditable="true" data-placeholder="Caption for right image (B)"></figcaption>
63+
</figure>
64+
</div>
6165
</section>
6266

6367

0 commit comments

Comments
 (0)