Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/0xabdulkhaliq/product-preview-card-component
An exercise/assessment which was submitted with additional features and tweaks that aspires everyone..✨
https://github.com/0xabdulkhaliq/product-preview-card-component
animation css-animations css3 frontend-mentor frontendmentor-challenge html5 javascript scrollreveal-js
Last synced: 3 months ago
JSON representation
An exercise/assessment which was submitted with additional features and tweaks that aspires everyone..✨
- Host: GitHub
- URL: https://github.com/0xabdulkhaliq/product-preview-card-component
- Owner: 0xabdulkhaliq
- License: mit
- Created: 2022-12-20T23:44:10.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-28T13:59:22.000Z (almost 2 years ago)
- Last Synced: 2024-08-14T03:38:15.255Z (6 months ago)
- Topics: animation, css-animations, css3, frontend-mentor, frontendmentor-challenge, html5, javascript, scrollreveal-js
- Language: CSS
- Homepage: https://0xabdulkhalid.github.io/product-preview-card-component/
- Size: 2.85 MB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
![]()
# **Product preview card component**
This is a solution to the [Product preview card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa).
## **Links**
- Solution URL: [click here]()
- Live Site URL: [click here](https://0xabdulkhalid.github.io/product-preview-card-component/)
## **Built With**
- 
- 
- 
- 
## **Tools Used**
- 
- 
- 
## **Outcome**
* Used HTML5 **semantic elements** for better accessability and readability
* Used **ScrollReveal.js** for animations and transitions
* Used **Git** and **GitHub** for project management
* Tried to maintain **clean code**
* Used **media queries** for responsive design
* **Cross tested** on Firefox and Chromium based browsers
## **What I learned**
* Learned to use **ScrollReveal.js** library effectively
* Usage of **grid** & **flex** layout's properties in css
* A lot of minor things
## **Acknowledgment**
* Challenge by [Frontend Mentor](https://www.frontendmentor.io)
* Thanks to Open source Javascript library [ScrollReveal.js](https://github.com/jlmakes/scrollreveal)
## **Contact**