Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/stevedylandev/3-column-preview-card-component

A Frontend Mentor Project
https://github.com/stevedylandev/3-column-preview-card-component

Last synced: 11 days ago
JSON representation

A Frontend Mentor Project

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)

  - [Useful resources](#useful-resources)

- [Author](#author)

- [Acknowledgments](#acknowledgments)



**Note: Delete this note and update the table of contents based on what sections you keep.**



## 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



![](./images/screenshot.png)



Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a

Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to

crop it.



Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to

purchase it.



Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above.



**Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire

section.**



### Links



- Solution URL: [Add solution URL here](https://your-solution-url.com)

- Live Site URL: [Add live site URL here](https://your-live-site-url.com)



## My process



### Built with



- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- CSS Grid

- SCSS Preprocessor



**Note: These are just examples. Delete this note and replace the list above with your own choices**



### What I learned



This was a pretty basic task so I already knew the main piece of information, but I did find some interesting pieces.



Creating a border radius for the entire card container gave me the idea of using the following:



.card-container { display: flex; width: 65%; height: 65%; border-radius: 0.5rem; overflow: hidden; }



This way I did not have to have specific and changing border radius' for each card.



### Continued development



I did not take a mobile first approach, which I really want to start doing. I will most likely do that in the future.



**Note: Delete this note and the content within this section and replace with your own plans for continued development.**



### Useful resources



## Author



- Website - [Add your name here](https://www.your-site.com)

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

- Twitter - [@yourusername](https://www.twitter.com/yourusername)



**Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.**



## Acknowledgments



This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone

else's solution. This is the perfect place to give them some credit.



**Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section

entirely.**