FrontendAtlas
Study
▾
Dashboard
Pricing
Get full access
<html> HTML
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <title>Semantic Page Layout</title> </head> <body> <!-- TODO: Replace these generic wrappers with semantic elements --> <div class='top'> <p>Welcome to your semantic HTML layout exercise.</p> </div> <div class='content'> <p style='color:#666'>Add two posts here. Each should be a self-contained block with a heading and a content section.</p> </div> <div class='bottom'> <p>Footer placeholder.</p> </div> </body> </html>
# CSS
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 2rem; line-height: 1.6; } header, footer { background: #f5f5f5; padding: 1rem; border-radius: 6px; } main { margin-top: 1.5rem; } article { margin-bottom: 1.5rem; padding: 1rem; border: 1px solid #ddd; border-radius: 4px; } article h2 { margin-top: 0; }
Preview
Live preview updates as you type
Building preview…
Show preview