chevron_left View All Deliverables subject View Related Content

Assignment 7

Card Group

Create a responsive layout to display a group of cards.

Submission

Push your completed deliverable to your GitHub deliverable repository.

Due: Sun Oct 29, 2023

Screenshots

open_in_new

Card Group Screenshots

Instructions

In your deliverables repository, create a 07-card-group folder within the assignments folder.

Recreate the card group section as shown in the video below and in the screenshots found here (opens new window).

• You must use CSS Grid to create the responsive card group layout.
• For the individual cards, you may use either flex or grid
• Make sure to include the hover effects demonstrated in the video!

Styling

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

• Classes:
  • .card-group, .card
  • Use the BEM (opens new window) method for creating class names for the rest of the elements. For example: .card__title
• Colors
  • Brand Primary: #394A59
  • Brand Primary Light: #59758d
  • Brand Secondary: #36BF7F
  • Brand Secondary Pale: #def4e9
• Font: "Roboto", sans-serif
• Shadows: 0 .25rem .5rem #0002, 0 .25rem .75rem #0002
• Type scale: re-use scales from Assignment 04 - Type Hierarchy

Pro Tip - Image Aspect Ratio

When working with images, it is important to handle the image aspect ratio correctly. The aspect ratio of an image is the ratio of its width to its height, and is expressed with two numbers normally separated by a colon, such as 16:9^open_in_new, however is separated by a / in CSS 16 / 9. In a case like this card group, having all of the images have the same aspect ratio creates the most consistent, visual appealing layout.

However, in the real world the images you are given might be all different widths and heights and not match. So how to fix this? Ideally you should first use Photoshop or another program to properly crop, resize, and optimize the image. Unfortunately, that may not always be possible because you may build your site/app and hand it off to a client who will then upload the images. Therefore, we should add some CSS to automatically set the aspect ratio and crop our images for us:

.card__image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

• aspect-ratio in combination with display: block; and width: 100%; will make our image full width and set the height according to the aspect ratio.
• The object-fit property sets how the photo sits within the <img> element. Using object-fit: cover; will make sure that the entire size of the <img> element is covered by the photo without stretching or squishing the photo. This is very important as you must never stretch or squish an image.
• object-fit: cover; is basically a way to crop photos with our CSS. Its imperfect, as manual cropping allows for better photo composition, but it is a good method to insure images are cropped to the right aspect ratio. You can also use object-position to help align the photo composition.

Learn more about object-fit (opens new window) and aspect-ratio (opens new window)

Submission

Submit this assignment by pushing your code to your mad9013-deliverables repository with the commit message Complete 07-card-group assignment.