ThemeKit RE Clip hero

ThemeKit Real Estate

Agents for CitiDens town houses & appartment complexes

Discover More …

Showing Now

Tel: 012 345 6789

ThemeKit Real Estate Clip Hero

The hero is full width fixed height with an overlay panel that can animate in and be positioned left, center or riht on computers and tablets in landscape mode.
The overlay has a heading, text and an optional internal link. Each item has its own alignment control and the items have a vertical spacing control.
Images
The image is inserted in three sizes for each device type and has an alt text attribute, The image that appears on mobile phones in portrait mode has a 9:16 aspect ratio.
Before importing into EverWeb the images in the demo were sized to 1200 x 720px, 720 x 480px and a 9:16 aspect ratio image for phones in porttrait mode 375 x 666px.
Clip Angle
The clip angle is adjustable using a combination of percentage and viewport units to keep the angle constant. The angle direction can be switched left/right.
Bottom Heading
The optional bottom heading can be positioned in the clipped area using the controls for max width and text align.
In the example the max width is set to 1200px and the text is aligned right.

ThemeKit re display block
Beach Front
Residence

Luxury Home

Circa $2.5M

This beach front home has 5 bedrooms and bathrooms and a lap pool on the front deck overooking the ocean.

More Info
ThemeKit re display block
Tropical Paradise
Investment

Investment Property

Circa $7.5M

Stunning beach front cabanas with residents lounge, dining room and bar and function room.

More Info

Display Blocks

The image with alt text and optional caption is inserted is in an HTML5 < figure> element.
The text with optional span and link is in an HTML5 <article> .
The item position can be switched and the text can be above or below the image on browser/device screen widths below the break point.
The relative column widths can be adjusted and the iside caption can animate in on hover when viewed on computers.

Our Clients Comments

CSS Grid is a new way of creating layouts on the web. For the first time ever we have a proper layout system available natively in the browser.
If you compare it to the popular framework Bootstrap, not only can you create layouts that previously weren’t possible without introducing JavaScript, but your code will be easier to maintain and understand.

Hacker Noon

CSS Grid Layout is the most powerful layout system available for web design. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system and can only handle rows.
Grid Layout works by applying CSS rules both to a parent element - the Grid Container - and to the element's children - Grid Items.

Chris House

Wordpress is probally the most popular method of of creating a website. Unfortunately most of the code used for the framework and items is outdated and very inefficient

A single Wordpress requires a large number of scripts to be downloaded even if they are not used on that page.

Susan James

Using a CSS Grid Module layout along with HTML5 elements creates very efficient pages with very little code.
HTML5 elements are semantic in nature a their use results in much better search engine indexing of web pages that use them.

Jon Hastings

Creating a website is easy. Creating one that people actually enjoy visiting is the challenge.
There are so many badly designed websites using antiquated layouts that it doesn't really take much effort to create a good one. Those who study modern web design practice and continually look for better ways to entertain visitors will stand above the masses who don't.

Lorne Hastings

The people who are crazy enough to think they can change the world are the ones who actually do it.
Creativity is finding the connection between things that others can't see.

Anybody can have a great idea but it only exists in the ether until a creator connects it to reality by putting it into practice.

A Anon

ThemeKit RE Links

In the above example the ThemeKit RE Links widget is used to link to services offered. Follow the link below to see it used for linking to amenities.