This complete one-page project combines document structure, semantic HTML, readable typography and responsive spacing. It needs no JavaScript.
Open the working example → · Download complete project (ZIP)
Build it step by step
- Read index.html and find the document title, language and main heading.
- Replace the sample identity and email with your own details.
- Open style.css. Change the accent colour, then increase the text size.
- Check the links with the keyboard and resize the browser.
How it works
The email link opens the reader’s configured mail application. It does not send a message automatically. A normal anchor is the correct element for this navigation.
Read the HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Mario V.W.B.R. Obst">
<meta name="robots" content="noindex, follow">
<title>A digital visiting card</title>
<link rel="stylesheet" href="style.css">
</head>
<body><main><article class="card"><p><small>PHOTOGRAPHY · OBSERVATION · CURIOSITY</small></p><h1>Alex Morgan</h1><p>I make photographs of ordinary places and the moments between them.</p><h2>Let’s talk</h2><p><a href="mailto:alex@example.com">alex@example.com</a></p><p>This is a fictional sample identity. Replace these details before using the page.</p></article></main></body>
</html>A small mistake to watch for
If the mail link behaves like a relative page URL, check that its href begins with mailto:.
Check your work
Try a narrow window, enlarged text and keyboard navigation. Read the complete HTML, CSS and any JavaScript in the download. These examples use fictional sample content and no external libraries.