responsive page with HTML,CSS

I've seen your solution and I've some suggestions :

.product_content {
  padding-top: 1rem;
}

.image_avatar {
  height: 24px;
  border: 1px solid #fff;
  border-radius: 50%;
  vertical-align: bottom;
}

.product_img img {
  border-radius: .5rem;
}

.product_content > p:nth-child(5) {
  vertical-align: middle;
  display: inline;
}

.product_price {
  vertical-align: middle;
}

.product_price > img:nth-child(1) {
  vertical-align: middle;
  margin-right: .25rem;
}

.product_original_price > img:nth-child(1) {
  vertical-align: middle;
  margin-right: .25rem;
}

.product_img {
  position: relative;
}

.product_img {
  position: relative;
}

Hello Joyce!

Your project looks great!

It's quite a challenge to add that hover effect properly. Here's how you can do it:

HTML

<img src="images/image-equilibrium.jpg" alt="Equilibrium" class="pic">
  <div class="icon">
    <img src="images/icon-view.svg" alt="icon-view" class="icon-view">
  </div>

CSS

.pic {
   width: 300px;
   background: url('images/icon-view.svg') center center no-repeat;
   background-color: $Cyan-hover;
   background-size: cover;
   margin: auto;
   border-radius: 10px;
}
.icon {
   display: grid;
   justify-content: center;
   align-items: center;
   position: absolute;
   opacity: 0;
   background-color: $Cyan-hover;
   width: 300px;
   height: 300px;
   border-radius: 10px;
}
icon:hover {
   opacity: .5;
   cursor: pointer;
}

Just don't forget to change the class names to match yours.

I hope it helps!

Other than that, you did an excelent job!