chevron_left View All Deliverables subject View Related Content

Assignment 8

Container Query Card

Create a basic card that is made responsive with container queries.

Submission

Push your completed deliverable to your GitHub deliverable repository.

Due: Wed Nov 8, 2023

Starter Code

open_in_new

GitHub Repo

Instructions

In your deliverables repository, create a 08-container-query-cards folder within the assignments folder.

Using the supplied starter code (opens new window), recreate the card design as shown in the video below and in the screenshots folder within the starter code.

• You must use @container queries with min-width sizing.
• Apply responsive font-size to the title, text, and .btn using cqi and clamp()
• You are not permitted to add any @media queries
• You are not permitted to change or remove the CSS code between the comments REQUIRED STYLES FROM PROF DO NOT DELETE - START and REQUIRED STYLES FROM PROF DO NOT DELETE - END
• You are not permitted to change the html in any way. This includes adding or removing classes.

Styling

Make sure to include the CSS Reset and audit previous deliverables for reusable styles!

• This may seem complicated, but it should only require one container-style and one @container to accomplish.
  • I added complexity with all of the different layouts to show that with a very simple @container we can make something flexible to a lot of different layouts.
• To create the overlapping card design, with the text on top of the image, you will need to use the position property.
  • Hint: you will need to use it twice. One element gets relative and another gets absolute.
• You should be setting an aspect-ratio for the different card sizing. See the Pro Tip - Image Aspect Ratio at the bottom of the Assignment 07 - Card Group

Submission

Submit this assignment by pushing your code to your mad9013-deliverables repository with the commit message Complete 08-container-query-card assignment.

Heads Up!

This assignment is due on the Wednesday after the standard Sunday timeline. This is so that you can focus on the submission for Project 1 - Two Page Site.