Untitled
unknown
plain_text
a year ago
2.1 kB
4
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; box-sizing: border-box; } .menu-container { display: flex; justify-content: space-between; background-color: #f0f0f0; padding: 10px; } .menu-item { padding: 5px; border: 1px solid #ccc; border-radius: 5px; } .separator { border-top: 2px solid #ccc; margin: 20px 0; } .big-container { text-align: center; padding: 50px 0; background-color: #e0e0e0; } .small-container { text-align: center; padding: 20px; border: 1px solid #ccc; margin: 10px; border-radius: 5px; } @media (max-width: 600px) { .menu-container { flex-direction: column; } .menu-item { margin-bottom: 10px; } .big-container, .small-container { width: 100%; } } </style> <title>Responsive Page</title> </head> <body> <!-- Menu Items --> <div class="menu-container"> <div class="menu-item">Menu 1</div> <div class="menu-item">Menu 2</div> <div class="menu-item">Menu 3</div> <div class="menu-item">Menu 4</div> </div> <!-- Separator --> <div class="separator"></div> <!-- Big Container --> <div class="big-container"> <p>A</p> </div> <!-- Small Containers --> <div class="small-container">Text 1</div> <div class="small-container">Text 2</div> <div class="small-container">Text 3</div> <div class="small-container">Text 4</div> </body> </html>
Editor is loading...
Leave a Comment