Issue

This Content is from Stack Overflow. Question asked by Hakeem Gardner

<body>
      <main>
        <div class="card-container">
          <div class="image-container">
            <img src="imagesimage-product-desktop.jpg" alt="product-image">
          </div>
          <div class="text-container">
            <h3>perfume</h3>
    
            <h1 class="heading">Gabrielle Essence Eau De Parfum</h1>
    
            <p class="body">A floral, solar and voluptuous interpretation composed by Olivier Polge,
              Perfumer-Creator for the House of CHANEL.</p>
            <p class="price1">$149.99<span>$169.99</span></p>
            <div class="button">
              <button type="button" name="button"><img src="imagesicon-cart.svg" alt="cart-icon">Add to Cart</button>
            </div>
          </div>
        </div>
      </main>
    
    *{
      box-sizing: border-box;
    }
    body{
      background-color: hsl(30, 38%, 92%);
    }
    .card-container{
      display: flex;
      justify-content: center;
      align-content: center;
      margin-top: 200px;
    }
    h1{
      font-family:Fraunces ;
      font-weight: 700;
      max-width: 350px;
      line-height: 30px;
    }
    .text-container{
      background-color: white;
      padding: 30px;
      border-radius: 1px 15px 15px 1px;
      height: 900px;
      text-align: justify;
    }
    img{
      border-radius: 15px 1px 1px 15px;
    }
    button{
      background-color: hsl(158, 36%, 37%);
      border-radius: 5px 5px 5px 5px;
      border: none;
      color: white;
      text-align: center;
      padding-top:20px;
      padding-bottom: 20px;
      padding-left:150px;
      padding-right:150px;
      margin-top: 550px;
    
    }
    span.price1{
    color: hsl(158, 36%, 37%);
    font-weight: 500;
    }
    span.price2{
      text-decoration: line-through;
      color: hsl(228, 12%, 48%);
    }
    p.body{
      color: hsl(228, 12%, 48%);
      letter-spacing: 4px;
    }
    h3{
      color:  hsl(228, 12%, 48%);
      text-transform: uppercase;
      letter-spacing: 4px;
      font-family: Fraunces;
    }

So i’m trying to build this card using HTML and CSS and I can’t seem to get the wording to be in the order of the original. I have tried flex box method as well as other various methods such as as using margin, line breaks and padding as well as letter-spacing to get it looking similar. I hope I was able to convey the issue I am having.

Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.