<div class="blog-card">
    <div class="meta">
      <div class="photo" style="background-image: url(https://storage.googleapis.com/chydlx/codepen/blog-cards/image-1.jpg)"></div>
    </div>
    <div class="description">
      <h1>Learning to Code</h1>
      <h2>Opening a door to the future</h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac mattis mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sollicitudin semper nisi, vestibulum egestas mauris malesuada ac. Quisque ac aliquam mauris, at porttitor neque. Sed sit amet laoreet mauris. Aliquam laoreet interdum ante vitae rutrum. </p>
      <p class="read-more">
        <a href="#">Read More</a>
      </p>
    </div>
  </div>
  <div class="blog-card alt">
    <div class="meta">
      <div class="photo" style="background-image: url(https://storage.googleapis.com/chydlx/codepen/blog-cards/image-2.jpg)"></div>
    </div>
    <div class="description">
      <h1>Mastering the Language</h1>
      <h2>Java is not the same as JavaScript</h2>
      <p>Phasellus faucibus facilisis sapien, sed interdum sapien placerat in. Aenean magna sapien, condimentum ut mattis ac, congue tempor eros. Integer vel sem a diam pretium pulvinar. Quisque diam erat, consequat at nunc nec, luctus hendrerit ex. Maecenas egestas libero felis, ac interdum ante gravida vitae. Donec efficitur lacus placerat, porttitor enim eu, mattis turpis. Etiam sed mollis nunc.</p>
      <p class="read-more">
        <a href="#">Read More</a>
      </p>
    </div>
  </div>

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

* {
  box-sizing: border-box;
}

body {
  background: #f1f1f1;
  margin: 2rem;
}

.blog-card {
  display: flex;
  flex-direction: column;
  max-width: 1100px;
  margin: 1.5rem auto;
  box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.6%;
  background: #fff;
  line-height: 1.45;
  font-family: Poppins;
  border-radius: 15px;
  overflow: hidden;
  z-index: 0;

  a {
    color: inherit;

    &:hover {
      color: #ffc400;
    }
  }

  &:hover .photo {
    -webkit-transform: scale(1.15) rotate(2deg);
    transform: scale(1.15) rotate(2deg);
  }

  .meta {
    position: relative;
    z-index: 0;
    height: 200px;
  }

  .photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s;
  }

  .description {
    padding: 1rem;
    background: #fff;
    position: relative;
    z-index: 1;

    h1, h2 {
      font-family: Poppins;
    }

    h1 {
      line-height: 1;
      margin: 0;
      font-size: 1.7rem;
    }

    h2 {
      font-size: 1rem;
      font-weight: 300;
      text-transform: uppercase;
      color: #a2a2a2;
      margin-top: 5px;
    }

    .read-more {
      text-align: right;
     
      a {
        color: #ffc400;
        font-size: 16px;
        display: inline-block;
        position: relative;
        text-decoration: none;
        background: #fff7de;
        padding: 5px 15px;
        border-radius: 15px;

        &:after {
          content: "\f054";
          font-family: FontAwesome;
          margin-left: -10px;
          opacity: 0;
          vertical-align: middle;
          transition: margin .3s, opacity .3s;
        }

        &:hover:after {
          margin-left: 5px;
          opacity: 1;
        }
      }
    }
  }

  p {
    position: relative;
    margin: 1rem 0 0;
    color: #555;
    font-size: 13px;

    &:first-of-type {
      margin-top: 1.25rem;

      &:before {
        content: "";
        position: absolute;
        height: 3px;
        background: #ffc400;
        width: 75px;
        top: -1rem;
        border-radius: 3px;
      }
    }
  }

  &:hover .details {
    left: 0%;
  }
}

@media (min-width: 640px) {
  .blog-card {
    flex-direction: row;

    .meta {
      flex-basis: 40%;
      height: auto;
    }

    .description {
      flex-basis: 60%;

      &:before {
        -webkit-transform: skewX(-3deg);
        transform: skewX(-3deg);
        content: "";
        background: #fff;
        width: 30px;
        position: absolute;
        left: -10px;
        top: 0;
        bottom: 0;
        z-index: -1;
      }
    }

    &.alt {
      flex-direction: row-reverse;

      .description:before {
        left: inherit;
        right: -10px;
        -webkit-transform: skew(3deg);
        transform: skew(3deg);
      }

      .details {
        padding-left: 25px;
      }
    }
    
    p {
      font-size: 16px;
    }
  }
}