Backgrounds, borders, and shadows

background-color fills a box; background: linear-gradient(...) or an image can too. border-radius: 12px rounds the corners, 50% makes a square into a circle. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) adds a soft shadow: horizontal offset, vertical offset, blur, color with transparency. overflow: hidden clips children to the rounded shape.

Restraint reads as quality: one border or one shadow, consistent radii across the site, and colors from a small palette.

.card {
  background: rgb(255, 255, 255);
  border: 1px solid rgb(220, 223, 228);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Your task

Style .card with a white background (rgb(255, 255, 255)), a 1px solid border colored rgb(220, 223, 228), a 12px border radius, and a box shadow (any). Make .avatar a circle with border-radius: 50%.

Part of the final project. .card is the about card with the round avatar. It is saved in this browser and loaded into Project: a one-page site when you get there.

<!doctype html>
<html>
<head>
<style>
body { background: rgb(240, 241, 243); padding: 24px; }
.avatar { width: 64px; height: 64px; background: rgb(47, 111, 237); border-radius: 50%; }
.card {
  padding: 20px;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(220, 223, 228);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="card">
  <div class="avatar"></div>
  <h2>Ada</h2>
</div>
</body>
</html>