ThemeKit Hero Wipe
An image linear wipe animation from the left or center.
Overlay wipe from the left, right or down.
Article animation can be fade in or scale.
Wipe Animation
This type of animation is fairly unique so it will help to make the web page memorable to visitors. The hero image can wipe from the left or out from the center.
The adjustable colored overlay can wipe from the left or right or down from the top.
The article with a heading text and optional link can fade or scale in.
The hero item can have a fixed height or fill the viewport height which it does by default on mobile phones in portrait mode.
Navigation
Perspective Swing
The navigation panel animates out from perspective rotating out on the Y-axis. The navigation is full height and, when the number of links is greater than the viewport height the overflow will scroll.
The links scale up on hover when viewed on a computer and expand to fill the viewport height.
The current page link can be indicated using a different colot from the link and hover colors.
Action Tab
The tab is fixed in position and has controls for setting its distance from the top and the right.
On mobile devices the action tab can be set in the bottom half of the screen for greater user convenience. This distance is set as the number of viewport units from the bottom of the device window.
Quotes or Testimonials
An amateur web designer tries to give the client what they want.
A professional give the client what they actually need for promoting their product or services and increasing public awareness.
A Anon
CSS Grid Layout is the most powerful layout system available for web design. It is a 2-dimensional system handling both columns and rows. Flexbox is largely a one-dimensional system and can only handle rows.
Chris C
The CSS Grid Layout Module allows web designer to break out of the box and create organic layouts that please the eye and make individual items easier to find.
Jeff Hanley
Modern web design uses the landing page hero to create a lasting impression and entice the visitor to click through using the CTA (call to action) link.
Design World
Quotes/Testimonials
This is an auto grid using the min-max property and the auto-fit keyword so the number of items per row is automatically adjusted depending on the min width setting and browser/device window width.
The heading above the grid and the link below it are optional.
Quotes
The quote section use the HTML5 <blockquote> tag. This tag specifies a section that is quoted from another source.
The optional fancy quotes are created as pseudo elements before and after the text. The default font is a Google hosted one - Coutard - but this can be changed to any other web safe or Google hosted font.
The quotes have options for font size and color and for adjusting their position relative to the top and their horizontal spacing from the text.
Signature
The default font is a Google hosted font - Quigley. This can also be changed to any other web safe or Google hosted font. The font size and color are adjustable as is the font style. The alignment of the signature can be left, center or right and its vertical position can be adjusted using the line hieght control.
Animation
The grid items can animate up when they appear in the viewport and have controls for animation time and delay set in milliseconds.