VTickner/frontend-mentor-order-summary-card-component

Solution to Frontend Mentor challenge to recreate an order summary card component

Frontend Mentor - Order summary card solution

This is a solution to the Order summary card challenge on Frontend Mentor.

Table of contents

• Overview
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge was to build a responsive layout to show an order summary card component and get the design to look as close as possible to the provided design images. It also included using a hover state for the buttons and link.

Screenshots

Links

• Solution URL: https://github.com/VTickner/frontend-mentor-order-summary-card-component
• Live Site URL: https://vtickner.github.io/frontend-mentor-order-summary-card-component/

My process

• Created semantic HTML first
• Created CSS selectors to:
  • create custom variables to contain the various colours, font sizes font weights used in the design
  • used a CSS reset
  • layout the design using Flexbox
  • style the various elements, adding in hover states for the buttons and link
  • added in :focus styling for accessibility purposes
  • create a different width layout for mobile version

Built with

• Semantic HTML markup
• CSS custom properties
• Flexbox
• Desktop-first workflow (responsive design)
• Google Font

What I learned

I didn't learn anything new on this project, but did gain some extra practice.

Continued development

Gain extra practice on more complicated layout designs.

Useful resources

• Google Fonts - The fonts used in this design was Red Hat Display using Medium 500, Bold 700 and Black 900 font styles.

Author

• Frontend Mentor - @VTickner