OneSpan Logo

index.html

<div class="container">
  <div class="onespan-logo">
    <div class="white-circle">
    </div>
  </div>

  <p class="onespan-text">OneSpan </p>

</div>

onespan-logo.markdown

OneSpan Logo

A Pen by Arjun Biju on CodePen.

License.

style.css

@import url("https://fonts.cdnfonts.com/css/montserrat");

.container {
  display: flex;
  align-items: center;
  font-family: montserrat, sans-serif;
  justify-content: center;
  gap: 1rem;
}

.onespan-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-image: linear-gradient(to bottom, #52c8bc, #52c8bc, #047041);
}

.onespan-logo::after {
  content: "";
  position: absolute;
  height: 15px;
  width: 30px;
  background-color: black;
  top: 120px;
  border-radius: 50%;
  filter: blur(20px);
}

.white-circle {
  height: 50%;
  width: 50%;
  background-color: white;
  border-radius: 50%;
}

.onespan-text {
  font-size: 70px;
  font-weight: 500;
}