Bug #1
Updated by Redmine Admin 10 days ago
h1. HTML Task: Create a Product Feature Card Component h2. Background (Fictional Analysis) Our fictional company, *NovaTech*, is launching a new landing page for its upcoming software product, *NovaSuite*. Market analysis shows that visitors spend more time on pages with clean, informative, and visually appealing "feature cards" that highlight key benefits. Competitors like *Abacus Themes* and *RedmineX* use cards with an image, title, short description, and a "Learn more" link, achieving 15–20% better clickthrough rates. To compete effectively, we need a _responsive, accessible, and lightweight HTML feature card component_ that we can reuse across the site. h2. Task Requirements * Create an HTML structure for a Feature Card that includes: ** Image at the top (use a blank src for now: @src=""@) ** Title (example: _Seamless Team Collaboration_) ** Short Description (2–3 sentences) ** "Learn More" link (can be a simple @href="#"@ for now) * Ensure basic responsiveness (the card should look good on both desktop and mobile) * Focus on semantic HTML and accessibility (use appropriate tags like @@<article>@@, @@<figure>@@, @@<h2>@@, @@<p>@@, @<article>@, @<figure>@, @<h2>@, @<p>@, etc.) * Avoid any external CSS or frameworks – just clean HTML (we will add styling later) * Add comments to the code explaining the structure h2. Deliverable * One HTML file named @feature-card.html@ * Proper indentation and readability * Bonus: If you can, make the structure easily expandable to multiple cards inside a container (optional) h2. HTML Code Example <pre> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Feature Card</title> </head> <body> <article class="feature-card"> <figure> <img src="" alt="Illustration of seamless team collaboration" width="300" height="200"> </figure> <header> <h2>Seamless Team Collaboration</h2> </header> <p>Boost your team's productivity with real-time updates, intuitive task management, and crystal-clear communication tools designed for fast-moving projects.</p> <a href="#">Learn More</a> </article> <!-- Structure: - <article> wraps the entire card for semantic grouping. - <figure> contains the image representing the feature. - <header> with <h2> for the feature title. - <p> for the short description. - <a> for a call-to-action link. --> </body> </html> </pre>