sdfg

<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"> 

@import url(https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400&display=swap);
@import url(https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css);

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

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: "https://i.ibb.co/N7Kkmr1/profile.png",
    coverUrl: "https://i.ibb.co/Fmp3jvj/cover.jpg"
}
const userNameBox = document.querySelector(".user-name");
const userTitleBox = document. querySelector(".user-title");
const userAboutBox = document.querySelector(".user-about");