Frontend Mentor - Product Card component solution

This is a solution to the Product Card component challenge on Frontend Mentor.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources

Overview

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

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

What I learned

This project helped me laern how to create a card component. Truly, I am proud of this HTML & CSS codes😊:

 <div flex-one>
    <p class="per">PERFUME</p>
    <h1 class="gab">Gabrielle Essence Eau De Parfum</h1>
    <p class="floral">A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>
 </div>

@media (max-width:540px) {

    .main-box {
        /* background-color: red; */
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        width: 90%;
        height: 60vh;
        margin: 70px auto;
        border-radius: none;

        display: grid;
        grid-template-columns: 1fr;
    }

Continued development

For me, the goal is to take on much more tasking HTML & CSS so as to get better at it before movig on to JS