bccpadge/css-cards

Responsive cards using HTML and CSS

CSS Cards

Table of contents

• Project Description
• Screenshot
• Links
• My process
  • Built with
  • What I learned
• Author
• Acknowledgments

Project Description

Responsive CSS cards using HTML and CSS

Screenshot

Links

• Live Site URL: Github Pages

What I learned

I learned flex wrap makes the cards responsive without using media queries.

.cards-container {
  font-size: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin: 1.25rem;
}

My Process

Built with

• Semantic HTML5 Markup
• Custom properties (variables)
• Flexbox
• CSS Grid
• Mobile-first workflow

Useful Resources

Scale on hover with transition

Author

• Frontend Mentor - @bccpadge
• Github - @bccpadge

Acknowledgments

I took inspiration from this Responsive card UI with flexbox and hover effects Youtube video.