https://github.com/cdanderson76/productpreviewcardcomponent

This is the solution for the Frontend Mentor Product Preview Card Component
https://github.com/cdanderson76/productpreviewcardcomponent

css front-end front-end-development frontend-mentor frontendmentor-challenge html productpreviewcardcomponent scrimba webdesign webdeveloper webdevelopment

Last synced: 7 months ago
JSON representation

This is the solution for the Frontend Mentor Product Preview Card Component

• Host: GitHub
• URL: https://github.com/cdanderson76/productpreviewcardcomponent
• Owner: cdanderson76
• Created: 2024-04-23T23:19:18.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-05-09T01:24:13.000Z (over 1 year ago)
• Last Synced: 2025-01-21T10:23:53.429Z (9 months ago)
• Topics: css, front-end, front-end-development, frontend-mentor, frontendmentor-challenge, html, productpreviewcardcomponent, scrimba, webdesign, webdeveloper, webdevelopment
• Language: CSS
• Homepage: https://cdanderson76.github.io/productPreviewCardComponent/
• Size: 1.6 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          

This is the desktop solution for the Frontend Mentor Product Preview Card Component.


This is an HTML & CSS-only challenge that tests out the ability to make a project responsive.  This is simply a project for view, however, I have added a hover effect for the 'button-like' element at the bottom of card component.

![Product Preview Card Component](https://github.com/cdanderson76/productPreviewCardComponent/assets/138369806/3f1d5a20-6540-4ac3-813b-024ed1fabeba)

What are you most proud of, and what would you do differently next time?


I'm most proud that I stuck with this project and made it as responsive as I could without sacrificing the overall layout.  There was a specific way in that I wanted this project to look, and I just stuck with it until I constructed it to my liking.

In reference to what I'd do next time, I'm not sure actually.  What I made sure that I did this time, was la out the content in HTML so I didn't always have to go back and reconstruct elements.  This is essentially how I wanted to go about this project, which stemmed from some things that I ran into on the LAST project.

What challenges did you encounter, and how did you overcome them?


Making the image responsive was the challenge for me here.  I've read the MDN articles, Stack Overflow...and I just couldn't figure out why I couldn't stretch the perfume image from the mobile layout without sacrificing the content of what I had already built.  I basically had to familiarize myself with percentages in combination of the 'max-width', 'min-width', and 'width' properties.  It took some fidgeting with the code in order for me to get it all put together, but eventually I found the solution.  I also had a lot of issues getting the footer to view correctly in the mobile layout.  I had the position at 'absolute' because I didn't know how to get it to align below the card.  I took a break, a quick nap, and it occurred to me that I just needed to change the 'flex-direction' on my '.canvas' class to 'column'.

What specific areas of your project would you like help with?


I don't think there is anything that I needed help with, but tips and comments are always helpful. I just want to improve every day...