6 Creating a profile card

This chapter covers

  • Using CSS custom properties
  • Creating a background using radial-gradient
  • Setting image size
  • Positioning elements using a flexbox

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, ...

Get Tiny CSS Projects now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.