Category : HTML

[CSS] Simple Profile Box

This is an example of a profile box where users can read a little bio about a person, see their social links, and see an image of that person.

This template uses:

  • CSS
  • HTML
  • Any Icon Font (I’m using my theme’s native icon font library in this example)

Structure:

  • Parent Container (id: #featuredProfileBox)
  • Four Child Containers inside Parent:
    • Contains inside:
      • Name Container (class: .featuredProfileName)
      • Picture Container (class: .featuredProfileImage)
        • Also holds the Social Container (class: .featuredProfileSocialContainer)
          • List of social profiles, each item uses -> (class: .featuredSocialButton)
      • Bio Container (class: .featuredProfileBio)
  • Float clear to keep it responsive

The HTML

The CSS

Example of it working:

Kyle

Hi there! This is my example bio text for this example. You should hover over them social icons. Pretty simple hover effect, but still cool. I hoped that you enjoyed this template. Feel free to leave comments below if you are stuck on customizing this template. Thanks! 🙂

[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