karta postaci #002

<style>
:root {
/*-można zmienić na własne kolorki, zmieniamy tylko te frag. > #xxxxxx-*/
  --blue-bell: #b3a9d9ff;
  --persian-blue: #0439d9ff;
  --klein-blue: #032ca6ff;
  --egyptian-blue: #0339a6ff;
  --burnt-sienna: #f27a5eff;
/*-zdjęcia postaci-*/
  --img1: url(adres-url);
  --img2: url(adres-url);
  --img3: url(adres-url);
/*-glowne zdjęcie, widoczne przed najechaniem-*/
  --bg1: url(adres-url);
  --fonti: 'Sacramento', cursive;
}a, a:hover {
  text-decoration: none;
  transition: .4s;
}

body {
  background: #efefef;
}

#box {
  position: relative;
  display: block;
  width: 40vw;
  overflow: hidden;
  height: 54vh;
  background-color: #ddd;
}

#boxi1, #boxi2, .name {
  position: absolute;
  z-index: 99999;
  backface-visibility: hidden;
}

#box .bg1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--bg1);
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  transition: all .4s;
}

#box:hover .bg1 {
  transform: scale(1.5) rotate(-20deg);
  filter: blur(5px) grayscale(80%) brightness(100%) contrast(50%);
  transition: all .4s;
}

.name {
  opacity: 1;
  bottom: 1em;
  left: 2em;
  transition: all .4s;
}

.name h2 {
  color: var(--burnt-sienna);
  font-family: var(--fonti);
  font-size: 54px;
  font-weight: 400 !important;
  text-shadow: 1px 1px 0 #fff;
}

#box:hover .name {
  bottom: -1em;
  opacity: 0;
  transition: all .4s;
}

#boxi1 {
  position: absolute;
  left: 28.7em;
  background: var(--egyptian-blue);
  border-left: 4em solid var(--burnt-sienna);
  overflow: auto;
  width: 40vw;
  height: 54vh;
  opacity: 1;
  font-family: 'arial';
  font-size: 14px;
  transition: all .4s;
  transition-delay: .3s;
}

#box:hover #boxi1{
  left: -4em;
  transition: all .4s;
}

#boxi1::-webkit-scrollbar {
  background: var(--egyptian-blue);
  width: 5px;
  height: 4px;
}

#boxi1::-webkit-scrollbar-thumb {
  background: var(--blue-bell);
;
}

.lista {
  width: 90%;
  position: relative;
  left: -2em;
  text-align: justify;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
}

.lista ul li {
  list-style: none;
}

.lista u {
  text-align: center;
  display: inline-block;
  text-decoration: none;
  color: var(--egyptian-blue) !important;
  background: var(--blue-bell);
  width: 50%;
  margin-right: 1em;
  padding: 3px 0 !important;
}

.lista li {
  color: var(--blue-bell);
  box-shadow: 0 -3px 0 var(--blue-bell) inset;
  padding: 3px 0;
  width: 92%;
}

#boxi1 h2 {
  color: var(--blue-bell);
  font-family: var(--fonti);
  font-size: 44px;
  margin: .5em 0 0 0;
  position: relative;
  left: 0em;
  width: 100%;
  font-weight: normal;
  text-align: center;
}

.tekst1 {
  margin-right: 3em;
  padding: 20px;
  text-align: justify;
  color: #efefef;
}

#boxi2 {
  background: var(--persian-blue);
  position: absolute;
  left: 32.5em;
  background: var(--egyptian-blue);
  border-left: 4em solid var(--blue-bell);
  overflow: auto;
  width: 40vw;
  height: 54vh;
  opacity: 1;
  font-family: 'arial';
  font-size: 14px;
  transition: all .4s;
}

#boxi2:hover {
  left: -4em;
  transition: all .4s;
}

#boxi2::-webkit-scrollbar {
  background: var(--egyptian-blue);
  width: 5px;
  height: 4px;
}

#boxi2::-webkit-scrollbar-thumb {
  background: var(--blue-bell);
;
}

#boxi2 h2 {
  color: var(--burnt-sienna);
  font-family: var(--fonti);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .2);
  font-size: 36px;
  margin: .5em 0 0 0;
  position: relative;
  left: 0em;
  width: 100%;
  font-weight: normal;
  text-align: center;
}

.imgs {
  width: 96%;
  height: 50%;
  margin: 0;
}

.img1, .img2, .img3 {
  display: inline-block;
  width: 32%;
  height: 85%;
  position: relative;
  top: 1em;
  border-radius: 4px;
}

.img1 {
  background: var(--img1);
  background-size: 150%;
  background-position: center center;
  transition: all .4s;
  filter: grayscale(50%);
}

.img2 {
  background: var(--img2);
  background-size: 150%;
  background-position: center center;
  transition: all .4s;
  filter: grayscale(50%);
}

.img3 {
  background: var(--img3);
  background-size: 150%;
  background-position: center center;
  transition: all .4s;
  filter: grayscale(50%);
}

.img1:hover, .img2:hover, .img3:hover {
  background-size: 120%;
  transform: scale(1.1);
  z-index: 99999;
  filter: grayscale(0%);
  transition: .4s;
}

.sec1, .sec2, .sec3 {
  display: inline-block;
  width: 31%;
}

.sec1 ul li, .sec2 ul li, .sec3 ul li {
  list-style: none;
  margin-left: -2.8em;
}

.sec1 a, .sec2 a, .sec3 a {
  display: block;
  width: 94%;
  background: var(--blue-bell);
  margin: 0 0 .2em 0;
  padding: 4px 0;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 2px;
  color: #efefef;
}

.sec1 a:hover, .sec2 a:hover, .sec3 a:hover {
  background: var(--burnt-sienna);
  color: #fff;
}

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

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

#cre a {
  color: var(--burnt-sienna) !important;
  text-decoration: none;
}

</style>

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
<center>
<div id="box">
  <div class="name"><h2>Imię i nazwisko</h2></div>
  <div class="bg1"></div>
  <div id="boxi1">
    <div class="lista">
     <div class="l-cont">
      <ul>
      <li><u>Imię</u>Taehyung</li>
      <li><u>Nazwisko</u>Kim</li>
      <li><u>Wiek</u>22 lata</li>
      <li><u>Znak zodiaku</u>Skorpion</li>
      <li><u>Praca</u>Kucharz</li>
    </ul>
  </div>
    </div>
  <div class="tekst1">
    <div class="t-cont">
   <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>
  <div id="boxi2">
    <div class="imgs">
      <div class="img1"></div>
      <div class="img2"></div>
      <div class="img3"></div>
    </div>
    <div class="links">
      <div class="sec1">
        <h2>Sekcja 1</h2>
 <ul>
  <li><a href="#">Link1</a></li>
  <li><a href="#">Link2</a></li>
  <li><a href="#">Link3</a></li>
  <li><a href="#">Link4</a></li>
  <li><a href="#">Link5</a></li>
  <li><a href="#">Link6</a></li>
 </ul>
      </div>
      <div class="sec2">
        <h2>Sekcja 2</h2>
 <ul>
  <li><a href="#">Link1</a></li>
  <li><a href="#">Link2</a></li>
  <li><a href="#">Link3</a></li>
  <li><a href="#">Link4</a></li>
  <li><a href="#">Link5</a></li>
  <li><a href="#">Link6</a></li>
 </ul>
      </div>
      <div class="sec3">
        <h2>Sekcja 3</h2>
 <ul>
  <li><a href="#">Link1</a></li>
  <li><a href="#">Link2</a></li>
  <li><a href="#">Link3</a></li>
  <li><a href="#">Link4</a></li>
  <li><a href="#">Link5</a></li>
  <li><a href="#">Link6</a></li>
 </ul>
      </div>
    </div>
  </div>
</div>
</center>