ABOUT OUR 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.
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.
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.
Creative Services
Nascetur proident porro facilisi voluptates placeat facilisis blandit! Perferendis? Voluptatum eveniet bibendum, possimus lobortis sapien? Inventore nullam faucibus! Dicta, illo, nonummy. Hac metus dignissim totam nascetur! Ipsam molestias quisque alias quia impedit porta convallis lectus euismod facilisi rerum morbi gravida! Officia odit? Aptent nec in eros vitae repellat dictumst curabitur. Fames. Ducimus, doloremque quisquam. Soluta tenetur, pulvinar aspernatur quos primis. Saepe rhoncus accusamus laudantium laborum explicabo, hendrerit fringilla fermentum minus fermentum libero, deserunt qui etiam delectus, eleifend, nunc, consectetuer proident? Cillum, conubia sapiente euismod, quisque.
Varius imperdiet varius ultricies minima ullamcorper.
Varius imperdiet varius ultricies minima ullamcorper.
Varius imperdiet varius ultricies minima ullamcorper.
Varius imperdiet varius ultricies minima ullamcorper.
