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
• Author

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: Solution
• Live Site URL: Site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

In this challenge, my hardest task was the adjust the image and the description of product to screen size appropriate, instead use <img> tag, I used a tag with background-img, this estrategy is common but hard too when we have to resize the components.

How I did what I saw:

<!-- html into <main id="main"></main> tag -->
<div class="image-prod" alt="perfume image"></div>

/* a part of page's css */
#container {
  max-width: 35rem;
  height: 28rem;

  display: flex;
  align-items: center;

  border-radius: 0.5rem;
}

.image-prod {
  background: var(--bg-image);
  background-size: cover;
  width: 50%;
  border-radius: 0.5rem 0 0 .5rem;
  height: 100%;
}

The JS was not necessary.

Author

• Website - Portifólio
• Frontend Mentor - @Dex64ter
• Instagram - @davijozedjs