<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <style media="screen">
  @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap");

* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}

html,
body {
height: 100%;
}

body {
background: #78c7ed;
font-family: sans-serif;
}

#dragable {
width: 21rem;
height: 21rem;
border: 0.2rem solid #0f2c65;
border-radius: 0.2rem;
position: absolute;
z-index: 9;
box-shadow: 2px 4px 18px rgba(0, 0, 0, 0.2);
transition: border-color 0.2s, box-shadow 0.2s;
}

#dragable.drag {
border-color: white;
box-shadow: 3px 6px 24px rgba(0, 0, 0, 0.5);
}

#dragable #dragzone {
width: 100%;
height: 100%;
cursor: move;
z-index: 10;
background-color: #0f2c65;
}



.wrapper .img-area,
.social-icons a{
border-radius: 10px;
backdrop-filter: blur(10px);
border: 2px solid rgba(255,255,255,0.1);
box-shadow: 0 0 40px rgba(8,7,16,0.6);
}

.wrapper{
position: relative;
width: 320px;
padding: 30px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

.wrapper .img-area{
height: 150px;
width: 150px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

.img-area .inner-area{
height: calc(100% - 25px);
width: calc(100% - 25px);
border-radius: 50%;
}

.inner-area img{
height: 100%;
width: 100%;
border-radius: 50%;
object-fit: cover;
}

.wrapper .name{
font-size: 23px;
font-weight: 500;
color: white;
margin: 10px 0 5px 0;
}

.wrapper .about{
color: #d0d1d7;
font-weight: 400;
font-size: 16px;
}

.wrapper .social-icons{
margin: 15px 0 25px 0;
}

.social-icons a{
position: relative;
height: 40px;
width: 40px;
margin: 0 5px;
display: inline-flex;
text-decoration: none;
border-radius: 50%;
}


.social-icons a i{
position: relative;
z-index: 3;
text-align: center;
width: 100%;
height: 100%;
font-size: 20px;
line-height: 35px;
}
.social-icons a:nth-last-child(1) i{
color: #13d151;
}
.social-icons a:nth-last-child(2) i{
color: #e6ba12;
}
.social-icons a:nth-last-child(3) i{
color: #1da9e9;
}
.social-icons a:nth-last-child(4) i{
color: #f23400;
}

  </style>
</head>
<body>
  <div id="dragable">
    <header id="dragzone">
      <div class="wrapper">
          <div class="img-area">
            <div class="inner-area">
              <img src="https://1.bp.blogspot.com/-NYPWByswrmg/YSKXi-CZiGI/AAAAAAAACZY/LtLeocLNtrkdb31nrCn6V0mkDRW-jhOUwCNcBGAsYHQ/s16000/img4.jpg" alt="">
            </div>
          </div>

          <div class="name">Monalisha Roy</div>
          <div class="about">
            I am a Profasonal Web Designer
       </div>
          <div class="social-icons">
            <a href="#" class="gl"><i class="fab fa-youtube"></i></a>
            <a href="#" class="facebook"><i class="fab fa-facebook"></i></a>
            <a href="#" class="insta"><i class="fab fa-google"></i></a>
            <a href="#" class="yt"><i class="fab fa fa-whatsapp"></i></a>

          </div>


        </div>
    </header>
  </div>



  <script type="text/javascript">
  const dragElement = (element, dragzone) => {
    let pos1 = 0,
      pos2 = 0,
      pos3 = 0,
      pos4 = 0;

    const dragMouseUp = () => {
      document.onmouseup = null;
      document.onmousemove = null;

      element.classList.remove("drag");
    };

    const dragMouseMove = (event) => {
      event.preventDefault();

      pos1 = pos3 - event.clientX;
      pos2 = pos4 - event.clientY;
      pos3 = event.clientX;
      pos4 = event.clientY;

      element.style.top = `${element.offsetTop - pos2}px`;
      element.style.left = `${element.offsetLeft - pos1}px`;
    };

    const dragMouseDown = (event) => {
      event.preventDefault();

      pos3 = event.clientX;
      pos4 = event.clientY;

      element.classList.add("drag");

      document.onmouseup = dragMouseUp;
      document.onmousemove = dragMouseMove;
    };

    dragzone.onmousedown = dragMouseDown;
  };

  const dragable = document.getElementById("dragable"),
    dragzone = document.getElementById("dragzone");

  dragElement(dragable, dragzone);

  </script>
</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.