<DOCTYPE
html>
<html
lang="nl">
<head>
<meta charset="UTF-8" />
<meta
name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>Mijn Blog</title>
<meta
name="description" content="Een
eenvoudige blogwebsite met een duidelijk blogformat." />
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
}
header {
background:
#222;
color: #fff;
padding:
1.5rem;
text-align: center;
}
nav a {
color: #fff;
margin: 0 10px;
text-decoration: none;
font-weight: bold;
}
main {
max-width: 800px;
margin: 2rem auto;
background:
#fff;
padding: 2rem;
border-radius:
6px;
}
h1, h2 {
color: #222;
}
img {
max-width: 100%;
border-radius:
6px;
margin: 1.5rem 0;
}
.cta {
background: #eef4ff;
padding:
1.5rem;
margin-top: 2rem;
border-left: 4px solid #3366ff;
}
footer {
text-align: center;
padding:
1.5rem;
font-size: 0.9rem;
color: #666;
}
</style>
</head>
<body>
<header>
<h1>Mijn
Blog</h1>
<nav>
<a href="#">Home</a>
<a href="#">Blog</a>
<a href="#">Over</a>
<a href="#">Contact</a>
</nav>
</header>
<main>
<article>
<h1>Hoe
kies je het juiste programma om te bloggen?</h1>
<p><em>Geschreven door Jan Jansen – 9 januari 2026</em></p>
<p>
Wil je
beginnen met bloggen, maar weet je niet welk programma het beste bij je past?
In deze blog
lees je waar je op moet letten en welke keuzes je hebt.
</p>
<h2>Waarom
is een goed blogplatform belangrijk?</h2>
Schermmaat: CSS
|
/*
Mobiel (default) */ body
{ font-size: 16px; } /*
Tablet */ @media
(min-width: 768px) { .container { padding: 0 24px; } } /*
Desktop */ @media
(min-width: 1024px) { .container { max-width:
1200px; } } /*
Groot scherm */ @media
(min-width: 1440px) { .container { max-width:
1280px; } } |