ThemeKit Gym Hero
A hero with an article which has the option of five custom animations and can be aligned left, center or right.
Parallax
The parallax scrolling is an option with a control to set the value of the effect.
Layout
Grid
HomeThe container uses the CSS Grid Layout Module which allows all the items to maintain the same height with no extra code required.
Content
Items
ContentEach item has a header with a heading and an optional icon, optional span, text and optional internal link.
Header
Options
ImagesThe icon is in column one when present and the heading is aligned center in column 2 or can be aligned left if no icons are present.
Columns
The grid can have two, three or four items.
When three items are present the last one centers itself in row two below the breakpoint.
List & Image
The list can be standalone as shown below or be displayed with an image.
- 1General fitness classes
- 2Cardio workout plans
- 3Individual body toning
- 4Freestyle dance classes
- 5Yoga and pilates classe
- 7Individual sports training
- 8Unlimited sauna and spa for all gold members
ThemeKit Gym List
This is a demo of the list without the image and using one of the nineteen included CSS markers and the optional animated link tabs
Level [1]
$30
/month
2h Personal/Week
Workout Plan
Choose [1] Class
Upgrade options
Level [3]
$90
/month
8h Personal/Week
Workout Plan
Equipment Upgrades
Nutritionist Advice
Use of Sauna
Use of Spa
Level [2]
$60
/month
4h Personal/Week
Workout Plan
Choose [5] Classes
Nutritionist Advice
Upgrade options
Price Panels
All three panels can appear onload or the center panel appears and the left and right panels can slide out when the item enters the viewport.
The animation can occur only once or every time the item enters the viewport.
The animation is removed below the breakpoint which in this case is set for tablets in portrait mode.
Content
Each panel has a jeading, a price field, text content and an optional internal link.
The price field can have a price and the price period with a different font size.
Text Section
For basic use the text items can be enter with a line break in the text content box.
For more advance users the items can be entered using spans and have a CSS icon chosen from a choice of twelve types.
Spans are entered like this …
<span>Span text …</span>
SVG Icons
SVGs should be used to replace PNG icons on responsve pages since they have about 10% of the file size and don't require a separate server request
SVG Insert
The ThemeKit SVG download folder contains 100s of icons.
Double click an icon to launch it in TextEdit.app in plain text mode or a code editor. Copy the code and paste into the widget settings.
Font Awesome
SVGs have much better quality to Font Awesome or other text icons.
If only a relatively few icons are used it doesn't make sense to download a large stylesheet for Font Awesome and instigate yet another server request from another server.