Skip to content

Commit 37ac40b

Browse files
cjxthecodercjxthecoder
authored
Update code.html
1 parent a8bfad9 commit 37ac40b

File tree

1 file changed

+37
-41
lines changed

1 file changed

+37
-41
lines changed

‎project-0/code.html‎

Lines changed: 37 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,70 @@
11
<!DOCTYPE html>
2-
background: rgba(110,168,254,.06);
3-
border-radius: 8px;
4-
min-height: 22px;
5-
}
6-
7-
8-
footer {
9-
margin-top: 32px; color: var(--muted); font-size: .95rem;
10-
}
11-
code { background: #0d0f14; padding: 2px 6px; border-radius: 6px; }
12-
</style>
13-
</head>
14-
<body>
15-
<main class="container" role="main">
16-
<header>
17-
<h1>Three-Part Template</h1>
18-
<p>Each section has editable text <em>before</em> the image. The third is an animated GIF.</p>
19-
</header>
202

213

224
<!-- Section 1 -->
235
<section class="section card" aria-labelledby="s1-title">
246
<div class="heading">
25-
<div class="badge" aria-hidden="true">1</div>
26-
<h2 id="s1-title" class="title">Section One — Static Image</h2>
7+
<h2 id="s1-title" class="title">1. Selfie: The Wrong Way vs. The Right Way</h2>
278
</div>
289

2910

30-
<!-- Text BEFORE the image -->
31-
<p class="lead" contenteditable="true" data-placeholder="Type your introduction or notes here (text appears before the image)…"></p>
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>
3213

3314

15+
<div class="two-up" role="group" aria-label="Image comparison">
3416
<figure>
35-
<img class="media" src="images/photo-1.jpg" alt="Describe image one" loading="lazy" />
36-
<figcaption contenteditable="true" data-placeholder="Optional caption for Section 1 (below image)"></figcaption>
17+
<div class="figure-wrap">
18+
<img class="media" src="images/6367A9C4-1A7F-4ECB-B132-EA9D9A954DA3.JPG" alt="Left image description" loading="lazy" />
19+
</div>
20+
<figcaption contenteditable="true" data-placeholder="Caption for left image (A)"></figcaption>
3721
</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" />
27+
</div>
28+
<figcaption contenteditable="true" data-placeholder="Caption for right image (B)"></figcaption>
29+
</figure>
30+
</div>
3831
</section>
3932

4033

41-
<!-- Section 2 -->
34+
<!-- Section 2 (Side-by-Side Comparison) -->
4235
<section class="section card" aria-labelledby="s2-title">
4336
<div class="heading">
44-
<div class="badge" aria-hidden="true">2</div>
45-
<h2 id="s2-title" class="title">Section Two — Static Image</h2>
37+
<h2 id="s2-title" class="title">2. Architectural Perspective Compression</h2>
4638
</div>
4739

4840

49-
<!-- Text BEFORE the image -->
50-
<p class="lead" contenteditable="true" data-placeholder="Add context or explanation here before the image loads…"></p>
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>
5143

5244

45+
<div class="two-up" role="group" aria-label="Image comparison">
5346
<figure>
54-
<img class="media" src="images/photo-2.jpg" alt="Describe image two" loading="lazy" />
55-
<figcaption contenteditable="true" data-placeholder="Optional caption for Section 2 (below image)"></figcaption>
47+
<div class="figure-wrap">
48+
<img class="media" src="images/0D2BC572-0289-4D45-AAB0-6067DC33B69D.JPG" alt="Left image description" loading="lazy" />
49+
</div>
50+
<figcaption contenteditable="true" data-placeholder="Caption for left image (A)"></figcaption>
5651
</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" />
57+
</div>
58+
<figcaption contenteditable="true" data-placeholder="Caption for right image (B)"></figcaption>
59+
</figure>
60+
</div>
5761
</section>
5862

5963

6064
<!-- Section 3 (GIF) -->
6165
<section class="section card" aria-labelledby="s3-title">
6266
<div class="heading">
63-
<div class="badge" aria-hidden="true">3</div>
64-
<h2 id="s3-title" class="title">Section Three — Animated GIF</h2>
67+
<h2 id="s3-title" class="title">3. The Dolly Zoom</h2>
6568
</div>
6669

6770

@@ -70,18 +73,11 @@ <h2 id="s3-title" class="title">Section Three — Animated GIF</h2>
7073

7174

7275
<figure>
73-
<img class="media" src="images/animation.gif" alt="Describe the animation" loading="lazy" />
76+
<img class="media" src="images/IMG_9405.gif" alt="Describe the animation" loading="lazy" />
7477
<figcaption contenteditable="true" data-placeholder="Optional caption for the GIF (below image)"></figcaption>
7578
</figure>
7679
</section>
7780

7881

79-
<footer>
80-
<p>
81-
Tip: The editable text you type here won’t persist after a refresh unless you save the HTML or wire up storage.
82-
Replace image paths in the <code>src</code> attributes. For best results, keep large images optimized.
83-
</p>
84-
</footer>
85-
</main>
8682
</body>
8783
</html>

0 commit comments

Comments
 (0)