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.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- See hover states for interactive elements
- Solution URL: Check out the code here
- Live Site URL: Visit the live site here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
I learnt that whenever you want to achieve the image at the top of a container as seen in the screenshot above then you can include the css properties top and position: absolute; on the specific image. However you must ensure that the container class has the css declaration of position: relative;. It would also help if you structure your markup based on the design shown whereby having your image code above the code responsible for your content within the card like this
<img src="" alt="" />
<!-- code responsible for the content here -->
The benefit of this structure is that it is easier if you are using flexbox or css grid to achieve the design layout since the code would be minimal and easier to understand.
I plan to use top and the position properties in my upcoming challenges in order to get more familiar with these two css properties and also reading articles and support channels to better understand the various possibilites that can be achieved by using these properties.
-
CSS Tricks - CSS Grid - This helped me with the flexbox concept and I am really glad to be recommend this article, will use it going forward.
-
MDN CSS Reference - This is the guide to all the css properties with an indept explanation. Definitely recommend it.
- Frontend Mentor - @TheCoderGuru
- Twitter - @TheCoderGuru