https://github.com/yashi-singh-9/3-column-preview-card-component

This project solves the Frontend Mentor's 3-column preview card challenge, featuring a responsive layout with cards that include images, titles, descriptions, and call-to-action buttons. Built with HTML and CSS, it uses Flexbox and CSS Grid to ensure a dynamic user experience on various screen sizes.
https://github.com/yashi-singh-9/3-column-preview-card-component

css frontend frontend-mentor frontendmentor frontendmentor-challenge html html-css-challenge

Last synced: 12 days ago
JSON representation

This project solves the Frontend Mentor's 3-column preview card challenge, featuring a responsive layout with cards that include images, titles, descriptions, and call-to-action buttons. Built with HTML and CSS, it uses Flexbox and CSS Grid to ensure a dynamic user experience on various screen sizes.

• Host: GitHub
• URL: https://github.com/yashi-singh-9/3-column-preview-card-component
• Owner: Yashi-Singh-9
• License: mit
• Created: 2024-09-17T07:01:14.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-26T05:31:19.000Z (about 2 months ago)
• Last Synced: 2024-10-17T17:52:20.442Z (29 days ago)
• Topics: css, frontend, frontend-mentor, frontendmentor, frontendmentor-challenge, html, html-css-challenge
• Language: CSS
• Homepage: https://3-column-preview-card-component-yashi.netlify.app/
• Size: 174 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 3 Column Preview Card Component Frontend Mentor 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.

[![Netlify Status](https://api.netlify.com/api/v1/badges/7989b3e3-dbd8-452b-8caf-8eebb232d9cd/deploy-status)](https://app.netlify.com/sites/3-column-preview-card-component-yashi/deploys) 

![Last Commit](https://img.shields.io/github/last-commit/Yashi-Singh-9/3-Column-Preview-Card-Component)

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

- [Style Guide](#style-guide)

- [Author](#author)

- [Acknowledgments](#acknowledgments)

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

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

#### Mobile Design

![Screenshot](design/mobile-design.jpg)

### Links

- [Solution URL](https://www.frontendmentor.io/solutions/3-column-preview-card-component-tAafMKmHu9)

- [Live Site URL](https://3-column-preview-card-component-yashi.netlify.app)

## My process

### Built with

- Semantic HTML5 markup

- CSS custom properties

- CSS Grid

- Mobile-first workflow

### What I learned

During this project, I reinforced my understanding of CSS Grid to create a responsive layout.

### Continued development

In future projects, I would like to explore more advanced responsive design techniques and animations. Additionally, I want to experiment more with CSS Grid to understand its full potential.

### Useful resources

- [CSS Grid Guide by MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) - This guide helped me understand how to create responsive layouts with CSS Grid.

- [CSS Tricks: A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) - This resource was invaluable in refining my understanding of CSS Grid.

## Style Guide

For the Styles refer to [Style Guide](style-guide.md). 

## Author

- LinkedIn - [Yashi Singh](https://www.linkedin.com/in/yashi-singh-b4143a246)

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

## Acknowledgments

I would like to thank Frontend Mentor for providing such practical challenges. These projects are great for honing my frontend skills and learning new techniques.