Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yashi-singh-9/order-summary-component
The Order Summary Card is a responsive web component displaying subscription details with modern HTML and CSS. It features clean design, interactive elements, and mobile-first responsiveness for a smooth user experience on any device.
https://github.com/yashi-singh-9/order-summary-component
css frontend frontend-mentor frontend-mentor-challenge frontendmentor-challenge html
Last synced: about 1 month ago
JSON representation
The Order Summary Card is a responsive web component displaying subscription details with modern HTML and CSS. It features clean design, interactive elements, and mobile-first responsiveness for a smooth user experience on any device.
- Host: GitHub
- URL: https://github.com/yashi-singh-9/order-summary-component
- Owner: Yashi-Singh-9
- License: mit
- Created: 2024-09-15T04:32:55.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-12-25T13:28:23.000Z (about 2 months ago)
- Last Synced: 2024-12-25T14:24:25.238Z (about 2 months ago)
- Topics: css, frontend, frontend-mentor, frontend-mentor-challenge, frontendmentor-challenge, html
- Language: CSS
- Homepage: https://yashi-singh-9.github.io/Order-Summary-Component/
- Size: 173 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Frontend Mentor - Order Summary Card Solution
[](https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj)
[](https://github.com/Yashi-Singh-9/Order-Summary-Component.git)
[](https://github.com/Yashi-Singh-9/Order-Summary-Component/commits/main)
[](https://opensource.org/licenses/MIT)This project is a solution to the [Order Summary Component Challenge](https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj) on Frontend Mentor. Completing this challenge allowed me to sharpen my skills in responsive web design and component-based development using modern web tools.
---
## Table of Contents
- [Overview](#overview)
- [The Challenge](#the-challenge)
- [Screenshots](#screenshots)
- [Live Links](#live-links)
- [Development Process](#development-process)
- [Built With](#built-with)
- [Key Learnings](#key-learnings)
- [Useful Resources](#useful-resources)
- [How to Contribute](#how-to-contribute)
- [Author](#author)
- [Acknowledgments](#acknowledgments)---
## Overview
### The Challenge
This project focuses on building a responsive order summary card component that allows users to:
- View a well-designed order summary card with clear details.
- Interact with hover states on buttons and links for a dynamic experience.
- Experience a responsive layout optimized for mobile and desktop screens.---
### Screenshots
#### Desktop Design

#### Mobile Design
---
### Live Links
- **Solution URL**: [Frontend Mentor Solution](https://www.frontendmentor.io/solutions/order-summary-component-zmVI8t1PSm)
- **Live Site**: [Order Summary Component Live](https://yashi-singh-9.github.io/Order-Summary-Component/)---
## Development Process
### Built With
This solution was created using modern and scalable web development tools:
- **Semantic HTML5**: For structured and meaningful markup.
- **SCSS**: For maintainable and modular styles with variables, mixins, and nesting.
- **Bootstrap 5**: For faster UI development with a mobile-first approach.
- **Responsive Design**: Optimized for both desktop and mobile using SCSS media queries and Bootstrap utilities.---
### Key Learnings
Through this challenge, I refined my ability to:
1. **Implement Responsive Design**: Ensuring the layout adapts seamlessly across various screen sizes.
2. **Use SCSS Efficiently**: Taking advantage of SCSS features such as variables for color management and mixins for reusable code.
3. **Combine Bootstrap and Custom Styles**: Leveraging Bootstrap utilities while maintaining the flexibility of custom SCSS styles.
4. **Hover and Interaction States**: Enhancing user experience with smooth hover effects for buttons and links.---
### Useful Resources
- [Bootstrap Documentation](https://getbootstrap.com/docs/5.3/) - Essential for understanding and applying Bootstrap utilities and components.
- [SCSS Official Docs](https://sass-lang.com/documentation) - A great resource for mastering SCSS syntax and features.
- [CSS Tricks: A Complete Guide to SCSS](https://css-tricks.com/snippets/css/sass-guide/) - Helpful for improving SCSS workflow and organization.---
## How to Contribute
If you'd like to contribute to this project:
1. Fork the repository.
2. Create a new branch (`git checkout -b feature-branch`).
3. Make your changes and commit them (`git commit -m "Add feature"`).
4. Push to the branch (`git push origin feature-branch`).
5. Open a pull request.Please refer to the [CONTRIBUTING.md](CONTRIBUTING.md) file for detailed guidelines.
---
## Author
- **Name**: Yashi Singh
- **LinkedIn**: [Yashi Singh](https://www.linkedin.com/in/yashi-singh-b4143a246)
- **Frontend Mentor**: [@Yashi-Singh-9](https://www.frontendmentor.io/profile/Yashi-Singh-9)---
## Acknowledgments
A big thank you to **Frontend Mentor** for providing this challenge and fostering a community that encourages learning and growth. I also want to express gratitude to the web development community for sharing resources and guidance.