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 minmax(10px, 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 {
    /* content: ''; */
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    background: green;
    
  }
  &::after {
    /* content: ''; */
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    background: green;
    border-radius: 0 0 20px 0;
  }
  .inner {
    padding: 15px;
  }
  p {
    grid-column: 1 / 2;
  
    &.title {
      font-size: 28px;
    }
    &.desc {
      font-size: 16px;
    }
  }
  .btns {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    padding: 10px;
    button {
      display: block;
      width: 100%;
      padding: 10px;
      + button {
        margin-top: 5px;
      }
    }
  }
}