Skip to content

Instantly share code, notes, and snippets.

@ruanbekker
Created April 21, 2023 12:51
Show Gist options
  • Save ruanbekker/23bcc1bc234a928ced5272e4ccbada19 to your computer and use it in GitHub Desktop.
Save ruanbekker/23bcc1bc234a928ced5272e4ccbada19 to your computer and use it in GitHub Desktop.
Simple User Card #1
<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>
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
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
@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; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment