Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

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

[![Frontend Mentor](https://img.shields.io/badge/Frontend%20Mentor-Challenge%20Complete-brightblue)](https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj)  

[![GitHub Repository](https://img.shields.io/badge/Repository-GitHub-blue)](https://github.com/Yashi-Singh-9/Order-Summary-Component.git)  

[![Last Commit](https://img.shields.io/github/last-commit/Yashi-Singh-9/Order-Summary-Component/main)](https://github.com/Yashi-Singh-9/Order-Summary-Component/commits/main)  

[![License: MIT](https://img.shields.io/badge/license-MIT-green)](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

![Desktop Design](design/desktop-design.png)

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