Landing page - Layoutix

Layoutix /Landing pageChange page type

Navigation

Standard navigationMinimal navigationNo navigation

Brand, links and a button

Hero

CenteredText left, image rightLeft-aligned band

Large headline and button, centered

Features layout

Three cards in a rowStacked listAlternating sidesImage between features

One card per feature

Content width

Standard widthNarrow column

Content as wide as an ordinary web page

Parts

Hero background decoration Features section How it works Call-to-action band Footer

Customer logo row Testimonials Pricing plans FAQ

Sea MistWarm SandMorning BlueMintRoseLavenderSunsetForestGraphiteLemonPeachSkyWisteriaOliveCoralLagoonBerryAmberIndigoCeladonWineSlateCaramelMidnight

Current: Lavender Light#F6F3FD #DDD3F5 #7048E0 #241848

Sharp linesAlmost square corners, thin dividing lines, no shadowBalancedMedium corners, a light shadowSoftLarge corners, a more visible soft shadowColor blocksThe hero is one solid accent block, small corners, no shadow

Light onlyOnly a light themeDark onlyOnly a dark themeLight and darkBoth are supported and the user can switch

Pick any number, or none. Hover a card to play it.

On load

Start

Hero rises inThe headline and button fade in from below

Features in sequenceFeature blocks fade in one after another

Hero image zooms inThe large image grows from slightly smaller to full size and fades in

On scroll

Start

Hero parallax scrollThe hero background moves slower than the text on scroll, for depth

Fade in on scrollEach section fades in and rises as it scrolls into view

Sticky, shrinking navigationAfter scrolling the navigation sticks to the top, gets shorter and gains a shadow

On hover or press

Get started

Button grows on hoverThe call-to-action button grows when the pointer is over it

Card lifts on hoverFeature cards rise slightly when the pointer is over them

1280px wide

Chosen motion:Hero rises inButton grows on hover