Rotating dotted border

by Saksham Malhotra

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<div class="card">
  <div class="icon">
    <i class="fab fa-angular"></i>
  </div>
  <div class="heading">
    Angular
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque labore omnis odit, rem ab veniam modi nobis, quisquam illo, sequi est consectetur magni nisi ipsam doloremque! Repellat excepturi, deserunt.
  </div>
</div>

SCSS

@mixin center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

body {
  background-color: #576574;
  margin: 0;
  padding: 0;
  font-family: Arial;
  .card {
    @include center;
    width: 300px;
    box-shadow: 0px 0px 10px 3px rgba(50, 50, 50, 0.2);
    color: #2e86de;
    background-color:#FFF;
    padding: 30px;
    text-align: center;
    cursor: pointer;
  }
  .icon {
    font-size: 5em;
    border: 3px dotted #2e86de;
    height: 100px;
    width: 100px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(0deg);
    transition: 0.5s transform;
    i {
      transform: rotate(0deg);
      transition: 0.5s transform;
    }
  }
  &:hover .icon {
    transform: rotate(720deg);
  }
  &:hover .icon i {
    transform: rotate(-720deg);
  }
  .heading {
    font-size: 3em;
    padding: 20px;
    color:#333;
    text-transform: uppercase;
  }
  .text {
    text-align: justify;
    color:#444;
  }
}