Frontend Mentor - Product preview card component solution

This is a solution to the Product preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of Contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

The challenge

The Original - Desktop Design:

The Original - Active States:

Your challenge is to build out this product preview card component and get it looking as close to the design as possible.

Users should be able to:

• View the optimal layout depending on their device's screen size (for desktop only)
• See hover and focus states for interactive elements

My Solution Screenshots

---

Screenshot for the desktop design:

Screenshot for the active states:

Links

• Live Site URL: github-pages

My Process

Built with

What I learned

As this was my first real CSS challenge outside of the Landing Page project in The Odin Project Foundations course, I wanted to break down this task into a few actionable todo points:

Main Challenge

• Create the essential containers, and centre the content in the middle of the page
• Get the main content box shape correct, and soften the applicable corners
• Get rid of any unnecessary scrolling of the page, and ensure the content remains centered
• Add the remainder of the text elements, fonts and necessary containers inside product information container (right-facing container)
• Pull out the pricing elements separately so they can be uniquely modified
• Touch up with final styling and formatting changes; ensure that all the text, button and pricing inside the product information container are left aligned together

Update 1

When I came back to this project a couple of days later to update this README file, I realised I had forgotten to implement the active-states part of the challenge!

• Add Active Styling to the Cart Button (aka hover with darken and cursor set to pointer)

Code snippets of note

The snapshot css below represents what I needed to do to achieve not just the main centered containers soft edges, but with the left side of the image almost mirroring those soft edges, with a few px short so it fits inside appropriately.

.centre-container{
...
    border-radius: 16px;
}
.product-image {
    border-style: double;
    border-color: hsl(30, 38%, 92%);
    border-top-left-radius: 12px; /* To soften the left side border on the img */
    border-bottom-left-radius: 12px; /* To soften the left side border on the img */
    ...
}

The example below was my first practical use case of space-between. Once I realised I could utilise this property in this situation, it felt great to remove the redundant numeral margins/gaps etc within this container, in favour for this spacing technique.

.product-information-container {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

Continued development

I'd like to allocate some time to make the mobile view variant of this challenge.

Author

Hannahry aka Hannalysis