HOW TO: HTML/CSS Profile Card(s)
Typically when you look into a company’s website you will see anchor tags (links) which could lead to a variety of different pages, such as their “about” page, their page on the company’s “philosophy/values” and perhaps a company’s upcoming “updates/features” and what is to come next.
For this blog I will be only focusing on a small aspect typically found in the about page… Profile Cards… that is if they provide it.
To start off, one should first sketch out the kind of structure that they would want to implement into their cards. *in this case our structure will be simply that of what flatiron has on their website and the profile cards under leadership*
With that we can see that each person’s card contains *at the bare minimum*: a profile picture, their first and last name, links to their respective social media accounts, and lastly a very short bio of who and what they do…
Taking this into account let’s try to create our very own basic profile cards.
By putting together the required traits of our card structure and a little styling… we should end up with something like this.
How do we get here??
Starting we have to first create a basic html version of what a typical card would look like/consist of. We can implement this by imagining a whole card within a <div> tag and applying the necessary attributes that consist of our profile card. *the image, name, expertise etc… *
Once we finally get all of the necessary content for our profile we can implement the CSS!
We started off with our underlying structure on the left (HTML), and from there we moved to the styling of our structure on the right (CSS).
To continue in imitating flatiron’s leadership profile cards… we need to find a way to make profiles appear side to side.
As of now we have a problem where adding an additional profile card in the HTML would just end up adding right below the most recent card.
For example Wesley Chen appearing below Alan Banks
To fix this we could create another <div> tag which could encapsulate both profile card tags and make it so that one profile card can have a
float: left and another card float: right.
In addition to make these cards appear in an orderly fashion (instead of being hard-pressed to the ends of the screen from float) we have to implement some kind of padding, maximum-width, or margin attributes to these cards to make this work.
“After much trial/error we finally get our desired result”
However this is just one way of many to approaches to styling profile cards on a website. The best way to learn and grow in this is to keep exploring the different possibilities with CSS.
Resources:
