Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <STYLE>
- @import url('https://fonts.googleapis.com/css2?family=Potta+One&display=swap');
- @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2&display=swap');
- @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
- @import url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap');
- body {
- background:#f1f1ef;
- margin:auto;
- overflow:hidden;
- background: linear-gradient(56deg, #555 20%, #424f4a 50%);
- font-family: 'Syne Mono', monospace;
- font-size:11px;
- font-weight:bold;
- color:#685b53;
- }
- ::-webkit-scrollbar {display:none}
- b {
- color:#c05e63;
- text-transform:uppercase;
- }
- i {color:#aaa;}
- a {
- text-decoration:none;
- color:#0df1fe;
- }
- a:hover {color:#fff;}
- .badbaby {
- position:fixed;
- bottom:10px;
- right:10px;
- z-index:99999999;
- }
- .badbaby img{
- height:85px;
- }
- .container {
- position:absolute;
- top:0px;
- left:0px;
- right:0px;
- bottom:0px;
- margin:auto;
- width:900px;
- height:700px;
- background-image: linear-gradient(#506670 , #3a4c49);
- box-shadow:5px 5px 5px 5px #333;
- border:2px solid #aaa;
- z-index:999;
- }
- img.FOREST {
- margin-top:0px;
- height:700px;
- width:900px;
- position:absolute;
- opacity:0.2;
- -webkit-filter: grayscale(100%);
- }
- img.INTROpic {
- position:absolute;
- height:700px;
- margin-left:-0px;
- margin-top:-0px;
- z-index:99;
- }
- .wordHYENA {
- position:absolute;
- margin-left:-280px;
- margin-top:140px;
- color:#dee0e0;
- font-size:150px;
- text-shadow:5px 5px 5px #222;
- font-family: 'Bebas Neue', cursive;
- letter-spacing:2px;
- transform: rotate(-90deg);
- }
- .wordrune {
- position:absolute;
- margin-top:230px;
- margin-left:-210px;
- font-size:80px;
- color:#dcddd8;
- text-shadow:3px 3px 3px #222;
- text-transform:uppercase;
- font-family: 'Bebas Neue', cursive;
- letter-spacing:5px;
- transform: rotate(-90deg);
- }
- .INTROword {
- position:absolute;
- margin-top:110px;
- margin-left:250px;
- padding:20px;
- background-color:#fff;
- text-transform:uppercase;
- font-size:18px;
- font-family:arial;
- font-weight:bold;
- letter-spacing:2px;
- color:#e9b2b5;
- text-align:right;
- }
- .INTROback1 {
- position:absolute;
- margin-top:20px;
- margin-left:440px;
- width:356px;
- height:505px;
- }
- .box1 {
- position:absolute;
- background-image: linear-gradient(#4f5158 , #404b46);
- width:180px;
- height:250px;
- padding:20px;
- margin-top:-90px;
- margin-left:-20px;
- text-align:center;
- box-shadow:-2px 2px 2px 2px #444;
- border-radius:10px;
- border:2px solid #555;
- }
- .WORDbackstory {
- position:absolute;
- background-color:#4d5d69;
- padding:5px;
- width:230px;
- font-size:20px;
- text-transform:uppercase;
- text-align:center;
- border-radius:5px;
- margin-top:13px;
- color:#dee0e0;
- font-family: 'Bebas Neue', cursive;
- letter-spacing:4px;
- margin-left:-32px;
- text-shadow:1px 1px 1px #000;
- border:2px solid #aaa;
- z-index:9;
- }
- .intro2 {
- color:#fff;
- text-align:justify;
- overflow:auto;
- height:200px;
- line-height:17px;
- }
- .box2 {
- position:absolute;
- background-image: linear-gradient(#574943 , #404b46);
- width:190px;
- height:360px;
- padding:10px;
- margin-top:-40px;
- margin-left:230px;
- text-align:center;
- box-shadow:-2px 2px 2px 2px #444;
- border-radius:10px;
- border:2px solid #555;
- }
- .stat2 {
- height:235px;
- overflow:auto;
- }
- .box2 b {
- background-color:#424f4a;
- color:#fff;
- padding:5px;
- width:70px;
- display:inline-block;
- margin:1px;
- font-size:10px;
- border-radius:5px;
- border:1px solid #666;
- text-transform:lowercase;
- }
- .box2 i {
- padding:5px;
- border-bottom:1px solid #eee;
- color:#d6d7d0;
- display:inline-block;
- width:80px;
- text-align:right;
- font-family:arial;
- font-size:10px;
- }
- .WORDstats {
- position:absolute;
- background-color:#4b4b4f;
- padding:5px;
- width:250px;
- font-size:20px;
- text-transform:uppercase;
- text-align:center;
- border-radius:5px;
- margin-top:10px;
- color:#dee0e0;
- font-family: 'Bebas Neue', cursive;
- letter-spacing:4px;
- margin-left:-32px;
- text-shadow:1px 1px 1px #000;
- border:2px solid #aaa;
- z-index:9;
- }
- .trait {
- background-color:#615a4d;
- margin-bottom:5px;
- border-radius:5px;
- color:#c2b7b2;
- letter-spacing:1px;
- padding:2px;
- }
- .stat3 {
- margin-top:65px;
- overflow:auto;
- height:70px;
- }
- .box3 {
- position:absolute;
- width:200px;
- height:340px;
- margin-top:220px;
- margin-left:-5px;
- text-align:center;
- overflow:auto;
- z-index:999;
- }
- .FRIENDbox {
- padding:10px;
- height:140px;
- margin-bottom:30px;
- background-image: linear-gradient(#466e6b , #404b46);
- border-radius:10px;
- margin:5px;
- border:2px solid #555;
- transition: all 0.9s ease-in-out;
- }
- img.FRIENDicon {
- height:50px;
- width:50px;
- padding:5px;
- background-color:#444;
- border-radius:0px;
- margin-left:-100px;
- margin-top:5px;
- border-radius:5px;
- border:2px solid #e2e0de;
- }
- .FRIENDcontentHOLDER {
- background-color:#4b5144;
- width:74px;
- height:44px;
- padding:10px;
- margin-left:70px;
- margin-top:-66px;
- border-radius:5px;
- border:2px solid #e2e0de;
- }
- .FRIENDcontent {
- overflow:auto;
- height:50px;
- line-height:10px;
- text-align:justify;
- font-size:10px;
- color:#eee;
- }
- .FRIENDNAME {
- margin-top:10px;
- padding:5px;
- background-color:#e2e0de;
- color:#495043;
- text-transform:uppercase;
- border-radius:5px;
- font-family:corbel;
- font-weight:bold;
- letter-spacing:1px;
- }
- .FRIENDTITLE {
- margin-top:5px;
- padding:5px;
- color:#dee0e0;
- border-bottom:2px solid #e2e0de;
- font-style:italic;
- letter-spacing:1px;
- font-size:10px;
- text-align:right;
- }
- .WORDcontacts {
- position:absolute;
- background-color:#505047;
- padding:5px;
- font-size:20px;
- text-transform:uppercase;
- text-align:center;
- border-radius:5px;
- margin-top:570px;
- color:#dee0e0;
- font-family: 'Bebas Neue', cursive;
- letter-spacing:4px;
- margin-left:-10px;
- text-shadow:1px 1px 1px #000;
- border:2px solid #aaa;
- width:200px;
- z-index:9;
- }
- .box4 {
- position:absolute;
- background-image: linear-gradient(#3c5560 , #404b46);
- width:180px;
- height:120px;
- padding:20px;
- margin-top:360px;
- margin-left:210px;
- text-align:center;
- box-shadow:-2px 2px 2px 2px #444;
- border-radius:10px;
- border:2px solid #555;
- }
- .WORDpersonality {
- position:absolute;
- background-color:#925754;
- padding:5px;
- font-size:20px;
- text-transform:uppercase;
- text-align:center;
- border-radius:5px;
- margin-top:370px;
- color:#dee0e0;
- font-family: 'Bebas Neue', cursive;
- letter-spacing:4px;
- margin-left:225px;
- text-shadow:1px 1px 1px #000;
- border:2px solid #aaa;
- width:210px;
- z-index:9;
- }
- .personality1 {
- margin-top:40px;
- text-align:justify;
- overflow:auto;
- height:90px;
- color:#d3d3d0;
- line-height:13px;
- }
- .box5 {
- position:absolute;
- background-image: linear-gradient(#555 , #3d4c48);
- width:200px;
- padding:10px;
- margin-top:540px;
- margin-left:220px;
- text-align:center;
- box-shadow:-2px 2px 2px 2px #444;
- border-radius:10px;
- border:2px solid #555;
- height:200px;
- }
- .WORDooc {
- position:absolute;
- background-color:#435144;
- padding:5px;
- font-size:20px;
- text-transform:uppercase;
- text-align:center;
- border-radius:5px;
- margin-top:705px;
- color:#dee0e0;
- font-family: 'Bebas Neue', cursive;
- letter-spacing:4px;
- margin-left:205px;
- text-shadow:1px 1px 1px #000;
- border:2px solid #aaa;
- width:240px;
- z-index:9;
- }
- p {
- padding:5px;
- background-color:#444;
- border-radius:5px;
- margin:4px;
- color:#cbcbc2;
- text-transform:uppercase;
- letter-spacing:2px;
- font-size:9px;
- }
- .ooc1 {
- margin-top:10px;
- overflow:auto;
- height:82px;
- }
- </STYLE>
- <BODY>
- <div class="container">
- <img src="https://i.imgur.com/HTRarKL.png" class="forest">
- <img src="https://i.imgur.com/g02NpNY.png" class="INTROpic">
- <div class="WORDHYENA">A HYENA.</div>
- <div class="WORDrune">Rune <strike>Runekeeper</strike></div>
- <div class="INTROback1">
- <div class="box1">
- <div class="intro2">
- [this is the intro box]
- <b>bold</b> <i>italic</i> <a href="">link</a>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit,
- sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse
- cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident,
- sunt in culpa qui officia deserunt mollit anim id est laborum.
- </div>
- <div class="WORDbackstory">backstory</div>
- </div>
- <div class="box2">
- <div class="stat2">
- <b>name</b> <i>rune</i> <br>
- <b>gender</b> <i>male</i> <br>
- <b>height</b> <i>answer</i> <br>
- <b>weight</b> <i>answer</i> <br>
- <b>alignment</b> <i>chaotic</i> <br>
- <b>stats</b> <i>answer</i> <br>
- <b>orientation </b> <i>heterosexual</i> <br>
- <b>stat</b> <i>answer</i> <br>
- <b>stat</b> <i>answer</i> <br>
- <b>stat</b> <i>answer</i> <br>
- <b>stat</b> <i>answer</i> <br>
- <b>stat</b> <i>answer</i> <br>
- <b>stat</b> <i>answer</i> <br>
- </div>
- <div class="WORDstats">stats & basics</div>
- <div class="stat3">
- <div class="trait">personality trait</div>
- <div class="trait">short-tempered.</div>
- <div class="trait">chaotic energy af.</div>
- </div>
- </div>
- <div class="box3">
- <div class="FRIENDbox">
- <a href="https://roleplay.chat/profile.php?user=RPC USERNAME HERE">
- <img src="https://i.imgur.com/z5f0omS.png?1" class="FRIENDicon"></a>
- <div class="FRIENDcontentHOLDER">
- <div class="FRIENDcontent">
- write a lovely description about your friend here.
- you can make it as short or as long as you want because
- this box actually scrolls ( :
- </div></div>
- <div class="FRIENDNAME">friend name here</div>
- <div class="FRIENDTITLE">association</div>
- </div>
- <div class="FRIENDbox">
- <a href="https://roleplay.chat/profile.php?user=RPC USERNAME HERE">
- <img src="https://i.imgur.com/z5f0omS.png?1" class="FRIENDicon"></a>
- <div class="FRIENDcontentHOLDER">
- <div class="FRIENDcontent">
- write a lovely description about your friend here.
- you can make it as short or as long as you want because
- this box actually scrolls ( :
- </div></div>
- <div class="FRIENDNAME">friend name here</div>
- <div class="FRIENDTITLE">association</div>
- </div>
- <div class="FRIENDbox">
- <a href="https://roleplay.chat/profile.php?user=RPC USERNAME HERE">
- <img src="https://i.imgur.com/z5f0omS.png?1" class="FRIENDicon"></a>
- <div class="FRIENDcontentHOLDER">
- <div class="FRIENDcontent">
- write a lovely description about your friend here.
- you can make it as short or as long as you want because
- this box actually scrolls ( :
- </div></div>
- <div class="FRIENDNAME">friend name here</div>
- <div class="FRIENDTITLE">association</div>
- </div></div>
- <div class="WORDcontacts">contacts</div>
- <div class="box4">
- <div class="personality1">
- <b>bold</b> <i>italic</i> <a href="">link</a>
- [this is the personality box]
- Lorem ipsum dolor sit amet, consectetur adipiscing elit,
- sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </div></div>
- <div class="WORDpersonality">personality</div>
- <div class="box5">
- <p>basic rules apply.</p>
- <p>dark themes preferred. </p>
- <p>dm's always open. </p>
- <p>don't start with a post. </p>
- <p>be literate. </p>
- <p>muse is fickle.</p>
- </div>
- <div class="WORDooc">out of character</div>
- </div>
- </div>
- <div class="badbaby"><a target="_blank" href="https://roleplay.chat/profile.php?user=badbaby"><img src="https://i.imgur.com/GvurzKt.png"></a></div>
- </BODY>
Add Comment
Please, Sign In to add comment