Prasit Xettri
@prasitxettri Tasks: 3
๐ ๏ธ 1 tool
๐ 17 karma
Apprentice
Joined: December 2024
Follow
Prasit Xettri's tools
-
116718Released 10mo ago100% Free```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple Responsive Layout</title> <style> /* Global Styles */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; line-height: 1.6; } /* Header Styles */ header { background-color: #333; color: #fff; padding: 1rem; } header h1 { margin: 0; } nav ul { list-style-type: none; padding: 0; } nav ul li { display: inline; margin-right: 1rem; } nav ul li a { color: #fff; text-decoration: none; } /* Main Content Styles */ main { background-color: #f4f4f4; padding: 2rem; } .content { display: flex; flex-wrap: wrap; gap: 2rem; } .text-column, .image-column { flex: 1; min-width: 300px; } /* Footer Styles */ footer { background-color: #333; color: #fff; text-align: center; padding: 1rem; } /* Responsive Design */ @media (max-width: 768px) { .content { flex-direction: column; } } </style> </head> <body> <header> <h1>Website Title</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <main> <div class="content"> <div class="text-column"> <h2>Text Content</h2> <p>This is the main text content area. You can add paragraphs, lists, and other text-based elements here.</p> </div> <div class="image-column"> <h2>Image Content</h2> <img src="https://via.placeholder.com/300x200" alt="Placeholder Image"> </div> </div> </main> <footer> <p>© 2023 Your Website. All rights reserved.</p> </footer> </body> </html> ``` Explanation of the code: 1. The HTML structure includes a `<header>`, `<main>`, and `<footer>` for semantic markup. 2. The `<header>` contains the website title and navigation menu. 3. The `<main>` section has a two-column layout using flexbox for responsiveness. 4. The `<footer>` has centered text with a dark background. 5. CSS styles are included in the `<style>` tag for simplicity, but can be moved to an external file for larger projects. 6. Responsive design is implemented using a media query that changes the layout on smaller screens. 7. The layout uses a light background for the main content and dark backgrounds for the header and footer. 8. Padding is added to the main content area for better spacing. This code provides a basic structure that you can easily customize and expand upon for your specific needs.