• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Resource ♥*♡∞:。.。 𝚜𝚊𝚕𝚎𝚖'𝚜 𝚏𝚛𝚎𝚎𝚋𝚒𝚎𝚜 。.。:∞♡*♥


character sheet no. 2
here's a cs that i made for my character in my new rp group just now ( you should definitely apply ;) )

colors used below, bg pic creds to chillcrafting on tumblr

I'll know the way back if you know the way,
basics.

title : info
title : info
title : info
title : info
title : info
title : info
title : info
title : info

visage.

title : info
title : info
title : info
title : info
title : info
title : info
title : info
title : info

psyche.

title : info
title : info
title : info
title : info
title : info
title : info
title : info
title : info


other.

title : info
title : info
title : info
title : info
title : info
title : info
title : info
title : info
But if you are, I am quite alright hiding today.

coded by incandescent


Code:
[bg=transparent; margin: auto; height: 30px;][/bg]
[comment]


** top lyric goes here


[/comment][bg=transparent; margin: auto; width: 750px; height: 30px; color: #ECECEC; letter-spacing: 5px; text-align: left; font-size: 13px; font-family: Times New Roman; position: relative; right: 11px; top: 10px; text-transform: lowercase;]I'll know the way back if you know the way,[/bg][bg=transparent; margin: auto; width: 750px; height: 400px; background-color: #BDBDBD; border-color: #9B9B9B; border-width: 3px; border-style: solid][row][column=span3][comment]


** left sidebar image goes here


[/comment][bg=transparent; margin: auto; height: 375px; background: url('https://images.squarespace-cdn.com/content/v1/57bfac9829687fe4f8dfdb7b/1511927326761-KSNI9TAECCFJVHGBB7WF/ke17ZwdGBToddI8pDm48kJVAHI5KKuViTeTTrHfZM-B7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0jG2lbcDYBOeMi4OFSYem8COGEz7DzEWZQrZtVNHvzugkKMnObkHUzb-_PYhc4orAg/IMG_4728-Edit.jpg'); background-size: cover; filter: grayscale(30%); border-color: #9B9B9B; border-size: 2px; border-style: solid;][/bg][/column][column=span3][bg=transparent; margin: auto; height: 375px; background-color: #DCDCDC; border-color: #9B9B9B; border-size: 2px; border-style: solid; overflow: hidden;][bg=transparent; height: 375px; overflow-y: scroll; overflow-x; hidden; text-align: justify; width: 262px; position: relative; bottom: 10px; right: 10px; color: #878787; font-family: Times New Roman;][comment]


** middle text below


[/comment][border=0px; padding: 4px; background-color: #7a88a4; color: #ECECEC; font-size: 20px; text-transform: uppercase; font-weight: bold; display: inline; letter-spacing: 3px;]basics.[/border]
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info

[border=0px; padding: 4px; background-color: #7a88a4; color: #ECECEC; font-size: 20px; text-transform: uppercase; font-weight: bold; display: inline; letter-spacing: 3px;]visage.[/border]
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info

[border=0px; padding: 4px; background-color: #7a88a4; color: #ECECEC; font-size: 20px; text-transform: uppercase; font-weight: bold; display: inline; letter-spacing: 3px;]psyche.[/border]
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info


[border=0px; padding: 4px; background-color: #7a88a4; color: #ECECEC; font-size: 20px; text-transform: uppercase; font-weight: bold; display: inline; letter-spacing: 3px;]other.[/border]
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info[/bg][/bg][/column][column=span2][comment]


** right top image goes here


[/comment][bg=transparent; margin: auto; height: 100px; background: url('https://i.pinimg.com/564x/93/b5/a0/93b5a09945b3ee1c596b2fcd8e72ebb6.jpg'); background-size: cover; filter: grayscale(100%); border-color: #9B9B9B; border-size: 2px; border-style: solid; position: relative;][/bg][comment]


** right middle image goes here


[/comment][bg=transparent; margin: auto; height: 103px; background: url('https://i.pinimg.com/564x/57/4c/da/574cdad7db66e70deba7e4e78667cc91.jpg'); background-size: cover; filter: grayscale(100%); border-color: #9B9B9B; border-size: 2px; border-style: solid; position: relative; top: 10px;][/bg][comment]


** right bottom image goes here


[/comment][bg=transparent; margin: auto; height: 100px; background: url('https://i.pinimg.com/564x/07/e1/06/07e106314324f41dfe44a9217b8c3679.jpg'); background-size: cover; filter: grayscale(100%); border-color: #9B9B9B; border-size: 2px; border-style: solid; position: relative; top: 20px;][/bg][/column][/row][/bg][comment]


** right bottom image goes here


[/comment][bg=transparent; margin: auto; width: 750px; height: 30px; color: #ECECEC; letter-spacing: 5px; text-align: right; font-size: 13px; font-family: Times New Roman; position: relative; left: 15px; text-transform: lowercase;]But if you are, I am quite alright hiding today.[/bg][center][bg=transparent; margin: auto; color: #12100f; text-transform: uppercase; border-radius: 5px; font-size: 9px; letter-spacing: 3px;][B]coded by incandescent[/B][/bg][/center]
[bg=transparent; margin: auto; height: 30px;][/bg]

Back again and would like to use this code, as well, please?
 
ahhh so, it's been more than a month since i first started learning bbcode : O and i've learned a loOOOt of things
checking back on my codes, pretty much all of them are really inefficient and cld definitely be improved ^^^ so i'm gonna be remaking them over the next few days
 
character post no. 4
ic spotify post, has a hidden scroll on the pic and a soundcloud media player

mobile friendly but u might have to adjust the period

bg pic creds to halcyoncraft on tumblr

firstname lastname
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a arcu vitae magna maximus interdum non eu nulla. In facilisis nibh lacus, ac iaculis risus placerat sed. Cras eu mauris vitae lorem dapibus consectetur. Vestibulum hendrerit, sem id efficitur tempor, justo lacus interdum magna, at vulputate metus mauris quis justo. Vestibulum ultrices euismod mollis. Proin imperdiet ex et ligula elementum bibendum. Sed leo elit, eleifend id malesuada faucibus, euismod vel erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit dui at tellus rutrum cursus. Phasellus et laoreet augue. Maecenas pellentesque, mi pretium venenatis mollis, magna ipsum fermentum nunc, vitae tincidunt eros eros sit amet justo. Proin ut nunc a felis interdum posuere.

In euismod pellentesque velit a maximus. Phasellus hendrerit consectetur justo ac finibus. Suspendisse non ligula id velit maximus finibus. Nulla dignissim nibh vel urna finibus, sed vehicula urna fringilla. Nullam tincidunt metus sit amet eros bibendum aliquam. Donec sed ligula commodo, finibus sapien nec, volutpat massa. Nulla at elit eu tellus luctus consectetur. Fusce at mi scelerisque, euismod diam vitae, dapibus velit.
location info mood info outfit info tags info
He Won't Hold You

Jacob Collier
______________
.
3:12
-1:50
coded by incandescent

Code:
[border=3px; width: 300px; height: 640px; background: black; margin: auto; border-radius: 20px; border-style: solid; border-color: white; cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur817.cur), auto !important;][comment]


background gradient colors here!

      i used the website ** [URL="https://cssgradient.io/"]CSS Gradient — Generator, Maker, and Background[/URL] ** to get the gradient text and i used ** [URL="https://imagecolorpicker.com/en/"]Image Color Picker[/URL] ** to get the colors for the gradient from my cover image.
      if you want to replace the gradient colors, get the code from the first link and replace the text:
                                          background: rgb(129,96,75); background: linear-gradient(0deg, rgba(129,96,75,1) 0%, rgba(209,185,169,1) 100%);


[/comment][border=0px; width: 280px; height: 620px; background: rgb(129,96,75); background: linear-gradient(0deg, rgba(129,96,75,1) 0%, rgba(209,185,169,1) 100%); margin: auto; border-radius: 10px;display: flex; justify-content: center; align-content: space-between; flex-flow: row wrap;][border=0px; width: 150px; height: 8px; position: relative; top: -10px; background-color: black; margin: auto; border-radius: 0px 0px 10px 10px;][/border][border=0px; height: 10px; margin: auto; width: 93%; display: flex; align-items: center; justify-content: center;][border=0px; padding: 0px; height: 10px; width: 10%; position: relative; font-size: 13px; display: flex; align-items: center; justify-content: center; color: white;][fa]fal fa-chevron-down[/fa][/border][border=0px; padding: 0px; height: 10px; width: 80%; position: relative; font-size: 13px; display: flex; align-items: center; justify-content: center; font-weight: bold; letter-spacing: 1px; color: white;][comment]


name at the top here


[/comment]firstname lastname[/border][border=0px; padding: 0px; height: 10px; width: 10%; position: relative; font-size: 13px; display: flex; align-items: center; justify-content: center; color: white;][fa]fal fa-ellipsis-h[/fa][/border][/border][border=0px; height: 20px; margin: auto; width: 93%;][/border][comment]


cover image right here


[/comment][border=0px; margin: auto; height: 240px; width: 93%; background: url(https://i.pinimg.com/564x/e6/dd/0f/e6dd0fd667adcd53f8f0fff4cddf67e6.jpg); background-size: cover; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); overflow: hidden;][border=0px; height: 240px; width: 108%; position: relative; bottom: 10px; right: 10px; overflow-y: scroll; overflow-x: hidden;][border=0px; height: 240px; width: 100%; position: relative; bottom: 10px; right: 10px;][/border][comment]


adjust the colors for the main text here
   text background color: #d1b9a9
   text color: color: #563d31


[/comment][border=0px; margin: auto; width: 100%; background-color: #d1b9a9; opacity: 90%; position: relative; top: 10px; right: 10px; display: inline-block; font-size: 13px; color: #563d31; line-height: 15px; text-align: justify;][comment]


hidden scroll text over here


[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a arcu vitae magna maximus interdum non eu nulla. In facilisis nibh lacus, ac iaculis risus placerat sed. Cras eu mauris vitae lorem dapibus consectetur. Vestibulum hendrerit, sem id efficitur tempor, justo lacus interdum magna, at vulputate metus mauris quis justo. Vestibulum ultrices euismod mollis. Proin imperdiet ex et ligula elementum bibendum. Sed leo elit, eleifend id malesuada faucibus, euismod vel erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit dui at tellus rutrum cursus. Phasellus et laoreet augue. Maecenas pellentesque, mi pretium venenatis mollis, magna ipsum fermentum nunc, vitae tincidunt eros eros sit amet justo. Proin ut nunc a felis interdum posuere.

In euismod pellentesque velit a maximus. Phasellus hendrerit consectetur justo ac finibus. Suspendisse non ligula id velit maximus finibus. Nulla dignissim nibh vel urna finibus, sed vehicula urna fringilla. Nullam tincidunt metus sit amet eros bibendum aliquam. Donec sed ligula commodo, finibus sapien nec, volutpat massa. Nulla at elit eu tellus luctus consectetur. Fusce at mi scelerisque, euismod diam vitae, dapibus velit.[comment]


bottom info bar text over here
       bg color: #563d31
       text color: #d1b9a9
 

[/comment][border=0px; margin: auto; width: 100%; display: inline-block; opacity: 90%; background-color: #563d31; color: #d1b9a9; position: relative; right: 10px; top: 10px; font-size: 11px; text-align: center; line-height: 15px;][comment]


bottom info bar text over here


[/comment][b]location[/b] info [b]mood[/b] info [b]outfit[/b] info [b]tags[/b] info[/border][/border][/border][/border][border=0px; height: 20px; margin: auto; width: 93%;][/border][border=0px; height: 30px; margin: auto; width: 90%; display: flex; align-items: center; justify-content: space-between; flex-flow: row wrap;][border=0px; padding: 0px; width: 87%; position: relative; right: 10px; bottom: 5px; display: flex; align-items: center;][border=0px; color: white; padding: 0px; line-height: 8px;][border=0px; padding: 0px; letter-spacing: 1px; font-size: 16px; font-weight: bold;][comment]


song name here


[/comment]He Won't Hold You[/border]
[border=0px; padding: 0px; letter-spacing: 1px; font-size: 12px;][comment]


artist name here


[/comment]Jacob Collier[/border][/border][/border][border=0px; width: 5%; position: relative; left: 15px; bottom: 5px; color: white;][fa]fal fa-heart[/fa][/border][/border][border=0px; margin: auto; height: 10px; width: 93%;][border=0px; height: 1px; width: 106%; position: relative; bottom: 30px; right: 18px; font-family: Helvetica; font-weight: bold; font-size: 35px; display: flex; align-items: center; justify-content: center;][comment]


details for the 'progress bar' right here; wouldn't recommend rly changing the length of the white part unless you're familiar with moving things


[/comment][color=white]__________[/color][color=#BDBDBD]____[/color][/border][border=0px; height: 1px; width: 106%; position: relative; bottom: 49px; left: 37px; font-weight: bold; font-size: 50px; display: flex; align-items: center; justify-content: center; color: white;].[/border][border=0px; height: 1px; width: 106%; position: relative; bottom: 42px; right: 18px; font-family: Helvetica; font-weight: bold; color: white; font-size: 12px; display: flex; align-items: center; justify-content: space-between;][border=0px; padding: 0px;]3:12[/border][border=0px; padding: 0px;]-1:50[/border][/border][/border][border=0px; height: 60px; margin: auto; width: 91%;][border=0px; padding: 0px; opacity: 0; height: 100px; width: 130px; margin: auto; position: relative; left: 35px; bottom: 2px;][comment]


youtube music player link over here


[/comment]https://www.youtube.com/watch?v=9B0MRtoYn9o[/border][border=0px; height: 60px; width: 106%; position: relative; right: 18px; bottom: 110px; pointer-events: none; display: flex; align-content: center; justify-content: space-between; color: white;][border=0px; padding: 0px; height: 60px; display: flex; align-items: center;][fa]fal fa-random[/fa][/border][border=0px; padding: 0px; height: 60px; display: flex; align-items: center;][fa]fas fa-step-backward fa-2x[/fa][/border][border=0px; padding: 0px; height: 60px; display: flex; align-items: center;][fa]fas fa-play-circle fa-3x[/fa][/border][border=0px; padding: 0px; height: 60px; display: flex; align-items: center;][fa]fas fa-step-forward fa-2x[/fa][/border][border=0px; padding: 0px; height: 60px; display: flex; align-items: center;][fa]fal fa-repeat-1[/fa][/border][/border][/border][border=0px; height: 40px; margin: auto; width: 91%; display: flex; align-items: center; justify-content: space-between;][border=0px; padding: 0px; position: relative; right: 8px; color: white;][fa]fal fa-computer-speaker[/fa][/border][border=0px; padding: 0px; position: relative; left: 8px; color: white;][fa]fal fa-list-music[/fa][/border][/border][/border][/border][border=0px; width: 300px; margin: auto; font-size: 10px; text-align: center;]coded by incandescent[/border]

edit: changed the soundcloud link to a youtube link since some sc sounds r locked! also adjusted the color of the 2nd half of the music bar
edit: gave it a tiny cursor
 
Last edited:
character sheet no. 4
another app code, instagram this time ! i was kinda reluctant to post this here cause the code is kinda complicated, so i wouldn't recommend messing with it a lot or probably even using it if you don't have much coding experience. if you still want to use it and you need help w changing things feel free to msg me, though ! warning that it'll look a little shifted when you're editing it, but it looks fine when it's saved

bg pic creds to halcyoncraft on tumblr

2:09
  • username
    9
    posts
    1,123
    followers
    1,054
    following
    vivian ♡
    Just For Fun
    no regrets, coyote
    youtube.com/watch?v=-oq0U4b1ovA
    Following
    o
    Message
    o


coded by incandescent

Code:
[bg=transparent; width: 650px; height: 650px; background-color: black; margin: auto; display: flex; align-items: center; justify-content: center; cursor: url(https://cur.cursors-4u.net/symbols/sym-1/sym57.cur), auto !important;][bg=transparent; width: 300px; height: 550px; background: black; margin: auto; border-radius: 20px; border-size: 10px; border-style: solid; border-color: white;][bg=transparent; width: 280px; height: 530px; background-color: #C8C8C8; background-size: cover; margin: auto; border-radius: 10px;][bg=transparent; width: 150px; height: 10px; position: relative; top: -12px; background-color: black; margin: auto; border-radius: 0px 0px 10px 10px; z-index: 2;][/bg][bg=transparent; width: 100%; height: 14px; background-color: #F5F5F5; position: relative; bottom: 40px; right: 10px; z-index: 1; border-radius: 10px 10px 0px 0px;][border=0px; color: black; position: relative; bottom: 19px; right: 10px;][size=4][b]2:09[/b][/size][/border][border=0px; color: black; position: relative; bottom: 67px; left: 25px;][size=2][fa]far fa-location-arrow[/fa][/size][/border][size=2][border=0px; color: black; position: relative; bottom: 109px; left: 18px; text-align: right; letter-spacing: 6px;][size=3][fa]fad fa-signal-4[/fa][fa]fas fa-wifi[/fa][fa]far fa-battery-three-quarters[/fa][/size][/border][/size][/bg][bg=transparent; width: 125%; height: 498px; transform: rotate(180deg); position: relative; bottom: 39px; right: 54px; ][tabs]
[tab=I][comment]


FIFTH TAB : profile page


[/comment][bg=transparent; width: 650px; height: 650px; background-color: black; margin: auto; display: flex; align-items: center; justify-content: center; cursor: url(https://cur.cursors-4u.net/symbols/sym-1/sym57.cur), auto !important; position: absolute; bottom: -96px; left: -159px; pointer-events: none;][border=3px; width: 300px; height: 550px; background-color: black; position: absolute; top: 46px; left: 172px; border-radius: 20px; border-size: 10px; border-style: solid; border-color: white; pointer-events: none;][border=0px; padding: 0px; width: 300px; height: 30px; background-color: #C8C8C8; position: relative; top: 20px;][/border][/border][/bg][bg=transparent; height: 461px; background-color: #F5F5F5; width: 280px; transform: rotate(180deg); position: absolute; left: 26px; bottom: -4px;][border=0px; background-color: #F5F5F5; height: 12px; width: 100%; position: relative; right: 10px; bottom: 11px; display: flex; justify-content: center; align-items: center;][border=0px;][b][comment]


profile username


[/comment]username[/b][/border][/border][border=0px; background-color: #F5F5F5; height: 70px; width: 100%; position: relative; right: 10px; bottom: 11px; display: flex; align-items: center;][comment]


profile pic


[/comment][bg=transparent; background: url(https://i.pinimg.com/564x/59/2b/7d/592b7d958d8f976a44656b37e5896cac.jpg); background-size: cover; height: 50px; width: 50px; border-radius: 100px; position: relative; left: 8px;][/bg][border=3px; border-style: solid; border-color: #F5F5F5; background-color: #F5F5F5; position: relative; left: 20px; text-align: center; font-size: 14px; line-height: 13px;][comment]


posts, followers, following


[/comment][b]9[/b]
[size=3]posts[/size][/border][border=3px; border-style: solid; border-color: #F5F5F5; background-color: #F5F5F5; position: relative; left: 20px; text-align: center; font-size: 14px; line-height: 13px;][b]1,123[/b]
[size=3]followers[/size][/border][border=3px;border-style: solid; border-color: #F5F5F5;  background-color: #F5F5F5; position: relative; left: 20px; text-align: center; font-size: 14px; line-height: 13px;][b]1,054[/b]
[size=3]following[/size][/border][/border][border=0px; border-style: solid; background-color: #F5F5F5; width: 100%; position: relative; right: 10px; bottom: 11px; display: inline-block; align-items: center;][border=0px; padding: 0px; line-height: 15px;][size=3][comment]


instagram bio


[/comment][b]vivian ♡[/b]
[color=#838383]Just For Fun[/color]
no regrets, coyote
[URL=https://www.youtube.com/watch?v=-oq0U4b1ovA]youtube.com/watch?v=-oq0U4b1ovA[/URL][/size][/border][/border][border=0px; padding: 0px; width: 100%; position: relative; bottom: 11px; display: flex; align-items: center; justify-content: center;][border=1px; width: 130px; border-style: solid; border-color: #C8C8C8; background-color: white; border-radius: 5px; padding: 0px; font-size: 12px; text-align: center;]Following[/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=1px; width: 130px; border-style: solid; border-color: #C8C8C8; background-color: white; border-radius: 5px; padding: 0px; font-size: 12px; text-align: center;]Message[/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=1px; width: 20px; border-style: solid; border-color: #C8C8C8; background-color: white; border-radius: 5px; padding: 0px; font-size: 12px; text-align: center;][fa]fal fa-angle-down[/fa][/border][/border][bg=transparent; height: 230px; width: 100%; position: relative; right: 10px; bottom: 11px; overflow: hidden;][border=0px; padding: 0px; line-height: 15px; position: relative; bottom: 5px; text-align: center; position: relative; top: 5px;][fa]fal fa-th[/fa][border=1px; border-style: solid; border-color: #C8C8C8; background-color: white; width: 280px; height: 197px; position: absolute; right: -11px; top: 28px; overflow: hidden;][border=0px; width: 107%; height: 197px; position: relative; bottom: 10px; right: 10px; overflow-y: scroll; overflow-x: hidden;][border=0px; width: 100%; position: relative; bottom: 12px; right: 10px; display: flex; align-items: center; flex-flow: row nowrap; justify-content: space-between;][comment]


profile posts


[/comment][border=0px; background: url(https://i.pinimg.com/564x/9a/0e/d9/9a0ed93608f1c03d357467f1f69f825e.jpg); background-size: cover; height: 71px; width: 71px;][/border][border=0px; background: url(https://i.pinimg.com/564x/4e/a6/1f/4ea61f6902bd2b3cce2ff5141d79d22f.jpg); background-size: cover; height: 71px; width: 71px;][/border][border=0px; background: url(https://i.pinimg.com/564x/c4/df/b0/c4dfb009739592a8c5961d18882c4b31.jpg); background-size: cover; height: 71px; width: 71px;][/border][/border][border=0px; width: 100%; position: relative; bottom: 20px; right: 10px; display: flex; align-items: center; flex-flow: row nowrap; justify-content: space-between; position: relative; bottom: 27px;][border=0px; background: url(https://s3-media0.fl.yelpcdn.com/bphoto/p6os8_nvDQO02no8a5zCIg/348s.jpg); background-size: cover; height: 71px; width: 71px;][/border][border=0px; background: url(https://i.pinimg.com/564x/47/cd/b2/47cdb2fc32ba108a944d8ffe189875c5.jpg); background-size: cover; height: 71px; width: 71px;][/border][border=0px; background: url(https://i.pinimg.com/564x/d7/fc/c5/d7fcc5cde894ad6e2d29c42bb3fbfdb8.jpg); background-size: cover; height: 71px; width: 71px;][/border][/border][border=0px; width: 100%; position: relative; bottom: 30px; right: 10px; display: flex; align-items: center; flex-flow: row nowrap; justify-content: space-between; position: relative; bottom: 44px;][border=0px; background: url(https://i.pinimg.com/564x/aa/2c/66/aa2c66b0bf7792138ddde0f0b013c5d0.jpg); background-size: cover; height: 71px; width: 71px;][/border][border=0px; background: url(https://i.pinimg.com/564x/e3/94/52/e39452150f68c11ab4d03e0e12dc5cf8.jpg); background-size: cover; height: 71px; width: 71px;][/border][border=0px; background: url(https://i.pinimg.com/564x/89/86/3e/89863e57ba56efee8c7e01d0159e9cda.jpg); background-size: cover; height: 71px; width: 71px;][/border][/border][/border][/border][/border][/bg][/bg]
[/tab]
[tab=I][comment]


FOURTH TAB : activity, relationships


[/comment][bg=transparent; width: 650px; height: 650px; background-color: black; margin: auto; display: flex; align-items: center; justify-content: center; cursor: url(https://cur.cursors-4u.net/symbols/sym-1/sym57.cur), auto !important; position: absolute; bottom: -96px; left: -159px; pointer-events: none;][border=3px; width: 300px; height: 550px; background-color: black; position: absolute; top: 46px; left: 172px; border-radius: 20px; border-size: 10px; border-style: solid; border-color: white; pointer-events: none;][border=0px; padding: 0px; width: 300px; height: 30px; background-color: #C8C8C8; position: relative; top: 20px;][/border][/border][/bg][bg=transparent; height: 460px; background-color: #F5F5F5; width: 280px; transform: rotate(180deg); position: absolute; left: 26px; bottom: -3px; overflow: hidden;][border=0px; height: 459px; background-color: white; width: 110%; position: relative; right: 10px; bottom: 10px; overflow-y: scroll; overflow-x: hidden;][border=1px; border-color: #C8C8C8; border-style: solid; background-color: #F5F5F5; height: 12px; width: 100%; position: relative; right: 11px; bottom: 10px; display: flex; justify-content: center; align-items: center;][border=0px;][b]activity[/b][/border][/border][border=0px; width: 100%; height: 10px; position: relative; bottom: 10px; right: 10px; display: flex; align-items: center;][border=0px; font-size: 16px;][b]relationships[/b][/border][/border][border=0px; padding: 0px; width: 110%; position: relative; bottom: 10px; right: 10px; display: flex; align-items: center;][border=0px][/border][comment]


relationships over here


[/comment][border=0px; background-color: black; height: 15px; width: 15px; border-radius: 50px;][/border][border=0px; font-size: 13px; line-height: 13px; text-align: justify; width: 70%; width: 70%;][b]person[/b]
info[/border][/border][border=0px; padding: 0px; width: 110%; position: relative; bottom: 10px; right: 10px; display: flex; align-items: center;][border=0px][/border][border=0px; background-color: black; height: 15px; width: 15px; border-radius: 50px;][/border][border=0px; font-size: 13px; line-height: 13px; text-align: justify; width: 70%; width: 70%;][b]person[/b]
info[/border][/border][border=0px; padding: 0px; width: 110%; position: relative; bottom: 10px; right: 10px; display: flex; align-items: center;][border=0px][/border][border=0px; background-color: black; height: 15px; width: 15px; border-radius: 50px;][/border][border=0px; font-size: 13px; line-height: 13px; text-align: justify; width: 70%; width: 70%;][b]person[/b]
info[/border][/border][border=0px; padding: 0px; width: 110%; position: relative; bottom: 10px; right: 10px; display: flex; align-items: center;][border=0px][/border][border=0px; background-color: black; height: 15px; width: 15px; border-radius: 50px;][/border][border=0px; font-size: 13px; line-height: 13px; text-align: justify; width: 70%; width: 70%][b]person[/b]
info[/border][/border][/border][/bg]
[/tab]
[tab=i]hidden tab in the middle
[/tab]
[tab=i][comment]


SECOND TAB : search bar, likes and dislikes


[/comment][bg=transparent; width: 650px; height: 650px; background-color: black; margin: auto; display: flex; align-items: center; justify-content: center; cursor: url(https://cur.cursors-4u.net/symbols/sym-1/sym57.cur), auto !important; position: absolute; bottom: -96px; left: -159px; pointer-events: none;][border=3px; width: 300px; height: 550px; background-color: black; position: absolute; top: 46px; left: 172px; border-radius: 20px; border-size: 10px; border-style: solid; border-color: white; pointer-events: none;][border=0px; padding: 0px; width: 300px; height: 30px; background-color: #C8C8C8; position: relative; top: 20px;][/border][/border][/bg][bg=transparent; height: 458px; background-color: white; width: 280px; transform: rotate(180deg); position: absolute; left: 26px; bottom: -1px; overflow: hidden;][border=1px; padding: 20px; border-style: solid; border-color: #C8C8C8; background-color: #F5F5F5; width: 100%; position: relative; right: 11px; bottom: 11px; display: flex; justify-content: center; align-items: center; flex-flow: row nowrap;][border=0px; width: 75%; padding: 6px; background-color: #E1E1E1; bottom: 2px; border-radius: 5px; position: relative; right: 10px; color: #838383;][size=3][fa]fal fa-search[/fa][/size] search[/border] [border=0px; height: 10px; width: 50px; display: flex; align-items: center; justify-content: center;]cancel[/border][/border][border=0px; padding: 0px; width: 110%; height: 423px; position: relative; bottom: 11px; right: 10px; overflow: hidden][border=0px; width: 110%; height: 414px; position: relative; bottom: 11px; right: 10px; overflow-y: scroll; overflow-x: hidden;][border=0px; width: 100%; height: 10px; position: relative; bottom: 28px; right: 8px; display: flex; align-items: center;][border=0px; font-size: 16px;]wawa[/border][/border][border=0px; width: 100%; height: 10px; position: relative; bottom: 28px; right: 8px; display: flex; align-items: center;][border=0px; font-size: 16px;][comment]


likes


[/comment][b]likes[/b][/border][/border][border=0px; padding: 0px; width: 100%; position: relative; bottom: 28px; right: 8px; display: flex; align-items: center;][border=0px][/border][border=0px; background: url(https://www.cottodeste.us/media/immagini/185_n_COTTODESTE-BLACK-WHITE-black-minimale.jpg); background-size: cover; height: 15px; width: 15px; border-radius: 50px;][/border][border=0px; font-size: 13px; line-height: 13px; text-align: justify; width: 70%; width: 70%;][b]like[/b]
info[/border][/border][border=0px; padding: 0px; width: 100%; position: relative; bottom: 28px; right: 8px; display: flex; align-items: center;][border=0px][/border][border=0px; background: url(https://www.cottodeste.us/media/immagini/185_n_COTTODESTE-BLACK-WHITE-black-minimale.jpg); background-size: cover; height: 15px; width: 15px; border-radius: 50px;][/border][border=0px; font-size: 13px; line-height: 13px; text-align: justify; width: 70%; width: 70%][b]like[/b]
info[/border][/border][border=0px; padding: 0px; width: 100%; position: relative; bottom: 28px; right: 8px; display: flex; align-items: center;][border=0px][/border][border=0px; background: url(https://www.cottodeste.us/media/immagini/185_n_COTTODESTE-BLACK-WHITE-black-minimale.jpg); background-size: cover; height: 15px; width: 15px; border-radius: 50px;][/border][border=0px; font-size: 13px; line-height: 13px; text-align: justify; width: 70%; width: 70%;][b]like[/b]
info[/border][/border][border=0px; padding: 0px; width: 100%; position: relative; bottom: 28px; right: 8px; display: flex; align-items: center;][border=0px][/border][border=0px; background: url(https://www.cottodeste.us/media/immagini/185_n_COTTODESTE-BLACK-WHITE-black-minimale.jpg); background-size: cover; height: 15px; width: 15px; border-radius: 50px;][/border][border=0px; font-size: 13px; line-height: 13px; text-align: justify; width: 70%; width: 70%][b]like[/b]
info[/border][/border][border=0px; padding: 0px; width: 100%; position: relative; bottom: 28px; right: 8px; display: flex; align-items: center;][border=0px][/border][border=0px; background: url(https://www.cottodeste.us/media/immagini/185_n_COTTODESTE-BLACK-WHITE-black-minimale.jpg); background-size: cover; height: 15px; width: 15px; border-radius: 50px;][/border][border=0px; font-size: 13px; line-height: 13px; text-align: justify; width: 70%; width: 70%][b]like[/b]
info[/border][/border][border=0px; width: 100%; height: 10px; position: relative; bottom: 28px; right: 8px; display: flex; align-items: center;][border=0px; font-size: 16px;][comment]


dislikes


[/comment][b]dislikes[/b][/border][/border][border=0px; padding: 0px; width: 100%; position: relative; bottom: 28px; right: 8px; display: flex; align-items: center;][border=0px][/border][border=0px; background: url(https://www.cottodeste.us/media/immagini/185_n_COTTODESTE-BLACK-WHITE-black-minimale.jpg); background-size: cover; height: 15px; width: 15px; border-radius: 50px;][/border][border=0px; font-size: 13px; line-height: 13px; text-align: justify; width: 70%; width: 70%][b]dislike[/b]
info[/border][/border][border=0px; padding: 0px; width: 100%; position: relative; bottom: 28px; right: 8px; display: flex; align-items: center;][border=0px][/border][border=0px; background: url(https://www.cottodeste.us/media/immagini/185_n_COTTODESTE-BLACK-WHITE-black-minimale.jpg); background-size: cover; height: 15px; width: 15px; border-radius: 50px;][/border][border=0px; font-size: 13px; line-height: 13px; text-align: justify; width: 70%; width: 70%][b]dislike[/b]
info[/border][/border][border=0px; padding: 0px; width: 100%; position: relative; bottom: 28px; right: 8px; display: flex; align-items: center;][border=0px][/border][border=0px; background: url(https://www.cottodeste.us/media/immagini/185_n_COTTODESTE-BLACK-WHITE-black-minimale.jpg); background-size: cover; height: 15px; width: 15px; border-radius: 50px;][/border][border=0px; font-size: 13px; line-height: 13px; text-align: justify; width: 70%; width: 70%][b]dislike[/b]
info[/border][/border][border=0px; padding: 0px; width: 100%; position: relative; bottom: 28px; right: 8px; display: flex; align-items: center;][border=0px][/border][border=0px; background: url(https://www.cottodeste.us/media/immagini/185_n_COTTODESTE-BLACK-WHITE-black-minimale.jpg); background-size: cover; height: 15px; width: 15px; border-radius: 50px;][/border][border=0px; font-size: 13px; line-height: 13px; text-align: justify; width: 70%; width: 70%;][b]dislike[/b]
info[/border][/border][border=0px; padding: 0px; width: 100%; position: relative; bottom: 28px; right: 8px; display: flex; align-items: center;][border=0px][/border][border=0px; background: url(https://www.cottodeste.us/media/immagini/185_n_COTTODESTE-BLACK-WHITE-black-minimale.jpg); background-size: cover; height: 15px; width: 15px; border-radius: 50px;][/border][border=0px; font-size: 13px; line-height: 13px; text-align: justify; width: 70%; width:  70%;][b]dislike[/b]
info[/border][/border][border=0px; width: 100%; height: 10px; position: relative; bottom: 28px; right: 8px; display: flex; align-items: center;][border=0px; font-size: 16px;][comment]


hobbies


[/comment][b]hobbies[/b][/border][/border][border=0px; padding: 0px; width: 100%; position: relative; bottom: 28px; right: 8px; display: flex; align-items: center;][border=0px][/border][border=0px; background: url(https://www.cottodeste.us/media/immagini/185_n_COTTODESTE-BLACK-WHITE-black-minimale.jpg); background-size: cover; height: 15px; width: 15px; border-radius: 50px;][/border][border=0px; font-size: 13px; line-height: 13px; text-align: justify; width: 70%; width: 70%;][b]hobby[/b]
info[/border][/border][border=0px; padding: 0px; width: 100%; position: relative; bottom: 28px; right: 8px; display: flex; align-items: center;][border=0px][/border][border=0px; background: url(https://www.cottodeste.us/media/immagini/185_n_COTTODESTE-BLACK-WHITE-black-minimale.jpg); background-size: cover; height: 15px; width: 15px; border-radius: 50px;][/border][border=0px; font-size: 13px; line-height: 13px; text-align: justify; width: 70%; width: 70%;][b]hobby[/b]
info[/border][/border][border=0px; padding: 0px; width: 100%; position: relative; bottom: 28px; right: 8px; display: flex; align-items: center;][border=0px][/border][border=0px; background: url(https://www.cottodeste.us/media/immagini/185_n_COTTODESTE-BLACK-WHITE-black-minimale.jpg); background-size: cover; height: 15px; width: 15px; border-radius: 50px;][/border][border=0px; font-size: 13px; line-height: 13px; text-align: justify; width: 70%; width: 70%;][b]hobby[/b]
info[/border][/border][border=0px; padding: 0px; width: 100%; position: relative; bottom: 28px; right: 8px; display: flex; align-items: center;][border=0px][/border][border=0px; background: url(https://www.cottodeste.us/media/immagini/185_n_COTTODESTE-BLACK-WHITE-black-minimale.jpg); background-size: cover; height: 15px; width: 15px; border-radius: 50px;][/border][border=0px; font-size: 13px; line-height: 13px; text-align: justify; width: 70%; width: 70%;][b]hobby[/b]
info[/border][/border][border=0px; width: 100%; height: 10px; position: relative; bottom: 28px; right: 8px; display: flex; align-items: center;][border=0px; font-size: 16px;][comment]


education


[/comment][b]education[/b][/border][/border][border=0px; padding: 0px; width: 100%; position: relative; bottom: 28px; right: 8px; display: flex; align-items: center;][border=0px][/border][border=0px; background: url(https://www.cottodeste.us/media/immagini/185_n_COTTODESTE-BLACK-WHITE-black-minimale.jpg); background-size: cover; height: 15px; width: 15px; border-radius: 50px;][/border][border=0px; font-size: 13px; line-height: 13px; text-align: justify; width: 70%;][b]education[/b]
info[/border][/border][border=0px; padding: 0px; width: 100%; position: relative; bottom: 28px; right: 8px; display: flex; align-items: center;][border=0px][/border][border=0px; background: url(https://www.cottodeste.us/media/immagini/185_n_COTTODESTE-BLACK-WHITE-black-minimale.jpg); background-size: cover; height: 15px; width: 15px; border-radius: 50px;][/border][border=0px; font-size: 13px; line-height: 13px; text-align: justify; width: 70%;][b]education[/b]
info[/border][/border][border=0px; padding: 0px; width: 100%; position: relative; bottom: 28px; right: 8px; display: flex; align-items: center;][border=0px][/border][border=0px; background: url(https://www.cottodeste.us/media/immagini/185_n_COTTODESTE-BLACK-WHITE-black-minimale.jpg); background-size: cover; height: 15px; width: 15px; border-radius: 50px;][/border][border=0px; font-size: 13px; line-height: 13px; text-align: justify; width: 70%;][b]education[/b]
info[/border][/border][/border][/border][/bg]
[/tab]
[tab=i][comment]


FIRST TAB : timeline, posts


[/comment][bg=transparent; width: 650px; height: 650px; background-color: black; margin: auto; display: flex; align-items: center; justify-content: center; cursor: url(https://cur.cursors-4u.net/symbols/sym-1/sym57.cur), auto !important; position: absolute; bottom: -96px; left: -159px; pointer-events: none;][border=3px; width: 300px; height: 550px; background-color: black; position: absolute; top: 46px; left: 172px; border-radius: 20px; border-size: 10px; border-style: solid; border-color: white; pointer-events: none;][border=0px; padding: 0px; width: 300px; height: 30px; background-color: #C8C8C8; position: relative; top: 20px;][/border][/border][/bg][bg=transparent; height: 458px; background-color: pink; width: 280px; transform: rotate(180deg); position: absolute; left: 26px; bottom: -1px; overflow: hidden;][border=1px; border-style: solid; border-color: #C8C8C8; background-color: #F5F5F5; height: 12px; width: 100%; position: relative; right: 11px; bottom: 11px; display: flex; justify-content: center; align-items: center;][border=0px; position: relative; right: 66px;][fa]fal fa-camera[/fa][/border][border=0px;][b]Instagram[/b][/border][border=0px; position: relative; left: 66px;][fa]fal fa-paper-plane[/fa][/border][/border][border=0px;  width: 100%; height: 426px; background-color: white; position: relative; bottom: 11px; right: 10px; overflow: hidden;][border=0px; width: 300px; height: 426px; position: relative; bottom: 10px; right: 10px; overflow-y: scroll; overflow-x: hidden;][border=0px; width: 100%; position: relative; right: 10px; bottom: 11px; display: flex; justify-content: center; align-items: center;][comment]


instagram story profile pictures here


[/comment][border=0px; border-radius: 50px; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/59/2b/7d/592b7d958d8f976a44656b37e5896cac.jpg); background-size: cover; display: flex; align-items: center; justify-content: center;][/border][border=0px][/border][border=0px; border-radius: 50px; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/59/2b/7d/592b7d958d8f976a44656b37e5896cac.jpg); background-size: cover; display: flex; align-items: center; justify-content: center;][/border][border=0px][/border][border=0px; border-radius: 50px; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/59/2b/7d/592b7d958d8f976a44656b37e5896cac.jpg); background-size: cover; display: flex; align-items: center; justify-content: center;][/border][border=0px][/border][border=0px; border-radius: 50px; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/59/2b/7d/592b7d958d8f976a44656b37e5896cac.jpg); background-size: cover; display: flex; align-items: center; justify-content: center;][/border][border=0px][/border][border=0px; border-radius: 50px; height: 20px; width: 20px; background: url(https://i.pinimg.com/564x/59/2b/7d/592b7d958d8f976a44656b37e5896cac.jpg); background-size: cover; display: flex; align-items: center; justify-content: center;][/border][/border][border=0px; width: 100%; position: relative; right: 10px; bottom: 31px; display: flex; justify-content: center; align-items: center;][border=0px; width: 60px; display: flex; align-items: center; justify-content: center; font-size: 12px; padding: 0px;][comment]


instagram story usernames here


[/comment]you[/border][border=0px][/border][border=0px; width: 60px; display: flex; align-items: center; justify-content: center; font-size: 12px; padding: 0px;]null[/border][border=0px][/border][border=0px; width: 60px; display: flex; align-items: center; justify-content: center; font-size: 12px; padding: 0px;]null[/border][border=0px][/border][border=0px; width: 60px; display: flex; align-items: center; justify-content: center; font-size: 12px; padding: 0px;]null[/border][border=0px][/border][border=0px; width: 60px; display: flex; align-items: center; justify-content: center; font-size: 12px; padding: 0px;]null[/border][/border][comment]


1st post starts here


[/comment][border=1px; border-style: solid; border-color: #C8C8C8; width: 100%; position: relative; bottom: 31px; right: 11px; display: flex; align-items: center;][comment]


1st post pfp and username


[/comment][border=0px; border-radius: 50px; background: url(https://i.pinimg.com/564x/59/2b/7d/592b7d958d8f976a44656b37e5896cac.jpg); background-size: cover; height: 13px; width: 13px;][/border][border=0px; padding: 0px; position: relative; left: 10px; font-size: 14px;][b]username[/b][/border][/border][comment]


1st post picture


[/comment][border=0px; width: 100%; height: 280px; background: url(https://i.pinimg.com/564x/9c/99/e0/9c99e0aaa614837f086c6185d131867e.jpg); background-size: cover; position: relative; bottom: 31px; right: 10px; display: flex; align-items: center;][/border][border=0px; width: 100%; position: relative; bottom: 31px; right: 10px; display: flex;][border=0px; padding: 0px; letter-spacing: 3px;][fa]fal fa-heart[/fa] [fa]fal fa-comment[/fa] [fa]fal fa-paper-plane[/fa][/border][border=0px; padding: 0px; letter-spacing: 3px; position: relative; left: 197px;][fa]fal fa-bookmark[/fa][/border][/border][border=0px; height: 10px; width: 110%; position: relative; bottom: 31px; right: 10px; display: flex; align-items: center;][border=0px; padding: 0px; font-size: 13px;][b]436 likes[/b][/border][/border][border=0px; height: 10px; width: 110%; position: relative; bottom: 36px; right: 10px; display: flex; align-items: center;][border=0px; padding: 0px; font-size: 13px; line-height: 14px;][comment]


1st post username and caption


[/comment][b]username[/b] caption[/border][/border][border=0px; width: 110%; position: relative; bottom: 36px; right: 10px; display: flex; align-items: center; flex-flow: row nowrap;][border=0px; padding: 0px; height: 20px; width: 20px; background-color: black; border-radius: 50px;][/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 0px; font-size: 13px; position: relative;][b]basics[/b] ?[/border][/border][border=0px; width: 110%; position: relative; bottom: 36px; right: 10px; display: flex; align-items: center; flex-flow: row nowrap;][border=0px; padding: 0px; font-size: 13px; position: relative; left: 30px;]--- [b]Hide replies[/b][/border][/border][comment]


1st post comments start here
    ** if your comment is long i recommend deleting "align-items: center"


[/comment][border=0px; width: 100%; position: relative; bottom: 36px; right: 10px; display: flex; flex-flow: row nowrap; align-items: center;][border=0px; width: 10px; position: relative; right: 10px;][/border][border=0px; background-color: black; height: 3px; width: 3px; border-radius: 50px;][/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 0px; width: 200px; font-size: 13px; text-align: justify; line-height: 14px;][b]full name[/b] info[/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 3px; font-size: 12px;][fa]fal fa-heart[/fa][/border][/border][border=0px; width: 100%; position: relative; bottom: 36px; right: 10px; display: flex; flex-flow: row nowrap; align-items: center;][border=0px; width: 10px; position: relative; right: 10px;][/border][border=0px; background-color: black; height: 3px; width: 3px; border-radius: 50px;][/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 0px; width: 200px; font-size: 13px; text-align: justify; line-height: 14px;][b]nickname(s)[/b] info[/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 3px; font-size: 12px;][fa]fal fa-heart[/fa][/border][/border][border=0px; width: 100%; position: relative; bottom: 36px; right: 10px; display: flex; flex-flow: row nowrap; align-items: center;][border=0px; width: 10px; position: relative; right: 10px;][/border][border=0px; background-color: black; height: 3px; width: 3px; border-radius: 50px;][/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 0px; width: 200px; font-size: 13px; text-align: justify; line-height: 14px;][b]age[/b] info[/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 3px; font-size: 12px;][fa]fal fa-heart[/fa][/border][/border][border=0px; width: 100%; position: relative; bottom: 36px; right: 10px; display: flex; flex-flow: row nowrap; align-items: center;][border=0px; width: 10px; position: relative; right: 10px;][/border][border=0px; background-color: black; height: 3px; width: 3px; border-radius: 50px;][/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 0px; width: 200px; font-size: 13px; text-align: justify; line-height: 14px;][b]gender[/b] info[/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 3px; font-size: 12px;][fa]fal fa-heart[/fa][/border][/border][border=0px; width: 100%; position: relative; bottom: 36px; right: 10px; display: flex; flex-flow: row nowrap; align-items: center;][border=0px; width: 10px; position: relative; right: 10px;][/border][border=0px; background-color: black; height: 3px; width: 3px; border-radius: 50px;][/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 0px; width: 200px; font-size: 13px; text-align: justify; line-height: 14px;][b]sexuality[/b] info[/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 3px; font-size: 12px;][fa]fal fa-heart[/fa][/border][/border][border=0px; width: 100%; position: relative; bottom: 36px; right: 10px; display: flex; flex-flow: row nowrap; align-items: center;][border=0px; width: 10px; position: relative; right: 10px;][/border][border=0px; background-color: black; height: 3px; width: 3px; border-radius: 50px;][/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 0px; width: 200px; font-size: 13px; text-align: justify; line-height: 14px;][b]nationality[/b] info[/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 3px; font-size: 12px;][fa]fal fa-heart[/fa][/border][/border][border=0px; width: 100%; position: relative; bottom: 36px; right: 10px; display: flex; flex-flow: row nowrap; align-items: center;][border=0px; width: 10px; position: relative; right: 10px;][/border][border=0px; background-color: black; height: 3px; width: 3px; border-radius: 50px;][/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 0px; width: 200px; font-size: 13px; text-align: justify; line-height: 14px;][b]occupation[/b] info[/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 3px; font-size: 12px;][fa]fal fa-heart[/fa][/border][/border][border=0px; width: 100%; position: relative; bottom: 36px; right: 10px; display: flex; flex-flow: row nowrap; align-items: center;][border=0px; width: 10px; position: relative; right: 10px;][/border][border=0px; background-color: black; height: 3px; width: 3px; border-radius: 50px;][/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 0px; width: 200px; font-size: 13px; text-align: justify; line-height: 14px;][b]room number[/b] info[/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 3px; font-size: 12px;][fa]fal fa-heart[/fa][/border][/border][comment]


second post starts here


[/comment][border=1px; border-style: solid; border-color: #C8C8C8; width: 100%; position: relative; bottom: 31px; right: 11px; display: flex; align-items: center;][comment]


2nd post picture


[/comment][border=0px; border-radius: 50px; background: url(https://i.pinimg.com/564x/59/2b/7d/592b7d958d8f976a44656b37e5896cac.jpg); background-size: cover; height: 13px; width: 13px;][/border][border=0px; padding: 0px; position: relative; left: 10px; font-size: 14px;][comment]


2nd post username and caption


[/comment][b]username[/b][/border][/border][border=0px; width: 100%; height: 280px; background: url(https://i.pinimg.com/564x/43/5e/e8/435ee86a1d69316b091889564a6b9993.jpg); background-size: cover; position: relative; bottom: 31px; right: 10px; display: flex; align-items: center;][/border][border=0px; width: 100%; position: relative; bottom: 31px; right: 10px; display: flex;][border=0px; padding: 0px; letter-spacing: 3px;][fa]fal fa-heart[/fa] [fa]fal fa-comment[/fa] [fa]fal fa-paper-plane[/fa][/border][border=0px; padding: 0px; letter-spacing: 3px; position: relative; left: 197px;][fa]fal fa-bookmark[/fa][/border][/border][border=0px; height: 10px; width: 110%; position: relative; bottom: 31px; right: 10px; display: flex; align-items: center;][border=0px; padding: 0px; font-size: 13px;][b]482likes[/b][/border][/border][border=0px; height: 10px; width: 110%; position: relative; bottom: 36px; right: 10px; display: flex; align-items: center;][border=0px; padding: 0px; font-size: 13px; line-height: 14px;][comment]


2nd post username and caption


[/comment][b]username[/b] caption[/border][/border][border=0px; width: 110%; position: relative; bottom: 36px; right: 10px; display: flex; align-items: center; flex-flow: row nowrap;][border=0px; padding: 0px; height: 20px; width: 20px; background-color: black; border-radius: 50px;][/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 0px; font-size: 13px; position: relative;][b]visage[/b] ?[/border][/border][border=0px; width: 110%; position: relative; bottom: 36px; right: 10px; display: flex; align-items: center; flex-flow: row nowrap;][border=0px; padding: 0px; font-size: 13px; position: relative; left: 30px;]--- [b]Hide replies[/b][/border][/border][comment]


2nd post comments start here
    ** if your comment is long i recommend deleting "align-items: center"


[/comment][border=0px; width: 100%; position: relative; bottom: 36px; right: 10px; display: flex; flex-flow: row nowrap; align-items: start;][border=0px; width: 10px; position: relative; right: 10px;][/border][border=0px; background-color: black; height: 3px; width: 3px; border-radius: 50px;][/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 0px; width: 200px; font-size: 13px; text-align: justify; line-height: 14px;][b]description[/b] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut semper risus. Aliquam varius, urna id ultricies elementum, est ante ullamcorper metus, sit amet vulputate nibh urna id odio. Proin accumsan nunc vulputate tincidunt laoreet. Etiam in lacus venenatis, condimentum dolor vel, consectetur elit. Suspendisse ac placerat urna, mattis imperdiet felis. Mauris quis dictum nisi. Proin vel interdum neque, quis mollis orci. Nam ligula purus, sodales et felis sit amet, semper vulputate nisi. Cras imperdiet tempus placerat. Nam malesuada nulla quis erat imperdiet malesuada.[/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 3px; font-size: 12px;][fa]fal fa-heart[/fa][/border][/border][border=0px; width: 100%; position: relative; bottom: 36px; right: 10px; display: flex; flex-flow: row nowrap; align-items: center;][border=0px; width: 10px; position: relative; right: 10px;][/border][border=0px; background-color: black; height: 3px; width: 3px; border-radius: 50px;][/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 0px; width: 200px; font-size: 13px; text-align: justify; line-height: 14px;][b]clothing style[/b] info[/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 3px; font-size: 12px;][fa]fal fa-heart[/fa][/border][/border][border=0px; width: 100%; position: relative; bottom: 36px; right: 10px; display: flex; flex-flow: row nowrap;][border=0px; width: 10px; position: relative; right: 10px;][/border][border=0px; background-color: black; height: 3px; width: 3px; border-radius: 50px;][/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 0px; width: 200px; font-size: 13px; text-align: justify; line-height: 14px;][b]body mods[/b] info[/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 3px; font-size: 12px;][fa]fal fa-heart[/fa][/border][/border][border=0px; width: 100%; position: relative; bottom: 36px; right: 10px; display: flex; flex-flow: row nowrap; align-items: center;][border=0px; width: 10px; position: relative; right: 10px;][/border][border=0px; background-color: black; height: 3px; width: 3px; border-radius: 50px;][/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 0px; width: 200px; font-size: 13px; text-align: justify; line-height: 14px;][b]faceclaim[/b] info[/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 3px; font-size: 12px;][fa]fal fa-heart[/fa][/border][/border][comment]


third post starts here


[/comment][border=1px; border-style: solid; border-color: #C8C8C8; width: 100%; position: relative; bottom: 31px; right: 11px; display: flex; align-items: center;][comment]


3rd post pfp and username


[/comment][border=0px; border-radius: 50px; background: url(https://i.pinimg.com/564x/59/2b/7d/592b7d958d8f976a44656b37e5896cac.jpg); background-size: cover; height: 13px; width: 13px;][/border][border=0px; padding: 0px; position: relative; left: 10px; font-size: 14px;][b]username[/b][/border][/border][comment]


3rd post picture


[/comment][border=0px; width: 100%; height: 280px; background: url(https://i.pinimg.com/564x/60/08/02/60080249390a29bad0ae493134f3e242.jpg); background-size: cover; position: relative; bottom: 31px; right: 10px; display: flex; align-items: center;][/border][border=0px; width: 100%; position: relative; bottom: 31px; right: 10px; display: flex;][border=0px; padding: 0px; letter-spacing: 3px;][fa]fal fa-heart[/fa] [fa]fal fa-comment[/fa] [fa]fal fa-paper-plane[/fa][/border][border=0px; padding: 0px; letter-spacing: 3px; position: relative; left: 197px;][fa]fal fa-bookmark[/fa][/border][/border][border=0px; height: 10px; width: 110%; position: relative; bottom: 31px; right: 10px; display: flex; align-items: center;][border=0px; padding: 0px; font-size: 13px;][b]512 likes[/b][/border][/border][border=0px; height: 10px; width: 103%; position: relative; bottom: 36px; right: 10px; display: flex; align-items: center;][border=0px; padding: 0px; font-size: 13px; line-height: 14px;][comment]


3rd post username and caption


[/comment][b]username[/b] caption[/border][/border][border=0px; width: 110%; position: relative; bottom: 36px; right: 10px; display: flex; align-items: center; flex-flow: row nowrap;][border=0px; padding: 0px; height: 20px; width: 20px; background-color: black; border-radius: 50px;][/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 0px; font-size: 13px; position: relative;][b]persona[/b] ?[/border][/border][border=0px; width: 110%; position: relative; bottom: 36px; right: 10px; display: flex; align-items: center; flex-flow: row nowrap;][border=0px; padding: 0px; font-size: 13px; position: relative; left: 30px;]--- [b]Hide replies[/b][/border][/border][comment]


3rd post comments start here
    ** if your comment is long i recommend deleting "align-items: center"


[/comment][border=0px; width: 100%; position: relative; bottom: 36px; right: 10px; display: flex; flex-flow: row nowrap; align-items: top;][border=0px; width: 10px; position: relative; right: 10px;][/border][border=0px; background-color: black; height: 3px; width: 3px; border-radius: 50px;][/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 0px; width: 200px; font-size: 13px; text-align: justify; line-height: 14px;][b]vices[/b] info[/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 3px; font-size: 12px;][fa]fal fa-heart[/fa][/border][/border][border=0px; width: 100%; position: relative; bottom: 36px; right: 10px; display: flex; flex-flow: row nowrap; align-items: top;][border=0px; width: 10px; position: relative; right: 10px;][/border][border=0px; background-color: black; height: 3px; width: 3px; border-radius: 50px;][/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 0px; width: 200px; font-size: 13px; text-align: justify; line-height: 14px;][b]virtues[/b] info[/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 3px; font-size: 12px;][fa]fal fa-heart[/fa][/border][/border][border=0px; width: 100%; position: relative; bottom: 36px; right: 10px; display: flex; flex-flow: row nowrap;][border=0px; width: 10px; position: relative; right: 10px;][/border][border=0px; background-color: black; height: 3px; width: 3px; border-radius: 50px;][/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 0px; width: 200px; font-size: 13px; text-align: justify; line-height: 14px;][b]description[/b] info[/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 3px; font-size: 12px;][fa]fal fa-heart[/fa][/border][/border][comment]


fourth post starts here


[/comment][border=1px; border-style: solid; border-color: #C8C8C8; width: 100%; position: relative; bottom: 31px; right: 11px; display: flex; align-items: center;][comment]


4th post pfp and username


[/comment][border=0px; border-radius: 50px; background: url(https://i.pinimg.com/564x/59/2b/7d/592b7d958d8f976a44656b37e5896cac.jpg); background-size: cover; height: 13px; width: 13px;][/border][border=0px; padding: 0px; position: relative; left: 10px; font-size: 14px;][b]username[/b][/border][/border][comment]


4th post picture


[/comment][border=0px; width: 100%; height: 280px; background: url(https://i.pinimg.com/564x/dc/2f/7f/dc2f7f02e0e3325220a1b71005c9afdd.jpg); background-size: cover; position: relative; bottom: 31px; right: 10px; display: flex; align-items: center;][/border][border=0px; width: 100%; position: relative; bottom: 31px; right: 10px; display: flex;][border=0px; padding: 0px; letter-spacing: 3px;][fa]fal fa-heart[/fa] [fa]fal fa-comment[/fa] [fa]fal fa-paper-plane[/fa][/border][border=0px; padding: 0px; letter-spacing: 3px; position: relative; left: 197px;][fa]fal fa-bookmark[/fa][/border][/border][border=0px; height: 10px; width: 110%; position: relative; bottom: 31px; right: 10px; display: flex; align-items: center;][border=0px; padding: 0px; font-size: 13px;][b]504 likes[/b][/border][/border][border=0px; height: 10px; width: 103%; position: relative; bottom: 36px; right: 10px; display: flex; align-items: center;][border=0px; padding: 0px; font-size: 13px; line-height: 14px;][comment]


4th post username and caption


[/comment][b]username[/b] caption[/border][/border][border=0px; width: 110%; position: relative; bottom: 36px; right: 10px; display: flex; align-items: center; flex-flow: row nowrap;][border=0px; padding: 0px; height: 20px; width: 20px; background-color: black; border-radius: 50px;][/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 0px; font-size: 13px; position: relative;][b]archive[/b] ?[/border][/border][border=0px; width: 110%; position: relative; bottom: 36px; right: 10px; display: flex; align-items: center; flex-flow: row nowrap;][border=0px; padding: 0px; font-size: 13px; position: relative; left: 30px;]--- [b]Hide replies[/b][/border][/border][comment]


4th post comments start here
    ** if your comment is long i recommend deleting "align-items: center"


[/comment][border=0px; width: 100%; position: relative; bottom: 36px; right: 10px; display: flex; flex-flow: row nowrap;][border=0px; width: 10px; position: relative; right: 10px;][/border][border=0px; background-color: black; height: 3px; width: 3px; border-radius: 50px;][/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 0px; width: 200px; font-size: 13px; text-align: justify; line-height: 14px;][b]history[/b] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum, leo quis maximus ultricies, purus mi mollis massa, sit amet maximus sem leo quis augue. Proin elementum bibendum dictum. Vivamus sapien turpis, tristique eget suscipit placerat, vestibulum sed velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque ac dictum libero, eleifend dapibus lacus. Phasellus lacinia nisi nec nunc maximus, eget porta quam tincidunt. Curabitur ac turpis dictum, cursus lorem sed, scelerisque est. Morbi eget neque quis tortor blandit eleifend eu vel dolor. Quisque sit amet tempus lacus.

Proin consequat purus tortor, non consequat eros consectetur eget. Proin orci velit, finibus id mi ac, pharetra varius sem. Praesent euismod vestibulum tincidunt. Quisque sem diam, ultricies vel magna sit amet, vestibulum vestibulum sapien. In semper leo non elit tincidunt, eget ultricies erat tempus. In blandit dignissim erat eget ultrices. Praesent quis eros sed libero egestas maximus. Praesent elementum eros quam, eu pellentesque augue imperdiet eu. Donec mollis risus in velit euismod, sit amet gravida est consectetur. Phasellus laoreet in sem eget pellentesque. Nam vitae pretium sapien. Curabitur ultrices magna eu tincidunt ornare. Nunc et sem ut dolor auctor hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.[/border][border=0px; padding: 0px; opacity: 0%;]o[/border][border=0px; padding: 3px; font-size: 12px;][fa]fal fa-heart[/fa][/border][/border][/border][/border][/bg]
[/tab]
[/tabs][/bg][border=0px; border-radius: 0px 0px 10px 10px; height: 17px; background-color: white; width: 100%; position: relative; bottom: 79px; right: 10px; pointer-events: none; display: flex; justify-content: center; align-items: center;][border=0px; padding: 0px; width: 20%; height: 30px; display: flex; align-items: center; justify-content: center;][fa]fal fa-home-lg-alt[/fa][/border][border=0px; padding: 0px; width: 20%; height: 30px; display: flex; align-items: center; justify-content: center;][fa]fal fa-search[/fa][/border][border=0px; padding: 0px; width: 20%; height: 30px; display: flex; align-items: center; justify-content: center; pointer-events: auto;][fa]fal fa-plus-square[/fa][/border][border=0px; padding: 0px; width: 20%; height: 30px; display: flex; align-items: center; justify-content: center;][fa]fal fa-heart[/fa][/border][border=0px; padding: 0px; width: 20%; height: 30px; display: flex; align-items: center; justify-content: center;][comment]


bottom bar profile pic here


[/comment][border=0px; padding: 0px; height: 17px; width: 17px; background: url(https://i.pinimg.com/564x/59/2b/7d/592b7d958d8f976a44656b37e5896cac.jpg); background-size: cover; border-radius: 50px;][/border][/border][/border][/bg][/bg][/bg]
[bg=transparent; height: 10px; width: 650px; margin: auto; text-align: center; padding: 0px; position: relative; bottom: 20px;][border=0px; color: white; letter-spacing: 2px; font-size: 10px;]coded by incandescent[/border][/bg]
 
Last edited:
character post no. 5
ic post based on this thing : ) has a music player and a hidden scroll for both the character info thing and the main text

bar at the top of the main text insp weldherwings weldherwings , bg creds chillcrafting

firstname lastname
label
reflets dans l'eau by debussy
the colour of my soul is iron-grey and sad bats wheel about the steeple of my dreams.

mood info
location info
tags info
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor et elit a auctor. Nam tincidunt non nisl vitae venenatis. Nunc pellentesque sed quam tincidunt scelerisque. Integer quis convallis nulla, nec mollis massa. Suspendisse scelerisque, nibh ac iaculis luctus, metus nibh pellentesque enim, egestas vulputate orci purus et nibh. Praesent eget nibh vitae diam commodo feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc lobortis auctor ullamcorper. Aenean ut ipsum sed nunc pharetra pellentesque vitae non sem. Phasellus laoreet ultrices urna, ut sodales enim ullamcorper ac. Ut ullamcorper elementum urna non auctor. Maecenas nec fringilla ligula.

Pellentesque nec ipsum lobortis, volutpat augue quis, bibendum sapien. Maecenas viverra id odio quis efficitur. Donec non tristique dolor, sed vulputate tortor. Duis et dui tincidunt, malesuada mi et, scelerisque eros. Vestibulum tempor blandit massa in fermentum. Morbi pharetra sollicitudin euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ut commodo nisi. Donec sit amet consequat risus, quis cursus enim. Vivamus a dui eu dolor efficitur mattis in non lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pellentesque porttitor fringilla. Morbi eu arcu at quam sodales mattis aliquam ac nibh. Ut porta, quam in bibendum aliquet, arcu erat sagittis ante, non varius eros neque fermentum nibh. Donec viverra orci in nisl vulputate lacinia.
coded by incandescent

Code:
[border=0px; margin: auto; width: 750px; height: 500px; cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur817.cur), auto !important;][border=0px; border-top: 1px solid #ac9d88; border-right: 1px solid #ac9d88; border-left: 1px solid #ac9d88; width: 726px; height: 50px; position: relative; bottom: 10px; background-color: #ac9d88; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ac9d88;][border=0px; padding: 0px; font-size: 30px; color: #6b4e37; font-weight: bold; letter-spacing: -1px; display: flex; align-items: center; flex-flow: row wrap][fa]fas fa-heart-circle[/fa][border=0px; padding: 0px 3px 10px 10px;][/border][comment]


top name


[/comment]firstname lastname[/border][border=0px; padding: 0px; font-size: 30px; color: #6b4e37; font-weight: bold; letter-spacing: -1px; display: flex; align-items: center; flex-flow: row wrap;][border=0px;][comment]


top label


[/comment]label[/border][/border][/border][border=0px; height: 429px; width: 100%; position: relative; bottom: 10px; right: 10px; display: flex; align-items: center; justify-content: space-between; overflow: hidden;][border=0px;  border-left: 1px solid #ac9d88; border-bottom: 1px solid #ac9d88; border-right: 1px solid #ac9d88; width: 40%; height: 449px; padding: 0px;][comment]


rectangle image


[/comment][border=0px; width: 93%; height: 180px; background: url(https://66.media.tumblr.com/6719c14309244a7b807c39dabf9dd585/73d023da25146312-1f/s1280x1920/c2452cc164bf1a947b3a16d6670de4a6d2ffa203.jpg); background-size: cover; position: relative; bottom: 10px; border-bottom: 1px solid #ac9d88;][/border][border=0px; width: 93%; height: 238px; background-color: #d8d6d2; position: relative; bottom: 10px;][border=0px; width: 80%; margin: auto; height: 120px; position: relative; top: 80px; right: 1px;][border=1px; border-color: #ac9d88; border-style: solid; width: 100%; height: 10px; background-color: #ac9d88; position: relative; bottom: 10px; right: 10px;][border=0px; padding: 0px 10px 0px 0px; font-size: 10px; color: #6b4e37; bottom: 2px; position: relative;][fa]fas fa-play[/fa] [fa]fas fa-pause[/fa][/border][border=0px; padding: 0px; font-size: 10px; color: #6b4e37; bottom: 18px; position: relative; left: 27px][b]reflets dans l'eau[/b] by debussy[/border][border=0px; position: relative; bottom: 45px; width: 40px; right: 15px; opacity: 0;][comment]


youtube link


[/comment][MEDIA=youtube]Hyiu7fBUk7o[/MEDIA][/border][/border][border=1px; border-color: #ac9d88; border-style: solid; width: 100%; height: 85px; background-color: #ac9d88; position: relative; right: 10px; bottom: 5px; overflow: hidden;][border=0px; width: 109%; height: 85px; position: relative; bottom: 10px; right: 10px; overflow-y: scroll; overflow-x: hidden;][border=0px; margin: auto; height: 85px; width: 80%; padding: 0px; color: #6b4e37; line-height: 15px; font-size: 13px; text-align: center; display: flex; align-items: center; justify-content: center;][comment]


quote + character info


[/comment]the colour of my soul is iron-grey and sad bats wheel about the steeple of my dreams.[/border][border=0px; padding: 0px; color: #6b4e37; line-height: 15px; font-size: 13px;]
[b]mood[/b] info
[b]location[/b] info
[b]tags[/b] info[/border][/border][/border][/border][/border][border=0px; width: 94%; height: 140px; position: relative; bottom: 350px; right: 1px;][comment]


circle image


[/comment][border=1px; border-color: #ac9d88; border-style: solid; padding: 0px; margin: auto; height: 140px; width: 140px; border-radius: 140px; background: url(https://i.pinimg.com/564x/74/7b/a5/747ba56b4bb6d10d79009ecfe605184c.jpg); background-size: cover;][/border][/border][/border][border=0px; position: relative;  right: 2px; border-right: 1px solid #ac9d88; border-bottom: 1px solid #ac9d88; border-left: 1px solid #ac9d88; width: 60%; height: 449px; padding: 0px; background-color: #d8d6d2; display: flex; align-items: center; justify-content: center;][border=0px; width: 300px; height: 300px; background-color: #ac9d88; overflow: hidden; border-top: 10px solid #6b4e37;][border=0px; width: 107%;; height: 300px; position: relative; bottom: 10px; right: 10px; overflow-y: scroll; overflow-x: hidden; color: #6b4e37; line-height: 15px; font-size: 13px; text-align: justify;][comment]


main text


[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor et elit a auctor. Nam tincidunt non nisl vitae venenatis. Nunc pellentesque sed quam tincidunt scelerisque. Integer quis convallis nulla, nec mollis massa. Suspendisse scelerisque, nibh ac iaculis luctus, metus nibh pellentesque enim, egestas vulputate orci purus et nibh. Praesent eget nibh vitae diam commodo feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc lobortis auctor ullamcorper. Aenean ut ipsum sed nunc pharetra pellentesque vitae non sem. Phasellus laoreet ultrices urna, ut sodales enim ullamcorper ac. Ut ullamcorper elementum urna non auctor. Maecenas nec fringilla ligula.

Pellentesque nec ipsum lobortis, volutpat augue quis, bibendum sapien. Maecenas viverra id odio quis efficitur. Donec non tristique dolor, sed vulputate tortor. Duis et dui tincidunt, malesuada mi et, scelerisque eros. Vestibulum tempor blandit massa in fermentum. Morbi pharetra sollicitudin euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ut commodo nisi. Donec sit amet consequat risus, quis cursus enim. Vivamus a dui eu dolor efficitur mattis in non lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pellentesque porttitor fringilla. Morbi eu arcu at quam sodales mattis aliquam ac nibh. Ut porta, quam in bibendum aliquet, arcu erat sagittis ante, non varius eros neque fermentum nibh. Donec viverra orci in nisl vulputate lacinia.[/border][/border][/border][/border][/border][border=0px; margin: auto; width: 750px; text-align: center; color: #6b4e37; font-size: 13px; letter-spacing: 1px;]coded by incandescent[/border]

edit: fixed something weird with the music player thing
 
Last edited:
interest check no. 1
here's an interest check insp by a lot of the old themes i used to see on tumblr ! has 4 tabs incl. plot, rules, characters and a slot 4 extra info.

note that all images have 50% greyscale on them

bg pic creds to chillcrafting on tumblr

beyond the veil
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget quam tortor. Maecenas vel enim in magna consectetur convallis quis sit amet dui. Mauris bibendum nibh eu euismod ultricies. Nullam interdum ipsum ut odio eleifend fermentum.
it was always me vs. the world
  • the plot
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisl lacus, pulvinar at magna sed, pellentesque tempor elit. Etiam eleifend interdum quam, ultrices volutpat urna hendrerit a. Aenean vestibulum vulputate fermentum. Integer vel elementum nulla, sit amet volutpat ex. Integer scelerisque ultrices venenatis. Ut vehicula arcu nec nisl imperdiet ultricies. Etiam nec vestibulum eros, ut maximus risus. Quisque viverra vulputate tempus. Nulla sagittis libero sapien, eget malesuada mauris aliquet vel. Nulla dui quam, facilisis venenatis efficitur a, pretium ut ligula. Maecenas et sem accumsan, varius ligula non, ornare dui.

    Praesent finibus libero ipsum, eget auctor felis consequat non. Pellentesque eget diam vel lorem lacinia porttitor. Proin posuere pellentesque velit, ac volutpat sapien imperdiet quis. Nullam at augue sodales, dignissim elit ut, euismod lorem. In ullamcorper sem eu nisi rhoncus, ut condimentum eros molestie. In hac habitasse platea dictumst. Etiam volutpat dolor ut vehicula luctus. Quisque molestie vel ligula nec laoreet. Donec ut urna et orci dictum interdum vel eget felis. Aliquam euismod varius odio consequat egestas. Curabitur at dapibus lorem. Curabitur sagittis condimentum risus euismod ultrices. Mauris ultrices nibh eget cursus venenatis. Donec ornare tortor metus, nec ultricies urna facilisis id. Nunc venenatis facilisis faucibus. Sed sagittis sollicitudin malesuada.

I
II
III
IV
coded by incandescent

Code:
[comment]


placeholder img: [URL]https://data.whicdn.com/images/189286861/original.jpg[/URL]


[/comment][border=3px; border-color: #8D8D8D; border-style: solid; width: 850px; margin: auto; height: 550px; background-color: #8D8D8D; overflow: hidden; font-family: Times New Roman; line-height: 17px;][border=0px; width: 867px; height: 560px; position: relative; right: 10px; overflow-y: scroll; overflow-x: hidden;][comment]


big bg pic


[/comment][border=0px; width: 100%; height: 510px; position: relative; bottom: 10px; right: 10px; background: url(https://data.whicdn.com/images/189286861/original.jpg); background-size: cover; filter: grayscale(50%); border-bottom: 3px solid #7E7E7E; display:flex; align-items: center; justify-content: center;][border=2px; border-color: #818181; border-style: solid; width: 40%; height: 200px; background-color: #8D8D8D; display: flex; align-items: center; justify-content: center; flex-flow: row wrap;][border=2px; border-color: #818181; border-style: solid; font-size: 30px; width: 100%; height: 30px; text-align: center; text-transform: uppercase; background-color: #CBCBCB; display: flex; align-items: center; justify-content: center; color: #818181;][comment]


title text


[/comment]beyond the veil[/border][border=2px; border-color: #818181; border-style: solid; font-size: 15px; width: 100%; height: 110px; text-align: center; background-color: #CBCBCB; ][border=0px; padding: 0px; width: 100%; height: 100px; position: relative; display: flex; align-items: center; justify-content: center; text-align: justify; color: #818181;][comment]


text under 'beyond the veil'


[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget quam tortor. Maecenas vel enim in magna consectetur convallis quis sit amet dui. Mauris bibendum nibh eu euismod ultricies. Nullam interdum ipsum ut odio eleifend fermentum.[/border][/border][/border][/border][border=0px; width: 100%; display: inline-block; position: relative; bottom: 10px; right: 10px; background-color: #8D8D8D;][border=0px; margin: auto; height: 8px; width: 100%: right: 10px; bottom: 10px; position: relative; display: flex; align-items: center; justify-content: center;][border=0px; text-transform: uppercase; font-size: 15px; letter-spacing: 3px; color: #EEEEEE;][comment]


bottom quote


[/comment]it was always me vs. the world[/border][/border][border=0px; width: 100%; height: 530px; background-color: #BCBCBC; position: relative; right: 10px;][border=0px; margin: auto; width: 67%; height: 10px; display: flex; align-items: center; justify-content: center;][border=0px; padding: 0px; width: 340px; height: 27px; background-color: pink;][tabs][tab=000][comment]


first tab starts here / plot


[/comment][border=0px; width: 830px; height: 470px; position: absolute; left: 10px; top: 50px; background-color: #EEEEEE;][border=0px; width: 100%; height: 140px; background-color: #CBCBCB; position: relative; bottom: 10px; right: 10px; display: flex; align-items: center; justify-content: space-between;][border=2px; border-color: #818181; border-style: solid; height: 120px; width: 180px; background: url(https://mpmco.com/wp-content/uploads/2018/02/placeholder.jpg); background-size: cover; background-position: 50% 50%; filter: grayscale(50%);][/border][border=2px; border-color: #818181; border-style: solid; height: 120px; width: 180px; background: url(https://mpmco.com/wp-content/uploads/2018/02/placeholder.jpg); background-size: cover; background-position: 50% 50%; filter: grayscale(50%);][/border][border=2px; border-color: #818181; border-style: solid; height: 120px; width: 180px; background: url(https://mpmco.com/wp-content/uploads/2018/02/placeholder.jpg); background-size: cover; background-position: 50% 50%; filter: grayscale(50%);][/border][border=2px; border-color: #818181; border-style: solid; height: 120px; width: 180px; background: url(https://mpmco.com/wp-content/uploads/2018/02/placeholder.jpg); background-size: cover; background-position: 50% 50%; filter: grayscale(50%);][/border][/border][border=2px; border-color: #818181; border-style: solid; height: 30px; width: 200px; background-color: #DBDBDB; position: relative; bottom: 115px; margin: auto; display: flex; align-items: center; justify-content: center; ][border=0px; color: #818181; font-size: 30px; text-transform: uppercase; letter-spacing: 3px;]the plot[/border][/border][border=2px; border-color: #818181; border-style: solid;  margin: auto; width: 400px; height: 200px; background-color: #DBDBDB; position: relative; bottom: 10px; overflow: hidden;][border=0px; width: 417px; height: 200px; position: relative; bottom: 10px; right: 10px; overflow-y: scroll; overflow-x: hidden; text-align: justify; color: #818181;][comment]


plot text here


[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisl lacus, pulvinar at magna sed, pellentesque tempor elit. Etiam eleifend interdum quam, ultrices volutpat urna hendrerit a. Aenean vestibulum vulputate fermentum. Integer vel elementum nulla, sit amet volutpat ex. Integer scelerisque ultrices venenatis. Ut vehicula arcu nec nisl imperdiet ultricies. Etiam nec vestibulum eros, ut maximus risus. Quisque viverra vulputate tempus. Nulla sagittis libero sapien, eget malesuada mauris aliquet vel. Nulla dui quam, facilisis venenatis efficitur a, pretium ut ligula. Maecenas et sem accumsan, varius ligula non, ornare dui.

Praesent finibus libero ipsum, eget auctor felis consequat non. Pellentesque eget diam vel lorem lacinia porttitor. Proin posuere pellentesque velit, ac volutpat sapien imperdiet quis. Nullam at augue sodales, dignissim elit ut, euismod lorem. In ullamcorper sem eu nisi rhoncus, ut condimentum eros molestie. In hac habitasse platea dictumst. Etiam volutpat dolor ut vehicula luctus. Quisque molestie vel ligula nec laoreet. Donec ut urna et orci dictum interdum vel eget felis. Aliquam euismod varius odio consequat egestas. Curabitur at dapibus lorem. Curabitur sagittis condimentum risus euismod ultrices. Mauris ultrices nibh eget cursus venenatis. Donec ornare tortor metus, nec ultricies urna facilisis id. Nunc venenatis facilisis faucibus. Sed sagittis sollicitudin malesuada.[/border][/border][/border]
[/tab]
[tab=000][comment]


second tab starts here / rules


[/comment][border=0px; width: 830px; height: 470px; position: absolute; left: 10px; top: 50px; background-color: #EEEEEE; display: flex; align-items: center; justify-content: space-between;][border=0px; width: 30%; height: 450px;][comment]


second tab side pictures under here


[/comment][border=2px; border-color: #818181; border-style: solid; width: 99%; height: 126px;  background: url(https://mpmco.com/wp-content/uploads/2018/02/placeholder.jpg); background-size: cover; background-position: 50% 50%; filter: grayscale(50%); position: relative; right: 10px; bottom: 10px;][/border][border=2px; border-color: #818181; border-style: solid; width: 99%; height: 126px;  background: url(https://mpmco.com/wp-content/uploads/2018/02/placeholder.jpg); background-size: cover; background-position: 50% 50%; filter: grayscale(50%); position: relative; right: 10px;][/border][border=2px; border-color: #818181; border-style: solid; width: 99%; height: 126px;  background: url(https://mpmco.com/wp-content/uploads/2018/02/placeholder.jpg); background-size: cover; background-position: 50% 50%; filter: grayscale(50%); position: relative; right: 10px; top: 10px;][/border][/border][border=2px; border-color: #818181; border-style: solid; width: 530px; height: 446px; background-color: #CBCBCB;][border=0px; margin: auto; width: 96%; background-color: #818181; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #DBDBDB; letter-spacing: 10px; text-transform: uppercase;]the rules[/border][border=0px; margin: auto; width: 96%; background-color: #DBDBDB; height: 360px; position: relative; top: 10px; overflow: hidden;][border=0px; width: 104%; height: 370px; position: relative; bottom: 10px; right: 10px; overflow-y: scroll; overflow-x: hidden;][comment]


this is one rule
vvv


[/comment][border=0px; display: flex; background-color: #818181; height: 10px; width: 95%; align-items: center; justify-content: center; color: #DBDBDB; text-transform: uppercase; font-size: 20px; letter-spacing: 3px;]rule one[/border][border=0px; color: #818181; text-align: justify; width: 95%;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget quam tortor. Maecenas vel enim in magna consectetur convallis quis sit amet dui. Mauris bibendum nibh eu euismod ultricies. Nullam interdum ipsum ut odio eleifend fermentum. Vestibulum vel risus sit amet lacus dignissim tincidunt. Pellentesque eget elementum diam. Mauris ornare lacus elit, a venenatis ligula commodo ut. Nam aliquet pellentesque lorem, nec dapibus augue molestie eu. Morbi pharetra sit amet lacus ut interdum. Nunc et nunc dapibus, efficitur risus lobortis, lacinia diam.[/border][comment]


^^^
this is one rule


[/comment][border=0px; display: flex; background-color: #818181; height: 10px; width: 95%; align-items: center; justify-content: center; color: #DBDBDB; text-transform: uppercase; font-size: 20px; letter-spacing: 3px;]rule two[/border][border=0px; color: #818181; text-align: justify; width: 95%;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget quam tortor. Maecenas vel enim in magna consectetur convallis quis sit amet dui. Mauris bibendum nibh eu euismod ultricies. Nullam interdum ipsum ut odio eleifend fermentum. Vestibulum vel risus sit amet lacus dignissim tincidunt. Pellentesque eget elementum diam. Mauris ornare lacus elit, a venenatis ligula commodo ut. Nam aliquet pellentesque lorem, nec dapibus augue molestie eu. Morbi pharetra sit amet lacus ut interdum. Nunc et nunc dapibus, efficitur risus lobortis, lacinia diam.[/border][border=0px; display: flex; background-color: #818181; height: 10px; width: 95%; align-items: center; justify-content: center; color: #DBDBDB; text-transform: uppercase; font-size: 20px; letter-spacing: 3px;]rule three[/border][border=0px; color: #818181; text-align: justify; width: 95%;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget quam tortor. Maecenas vel enim in magna consectetur convallis quis sit amet dui. Mauris bibendum nibh eu euismod ultricies. Nullam interdum ipsum ut odio eleifend fermentum. Vestibulum vel risus sit amet lacus dignissim tincidunt. Pellentesque eget elementum diam. Mauris ornare lacus elit, a venenatis ligula commodo ut. Nam aliquet pellentesque lorem, nec dapibus augue molestie eu. Morbi pharetra sit amet lacus ut interdum. Nunc et nunc dapibus, efficitur risus lobortis, lacinia diam.[/border][border=0px; display: flex; background-color: #818181; height: 10px; width: 95%; align-items: center; justify-content: center; color: #DBDBDB; text-transform: uppercase; font-size: 20px; letter-spacing: 3px;]rule four[/border][border=0px; color: #818181; text-align: justify; width: 95%;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget quam tortor. Maecenas vel enim in magna consectetur convallis quis sit amet dui. Mauris bibendum nibh eu euismod ultricies. Nullam interdum ipsum ut odio eleifend fermentum. Vestibulum vel risus sit amet lacus dignissim tincidunt. Pellentesque eget elementum diam. Mauris ornare lacus elit, a venenatis ligula commodo ut. Nam aliquet pellentesque lorem, nec dapibus augue molestie eu. Morbi pharetra sit amet lacus ut interdum. Nunc et nunc dapibus, efficitur risus lobortis, lacinia diam.[/border][border=0px; display: flex; background-color: #818181; height: 10px; width: 95%; align-items: center; justify-content: center; color: #DBDBDB; text-transform: uppercase; font-size: 20px; letter-spacing: 3px;]rule five[/border][border=0px; color: #818181; text-align: justify; width: 95%;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget quam tortor. Maecenas vel enim in magna consectetur convallis quis sit amet dui. Mauris bibendum nibh eu euismod ultricies. Nullam interdum ipsum ut odio eleifend fermentum. Vestibulum vel risus sit amet lacus dignissim tincidunt. Pellentesque eget elementum diam. Mauris ornare lacus elit, a venenatis ligula commodo ut. Nam aliquet pellentesque lorem, nec dapibus augue molestie eu. Morbi pharetra sit amet lacus ut interdum. Nunc et nunc dapibus, efficitur risus lobortis, lacinia diam.[/border][/border][/border][/border][/border]
[/tab]
[tab=000][comment]


third tab starts here / characters
              both blocks are scrollable


[/comment][border=0px; width: 830px; height: 470px; position: absolute; left: 10px; top: 50px; background-color: #EEEEEE; display: flex; align-items: space-between; justify-content: space-between; flex-flow: row wrap;][border=2px; border-color: #818181; border-style: solid; width: 100%; height: 30px; background-color: #CBCBCB; display: flex; align-items: center; justify-content: center;][border=0px; color: #818181; font-size: 30px; text-transform: uppercase; letter-spacing: 7px;]the characters[/border][/border][border=2px; border-color: #818181; border-style: solid; width: 386px; height: 386px; background-color: #CBCBCB; position: relative; top: 5px; overflow: hidden;][border=0px; width: 403px; height: 390px; overflow-y: scroll; overflow-x: hidden; position: relative; bottom: 10px; right: 10px;][comment]


this is one character
vvv


[/comment][border=0px; width: 95%; height: 103px; background-color: #818181; display: flex; align-items: center; justify-content: space-between;][border=0px; width: 30%; height: 80px;  background: url(https://mpmco.com/wp-content/uploads/2018/02/placeholder.jpg); background-size: cover; background-position: 50% 50%; filter: grayscale(50%);][/border][border=0px; width: 56%; height: 80px; background-color: #EEEEEE; overflow: hidden;][border=0px; width: 108%; height: 80px; overflow-y: scroll; overflow-x: hidden; position: relative; bottom: 10px; right: 10px; color: #818181; text-align: justify;][b]CHARACTER NAME[/b] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget quam tortor. Maecenas vel enim in magna consectetur convallis quis sit amet dui. Mauris bibendum nibh eu euismod ultricies. Nullam interdum ipsum ut odio eleifend fermentum. Vestibulum vel risus sit amet lacus dignissim tincidunt. Pellentesque eget elementum diam. Mauris ornare lacus elit, a venenatis ligula commodo ut. Nam aliquet pellentesque lorem, nec dapibus augue molestie eu. Morbi pharetra sit amet lacus ut interdum. Nunc et nunc dapibus, efficitur risus lobortis, lacinia diam.[/border][/border][/border][comment]


^^^
this is one character


[/comment][border=0px; width: 95%; height: 103px; background-color: #818181; display: flex; align-items: center; justify-content: space-between; position: relative; top: 10px;][border=0px; width: 56%; height: 80px; background-color: #EEEEEE; overflow: hidden;][border=0px; width: 108%; height: 80px; overflow-y: scroll; overflow-x: hidden; position: relative; bottom: 10px; right: 10px; color: #818181; text-align: justify;][b]CHARACTER NAME[/b] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget quam tortor. Maecenas vel enim in magna consectetur convallis quis sit amet dui. Mauris bibendum nibh eu euismod ultricies. Nullam interdum ipsum ut odio eleifend fermentum. Vestibulum vel risus sit amet lacus dignissim tincidunt. Pellentesque eget elementum diam. Mauris ornare lacus elit, a venenatis ligula commodo ut. Nam aliquet pellentesque lorem, nec dapibus augue molestie eu. Morbi pharetra sit amet lacus ut interdum. Nunc et nunc dapibus, efficitur risus lobortis, lacinia diam.[/border][/border][border=0px; width: 30%; height: 80px;  background: url(https://mpmco.com/wp-content/uploads/2018/02/placeholder.jpg); background-size: cover; background-position: 50% 50%; filter: grayscale(50%);][/border][/border][border=0px; width: 95%; height: 103px; background-color: #818181; display: flex; align-items: center; justify-content: space-between; position: relative; top: 20px;][border=0px; width: 30%; height: 80px;  background: url(https://mpmco.com/wp-content/uploads/2018/02/placeholder.jpg); background-size: cover; background-position: 50% 50%; filter: grayscale(50%);][/border][border=0px; width: 56%; height: 80px; background-color: #EEEEEE; overflow: hidden;][border=0px; width: 108%; height: 80px; overflow-y: scroll; overflow-x: hidden; position: relative; bottom: 10px; right: 10px; color: #818181; text-align: justify;][b]CHARACTER NAME[/b] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget quam tortor. Maecenas vel enim in magna consectetur convallis quis sit amet dui. Mauris bibendum nibh eu euismod ultricies. Nullam interdum ipsum ut odio eleifend fermentum. Vestibulum vel risus sit amet lacus dignissim tincidunt. Pellentesque eget elementum diam. Mauris ornare lacus elit, a venenatis ligula commodo ut. Nam aliquet pellentesque lorem, nec dapibus augue molestie eu. Morbi pharetra sit amet lacus ut interdum. Nunc et nunc dapibus, efficitur risus lobortis, lacinia diam.[/border][/border][/border][/border][/border][border=2px; border-color: #818181; border-style: solid; width: 386px; height: 386px; background-color: #CBCBCB; position: relative; top: 5px; overflow: hidden;][border=0px; width: 403px; height: 390px; overflow-y: scroll; overflow-x: hidden; position: relative; bottom: 10px; right: 10px;][border=0px; width: 95%; height: 103px; background-color: #818181; display: flex; align-items: center; justify-content: space-between;][border=0px; width: 30%; height: 80px;  background: url(https://mpmco.com/wp-content/uploads/2018/02/placeholder.jpg); background-size: cover; background-position: 50% 50%; filter: grayscale(50%);][/border][border=0px; width: 56%; height: 80px; background-color: #EEEEEE; overflow: hidden;][border=0px; width: 108%; height: 80px; overflow-y: scroll; overflow-x: hidden; position: relative; bottom: 10px; right: 10px; color: #818181; text-align: justify;][b]CHARACTER NAME[/b] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget quam tortor. Maecenas vel enim in magna consectetur convallis quis sit amet dui. Mauris bibendum nibh eu euismod ultricies. Nullam interdum ipsum ut odio eleifend fermentum. Vestibulum vel risus sit amet lacus dignissim tincidunt. Pellentesque eget elementum diam. Mauris ornare lacus elit, a venenatis ligula commodo ut. Nam aliquet pellentesque lorem, nec dapibus augue molestie eu. Morbi pharetra sit amet lacus ut interdum. Nunc et nunc dapibus, efficitur risus lobortis, lacinia diam.[/border][/border][/border][border=0px; width: 95%; height: 103px; background-color: #818181; display: flex; align-items: center; justify-content: space-between; position: relative; top: 10px;][border=0px; width: 56%; height: 80px; background-color: #EEEEEE; overflow: hidden;][border=0px; width: 108%; height: 80px; overflow-y: scroll; overflow-x: hidden; position: relative; bottom: 10px; right: 10px; color: #818181; text-align: justify;][b]CHARACTER NAME[/b] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget quam tortor. Maecenas vel enim in magna consectetur convallis quis sit amet dui. Mauris bibendum nibh eu euismod ultricies. Nullam interdum ipsum ut odio eleifend fermentum. Vestibulum vel risus sit amet lacus dignissim tincidunt. Pellentesque eget elementum diam. Mauris ornare lacus elit, a venenatis ligula commodo ut. Nam aliquet pellentesque lorem, nec dapibus augue molestie eu. Morbi pharetra sit amet lacus ut interdum. Nunc et nunc dapibus, efficitur risus lobortis, lacinia diam.[/border][/border][border=0px; width: 30%; height: 80px;  background: url(https://mpmco.com/wp-content/uploads/2018/02/placeholder.jpg); background-size: cover; background-position: 50% 50%; filter: grayscale(50%);][/border][/border][border=0px; width: 95%; height: 103px; background-color: #818181; display: flex; align-items: center; justify-content: space-between; position: relative; top: 20px;][border=0px; width: 30%; height: 80px;  background: url(https://mpmco.com/wp-content/uploads/2018/02/placeholder.jpg); background-size: cover; background-position: 50% 50%; filter: grayscale(50%);][/border][border=0px; width: 56%; height: 80px; background-color: #EEEEEE; overflow: hidden;][border=0px; width: 108%; height: 80px; overflow-y: scroll; overflow-x: hidden; position: relative; bottom: 10px; right: 10px; color: #818181; text-align: justify;][b]CHARACTER NAME[/b] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget quam tortor. Maecenas vel enim in magna consectetur convallis quis sit amet dui. Mauris bibendum nibh eu euismod ultricies. Nullam interdum ipsum ut odio eleifend fermentum. Vestibulum vel risus sit amet lacus dignissim tincidunt. Pellentesque eget elementum diam. Mauris ornare lacus elit, a venenatis ligula commodo ut. Nam aliquet pellentesque lorem, nec dapibus augue molestie eu. Morbi pharetra sit amet lacus ut interdum. Nunc et nunc dapibus, efficitur risus lobortis, lacinia diam.[/border][/border][/border][/border][/border][/border]
[/tab]
[tab=000][comment]


forth tab starts here / extra info


[/comment][border=0px; width: 830px; height: 470px; position: absolute; left: 10px; top: 50px; background-color: #EEEEEE; display: flex; align-items: center; justify-content: center;][border=2px; border-color: #818181; background-color: #CBCBCB; border-style: solid; width: 500px; height: 298px; overflow: hidden;][border=0px; width: 517px; height: 298px; position: relative; bottom: 10px; right: 10px; overflow-y: scroll; overflow-x: hidden;][border=0px; margin: auto; width: 96%; background-color: #818181; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #DBDBDB; letter-spacing: 10px; text-transform: uppercase;]extra info[/border][border=0px; margin: auto; width: 96%; background-color: #DBDBDB; height: 215px; position: relative; top: 10px; overflow: hidden;][border=0px; width: 104%; height: 215px; position: relative; bottom: 10px; right: 10px; overflow-y: scroll; overflow-x: hidden;][border=0px; display: flex; background-color: #818181; height: 10px; width: 95%; align-items: center; justify-content: center; color: #DBDBDB; text-transform: uppercase; font-size: 20px; letter-spacing: 3px;]info[/border][border=0px; color: #818181; text-align: justify; width: 95%;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget quam tortor. Maecenas vel enim in magna consectetur convallis quis sit amet dui. Mauris bibendum nibh eu euismod ultricies. Nullam interdum ipsum ut odio eleifend fermentum. Vestibulum vel risus sit amet lacus dignissim tincidunt. Pellentesque eget elementum diam. Mauris ornare lacus elit, a venenatis ligula commodo ut. Nam aliquet pellentesque lorem, nec dapibus augue molestie eu. Morbi pharetra sit amet lacus ut interdum. Nunc et nunc dapibus, efficitur risus lobortis, lacinia diam.[/border][border=0px; display: flex; background-color: #818181; height: 10px; width: 95%; align-items: center; justify-content: center; color: #DBDBDB; text-transform: uppercase; font-size: 20px; letter-spacing: 3px;]info[/border][border=0px; color: #818181; text-align: justify; width: 95%;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget quam tortor. Maecenas vel enim in magna consectetur convallis quis sit amet dui. Mauris bibendum nibh eu euismod ultricies. Nullam interdum ipsum ut odio eleifend fermentum. Vestibulum vel risus sit amet lacus dignissim tincidunt. Pellentesque eget elementum diam. Mauris ornare lacus elit, a venenatis ligula commodo ut. Nam aliquet pellentesque lorem, nec dapibus augue molestie eu. Morbi pharetra sit amet lacus ut interdum. Nunc et nunc dapibus, efficitur risus lobortis, lacinia diam.[/border][border=0px; display: flex; background-color: #818181; height: 10px; width: 95%; align-items: center; justify-content: center; color: #DBDBDB; text-transform: uppercase; font-size: 20px; letter-spacing: 3px;]info[/border][border=0px; color: #818181; text-align: justify; width: 95%;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget quam tortor. Maecenas vel enim in magna consectetur convallis quis sit amet dui. Mauris bibendum nibh eu euismod ultricies. Nullam interdum ipsum ut odio eleifend fermentum. Vestibulum vel risus sit amet lacus dignissim tincidunt. Pellentesque eget elementum diam. Mauris ornare lacus elit, a venenatis ligula commodo ut. Nam aliquet pellentesque lorem, nec dapibus augue molestie eu. Morbi pharetra sit amet lacus ut interdum. Nunc et nunc dapibus, efficitur risus lobortis, lacinia diam.[/border][border=0px; display: flex; background-color: #818181; height: 10px; width: 95%; align-items: center; justify-content: center; color: #DBDBDB; text-transform: uppercase; font-size: 20px; letter-spacing: 3px;]info[/border][border=0px; color: #818181; text-align: justify; width: 95%;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget quam tortor. Maecenas vel enim in magna consectetur convallis quis sit amet dui. Mauris bibendum nibh eu euismod ultricies. Nullam interdum ipsum ut odio eleifend fermentum. Vestibulum vel risus sit amet lacus dignissim tincidunt. Pellentesque eget elementum diam. Mauris ornare lacus elit, a venenatis ligula commodo ut. Nam aliquet pellentesque lorem, nec dapibus augue molestie eu. Morbi pharetra sit amet lacus ut interdum. Nunc et nunc dapibus, efficitur risus lobortis, lacinia diam.[/border][border=0px; display: flex; background-color: #818181; height: 10px; width: 95%; align-items: center; justify-content: center; color: #DBDBDB; text-transform: uppercase; font-size: 20px; letter-spacing: 3px;]info[/border][border=0px; color: #818181; text-align: justify; width: 95%;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget quam tortor. Maecenas vel enim in magna consectetur convallis quis sit amet dui. Mauris bibendum nibh eu euismod ultricies. Nullam interdum ipsum ut odio eleifend fermentum. Vestibulum vel risus sit amet lacus dignissim tincidunt. Pellentesque eget elementum diam. Mauris ornare lacus elit, a venenatis ligula commodo ut. Nam aliquet pellentesque lorem, nec dapibus augue molestie eu. Morbi pharetra sit amet lacus ut interdum. Nunc et nunc dapibus, efficitur risus lobortis, lacinia diam.[/border][/border][/border][/border][/border][/border]
[/tab][/tabs][/border][/border][comment]


tab banner here


[/comment][border=0px; margin: auto; width: 570px; height: 10px; position: relative; bottom: 30px; left: 0px; background-color: #8D8D8D; pointer-events: none; display: flex; align-items: center; justify-content: space-between; color: #EEEEEE;][border=0px; width: 108px;][/border][border=0px; width: 50px; text-align: center; font-size: 20px; pointer-events: none;]I[/border][border=0px; width: 50px; text-align: center; font-size: 20px; pointer-events: none;]II[/border][border=0px; width: 50px; text-align: center; font-size: 20px; pointer-events: none;]III[/border][border=0px; width: 50px; text-align: center; font-size: 20px; pointer-events: none;]IV[/border][border=0px; width: 108px;][/border][/border][/border][/border][/border][/border][border=0px; margin: auto; text-align: center; width: 850px; height: 10px; color: #818181; font-size: 12px; letter-spacing: 2px;]coded by incandescent[/border]
 
Last edited:
character post no. 4
ic spotify post, has a hidden scroll on the pic and a soundcloud media player

mobile friendly but u might have to adjust the period

bg pic creds to halcyoncraft on tumblr

firstname lastname
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a arcu vitae magna maximus interdum non eu nulla. In facilisis nibh lacus, ac iaculis risus placerat sed. Cras eu mauris vitae lorem dapibus consectetur. Vestibulum hendrerit, sem id efficitur tempor, justo lacus interdum magna, at vulputate metus mauris quis justo. Vestibulum ultrices euismod mollis. Proin imperdiet ex et ligula elementum bibendum. Sed leo elit, eleifend id malesuada faucibus, euismod vel erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit dui at tellus rutrum cursus. Phasellus et laoreet augue. Maecenas pellentesque, mi pretium venenatis mollis, magna ipsum fermentum nunc, vitae tincidunt eros eros sit amet justo. Proin ut nunc a felis interdum posuere.

In euismod pellentesque velit a maximus. Phasellus hendrerit consectetur justo ac finibus. Suspendisse non ligula id velit maximus finibus. Nulla dignissim nibh vel urna finibus, sed vehicula urna fringilla. Nullam tincidunt metus sit amet eros bibendum aliquam. Donec sed ligula commodo, finibus sapien nec, volutpat massa. Nulla at elit eu tellus luctus consectetur. Fusce at mi scelerisque, euismod diam vitae, dapibus velit.
location info mood info outfit info tags info
He Won't Hold You

Jacob Collier
______________
.
3:12
-1:50
coded by incandescent

Code:
[border=3px; width: 300px; height: 640px; background: black; margin: auto; border-radius: 20px; border-style: solid; border-color: white; cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur817.cur), auto !important;][comment]


background gradient colors here!

      i used the website ** [URL="https://cssgradient.io/"]CSS Gradient — Generator, Maker, and Background[/URL] ** to get the gradient text and i used ** [URL="https://imagecolorpicker.com/en/"]Image Color Picker[/URL] ** to get the colors for the gradient from my cover image.
      if you want to replace the gradient colors, get the code from the first link and replace the text:
                                          background: rgb(129,96,75); background: linear-gradient(0deg, rgba(129,96,75,1) 0%, rgba(209,185,169,1) 100%);


[/comment][border=0px; width: 280px; height: 620px; background: rgb(129,96,75); background: linear-gradient(0deg, rgba(129,96,75,1) 0%, rgba(209,185,169,1) 100%); margin: auto; border-radius: 10px;display: flex; justify-content: center; align-content: space-between; flex-flow: row wrap;][border=0px; width: 150px; height: 8px; position: relative; top: -10px; background-color: black; margin: auto; border-radius: 0px 0px 10px 10px;][/border][border=0px; height: 10px; margin: auto; width: 93%; display: flex; align-items: center; justify-content: center;][border=0px; padding: 0px; height: 10px; width: 10%; position: relative; font-size: 13px; display: flex; align-items: center; justify-content: center; color: white;][fa]fal fa-chevron-down[/fa][/border][border=0px; padding: 0px; height: 10px; width: 80%; position: relative; font-size: 13px; display: flex; align-items: center; justify-content: center; font-weight: bold; letter-spacing: 1px; color: white;][comment]


name at the top here


[/comment]firstname lastname[/border][border=0px; padding: 0px; height: 10px; width: 10%; position: relative; font-size: 13px; display: flex; align-items: center; justify-content: center; color: white;][fa]fal fa-ellipsis-h[/fa][/border][/border][border=0px; height: 20px; margin: auto; width: 93%;][/border][comment]


cover image right here


[/comment][border=0px; margin: auto; height: 240px; width: 93%; background: url(https://i.pinimg.com/564x/e6/dd/0f/e6dd0fd667adcd53f8f0fff4cddf67e6.jpg); background-size: cover; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); overflow: hidden;][border=0px; height: 240px; width: 108%; position: relative; bottom: 10px; right: 10px; overflow-y: scroll; overflow-x: hidden;][border=0px; height: 240px; width: 100%; position: relative; bottom: 10px; right: 10px;][/border][comment]


adjust the colors for the main text here
   text background color: #d1b9a9
   text color: color: #563d31


[/comment][border=0px; margin: auto; width: 100%; background-color: #d1b9a9; opacity: 90%; position: relative; top: 10px; right: 10px; display: inline-block; font-size: 13px; color: #563d31; line-height: 15px; text-align: justify;][comment]


hidden scroll text over here


[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a arcu vitae magna maximus interdum non eu nulla. In facilisis nibh lacus, ac iaculis risus placerat sed. Cras eu mauris vitae lorem dapibus consectetur. Vestibulum hendrerit, sem id efficitur tempor, justo lacus interdum magna, at vulputate metus mauris quis justo. Vestibulum ultrices euismod mollis. Proin imperdiet ex et ligula elementum bibendum. Sed leo elit, eleifend id malesuada faucibus, euismod vel erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit dui at tellus rutrum cursus. Phasellus et laoreet augue. Maecenas pellentesque, mi pretium venenatis mollis, magna ipsum fermentum nunc, vitae tincidunt eros eros sit amet justo. Proin ut nunc a felis interdum posuere.

In euismod pellentesque velit a maximus. Phasellus hendrerit consectetur justo ac finibus. Suspendisse non ligula id velit maximus finibus. Nulla dignissim nibh vel urna finibus, sed vehicula urna fringilla. Nullam tincidunt metus sit amet eros bibendum aliquam. Donec sed ligula commodo, finibus sapien nec, volutpat massa. Nulla at elit eu tellus luctus consectetur. Fusce at mi scelerisque, euismod diam vitae, dapibus velit.[comment]


bottom info bar text over here
       bg color: #563d31
       text color: #d1b9a9


[/comment][border=0px; margin: auto; width: 100%; display: inline-block; opacity: 90%; background-color: #563d31; color: #d1b9a9; position: relative; right: 10px; top: 10px; font-size: 11px; text-align: center; line-height: 15px;][comment]


bottom info bar text over here


[/comment][b]location[/b] info [b]mood[/b] info [b]outfit[/b] info [b]tags[/b] info[/border][/border][/border][/border][border=0px; height: 20px; margin: auto; width: 93%;][/border][border=0px; height: 30px; margin: auto; width: 90%; display: flex; align-items: center; justify-content: space-between; flex-flow: row wrap;][border=0px; padding: 0px; width: 87%; position: relative; right: 10px; bottom: 5px; display: flex; align-items: center;][border=0px; color: white; padding: 0px; line-height: 8px;][border=0px; padding: 0px; letter-spacing: 1px; font-size: 16px; font-weight: bold;][comment]


song name here


[/comment]He Won't Hold You[/border]
[border=0px; padding: 0px; letter-spacing: 1px; font-size: 12px;][comment]


artist name here


[/comment]Jacob Collier[/border][/border][/border][border=0px; width: 5%; position: relative; left: 15px; bottom: 5px; color: white;][fa]fal fa-heart[/fa][/border][/border][border=0px; margin: auto; height: 10px; width: 93%;][border=0px; height: 1px; width: 106%; position: relative; bottom: 30px; right: 18px; font-family: Helvetica; font-weight: bold; font-size: 35px; display: flex; align-items: center; justify-content: center;][comment]


details for the 'progress bar' right here; wouldn't recommend rly changing the length of the white part unless you're familiar with moving things


[/comment][color=white]__________[/color][color=#BDBDBD]____[/color][/border][border=0px; height: 1px; width: 106%; position: relative; bottom: 49px; left: 37px; font-weight: bold; font-size: 50px; display: flex; align-items: center; justify-content: center; color: white;].[/border][border=0px; height: 1px; width: 106%; position: relative; bottom: 42px; right: 18px; font-family: Helvetica; font-weight: bold; color: white; font-size: 12px; display: flex; align-items: center; justify-content: space-between;][border=0px; padding: 0px;]3:12[/border][border=0px; padding: 0px;]-1:50[/border][/border][/border][border=0px; height: 60px; margin: auto; width: 91%;][border=0px; padding: 0px; opacity: 0; height: 100px; width: 130px; margin: auto; position: relative; left: 35px; bottom: 2px;][comment]


youtube music player link over here


[/comment]https://www.youtube.com/watch?v=9B0MRtoYn9o[/border][border=0px; height: 60px; width: 106%; position: relative; right: 18px; bottom: 110px; pointer-events: none; display: flex; align-content: center; justify-content: space-between; color: white;][border=0px; padding: 0px; height: 60px; display: flex; align-items: center;][fa]fal fa-random[/fa][/border][border=0px; padding: 0px; height: 60px; display: flex; align-items: center;][fa]fas fa-step-backward fa-2x[/fa][/border][border=0px; padding: 0px; height: 60px; display: flex; align-items: center;][fa]fas fa-play-circle fa-3x[/fa][/border][border=0px; padding: 0px; height: 60px; display: flex; align-items: center;][fa]fas fa-step-forward fa-2x[/fa][/border][border=0px; padding: 0px; height: 60px; display: flex; align-items: center;][fa]fal fa-repeat-1[/fa][/border][/border][/border][border=0px; height: 40px; margin: auto; width: 91%; display: flex; align-items: center; justify-content: space-between;][border=0px; padding: 0px; position: relative; right: 8px; color: white;][fa]fal fa-computer-speaker[/fa][/border][border=0px; padding: 0px; position: relative; left: 8px; color: white;][fa]fal fa-list-music[/fa][/border][/border][/border][/border][border=0px; width: 300px; margin: auto; font-size: 10px; text-align: center;]coded by incandescent[/border]

edit: changed the soundcloud link to a youtube link since some sc sounds r locked! also adjusted the color of the 2nd half of the music bar
edit: gave it a tiny cursor

Hi! i love this one so much but for some reason when i add the youtube link and press play after it doesnt play and opens a new link to the person that created the song's account

EDIT: I fixed it never mind!! sorry!!
 
Hi! i love this one so much but for some reason when i add the youtube link and press play after it doesnt play and opens a new link to the person that created the song's account

EDIT: I fixed it never mind!! sorry!!
just so you know - it’s against YouTube’s terms and conditions for their videos to be used that way (for it to be covered). I’ve asked about it in the past to the mods of rpn and they advise not to use youtube if it’s in a hidden music player if that makes sense? Soundcloud, spotify and google drive are a-okay tho
 
Ahh, these are great! ty for letting folks use these, your a blessing T.T
 
Hi hi, I'm playing with your CS code 1 (I might play with the 2nd one too they're soooo cute!) ANYWHO, I cant seem to change the fonts at ALL. I'm not sure why, I've never had this happen once I discovered google fonts lol. Any advice would be amazingly appreciated. Thanks so much, ILY and your codes. >.<
 

Users who are viewing this thread

Back
Top