Simple User Card #1

index.html

<div class="card">
  <img class="avatar" src="https://pbs.twimg.com/profile_images/1610149927455178752/JuWuMNUw_400x400.jpg">
  <div class="follow-btn" onclick="followBtn()">Follow</div>
  <p class="name">Frank Eno</p>
  <p class="username">@xsgames</p>
  <p class="info">Game Developer, Web designer<br>Guitar player, father of 4</p>
  <div class="bottom-data">9.7K <span>Followers</span> • 240 <span>Following</span> • <span>Since May 2018</span>
</div>

script.js

function followBtn() {
  if($(".follow-btn").text() == 'Follow'){
     $(".follow-btn").text('Unfollow');
     $(".follow-btn").addClass('active');
  } else {
    Swal.fire({
      text: 'Are you sure you want to Unfollow @frankeno?',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#121212',
      confirmButtonText: 'Unfollow',
   }).then((result) => {
      if (result.value) {
        $(".follow-btn").text('Follow');
        $(".follow-btn").removeClass('active');
   }});
  } // ./ IF
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

simple-user-card-1.markdown

Simple User Card #1

A Pen by Frank Eno on CodePen.

License.

style.css

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;1,300&display=swap');
body { background: aliceblue; font-family: 'Nunito'; }
.card {position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); background: #fff; border-radius: 12px; box-shadow: 2px 2px 22px #c1c1c1; padding: 30px; width: 400px; }
.avatar { border-radius: 999px; width: 68px; margin-top: 26px 0px 0px 20px;  } 
.avatar:hover { cursor:pointer; animation:wobble-vertical-right .8s linear both} @keyframes wobble-vertical-right{0%,100%{transform:translateY(0) rotate(0);transform-origin:50% 50%}15%{transform:translateY(-30px) rotate(6deg)}30%{transform:translateY(15px) rotate(-6deg)}45%{transform:translateY(-15px) rotate(3.6deg)}60%{transform:translateY(9px) rotate(-2.4deg)}75%{transform:translateY(-6px) rotate(1.2deg)}}
.follow-btn { border-radius: 99px; padding: 8px 20px; background: #121212; color: #fff; float: right; font-size: 13px; margin: 20px 22px 0px 0px; transition: .3s ease; }
.active { background: #f1f1f1; color: #121212; }
.follow-btn:hover { cursor: pointer; background: #ddd; color: #121212; }
.name { font-weight: 600; font-size: 21px; margin-top: 8px; }
.username { font-size: 14px; color: #818181; margin-top: -22px; }
.info { color: #111; font-weight: 600; font-size: 14px; }
.bottom-data { font-weight: 600; color: #515151; font-size: 14px; margin-top: 30px; }
.bottom-data span { color: gray; }
.swal2-container:not(.swal2-top):not(.swal2-top-start):not(.swal2-top-end):not(.swal2-top-left):not(.swal2-top-right):not(.swal2-center-start):not(.swal2-center-end):not(.swal2-center-left):not(.swal2-center-right):not(.swal2-bottom):not(.swal2-bottom-start):not(.swal2-bottom-end):not(.swal2-bottom-left):not(.swal2-bottom-right):not(.swal2-grow-fullscreen) > .swal2-modal { border-radius: 22px; }
.swal2-styled.swal2-confirm, .swal2-styled.swal2-cancel  { font-family: 'Nunito';  font-weight: 600; }