TAAFT
Free mode
100% free
Freemium
Free Trial
Deals
Create tool

Prasit Xettri

@prasitxettri Tasks: 3
๐Ÿ› ๏ธ 1 tool ๐Ÿ™ 17 karma
Apprentice
Joined: December 2024

Prasit Xettri's tools

  • Html/css Code Generator
    Turn web design ideas into code with AI.
    Open
    116
    7
    18
    Released 10mo ago
    100% 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>&copy; 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.
0 AIs selected
Clear selection
#
Name
Task