Challenge: Modern, Responsive, Card-Based Layout

[PatrickFrankAIU]

• [ ] Create a new folder in Module 5 with your name on it (if you haven't already done so)
• [ ] In that folder, create a new folder called "Card-Based Challenge"
• [ ] Create the website according to the requirements
• [ ] Commit and sync your files
• [ ] Instructor sign-off

Objective: Design a responsive, multi-column card layout for a fictional library's featured books page without using Media Queries or JavaScript. Each card should display a book cover, title, author, a brief description, and a "Read more" button. The layout must be fully responsive and work on different screen sizes, gracefully adjusting from a multi-column layout on larger screens to a single-column layout on smaller screens, purely using CSS techniques.

Note: Starting HTML and CSS files have been provided in the first comment below. You can use them, ignore them, or adapt them, as you wish.

Requirements:

1. HTML Structure: Create a semantic HTML5 structure for the card layout. Use appropriate tags for the card container (<section> or <article> for cards), headings (<h1>, <h2>, etc. for titles), paragraphs for descriptions, and <button> or <a> tags for the "Read more" buttons.
2. CSS Flexbox and Grid: Utilize CSS Flexbox for the overall layout structure and CSS Grid for individual card layouts. Demonstrate mastery of these layouts by creating a responsive design that adjusts from multiple columns to a single column without Media Queries.
3. Advanced Selectors: Employ advanced CSS selectors (e.g., attribute selectors, pseudo-classes like :nth-child, :hover, :focus, etc., and pseudo-elements like ::before and ::after) to style elements uniquely and add dynamic visual effects on hover or focus without relying on animations.
4. Custom Properties: Use CSS custom properties (variables) to maintain a consistent style theme (e.g., colors, fonts) across the cards, making the design more maintainable and easier to update.
5. Responsive Typography: Implement fluid typography using clamp(), vw, em, or percentage-based sizing to ensure that text sizes adjust smoothly across different screen sizes.
6. CSS Tricks for Responsiveness: Explore creative CSS techniques to make the layout responsive without Media Queries. This can include using percentage-based widths, max/min-width, the calc() function, Flexbox's wrapping abilities, and Grid's auto-fill/auto-fit features.
7. Challenge Extension - Creative Shapes and Overlays: Use CSS shapes (e.g., clip-path for the book covers) and overlays (with ::before and ::after) to add interesting visual elements to the cards. This should be subtle and not detract from the readability or usability of the cards.

Evaluation Criteria:

• Responsiveness: The layout works seamlessly across different screen sizes without using Media Queries.
• Creativity and Aesthetics: The design is visually appealing, with attention to color schemes, typography, and spacing.
• Code Quality: Clean, well-organized CSS with efficient use of selectors, properties, and custom variables.
• Accessibility: Semantic HTML is used, and the design considers accessibility, including readable fonts, navigable focus states, and appropriate aria-labels where necessary.

[PatrickFrankAIU]

starting files.zip Starting files