Portfolio Header
A portfolio header with h1 heading, image and text section with optional link.
More WidgtsEverWeb Widgets
Roddy McKay
Web Design Portfolio
Portfolio Header
The header has a 12 column grid layout with an animated h1 heading, an image and a text block with optional link. The background can be a two color gradient with adjustable angle and the bottom of the container can have a cut off angle from the left or irght.
The h1 heading can animate in from the left or bounce down from the top. It has additional controls for adding a text shaow and adjusting the letter spacing.
Image
The image has controls for adding a border and/or a box shadow for making a square image round.
Link
The CTA link in the text section can open internal or external pages and has a new window option.
ThemeKit Block Nav
The ThemeKit Block Nav was designed to provide a navigation opened by an action tab which is convenient for both desktop and mobile device users.
On desktop browsers and devices with a screen width wider than the break point the action tab sits at the top right and the navigation links open below it with a slide or fade animtion.
Below the break point it slides down to the bottom where it can be positioned left, center or right and the links open above it.
The position of the mobile version can be set for both tablets and phones, The setting is the navigation's distance from the top expressed in viewport units. The actual value of the setting will depend on the number of links in the navigation.
The links can be internal/external and have a new window option. The current page link can be indicated by using a different color for the link text.
ThemeKit Gradient Slide In
The slide in tab has a heading, text and an optional link over a gradient background. Both the tab and the content can be animated to give a double slide effect. The tab can be hidden on any device with a screen width less than the break point.
Position
The tab's position can be set as absolute at a preset distance from the top so that it scrolls with the page content. The position can be changed to fixed so that it always remains in view.
Close
The close function is optional and shows the close icon at the top right when turned on.
Inserted Position
Since the tab is either positioned absolutely or fixed, the widget can be inserted at the bottom - below the footer widget - on the EverWeb design canvas.
How It Works
The tab uses a custom CSS animation using keyframes to hide it on page load and slide it in after a preset delay.
The close function uses a single line custom jQuery plugin to animate it back out of the viewport.