CodePen Embed - CSS Card Design with Icon

<div class="container mb-5">

  <div class="row pl-3">
    <div class="col-3">
      <div class="card">
        <div class="background"></div>
        <div class="card-icon">
          <div class="wrap">
            <i class="fas fa-shield-alt"></i>
          </div>
        </div>
        <div class="card-title">
          Bu Bir Başlıktır
        </div>
        <div class="card-content">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae facere dignissimos deserunt suscipit autem mollitia, blanditiis fugiat amet tempora sed aliquid non id, veniam repudiandae beatae est laboriosam voluptatum. Sunt.
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="card">
        <div class="background"></div>
        <div class="card-icon">
          <div class="wrap">
            <i class="fas fa-money-bill-alt"></i>
          </div>
        </div>
        <div class="card-title">
          Bu Bir Başlıktır
        </div>
        <div class="card-content">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae facere dignissimos deserunt suscipit autem mollitia, blanditiis fugiat amet tempora sed aliquid non id, veniam repudiandae beatae est laboriosam voluptatum. Sunt.
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="card">
        <div class="background"></div>
        <div class="card-icon">
          <div class="wrap">
            <i class="fas fa-male"></i>
          </div>
        </div>
        <div class="card-title">
          Bu Bir Başlıktır
        </div>
        <div class="card-content">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae facere dignissimos deserunt suscipit autem mollitia, blanditiis fugiat amet tempora sed aliquid non id, veniam repudiandae beatae est laboriosam voluptatum. Sunt.
        </div>
      </div>
    </div>
  </div>
  <div class="row bg-dark mt-3 br-7 pl-3 pb-3">
    <div class="col-3">
      <div class="card dark">
        <div class="background"></div>
        <div class="card-icon">
          <div class="wrap">
            <i class="fas fa-shield-alt"></i>
          </div>
        </div>
        <div class="card-title">
          Bu Bir Başlıktır
        </div>
        <div class="card-content">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae facere dignissimos deserunt suscipit autem mollitia, blanditiis fugiat amet tempora sed aliquid non id, veniam repudiandae beatae est laboriosam voluptatum. Sunt.
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="card dark">
        <div class="background"></div>
        <div class="card-icon">
          <div class="wrap">
            <i class="fas fa-money-bill-alt"></i>
          </div>
        </div>
        <div class="card-title">
          Bu Bir Başlıktır
        </div>
        <div class="card-content">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae facere dignissimos deserunt suscipit autem mollitia, blanditiis fugiat amet tempora sed aliquid non id, veniam repudiandae beatae est laboriosam voluptatum. Sunt.
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="card dark">
        <div class="background"></div>
        <div class="card-icon">
          <div class="wrap">
            <i class="fas fa-male"></i>
          </div>
        </div>
        <div class="card-title">
          Bu Bir Başlıktır
        </div>
        <div class="card-content">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae facere dignissimos deserunt suscipit autem mollitia, blanditiis fugiat amet tempora sed aliquid non id, veniam repudiandae beatae est laboriosam voluptatum. Sunt.
        </div>
      </div>
    </div>
  </div>
</div>

* {
  font-family: "Dosis";
  font-weight: 500;
}

.container {
  margin-top: 3rem;
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.row {
  display: flex;
  flex-direction: row;
}
.col-3 {
  flex: 0 0 30%;
  margin-right: 3%;
}
.bg-dark {
  background: hsl(266, 100%, 38%);
}
.mt-3 {
  margin-top: 3rem;
}
.mb-5 {
  margin-bottom: 5rem;
}

.br-7 {
  border-radius:7px;
}
.pl-3 {
  padding-left:3rem;
}
.pb-3 {
  padding-bottom:3rem;
}

.card {
  border: 2px solid hsl(266, 100%, 38%);
  border-radius: 7px;
  padding: 1rem;
  position: relative;
  cursor: default;
  margin-top: 4rem;
      color: hsl(266, 100%, 38%);
  
  & > * {
    position: relative;
    z-index: 1;
  }
  
  &.dark {
    border: 2px solid #fff;
    color: #fff;
    & .background {
      background: #000;
    }
    &::before {
      background: rgba(255,255,255,1);
    }

    &:hover {
      color: hsl(266, 100%, 38%);
    }

    & .card-icon {
      & .wrap {
        background: hsl(266, 100%, 38%);
        color: #fff;
      }
    }
  }

  & .background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    z-index: -1;
  }

  &::before {
    content: "";
    width: 0%;
    height: 100%;
    position: absolute;
    border-radius: 0 50% 50% 0;
    top: 0;
    left: 0;
    z-index: 0;
    transition: 0.3s;
    background: hsl(266, 100%, 38%);
  }
  &:hover {
    color: #fff;
    &::before {
      border-radius: 0;
      width: 100%;
    }
  }

  & .card-icon {
    font-size: 2.5rem;
    margin-bottom: .75em;
    & .wrap {
      background: #fff;
      width: 1.7em;
      height: 1.7em;
      text-align: center;
      border-radius: 50%;
      position: absolute;
      margin-top: -1.3em;
      color: hsl(266, 100%, 38%);
      top: 0;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
      & i {
        margin-top: .3em;
      }
    }
  }
  
  
  & .card-title {
    font-size: 1.75rem;
    text-align: center;
    margin-bottom: .75em;
  }
  
  & .card-content {
    padding-left: 1em;
    padding-right: 1em;
    text-align: justify;
  }
}

View Compiled

This Pen is owned by Ömer Aytekin on CodePen.

See more by @omeraytekin on CodePen

External CSS

External JavaScript

This Pen doesn't use any external JavaScript resources.