Quaternion Star

Java Script buttons

Hyperlink Tag
This is a w3school link
Title Text Bubble

Hover over this line to display text bubble.

Abbreviation Tag

Marking up abbreviations can give useful information to browsers, translation systems and search-engines.

The WHO was founded in 1948.

Bidirectional Text

click on the two images beloW

Scrolling Marquee

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Scrolling Scrolling Scrolling

Slow Stop Marquee

Hover over path below to slow down or hold down to stop.

HTML Image Map

Click on the center yellow square - for alert message.
Then click on the two black corner squares.

(Image Float:Right)
W3Schools.com

Click on the Image Link

SVG Animation

SVG Rotation / Flex Box

Transition Box

Touch Me

SVG -Colour Gradient

TEXT 1

TEXT 2

TEXT 3

TEXT 4

TEXT 5

TEXT 6

SVG Path - A quadratic Bézier curve

SVG Animation

Nested and Span Column Tables

World Music
Music		Count
South Korea	Kpop	96
Japan	Jpop	24
China, Taiwan	Cpop	64
China, Taiwan	MandoPop	64
Hong Kong	Cantopop	16
Australia	Kpop	16

HTML Select Function

Select Font Size

Unorderd and Ordered Lists

This is a ^super list.
This is a ^super list.

This is a nested list.
This is a nested list.

This is a ^super list.

This is a _sub list.
This is a _sub list.

Music 1: - Kpop; - Jpop
Music 2: - Cpop; - Mandopop

Relative vs Absolute HTML Positions

box 1

box 2

R1

R2

A3

A4

Input Type / Date Control

--- --- ---

addEventListener / this.classList.toggle / this.nextElementSibling

Ancient Rome Historiography

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Multi Class / ClassList Toggle / ClassName

My Box

Block Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Block Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Vertical Menu

×

London, UK

×

Tokyo, Japan

×

Seoul, South Korea

×

getElementById / getElementByClassName / event.currentTarget / this.parentElement

×

London, UK

×

Tokyo, Japan

×

Seoul, South Korea

×

Clickable Dropdown

Box Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Quaternion Star Playlist

Box Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

JavaScript Playground

World Music

Unorderd and Ordered Lists

Ancient Rome Historiography

London, UK

Tokyo, Japan

Seoul, South Korea

London, UK

Tokyo, Japan

Seoul, South Korea

> Nested Floating Text Boxes with Auto Scroll

Colour Transparency - rgba % vs linear gradient degrees

Colour Transparency - image opacity

Moves with window size

Linked website Embed in iFrame (80% Width with 25/50 background coverage)

Responsive Web Design - Image resizes as window is resized

Responsive Web Design - Images changes as window is resized (3 images)

Repeat background image banner - Horizontal only