https://github.com/ayokanmi-adejola/order-summary-component
A responsive card component built with HTML and CSS that showcases an order summary for a music subscription service. Features hover states for interactive elements and adapts to different screen sizes.
https://github.com/ayokanmi-adejola/order-summary-component
css3 flexbox-layout google-fonts html5 mobile-first-workflow
Last synced: 8 months ago
JSON representation
A responsive card component built with HTML and CSS that showcases an order summary for a music subscription service. Features hover states for interactive elements and adapts to different screen sizes.
- Host: GitHub
- URL: https://github.com/ayokanmi-adejola/order-summary-component
- Owner: Ayokanmi-Adejola
- Created: 2025-05-14T13:13:51.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-14T12:23:36.000Z (11 months ago)
- Last Synced: 2025-09-30T00:00:40.008Z (9 months ago)
- Topics: css3, flexbox-layout, google-fonts, html5, mobile-first-workflow
- Language: CSS
- Homepage: https://order-summary-component-seven-lemon.vercel.app
- Size: 131 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Order summary card solution
This is a solution to the [Order summary card challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj) Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Overview
### The challenge
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
### Screenshot
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-responsive design
- Google Fonts
### What I learned
This project helped me improve my skills in creating responsive components that adapt to different screen sizes. I learned how to:
- Structure HTML semantically for better accessibility
- Use Flexbox for layout positioning
- Implement hover states for interactive elements
- Create responsive designs with media queries
- Work with SVG background patterns
Some code snippets I'm proud of:
```html
```
```css
.plan-container {
background-color: hsl(225, 100%, 98%); /* Very pale blue */
border-radius: 12px;
padding: 16px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
}
.btn-primary:hover {
opacity: 0.8;
}
```
### Continued development
In future projects, I want to focus on:
- Improving my CSS animations and transitions
- Implementing more advanced responsive design techniques
- Exploring CSS Grid for more complex layouts
- Enhancing accessibility features
### Useful resources
- [MDN Web Docs](https://developer.mozilla.org/en-US/) - Comprehensive reference for HTML, CSS, and JavaScript.
- [CSS-Tricks Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - Excellent visual guide to Flexbox.
- [Google Fonts](https://fonts.google.com/) - For typography options.
## Author
- Frontend Mentor - [@Ayokanmi-Adejola](https://www.frontendmentor.io/profile/Ayokanmi-Adejola)
