Home About Gallery Practice    1 2 3 4 5

Responsive Top Navigation

INTERNET PUBLISHING

Inline, Internal and External CSS (linked from an external source) applied.
HTML5, CSS, RWD & Responsive Page Layout: 3 Columns Become 1

Intro About Purpose
(IntraPage Bookmark Links to Columns 1,2,3)

INTRO

Col 1:INVERTED PYRAMID PARAGRAPH 1

Assignment 5 refined inverted pyramid style paragraph 1. Resize the browser window to see the responsive effect. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

ABOUT

Col 2: INVERTED PYRAMID PARAGRAPH 2

Assignment 5 refined inverted pyramid style paragraph 2. Resize the browser window to see the responsive effect. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CHUNKED TEXT HEADING ASSIGNMENT 4

PURPOSE

Col 3: INVERTED PYRAMID PARAGRAPH 3

Assignment 5 refined inverted pyramid style paragraph 3. Resize the browser window to see the responsive effect. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Responsive Image Gallery

How To Create a Responsive Image Gallery
Resize the browser window to see the effect. For screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%).

Black Box
(400 x 400px) Black Box
75% Gray Box
75% Gray Box (400 x 400px)
50% Gray Box
50% Gray Box (400 x 400px)
25% Gray Box
25% Gray Box (400 x 400px)