Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mayen007/nft-preview-card
A responsive NFT preview card component built with HTML and CSS. The project showcases an interactive design with hover effects and a mobile-first approach. It displays an NFT image, title, price, and creator info, following the challenge by Frontend Mentor.
https://github.com/mayen007/nft-preview-card
accessibility beginner-friendly card-component css-variables css3 flexbox frontend-mentor frontendmentor-challenge hover-effects html-css html5 mobile-first ui-design web-development
Last synced: 2 days ago
JSON representation
A responsive NFT preview card component built with HTML and CSS. The project showcases an interactive design with hover effects and a mobile-first approach. It displays an NFT image, title, price, and creator info, following the challenge by Frontend Mentor.
- Host: GitHub
- URL: https://github.com/mayen007/nft-preview-card
- Owner: Mayen007
- License: mit
- Created: 2024-11-17T16:51:06.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-11-17T18:50:58.000Z (about 1 month ago)
- Last Synced: 2024-11-17T19:38:16.982Z (about 1 month ago)
- Topics: accessibility, beginner-friendly, card-component, css-variables, css3, flexbox, frontend-mentor, frontendmentor-challenge, hover-effects, html-css, html5, mobile-first, ui-design, web-development
- Language: CSS
- Homepage: https://mayen007.github.io/NFT-Preview-Card/
- Size: 2.93 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
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). This project helps you practice responsive web design and CSS hover effects.
## 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)
- [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 like the image overlay and clickable text.
### Screenshot
### Links
- [Solution URL](https://github.com/Mayen007/NFT-Preview-Card) - View the code on GitHub
- [Live Site URL](https://mayen007.github.io/NFT-Preview-Card/) - Check out the live demo
## My Process
### Built With
- **HTML5** for the structure
- **CSS3** for styling, with a focus on:
- Flexbox for layout control
- CSS variables for maintainable color management
- Custom font integration using the "Outfit" font family
- Hover effects for interactive elements
- **Responsive Design** using a mobile-first workflow
### What I Learned
This project was a great way to practice working with:
1. **CSS Variables:** Using variables for colors made it easy to maintain consistency across the design.
```css
:root {
--cyan: hsl(178, 100%, 50%);
}
```
2. **Hover Effects:** Adding an overlay effect on the image during hover.
```CSS
.image-container:hover .overlay {
display: flex;
cursor: pointer;
}
```
3. **Flexbox Layouts:** Implementing Flexbox for elements like the value and time section.
```CSS
.value-time-div {
display: flex;
justify-content: space-between;
}
```
### Continued Development
Moving forward, I plan to:
- Experiment with **CSS Grid** for more complex layouts in future projects.
- Enhance the accessibility of components by adding ARIA labels and better alt text descriptions.
- Improve my skills in using **JavaScript** to add dynamic content and interactivity to similar projects.
### Useful Resources
- [MDN Web Docs - Flexbox Guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) - Helped in understanding how to effectively use Flexbox for layout control.
- [The Markdown Guide](https://www.markdownguide.org/) - Assisted in formatting this README.
## Author
- GitHub - [Mayen007](https://github.com/Mayen007)
- Frontend Mentor - [@Mayen007](https://www.frontendmentor.io/profile/Mayen007)
## Acknowledgments
Thanks to Frontend Mentor for the great challenge. This project was a good exercise in practicing fundamental HTML and CSS skills.