[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! 🙂

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 *