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.
I'm transitioning back into Full-Time Web Development after a long hiatus away from the tech industry. From experience I know the fastest way to learn/relearn any skill is through consistent building and that is why I've found Front End Mentor Challenges to be the perfect fit for me at this stage in my career journey.
This is the first of many challenges to come, definitely excited for the future. I
-
Build out the Order Summary Component challenge at [https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj] as close to the original design as possible.
-
Users should be able to: see hover states for interactive elements ['Change' anchor tag, 'Proceed to Payment' button and 'Cancel Order' button]
- Solution: [https://frontendmentor.io/solutions/order-summary-component-solution-yR1D81TWi]
- Live Site URL: [https://emmanueloloke.github.io/frontendmentor-ordersummary/]
- I started out with the HTML structuring of the order summary card. Positioning the image, texts and buttons.
- Followed it up with styling each element to mimic what was presented in the challenge design files with CSS.
- HTML5 markup
- CSS3 custom properties
- Flexbox
- Improved ability working with CSS Flexbox
- CSS [overflow:hidden;] : Used to get illustration-hero.svg image to take the border radius of the parent div
- Centering elements horizontally and vertically with [display:flex;], [margin:0 auto], [position:relative;], [position:absolute;]
- Tint image with linear gradient
- Looking forward to taking up a few more HTML & CSS challenges before later moving on to JS.
- Change hsl colors to rgb equivalent [https://htmlcolors.com/hsl-to-rgb]
- Emmanuel Oloke.
- Frontend Mentor - [https://www.frontendmentor.io/profile/EmmanuelOloke]
- Twitter - [@I_am_Pope]