https://github.com/ayokanmi-adejola/preview-card-component

A responsive 3-column preview card component built with HTML5 and CSS Flexbox. Showcasing three different car categories (Sedans, SUVs, and Luxury) with distinct color schemes and interactive elements. Features include responsive design for mobile and desktop and hover states for buttons.
https://github.com/ayokanmi-adejola/preview-card-component

css3 flexbox html5 mobile-first-workflow

Last synced: 8 months ago
JSON representation

A responsive 3-column preview card component built with HTML5 and CSS Flexbox. Showcasing three different car categories (Sedans, SUVs, and Luxury) with distinct color schemes and interactive elements. Features include responsive design for mobile and desktop and hover states for buttons.

• Host: GitHub
• URL: https://github.com/ayokanmi-adejola/preview-card-component
• Owner: Ayokanmi-Adejola
• Created: 2025-06-13T16:26:14.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2025-06-13T16:28:47.000Z (12 months ago)
• Last Synced: 2025-09-30T00:00:38.633Z (9 months ago)
• Topics: css3, flexbox, html5, mobile-first-workflow
• Language: CSS
• Homepage: https://preview-card-component-steel-delta.vercel.app
• Size: 129 KB
• Stars: 7
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Frontend Mentor - 3-column preview card component solution

This is a solution to the [3-column preview card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/3column-preview-card-component-pH92eAR2-). Frontend Mentor challenges help you improve your coding skills by building realistic projects. 

## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Continued development](#continued-development)

- [Author](#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

![](./design/desktop-preview.jpg)

## My process

### Built with

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- Mobile-first workflow

### What I learned

I learned how to better utilize CSS Flexbox to create a responsive layout. I also practiced using CSS custom properties to make the code more maintainable.

```css

.proud-of-this-css {

  color: papayawhip;

}

```

### Continued development

I want to continue to focus on creating more complex layouts with CSS Grid and Flexbox. I also want to practice more with JavaScript to add more interactivity to my projects.

## Author

- Frontend Mentor - [@Ayokanmi-Adejola](https://www.frontendmentor.io/profile/Ayokanmi-Adejola)