[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

 

Kyle on sabyoutubeKyle on sabwordpressKyle on sabtwitterKyle on sablinkedinKyle on sabfacebookKyle on sabemail
Kyle
Hi there, I'm Kyle. I'm a web developer and an indie game developer. Currently working on an android game called: Burning Rush developed in Game Maker: Studio and is currently in Early Access Stages.

I enjoy working with code, favorite language currently: Python.
Currently working: Freelance Part-time, Real Estate Marketing & Web Development Full-time, and Indie Game Development with Unholy Squid Entertainment.

You might also like

Leave a Reply

Your email address will not be published. Required fields are marked *