https://github.com/mayen007/order-summary-component

A responsive Order Summary Card component built with semantic HTML, CSS, and custom fonts. Designed as a solution for the Frontend Mentor challenge, showcasing hover states, reusable styles, and mobile-first design.
https://github.com/mayen007/order-summary-component

custom-fonts flexbox frontendmentor-challenge hover-effects html-css mobile-first-design ui-components web-development

Last synced: 12 days ago
JSON representation

A responsive Order Summary Card component built with semantic HTML, CSS, and custom fonts. Designed as a solution for the Frontend Mentor challenge, showcasing hover states, reusable styles, and mobile-first design.

• Host: GitHub
• URL: https://github.com/mayen007/order-summary-component
• Owner: Mayen007
• License: mit
• Created: 2024-12-02T15:01:20.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2024-12-03T16:39:59.000Z (about 1 month ago)
• Last Synced: 2024-12-03T17:36:19.654Z (about 1 month ago)
• Topics: custom-fonts, flexbox, frontendmentor-challenge, hover-effects, html-css, mobile-first-design, ui-components, web-development
• Language: CSS
• Homepage: https://mayen007.github.io/order-summary-component/
• Size: 836 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Frontend Mentor - Order Summary Card Solution

This is my solution to the [Order Summary Card challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj). This project was a great opportunity to practice structuring a small, focused component while using semantic HTML and CSS.

## Table of Contents

- [Overview](#overview)

  - [The Challenge](#the-challenge)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [My Process](#my-process)

  - [Built With](#built-with)

  - [What I Learned](#what-i-learned)

  - [Continued Development](#continued-development)

- [Author](#author)

## Overview

### The Challenge

Users should be able to:

- See hover states for interactive elements.

### Screenshot

![Desktop View](./assets/images/desktop-view.png)

### Links

- **Solution URL**: [Github Repository](https://github.com/Mayen007/order-summary-component)

- **Live Site URL**: [Live preview of the project](https://mayen007.github.io/order-summary-component/)

## My Process

### Built With

- Semantic HTML5 markup

- CSS custom properties

- Flexbox for layout

- Mobile-first workflow

- Custom fonts using `@font-face` (Red Hat Display)

### What I Learned

This project helped solidify my understanding of **CSS custom properties**, **hover states**, and **responsive design**. One of the highlights was implementing a reusable and visually appealing button style:

```css

.card__button {

  background-color: var(--bright-blue);

  color: var(--pale-blue);

  border: none;

  border-radius: 8px;

  padding: 0.75rem 1.5rem;

  box-shadow: 0 10px 20px -10px var(--bright-blue);

  transition: all 0.3s ease;

}

.card__button:hover {

  background-color: hsl(245, 100%, 72%);

}

```

### Continued Development

I plan to focus on improving:

- Consistency in typography across devices using a combination of custom fonts and responsive units.

- More complex layout management using CSS Grid in future projects.

- Enhancing interactivity with advanced hover and focus styles.

## Author

- GitHub - [Mayen007](https://www.github.com/Mayen007)

- Frontend Mentor - [@Mayen007](https://www.frontendmentor.io/profile/Mayen007)