https://github.com/yashi-singh-1/product-card

This challenge is a simple yet elegant fashion product card that showcases a dress with an auto-sliding image carousel, size selection options, and the ability to flip the card to reveal more details.
https://github.com/yashi-singh-1/product-card

animation animation-css challenege css css3 front-end front-end-challenge front-end-development front-end-web-development frontend frontend-challenge frontend-development html html5 javascript product-card

Last synced: 4 days ago
JSON representation

This challenge is a simple yet elegant fashion product card that showcases a dress with an auto-sliding image carousel, size selection options, and the ability to flip the card to reveal more details.

• Host: GitHub
• URL: https://github.com/yashi-singh-1/product-card
• Owner: Yashi-Singh-1
• Created: 2024-06-17T09:56:21.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-06-17T10:40:15.000Z (5 months ago)
• Last Synced: 2024-06-17T12:08:55.885Z (5 months ago)
• Topics: animation, animation-css, challenege, css, css3, front-end, front-end-challenge, front-end-development, front-end-web-development, frontend, frontend-challenge, frontend-development, html, html5, javascript, product-card
• Language: CSS
• Homepage:
• Size: 8.68 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

    
Fashion Product Card Challenge


    


        
1. Introduction

        
2. Objective

        
3. Preview

        
4. Requirements

        
5. Installation

        
6. Project Structure

        
7. Usage

        
8. Styling

        
9. Challenges

        
10. Contributing

        
11. Contact

    


    
Introduction

    
This project is a simple yet elegant fashion product card that showcases a dress with an auto-sliding image carousel, size selection options, and the ability to flip the card to reveal more details. The card features a linear gradient background, interactive buttons, and is built using HTML, CSS, and JavaScript.


    
Objective

    
The objective of this project is to create an interactive and visually appealing product card for showcasing fashion items.


    
Preview

    

     


    
Requirements

    
To run the Fashion Product Card, you need:

    


        
A web browser to view the product card.

        
A code editor for making modifications to the project files.

    


    
Installation

    
Follow these steps to get started with the Fashion Product Card:

    


        

git clone https://github.com/Yashi-Singh-1/Product-Card.git

cd Product-Card

        

    

    
Open index.html in your preferred web browser.


    
Project Structure

    
The project includes the following files and directories:

    


        


index.html: Structure of the product card.

        


styles.css: CSS styles for the card and its elements.

        


script.js: JavaScript for interactive features like the image carousel and card flip.

        


images/: Directory containing dress images.

    


    
Usage

    
Here's how you can interact with the Fashion Product Card:

    


        
The product card displays an auto-sliding image carousel of the dress.

        
Click the "View Details" button to flip the card and view more information about the dress.

        
Select a size using the circular size options.

        
Use the "View Product" button to flip back to the front of the card.

        
Click the "Buy Now" button to initiate a purchase (functionality to be implemented).

    


    
Styling

    
The card is designed with a modern look, featuring:

    


        
Linear gradient background for a sleek appearance.

        
Circular size options for a user-friendly interface.

    


    
Challenges

    
During development, the main challenges encountered were:

    


        
Ensuring image visibility and usability across various devices and screen resolutions.

        
Implementing smooth animations and transitions for a seamless user experience.

        
Integrating responsive design principles to optimize performance on mobile and desktop platforms.

    


    
Contributing

    
Contributions are welcome to enhance the Fashion Product Card. Follow these steps:

    


        
Fork the repository.

        
Create a new branch (git checkout -b feature/improvement).

        
Make your changes and commit them (git commit -am 'Add new feature').

        
Push to the branch (git push origin feature/improvement).

        
Create a new Pull Request.

    

    
For major changes, please open an issue first to discuss potential improvements or features.


    
Contact

    
For any questions or feedback, please reach out to Yashi Singh (www.linkedin.com/in/yashi-singh-b4143a246).