𝐎𝐍𝐄

     Hello, wildlings!

  A very simple code with an image on the left and information on the right.
  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=Jersey+15&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');


body {
background: #000;
}

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

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

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

a:hover {
color: #6D5952;
}

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

i {
color: #C29F67;
font-style: italic;
}

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

.container {
position: fixed;
height: 650px;
width: 750px;
background: #000;
top: 50px;
left: 50px;
}

.img {
position: absolute;
height: 600px;
width: 375px;
top: 25px;
left: 25px;
background: url(https://placehold.co/375x600.png);
background-size: 100%;
border: 1px solid #647C8E;
box-shadow: #647C8E 0px 0px 20px;
}

.stats {
position: absolute;
height: 250px;
width: 300px;
background: #000;
top: 25px;
right: 25px;
overflow: auto;
}

.stats h1 {
text-align: center;
font: 20px 'libre baskerville';
padding: 5px;
padding-right: 15px;
border-radius: 5px;
color: #647C8E;
font-weight: bold;
letter-spacing: 0px;
margin-top: 0;
}

.stats li {
display: block;
background: #000;
padding: 5px;
margin: 5px;
font: 12px 'libre baskerville';
text-align: justify;
color: #647C8E;
font-weight: ;
}

.hc {
position: absolute;
height: 265px;
width: 300px;
background: #000;
bottom: 100px;
right: 25px;
overflow: auto;
}

.hc h1 {
text-align: center;
font: 20px 'libre baskerville';
padding: 5px;
padding-right: 15px;
border-radius: 5px;
color: #647C8E;
font-weight: bold;
letter-spacing: 0px;
margin-top: 0;
}

.hc li {
display: block;
background: #000;
padding: 5px;
margin: 5px;
font: 12px 'libre baskerville';
text-align: justify;
color: #647C8E;
font-weight: ;
}

.cons {
position: absolute;
height: 55px;
width: 300px;
background: #000;
bottom: 35px;
right: 25px;
overflow: auto;
}

.contact {
width: 35px;
height: 35px;
border: 1px solid #647C8E;
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:#647C8E;
 --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="img"></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>
<li>words</li>
</div>

<div class="hc">
<h1>HEADCANONS</h1>

<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>It scrolls! Add as many as you'd like.</li>
<li>words</li>
<li>words</li>
<li>words</li>
<li><b>bold</b> <i>italic</i> <u>underline</u> <a target="_blank" href="LINK">link</a></li>
</div>

<div class="cons">

<!-- it scrolls, add as many as you'd like! -->

<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>