𝐒𝐈𝐗

     Hello, wildlings!

  A straightforward placeholder code with a couple of images and a scrolling blurb box.
  Follow the dimensions of the images, otherwise, they 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=Walter+Turncoat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Economica:ital,wght@0,400;0,700;1,400;1,700&display=swap');

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

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

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

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

a:hover {
color: #e5cfa2;
}

.wilder {
position: fixed;
bottom: 0px;
right: 0px; }

.container {
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
height: 550px;
width: 550px;
background-color: #738859;
border-radius: 10px; }

.image1 {
position: absolute;
margin: auto;
top: 25px;
bottom: 0px;
left: 0px;
right: 0px;
height: 338px;
width: 450px;
background: url(https://placehold.co/450x338.png);
background-size: cover;
border: 5px solid #1b2a09;
filter: grayscale(0%);
border-radius: 10px; }

.image2 {
position: absolute;
bottom: 25px;
left: -150px;
right: 0px;
height: 150px;
width: 268px;
background: url(https://placehold.co/268x150.png); <!--bottom-->
background-size: cover;
border: 5px solid #738859;
filter: grayscale(0%);
border-radius: 10px; }

.image3 {
position: absolute;
top: 25px;
right: -150px;
height: 150px;
width: 268px;
background: url(https://placehold.co/268x150.png); <!--top-->
background-size: cover;
border: 5px solid #738859;
filter: grayscale(0%);
border-radius: 10px; }

.name {
position: absolute;
top: 50px;
left: 60px;
font-family: walter turncoat;
font-size: 50px;
color: #1b2a09;
}

.blurb {
position: absolute;
bottom: -50px;
right: -75px;
height: 195px;
width: 240px;
background: rgba(177, 163, 110, 0.3);
backdrop-filter: blur(7.0px);
-webkit-backdrop-filter: blur(7.0px);
mix-blend-mode: overlay;
border-radius: 10px 10px; }

.blin {
position: absolute;
bottom: -40px;
right: -65px;
height: 160px;
width: 200px;
padding: 8px;
background: rgba(13, 13, 13, 0.4);
backdrop-filter: blur(7.0px);
-webkit-backdrop-filter: blur(7.0px);
border-radius: 10px 10px;
color: #fff;
font: 13px economica;
text-align: right;
overflow: auto; }

.blin b {
font: 16px walter turncoat;
color: #CFC06A;
mix-blend-mode: overlay;
}
.blin i {
font: 14px economica;
font-style: italic;
}
.blin p {
margin: 5px;
padding: 5px;
outline: 1px solid #9A9B8C;
text-align: justify;
}

.cons {
position: absolute;
bottom: 25px;
left: 140px;
height: 55px;
width: 240px;
background: #738859;
border: 1px solid #738859;
padding: 0px;
overflow: auto;
}

.contact {
width: 35px;
height: 35px;
border: 1px solid #1b2a09;
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(0%);
/* Safari 6.0 - 9.0 */
filter: grayscale(0%);
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:15px;

 --MusicPlayer-Buttons-Size:15px;
 --MusicPlayer-Buttons-Color:#738859;
 --MusicPlayer-Buttons-Fill:yes;

}
</style>

<div glenplayer02>
 <div controls></div>
 <i class="aa-line-icons" icon-name="music-2"></i>
 <audio src="MUSIC_LINK" volume="100%"></audio>
</div>

<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="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
<div class="name">Name Name</div>

<div class="blurb"></div>
<div class="blin">
<p>put whatever you want in here!</p>
<p>put whatever you want in here!</p>
<p>put whatever you want in here!</p>
<p>put whatever you want in here!</p>
<p><b>bold</b> <i>italic</i> <a>link</a></p> <br>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br><br>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br><br>

</div>

<div class="cons">

<a target="_blank" href="https://roleplay.chat/profile.php?user=" title="Name." >
 <div class="contact">
<img class="contact-img" src="https://placehold.co/50x50.png">
 </div> </a>

<a target="_blank" href="https://roleplay.chat/profile.php?user=" title="Name." >
 <div class="contact">
<img class="contact-img" src="https://placehold.co/50x50.png">
 </div> </a>

<a target="_blank" href="https://roleplay.chat/profile.php?user=" title="Name." >
 <div class="contact">
<img class="contact-img" src="https://placehold.co/50x50.png">
 </div> </a>

<a target="_blank" href="https://roleplay.chat/profile.php?user=" title="Name." >
 <div class="contact">
<img class="contact-img" src="https://placehold.co/50x50.png">
 </div> </a>

</div>

</div>