CSS/bootstrap：制作带有徽标和曲线图像的卡片

Question

I want to make this design in CSS or bootstrap.

So I want a logo on left and image and text on right as seen in image.

 .card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.3s; border-radius: 10px; margin: 10px auto; }.grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px;; padding: 10px; overflow: auto; }.grid-item { margin: 5px; text-align: center; cursor: pointer; }.logo { width: 80px; height: 80px; position: relative; top: 10px; }.title { position: relative; top: 50%; color: white; }.img { height: 100px; width: 100%; border-top-left-radius: 40%; } @media screen and (max-width: 768px) {.grid-container { grid-template-columns: 1fr; } } }

 <div class="grid-container"> <div class="grid-item card"> <a> <.--code here--> <div class="row"> <div class="col-4"> <img src="assets/images/logo.png" alt="logo" class="logo" /> </div> <div class="col-8"> < --<h4 class="title">Watch It</h4>--> <img src="assets/images/banners/help-support png" alt="image" class="img" /> </div> </div> </a> </div> </div>

And the result looks like this:

the problem is in the image curve; I can't make it as it looks in first image. Also when I add a title (I commented it above in html) and try to center it in the second image, the second image is shifted downwards. :

Answer 1

Simplest solution would be to get an svg with shape of that curve and absolutely position it inside the col-8 div. Add another class name along with it, if you go for that solution.

To make it work with just html and css would lead to unnecessarily complicated layout