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.
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