{"id":21167043,"url":"https://github.com/cdanderson76/productpreviewcardcomponent","last_synced_at":"2026-05-19T08:07:55.966Z","repository":{"id":235610990,"uuid":"791003104","full_name":"cdanderson76/productPreviewCardComponent","owner":"cdanderson76","description":"This is the solution for the Frontend Mentor Product Preview Card Component","archived":false,"fork":false,"pushed_at":"2024-05-09T01:24:13.000Z","size":1679,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-01T04:21:44.914Z","etag":null,"topics":["css","front-end","front-end-development","frontend-mentor","frontendmentor-challenge","html","productpreviewcardcomponent","scrimba","webdesign","webdeveloper","webdevelopment"],"latest_commit_sha":null,"homepage":"https://cdanderson76.github.io/productPreviewCardComponent/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cdanderson76.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-04-23T23:19:18.000Z","updated_at":"2024-05-09T01:24:16.000Z","dependencies_parsed_at":"2024-04-24T00:27:54.438Z","dependency_job_id":"a1cc0407-2983-4aa3-9797-3b2f9f1ecd44","html_url":"https://github.com/cdanderson76/productPreviewCardComponent","commit_stats":null,"previous_names":["cdanderson76/productpreviewcardcomponent"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cdanderson76/productPreviewCardComponent","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdanderson76%2FproductPreviewCardComponent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdanderson76%2FproductPreviewCardComponent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdanderson76%2FproductPreviewCardComponent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdanderson76%2FproductPreviewCardComponent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cdanderson76","download_url":"https://codeload.github.com/cdanderson76/productPreviewCardComponent/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdanderson76%2FproductPreviewCardComponent/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33207665,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-19T07:54:09.561Z","status":"ssl_error","status_checked_at":"2026-05-19T07:54:08.508Z","response_time":58,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","front-end","front-end-development","frontend-mentor","frontendmentor-challenge","html","productpreviewcardcomponent","scrimba","webdesign","webdeveloper","webdevelopment"],"created_at":"2024-11-20T14:59:16.979Z","updated_at":"2026-05-19T08:07:55.943Z","avatar_url":"https://github.com/cdanderson76.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003ch1\u003eThis is the desktop solution for the Frontend Mentor Product Preview Card Component.\u003c/h1\u003e\n\nThis is an HTML \u0026 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.\n\n![Product Preview Card Component](https://github.com/cdanderson76/productPreviewCardComponent/assets/138369806/3f1d5a20-6540-4ac3-813b-024ed1fabeba)\n\n\u003ch2\u003eWhat are you most proud of, and what would you do differently next time?\u003c/h2\u003e\n\nI'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.\n\nIn 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.\n\n\n\u003ch2\u003eWhat challenges did you encounter, and how did you overcome them?\u003c/h2\u003e\n\nMaking 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'.\n\n\n\u003ch2\u003eWhat specific areas of your project would you like help with?\u003c/h2\u003e\n\nI 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...\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdanderson76%2Fproductpreviewcardcomponent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcdanderson76%2Fproductpreviewcardcomponent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdanderson76%2Fproductpreviewcardcomponent/lists"}