https://github.com/chanda-abdul/nft-preview-card-component-css

This is a solution to the NFT preview card component challenge on Frontend Mentor using html and scss
https://github.com/chanda-abdul/nft-preview-card-component-css

frontend-mentor html scss

Last synced: 4 months ago
JSON representation

This is a solution to the NFT preview card component challenge on Frontend Mentor using html and scss

• Host: GitHub
• URL: https://github.com/chanda-abdul/nft-preview-card-component-css
• Owner: Chanda-Abdul
• Created: 2024-06-17T23:55:29.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-06-17T23:58:12.000Z (over 1 year ago)
• Last Synced: 2025-01-13T16:49:15.374Z (9 months ago)
• Topics: frontend-mentor, html, scss
• Language: SCSS
• Homepage: https://shimmering-narwhal-c030b6.netlify.app
• Size: 389 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Frontend Mentor - [NFT preview card component](https://www.frontendmentor.io/challenges/nft-preview-card-component-SbdUL_w0U)

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

![Design preview for the NFT preview card component coding challenge](/assets/images/previews/desktop-preview.jpg)

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

  - [Useful resources](#useful-resources)

- [Author](#author)

## The challenge

Your challenge is to build out this preview card component and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Your users should be able to:

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

- [x] See hover states for interactive elements

### Screenshot

#### Mobile

![](./assets/images/previews/mobile-design.jpg)

#### Desktop

![](./assets/images/previews/desktop-design.jpg)

#### Active States

![](./assets/images/previews/active-states.jpg)

### Links

- Solution URL: [here](https://github.com/Chanda-Abdul/nft-preview-card-component-css)

- Live Site URL: [here](https://shimmering-narwhal-c030b6.netlify.app/)

## My process

### Built with



### What I learned

### Useful resources

## Author

- Website - [Chanda Abdul](https://www.Chandabdul.dev)

- GitHub - [github.com/Chanda-Abdul](https://github.com/Chanda-Abdul)

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