Build a clean profile card with semantic HTML and a few lines of CSS.
A card groups related information. Here an <article> holds the picture, name, role and a button.
Press Run preview to see it, then try changing the colours.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile card</title>
<style>
body { font-family: system-ui, sans-serif; background: #f2faf5; display: grid; place-items: center; min-height: 100vh; margin: 0; }
.card { background: #fff; width: 280px; border-radius: 20px; padding: 28px; text-align: center; box-shadow: 0 12px 30px rgba(11, 61, 36, .12); }
.card img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 4px solid #e3f4ea; }
.card h2 { margin: 14px 0 4px; color: #10231a; }
.card p { margin: 0 0 18px; color: #5f7167; }
.card button { background: #0a7a3f; color: #fff; border: 0; border-radius: 999px; padding: 10px 22px; font-weight: 700; cursor: pointer; }
.card button:hover { background: #0d5c33; }
</style>
</head>
<body>
<article class="card">
<img src="https://picsum.photos/id/64/200" alt="Profile photo">
<h2>Ada Okafor</h2>
<p>Front-end developer</p>
<button type="button" onclick="this.textContent = 'Following ✓'">Follow</button>
</article>
</body>
</html>The three lines of CSS that centre an element both ways.
Build a Professional Student Registration Portal from scratch using only HTML, CSS & JavaScript. A hands-on project des…
A complete sign-in page: the form, its styling, friendly checks in the browser, secure PHP and the users table.