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

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

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover and focus states for interactive elements

• Live Site URL:live

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow

I learn a lot about how to use the flexBox and how to structure things in css, and i also learn a lot at the (flexbox zombies and flexbox froggy) it help me a lot to improve my skills. I also use the Position just for my own challange to keep use with them and i also manage to do them well.

<div id="prices">
    <span id="price__color">$149.99</span>
    <span class="span">$169.99</span>
</div>

:root{
    --color-text-btn: hsl(158, 36%, 37%);
    --color-bg: hsl(30, 38%, 92%);
    --color-dark-blue: hsl(212, 21%, 14%);
    --color-grayish-blue: hsl(228, 12%, 48%);
    --color-white:  hsl(0, 0%, 100%);
}

I still want to improve more on my project in the future, i will add more product so that it will be the real online website. I will also add the javascript in future so that it will have more functionality. and the customer can be able to playaround on my website.

• shayhowe - This is an amazing article that help me a lot on understanding the basic of css and html and it go deep on everything about css it make it more simple.

• Website - zipho.netlify.app
• Frontend Mentor - @Ziphozenkosimthombe
• Twitter - @ziphozenkosi478