CĐH
Công Đắc Huỳnh

A I Image Generator - Copy this Html, Bootstrap Component to your project

Design a modern and responsive web page for an AI image generation tool. The layout should have two columns: Left Column: A card with a clean white background, shadow effect, and rounded corners. A title at the top that reads 'Tạo ảnh tự động bằng AI' in bold and centered text. A large text box for the user to input a description (placeholder text: 'Nhập mô tả về ảnh bạn muốn tạo...'). A dropdown menu for selecting image size options (e.g., 1024x1024). A prominent button labeled 'Tạo ảnh' styled with a gradient and rounded edges. Right Column: A card to display the most recently generated image, styled with a shadow effect and rounded corners. The image should fit neatly within the card, maintaining its aspect ratio. Below the image, include two buttons: A 'Tải ảnh' (Download Image) button styled as a primary button. A 'Xem ảnh đã tạo' (View Created Images) button styled as a secondary button. Responsive Design: On larger screens, display the columns side by side with equal spacing. On smaller screens, stack the columns vertically, ensuring proper spacing and alignment. Use soft gradients, clean typography, and a visually pleasing balance of white space. Ensure that the layout adjusts gracefully across different devices for optimal user experience.

Prompt
Component Preview

About

AI Image Generator - Create images easily with a clean UI, input box, size dropdown, and buttons. Built with HTML and Bootstrap. Start coding now!

Share

Last updated 1 month ago