shortlyst

custom pricing page

by oktaviardi pratama

HTML

<div style="width: 500px;">
  <div class="card-bubble">
    <span class="shoutout">
      Shortlyst makes life easier in identifying high-quality candidates and reach out to them in an effortless manner.
    </span>
    <div class="bubble-profile-info">
        <img decoding="async" loading="lazy" width="71" height="71" src="https://www.shortlyst.ai/wp-content/uploads/2023/02/qerja-user.png" class="attachment-full size-full wp-image-4086" alt="">
      <div class="info-wrap">
        <span>
         <b>Ozbay Memet</b>
        </span>
        <span class="info-job-title">
          People & Culture Manager at Quess
        </span>
      </div>
    </div>
  </div>
</div>

CSS

.card-bubble {
  padding: 20px 20px 20px 30px;
  border: solid 2px #000;
  box-shadow: 5px 5px 0px 0px #000000;
  border-radius: 7px;
}

.card-bubble > .shoutout{
display: block;
margin-bottom:20px;
font-family: Public Sans;
font-size: 14px;
font-weight: 400;
line-height: 21px;
letter-spacing: 0px;
text-align: left;

}

.card-bubble .bubble-profile-info {
  display: flex;
  align-items: center;
}
.card-bubble p {
  margin-bottom:20px
}
.card-bubble .bubble-profile-info .info-wrap {
  padding-left:10px;
}
.card-bubble .bubble-profile-info > img {
  display:block;
}
.card-bubble .bubble-profile-info .info-wrap > span {
  display:block;
  font-family: Public Sans;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0px;
  text-align: left;
}
.card-bubble .bubble-profile-info .info-wrap > span.info-job-title {
  color: #747D8C;
}