Tag : call to action

[HTML] Basic Four Box CTA Layout 1

This is a basic four box CTA layout done in HTML.

This template uses:

  • Font Awesome
  • CSS
  • HTML

Structure:

  • Parent Container (id: #ctaContainer)
  • Four Child Containers inside Parent (id: #ctaHome)
    • Contains inside:
      • Icon Container (class: .iconCircle)
      • Heading Container (class: .ctaHeading)
      • Sub Heading Container (class: .ctaSub)
  • Float clear to keep it responsive

The CSS:

The HTML:

And lastly we now need to add the hover animations:

 

Example of the CTA’s being responsive as well as a hovered CTA:

Screen Shot 2015-11-25 at 9.18.20 AM