Create a double-sided card layout

by 규연 황

HTML

<div class="box">
  <div class="inner">
  <p class="title">
  title
  </p>
  <p class="desc">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, cum.
  </p>
  </div>
  
  <div class="btns">
    <button>button</button>
  </div>
</div>


<div class="box">
  <div class="inner">
  <p class="title">
  title
  </p>
  <p class="desc">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, cum.
  </p>
  </div>
  
  <div class="btns">
    <button>buttonbutton</button>
    <button>buttonbutton</button>
  </div>
</div>

SCSS

* {
  box-sizing: border-box;
}

.box {
  overflow: hidden;
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr auto;
  grid-auto-rows: 1fr minmax(10px, auto);
  border-radius: 15px;
  /* width: 360px; */
  /* background: red; */
  margin: 20px 10px;
  /* &::before,
  &::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    
  }
  &::before {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    background: green;
    
  }
  &::after {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    background: green;
    border-radius: 0 0 20px 0;
  } */
  .inner {
    grid-column: 1 / 2;
    padding: 15px;
  }
  p {
    

    &.title {
      font-size: 28px;
    }
    &.desc {
      font-size: 16px;
    }
  }
  .btns {
    justify-self: end;
  
   display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end; 
    position: relative;
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    padding: 10px;
    
    &::before {
      content: "";
      position: absolute;
      /* left: 100%;
      top: 100%; */
      right: 0;
      bottom: 0;
      z-index: -1;
      width: 300%;
    height: 400%;
      background: green;
      /* background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c); */
      mask-image: 
      linear-gradient(rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%), 
      linear-gradient(rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%);
    mask-size: 100% 100%, 50% 100%;
    mask-position: 0 0, 50% 50%;
    mask-composite: add;
    }
    button {
      display: inline-flex;
      /* width: 100%; */
      padding: 10px;
      + button {
        margin-top: 5px;
      }
    }
  }
}