https://github.com/triple-ade/nft-preview-card-component
NFT preview card component challenge on Frontend Mentor
https://github.com/triple-ade/nft-preview-card-component
Last synced: over 1 year ago
JSON representation
NFT preview card component challenge on Frontend Mentor
- Host: GitHub
- URL: https://github.com/triple-ade/nft-preview-card-component
- Owner: TRIPLE-ADE
- Created: 2022-07-19T04:16:12.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-07-23T06:55:47.000Z (almost 4 years ago)
- Last Synced: 2025-01-11T21:33:19.408Z (over 1 year ago)
- Language: CSS
- Size: 124 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - NFT preview card component solution
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.
## 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
A frontend-mentor challenge on NFT preview card component solution, Which involve building an interface for an NFT card, making it responsive and interactive
### 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
### Links
- Solution URL: [Add solution URL here](https://github.com/TRIPLE-ADE/NFT-preview-card-component)
- Live Site URL: [Add live site URL here](https://triple-ade.github.io/NFT-preview-card-component/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flex-box
- CSS Grid
- Mobile-first workflow
### What I learned
To see how you can add code snippets, see below:
```css
#overlay {
position:absolute;
width: 100%;
height: 96%;
z-index: 10;
border-radius: 8px;
}
#overlay:hover #eye-icon{
visibility: visible;
}
#overlay:hover{
background-color: rgba(0, 255, 247, 0.5);
cursor: pointer;
}
```
### Continued development
- Css position
- Correct unit to use for font, width, margin , padding.
- Mobile responsiveness
## Author
- Website - [Triple](https://triple-ade.github.io/NFT-preview-card-component/)
- Frontend Mentor - [@TRIPLE-ADE](https://www.frontendmentor.io/profile/TRIPLE-ADE)
- Twitter - [@Triple123A](https://www.twitter.com/Triple123A)