https://github.com/devendra-alt/preview-card-component-solution

https://github.com/devendra-alt/preview-card-component-solution

Last synced: 12 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/devendra-alt/preview-card-component-solution
• Owner: devendra-alt
• Created: 2022-10-16T18:46:05.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-10-20T17:02:09.000Z (over 3 years ago)
• Last Synced: 2025-06-21T22:02:41.914Z (about 1 year ago)
• Language: CSS
• Size: 545 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Frontend Mentor - Product preview card component solution

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

- [Author](#author)

## Overview

### The challenge

Users should be able to:

- View the optimal layout depending on their device's screen size

- See hover and focus states for interactive elements

### Screenshot

![(desktop)Design preview for the Product preview card component coding challenge](./design/desktop.png)

### Links

- Solution URL: [Github Repo](https://github.com/devendra-alt/preview-card-component-solution)

- Live Site URL: [product-preview-card-com](https://product-preview-card-com-fd232.web.app/)

## My process

### Built with

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- CSS Grid

### What I learned

i have learned so much about website developement in this challenge as responsive design, accesability, media query, layouts etc.

## Author

- Website - [devendra-alt](https://devendra-alt.github.io/)

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