1) Main Heading (H1)

Subheading (H2)

Sub-subheading (H3)

Subsection Title (H4)

Label (H5)

Caption or fine print (H6)

This section demonstrates different heading levels. Everything in this page is kept in a simple vertical order without complex layout.

2) Sample Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo, metus at tempus iaculis, sapien justo finibus erat, a facilisis massa neque vitae ex. Cras at leo vitae quam placerat elementum.

Bold, italic, and <code> samples are shown here. Below are unordered and ordered lists.

• Unordered item one
• Unordered item two
• Unordered item three

1. First step
2. Second step
3. Third step

3) Sample Images (with alt text)

Each image includes descriptive alt text for accessibility. Images are loaded from local files.

4) Background Colours

This section uses a lavender background. Other sections use different background colours defined in :root variables.

5) CSS Animations

This paragraph fades in and moves up a bit on load using @keyframes fadeInUp.

Pulsing badge demonstrates a continuous pulse animation.

Simple spin icon: ⟳

6) Links

• External link to example.com
• Internal link back to top
• Email link (mailto)
• Telephone link (tel)

7) <img> Tag Attributes

Below is an image demonstrating common attributes: alt, width, height, loading, and decoding.

8) Footer Note

Nothing fancy here—just sequential sections as requested. You can copy this single HTML file and open it in a browser.