0

so basically I want to create something like this:

result

The problem is that I don't know how to do the red cube centered to the blue one. For now I have this piece of code:

HTML

<div class="cards" id="cards">
     <div class="card 1">
        <div class="icon"><img src="#" alt=""></div>
        <h3 class="title"></h3>
        <p class="description"></p>
     </div>
     <div class="card 1">
        <div class="icon"><img src="#" alt=""></div>
        <h3 class="title"></h3>
        <p class="description"></p>
     </div>
     <div class="card 1">
      <div class="icon"><img src="#" alt=""></div>
      <h3 class="title"></h3>
      <p class="description"></p>
   </div>

CSS

.icon{
    background-color: red;
    width: 150px;
    height: 150px;
    border-radius: 20px;
}

.card{
    height: 500px;
    width: 350px;
    border-radius: 20px;
    background-color: rgb(56, 55, 55);
    -webkit-box-shadow: 3px 11px 40px 2px rgba(0,0,0,0.37); 
    box-shadow: 3px 11px 40px 2px rgba(0,0,0,0.37); 
}

where .icon is the red cube and .card the blue rectangle. Does anyone have any idea?

Edoardo Balducci
  • 332
  • 1
  • 10
  • Please post your HTML as well for the above item. – dig99 Jul 25 '22 at 09:54
  • 2
    There are many different approaches, but whether the approach is suitable depends on how flexible your cards should be. What works in one case may not work in another. – qrsngky Jul 25 '22 at 10:18

0 Answers0