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
• Acknowledgments

Overview

The challenge

Users should be able to:

• See hover states for interactive elements

Screenshot

-active state 1 -active state 2 -active state 3 -mobile design -desktop preview

Links

• Solution URL: Solution URL
• Live Site URL: Live site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Mobile-first workflow -The font family I imported

What I learned

I learnt how to use more css properties and html elements

CSS properties such as

background-repeat: no-repeat;
background-size:100%;
background-attachment: scroll;
box-shadow:0px 5px 5px #cecaca;
display: flex;
align-items: center;
justify-content: space-between;

<div>
class
id

Continued development

• I'm still interested in learning more CSS properties in order to add more styles to my work.

• Adding tailwindcss to my work in future works will be great. So I will also develop my skills in that area as well

Useful resources

w3Schools. This site enhanced my CSS and HTML understanding

Author

• LinkedIn - Daniel Samuel
• Frontend Mentor - @DeCaptainDan
• Twitter - @DanSam24372807

Acknowledgments

• I want to thank my mentor in SideHustle internship who showed me this site frontendmentor. He has really supported me in learning HTML and CSS.
• I aslo want to thank frontend mentor for this opportunity
• Thanks to w3Schools for helping me improve my knowledge on HTML and CSS