Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/heblopez/nft-preview-card
Repo for MakeItReal "NFT Preview Card" challenge.
https://github.com/heblopez/nft-preview-card
Last synced: 3 days ago
JSON representation
Repo for MakeItReal "NFT Preview Card" challenge.
- Host: GitHub
- URL: https://github.com/heblopez/nft-preview-card
- Owner: heblopez
- Created: 2024-09-07T19:17:06.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-09-08T00:58:15.000Z (5 months ago)
- Last Synced: 2024-12-11T19:14:52.477Z (about 2 months ago)
- Language: CSS
- Homepage: https://heblopez.github.io/nft-preview-card/
- Size: 326 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Make It Real - NFT Preview Card
This is a solution to the **NFT Preview Card** project of the Make It Real course.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [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)
## Overview
### The challenge
Users should be able to:
- View the optimal design according to your device screen size.
- View hover for interactive elements.
### Screenshot
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
### What I learned
This project especially helped me to reinforce advanced or unusual CSS properties.
```html
```
```css
.nft-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--cyan);
mix-blend-mode: hard-light;
opacity: 0;
transition: opacity 0.5s ease;
}
```
### Continued development
Working on this project made me realize that there are still advanced CSS topics to learn, such as the `mix-blend-mode` property that sets how the content of an element should blend with its background color.
### Useful resources
- [mix-blend-mode - CSS](https://developer.mozilla.org/es/docs/Web/CSS/mix-blend-mode) - This CSS property helped me to make the hover effect of the card.
## Author
- Website - [Heberth López](https://www.heblopez.web.app)
## Acknowledgments
A special thanks to the MakeItReal team for the knowledge and support provided in each class and the feedback received on each project.