Today's Specials …
The ThemeKit Bistro Hero 4 on the landing page is one way to go. The ThemeKit Bistro Hero is simpler and more conventional . It has a built in header with logo plus link option, a heading and a navigation menu.
Note how the heading can use a different font from the navigation links and has controls for text shadow and letter spacing.
The ThemeKit Bistro Contact Bar has a hrid layout with up to four SVG icon links. In the example above it is set to overlay the bottom of the hero item so that the contact info is visible immediately on page load.
The links have a flex layout and an option for a two color animated gradient background which can be alternated if required.
In this example the links are rectangular. They can be made round as can be seen on the home page.
The text widget has a heading and text, styled spans and an optional internal/external link. This example shows the optional border.
The item above is an adjustable spacer which can double as a separator line. The line has controls for percentage width, height, color and style - dashed, dotted, double or solid.
The ThemeKit Bistro Social Links creates icon links which stick to the left side of the browser/device screen above the breakpoint and become full width, flex links stuck to the bottom below the breakpoint.
The icons are SVGs and share the icon color, The link tab background can be all the same or individual colors.
When individual backgrounds are used the opacity can be reduced and return to max opacity on hover.
The tab size is adjustable and has a hover transition animation on computers.
Animation
The optional animation hides the links and then slides them into view after a preset delay. There are controls for animation time in milliseconds and delay in seconds.
Spacer
The ThemeKit Bistro Fade In widget is used as a spacer at 40px in height to allow the social links to clear the footer when viewed on mobile devices.
The ThemeKit Bistro Fade In widget allows the content to fade in over time to give a smooth,professional page load experience,
It has adjustable height so that it can double as a spacer and the animation time is set in milliseconds.