Bug #1
open

Task analysis
0%
Description
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, 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
Seamless Team Collaboration¶
Boost your team's productivity with real-time updates, intuitive task management, and crystal-clear communication tools designed for fast-moving projects.
Learn More
Files