ABOUT OUR SERVICES

We just love our work and value our customers, so we do our best to provide the highest quality services

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis etquasi.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est qui dolorem.

Browse our services
Quality Plants

In consequat quamid sodales hendrerit eros mi lacinia

Test Button
Flowers

In consequat quamid sodales hendrerit eros mi lacinia

Test Button
Shrubbery

In consequat quamid sodales hendrerit eros mi lacinia

Test Button
Trees

In consequat quamid sodales hendrerit eros mi lacinia

Test Button
ABOUT this demo
Creating a basic services section

This layout was inspired by a recent Blocksy demo site using Stackable blocks. While it is not as easy as it should be, duplication the look is fairly straightforward.

The elements:

  • Container (80px padding, top and bottom)
  • 1/2+1/2 Column equal heights
  • 2x 1/2+1/2 Nested column with 20px margin, top and bottom
  • Classes assigned to the box and to the icon

The hover color is the one piece that is not supported “out of the box” and some custom CSS is required. As much as the lack of support for certain things can be irritating, it is a great way to learn. Getting the icon color to change on box hover was the one part that alluded me.

Download the basic code and then copy and paste it into the editor.

The zoom effect was added in response to a question about column hover which disables interaction with the column elements — this does not.

Copy to Clipboard
Copy to Clipboard

Alternative Design

Below is a variation adding another set of nested columns (auto + 85%), some additional CSS for the rotated text label (in the auto column), and the use of Motion Page plugin for scroll-based animation.

Copy to Clipboard