3-column preview card component

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

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

Links

• GitHub URL: GitHub Repository
• Live Site URL: GitHub Pages

My process

Built with

• Semantic HTML5 markup
• CSS3 custom properties
• Bootstrap 4
• Flexbox

What I learned

This project, despite being simple and small, taught me good and small points. Tips that will help me a lot in the future. It was a good experience overall.

<section class="col-xs-10 col-sm-6 col-lg-4 mx-auto content first-col"></section>

@media screen and (max-width: 768px) {
    h3 {
        padding: 1rem 0;
    }
    .res-btn {
        margin-top: 1rem;
    }
    .content {
        max-width: 327px;
    }
}

Author

• Website - My Website
• Linkedin - My Linkedin