Jodi sig code

[dohtml]
<style>
body{
  background: #ddd;
}

#jodi-sig{
  position: relative;
  margin: 10px auto;
  overflow: hidden;
  width: 500px;
  height: 200px;
  border: 3px solid #fff;
}

#jodi-sig .sig{
  position: relative;
  width: 500px;
  height: 200px;
  top: 0px;
  left: 0px;
  transform: scale(1);
  transition: 0.3s ease-in 0.5s;
  background: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/fab468e6-2d26-4590-ad14-2403b0f2c0e3/ddd1dqx-42be126b-3dfc-4983-a512-58cc6bd2418c.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvZmFiNDY4ZTYtMmQyNi00NTkwLWFkMTQtMjQwM2IwZjJjMGUzXC9kZGQxZHF4LTQyYmUxMjZiLTNkZmMtNDk4My1hNTEyLTU4Y2M2YmQyNDE4Yy5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.hYp-iko7ilY2D5zYYbgyLKnNVTst0KDfy7x2OlUiiWw);
}

#jodi-sig:hover .sig{
  transition: 0.3s ease-in 0s;
  transform: scale(1.2);
}

#jodi-sig .base{
  position: absolute;
  width: 500px;
  height: 200px;
  background: #000;
  top: 0px;
  left: 0px;
  opacity: 0;
  transition: 0.3s ease-in 0.5s;
}

#jodi-sig:hover .base{
  transition: 0.3s ease-in 0s;
  opacity: 0.9;
}

#jodi-sig .left{
  position: absolute;
  width: 200px;
  height: 200px;
  background: transparent;
  top: -200px;
  left: 0px;
  transition: 0.5s ease-in 0s;
}

#jodi-sig:hover .left{
  transition: 0.5s ease-in 0.3s;
  top: 0px;
}

#jodi-sig .right{
  position: absolute;
  width: 300px;
  height: 200px;
  background: transparent;
  bottom: -200px;
  right: 0px;
  transition: 0.5s ease-in 0s;
}
#jodi-sig:hover .right{
  transition: 0.5s ease-in 0.3s;
  bottom: 0px;
}

#jodi-sig .deco{
  position: absolute;
  top: -10px;
  left: -10px;
  opacity: 0;
  transition: 0.3s ease-in 0s;
}

#jodi-sig:hover .deco{
  transition: 0.3s ease-in 0.5s;
  opacity: 0.12;
}

#jodi-sig .df{
  font-size: 230px;
  color: #fff;
}

#jodi-sig .icon{
  position: absolute;
  width: 100px;
  height: 100px;
  background: transparent;
  border: 2px solid #ea9b41;
  top: 22px;
  left: 50px;
  border-radius: 20px;
}
#jodi-sig .icon img{
  width: 92px;
  height: 92px;
  border-radius: 15px;
  margin: 4px;
}

#jodi-sig .title{
  position: absolute;
  width: 100px;
  top: 139px;
  left: 50px;
  text-align: left;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 17.5px;
  line-height: 22px;
  color: #eee;
}

#jodi-sig .bullet{
  position: absolute;
  width: 10px;
  height: 10px;
  top: 31px;
  left: 10px;
  border-radius: 100px;
  background: rgb(217,163,64);
  background: linear-gradient(90deg, rgba(217,163,64,1) 0%, rgba(199,12,0,1) 0%, rgba(224,100,53,1) 0%, rgba(244,214,79,1) 100%);
}

#jodi-sig .statusbox{
  position: absolute;
  width: 225px;
  height: 55px;
  top: 25px;
  left: 35px;
  text-align: left;
  font-family: Poppins;
  font-weight: 700;
  font-size: 11px;
  line-height: 22px;
  text-transform: uppercase;
  color: #eee;
}

#jodi-sig .textbox{
  position: absolute;
  width: 225px;
  height: 55px;
  background: transparent;
  top: 63px;
  left: 10px;
  text-align: justify;
  font-family: Poppins;
  font-weight: 400;
  font-size: 9px;
  line-height: 14px;
  letter-spacing: 0.1px;
  color: #ccc;
  overflow: auto;
  padding-right: 12px;
}

#jodi-sig .links{
  position: absolute;
  width: 290px;
  height: 36px;
  bottom: 0px;
  right: 0px;
  border-radius: 20px 0px 0px 0px;
  padding-top: 18px;
  background: rgb(217,163,64);
  background: linear-gradient(90deg, rgba(217,163,64,1) 0%, rgba(199,12,0,1) 0%, rgba(224,100,53,1) 0%, rgba(244,214,79,1) 100%);
}

#jodi-sig a{
  text-decoration: none;
}

#jodi-sig .sf{
  display: inline-block;
  color: #fff;
  font-size: 17px;
  margin-left: 17px;
  -webkit-transform: scale(1);
  transform: scale(1);
  transition: 0.2s;
}
#jodi-sig .sf:hover{
  transition: 0.2s;
  color: #000;
  -webkit-transform: scale(1.4);
  transform: scale(1.3);
}

#jodi-sig ::-webkit-scrollbar {
  width: 7px;
}

#jodi-sig ::-webkit-scrollbar-track {
  background: transparent;
  border: 1px solid #ea9b41;
  border-radius: 50px;
}

#jodi-sig ::-webkit-scrollbar-thumb {
  border-radius: 50px;
  background: rgb(217,163,64);
  background: linear-gradient(180deg, rgba(217,163,64,1) 0%, rgba(199,12,0,1) 0%, rgba(224,100,53,1) 0%, rgba(244,214,79,1) 100%);
}
</style>

<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">

<center>
<div id="jodi-sig">

  <div class="sig"></div>
  <div class="base"></div>

    <div class="left">
        <div class="deco">
          <span class="df sf-leaf-1-o">
        </div>

        <div class="icon">
          <a href="https://shadowplayers.jcink.net/index.php?showuser=95" title="Hanie ©"><img src="https://via.placeholder.com/100x100"></a>
        </div>
        <div class="title">Short title here</div>
    </div>

    <div class="right">
        <div class="bullet"></div>
        <div class="statusbox">open for request</div>

        <div class="textbox">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a lectus tempus, aliquet nulla eget, pellentesque tellus. Maecenas lobortis in lectus quis sodales. Aenean pulvinar urna rhoncus, luctus diam in, venenatis massa.
        </div>

        <div class="links">
             <a href="#" title="Link 1"><span class="sf sf-seashell-o"></span></a>
             <a href="#" title="Link 2"><span class="sf sf-ice-cream-o"></span></a>
             <a href="#" title="Link 3"><span class="sf sf-anchor-o"></span></a>
             <a href="#" title="Link 4"><span class="sf sf-pineapple-o"></span></a>
             <a href="#" title="Link 5"><span class="sf sf-watermelon-o"></span></a>
             <a href="#" title="Link 6"><span class="sf sf-ladybug-o"></span></a>
        </div>
    </div>

</div>
</center>
[/dohtml]