All solutions

I followed a mobile-first approach to design and develop this project. Mobile-first means that I initially designed and styled the project for mobile devices before making it responsive for larger screens using media queries. While I have successfully used flexboxes and grids in this project, I acknowledge that there is always room for improvement. Here are some areas where I plan to further enhance my skills. I recognize the importance of SVGs in web design and plan to improve my knowledge of SVGs. SVGs offer great flexibility and scalability for creating interactive and visually appealing graphics on the web. I intend to study SVG manipulation, and animation to incorporate them effectively into my future projects.

One of the primary challenges encountered during this project was working with CSS Grid. Although I had some prior knowledge, I had not used grids extensively before. Some specific challenges included:

Understanding grid container and grid item properties. Figuring out how to create complex layouts with varying column and row spans. Debugging issues related to grid layout, such as alignment and responsiveness. This experience highlighted the need for further practice and learning in CSS Grid to become more proficient in using this powerful layout system.

Another challenge I faced during the project was working with SVGs. From the design image, the quotation SVG was sticking at the top side of the card, Sadly, I could not wrap my head around it.

I will love any feedback or corrections on this too. One thing I saw that was some sort of hurdle was the active state image; I saw a little eye icon on the image, and also the filter or something like that changing once the mouse is hovered over. I don't know how to go about it.

Generally not impressed with my performance on this, I some how couldnt hack the larger screen hence why I have just the mobile screen, i think next time I will start with larger screen designs maybe and make my measurements relative.

I used my knowledge about flexbox to go about everything, but I faced a challenge when I noticed my barcode was far off from the top of the card. I somehow used a negative value for my margin to get around it. I am not sure if it's the best practice though. .contain img{ margin-top: -80px; } like so.