karta postaci #001

<style>
@font-face {
font-family:"UIcons";
src:url("https://dl.dropboxusercontent.com/s/yspvz5brxawg79w/uicons-regular-rounded.woff");
format("woff");
}

:root {
/*-można zmienić na własne kolorki, zmieniamy tylko te frag. > #xxxxxx-*/
  --byzantium: #783870ff;
  --lilac-luster: #b897abff;
  --black-shadows: #bdb2bdff;
  --byzantium-2: #701354ff;
  --old-lavender: #6b697aff;
  --fonti: 'Quicksand', sans-serif;
/*-zdjęcie główne, przed najachaniem kursorem na karte-*/
  --zdj: url(adres-url);
}

#top {
  background: var(--old-lavender);
  width: 45%;
  padding: 30px 0;
  border-radius: 8px;
  overflow: hidden;
}

.text1 {
  display: inline-block;
  width: 50%;
  position: relative;
  right: -5%;
  color: #eee;
  font-family: 'arial';
  font-size: 12px;
  line-height: 1.4;
}

.ico:before {
  content: "\f1d1";
  font-family: 'UIcons';
  position: relative;
  display: inline-block;
  padding: 46px;
  margin: -1em 0;
  font-size: 42px;
  border-radius: 100%;
  color: var(--byzantium-2);
  background: var(--black-shadows);
}

#bottom {
  position: relative;
  top: 1em;
  background: var(--old-lavender);
  width: 45%;
  height: 35vh;
  padding: 30px 0;
  border-radius: 8px;
  overflow: hidden;
}

#bottom .bg {
  position: relative;
  top: -2em;
  left: -2em;
  background: var(--zdj);
  background-size: 100%;
  width: 122%;
  height: 122%;
  overflow: hidden;
  z-index: 99;
  transition: all .4s;
}

#bottom:hover .bg {
  filter: blur(2px) brightness(90%) contrast(40%);
  transition: all .4s;
}

.text2,  .lista, .name, .ikona1, .ikona {
  position: absolute;
  z-index: 99999;
}

/*- DLUGI TEKST -*/

.text2 {
  top: 1em;
  left: -20em;
  width: 20vw;
  height: 38vh;
  overflow: hidden;
  background:#efefef;
  border-radius: 0 20px 20px 0;
  transition: all .6s;
}

#bottom:hover .text2 {
  left: 1em;
  transition: all .6s;
}

.text2 h2 {
  text-align: center;
  font-family: var(--fonti);
  padding: 32px 0;
  color: var(--byzantium);
  border-left: 3px solid var(--byzantium);
}

.t-content {
  text-align: justify;
  font-family: 'arial';
  font-size: 14px;
  line-height: 1.4;
  position: relative;
  top: 1em;
  padding: 0 16px 16px 16px;
  width: 16vw;
  height: 31vh;
  overflow: auto;
  margin-bottom: 2em;
}

.t-content::-webkit-scrollbar {
  background-color: rgba(255, 255, 255, .001);
  width: 4px;
  height: 4px;
}

.t-content::-webkit-scrollbar-thumb {
  background-color: var(--byzantium);
  border-radius: 6px;
}

/*- IMIE I NAZWISKO -*/
.name {
  background: var(--old-lavender);
  top: -15em;
  right: 1em;
  border-radius: 0 0 20px 20px;
  width: 45%;
  max-height: 25%;
  min-height: 25%;
  line-height: 1.2;
  font-family: var(--fonti);
  font-size: 20px;
  color: var(--black-shadows);
  text-shadow: 2px 2px 0 rgb(0, 0, 0, .1);
  transition: all .6s;
}

#bottom:hover .name {
  top: 1em;
  transition: all .6s;
  tranisition-delay: .3s;
}

/*- IKONA -*/
.ikona1 {
  top: 8em;
  right: -20em;
  width: 45%;
  height: 25%;
  background-image: url(https://funkyimg.com/i/34rbr.gif);
  background-size: 100%;
  background-position: center center;
  border-radius: 20px 0 0 20px;
  transition: all .6s;
}

#bottom:hover .ikona1 {
  right: 1.25em;
  transition: all .6s;
  transition-delay: .1s;
}

/*- LISTA -*/
.lista {
  top: 30em;
  right: 1.65em;
  width: 45%;
  height: 27%;
  background: var(--black-shadows);
  border-radius: 20px 20px 0 0;
  font-family: 'arial';
  font-size: 12px;
  overflow: hidden;
  transition: all .6s;
}

.lista ul li {
  list-style: none;
  margin-left: -25px;
}

.lista li {
  box-shadow: 0 -1px 0 inset var(--old-lavender);
  padding: 0;
  width: 110%;
  margin: 0 0 1em 0;
  position: relative;
  left: -.5em;
}

.lista u {
  text-decoration: none;
  background: var(--old-lavender);
  text-transform: uppercase;
  font-size: 10px;
  padding: 1px 3px;
  color: var(--black-shadows);
  float: left;
  display: inline-block;
  width: 50%;
  letter-spacing: .5px;
}

.l-cont {
  position: relative;
  top: 1em;
  display: block;
  width: 90%;
  height: 80%;
  overflow: auto;
}

.l-cont::-webkit-scrollbar {
  background-color: rgba(255, 255, 255, .001);
  width: 4px;
  height: 4px;
}

.l-cont::-webkit-scrollbar-thumb {
  background-color: var(--byzantium);
  border-radius: 6px;
}

#bottom:hover .lista {
  top: 19.5em;
  transition: all .6s;
  transition-delay: .2s;
}

#cre {
  display: block;
  position: relative;
  top: 3em;
  width: 10%;
  z-index: 99999;
  padding: 2px 8px;
  text-transform: uppercase;
  font-size: 6px;
  background: rgba(0, 0, 0, .1);
  letter-spacing: 4px;
  font-family: 'arial';
  color: var(--byzantium) !important;
  transition: .4s ease-in-out;
}

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

#cre a {
  color: var(--byzantium) !important;
  text-decoration: none;
}
</style>

<!-- FONTS -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap" rel="stylesheet">

<!-- KOD - KARTA POSTACI #001 -->
<center>
    <div id="top">
    <div class="ico"/>
  <div class="text1">
    Phasellus consequat erat a justo laoreet, eu egestas risus accumsan. Nam non justo nibh. Duis consequat turpis ut egestas feugiat.
  </div>
  </div>
</center>

<center>
<div id="bottom">
    <img class="bg" src="https://funkyimg.com/i/3a1RS.jpg"/>
  <div class="name"><h2>Imię i nazwisko</h2></div>
  <div class="text2">
    <div class="t-content">
   <h2>Charakter</h2>Fusce non ante ut sapien scelerisque iaculis in ac elit. Praesent pretium arcu et erat interdum mollis. Aenean egestas arcu id purus tempus congue. Praesent ullamcorper eu tortor non suscipit. Nunc nec nisi a ex dapibus dictum sagittis ac nulla. Curabitur eleifend mollis pretium. Sed hendrerit aliquet semper. Morbi nec dapibus tortor.
    <h2>Przyjaciele</h2>Maecenas auctor condimentum eros at condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Aliquam efficitur ultrices cursus. In ut justo cursus, elementum libero a, molestie sem.
  <h2>Związki</h2>Nullam ultricies leo a eros vehicula, nec volutpat turpis fermentum. Nunc aliquam magna eu convallis hendrerit. Vestibulum dictum fermentum pulvinar.Aenean consectetur ipsum nec eros efficitur euismod. Praesent tristique felis ut metus rhoncus viverra. Etiam tincidunt sit amet dui porta consectetur. Vestibulum vitae quam sit amet turpis congue porta. Donec faucibus sodales libero ut volutpat. Suspendisse vulputate risus lorem, tincidunt placerat erat volutpat id.
    <h2>Hobby</h2>Mauris fermentum euismod odio, et dapibus urna hendrerit sed. Duis vel felis eros. Morbi congue rhoncus lobortis. Duis pulvinar sollicitudin dolor id tincidunt. Nam venenatis, ligula at porta posuere, lectus lacus tincidunt neque, a ultrices mi augue non nunc. Vivamus tristique urna quam, eu gravida dui viverra ac. Donec lacinia congue ipsum.
Curabitur id ligula nec nisl fermentum euismod. Aenean felis nunc, eleifend non ligula at, congue efficitur sapien. Nam iaculis hendrerit pulvinar.</div></div>
  <div class="ikona1"></div>
  <div class="lista">
    <div class="l-cont">
    <ul>
      <li><u>Imię</u> Alice</li>
      <li><u>Nazwisko</u> Smith</li>
      <li><u>Wiek</u> 22 lata</li>
      <li><u>Znak zodiaku</u> Skorpion</li>
      <li><u>Praca</u> Kucharka</li>
    </ul>
  </div>
    </div>
  </div>
     <div id="cre"><a href="https://xvenom-codes.blogspot.com/"><span>&#169;</span>xvenom</a></div>
</center>