Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!DOCTYPE html> <html> <head> <style> *, *::before, *::after { box-sizing: border-box; } body { font-family: Arial; margin: 0; display: flex; flex-direction: column; min-height: 100vh; } nav { display: flex; justify-content: space-between; align-items: center; padding: 0 24px; height: 56px; background: #6366f1; color: white; } main { flex: 1; padding: 24px; } .cards { display: flex; flex-wrap: wrap; gap: 16px; } .card { flex: 1 1 180px; background: white; border: 1px solid #e5e7eb; padding: 20px; border-radius: 8px; } footer { background: #1f2937; color: #9ca3af; text-align: center; padding: 16px; } </style> </head> <body> <nav><span>LearnCode</span><span>Home | Topics | About</span></nav> <main> <div class="cards"> <div class="card">Card 1</div> <div class="card">Card 2</div> <div class="card">Card 3</div> <div class="card">Card 4</div> </div> </main> <footer>© 2025 LearnCode</footer> </body> </html>
Result
Open