𝗍𝗋𝖺𝗇𝗌𝗉𝖺𝗋𝖾𝗇𝗍 𝗂𝗆𝖺𝗀𝖾 𝗉𝗅𝖺𝖼𝖾𝗁𝗈𝗅𝖽𝖾𝗋 𝖼𝗈𝖽𝖾.

wilderanima

Jan 6th, 2026

4,901

Never

Add comment

Not a member of Pastebin yet? Sign Up, it unlocks many cool features!

CSS 6.34 KB | None | 1 0

raw download clone embed print report

<style>
@font-face { font-family: "barber";
src: url('https://dl.dropboxusercontent.com/scl/fi/6x4jkvju9d8rmz6f3n4mo/BARBER.otf?rlkey=4hgp78bearrsgmzy8dl7jvj23&st=ev4o5s0l&dl=0');}
body {cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_1280.png), auto;
background-color: #FFF;} /* you can change this however you like */
::-webkit-scrollbar {display: none;}
.wilder {
position: fixed;
bottom: 0px;
right: 0px;}
.container {
position: absolute;
margin: auto;
bottom: 0px;
left: 0px;
right: 0px;
height: 625px;
width: 600px;
overflow: hidden;}
.texture {
top: 0px;
left: 0px;
width: 100%;
height: 100%;
mix-blend-mode: overlay;
background-image: url("https://i.imgur.com/4ZGlWav.png");
background-repeat: repeat;
background-position: center;
background-size: 25%;
opacity: 0.15;
pointer-events: none;
position: absolute;
z-index: 100; }
.fade {
top: 0px;
right: 0px;
height: 100%;
width: 100%;
mix-blend-mode: multiply;
background-image: linear-gradient(to top, #8e94a7 0%, #a6afce 20%, transparent); /*ONLY change the #HexCode to change the backgrounds fade color.*/
opacity: 0.7;
position: absolute;
pointer-events: none;
z-index: 100; }
.image1 {
position: absolute;
margin: auto;
bottom: -125px;
left: -50px;
width: 450px;
height: 805px;
background-image:url(IMG_LINK); /* a transparent image works best here */
background-repeat:no-repeat;
background-size: 75%;
background-position: center;
filter:drop-shadow(0px 0px 3px #000);
opacity:1;
z-index: 999;}
.title1 {
position: absolute;
margin: auto;
top: 200px;
left: 225px;
right: 0px;
font-family: barber;
font-size: 50px;
letter-spacing: 0px;
text-transform: uppercase;
color: #000;
filter:drop-shadow(0px 0px 2px #000);
opacity: 1;
z-index: 999;}
.line1 {
position: absolute;
margin: auto;
top: 250px;
left: 275px;
height: 15px;
width: auto;
padding: 5px;
text-align: left;
font-family: barber;
font-size: 13px;
letter-spacing: 1px;
overflow: auto;
color: #443E42;
border-radius: 5px;
filter:drop-shadow(0px 0px 1px #443E42);
z-index: 999; }
.line2 {
position: absolute;
top: 250px;
left: 355px;
height: 15px;
width: auto;
padding: 5px;
text-align: left;
font-family: barber;
font-size: 13px;
letter-spacing: 1px;
overflow: auto;
color: #443E42;
border-radius: 5px;
filter:drop-shadow(0px 0px 1px #443E42);
z-index: 999; }
.line3 {
position: absolute;
top: 250px;
left: 450px;
height: 15px;
width: 250px;
padding: 5px;
text-align: left;
font-family: barber;
font-size: 13px;
letter-spacing: 1px;
overflow: auto;
color: #443E42;
border-radius: 5px;
filter:drop-shadow(0px 0px 1px #443E42);
z-index: 999; }
.line4 {
position: absolute;
top: 275px;
left: 375px;
height: 15px;
width: auto;
padding: 5px;
text-align: left;
font-family: barber;
font-size: 13px;
letter-spacing: 1px;
overflow: auto;
color: #443E42;
border-radius: 5px;
filter:drop-shadow(0px 0px 1px #443E42);
z-index: 9999; }
.line5 {
position: absolute;
top: 275px;
left: 425px;
height: 15px;
width: auto;
padding: 5px;
text-align: left;
font-family: barber;
font-size: 13px;
letter-spacing: 1px;
overflow: auto;
color: #443E42;
border-radius: 5px;
filter:drop-shadow(0px 0px 1px #443E42);
z-index: 9999; }
.textbox {
position: absolute;
top: 300px;
left: 500px;
height: auto;
width: auto;
padding: 5px;
text-align: left;
font-family: barber;
font-size: 13px;
letter-spacing: 1px;
overflow: auto;
color: #443E42;
background-color: #000;
border-radius: 5px;
z-index: 9999; }
b { letter-spacing: 0px; font-family: barber; color: #803F3E; font-weight: bold; font-size:14px; text-transform: uppercase; filter:drop-shadow(0px 0px 1px #803F3E);}
a { font-family: barber; letter-spacing: 1px; color: #999; font-size: 13px; font-weight: bold; text-decoration: none; text-transform: uppercase; transition: 0.7s;
cursor: url(https://i.imgur.com/WIeMSiR.png), auto; filter:drop-shadow(0px 0px 1px #999);}
a:hover { font-family: barber; letter-spacing: 1px; color: #FFF; font-size: 13px; font-weight: bold; text-decoration: none; text-transform: uppercase; transition:0.7s;
cursor: url(https://i.imgur.com/WIeMSiR.png), auto; filter:drop-shadow(0px 0px 1px #FFF);}
</style>
<div class="wilder">
<a target="_blank" href="https://roleplay.chat/profile.php?user=WILDER" title="code by wilder.">
<img src="https://i.imgur.com/hCJmFVu.png" width="75px;"></a>
</div>
<div class="texture"></div>
<div class="fade"></div>
<div class="container">
<div class="image1"></div>
<div class="title1">title here.</div>
<div class="line1">line.</div>
<div class="line2">line.</div>
<div class="line3">line.</div>
<div class="line4"><a target="_blank" href="FLIST_LINK" title="if you have one, you can put it here.">f-list.</a></div>
<div class="line5"><a target="_blank" title="code by wilder. ask if you want it.
additional ooc information under this hover.">ooc.</a></div>
</div>
<link href="//glen-players.gitlab.io/02/setup.css" rel="stylesheet">
<script src="//glen-players.gitlab.io/02/init.js"></script>
<div glenplayer02>
<button play-button aria-label="Play"></button>
<button pause-button aria-label="Pause"></button>
<audio src="MUSIC_LINK" volume="100%"></audio>
</div>
<style element="glenplayer02">
[glenplayer02]{
/*--- options here ---*/
--MusicPlayer-Position:"bottom left";
--MusicPlayer-Corner-Offset:1rem;
z-index:999; /* increase this number if you can't see or click your music player */
--MusicPlayer-Buttons-Style:"fill";
--MusicPlayer-Buttons-Size:1rem;
--MusicPlayer-Buttons-Color:#000;
--MusicPlayer-Buttons-Padding:6px;
--MusicPlayer-Gap-1:10px;
--MusicPlayer-Gap-2:10px;
}/* do not delete this bracket */
</style>