Rainbow Layout

Gold has been found here.

Main Content


First in source HTML. Most important content.

Rainbow

Secondary Information

Site Map

All content styles have been removed.

Focus is on layout and compatibilty only.

Test Responsive Layout

This will only work in the Google Chrome Browser.

  1. Press F12 to view Developer Tools.
  2. Press Ctrl+Shift+M or select icon, second from left in Developer Tools (Toggle Device Toolbar).
  3. Select each of the devices from the drop-down above the layout.
  4. Now select 'Responsive' and drag the window slowly, widening and narrowing the viewport.
  5. Notice how the layout changes layout to suit width.
  6. Notice the colour changing as an indicator of a media-width detection.
  7. Notice that we can also change the text at different widths.

IE Support

Only legacy IE browsers load additional fixes needed for this layout.

HTML

Only divs can be targeted if no JavaScript.

HTML5 can be used with a little CSS and JavaScript.

CSS

filter and -ms-filter used for two-colour (maximum) gradient.

JavaScript

respond.js used for media queries.

jQuery plugin used for rounded corners.

Return to Top