Two doors

These opening cards could be used to showcase for instance anything.

In order to achieve them you will find below the various codes to be used. Despite using Bricks builder, I tried to list up all the necessary steps to complete the cards to be the most universal as much as possible. Therefore I am close to what you will find in any IDE. For Bricks builder, please follow the HTML/CSS structure so you can add-up divs and give them CSS instead of putting them into the code block in order to avoid FOUC as the code block is loaded lastly within the page priority list.

For CSS, please note that I am considering that you are using a builder hence: no margin/padding reset has been applied and the font is not defined.

HTML:

<section class="door-section">
  <div class="perspective">
    <div class="door-ctn">
      <div class="fr-dr-up color1"></div>
      <div class="fr-dr-down color1"></div>
      <div class="inside-dr">
        <p class="dr-inside-hdr">DESIGN</p>
      </div>
    </div>
  </div>
  <div class="perspective">
    <div class="door-ctn">
      <div class="fr-dr-up color2"></div>
      <div class="fr-dr-down color2"></div>
      <div class="inside-dr">
        <p class="dr-inside-hdr">MOTION</p>
      </div>
    </div>
  </div>
  <div class="perspective">
    <div class="door-ctn">
      <div class="fr-dr-up color3"></div>
      <div class="fr-dr-down color3"></div>
      <div class="inside-dr">
        <p class="dr-inside-hdr">WEB</p>
      </div>
    </div>
  </div>
</section>

CSS:

:root {
  --primary-dr: #202020;
  --transition-dr: all 0.3s ease;
}
.door-section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  background-color: var(--primary-dr);
  justify-content: space-evenly;
  min-height: 100vh;
  width: 100%;
  z-index: 0;
}
.perspective {
  perspective: 700px;
}
.door-ctn {
  position: relative;
  width: 300px;
  height: 200px;
  margin-top: 100px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;
  transition: var(--transition-dr);
  perspective: 700px;
  transform: rotate3d(10, -18, 3, 25deg);
}
.fr-dr-up {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 51%;
  transition: var(--transition-dr);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  box-shadow: inset rgba(0, 0, 0, 0.3) -3px 1px 1px;
}
.fr-dr-up::before {
  content: "";
  position: absolute;
  bottom: -21px;
  left: 50%;
  width: 40px;
  height: 40px;
  background-color: white;
  transform: translateX(-50%);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 50%, 0 50%, 0% 30%);
}
.fr-dr-down::before {
  content: "";
  position: absolute;
  top: -21px;
  left: 50%;
  width: 40px;
  height: 40px;
  background-color: white;
  transform: translateX(-50%);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  clip-path: polygon(100% 50%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0 50%);
}
.fr-dr-down {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 51%;
  transition: var(--transition-dr);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  box-shadow: rgba(0, 0, 0, 0.3) -3px -2px 1px inset;
}
.inside-dr {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  width: 100%;
  height: 100%;
}
.dr-inside-hdr {
  color: black;
  font-size: 3rem;
}
.color1 {
  background-color: tomato;
}
.color2 {
  background-color: skyblue;
}
.color3 {
  background-color: lightgreen;
}
.door-ctn:hover .fr-dr-up {
  transform: translateY(-90%);
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.door-ctn:hover .fr-dr-down {
  transform: translateY(90%);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px 2px,
    rgba(0, 0, 0, 0.2) 0px 3px 0px inset;
}

.door-ctn:hover {
  transform: rotate(0);
}

@media screen and (max-width: 1280px) {
  .door-section {
    flex-direction: column;
  }
}