OneCompiler

Card by css

103
<!--html code--> <!DOCTYPE html> <html> <head> <title>Hello, World!</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <div class="container"> 
    <div class="card">
      
      <div id="leftbox">
        <div>
        <h2>Get insight that help your buisness grow</h2>
        </div>
        <div>
        <p>kuch bhi likh skate ho yaha ye ek nrml sa card hai joki jyada importantto nhi but kuch to important hai</p>
        </div>
      
      <div id="basebox">
        <div>
          <h3>10k+</h3>
          <p>comments</p>
        </div>
      
        <div>
          <h3>214</h3>
          <p>paid users</p>
        </div>
     
        <div>
          <h3>12M+</h3>
          <p>views</p>
        </div>
      </div>
     </div>
      <div id="rightbox">
        <img 
          src="https://assets.onecompiler.app/4355eh3uc/437tb4jgr/253234-237363-razorpay.jpg"
         />
      </div>
   
    </div>

  </div>
</body> </html> <!--> css code--> *{ margin:0px; padding:0px; box-sizing:border-box; } .container{ height:100vh; width:650px; background-color:skyblue;

display: flex;
justify-content:center;
align-items:center;
}
.card{
width:90%;
height:40%;
background-color:purple;
display:flex;
justify-content:space-between;

}
#rightbox{
height:100%;
width:50%;
}
#rightbox img{
width:100%;
height:100%;
}
#leftbox{
height:100%;
width:50%;

display:flex;
Flex-direction:column ;
justify-content:center;

gap:35px;
padding-inline:15px;
padding-block:15px;
color:white;
}
#leftbox p{
font-weight:200;
font-size:0.8rem;
}