ferlagher/FMC-Order-summary-component

Frontend Mentor Challenge - Order summary component

Frontend Mentor - Order summary card solution

This is a solution to the Order summary card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

A responsive card component for an order preview.

The challenge

Users should be able to:

• See hover states for interactive elements

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/responsive-component-without-breakpoints-wji40H3dEv
• Live Site URL: https://ferlagher.github.io/FMC-Order-summary-component

My process

I challenged myself to build this solution without using breakpoints. I started learning Sass a few day ago, so I wanted to try out the functions. I only used one media query for changing the background image. The other elements use a clamp() function to scale according to the viewport size. The min() function inside clapm() makes the card width:100% only in small devices.

Built with

• Semantic HTML5 markup
• Sass ♥
• Flexbox
• CSS Grid

What I learned

I really love Sass, everyday I learn something new. Today I learned how to use some usefull CSS functions.

$width-card: clamp(min(100%, 327px), 33vw, 450px);

Continued development

I want to try out more complex Sass functions and loops.

Next challenge: Stats preview card component

Useful resources

• The Surprising Truth About Pixels and Accessibility
• clamp()

Author

• LinkedIn - ferlagher
• Frontend Mentor - @ferlagher
• Instagram - @ferlagher

Thank you very much for reading. ♥