HTML TutorialLesson #31
HTML Layout
Websites often display content in multiple columns (like a magazine or
Websites often display content in multiple columns (like a magazine or a newspaper).
Example
Cities
- London
- Paris
- Tokyo
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
Interactive Code Examples
HTML Layout Example
htmlLive code example for HTML Layout. Click Try it Yourself to test.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: system-ui, -apple-system, sans-serif;
padding: 24px;
background: #f8fafc;
color: #0f172a;
}
.demo-card {
background: #ffffff;
padding: 24px;
border-radius: 16px;
border: 1px solid #e0e7ff;
box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.08);
max-width: 540px;
}
h2 { color: #4f46e5; margin-top: 0; font-size: 22px; }
p { color: #64748b; line-height: 1.6; }
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: #4f46e5;
color: #ffffff;
border: none;
padding: 10px 20px;
border-radius: 9999px;
font-weight: 700;
font-size: 13px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}
.btn:hover { background: #4338ca; }
</style>
</head>
<body>
<div class="demo-card">
<h2>HTML Layout</h2>
<p>This is a live runnable interactive demonstration for <strong>HTML Layout</strong>.</p>
<button class="btn" onclick="alert('Testing HTML Layout!')">
<span>Interactive Action</span> →
</button>
</div>
</body>
</html>