𝐓𝐖𝐎

     Hello, wildlings!

  A very simple code with an image on the right and information on the left.
  Follow the dimensions of the image, otherwise, it won't fit properly.
  Feel free to change colors!

  Please do not steal this code.
  Leave the credit! <3 Happy Writing!

— — — — — — — — — — — — — —

<style>

@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Short+Stack&display=swap');

body {
cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_1280.png), auto;
background-color: #000;
}

::-webkit-scrollbar {
display: none;
}

::selection {
background: ;
color: white;
}

a {
text-decoration: none;
color: #000;
}

a:hover {
color: #ADACC1;
}

b {
color: #B1BDC6;
font-weight: bold;
}

i {
color: #BE6C79;
}

.wilder {
position: absolute;
bottom: 0px;
right: 5px;
}

.container {
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
height: 650px;
width: 800px;
background-color: #000;
}

.mainimg {
position: absolute;
height: 600px;
width: 375px;
top: 25px;
right: 25px;
background: url(https://placehold.co/375x600.png);
background-size: 100%;
border: 1px solid #7D86AD;
border-radius: 5px 20px 20px 5px;
box-shadow: #7D86AD 0px 0px 20px;
}

.name {
position: relative;
font-family: 'anton';
font-size: 50px;
font-style: italic;
margin-top: 5px;
margin-bottom: 5px;
left: 35px;
top: 445px;
text-shadow: 2px 2px 2px #7D86AD;
color: #EEEDEE;
letter-spacing: -1px;
z-index: 1;}

.stats {
position: absolute;
top: 25px;
left: 25px;
height: 230px;
width: 350px;
background: #7D86AD;
border: 1px solid #7D86AD;
border-radius: 20px 5px 5px 20px;
box-shadow: #7D86AD 0px 0px 20px;
padding: 10px;
overflow: auto;
}

.stats h1 {
text-align: right;
font: 20px anton;
padding: 0px;
padding-right: 50px;
border-radius: 5px;
color: #EEEDEE;
font-style: italic;
margin-top: 0;
}

.stats li {
display: block;
background: #575D79;
box-shadow: #EEEDEE 0px 0px 5px;
opacity: 0.8;
padding: 8px;
margin: 3px;
border-radius: 20px 5px 5px 5px;
font: 13px short stack;
text-align: right;
color: #F1DED6;
font-weight: bold;
}

.hc {
position: absolute;
top: 280px;
left: 25px;
height: 150px;
width: 350px;
background: #7D86AD;
border: 1px solid #7D86AD;
border-radius: 20px 5px 5px 20px;
box-shadow: #7D86AD 0px 0px 20px;
padding: 10px;
overflow: auto;
}

.hc h1 {
text-align: right;
font: 20px anton;
padding: 0px;
padding-right: 50px;
border-radius: 5px;
color: #EEEDEE;
font-style: italic;
margin-top: 0;
}

.hc li {
display: block;
background: #575D79;
box-shadow: #EEEDEE 0px 0px 5px;
opacity: 0.8;
padding: 8px;
margin: 3px;
border-radius: 20px 5px 5px 5px;
font: 13px short stack;
text-align: right;
color: #F1DED6;
font-weight: bold;
}

.cons {
position: absolute;
top: 505px;
left: 25px;
height: 100px;
width: 350px;
background: #7D86AD;
border: 1px solid #7D86AD;
border-radius: 20px 5px 5px 20px;
box-shadow: #7D86AD 0px 0px 20px;
padding: 10px;
overflow: auto;
}

.cons h1 {
text-align: right;
font: 20px anton;
padding: 0px;
padding-right: 50px;
border-radius: 5px;
color: #EEEDEE;
font-style: italic;
margin-top: 0;
}

.contact {
width: 35px;
height: 35px;
border: 1px solid #575D79;
display: inline-block;
transition: all 500ms linear;
object-fit: cover;
margin: 5px;
margin-bottom: 8px;
padding:4px;
background: transparent;
overflow:; }

.contact img {
width: 35px;
height: 35px;
transition: all 500ms linear;
-webkit-filter: grayscale(100%);
/* Safari 6.0 - 9.0 */
filter: grayscale(100%);
opacity: 1; }

</style>

<!--
 MUSIC PLAYER #02 by glenthemes
 ♬ glenthpvs.tumblr.com/player02
--->
<script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
<link href="//fonts.googleapis.com/css?family=Readex+Pro" rel="stylesheet">
<link href="//glenthemes.github.io/-music-/glenplayer02.css" rel="stylesheet">
<script src="//glenthemes.github.io/-music-/glenplayer02.js"></script>
<style element="glenplayer02">
:root {
 --MusicPlayer-Position:bottom left;
 --MusicPlayer-Edge-Offset:18px;

 --MusicPlayer-Buttons-Size:14px;
 --MusicPlayer-Buttons-Color:#7D86AD;
 --MusicPlayer-Buttons-Fill:yes;

}
</style>

<div glenplayer02>
 <div controls></div>

 <i class="aa-line-icons" icon-name="music-2"></i>

 <!-- HOW TO CHANGE THE MUSIC -->
 <!-- linktr.ee/direct_file_links -->
 <audio src="MUSIC_LINK" volume="100%"></audio>

</div><!--don't delete this line-->
<!--end music player-->

<div class="wilder"><a target="_blank" href="https://pastebin.com/u/wilderanima" title="code by wilder."><img src="https://i.imgur.com/hCJmFVu.png" width="75px;"></a></div>

<div class="container">
<div class="mainimg"></div>
<div class="name">NAME LASTNAME</div>
<div class="stats">
<h1>dossier</h1>
<li>it scrolls! add as many as you'd like!</li>
<li>words</li>
<li>words</li>
<li>words</li>
<li>words</li>
<li>words</li>
<li>words</li>

</div>
<div class="hc">
<h1>headcanons</h1>
<li><b>bold</b> <i>italic</i> <u>underline</u> <a>link</a></li>
<li>stat</li>
<li>stat</li>
<li>stat</li>
<li>stat</li>
<li>stat</li>
<li>stat</li>
</div>
<div class="cons">
<h1>connections</h1>
<a target="_blank" href="LINK" title="Name." >
 <div class="contact">
<img class="contact-img" src="https://placehold.co/50x50.png">
 </div> </a>
<a target="_blank" href="LINK" title="Name." >
 <div class="contact">
<img class="contact-img" src="https://placehold.co/50x50.png">
 </div> </a>
<a target="_blank" href="LINK" title="Name." >
 <div class="contact">
<img class="contact-img" src="https://placehold.co/50x50.png">
 </div> </a>
<a target="_blank" href="LINK" title="Name." >
 <div class="contact">
<img class="contact-img" src="https://placehold.co/50x50.png">
 </div> </a>
<a target="_blank" href="LINK" title="Name." >
 <div class="contact">
<img class="contact-img" src="https://placehold.co/50x50.png">
 </div> </a>
<a target="_blank" href="LINK" title="Name." >
 <div class="contact">
<img class="contact-img" src="https://placehold.co/50x50.png">
 </div> </a>
</div>

</div>