Skip to content

Commit 9f15462

Browse files
cjxthecodercjxthecoder
authored
Update proj0.html
1 parent 28db075 commit 9f15462

1 file changed

Lines changed: 47 additions & 51 deletions

File tree

‎project-0/proj0.html‎

Lines changed: 47 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -6,66 +6,65 @@
66
</head>
77
<body>
88

9-
109
<!-- Section 1 -->
1110
<section class="section card" aria-labelledby="s2-title">
12-
<div class="heading">
13-
<h2 id="s2-title" class="title">1. Selfie: The Wrong Way vs. The Right Way</h2>
14-
</div>
11+
<div class="heading">
12+
<h2 id="s2-title" class="title">1. Selfie: The Wrong Way vs. The Right Way</h2>
13+
</div>
1514

16-
<!-- Text BEFORE the comparison images -->
17-
<p class="lead" contenteditable="false"
18-
data-placeholder="Describe what you’re comparing (this text appears before both images)">
19-
The left image is taken close up at 1x zoom, while the right is taken with a zoom of 3x.
20-
</p>
15+
<!-- Text BEFORE the comparison images -->
16+
<p class="lead" contenteditable="false"
17+
data-placeholder="Describe what you’re comparing (this text appears before both images)">
18+
The left image is taken close up at 1x zoom, while the right is taken with a zoom of 3x.
19+
</p>
2120

22-
<!-- Force side-by-side -->
23-
<div class="two-up" style="display:flex; gap:16px;" role="group" aria-label="Image comparison">
24-
<figure style="flex:1; text-align:center;">
25-
<div class="figure-wrap">
26-
<img class="media" src="images/6367A9C4-1A7F-4ECB-B132-EA9D9A954DA3.JPG"
27-
alt="Left image description" loading="lazy" width="270" height="360"/>
28-
</div>
29-
</figure>
21+
<!-- Force side-by-side -->
22+
<div class="two-up" style="display:flex; gap:16px;" role="group" aria-label="Image comparison">
23+
<figure style="flex:1; text-align:center;">
24+
<div class="figure-wrap">
25+
<img class="media" src="images/6367A9C4-1A7F-4ECB-B132-EA9D9A954DA3.JPG"
26+
alt="Left image description" loading="lazy" width="270" height="360"/>
27+
</div>
28+
</figure>
3029

31-
<figure style="flex:1; text-align:center;">
32-
<div class="figure-wrap">
33-
<img class="media" src="images/3BD82594-9699-45EC-957B-931D293111B5.JPG"
34-
alt="Right image description" loading="lazy" width="270" height="360"/>
35-
</div>
36-
</figure>
37-
</div>
30+
<figure style="flex:1; text-align:center;">
31+
<div class="figure-wrap">
32+
<img class="media" src="images/3BD82594-9699-45EC-957B-931D293111B5.JPG"
33+
alt="Right image description" loading="lazy" width="270" height="360"/>
34+
</div>
35+
</figure>
36+
</div>
3837
</section>
3938

4039

4140
<!-- Section 2 (Side-by-Side Comparison) -->
4241
<section class="section card" aria-labelledby="s2-title">
43-
<div class="heading">
44-
<h2 id="s2-title" class="title">2. Architectural Perspective Compression</h2>
45-
</div>
42+
<div class="heading">
43+
<h2 id="s2-title" class="title">2. Architectural Perspective Compression</h2>
44+
</div>
4645

47-
<!-- Text BEFORE the comparison images -->
48-
<p class="lead" contenteditable="false"
49-
data-placeholder="Describe what you’re comparing (this text appears before both images)">
50-
The left image is taken at a zoom of 6x, while the right image is taken close up at 1x zoom.
51-
</p>
46+
<!-- Text BEFORE the comparison images -->
47+
<p class="lead" contenteditable="false"
48+
data-placeholder="Describe what you’re comparing (this text appears before both images)">
49+
The left image is taken at a zoom of 6x, while the right image is taken close up at 1x zoom.
50+
</p>
5251

53-
<!-- Force side-by-side -->
54-
<div class="two-up" style="display:flex; gap:16px;" role="group" aria-label="Image comparison">
55-
<figure style="flex:1; text-align:center;">
56-
<div class="figure-wrap">
57-
<img class="media" src="images/0D2BC572-0289-4D45-AAB0-6067DC33B69D.JPG"
58-
alt="Left image description" loading="lazy" width="270" height="360"/>
59-
</div>
60-
</figure>
52+
<!-- Force side-by-side -->
53+
<div class="two-up" style="display:flex; gap:16px;" role="group" aria-label="Image comparison">
54+
<figure style="flex:1; text-align:center;">
55+
<div class="figure-wrap">
56+
<img class="media" src="images/0D2BC572-0289-4D45-AAB0-6067DC33B69D.JPG"
57+
alt="Left image description" loading="lazy" width="270" height="360"/>
58+
</div>
59+
</figure>
6160

62-
<figure style="flex:1; text-align:center;">
63-
<div class="figure-wrap">
64-
<img class="media" src="images/5C1F6645-7FF6-4B38-A1CE-0DE6AB11DCEE.JPG"
65-
alt="Right image description" loading="lazy" width="270" height="360"/>
66-
</div>
67-
</figure>
68-
</div>
61+
<figure style="flex:1; text-align:center;">
62+
<div class="figure-wrap">
63+
<img class="media" src="images/5C1F6645-7FF6-4B38-A1CE-0DE6AB11DCEE.JPG"
64+
alt="Right image description" loading="lazy" width="270" height="360"/>
65+
</div>
66+
</figure>
67+
</div>
6968
</section>
7069

7170

@@ -75,18 +74,15 @@ <h2 id="s2-title" class="title">2. Architectural Perspective Compression</h2>
7574
<h2 id="s3-title" class="title">3. The Dolly Zoom</h2>
7675
</div>
7776

78-
7977
<!-- Text BEFORE the GIF -->
8078
<p class="lead" contenteditable="false" data-placeholder="Write any notes or description here before the GIF appears…">
81-
The following GIF gradually goes from 1x to 2x zoom.
79+
The following GIF gradually goes from 1x to 2x zoom.
8280
</p>
8381

84-
8582
<figure>
8683
<img class="media" src="images/IMG_9405.gif" alt="Describe the animation" loading="lazy" width="640" height="360"/>
8784
</figure>
8885
</section>
8986

90-
9187
</body>
9288
</html>

0 commit comments

Comments
 (0)