Full pages
About page
A complete about page: intro, the story, a stats band, principles and a contact close.
When to use it
The page most sites leave as a stub and then wonder why nobody trusts them. This layout gives you the four things an about page has to contain — who you are, why the thing exists, what you have actually done, and how to reach you — with enough room for each that filling it in honestly produces a real page rather than three sentences on a lot of white space.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 5 — one per section
- Container (grid) × 2 — the stats band and the principles grid
- Heading × 9
- Text Editor × 10
- Button × 1
Things worth knowing
- Replace every placeholder before publishing. An about page with sample text left in is worse than no about page, and it is exactly what a reviewer notices first.
- The stats band works only with real numbers. If you do not have any yet, delete that section rather than inventing figures.
- Keep the contact line as real text, not an image. An email address rendered as a picture is invisible to everyone who needs it most.
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About page</title>
<style>
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#14233a;background:#fff}
.wrap{max-width:900px;margin:0 auto;padding:0 24px}
.wide{max-width:1100px}
section{padding:64px 0}
h1{font-size:46px;line-height:1.1;letter-spacing:-.035em;margin:0 0 18px}
h2{font-size:30px;letter-spacing:-.03em;margin:0 0 14px}
h3{font-size:17px;margin:0 0 8px}
p{color:#5b6b82;line-height:1.85;font-size:16px}
.lead{font-size:19px;color:#33475f}
.band{background:#14233a;color:#fff}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;text-align:center}
.stats h2{color:#ff7a56;font-size:40px;margin:0 0 6px}
.stats p{color:#a9b8cb;margin:0;font-size:13.5px;text-transform:uppercase;letter-spacing:.05em}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{padding:26px;border:1px solid #e3e9f1;border-radius:13px;background:#fafbfd}
.tint{background:#f6f8fb}
.button{display:inline-block;margin-top:10px;padding:14px 26px;background:#14233a;color:#fff;border-radius:9px;text-decoration:none;font-weight:700}
@media(max-width:760px){.stats,.grid{grid-template-columns:1fr}h1{font-size:33px}h2{font-size:25px}}
</style>
</head>
<body>
<section>
<div class="wrap">
<h1>About — replace with who you are</h1>
<p class="lead">One paragraph naming the person or team behind this, how long you have been doing it, and the kind of work you do. Use a real name.</p>
</div>
</section>
<section class="tint">
<div class="wrap">
<h2>Why this exists</h2>
<p>Describe the specific problem you kept running into. The more concrete this is, the more it reads as experience rather than marketing — a reader can tell the difference between someone who has done the work and someone describing it.</p>
<p>Then say what you did about it. One paragraph is enough; the detail belongs on the pages about the work itself.</p>
</div>
</section>
<section class="band">
<div class="wrap wide">
<div class="stats">
<div><h2>000</h2><p>Replace with a real number</p></div>
<div><h2>0 yrs</h2><p>Replace with a real number</p></div>
<div><h2>000</h2><p>Replace with a real number</p></div>
</div>
</div>
</section>
<section>
<div class="wrap wide">
<h2>How we work</h2>
<div class="grid">
<article class="card"><h3>Principle one</h3><p>State something you actually refuse to do. A principle with no cost attached is not a principle.</p></article>
<article class="card"><h3>Principle two</h3><p>Describe a habit a client would notice within a week of working with you.</p></article>
<article class="card"><h3>Principle three</h3><p>Name a trade-off you make deliberately, and why.</p></article>
<article class="card"><h3>Principle four</h3><p>Say what you will not promise. It builds more trust than another claim.</p></article>
</div>
</div>
</section>
<section class="tint">
<div class="wrap">
<h2>Get in touch</h2>
<p>Give a real email address as text, say roughly how fast you reply, and mention what to include in a first message so the reply is useful.</p>
<a class="button" href="mailto:[email protected]">[email protected]</a>
</div>
</section>
</body>
</html>