In this chapter, we’ll create a profile card. In web design, a card is a visual element that contains information on a single topic. We’re going to apply this concept to someone’s profile information, essentially creating a digital business card. This type of layout is often used on social media and blog sites to give readers an overview of who wrote the content. It sometimes has links to a detailed profile page or opportunities to interact with the person to whom the profile belongs.
To create the layout, we’ll do a lot of work revolving around positioning, specifically, using the CSS Flexbox Layout Module to align and center elements. We’ll also look at how to make a rectangular image fit into a circle without distorting the image. By the end of the chapter, our profile card will look like figure 6.1.
Let’s dive right in and take a look at our starting HTML (listing 6.1), which you can find in the GitHub repository at http://mng.bz/5197 or on CodePen at https://codepen .io/michaelgearon/pen/NWyByWN. We have a <div> with a class of card that contains all the elements being presented in the profile card. To set our blog post information, we’ll use a description list. Our technologies (CSS, HTML, and so on) are presented in a list.