• 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 your favorite housplants coding

houseplant

embracing all my scars and imperfections
Roleplay Availability
Roleplay Type(s)
[class=container] width:300px; height:413px; margin:0 auto; border-right:0px solid #ADD8E6; border-left:0px solid #ffaaad; border-top:1px solid #ffaaad; border-bottom:1px solid #ADD8E6; border-top-right-radius: 10px; overflow:hidden; [/class] [class=scrollbar] width:100%; height:355px; overflow:hidden; [/class] [class=hiddenscroll] width: 100%; height: 100%; padding-right: 17px; overflow-y: scroll; [/class] [class=img2] width:80px; height:80px; background:url('https://66.media.tumblr.com/b9eb65a140077245bd54092438744db6/tumblr_pbmfdsepkm1wsmb5co4_250.png'); background-size:100%; margin:auto;center; border:1px solid #D3D3D3; border-radius:70px; float: left; [/class] [class=textbox] width: 300px; height: 300px; border: 0px solid black; [/class] [class=title1] width:110px; text-align:left; font-size:45px; color:pink; text-shadow:1px 1px 0px #77dd77; position:relative; top:-10px; right:-110px; [/class] [div class=container][div class=scrollbar][div class=hiddenscroll][div class=img2]
[div class=title1]houseplant[/div][div class=textbox] hello there everyone ! my name is brooke, and I'm currently trying to learn bbcode+ and just get myself slowly back into coding.

most of these are kind of messy so please be careful but feel free to change colors if you want.

please keep the credit if you do use these codes, and I may start taking requests to help better myself with more pressure.

I don't own any of the pictures used, so credits to the original owners.
[/div] [/div][/div][/div][/div]
 
Last edited:
this genuinely took me 3 days because my dumbass wanted to use tabs

super messy and kinda gross?? couldn't figure out what I wanted to put on the first one but uhh, here it is.

[class name=Tabs] display:inline-block; color:#cacaca; background:#707070; padding:0.5em; transition:all 0.5s ease-in; cursor:url(https://i.imgur.com/EpbTpoA.png?1),auto; [/class] [class name=Tabs state=hover] color: GREY; transition: 0.5s; [/class] [class name=tab1] display:inline-block; cursor:pointer; width: 20px; height: 20px; float: left; margin-left: 100px; [/class] [class name=tab1 state=hover] display:inline-block; color:#cacaca; background:#707070; padding:0.5em; transition: all 1s ease-in; cursor:url(https://i.imgur.com/EpbTpoA.png?1),auto; border-radius: 30px; text-align: center; [/class] [class name=tab2] display:inline-block; cursor:pointer; width:20px; height:20px; [/class] [class name=tab2 state=hover] display:inline-block; color:#cacaca; background:#707070; padding:0.5em; transition: all 1s ease-in; cursor:url(https://i.imgur.com/EpbTpoA.png?1),auto; border-radius: 50px; text-align: center; [/class] [class name=tab3] display:inline-block; cursor:pointer; width:20px; height:20px; [/class] [class name=tab3 state=hover] display:inline-block; color:#cacaca; background:#707070; padding:0.5em; transition: all 1s ease-in; cursor:url(https://i.imgur.com/EpbTpoA.png?1),auto; text-align: center; border-radius: 50px; [/class] [class=tabcontent1] height:100%; width:400px; text-align: justify; [/class] [class=tabcontent2] height:100%; width:400px; text-align: justify; [/class] [class=tabcontent3] height:100%; width:400px; text-align: justify; [/class] [script class=tab1 on=click] hide tabcontent2 hide tabcontent3 show tabcontent1 addClass Tabs [/script] [script class=tab2 on=click] hide tabcontent1 hide tabcontent3 show tabcontent2 addClass Tabs [/script] [script class=tab3 on=click] hide tabcontent1 hide tabcontent2 show tabcontent3 addClass Tabs [/script] [script class=tab3 on=click] hide tabcontent1 hide tabcontent2 show tabcontent3 addClass Tabs [/script] [script class=Tabs] hide tabcontent2 hide tabcontent3 hide tabcontent1 [/script]
[class=container1] width:200px; height:350px; margin:0 auto; cursor:url(https://i.imgur.com/EpbTpoA.png?1),auto; border: 5px solid #D3D3D3; border-top-right-radius: 10px; overflow:hidden; margin:auto [/class] [class=img1] width: 270px; height: 350px; border: 9px solid #D3D3D3; border-top-right-radius: 10px; cursor:url(https://i.imgur.com/EpbTpoA.png?1),auto; background-image:url('https://66.media.tumblr.com/82482fa7b5de88eb7c8ca1798183ffce/tumblr_pk0k9xSRDk1r8ko3mo2_400.gif'); float: left; [/class] [class=img2] width:80px; height:80px; background:url('https://66.media.tumblr.com/03893185631840f53fabecccef7c059c/tumblr_pc5kcjN5Ni1x65eklo8_500.jpg'); background-size:100%; margin:auto;center; border:1px solid #D3D3D3; border-radius:70px; float: left; [/class] [class=container2] width:270px; height:350px; bg:#DCDCDC; margin: 0 auto; cursor:url(https://i.imgur.com/EpbTpoA.png?1),auto; border: 9px solid #D3D3D3; border-top-right-radius: 10px; overflow:hidden; margin:auto [/class] [class=scrollbar] width:100%; height:355px; overflow:hidden; [/class] [class=hiddenscroll] width: 100%; height: 100%; padding-right: 17px; overflow-y: scroll; [/class] [class=title1] width:450px; text-align:left; font-size:100px; color:pink; text-shadow:2px 2px 0px #708090; position:relative; top:-90px; left:-40px; [/class] [class=title2] width:450px; text-align:left; font-size:55px; color:pink; text-shadow:2px 2px 0px #708090; position:relative; top:-10px; right:-110px; [/class] [div class=container][div class=img1][div class=title1]moon[/div] [div class=tabs][div class=tab1]I[/div] [div class=tab2]II[/div] [div class=tab3]III[/div][/div] [/div] [div class=container2]
[div class=img2][div class=title2]taeil[/div][/div][div class=scrollbar][div class=hiddenscroll][div class=tabcontent1]
Basics

name:.
age:.
gender:.
sexuality:.
role:.

likes
▶ like here
▶ like here
▶ like here
▶ like here
▶ like here
dislikes
▶ like here
▶ like here
▶ like here
▶ like here
▶ like here






[/div] [div class=tabcontent2] Personality


Personality[/div] [div class=tabcontent3] History

history here kiddos[/div] [/div][/div]
[/div][/div]code by houseplant houseplant
 
v simple tabs just hover over the two pink boxes hiding behind the picture

i just really love iu
Code:
[nobr]
[centerblock=60]

[class=container]
width:500px;
height:550px;
background:#fafafa;
margin:auto;
cursor:url(https://i.imgur.com/EpbTpoA.png?1),auto;
border-top: 3px solid pink;
border-bottom: 3px solid pink;
[/class]

[class=hover]
background-color:#BF968C;
padding: 10px;
Height: 10px;
Width: 100px;
cursor:url(https://i.imgur.com/EpbTpoA.png?1),auto;
margin-left: 40px;
transition-duration: 0.7s;
z-index:-1;
color:transparent;
margin-top:5px;
letter-spacing:3px;
[/class]

[class name=hover state=hover]
background-color:#CF8D81;
margin-left: 110px;
color:#ffffff;
width:150px;
[/class]

[class=tab1]
display: inline;
[/class]
[class=tab2]
display: inline;
[/class]

[class=tab1txt]
display: none;
[/class]
[class=tab2txt]
display: none;
[/class]

[script class=basiccont]
hide tab1txt
hide tab2txt
[/script]

[script class=firstpg]
hide tab1txt
hide tab2txt
[/script]

[script class=tab1 on=click]
show tab1txt 
hide tab2txt
[/script]

[script class=tab2 on=click]
show tab2txt
hide tab1txt
[/script]

[script class=hover]
hide tab1txt
hide tab2txt
[/script]


[class=title1]
width:450px;
text-align:left;
font-size:20px;
color:pink;
text-shadow:2px 2px 0px #708090;
position:relative;
top:-30px;
left: 150px;
[/class]

[class=basiccont]
width:490px;
height:385px;
background:#fafafa;
margin:auto;
border: 0px solid #CF8D81;
cursor:url(https://i.imgur.com/EpbTpoA.png?1),auto;
margin:auto;
overflow: hidden;
[/class]

[class=hiddenscroll]
width: 100%;
height: 98%;
padding-right: 17px;
overflow-y: scroll;
[/class]


[class=img1]
width:128px;
height:128px;
background:url('https://66.media.tumblr.com/373465c04c8924b3739d5d5a334e5153/tumblr_pjjktmxkV91wrvgau_640.jpg');
background-size:100%;
margin:auto;center;
border:4px solid #D3D3D3;
border-radius:10px;
float-left: -9px;
float: left;
[/class]

[class=firstpg]
width:480px;
height:360px;
background:#fafafa;
margin:auto;
border: 0px solid #CF8D81;
cursor:url(https://i.imgur.com/EpbTpoA.png?1),auto;
margin:auto;
float:center;
overflow: hidden;
[/class]

[class=img2]
width:110px;
height:110px;
background:url('https://66.media.tumblr.com/58ece7651a9b2c5a3b500e33feb13b3d/tumblr_opj4abGPCT1uvjaajo5_400.png');
background-size:100%;
margin:auto;center;
border:1px solid     #D3D3D3;
border-radius:70px;
float: left;
[/class]

[class=img3]
width:110px;
height:110px;
background:url('https://66.media.tumblr.com/a9279309a2ea742df27fbfee5a821c1e/tumblr_opj4abGPCT1uvjaajo6_500.png');
background-size:100%;
border:1px solid     #D3D3D3;
border-radius:70px;
margin:auto;center;
float: left;
[/class]

[class=img4]
width:110px;
height:110px;
background:url('https://66.media.tumblr.com/bd7ea193f9e75e0759d064f2d96cf7be/tumblr_opj4abGPCT1uvjaajo1_500.png');
background-size:100%;
border:1px solid     #D3D3D3;
border-radius:70px;
float: left;
margin:auto;center;
[/class]

[class=img5]
width:110px;
height:110px;
background:url('https://66.media.tumblr.com/f60f1320a8dcb3532879bbf754832643/tumblr_oos71mJTGJ1w8pc4so1_400.png');
background-size:100%;
border:1px solid     #D3D3D3;
border-radius:70px;
margin:auto;center;
float: left;
[/class]

[div class=container][div class=img1][/div][div class=hover][div class=tab1]persona[/div][/div]
[div class=hover][div class=tab2]history[/div][/div][div class=title1]yellow c a r d[/div]

[br][/br][br][/br][br][/br][bg=#ffaaad; padding:0; margin:3px; height:3px][bg=COLOR; padding:0; height:3px; width:PROGRESS 100%][bg=transparent; display:none]...[/bg][/bg][/bg]
[div class=firstpg]
[div class=img2][/div][div class=img3][/div][div class=img4][/div][div class=img5][/div]

[div class=basiccont][div class=hiddenscroll][div class=tab1txt]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Odio eu feugiat pretium nibh ipsum. Malesuada pellentesque elit eget gravida cum sociis. Non blandit massa enim nec dui nunc mattis enim. Adipiscing enim eu turpis egestas pretium aenean pharetra. Lobortis elementum nibh tellus molestie nunc non blandit massa enim. Ut porttitor leo a diam. Vitae aliquet nec ullamcorper sit. Ultrices vitae auctor eu augue ut lectus. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Aliquet risus feugiat in ante metus dictum at tempor. Quisque sagittis purus sit amet volutpat. Ultrices sagittis orci a scelerisque purus semper eget.

A iaculis at erat pellentesque adipiscing. Cras fermentum odio eu feugiat pretium. Pretium viverra suspendisse potenti nullam ac tortor. Quisque id diam vel quam elementum pulvinar. Viverra suspendisse potenti nullam ac. Leo urna molestie at elementum eu facilisis. Sed egestas egestas fringilla phasellus. Morbi non arcu risus quis varius quam quisque. Cursus risus at ultrices mi tempus imperdiet. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Volutpat sed cras ornare arcu dui. Quam id leo in vitae turpis massa. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Pulvinar elementum integer enim neque volutpat ac tincidunt vitae. Molestie at elementum eu facilisis sed odio morbi quis. Nulla facilisi etiam dignissim diam.

Mauris pellentesque pulvinar pellentesque habitant. Et malesuada fames ac turpis. Imperdiet proin fermentum leo vel orci porta non pulvinar. Cursus euismod quis viverra nibh cras pulvinar mattis nunc sed. Massa id neque aliquam vestibulum morbi blandit cursus risus. Pulvinar sapien et ligula ullamcorper. Cursus in hac habitasse platea dictumst quisque. Pellentesque habitant morbi tristique senectus. Purus in mollis nunc sed id semper. Malesuada nunc vel risus commodo viverra maecenas accumsan. Posuere sollicitudin aliquam ultrices sagittis. Posuere urna nec tincidunt praesent semper feugiat nibh. Sit amet nisl suscipit adipiscing bibendum est ultricies integer. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Pellentesque massa placerat duis ultricies lacus. Sed adipiscing diam donec adipiscing tristique risus nec. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Odio aenean sed adipiscing diam donec adipiscing tristique risus.

Volutpat blandit aliquam etiam erat velit scelerisque in. Lectus quam id leo in vitae turpis massa sed elementum. Tellus pellentesque eu tincidunt tortor aliquam. Libero volutpat sed cras ornare. In ornare quam viverra orci sagittis. Blandit aliquam etiam erat velit scelerisque in. Et magnis dis parturient montes nascetur ridiculus mus. Diam maecenas sed enim ut sem. Diam in arcu cursus euismod quis viverra nibh. Lacus sed turpis tincidunt id aliquet risus feugiat in. Arcu felis bibendum ut tristique et egestas quis ipsum. Facilisis gravida neque convallis a cras semper auctor.

Velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Posuere lorem ipsum dolor sit. Vitae proin sagittis nisl rhoncus mattis rhoncus urna. Erat imperdiet sed euismod nisi porta lorem mollis aliquam ut. Donec et odio pellentesque diam volutpat commodo sed egestas egestas. Commodo nulla facilisi nullam vehicula ipsum a arcu. Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Ut placerat orci nulla pellentesque. Vitae ultricies leo integer malesuada nunc vel risus commodo. Lectus urna duis convallis convallis tellus. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Sed risus ultricies tristique nulla aliquet enim tortor.[/div]

[div class=tab2txt]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Odio eu feugiat pretium nibh ipsum. Malesuada pellentesque elit eget gravida cum sociis. Non blandit massa enim nec dui nunc mattis enim. Adipiscing enim eu turpis egestas pretium aenean pharetra. Lobortis elementum nibh tellus molestie nunc non blandit massa enim. Ut porttitor leo a diam. Vitae aliquet nec ullamcorper sit. Ultrices vitae auctor eu augue ut lectus. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Aliquet risus feugiat in ante metus dictum at tempor. Quisque sagittis purus sit amet volutpat. Ultrices sagittis orci a scelerisque purus semper eget.

A iaculis at erat pellentesque adipiscing. Cras fermentum odio eu feugiat pretium. Pretium viverra suspendisse potenti nullam ac tortor. Quisque id diam vel quam elementum pulvinar. Viverra suspendisse potenti nullam ac. Leo urna molestie at elementum eu facilisis. Sed egestas egestas fringilla phasellus. Morbi non arcu risus quis varius quam quisque. Cursus risus at ultrices mi tempus imperdiet. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Volutpat sed cras ornare arcu dui. Quam id leo in vitae turpis massa. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Pulvinar elementum integer enim neque volutpat ac tincidunt vitae. Molestie at elementum eu facilisis sed odio morbi quis. Nulla facilisi etiam dignissim diam.

Mauris pellentesque pulvinar pellentesque habitant. Et malesuada fames ac turpis. Imperdiet proin fermentum leo vel orci porta non pulvinar. Cursus euismod quis viverra nibh cras pulvinar mattis nunc sed. Massa id neque aliquam vestibulum morbi blandit cursus risus. Pulvinar sapien et ligula ullamcorper. Cursus in hac habitasse platea dictumst quisque. Pellentesque habitant morbi tristique senectus. Purus in mollis nunc sed id semper. Malesuada nunc vel risus commodo viverra maecenas accumsan. Posuere sollicitudin aliquam ultrices sagittis. Posuere urna nec tincidunt praesent semper feugiat nibh. Sit amet nisl suscipit adipiscing bibendum est ultricies integer. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Pellentesque massa placerat duis ultricies lacus. Sed adipiscing diam donec adipiscing tristique risus nec. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Odio aenean sed adipiscing diam donec adipiscing tristique risus.

Volutpat blandit aliquam etiam erat velit scelerisque in. Lectus quam id leo in vitae turpis massa sed elementum. Tellus pellentesque eu tincidunt tortor aliquam. Libero volutpat sed cras ornare. In ornare quam viverra orci sagittis. Blandit aliquam etiam erat velit scelerisque in. Et magnis dis parturient montes nascetur ridiculus mus. Diam maecenas sed enim ut sem. Diam in arcu cursus euismod quis viverra nibh. Lacus sed turpis tincidunt id aliquet risus feugiat in. Arcu felis bibendum ut tristique et egestas quis ipsum. Facilisis gravida neque convallis a cras semper auctor.

Velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Posuere lorem ipsum dolor sit. Vitae proin sagittis nisl rhoncus mattis rhoncus urna. Erat imperdiet sed euismod nisi porta lorem mollis aliquam ut. Donec et odio pellentesque diam volutpat commodo sed egestas egestas. Commodo nulla facilisi nullam vehicula ipsum a arcu. Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Ut placerat orci nulla pellentesque. Vitae ultricies leo integer malesuada nunc vel risus commodo. Lectus urna duis convallis convallis tellus. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Sed risus ultricies tristique nulla aliquet enim tortor.[/div]
[/div]
[/div]
[/div]



[/div][size=2]code by [USER=45389]@houseplant[/USER] [/size][/centerblock][/nobr]

[class=container] width:500px; height:550px; background:#fafafa; margin:auto; cursor:url(https://i.imgur.com/EpbTpoA.png?1),auto; border-top: 3px solid pink; border-bottom: 3px solid pink; [/class] [class=hover] background-color:#BF968C; padding: 10px; Height: 10px; Width: 100px; cursor:url(https://i.imgur.com/EpbTpoA.png?1),auto; margin-left: 40px; transition-duration: 0.7s; z-index:-1; color:transparent; margin-top:5px; letter-spacing:3px; [/class] [class name=hover state=hover] background-color:#CF8D81; margin-left: 110px; color:#ffffff; width:150px; [/class] [class=tab1] display: inline; [/class] [class=tab2] display: inline; [/class] [class=tab1txt] display: none; [/class] [class=tab2txt] display: none; [/class] [script class=basiccont] hide tab1txt hide tab2txt [/script] [script class=firstpg] hide tab1txt hide tab2txt [/script] [script class=tab1 on=click] show tab1txt hide tab2txt [/script] [script class=tab2 on=click] show tab2txt hide tab1txt [/script] [script class=hover] hide tab1txt hide tab2txt [/script] [class=title1] width:450px; text-align:left; font-size:20px; color:pink; text-shadow:2px 2px 0px #708090; position:relative; top:-30px; left: 150px; [/class] [class=basiccont] width:490px; height:385px; background:#fafafa; margin:auto; border: 0px solid #CF8D81; cursor:url(https://i.imgur.com/EpbTpoA.png?1),auto; margin:auto; overflow: hidden; [/class] [class=hiddenscroll] width: 100%; height: 98%; padding-right: 17px; overflow-y: scroll; [/class] [class=img1] width:128px; height:128px; background:url('https://66.media.tumblr.com/373465c04c8924b3739d5d5a334e5153/tumblr_pjjktmxkV91wrvgau_640.jpg'); background-size:100%; margin:auto;center; border:4px solid #D3D3D3; border-radius:10px; float-left: -9px; float: left; [/class] [class=firstpg] width:480px; height:360px; background:#fafafa; margin:auto; border: 0px solid #CF8D81; cursor:url(https://i.imgur.com/EpbTpoA.png?1),auto; margin:auto; float:center; overflow: hidden; [/class] [class=img2] width:110px; height:110px; background:url('https://66.media.tumblr.com/58ece7651a9b2c5a3b500e33feb13b3d/tumblr_opj4abGPCT1uvjaajo5_400.png'); background-size:100%; margin:auto;center; border:1px solid #D3D3D3; border-radius:70px; float: left; [/class] [class=img3] width:110px; height:110px; background:url('https://66.media.tumblr.com/a9279309a2ea742df27fbfee5a821c1e/tumblr_opj4abGPCT1uvjaajo6_500.png'); background-size:100%; border:1px solid #D3D3D3; border-radius:70px; margin:auto;center; float: left; [/class] [class=img4] width:110px; height:110px; background:url('https://66.media.tumblr.com/bd7ea193f9e75e0759d064f2d96cf7be/tumblr_opj4abGPCT1uvjaajo1_500.png'); background-size:100%; border:1px solid #D3D3D3; border-radius:70px; float: left; margin:auto;center; [/class] [class=img5] width:110px; height:110px; background:url('https://66.media.tumblr.com/f60f1320a8dcb3532879bbf754832643/tumblr_oos71mJTGJ1w8pc4so1_400.png'); background-size:100%; border:1px solid #D3D3D3; border-radius:70px; margin:auto;center; float: left; [/class] [div class=container][div class=img1][/div][div class=hover][div class=tab1]persona[/div][/div] [div class=hover][div class=tab2]history[/div][/div][div class=title1]yellow c a r d[/div]


[div class=firstpg] [div class=img2][/div][div class=img3][/div][div class=img4][/div][div class=img5][/div] [div class=basiccont][div class=hiddenscroll][div class=tab1txt] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Odio eu feugiat pretium nibh ipsum. Malesuada pellentesque elit eget gravida cum sociis. Non blandit massa enim nec dui nunc mattis enim. Adipiscing enim eu turpis egestas pretium aenean pharetra. Lobortis elementum nibh tellus molestie nunc non blandit massa enim. Ut porttitor leo a diam. Vitae aliquet nec ullamcorper sit. Ultrices vitae auctor eu augue ut lectus. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Aliquet risus feugiat in ante metus dictum at tempor. Quisque sagittis purus sit amet volutpat. Ultrices sagittis orci a scelerisque purus semper eget. A iaculis at erat pellentesque adipiscing. Cras fermentum odio eu feugiat pretium. Pretium viverra suspendisse potenti nullam ac tortor. Quisque id diam vel quam elementum pulvinar. Viverra suspendisse potenti nullam ac. Leo urna molestie at elementum eu facilisis. Sed egestas egestas fringilla phasellus. Morbi non arcu risus quis varius quam quisque. Cursus risus at ultrices mi tempus imperdiet. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Volutpat sed cras ornare arcu dui. Quam id leo in vitae turpis massa. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Pulvinar elementum integer enim neque volutpat ac tincidunt vitae. Molestie at elementum eu facilisis sed odio morbi quis. Nulla facilisi etiam dignissim diam. Mauris pellentesque pulvinar pellentesque habitant. Et malesuada fames ac turpis. Imperdiet proin fermentum leo vel orci porta non pulvinar. Cursus euismod quis viverra nibh cras pulvinar mattis nunc sed. Massa id neque aliquam vestibulum morbi blandit cursus risus. Pulvinar sapien et ligula ullamcorper. Cursus in hac habitasse platea dictumst quisque. Pellentesque habitant morbi tristique senectus. Purus in mollis nunc sed id semper. Malesuada nunc vel risus commodo viverra maecenas accumsan. Posuere sollicitudin aliquam ultrices sagittis. Posuere urna nec tincidunt praesent semper feugiat nibh. Sit amet nisl suscipit adipiscing bibendum est ultricies integer. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Pellentesque massa placerat duis ultricies lacus. Sed adipiscing diam donec adipiscing tristique risus nec. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Odio aenean sed adipiscing diam donec adipiscing tristique risus. Volutpat blandit aliquam etiam erat velit scelerisque in. Lectus quam id leo in vitae turpis massa sed elementum. Tellus pellentesque eu tincidunt tortor aliquam. Libero volutpat sed cras ornare. In ornare quam viverra orci sagittis. Blandit aliquam etiam erat velit scelerisque in. Et magnis dis parturient montes nascetur ridiculus mus. Diam maecenas sed enim ut sem. Diam in arcu cursus euismod quis viverra nibh. Lacus sed turpis tincidunt id aliquet risus feugiat in. Arcu felis bibendum ut tristique et egestas quis ipsum. Facilisis gravida neque convallis a cras semper auctor. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Posuere lorem ipsum dolor sit. Vitae proin sagittis nisl rhoncus mattis rhoncus urna. Erat imperdiet sed euismod nisi porta lorem mollis aliquam ut. Donec et odio pellentesque diam volutpat commodo sed egestas egestas. Commodo nulla facilisi nullam vehicula ipsum a arcu. Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Ut placerat orci nulla pellentesque. Vitae ultricies leo integer malesuada nunc vel risus commodo. Lectus urna duis convallis convallis tellus. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Sed risus ultricies tristique nulla aliquet enim tortor.[/div] [div class=tab2txt]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Odio eu feugiat pretium nibh ipsum. Malesuada pellentesque elit eget gravida cum sociis. Non blandit massa enim nec dui nunc mattis enim. Adipiscing enim eu turpis egestas pretium aenean pharetra. Lobortis elementum nibh tellus molestie nunc non blandit massa enim. Ut porttitor leo a diam. Vitae aliquet nec ullamcorper sit. Ultrices vitae auctor eu augue ut lectus. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Aliquet risus feugiat in ante metus dictum at tempor. Quisque sagittis purus sit amet volutpat. Ultrices sagittis orci a scelerisque purus semper eget. A iaculis at erat pellentesque adipiscing. Cras fermentum odio eu feugiat pretium. Pretium viverra suspendisse potenti nullam ac tortor. Quisque id diam vel quam elementum pulvinar. Viverra suspendisse potenti nullam ac. Leo urna molestie at elementum eu facilisis. Sed egestas egestas fringilla phasellus. Morbi non arcu risus quis varius quam quisque. Cursus risus at ultrices mi tempus imperdiet. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Volutpat sed cras ornare arcu dui. Quam id leo in vitae turpis massa. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Pulvinar elementum integer enim neque volutpat ac tincidunt vitae. Molestie at elementum eu facilisis sed odio morbi quis. Nulla facilisi etiam dignissim diam. Mauris pellentesque pulvinar pellentesque habitant. Et malesuada fames ac turpis. Imperdiet proin fermentum leo vel orci porta non pulvinar. Cursus euismod quis viverra nibh cras pulvinar mattis nunc sed. Massa id neque aliquam vestibulum morbi blandit cursus risus. Pulvinar sapien et ligula ullamcorper. Cursus in hac habitasse platea dictumst quisque. Pellentesque habitant morbi tristique senectus. Purus in mollis nunc sed id semper. Malesuada nunc vel risus commodo viverra maecenas accumsan. Posuere sollicitudin aliquam ultrices sagittis. Posuere urna nec tincidunt praesent semper feugiat nibh. Sit amet nisl suscipit adipiscing bibendum est ultricies integer. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Pellentesque massa placerat duis ultricies lacus. Sed adipiscing diam donec adipiscing tristique risus nec. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Odio aenean sed adipiscing diam donec adipiscing tristique risus. Volutpat blandit aliquam etiam erat velit scelerisque in. Lectus quam id leo in vitae turpis massa sed elementum. Tellus pellentesque eu tincidunt tortor aliquam. Libero volutpat sed cras ornare. In ornare quam viverra orci sagittis. Blandit aliquam etiam erat velit scelerisque in. Et magnis dis parturient montes nascetur ridiculus mus. Diam maecenas sed enim ut sem. Diam in arcu cursus euismod quis viverra nibh. Lacus sed turpis tincidunt id aliquet risus feugiat in. Arcu felis bibendum ut tristique et egestas quis ipsum. Facilisis gravida neque convallis a cras semper auctor. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Posuere lorem ipsum dolor sit. Vitae proin sagittis nisl rhoncus mattis rhoncus urna. Erat imperdiet sed euismod nisi porta lorem mollis aliquam ut. Donec et odio pellentesque diam volutpat commodo sed egestas egestas. Commodo nulla facilisi nullam vehicula ipsum a arcu. Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Ut placerat orci nulla pellentesque. Vitae ultricies leo integer malesuada nunc vel risus commodo. Lectus urna duis convallis convallis tellus. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Sed risus ultricies tristique nulla aliquet enim tortor.[/div] [/div] [/div] [/div] [/div]code by houseplant houseplant
 
social media kinda code? v simple


in your heart​
@hwangjins​




name:.
name:. hyunjin
age:. 19
sexuality:. here
role:. here
gender:. male
@hwangjins​


@hwangjins​




Likes:
▶ like here
▶ like here
▶ like here
▶ like here
▶ like here
▶ like here

Dislikes
▶ dislike here
▶ dislike here
▶ dislike here
▶ dislike here
▶ dislike here
▶ dislike here

---​
Personality?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

---​
History?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




Code:
[centerblock=60]
[div=width:520px;height:127px;background:url('https://66.media.tumblr.com/a1f92b130bbe5c165184574e92496ce4/tumblr_pclujsAR5e1xbrxzeo6_1280.jpg');background-size:100%;margin:auto;center;overflow:hidden;][/div][div=width:100px;height:100px;background:url('https://66.media.tumblr.com/eca6ae35fae8b435c57de4f9d339dc16/tumblr_pclujsAR5e1xbrxzeo3_1280.jpg');background-size:100%;border:4px solid white;border-radius:70px;float:left;margin-left: 260px;margin-top:-50px;overflow:hidden;][/div][div=height:15px;background: white;color: black;font-size: 12px;letter-spacing: 2px;left: 10px;][i][center][fa]fa-compass[/fa]in your heart[/center][/i][/div]
[div=height:15px;background: white;color: black;font-size: 12px;letter-spacing: 2px;left: -104px;top:50px;position:relative;][i][size=2][left] @hwangjins[/left][/size][/i][/div]




[row][column=span3.8][div=width:160px; height:360px;background:white; border: 0px solid #CF8D81; margin-left:230px; overflow: hidden;][div=
width: calc(100% + 17px); height: calc(100% + 17px); overflow: scroll; box-sizing: border-box; padding: 3% 7%; text-align: justify;][i][size=3]name:.[/size][/i][size=3][/size]
[i][size=3]name:.[/size][/i] [size=3]hyunjin[/size]
[i][size=3]age:.[/size][/i] [size=3]19[/size]
[i][size=3]sexuality:.[/size][/i] [size=3]here[/size]
[i][size=3]role:.[/size][/i] [size=3]here[/size]
[i][size=3]gender:.[/size][/i] [size=3]male[/size]
[/div][/div][/column][div=width:360px; height:360px;background:white; border: 0px solid #CF8D81; margin-right: -890px;overflow: hidden;][div=
width: calc(100% + 17px); height: calc(100% + 17px); overflow: scroll; box-sizing: border-box; padding: 3% 7%; text-align: justify;][div=height: 300px;width: 300px;background: url('https://66.media.tumblr.com/45f016621fbbb27c8b9e0f93eae79504/tumblr_pf8j34HB271xqcwupo1_400.png');background-size:100%;position: relative;][/div][div=height:5px;color: black;font-size: 12px;letter-spacing: 2px;left: 14px;top:0px;position:relative;][i][size=3][left] @hwangjins[/left][/size][/i][/div][div=height:5px;color: black;font-size: 12px;letter-spacing: 2px;left: -5px;top:-1px;position: relative;][right][fa]fa-heart[/fa]    [fa]fa-comments[/fa][/right][/div]


[div=height: 300px;width: 300px;background: url('https://66.media.tumblr.com/8b6a99afd4ecdb77baf9119d61119336/tumblr_phfc63jv1t1xuqcb6o7_400.png');background-size:100%;position: relative;][/div][div=height:5px;color: black;font-size: 12px;letter-spacing: 2px;left: 14px;top:0px;position:relative;][i][size=3][left] @hwangjins[/left][/size][/i][/div][div=height:5px;color: black;font-size: 12px;letter-spacing: 2px;left: -5px;top:-1px;position: relative;][right][fa]fa-heart[/fa]    [fa]fa-comments[/fa][/right]
[/div]


[row][column=span5]
[size=3]      Likes:                  
▶ like here                  
▶ like here                   
▶ like here
▶ like here
▶ like here
▶ like here
[/size][/column][size=3]
 Dislikes                  
▶ dislike here                  
▶ dislike here                   
▶ dislike here
▶ dislike here
▶ dislike here
▶ dislike here
[/size][/row]

[size=3][center]---[/center]
Personality?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[center]---[/center]
History?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/size]
[/div][/div]
[size=2][center][USER=45389]@houseplant[/USER][/center][/size][/row][/centerblock]
 


a few notes about this code: for basics, just copy and paste if you need more of them (be sure to close the divs or it'll break). feel free to change the width if needed;
The 'X' on each code if for you to press to bring you back to the main code.

kind of proud of this code because it's more complicated then any i've made before, (thank you so much @Uxie for answering my countless questions) but i also think it's kinda ugly in the tabs but I hope someone enjoys it.

hover over the first picture

[class=bg] background: #634a75; background:url('https://66.media.tumblr.com/f9a7916bc1daa5bed1c6c24d6b4e2277/tumblr_ou6t4krcf21vur2auo1_1280.jpg'); background-size:100%; height: 500px; width:850px; position:relative; float:center; [/class] [class=box] background: #E6E6FA; height: 300px; width: 600px; position:relative; border-radius: 8px; top:100px; left:120px; [/class] [class=img2] width:100px; height:100px; background:url('https://66.media.tumblr.com/eca6ae35fae8b435c57de4f9d339dc16/tumblr_pclujsAR5e1xbrxzeo3_1280.jpg'); background-size:100%; border:4px solid white; border-radius:70px; cursor: url('https://i.imgur.com/EpbTpoA.png?1'), auto; position: relative; flex-flow: row wrap; left: 20px; top:118px; [/class] [class=img1] width:150px; height:150px; background-image: url('https://66.media.tumblr.com/f611e72873d5575a3f2a28570475b96d/tumblr_p6tpy9R3qW1uh08s2o3_400.png'); background-size:100%; position:relative; top:20px; left:210px; border:1px solid #D3D3D3; border-radius:50%; margin-top: 200px; [/class] [class name=img1 state=hover] background-image: url('https://66.media.tumblr.com/e4dcf1b17110a21908ea7bdfd21116f8/tumblr_p6tpy9R3qW1uh08s2o1_400.png'); transition-duration: 0.4s; [/class] [class=title1] width:450px; text-align:left; font-size:20px; color:pink; text-shadow:2px 2px 0px #708090; position:relative; top:90px; left: 120px; [/class] [class name=Tabs] display:inline-block; color:white; background:#E6E6FA; width:125px; height:25px; [/class] [class name=tab1] display:inline-block; cursor:pointer; width:125px; height:25px; position:relative; left:15px; text-shadow:2px 0px 0px white; [/class] [class name=tab2] display:inline-block; cursor:pointer; width:125px; height:25px; position:relative; left:100px; text-shadow:2px 0px 0px white; [/class] [class name=tab3] display:inline-block; cursor:pointer; width:125px; height:25px; position:relative; left:180px; text-shadow:2px 0px 0px white; [/class] [class=tabcontentbox] height:350px; width:600px; background-color:#E6E6FA; position:relative; border-radius: 8px; top:-260px; left:120px; z-index:6; text-align: justify; [/class] [class=tabcontent1] height:100%; width:400px; text-align: justify; position:absolute; [/class] [class=tabcontent2] height:100%; width:400px; text-align: justify; position:absolute; [/class] [class=tabcontent3] height:100%; width:400px; text-align: justify; position:Absolute; [/class] [script class=tab1 on=click] show tabcontentbox hide tabcontent2 hide tabcontent3 show tabcontent1 addClass Tabs [/script] [script class=tab2 on=click] show tabcontentbox hide tabcontent1 hide tabcontent3 show tabcontent2 addClass Tabs [/script] [script class=tab3 on=click] show tabcontentbox hide tabcontent1 hide tabcontent2 show tabcontent3 addClass Tabs [/script] [class=exit] height:40px; width:80px; position:relative; float:right; background-color:#E6E6FA; z-index:7; [/class] [script class=exit on=click] hide tabcontentbox [/script] [class=scrollbar] width:124%; height:350px; overflow:hidden; [/class] [class=hiddenscroll] width: 100%; height: 100%; padding-right: 17px; overflow-y: scroll; [/class] [class=sidebar] width:160px; height:365px; background:#E6E6FA; border: 0px solid #CF8D81; margin-left:5px; overflow: hidden; border-right: 3px dotted grey; [/class] [class=basics] height:20px; width:90px; background: #9975b9; color: #F2DEDE; font-size: 12px; letter-spacing: 1px; position:relative; left:200px; top:-300px; [/class] [div class=bg][div class=box][div class=img1][/div]

[div class=tabs][div class=tab1]
my love
[/div] [div class=tab2]
my laughter
[/div] [div class=tab3]
my stars
[/div][/div][/div] [div class=tabcontentbox style=display:none;][div class=exit]
X​
[/div] [div class=tabcontent1][div class=scrollbar][div class=hiddenscroll][div class=sidebar][div class=img2][/div][/div][div class=basics]name:. here[/div]
[div class=basics]age:.[/div]
[div class=basics]gender[/div]
[div class=basics]sexuality[/div]
[div class=basics]something[/div]
[div class=basics]something[/div][/div][/div][/div] [div class=tabcontent2 style=display:none;][div class=scrollbar][div class=hiddenscroll]bless me achoo (persona here)

Likes:
▶ like here
▶ like here
▶ like here
▶ like here
▶ like here
▶ like here

Dislikes
▶ dislike here
▶ dislike here
▶ dislike here
▶ dislike here
▶ dislike here
▶ dislike here

Fears
▶ Fear here
▶ fear here
▶ fear here
▶ fear here
▶ fear here
▶ fear here

Hobbies
▶ hobby here
▶ hobby here
▶ hobby here
▶ hobby here
▶ hobby here
▶ hobby here
[/div][/div][/div] [div class=tabcontent3 style=display:none;][div class=scrollbar][div class=hiddenscroll]bio and extras here ~[/div][/div][/div] [/div] [/div] coded by houseplant houseplant


Code:
[centerblock=60]
[nobr]
[class=bg]
background: #634a75;
background:url('https://66.media.tumblr.com/f9a7916bc1daa5bed1c6c24d6b4e2277/tumblr_ou6t4krcf21vur2auo1_1280.jpg');
background-size:100%;
height: 500px;
width:850px;
position:relative;
float:center;
[/class]

[class=box]
background: #E6E6FA;
height: 300px;
width: 600px;
position:relative;
border-radius: 8px;
top:100px;
left:120px;
[/class]

[class=img2]
    width:100px;
    height:100px;
    background:url('https://66.media.tumblr.com/eca6ae35fae8b435c57de4f9d339dc16/tumblr_pclujsAR5e1xbrxzeo3_1280.jpg');
    background-size:100%;
    border:4px solid white;
    border-radius:70px;
    cursor: url('https://i.imgur.com/EpbTpoA.png?1'), auto;
    position: relative;
    flex-flow: row wrap;
    left: 20px;
    top:118px;
 [/class]

[class=img1]
    width:150px;
    height:150px;
    background-image: url('https://66.media.tumblr.com/f611e72873d5575a3f2a28570475b96d/tumblr_p6tpy9R3qW1uh08s2o3_400.png');
    background-size:100%;
    position:relative;
    top:20px;
    left:210px;
    border:1px solid #D3D3D3;
    border-radius:50%;
    margin-top: 200px;
[/class]

[class name=img1 state=hover]
  background-image: url('https://66.media.tumblr.com/e4dcf1b17110a21908ea7bdfd21116f8/tumblr_p6tpy9R3qW1uh08s2o1_400.png');
   transition-duration: 0.4s;
[/class]

[class=title1]
width:450px;
text-align:left;
font-size:20px;
color:pink;
text-shadow:2px 2px 0px #708090;
position:relative;
top:90px;
left: 120px;
[/class]

[class name=Tabs]
display:inline-block;
color:white;
background:#E6E6FA;
width:125px;
height:25px;
[/class]

[class name=tab1]
display:inline-block;
cursor:pointer;
width:125px;
height:25px;
position:relative;
left:15px;
text-shadow:2px 0px 0px white;
[/class]

[class name=tab2]
display:inline-block;
cursor:pointer;
width:125px;
height:25px;
position:relative;
left:100px;
text-shadow:2px 0px 0px white;
[/class]

[class name=tab3]
display:inline-block;
cursor:pointer;
width:125px;
height:25px;
position:relative;
left:180px;
text-shadow:2px 0px 0px white;
[/class]

[class=tabcontentbox]
height:350px;
width:600px;
background-color:#E6E6FA;
position:relative;
border-radius: 8px;
top:-260px;
left:120px;
z-index:6;
text-align: justify;
[/class]

[class=tabcontent1]
height:100%;
width:400px;
text-align: justify;
position:absolute;
[/class]

[class=tabcontent2]
height:100%;
width:400px;
text-align: justify;
position:absolute;
[/class]

[class=tabcontent3]
height:100%;
width:400px;
text-align: justify;
position:Absolute;
[/class]

[script class=tab1 on=click]
show tabcontentbox
hide tabcontent2
hide tabcontent3
show tabcontent1
addClass Tabs
[/script]

[script class=tab2 on=click]
show tabcontentbox
hide tabcontent1
hide tabcontent3
show tabcontent2
addClass Tabs
[/script]

[script class=tab3 on=click]
show tabcontentbox
hide tabcontent1
hide tabcontent2
show tabcontent3
addClass Tabs
[/script]

[class=exit]
height:40px;
width:80px;
position:relative;
float:right;
background-color:#E6E6FA;
z-index:7;
[/class]

[script class=exit on=click]
hide tabcontentbox
[/script]

[class=scrollbar]
width:124%;
height:350px;
overflow:hidden;
[/class]

[class=hiddenscroll]
width: 100%;
height: 100%;
padding-right: 17px;
overflow-y: scroll;
[/class]

[class=sidebar]
width:160px; 
height:365px;
background:#E6E6FA;
 border: 0px solid #CF8D81; 
margin-left:5px; 
overflow: hidden;
border-right: 3px dotted grey;
[/class]

[class=basics]
height:20px; 
width:90px;
background: #9975b9;
color: #F2DEDE;
font-size: 12px;
letter-spacing: 1px;
position:relative;
left:200px;
top:-300px;
[/class]

[div class=bg][div class=box][div class=img1][/div][br][/br][br][/br]
[div class=tabs][div class=tab1][color=#9975b9][SIZE=20PX][center][font=Srisakdi]my love[/font][/center][/SIZE][/color][/div] [div class=tab2][color=#9975b9][SIZE=20PX][center][font=Srisakdi]my laughter[/font][/center][/SIZE][/color][/div] [div class=tab3][color=#9975b9][SIZE=20PX][center][font=Srisakdi]my stars[/font][/center][/SIZE][/color][SIZE=20PX][/size][/div][/div][/div]

[div class=tabcontentbox style=display:none;][div class=exit][b][center]X[/center][/b][/div]
[div class=tabcontent1][div class=scrollbar][div class=hiddenscroll][div class=sidebar][div class=img2][/div][/div][div class=basics]name:. here[/div]
[br][/br]
[div class=basics]age:.[/div]
[br][/br]
[div class=basics]gender[/div]
[br][/br]
[div class=basics]sexuality[/div]
[br][/br]
[div class=basics]something[/div]
[br][/br]
[div class=basics]something[/div][/div][/div][/div]
[div class=tabcontent2 style=display:none;][div class=scrollbar][div class=hiddenscroll][size=2]bless me achoo (persona here)[/size][br][/br][br][/br]
[row][column=span5]
[size=3]      Likes:   [br][/br]               
▶ like here          
[br][/br]          
▶ like here         
[br][/br]            
▶ like here
[br][/br]  
▶ like here
[br][/br]  
▶ like here
[br][/br]  
▶ like here
[br][/br]  [br][/br]
[/size][/column][size=3]
 Dislikes      
[br][/br]              
▶ dislike here   
[br][/br]                 
▶ dislike here   
[br][/br]                  
▶ dislike here
[br][/br]  
▶ dislike here
[br][/br]  
▶ dislike here
[br][/br]  
▶ dislike here
[br][/br]  
[/size][/row]
[br][/br]
[row][column=span5]
[size=3]      Fears  [br][/br]               
▶ Fear here          
[br][/br]          
▶ fear here         
[br][/br]            
▶ fear here
[br][/br]  
▶ fear here
[br][/br]  
▶ fear here
[br][/br]  
▶ fear here
[br][/br]  [br][/br]
[/size][/column][size=3]
 Hobbies      
[br][/br]              
▶ hobby here   
[br][/br]                 
▶ hobby here   
[br][/br]                  
▶ hobby here
[br][/br]  
▶ hobby here
[br][/br]  
▶ hobby here
[br][/br]  
▶ hobby here
[br][/br]  
[/size][/row][/div][/div][/div]
[div class=tabcontent3 style=display:none;][div class=scrollbar][div class=hiddenscroll][size=2]bio and extras here ~[/size][/div][/div][/div]
[/div]
[/div]
[/nobr][size=2]coded by [USER=45389]@houseplant[/USER] [/size][/centerblock]
 
so i haven't coded in awhile but uh... hi

free to use just keep credit
[class=container] width: 100%; text-align: center; [/class] [class=img1] display: inline-flex; vertical-align: top; flex-flow: column nowrap; justify-content: flex-end; box-sizing: border-box; padding-bottom: 100px; height:500px; width:300px; background:url('https://66.media.tumblr.com/8bf8d101b3f0f14f192d808767676b26/tumblr_pdo4kz7MlB1xqxmoto4_640.png'); background-size:cover; border-radius:20px; overflow: hidden; [/class] [class=personal] position:relative; width:100%; color: white; text-align: center; background:rgba(127,51,51); [/class] [class=bg] vertical-align: top; display: inline-block; height:500px; width:300px; border:1px solid black; border-radius:20px; background:rgba(127,51,51); overflow:hidden [/class] [class name=scroll] width: 100%; height: 100%; box-sizing: content-box; padding-right: 200px; overflow-Y: scroll; overflow-X: hidden; [/class] [class=img2] width:150px; height:150px; background-image: url('https://66.media.tumblr.com/a0aca89c6b8467bbbe714b7017b73fc9/tumblr_ppciq0IL371vp75w9_1280.jpg'); background-size:100%; border:0px solid #D3D3D3; border-radius:50%; margin:auto; [/class] [class name=img2 state=hover] background-image: url('https://66.media.tumblr.com/3084e8af0eb964837298bd7a965170c3/tumblr_ppciq1lbTY1vp75w9_1280.jpg'); transition-duration: 0.4s; [/class] [div class=container] [div class=img1] [div class=personal]don't take it personal[/div] [/div] [div class=bg]●●● i'll mess with your head[div class=scroll]
[div class=img2][/div]this scrolls[/div]
[/div] [/div]
code by houseplant


Code:
[nobr]
[class=container]
width: 100%;
text-align: center;
[/class]

[class=img1]
display: inline-flex;
vertical-align: top;
flex-flow: column nowrap;
justify-content: flex-end;
box-sizing: border-box;
padding-bottom: 100px;
height:500px;
width:300px;
background:url('https://66.media.tumblr.com/8bf8d101b3f0f14f192d808767676b26/tumblr_pdo4kz7MlB1xqxmoto4_640.png');
background-size:cover;
border-radius:20px;
overflow: hidden;
[/class]

[class=personal]
position:relative;
width:100%;
color: white;
text-align: center;
background:rgba(127,51,51);
[/class]

[class=bg]
vertical-align: top;
display: inline-block;
height:500px;
width:300px;
border:1px solid black;
border-radius:20px;
background:rgba(127,51,51);
overflow:hidden
[/class]

[class name=scroll]
width: 100%;
height: 100%;
box-sizing: content-box;
padding-right: 200px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]

[class=img2]
width:150px;
height:150px;
background-image: url('https://66.media.tumblr.com/a0aca89c6b8467bbbe714b7017b73fc9/tumblr_ppciq0IL371vp75w9_1280.jpg');
background-size:100%;
border:0px solid #D3D3D3;
border-radius:50%;
margin:auto;
[/class]

[class name=img2 state=hover]
background-image: url('https://66.media.tumblr.com/3084e8af0eb964837298bd7a965170c3/tumblr_ppciq1lbTY1vp75w9_1280.jpg');
transition-duration: 0.4s;
[/class]


[div class=container]
[div class=img1]
[div class=personal][font=Satisfy][size=5]don't take it personal[/size][/font][/div]
[/div]
[div class=bg][color=white][font=Montserrat][size=4]●●●  i'll mess with your head[/size][/font][div class=scroll][br][/br][div class=img2][/div]this scrolls[/div][/color][/div]
[/div]
[/nobr]
[center][size=1]code by houseplant[/center][/size]
 
super simple ic post. feel free to use and change colors

[class=container]
width: 100%;
text-align: center;
[/class]

[class=bg]
background:#cb808e;
height:380px;
width:300px;
border-radius:20px;
margin:auto;
[/class]
[class=borderpic]
border-radius: 100%;
border-top: 3px solid #cb808e;
border-bottom: 3px solid #cb808e;
border-left: 3px solid #ffc0cb;
animation: fa-spin 8s linear 0s infinite;
border-right: 3px solid #ffc0cb;
height: 100px;
width: 100px;
margin:auto;
[/class]

[class=picspin]
background: url('https://66.media.tumblr.com/e4b5fe75a7b943fbf43cde130f2deb54/tumblr_ptddju4I1u1ynt9o2o8_500.png');
border-radius: 100%;
background-size:100%;
animation: fa-spin 8s linear 0s infinite reverse;
height: 100px;
width: 100px;
margin:auto;
[/class]
[class name=scroll]
width: 100%;
height: 100%;
box-sizing: content-box;
padding-right: 200px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]
[class=post]
height:200px;
width:298px;
border:1px solid white;
margin:auto;
overflow:hidden;
[/class]

[div class=container][div class=bg][div class=borderpic][div class=picspin][/div][/div]
●●● mood x | location x | tags x |
[div class=post][div class=scroll]i scroll
i scroll
i scroll
i scroll
i scroll
i scroll
i scroll
i scroll
i scroll
i scroll
[/div][/div]say my name ●●●
[/div][/div]
code by houseplant

Code:
[class=container]
width: 100%;
text-align: center;
[/class]

[class=bg]
background:#cb808e;
height:380px;
width:300px;
border-radius:20px;
margin:auto;
[/class]
[class=borderpic]
border-radius: 100%;
border-top: 3px solid #cb808e;
border-bottom: 3px solid #cb808e;
border-left: 3px solid #ffc0cb;
animation: fa-spin 8s linear 0s infinite;
border-right: 3px solid #ffc0cb;
height: 100px;
width: 100px;
margin:auto;
[/class]

[class=picspin]
background: url('https://66.media.tumblr.com/e4b5fe75a7b943fbf43cde130f2deb54/tumblr_ptddju4I1u1ynt9o2o8_500.png');
border-radius: 100%;
background-size:100%;
animation: fa-spin 8s linear 0s infinite reverse;
height: 100px;
width: 100px;
margin:auto;
[/class]
[class name=scroll]
width: 100%;
height: 100%;
box-sizing: content-box;
padding-right: 200px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]
[class=post]
height:200px;
width:298px;
border:1px solid white;
margin:auto;
overflow:hidden;
[/class]

[div class=container][div class=bg][div class=borderpic][div class=picspin][/div][/div]
[font=Montserrat][color=white]●●● mood x | location x | tags x |[/color][/font]
[div class=post][div class=scroll]i scroll[br][/br]i scroll[br][/br]i scroll[br][/br]i scroll[br][/br]i scroll[br][/br]i scroll[br][/br]i scroll[br][/br]i scroll[br][/br]i scroll[br][/br]i scroll[br][/br][/div][/div][size=2][color=white]say my name ●●●[/size][/color]
[/div][/div][center][size=1]code by houseplant[/center][/size]
 

Users who are viewing this thread

Back
Top