Category : Web Development

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

Thanks Thomas Harvey!

Hi everyone, I wanted to make this blog post about my long time friend Thomas Harvey. He’s a fantastic web developer who loves to focus on optimization from loading speed to SEO. I have known Thomas for quite some time now and as a fellow web developer I would ask him questions from time to time about whatever task I was focusing on.

Now while I can do a lot, I want this site’s focus to be about teams as making games requires a good team. Granted a solo developer can handle a lot of tasks, but life is just easier with some help along the way. So when Thomas asked me if he could help boost the performance of a few of my sites, I said: “Go for it.”

The time it takes to optimize a site can vary from site to site. For this site, since it’s fairly new in terms of the content and design, there wasn’t a whole lot that was bogging my server down. Even so, Thomas was able to help make the site even faster in about ~20 minutes.

Before we started, I went to pingdom’s page loading tool to get an idea of what my site’s speed was at before Thomas did anything. I got an alright score of 67/100 with a load time of 4.72 seconds. That doesn’t sound too horrible, however over time it could get worse and the overall user experience will go down. I let Thomas do his thing and in about 20 minutes he was finished.

When I went to re-scan on pingdom, I got a score of 81/100 with a load time of 2.92 seconds. Now you might be wondering what sort of things might help speed your site up? In my case part of my loading experience was un-optimized images. Below you can see his test results which reflect another view of the site performance:

Another part to the speed boost was using a content delivery system such as Cloudflare. Cloudflare is also a DNS provider which also can help with mitigating against DDoS attacks. I highly recommend people look into systems such as Cloudflare later during their development of any game that has some sort of server communication going on. While using a product that offers some sort of DDoS protection, it should be noted that depending on what’s running on the server and how connections are being made could result in other vulnerabilities to attacks. There is no “one and only” security product out there, but rather a methodology and layers that make a good security system.

I highly recommend you check out his services and see what he can do to help you!

Thomas Harvey

I’m a 20 year old with an interest in creating and improving websites. My job is to help the website improve, be it improving conversion, generating traffic, increasing sales or even just providing a better user experience, I enjoy the challenge that it gives me, trying to figure out the best solution to the problem at hand. I try to help others when I can, which is why I have started doing work for charity on creating/improving their websites or their social media. I’m not here to pretend that I am the best there is, instead I am honest with what I can and can’t do and I will never take on a task that I feel that I’m not the right person for.

[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