HEADER

SPACEMEN

TAG NOTE: header contains the page title and project introduction.

ARTICLE

PURE CLASS: pure-u-2-3

P TAG: Intro paragraph for the Spacemen magazine story.

FIGURE / IMG TAG Spacemen magazine scan showing a science fiction spaceship scene
IMG NOTE: scanned magazine image, responsive width: 100%, height: auto, saved in /images/.

P TAG: Short caption or supporting paragraph after the image.

H1 / HEADLINE TAG

SECTION pure-g

P TAG
PURE CLASS: pure-u-1-2
Left nested paragraph.

P TAG
PURE CLASS: pure-u-1-2
Right nested paragraph.

Style Planning Notes

MEASUREMENTS

Container: max-width 1280px

Grid: 3 columns

Side padding: 24px desktop

Gap / gutter: 24px

Column width: about 394.67px

Baseline: 24px vertical rhythm

HTML STRUCTURE

header

main.pure-g

aside.pure-u-1-3

article.pure-u-2-3

section.pure-g

footer.pure-g

RESPONSIVE WEB

Desktop: 1280px artboard

Tablet: 768px breakpoint

Mobile: stacked layout

Media query: max-width 800px

Images: width:100%; height:auto;

Spacemen Image + Content Notes

SCAN 01 Spacemen magazine monster scan

IMG NOTE: Use as scanned content. Crop and optimize for web before final export.

SCAN 02 Spacemen magazine robot scan

IMG NOTE: Keep subject centered. Add meaningful alt text.

SCAN 03 Spacemen magazine flying saucer scan

IMG NOTE: Save final web images in the images folder.