miniprofile #001 - code

<style>
/*-w/o use-*/
#mipro {
  top: 0;
  position: relative;
}
/*-- kod napisany przez xvenom
(xvenom-codes.blogspot.com)--*/
/*-kod-*/
/*-kolory można zmieniać-*/
:root {
  --col1: #0F8B8D; /*ciemny cyjan*/
  --col2: #EC9A29; /*ciepły żółty*/
  --col3: #A8201A; /*czerwony*/
}

/*-kod profilu-*/
#mipro {
  display: block;
  font-family: 'arial';
  background: transparent;
  width: 220px;
  height: 430px;
  overflow: hidden;
  background: #fff;
  transition: all .4s ease-in-out;
  z-index: 99;
}

#mipro:hover .bg {
opacity: .5;
  transition: all .4s ease-in-out;
}

#mipro .bg {
  opacity: 1;
  position: absolute;
  top: 0;
  display: block;
  background-image: url(https://funkyimg.com/i/39Ujc.png);
  background-size: cover;
  background-position: center center;
  width: 220px;
  height: 440px;
z-index: 1;
transition: .4s ease-in-out;
  }

.ikonka, .short, .opis {
  display: block;
  z-index: 99999;
}

#mipro .ikonka {
  width: 100px;
  height: 100px;
  background: url(https://funkyimg.com/i/38dk5.png);
  background-size: 100px;
  position: relative;
  top: .7em;
  left: -15em;
  transition: all .4s ease-in-out;
}

#mipro:hover .ikonka {
  left: -3em;
  transition: all .4s ease-in-out;
}

#mipro .short ul {
  list-style: none;
  margin-left: -15px;
  text-transform: uppercase;
  font-size: 10px;
}

#mipro .short li {
    margin: 1em 0;
  color: #444;
}

#mipro .shortie .lil {
  background: #ddd;
  padding: 1px 3px;
  border-radius: 3px;
}

#mipro .short {
  position: relative;
  top:0;
  right: -20em;
  width: 80%;
  background: #fff;
  color: #444 !important;
  padding: 10px 0;
  transform: skewX(-15deg);
  z-index: 99;
  transition: .4s ease-in-out;
}

#mipro:hover .short {
  right: -2em;
  transform: skewX(0deg);
  transition: .4s ease-in-out;
  transition-delay: .2s;
}

#mipro .opis {
  position: relative;
  top: 30em;
  left:0;
  font-family: 'arial';
  font-size: 12px;
  line-height: 1.4;
  height: 145px;
  background: var(--col3);
  width: 80%;
  color: #fff;
  overflow: auto;
  padding: 14px;
  text-align: justify;
  transition: .4s ease-in-out;
}

#mipro:hover .opis {
  top: 0;
  transition: .4s ease-in-out;
  transition-delay: .3s;

}

#mipro .opis::-webkit-scrollbar {
  background: #fff1;
  width: 2px;
  height: 2px;
}

#mipro .opis::-webkit-scrollbar-thumb {
  background: var(--col1);
}

#mipro:after {
  content:"";
  display: block;
  visibility: visible;
  width: 100px;
  height: 100px;
  border: 2px solid #fff;
  background: transparent;
  position: absolute;
  top: -2em;
  left: 9em;
  border-radius: 100%;
  z-index: 9;
  transition: .4s ease-in-out;
}

#mipro:hover:after {
  display: block;
  width: 80px;
  height: 80px;
  border: 2px solid #fff;
  background: var(--col3);
  position: absolute;
  top: 2em;
  left: 6em;
  border-radius: 100%;
  z-index: 9;
  transition: .4s ease-in-out;
}

#mipro:before {
  content:"";
  display: block;
  visibility: visible;
  width: 60px;
  height: 60px;
  border: 2px solid #fff;
  background: transparent;
  position: absolute;
  top: 17em;
  left: -2em;
  border-radius: 100%;
  z-index: 9;
  transition: .4s ease-in-out;
}

#mipro:hover:before {
  display: block;
  width: 80px;
  height: 80px;
  border: 2px solid #fff;
  background: var(--col1);
  position: absolute;
  top: 9em;
  left: 1em;
  border-radius: 100%;
  z-index: 9;
  transition: .4s ease-in-out;
}

#cre {
  display: block;
  z-index: 9999;
  position: absolute;
  top: .4em;
  right: .4em;
  padding: 2px 8px;
  text-transform: uppercase;
  font-size: 6px;
  background: #fff;
  letter-spacing: 1px;
  transition: .4s ease-in-out;
  opacity: 0;
}

#cre span {
  font-size: 8px;
}

#cre a {
  text-decoration: none;
  color: var(--col3);
}

#mipro:hover #cre {
  transition: .4s ease-in-out;
  opacity: .8;
}
</style>

<center>
<div id="mipro">
<div class="ikonka"></div>
<div class="short">
  <ul class="shortie">
  <li><span class="lil">zaimki:</span> she/her</li>
  <li><span class="lil">wiek:</span> 24 lata</li>
  <li><span class="lil">zajęcie:</span> kelnerka</li>
  <li><span class="lil">kraj:</span>irlandia</li>
  </ul>
</div>
<div class="opis">
  Sed aliquet diam quis dolor ullamcorper consectetur. Aenean blandit vestibulum sapien euismod tincidunt. Praesent magna est, accumsan vel diam a, accumsan pharetra nulla. Suspendisse non neque suscipit, vestibulum enim a, lobortis nunc. Nam in ex dui. Nunc est purus, auctor quis nisi id, feugiat ultrices nibh. Vivamus convallis lectus a lorem auctor consequat. Fusce vitae consequat arcu, fermentum imperdiet sem. Aenean ut lectus cursus, rhoncus urna a, facilisis eros.
</div>
   <div class="bg"></div>
<div id="cre"><a href="https://xvenom-codes.blogspot.com/"><span>&#169;</span>xvenom</a></div>
</div>
  </center>