Premium Post

This is the content

This is below the snippet.

<div class="profile-card loading">
  <div class="cover-wrapper skeleton"></div>
  <div class="avatar-wrapper skeleton"></div>
  <div class="profile-details">
    <p class="user-name skeleton"></p>
    <p class="user-title skeleton"></p>
    <div class="separator"></div>
    <p class="user-about skeleton"></p>
  </div>
  <div class="social-handles-wrapper skeleton">
    <a href="#" class="icon bi bi-instagram"></a><a href="#" class="icon bi bi-instagram"></a><a href="#" class="icon bi bi-instagram"></a>
    <a href="#" class="icon bi bi-twitter-x"></a>
    <a href="#" class="icon bi bi-facebook"></a>
    <a href="#" class="icon bi bi-youtube"></a>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #ededed;
}

.profile-card {
  max-width: 400px;
  background-color: #fff;
  width: 100%;
  display: grid;
  border-radius: 10px;
  overflow: hidden;
  font-family: "Baloo Bhai 2";
}

.skeleton {
  background-color: #e0e0e0;
  background-image: linear-gradient(90deg, #e0e0e0 0%, #cecece 50%, #e0e0e0 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.cover-wrapper {
  height: 210px;
  position: relative;
  border-radius: 0 0 20% 20%;
  overflow: hidden;
}

.profile-card img {
  width: 100%;
  height: 100%;
}

.cover-wrapper img {
  object-fit: cover;
}

.avatar-wrapper {
  height: 150px;
  width: 150px;
  margin: auto;
  transform: translateY(-50%);
  border-radius: 50%;
  padding: 4px;
  background-color: white;
  box-shadow: 0px 0px 8px 0px #00000038;
  margin-bottom: -75px;
  overflow: hidden;
}

.avatar-wrapper img {
  object-fit: contain;
  border-radius: 50%;
}

.profile-details {
  text-align: center;
  line-height: 1.4;
}

.user-name {
  font-size: 22px;
  font-weight: bold;
  margin-top: 5px;
}

.user-name.skeleton {
  width: 30%;
  height: 25px;
  margin: 10px auto;
  border-radius: 5px;
}

.user-title {
  color: #e20909;
}

.user-title.skeleton {
  width: 50%;
  height: 15px;
  margin: 10px auto;
  border-radius: 5px;
}

.separator {
  background: linear-gradient(273deg, white, #215eae, white);
  width: 70%;
  height: 1px;
  margin: 10px auto 20px;
}

.loading a,
.loading .separator {
  visibility: hidden;
  opacity: 0;
}

.user-about {
  font-size: 14px;
  padding: 0 15px;
  margin-top: 10px;
}

.user-about.skeleton {
  width: 90%;
  height: 50px;
  margin: 10px auto;
  border-radius: 2px
}

.social-handles-wrapper {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 15px 0;
}

.social-handles-wrapper.skeleton {
  width: 50%;
  height: 30px;
  margin: 10px auto;
  border-radius: 5px
}

.icon {
  color: white;
  width: 30px;
  height: 30px;
  text-align: center;
  align-content: center;
  border-radius: 5px;
  font-size: 15px;
}

.icon:hover {
  filter: brightness(0.9);
}

.icon::before {
  vertical-align: middle;
}

.bi-instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.bi-facebook {
  background: #215eae;
}

.bi-twitter-x {
  background: black;
}

.bi-youtube {
  background: #FF0000;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

const userData = {
  userName: "John Doe",
  userTitle: "Web Developer",
  userAbout: "Lorem ipsum dolor sit amet consectetu adipisicing elit. Fuga praesentium cupiditate hic, magnam at a.",
  profileUrl: "Assets/profile.png",
  coverUrl: "Assets/cover.jpg"
}
const userNameBox = document.querySelector(".user-name");
const userTitleBox = document.querySelector(".user-title");
const userAboutBox = document.querySelector(".user-about");
const coverWrapper = document.querySelector(".cover-wrapper");
const profileWrapper = document.querySelector(".avatar-wrapper");

const profileImg = document.createElement("img");
profileImg.src = userData.profileUrl;
const coverImg = document.createElement("img");
coverImg.src = userData.coverUrl

setTimeout(() => {
  insertUserDetails()
  document.querySelector(".profile-card").classList.remove("loading")
  removeSkeleton();
}, 3000);

const insertUserDetails = () => {
  userNameBox.innerHTML = userData.userName;
  userTitleBox.innerHTML = userData.userTitle;
  userAboutBox.innerHTML = userData.userAbout;
  coverWrapper.append(coverImg);
  profileWrapper.append(profileImg);
}

const removeSkeleton = () => {
  document.querySelectorAll(".skeleton").forEach((elem) => {
    elem.classList.remove("skeleton")
  })
}