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**

- ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)   

- ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)   

- ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)

- ![ScrollReveal](https://img.shields.io/badge/ScrollReveal%20js-0e141f?style=for-the-badge&logo=ScrollReveal&logoColor=e39ff6)




## **Tools Used**

- ![Shell Script](https://img.shields.io/badge/Bash-%23121011.svg?style=for-the-badge&logo=gnu-bash&logoColor=white)   

- ![Google](https://img.shields.io/badge/google-4285F4?style=for-the-badge&logo=google&logoColor=white) 

- ![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white)   




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