/Column_Card

Responsive three-column card created using flexbox.

Primary LanguageCSS

Three Column Preview Card Component

Table of contents

Overview

The challenge

Users should be able to:

  • View the optimal layout depending on their device's screen size
  • See hover states for interactive elements

Screenshot

Desktop Version Mobile Version

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox

What I learned

From this challenge I learned more about flexbox and how it is usefeul to organize divs into columns or rows. I also learned that using flexbox also makes it easier to format the components in a mobile view.