Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       * {
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #EBEEF1;
      }

      .main {
        background-color: white;
        width: 50vw;
        min-height: 50vh;
        margin: 30px 30px 0px 30px;
        padding: 30px;
        border: 1px solid black;
        border-radius: 20px;
      }

      .main img{
        
        border-radius: 20px;
        height: 50vh;
      }

      .list ul li {
        display: inline-block;
        padding-right: 20px;
        text-align: left;
        margin-top: 20px;
        font-size: 20px;
        border: 1px solid rgb(110, 110, 110);
        border-radius: 20px;
        padding: 5px 15px;
      }
      

      .btn button{
        margin-top: 20px;
        background-color: #ABBFCC;
        color: #437dc0;
        border: none;
        border-radius: 20px;
        padding: 10px 20px 10px 20px;
        text-transform: capitalize;
      }

      .text{
        margin-top: 20px;
      }


    </style>
</head>
<body>
  <div class="container">
    <div class="main">
      <img src="Card.png"/>
  
  <div class="list">
    <ul>
      <li>Nature</li>
      <li>Beauty</li>
    </ul>
</div>
<div class="text">
    <p>
        <h1>This is Dummy</h1>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. In numquam
      quo consectetur similique impedit. Cupiditate illum cumque pariatur
      atque temporibus earum eveniet voluptatem.
    </p>
</div>
<div class="btn">
    <button>Read more</button>
</div>
  </div>
</div>
</body>
</html>