Skip to content

Commit e1ef0ae

Browse files
cjxthecodercjxthecoder
authored
Update index.html
1 parent d7982a5 commit e1ef0ae

File tree

1 file changed

+86
-0
lines changed

1 file changed

+86
-0
lines changed

‎project-0/index.html‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,87 @@
1+
<!DOCTYPE html>
2+
background: rgba(110,168,254,.06);
3+
border-radius: 8px;
4+
min-height: 22px;
5+
}
16

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>
20+
21+
22+
<!-- Section 1 -->
23+
<section class="section card" aria-labelledby="s1-title">
24+
<div class="heading">
25+
<div class="badge" aria-hidden="true">1</div>
26+
<h2 id="s1-title" class="title">Section One — Static Image</h2>
27+
</div>
28+
29+
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>
32+
33+
34+
<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>
37+
</figure>
38+
</section>
39+
40+
41+
<!-- Section 2 -->
42+
<section class="section card" aria-labelledby="s2-title">
43+
<div class="heading">
44+
<div class="badge" aria-hidden="true">2</div>
45+
<h2 id="s2-title" class="title">Section Two — Static Image</h2>
46+
</div>
47+
48+
49+
<!-- Text BEFORE the image -->
50+
<p class="lead" contenteditable="true" data-placeholder="Add context or explanation here before the image loads…"></p>
51+
52+
53+
<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>
56+
</figure>
57+
</section>
58+
59+
60+
<!-- Section 3 (GIF) -->
61+
<section class="section card" aria-labelledby="s3-title">
62+
<div class="heading">
63+
<div class="badge" aria-hidden="true">3</div>
64+
<h2 id="s3-title" class="title">Section Three — Animated GIF</h2>
65+
</div>
66+
67+
68+
<!-- Text BEFORE the GIF -->
69+
<p class="lead" contenteditable="true" data-placeholder="Write any notes or description here before the GIF appears…"></p>
70+
71+
72+
<figure>
73+
<img class="media" src="images/animation.gif" alt="Describe the animation" loading="lazy" />
74+
<figcaption contenteditable="true" data-placeholder="Optional caption for the GIF (below image)"></figcaption>
75+
</figure>
76+
</section>
77+
78+
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>
86+
</body>
87+
</html>

0 commit comments

Comments
 (0)