Submitted about 2 years ago

Responsive Product Card Component

Shamil•30

@Shamil-B

Preview site View code

This is a solution for...Product preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Community feedback

suhayb jirde•1,050

@suhaybjirdePosted about 2 years ago

you did great job you only need it to make mobile version and change the font family import these fonts @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap');

```@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&display=swap');```


one for the headings and other for the paragraphs


```<body>
  <div class="box">
    <img src="images/image-product-desktop.jpg" alt="A perfume">
    <div class="container">
      <div class="title">PERFUME</div>
      <h1 class="name">Gabrielle Essence Eau De Parfum</h1>
      <p>A floral, solar and voluptuous interpretation composed by Olivier Polge, 
        Perfumer-Creator for the House of CHANEL.</p>
      <h1 class="price"><span>$149.99</span><p>$169.99</p></h1>
      <div class="add-btn"><img src="images/icon-cart.svg" alt=""> Add to Cart</div>
    </div>
  </div>```


try to wrap the image in a container and display the box  grid or flex 
and then make the image 100% of it's container 
```img {
width: 100%}

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord