ThemeKit Hero Guillotine — Change The Way You Mix

Hero Images

Nowadays, it seems almost obligatory that the home page of any website should have a hero image. To raise a page design above the masses requires something unique.
Guillotine
The image above is litterally "cutting edge" in that its design was inspired by the action of that murderous instrument.
The background image is inserted in two sizes using the HTML5 <picture> element and the foregrounf consists of two polygon shapes created using CSS clip-path. The animated top image is also inserted in two sizes using media queries as the background of the polygons. Then it's just a question of animating each one in from different directions.
Overlay
The overlay animates in last and has options for a heading, caption and link. The overlay has a grid layout with three columns and three rows.
The position of the items is set by defining their column start, column span and row.
Layers
The ThemeKit Hero Layer widget shown below has a background image inserted in two sizes and a foreground image and text block.
Custom Animation
To allow variation, each overlay item has controls for animation time, type and delay. The types are …
In | Left | Down | Right | Up | Bounce | Rotate | Scale | SpinNOTE: These are custom animations built in to the widget for greater efficiency. They do NOT use the EverWeb default animations which are not really suitable for use on pages that will be displayed on mobile devices.

Reshape The Way You Mix

In a feature-packed new Chrome Edition, the Qu-24 reshapes digital mixing by combining innovative design and exceptional functionality to create a superb professional mixing experience.

Functional From Any Angle

Image Grid + Text

This <article> element is placed last of the four items in the HTML. It can be moved to any position in the grid by specifying its column and row numbers. In this example it is in row 2, column 1.
As the browser width is reduced, the text content forces the <article> height heigher than that of the images.
Both the <article> and the <figure> elements have their align-self property set to center" to preserve the grid layout when this happens.

Info

Parallax Widget

Just one parallax item to add some variety without overkill

Demo Pages

Long Pages & Long Lists

Note the use of a show/hide navigation rather than a fixed one. It hides the navigation on scroll and then shows it when the scroll direction is reversed or the page bottom is reached.
Long lists for items like specifications can be created quickly and automatically distributed in columns using the ThemeKit Column List widget. There are a large number of styling options including several list type, adding a column rule divider and the spacing of the various items.

Specifications

24 Mono Mic/Line Inputs (TRS + XLR)
Recallable AnaLOGIQTM Preamps
3 Stereo Inputs (TRS)
20 Mix Outputs (XLR)
2 Stereo Groups (switchable to Mix mode)
Up to 9 Monitor Mixes (4 mono + 5 stereo)
2 Stereo Matrix Outs
4 FX Engines
4 dedicated FX Sends / Returns
4 Mute Groups
4 DCA Groups
AES Digital Out
32×30 USB Audio Interface
dSNAKETM Remote Audio Port
25 Motor Faders
800×480 Touchscreen
10 Soft Keys
Trim, polarity, HPF, gate, insert, 4-band PEQ, compressor, delay on all Inputs
Insert, 4-band PEQ, 1/3 octave GEQ, compressor, delay on all Outputs
Automatic Mic Mixer
Channel Ducker on all inputs
ProFactory Mic Presets
RackFX Library
Built-in Signal Generator
RTA with Peak Band indication
Spectrogram to aid feedback elimination and room acoustics
Qu-Drive Direct Multitrack Recording / Playback on USB drives
DAW MIDI Control
Qu-You iPhone / Android personal monitoring app
Qu-Pad iPad App
Qu-Control customisable iOS app for simple wireless control
Compatible with ME Personal Mixing System
High contrast metallic finish controls, matching premium GLD Chrome series

QU-24