• 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 asterism (code dump/freebies)

lavendre

lavendre

β—Œ π˜π—Ώπ—²π˜π—² π—±π—Όπ˜‚π˜€ β—Œ

asterism
freebies by diaphanous





no dawn, no day, i'm always in this twilight
hello and welcome to my bbcode dump! it's your friendly neighborhood jackie here with some codes of her own. this is a coding dump, so all of these codes will be freebies!! all codes look best on a laptop at 100% setting and a few of them should be mobile-friendly. i won't be doing requests, but i'll be more than happy to help you with a code if it breaks. (:

all i ask is to keep the credit and to keep it similar to the original. it's the right thing to do. also, if you decide to use a code, please give it a like. this isn't a rule, but it's highly appreciated! ^^


 
β€” code #1
this was one of my first cs codes that i've made. i was really proud and i still like it, but i never use it anymore. unfortunately, it's not very mobile friendly and it looks best on a laptop at 100% setting. the images and colors can be easily changed and it's one of my simpler codes.








FIRST M. LAST
this line can have a maximum of 50 characters.



TITLE
put


some


stats


here





TITLE
put


more


stats


here





TITLE
even


more


stats


go


here






TITLE
again


more


stats





TITLE
this


can


hold


extras


or

relationships


coding by: diaphanous

Code: 
[div=margin: auto;
height: 300px;
width: 400px][div=margin: auto;
width: 300px;
height: 300px;
background-color: black]
[div=width: 280px;
height: 280px;
background-color: white;
position: relative;
left: 10px;
top: -10px;
overflow: hidden][div=width: 105%; padding-right: 10px; height: 100%; overflow-y: scroll; font-align: justify;]
[div=height: 225px;
width: 225px;
background-image: url(https://pbs.twimg.com/profile_images/756979268190699521/GJqPsOZm.jpg);
background-size: 110%;
background-position: 10% 0%;
position: relative;
top: -15px;
left: 25px;][/div]
[div=height: 1px;
width: 225px;
background-color: black;
position: relative;
top: -30px;
left: 25px;
text-align: center;
font-family: Times New Roman]FIRST M. LAST
[i][size=11px]this line has a maximum of 50 characters.[/size][/i][div=height: 1px;
width: 225px;
background-color: black;
position: relative][/div][/div]


[div=height: 1px;
width: 225px;
background-color: black;
position: relative;
top: -40px;
left: 25px;][div=margin-left: -5px;
margin-top: 20px;
height: 100px;
width: 120px;
padding: 5px;
overflow: hidden][div=width: 105%; padding-right: 10px; height: 100%; overflow-y: scroll; font-align: justify;]TITLE
[size=10px]put


some


stats


here[/size]

[/div][/div]
[div=height: 95px;
width: 95px;
background-image: url(https://i.pinimg.com/736x/bb/21/9b/bb219b2cb922e4bcc44007000a15b6bf--christina-nadin-youth.jpg);
background-size: 110%;
background-position: center;
border-radius: 50%;
position: relative;
top: -125px;
left: 130px][/div][div=margin-top: -115px;
height: 1px;
width: 225px;
background-color: black;
position: relative][/div]


[div=height: 1px;
width: 225px;
background-color: black;
position: relative;
top: -40px;
left: 0px;][div=margin-left: -5px;
margin-top: 20px;
height: 100px;
width: 120px;
padding: 5px;
overflow: hidden][div=width: 105%; padding-right: 10px; height: 100%; overflow-y: scroll; font-align: justify;]TITLE
[size=10px]put


more


stats


here[/size]

[/div][/div]
[div=height: 95px;
width: 95px;
background-image: url(https://i.pinimg.com/736x/6f/db/80/6fdb80c03a731cd59d2433480089438d--girl-photography-christina-nadin.jpg);
background-size: 110%;
background-position: center;
border-radius: 50%;
position: relative;
top: -125px;
left: 130px][/div][div=margin-top: -115px;
height: 1px;
width: 225px;
background-color: black;
position: relative][/div]


[div=height: 1px;
width: 225px;
background-color: black;
position: relative;
top: -40px;
left: 0px;][div=margin-left: -5px;
margin-top: 20px;
height: 100px;
width: 120px;
padding: 5px;
overflow: hidden][div=width: 105%; padding-right: 10px; height: 100%; overflow-y: scroll; font-align: justify;]TITLE
[size=10px]even


more


stats


go


here
[/size]

[/div][/div]
[div=height: 95px;
width: 95px;
background-image: url(https://i.pinimg.com/originals/e8/26/3d/e8263d99fb59c0796cf3c81114e4eea1.jpg);
background-size: 110%;
background-position: center;
border-radius: 50%;
position: relative;
top: -125px;
left: 130px][/div][div=margin-top: -115px;
height: 1px;
width: 225px;
background-color: black;
position: relative][/div]


[div=height: 1px;
width: 225px;
background-color: black;
position: relative;
top: -40px;
left: 0px;][div=margin-left: -5px;
margin-top: 20px;
height: 100px;
width: 120px;
padding: 5px;
overflow: hidden][div=width: 105%; padding-right: 10px; height: 100%; overflow-y: scroll; font-align: justify;]TITLE
[size=10px]again


more


stats[/size]

[/div][/div]
[div=height: 95px;
width: 95px;
background-image: url(https://i.pinimg.com/originals/f5/8f/98/f58f985ecaeeec74e17103066a481b6b.jpg);
background-size: 110%;
background-position: center;
border-radius: 50%;
position: relative;
top: -125px;
left: 130px][/div][div=margin-top: -115px;
height: 1px;
width: 225px;
background-color: black;
position: relative][/div]


[div=height: 1px;
width: 225px;
background-color: black;
position: relative;
top: -40px;
left: 0px;][div=margin-left: -5px;
margin-top: 20px;
height: 100px;
width: 120px;
padding: 5px;
overflow: hidden][div=width: 105%; padding-right: 10px; height: 100%; overflow-y: scroll; font-align: justify;]TITLE
[size=10px]this


can


hold 


extras


or

relationships[/size]

[/div][/div]
[div=height: 95px;
width: 95px;
background-image: url(http://www.nevsmodels.co.uk/upload/56533b88eeb580j0a8656.jpg);
background-size: 120%;
background-position: 20% 70%;
border-radius: 50%;
position: relative;
top: -125px;
left: 130px][/div][div=margin-top: -115px;
height: 1px;
width: 225px;
background-color: black;
position: relative][/div][/div][/div][/div][/div][/div][/div][/div][/div][/div][div=height: 10px;
width: 300px;
margin: auto][size=8px]coding by: diaphanous[/size][/div]
 
Last edited:
β€” code #2
this is another older code from about a month ago. it's a very simple ic code and looks best with neutral colors. everything can be easily changed and it's a good code for bbcode beginners. however, the hidden scrolls make it mobile-unfriendly.






FIRST X LAST

What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).


Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Where can I get some?

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.


mood:
outfit:
mentions:
interaction:
tags:



coding by: diaphanous

Code: 
[div=height: 320px;
width: 350px;
margin: auto][div=height: 300px;
width: 350px;
border: 1px solid black;
margin: auto][div=height: 250px;
width: 350px;
background-color: white]
[div=height: 20px;
width: 320px;
padding-top: 5px;
padding-bottom: 2px;
padding-left: 10px;
padding-right: 10px;
background-color: black;
position: relative;
left: 5px;
top: -10px;
text-align: center;
color: white;
font-size: 11px;
letter-spacing: 5px]FIRST [b]X[/b] LAST[/div]
[div=height: 190px;
width: 150px;
padding-top: 3px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
background-color: white;
border-left: 1px outset black;
position: relative;
top: -25px;
left: 5px;
overflow: hidden][div=width: 112%; padding-right: 10px; height: 108%; overflow-y: scroll; font-align: justify; font-size: 10px; line-height: 16px]What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).


Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Where can I get some?

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

[/div][/div]
[div=height: 38px;
width: 160px;
padding-top: 6px;
padding-bottom: 4px;
background-color: white;
border-left: 1px outset black;
border-bottom: 1px outset black;
position: relative;
top: -46px;
left: 5px;
overflow: hidden][div=width: 111%; padding-right: 0px; padding-left: 5px; height: 105%; overflow-y: scroll; font-align: justify; font-size: 9px; letter-spacing: 1px]mood: 
outfit: 
mentions: 
interaction: 
tags: [/div][/div]
[div=height: 248px;
width: 3px;
background-color: black;
opacity: 1.0;
position: relative;
top: -315px;
left: 169px]
[/div]
[div=height: 247px;
width: 168px;
background-image: url(https://i.pinimg.com/736x/a1/83/54/a18354aabe1bfcaa7193173b612f15a7--winter--fall-winter.jpg);
background-size: 105%;
background-position: 40% 10%;
border-right: 1px outset black;
border-bottom: 1px outset black;
position: relative;
top: -584px;
left: 175px][/div][/div][/div][div=height: 10px;
width: 350px;
margin: auto][size=8px]coding by: diaphanous[/size][/div][/div]
 
Last edited:
β€” code #3
this code was previously used as an interest check for an rp i created in late october. i've created a cs version of it that's at least somewhat mobile friendly. there are also hidden scrolls in the code and it's on the more complex side, so just let me know if it breaks and i'll help.





name goes here
a very long quote or lyric can go right here
requisite
some
stats
can
go
here
it
has
overflow


boi



persona and relations
some
stats
can
go
here
it
has
overflow


boi



history and trivia
some
stats
can
go
here
it
has
overflow


boi

Code: 
[nobr][div=height: 370px;
width: 349px;
padding: 10px;
position: relative;
top: 10px;
background: white;
border: 1px solid #f1f1f1;
box-shadow: 1px 1px 2px grey;
margin: auto][div=height: 130px;
width: 325px;
background-image: url(http://alivemag.com/wp-content/uploads/2016/12/DH4A3917-989x1280.jpg);
background-size: 100%;
background-position: 50% 25%;
opacity: 0.9;
position: relative;
left: 12px;
top: 10px;
text-align: right;
font-size: 20px;
color: #fff;
letter-spacing: 0.5px]
[div=height: 10px;
width: 315px;
padding: 5px;
font-size: 15px;
position: relative;
text-align: right;
top: 90px;
left: -5px][font=Quicksand]
name goes here
[div=height: 10px;
width: 315px;
padding: 5px;
font-size: 9px;
position: relative;
text-align: right;
top: -10px;
left: -6px]a very long quote or lyric can go right here[/div][/font]
[div=height: 10px;
width: 315px;
padding: 5px;
font-size: 9px;
position: relative;
text-align: right;
top: -10px;
left: -6px][/div][/div][/div]

[div=height: 210px;
width: 322px;
border-top: 1px solid #BEBCBA;
border-bottom: 1px solid #BEBCBA;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
padding-bottom: 5px;
opacity: 0.9;
position: relative;
left: 13px;
top: 15px;
overflow: hidden][div=width: 100%; padding-right: 20px; height: 109%; overflow-y: auto; text-align: justify;]

[div=height: 1px;
width: 135px; 
position: relative;
top: 0px;
left: -10px]
[div=height: 100px;
width: 95px;
background-image: url(http://82772485410a5117eda7-792156a48c7991e3bdc7f9c2a0b3b66e.r34.cf3.rackcdn.com/2473_87a68eeb-34be-47d1-9519-2d8a520cd6fa.jpg);
background-size: 180%;
background-position: 40% 50%;
position: relative;
top: 5px;]

[div=height: 98px;
width: 95px;
background-image: url(http://alivemag.com/wp-content/uploads/2016/12/DH4A3067crop.jpg);
background-size: 200%;
background-position: 30% 80%;
position: relative;
left: 0px;
top: 105px][/div][/div][/div]

[div=height: 0px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #BEBCBA;
width: 230px;
position: relative;
top: 11px;
left: 93px][div=height: 5px;
width: 210px;
position: relative;
top: -30px;
left: 5px;
font-size: 25px;
font-weight: 700;
color: #191919;
text-shadow: 2px 0px 0px #BEBCBA][font=Satisfy]requisite[/font][/div][/div]
[div=height: 155px;
width: 208px;
padding: 10px;
border: 1px solid #BEBCBA;
position: relative;
top: 10px;
left: 93px;
overflow: auto;
font-size: 11px;
color: black;]some
[br][/br]
stats
[br][/br]
can
[br][/br]
go
[br][/br]
here
[br][/br]
it
[br][/br]
has
[br][/br]
overflow
[/div][br][/br][br][/br]

[div=height: 1px;
width: 105%;
background-color: #BEBCBA;
position: relative;
top: -10px][/div][br][/br]

[div=height: 0px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #BEBCBA;
width: 322px;
position: relative;
top: -5px;
left: 0px][div=height: 5px;
width: 307px;
position: relative;
top: -35px;
left: 10px;
text-align: right;
font-size: 25px;
font-weight: 700;
color: #191919;
text-shadow: 2px 0px 0px #BEBCBA][font=Satisfy]persona and relations[/font][/div][/div]

[div=height: 145px;
width: 300px;
padding: 10px;
border: 1px solid #BEBCBA;
position: relative;
top: -5px;
left: 0px;
overflow: auto;
font-size: 11px;
color: black]some
[br][/br]
stats
[br][/br]
can
[br][/br]
go
[br][/br]
here
[br][/br]
it
[br][/br]
has
[br][/br]
overflow
[/div][br][/br][br][/br]


[div=height: 1px;
width: 105%;
background-color: #BEBCBA;
position: relative;
top: -20px][/div][br][/br]

[div=height: 0px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #BEBCBA;
width: 322px;
position: relative;
top: -25px;
left: 0px][div=height: 5px;
width: 207px;
position: relative;
top: -30px;
left: 10px;
font-size: 25px;
font-weight: 700;
color: #191919;
text-shadow: 2px 0px 0px #BEBCBA][font=Satisfy]history and trivia[/font][/div][/div]

[div=height: 145px;
width: 300px;
padding: 10px;
border: 1px solid #BEBCBA;
position: relative;
top: -25px;
left: 0px;
overflow: auto;
font-size: 11px;
color: black]some
[br][/br]
stats
[br][/br]
can
[br][/br]
go
[br][/br]
here
[br][/br]
it
[br][/br]
has
[br][/br]
overflow
[/div][/div][/div][/div]
[div=opacity: 0; width: 100%; margin: auto][size=8px]@undine[/size][/div][/nobr]
 
Last edited:
β€” code #4 (version 1)
this code was one of my first experiments with tabs and i'm extremely happy with how it came out, especially since i was rather inexperienced when i made it. this version is smaller while the second version is bigger and easier on the eyes. the codes aren't mobile friendly but both versions work well with most aesthetics.










  • requisite
    stats
[/div]




name or role here

coding by: diaphanous

Code: 
[centerblock=30][div=height: 290px]
[div=position: relative;
width: 100px;
left: 170px][tabs][tab=.][div=height: 180px;
width: 260px;
padding: 10px;
background: #f1f1f1;
border: 1px solid grey;
position: absolute;
left: -180px;
margin-top: -20px]
[div=height: 60px;
width: 60px;
background-image: url(https://scontent-sea1-1.cdninstagram.com/t51.2885-15/s480x480/e15/11374271_155923264750931_1728751438_n.jpg?ig_cache_key=MTA3ODE5NjIxMjQwNzAyMzkxNg%3D%3D.2);
background-size: 120%;
background-position: 50% 53%;
border: 4px solid #f1f1f1;
border-radius: 50%;
position: relative;
top: -15px;
left: 40px]
[div=height: 60px;
width: 60px;
background-image: url(https://i.pinimg.com/736x/86/2a/ed/862aed89c3c4bb648a0e2dca5112a89b--cotton-candy-aesthetics.jpg);
background-size: 100%;
background-position: 75% 50%;
border: 4px solid #f1f1f1;
border-radius: 50%;
position: relative;
top: -25px;
left: 50px]
[div=height: 60px;
width: 60px;
background-image: url(https://i.pinimg.com/736x/2d/71/c5/2d71c598e13d0e603f3cae50305979d1--water-ripples-water-waves.jpg);
background-size: 130%;
background-position: 0% 40%;
border: 4px solid #f1f1f1;
border-radius: 50%;
position: relative;
top: -25px;
left: 50px][/div][/div][/div]
[div=height: 10px;
width: 270px;
padding-top: 2px;
padding-bottom: 5px;
background: #c1d2d0;
position: relative;
top: -30px;
left: -5px;
font-size: 10px;
text-align: center;
color: white]requisite[/div][div=height: 80px;
width: 260px;
padding: 5px;
background: #f1f1f1;
position: relative;
top: -30px;
left: -5px;
font-size: 11px;
overflow: hidden][div=width: 107%; padding-right: 0px; height: 100%; overflow-y: scroll; color: black; font-align: justify;]stats[/div][/div][/div][/tab][tab=.][div=height: 180px;
width: 260px;
padding: 10px;
background: #f1f1f1;
border: 1px solid grey;
position: absolute;
left: -180px;
margin-top: -20px][div=height: 10px;
width: 150px;
padding-top: 2px;
padding-bottom: 5px;
background: #c1d2d0;
position: relative;
top: 5px;
left: -5px;
font-size: 10px;
text-align: center;
color: white]appearance[/div]
[div=height: 153px;
width: 140px;
padding: 5px;
background: #f1f1f1;
position: relative;
top: -15px;
left: -5px;
font-size: 11px;
overflow: hidden][div=width: 113%; padding-right: 0px; height: 100%; overflow-y: scroll; color: black; font-align: justify;]stats[/div][/div]
[div=height: 75px;
width: 105px;
padding: 5px;
background-image: url(https://scontent.cdninstagram.com/t51.2885-15/sh0.08/e35/p640x640/14334540_173192503121930_3530519922549456896_n.jpg);
background-size: 130%;
background-position: 50% 5%;
border-radius: 50%;
position: relative;
top: -215px;
left: 150px][/div][div=height: 80px;
width: 105px;
padding: 5px;
background-image: url(https://i.pinimg.com/736x/49/fa/90/49fa901dc2ccffb1cb2b4f65678a5c17--story-people-photoshoot-inspiration.jpg);
background-size: 120%;
background-position: 50% 30%;
border-radius: 50%;
position: relative;
top: -210px;
left: 150px][/div][/div][/tab][tab=.][div=height: 180px;
width: 260px;
padding: 10px;
background: #f1f1f1;
border: 1px solid grey;
position: absolute;
left: -180px;
margin-top: -20px][div=height: 10px;
width: 130px;
padding-top: 2px;
padding-bottom: 5px;
background: #c1d2d0;
position: relative;
top: 5px;
left: -5px;
font-size: 10px;
text-align: center;
color: white]persona[/div]
[div=height: 153px;
width: 120px;
padding: 5px;
background: #f1f1f1;
position: relative;
top: -15px;
left: -5px;
font-size: 11px;
overflow: hidden][div=width: 115%; padding-right: 0px; height: 100%; overflow-y: scroll; color: black; font-align: justify;]words[/div][/div]
[div=height: 10px;
width: 135px;
padding-top: 2px;
padding-bottom: 5px;
background: #c1d2d0;
position: relative;
top: -215px;
left: 130px;
font-size: 10px;
text-align: center;
color: white]biography[/div]
[div=height: 153px;
width: 125px;
padding: 5px;
background: #f1f1f1;
position: relative;
top: -235px;
left: 130px;
font-size: 11px;
overflow: hidden][div=width: 114%; padding-right: 0px; height: 100%; overflow-y: scroll; color: black; font-align: justify;]more words[/div][/div][/div][/tab][/tabs][/div][/div][/div]
[div=height: 110px;
width: 280px;
border: 1px solid grey;
background-image: url(https://i.pinimg.com/736x/ec/94/2e/ec942e38eec80248925e80cfdd6f0af2--stella-mc-www-vogue-com.jpg);
background-size: 150%;
background-position: 50% 5%;
position: absolute;
pointer-events: none;
margin-left: -10px;
margin-top: -300px][div=height: 10px;
width: 50px;
padding-top: 5px;
padding-bottom: 10px;
position: relative;
top: 10px;
left: 195px;
text-align: center;
color: white][fa]fa-heart[/fa]
[div=height: 10px;
width: 50px;
padding-top: 5px;
padding-bottom: 10px;
position: relative;
top: 5px;
left: 0px;
text-align: center;
color: white][fa]fa-user-plus[/fa]
[div=height: 10px;
width: 50px;
padding-top: 5px;
padding-bottom: 10px;
position: relative;
top: 5px;
left: 0px;
text-align: center;
color: white][fa]fa-comment[/fa][/div][/div][/div]
[div=height: 5px;
width: 250px;
background: #c1d2d0;
position: relative;
top: 62px;
left: 0px]
[div=height: 10px;
width: 250px;
padding:5px;
padding-right: 5px;
color: white;
font-size: 25px;
position: relative;
left: -3px;
top: -55px][font=Pacifico]name or role here[/font][/div][/div][/div][/centerblock]
[centerblock=32][size=8px]coding by: diaphanous[/size][/centerblock]
 
β€” code #4 (version 2)
here's version 2! i made this one just a few weeks ago for it to be more convenient when using larger fonts or writing longer paragraphs. it's still mobile unfriendly, but i personally like it better than version 1.










  • requisite
    s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s





name or role here
coding by: diaphanous

Code: 
[div=height: 380px;
width: 350px;
margin: auto]
[div=position: relative;
width: 50px;
left: 250px;
top: 30px][tabs][tab=.][div=height: 200px;
width: 320px;
padding: 10px;
background: #f1f1f1;
border: 1px solid grey;
position: absolute;
left: -245px;
margin-top: 0px]
[div=height: 70px;
width: 70px;
background-image: url(https://scontent-sea1-1.cdninstagram.com/t51.2885-15/s480x480/e15/11374271_155923264750931_1728751438_n.jpg?ig_cache_key=MTA3ODE5NjIxMjQwNzAyMzkxNg%3D%3D.2);
background-size: 110%;
background-position: 50% 10%;
border: 4px solid #f1f1f1;
border-radius: 50%;
position: relative;
top: -15px;
left: 65px]
[div=height: 70px;
width: 70px;
background-image: url(https://i.pinimg.com/736x/86/2a/ed/862aed89c3c4bb648a0e2dca5112a89b--cotton-candy-aesthetics.jpg);
background-size: 120%;
background-position: 75% 0%;
border: 4px solid #f1f1f1;
border-radius: 50%;
position: relative;
top: -25px;
left: 50px]
[div=height: 70px;
width: 70px;
background-image: url(https://i.pinimg.com/736x/2d/71/c5/2d71c598e13d0e603f3cae50305979d1--water-ripples-water-waves.jpg);
background-size: 130%;
background-position: 50% 40%;
border: 4px solid #f1f1f1;
border-radius: 50%;
position: relative;
top: -25px;
left: 50px][/div][/div][/div]
[div=height: 10px;
width: 290px;
padding-top: 2px;
padding-bottom: 5px;
background: #c1d2d0;
position: relative;
top: -35px;
left: 15px;
font-size: 10px;
text-align: center;
color: white]requisite[div=height: 95px;
width: 310px;
padding: 5px;
position: relative;
top: 0px;
left: -5px;
font-size: 11px;
text-align: left;
line-height: 12px;
overflow: hidden][div=width: 100%; padding-right: 40px; height: 100%; overflow-y: scroll; color: black; font-align: justify;]s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s s[/div][/div][/div][/div][/tab][tab=.][div=height: 200px;
width: 320px;
padding: 10px;
background: #f1f1f1;
border: 1px solid grey;
position: absolute;
left: -245px;
margin-top: 0px][div=height: 10px;
width: 192px;
padding-top: 2px;
padding-bottom: 5px;
background: #c1d2d0;
position: relative;
top: 10px;
left: -5px;
font-size: 10px;
text-align: center;
color: white]appearance
[div=height: 170px;
width: 210px;
padding: 5px;
left: -5px;
position: relative;
font-size: 11px;
text-align: left;
line-height: 12px;
overflow: hidden][div=width: 100%; padding-right: 40px; height: 100%; overflow-y: scroll; color: black; font-align: justify;]What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).


Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.[/div][/div][/div]
[div=height: 85px;
width: 105px;
padding: 5px;
background-image: url(https://scontent.cdninstagram.com/t51.2885-15/sh0.08/e35/p640x640/14334540_173192503121930_3530519922549456896_n.jpg);
background-size: 110%;
background-position: 0% 10%;
border-radius: 50%;
position: relative;
top: -30px;
left: 200px][/div][div=height: 85px;
width: 105px;
padding: 5px;
background-image: url(https://i.pinimg.com/736x/49/fa/90/49fa901dc2ccffb1cb2b4f65678a5c17--story-people-photoshoot-inspiration.jpg);
background-size: 150%;
background-position: 60% 25%;
border-radius: 50%;
position: relative;
top: -25px;
left: 200px][/div][/div][/tab][tab=.][div=height: 200px;
width: 320px;
padding: 10px;
background: #f1f1f1;
border: 1px solid grey;
position: absolute;
left: -245px;
margin-top: 0px][div=height: 10px;
width: 155px;
padding-top: 2px;
padding-bottom: 5px;
background: #c1d2d0;
position: relative;
top: 10px;
left: 0px;
font-size: 10px;
text-align: center;
color: white]persona
[div=height: 170px;
width: 175px;
padding: 5px;
position: relative;
top: 0px;
left: -5px;
font-size: 11px;
text-align: left;
overflow: hidden][div=width: 100%; padding-right: 40px; height: 100%; overflow-y: scroll; color: black; font-align: justify;]What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).


Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.[/div][/div][/div]
[div=height: 10px;
width: 155px;
padding-top: 2px;
padding-bottom: 5px;
background: #c1d2d0;
position: relative;
top: -28px;
left: 165px;
font-size: 10px;
text-align: center;
color: white]biography
[div=height: 170px;
width: 175px;
padding: 5px;
position: relative;
top: 0px;
left: -5px;
font-size: 11px;
text-align: left;
overflow: hidden][div=width: 100%; padding-right: 40px; height: 100%; overflow-y: scroll; color: black; font-align: justify;]What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).


Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.[/div][/div][/div][/div][/tab][/tabs][/div]
[div=height: 150px;
width: 340px;
border: 1px solid grey;
background-image: url(https://i.pinimg.com/736x/ec/94/2e/ec942e38eec80248925e80cfdd6f0af2--stella-mc-www-vogue-com.jpg);
background-size: 160%;
background-position: 40% 5%;
position: relative;
pointer-events: none;
margin: auto;
top: -145px;
left: 1px][div=height: 10px;
width: 50px;
padding-top: 5px;
padding-bottom: 10px;
position: relative;
top: 30px;
left: 280px;
text-align: center;
color: white][fa]fa-heart[/fa]
[div=height: 10px;
width: 50px;
padding-top: 5px;
padding-bottom: 10px;
position: relative;
top: 5px;
left: 1px;
text-align: center;
color: white][fa]fa-user-plus[/fa]
[div=height: 10px;
width: 50px;
padding-top: 5px;
padding-bottom: 10px;
position: relative;
top: 5px;
left: 0px;
text-align: center;
color: white][fa]fa-comment[/fa][/div][/div][/div]
[div=height: 5px;
width: 250px;
background: #c1d2d0;
position: relative;
top: 102px;
left: 0px]
[div=height: 10px;
width: 330px;
padding:5px;
padding-right: 5px;
color: white;
font-size: 25px;
position: relative;
left: -3px;
top: -55px][font=Pacifico]name or role here[/font][/div][/div][/div][div=width: 340px;
margin: auto;
position: relative;
top: 55px][size=8px]coding by: diaphanous[/size][/div][/div]
 
Last edited:
β€” code #5
this was another one of my first codes with tabs. it's not necessarily hard to edit, but i don't suggest playing around with it if you're an extreme beginner at coding. if you're more familiar with bbcode, then you should be fine even if you aren't familiar with tabs. the code itself is a hidden scroll and there are thin scrolls, so be careful with those.






name
here




















  • stats

    go

    here






BASICS
PREFERENCES
PERSONA
HISTORY
coding by: diaphanous


Code: 
[div=height: 350px;
width: 400px;
margin: auto][div=height: 335px;
width: 400px;
background-color: #59443f;
position: absolute;
overflow: hidden][div=width: 107%; padding-right: 0px; height: 107%; overflow-y: scroll; color: black; font-size: 0.9em; font-align: justify;][div=height: 200px; 
width: 200px; 
background-image: url(http://ilarge.lisimg.com/image/11623588/1000full-alexia-giordano.jpg); 
background-size: 160%; 
background-position: 60% 10%; 
border: 5px solid #59443f; 
border-radius: 50%; 
position: relative; 
left: 60px; 
top: 20px][div=height: 100px; 
width: 100px; 
background-image: url(https://i.pinimg.com/originals/c9/93/40/c99340d2c0799b21f90c35b86b9135a1.jpg); 
background-size: 180%; 
background-position: 60% 0%; 
border: 5px solid #59443f; 
border-radius: 50%; 
position: relative; 
left: 150px][/div]
[div=height: 110px; 
width: 110px; 
background-image: url(http://www.rebecca-model.com/wp-content/uploads/2016/04/19687915692_ab454d2387_b.jpg); 
background-size: 180%; 
background-position: 60% 0%; 
border: 5px solid #59443f; 
border-radius: 50%; 
position: relative; 
left: 150px; 
top: -15px][/div][/div][div=height: 5px;
padding-top: 5px;
padding-bottom: 15px;
padding-right: 5px;
padding-left: 5px;
width: 370px;
background-color: white;
position: relative;
top: 60px;
left: 10px;
text-align: center;
font-size: 11px]name[div=height: 5px;
padding-top: 5px;
padding-bottom: 15px;
padding-right: 5px;
padding-left: 5px;
width: 370px;
background-color: white;
position: relative;
top: 10px;
left: -5px;
text-align: center;
font-size: 11px]here[/div][/div]


















[div=height: 50px;
width: 370px;
background-color: white;
position: relative;
top: -190px;
left: 15px][/div]
[div=position: relative;
width: 340px;
left: 15px;
top: -245px][tabs][tab=.....][div=height: 235px;
width: 340px;
padding: 15px;
background-color: white;
position: absolute;
margin-top: -22px;
left: 0px][div=height: 235px;
width: 165px;
padding: 5px;
background-color: white;
position: relative;
left: -5px;
top: -5px;
overflow: hidden;
font-size: 11px][div=width: 111%; padding-right: 0px; height: 100%; overflow-y: scroll; color: black; font-align: justify;]stats

go

here



[/div][/div]
[div=height: 240px;
width: 1px;
background: black;
position: relative;
margin-top: -265px;
margin-left: 170px][/div]
[div=height: 220px;
width: 150px;
border-radius: 50%;
background-image: url(http://ilarge.lisimg.com/image/11623566/1066full-alexia-giordano.jpg);
background-size: 170%;
background-position: 60% 5%;
position: relative;
top: -250px;
left: 190px][/div][/div][/tab]
[tab=.....][div=height: 235px;
width: 340px;
padding: 15px;
background-color: white;
position: absolute;
margin-top: -22px;
left: 0px][div=height: 235px;
width: 165px;
padding: 5px;
background-color: white;
position: relative;
left: -5px;
top: -5px;
overflow: hidden;
font-size: 11px][div=width: 111%; padding-right: 0px; height: 100%; overflow-y: scroll; color: black; font-align: justify;]more

stats

go

here



[/div][/div]
[div=height: 240px;
width: 1px;
background: black;
position: relative;
margin-top: -265px;
margin-left: 170px][/div]
[div=height: 220px;
width: 150px;
border-radius: 50%;
background-image: url(http://ilarge.lisimg.com/image/11623632/1066full-alexia-giordano.jpg);
background-size: 130%;
background-position: 45% 0%;
position: relative;
top: -250px;
left: 190px][/div][/div][/tab]
[tab=.....][div=height: 235px;
width: 340px;
padding: 15px;
background-color: white;
position: absolute;
margin-top: -22px;
left: 0px][div=height: 235px;
width: 165px;
padding: 5px;
background-color: white;
position: relative;
left: -5px;
top: -5px;
overflow: hidden;
font-size: 11px][div=width: 111%; padding-right: 0px; height: 100%; overflow-y: scroll; color: black; font-align: justify;]lorem

ipsum




[/div][/div]
[div=height: 240px;
width: 1px;
background: black;
position: relative;
margin-top: -265px;
margin-left: 170px][/div]
[div=height: 220px;
width: 150px;
border-radius: 50%;
background-image: url(http://ilarge.lisimg.com/image/11623543/1067full-alexia-giordano.jpg);
background-size: 130%;
background-position: 50% 10%;
position: relative;
top: -250px;
left: 190px][/div][/div][/tab]
[tab=.....][div=height: 235px;
width: 340px;
padding: 15px;
background-color: white;
position: absolute;
margin-top: -22px;
left: 0px][div=height: 235px;
width: 165px;
padding: 5px;
background-color: white;
position: relative;
left: -5px;
top: -5px;
overflow: hidden;
font-size: 11px][div=width: 111%; padding-right: 0px; height: 100%; overflow-y: scroll; color: black; font-align: justify;]more 

lorem 

ipsum




[/div][/div]
[div=height: 240px;
width: 1px;
background: black;
position: relative;
margin-top: -265px;
margin-left: 170px][/div]
[div=height: 220px;
width: 150px;
border-radius: 50%;
background-image: url(https://www.kinogallery.com/images/584030/kinogallery.com-584030-0714186001451694321.jpg);
background-size: 230%;
background-position: 60% 0%;
position: relative;
top: -250px;
left: 190px][/div][/div][/tab][/tabs][/div]
[div=position: relative;
height: 20px;
width: 80px;
padding-top: 10px;
padding-bottom: 5px;
background-color: white;
font-size: 11px;
margin-top: -335px;
margin-left: 28px;
pointer-events: none;
text-align: center]BASICS[div=position: relative;
height: 20px;
width: 90px;
padding-top: 10px;
padding-bottom: 5px;
background-color: white;
font-size: 11px;
margin-top: -25px;
margin-left: 78px;
pointer-events: none;
text-align: center]PREFERENCES
[div=position: relative;
height: 20px;
width: 95px;
padding-top: 10px;
padding-bottom: 5px;
background-color: white;
font-size: 11px;
margin-top: -25px;
margin-left: 89px;
pointer-events: none;
text-align: center]PERSONA[div=position: relative;
height: 20px;
width: 85px;
padding-top: 10px;
padding-bottom: 5px;
background-color: white;
font-size: 11px;
margin-top: -25px;
margin-left: 87px;
pointer-events: none;
text-align: center]HISTORY[/div][/div][/div][/div][/div][/div][/div][div=height: 10px;
width: 400px;
margin: auto;
margin-top: -15px][size=8px]coding by: diaphanous[/size][/div]
 
Last edited:
β€” code #6
this is one of my more recent codes and (thankfully) it's COMPLETELY mobile friendly!! it's pretty simple and easy to edit and it looks good with most colors.







NAME OR ROLE HERE
  • R E Q U I S I T E
    name:

    nickname(s):

    age:

    gender:

    sexual orientation:

    romantic orientation:

    role:
    .
    .
    .
    .
    .
    .





coding by: diaphanous


Code: 
[div=height: 350px;
width: 370px;
margin: auto][div=height: 150px;
width: 300px;
overflow: hidden;
background-image: url(https://i.pinimg.com/originals/95/19/54/951954e11ba8fb35c559ca2b95ef4728.jpg);
background-size: 100%;
background-position: 30% 25%;
position: relative;
top: 0px;
margin: auto]
[div=height: 120px;
width: 300px;
background: white;
opacity: 0.15;
transform: rotate(-70deg);
position: relative;
left: 0px][/div]
[div=height: 15px;
width: 250px;
padding-right: 5px;
padding-left: 10px;
border-bottom: 5px solid #d8d8d8;
position: relative;
top: -35px;
left: -8px;
letter-spacing: 2px;
color: white;
font-weight: 600;
font-size: 12px][font=Poppins]NAME OR ROLE HERE[/font][/div][/div][div=position: relative;
width: 250px;
top: 0px;
margin: auto][tabs][tab=.][div=height: 175px;
width: 288px;
padding: 5px;
background: white;
border-bottom: 1px solid #d8d8d8;
border-right: 1px solid #d8d8d8;
border-left: 1px solid #d8d8d8;
position: absolute;
margin-top: -35px;
margin-left: -30px;
color: black][font=Lato][size=5]R E Q U I S I T E[/size][/font]
[div=height: 2px;
width: 290px;
background: #d8d8d8;
position: relative;
top: -2px][/div][div=height: 145px;
width: 290px;
line-height: 10px;
overflow: auto;][size=11px][fa]fa-angle-double-right[/fa] [b]name:[/b]

[fa]fa-angle-double-right[/fa] [b]nickname(s):[/b] 

[fa]fa-angle-double-right[/fa] [b]age:[/b] 

[fa]fa-angle-double-right[/fa] [b]gender:[/b] 

[fa]fa-angle-double-right[/fa] [b]sexual orientation:[/b] 

[fa]fa-angle-double-right[/fa] [b]romantic orientation:[/b]

[fa]fa-angle-double-right[/fa] [b]role:[/b]
.
.
.
.
.
.[/size][/div][/div][/tab][tab=.][div=height: 175px;
width: 288px;
padding: 5px;
background: white;
border-bottom: 1px solid #d8d8d8;
border-right: 1px solid #d8d8d8;
border-left: 1px solid #d8d8d8;
position: absolute;
margin-top: -35px;
margin-left: -30px;
color: black][font=Lato][size=5]A P P E A R A N C E[/size][/font]
[div=height: 2px;
width: 290px;
background: #d8d8d8;
position: relative;
top: -2px][/div][div=height: 145px;
width: 290px;
line-height: 10px;
overflow: auto;][size=11px][fa]fa-angle-double-right[/fa] [b]faceclaim:[/b] 

[fa]fa-angle-double-right[/fa] [b]voiceclaim:[/b] 

[fa]fa-angle-double-right[/fa] [b]height:[/b] 

[fa]fa-angle-double-right[/fa] [b]weight:[/b] 

[fa]fa-angle-double-right[/fa] [b]body shape/type:[/b] 

[fa]fa-angle-double-right[/fa] [b]hair:[/b] 

[fa]fa-angle-double-right[/fa] [b]eyes:[/b] 

[fa]fa-angle-double-right[/fa] [b]clothing style:[/b] 

[fa]fa-angle-double-right[/fa] [b]distinguishing features:[/b] 

[fa]fa-angle-double-right[/fa] [b]body mods:[/b]
.
.
.
.
.
.[/size][/div][/div][/tab][tab=.][div=height: 175px;
width: 288px;
padding: 5px;
background: white;
border-bottom: 1px solid #d8d8d8;
border-right: 1px solid #d8d8d8;
border-left: 1px solid #d8d8d8;
position: absolute;
margin-top: -35px;
margin-left: -30px;
color: black][font=Lato][size=5]P E R S O N A[/size][/font]
[div=height: 2px;
width: 290px;
background: #d8d8d8;
position: relative;
top: -2px][/div][div=height: 145px;
width: 290px;
line-height: 10px;
overflow: auto;][size=11px][fa]fa-angle-double-right[/fa] [b]likes:[/b] 

[fa]fa-angle-double-right[/fa] [b]dislikes:[/b] 

[fa]fa-angle-double-right[/fa] [b]habits:[/b] 

[fa]fa-angle-double-right[/fa] [b]fears:[/b] 

[fa]fa-angle-double-right[/fa] [b]goals:[/b] 

[fa]fa-angle-double-right[/fa] [b]personality:[/b]
.
.
.
.
.
.[/size][/div][/div][/tab][tab=.][div=height: 175px;
width: 288px;
padding: 5px;
background: white;
border-bottom: 1px solid #d8d8d8;
border-right: 1px solid #d8d8d8;
border-left: 1px solid #d8d8d8;
position: absolute;
margin-top: -35px;
margin-left: -30px;
color: black][font=Lato][size=5]H I S T O R Y[/size][/font]
[div=height: 2px;
width: 290px;
background: #d8d8d8;
position: relative;
top: -2px][/div][div=height: 145px;
width: 290px;
line-height: 10px;
overflow: auto;][size=11px][fa]fa-angle-double-right[/fa] [b]biography:[/b]

[fa]fa-angle-double-right[/fa] [b]miscellaneous:[/b]
.
.
.
.
.
.
.
.
.
.
.
.
.
.[/size][/div][/div][/tab][/tabs][/div]
[div=height: 25px;
width: 298px;
background: white;
border-top: 1px solid #d8d8d8;
border-right: 1px solid #d8d8d8;
border-left: 1px solid #d8d8d8;
pointer-events: none;
position: relative;
top: -95px;
margin: auto;
color: #FFD879]
[div=height: 0px;
width: 0px;
background: white;
position: relative;
pointer-events: none;
top: -20px;
left: 60px;][fa]fa-star[/fa]
[div=height: 1px;
width: 10px;
color: #FFD879;
background: white;
position: relative;
pointer-events: none;
top: -21px;
left: 58px][fa]fa-star[/fa]
[div=height: 1px;
width: 10px;
color: #FFD879;
background: white;
position: relative;
pointer-events: none;
top: -21px;
left: 59px][fa]fa-star[/fa]
[div=height: 1px;
width: 10px;
color: #FFD879;
background: white;
position: relative;
pointer-events: none;
top: -21px;
left: 59px][fa]fa-star[/fa][/div][/div][/div][/div][/div][/div][div=height: 10px;
width: 300px;
margin: auto][size=8px]coding by: diaphanous[/size][/div]
 
Last edited:
β€” code #7
here's another ic code. it's simple and generally easy to work with. it's also customizable and works well with most colors, but it's not mobile friendly.







first m. last

What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).


Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

mood:
outfit:
mentions:
interaction:
tags:

Code: 
[div=height: 260px;
width: 330px;
background: #BDBCB7;
margin: auto][div=height: 260px;
width: 130px;
background-image: url(http://s3.eu-central-1.amazonaws.com/viewmanagement.com/wp-content/uploads/2017/07/vitamir-New-Faces-Ph-Alexander-Saladrigas-caralaxo456.jpg);
background-size: 200%;
background-position: 65% 5%;
position: relative;][/div]
[div=height: 7px;
width: 180px;
background:linear-gradient(to right,#f1f1f1, #a5a39c, #f1f1f1);
position: relative;
top: -260px;
left: 140px;]
[div=height: 20px;
width: 180px;
color: white;
text-shadow: 3px 0px 0.5px #818181;
position: relative;
top: -35px;
text-align: center;
transform: rotate(-0deg);
font-size: 20px]first m. last[/div][/div]
[div=height: 160px;
width: 185px;
padding: 5px;
background: #BDBCB7;
position: relative;
top: -270px;
left: 130px;
font-size: 10px;
color: white;
overflow: hidden][div=width: 110%; padding-right: 5px; height: 100%; overflow-y: scroll; text-align: justify;]What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).


Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.[/div][/div]
[div=height: 35px;
width: 180px;
padding: 3px;
background: #BDBCB7;
font-size: 9px;
color: white;
letter-spacing: 0.5px;
position: relative;
top: -293px;
left: 135px;
overflow: hidden][div=width: 100%; padding-right: 30px; height: 105%; overflow-y: scroll; color: text-align: justify;]mood: 
outfit: 
mentions: 
interaction: 
tags: [/div][/div][/div][div=opacity: 0; width: 100%; margin: auto][size=8px]@undine[/size][/div]
 
Last edited:
β€” code #8
this is my most recent cs code and i'm quite proud of it! the code is very complex, so please don't play around with it too much or it may end up breaking. it's mostly mobile friendly but there are a lot of hidden scrolls, so watch out for those! the code is quite a lot, so if you need help, feel free to shoot me a pm. (:






I'm not scared to jump
I'm not scared to fall
If there was nowhere to
land

first
last
i wouldn't be scared at all


LOREM ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta pharetra ipsum ut hendrerit. Donec eget odio urna. Aenean auctor, mauris quis congue finibus, ex libero mattis urna, nec auctor magna purus ac augue. Aliquam lectus magna, ornare in consectetur non, euismod vitae risus. Cras vulputate augue non egestas placerat. Fusce ultrices tellus et imperdiet rhoncus. Sed placerat accumsan lorem et interdum. Aenean tempus semper vulputate. Nam vulputate leo id orci euismod, non porttitor leo tempus.

Curabitur nec varius ligula. Quisque vehicula sapien sed enim dictum, vulputate aliquam tortor volutpat. Curabitur vel diam at mauris tincidunt congue id sed lacus. Morbi congue finibus mauris, eu commodo orci tincidunt in. Proin eget felis facilisis, hendrerit ex eget, varius ex. Duis eget risus euismod, efficitur urna a, euismod tellus. Aenean nulla arcu, vestibulum viverra iaculis et, sagittis sed orci. Donec quis interdum tellus. Cras ultricies nec lectus ut tempus. Curabitur congue purus eget porttitor tempus. Nunc imperdiet facilisis lacus, sit amet condimentum magna pretium sit amet. Mauris rhoncus sit amet neque vel dictum. Quisque pellentesque pretium elit, in euismod libero aliquam ac. Nam fringilla nibh vitae velit varius, vel accumsan sem volutpat. Praesent a fermentum mi.

Donec dapibus bibendum eros. Aliquam faucibus posuere sem id eleifend. Cras venenatis id dolor id suscipit. Pellentesque tempus accumsan magna. Quisque non scelerisque dolor. Praesent ex augue, pellentesque at leo dignissim, sollicitudin viverra eros. Integer blandit dolor quis nibh consectetur cursus. Donec at neque accumsan, congue sem pharetra, eleifend urna. Mauris neque sem, cursus ac purus quis, dapibus facilisis libero.
β€” requisite

LOREM ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta pharetra ipsum ut hendrerit. Donec eget odio urna. Aenean auctor, mauris quis congue finibus, ex libero mattis urna, nec auctor magna purus ac augue. Aliquam lectus magna, ornare in consectetur non, euismod vitae risus. Cras vulputate augue non egestas placerat. Fusce ultrices tellus et imperdiet rhoncus. Sed placerat accumsan lorem et interdum. Aenean tempus semper vulputate. Nam vulputate leo id orci euismod, non porttitor leo tempus.

Curabitur nec varius ligula. Quisque vehicula sapien sed enim dictum, vulputate aliquam tortor volutpat. Curabitur vel diam at mauris tincidunt congue id sed lacus. Morbi congue finibus mauris, eu commodo orci tincidunt in. Proin eget felis facilisis, hendrerit ex eget, varius ex. Duis eget risus euismod, efficitur urna a, euismod tellus. Aenean nulla arcu, vestibulum viverra iaculis et, sagittis sed orci. Donec quis interdum tellus. Cras ultricies nec lectus ut tempus. Curabitur congue purus eget porttitor tempus. Nunc imperdiet facilisis lacus, sit amet condimentum magna pretium sit amet. Mauris rhoncus sit amet neque vel dictum. Quisque pellentesque pretium elit, in euismod libero aliquam ac. Nam fringilla nibh vitae velit varius, vel accumsan sem volutpat. Praesent a fermentum mi.

Donec dapibus bibendum eros. Aliquam faucibus posuere sem id eleifend. Cras venenatis id dolor id suscipit. Pellentesque tempus accumsan magna. Quisque non scelerisque dolor. Praesent ex augue, pellentesque at leo dignissim, sollicitudin viverra eros. Integer blandit dolor quis nibh consectetur cursus. Donec at neque accumsan, congue sem pharetra, eleifend urna. Mauris neque sem, cursus ac purus quis, dapibus facilisis libero.
β€” persona

LOREM ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta pharetra ipsum ut hendrerit. Donec eget odio urna. Aenean auctor, mauris quis congue finibus, ex libero mattis urna, nec auctor magna purus ac augue. Aliquam lectus magna, ornare in consectetur non, euismod vitae risus. Cras vulputate augue non egestas placerat. Fusce ultrices tellus et imperdiet rhoncus. Sed placerat accumsan lorem et interdum. Aenean tempus semper vulputate. Nam vulputate leo id orci euismod, non porttitor leo tempus.

Curabitur nec varius ligula. Quisque vehicula sapien sed enim dictum, vulputate aliquam tortor volutpat. Curabitur vel diam at mauris tincidunt congue id sed lacus. Morbi congue finibus mauris, eu commodo orci tincidunt in. Proin eget felis facilisis, hendrerit ex eget, varius ex. Duis eget risus euismod, efficitur urna a, euismod tellus. Aenean nulla arcu, vestibulum viverra iaculis et, sagittis sed orci. Donec quis interdum tellus. Cras ultricies nec lectus ut tempus. Curabitur congue purus eget porttitor tempus. Nunc imperdiet facilisis lacus, sit amet condimentum magna pretium sit amet. Mauris rhoncus sit amet neque vel dictum. Quisque pellentesque pretium elit, in euismod libero aliquam ac. Nam fringilla nibh vitae velit varius, vel accumsan sem volutpat. Praesent a fermentum mi.

Donec dapibus bibendum eros. Aliquam faucibus posuere sem id eleifend. Cras venenatis id dolor id suscipit. Pellentesque tempus accumsan magna. Quisque non scelerisque dolor. Praesent ex augue, pellentesque at leo dignissim, sollicitudin viverra eros. Integer blandit dolor quis nibh consectetur cursus. Donec at neque accumsan, congue sem pharetra, eleifend urna. Mauris neque sem, cursus ac purus quis, dapibus facilisis libero.
β€” history

code by: diaphanous

Code: 
[div=height: 360px;
width: 349px;
background: white;
border: 1px solid #f1f1f1;
margin: auto;
box-shadow: 2px 3px 5px grey][div=height: 150px;
width: 350px;
background-image:url(http://division.pl/dev/wp-content/uploads/2017/11/5100251040_1_1_2.jpg);
background-size: 170%;
background-position: 75% 5%]
[div=height: 20px;
width: 250px;
padding: 5px;
letter-spacing: 1.5px;
font-size: 10px;
text-align: center;
position: relative;
left: 110px;
color: black;
text-transform: uppercase][font=Nunito Sans]I'm not scared to jump
I'm not scared to fall
If there was nowhere to[/font]
[div=height: 20px;
width: 250px;
padding: 5px;
letter-spacing: 4px;
font-size: 20px;
font-weight: 800;
color: #f1f1f1;
position: relative;
top: -5px;][font=Georgia][u]land[/u][/font][/DIV]
[div=height: 10px;
width: 80px;
padding: 5px;
background: #325cab;
border-radius: 20px 20px 20px 20px;
font-size: 8px;
position: relative;
top: -10px;
left: 40px; 
color: white]first
[div=height: 10px;
width: 85px;
padding: 5px;
background: #325cab;
border-radius: 20px 20px 20px 20px;
font-size: 8px;
position: relative;
top: -16px;
left: 90px]last[/div][/div][/div][div=height: 5px;
padding-top: 4px;
padding-bottom: 8px;
width: 350px;
background: #325cab;
letter-spacing: 2px;
font-size: 0.51em;
position: relative;
top: 95px;
text-align: center;
color: white;
text-transform: uppercase][font=Georgia]i wouldn't be scared at all[/font][/div][/div]
[div=height: 180px;
width: 290px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
position: relative;
top: 0px;
left: 0px;
margin: auto;
overflow: hidden][div=width: 100%; padding-right: 40px; height: 109%; font-size: 0.75em; overflow-y: scroll; font-align: justify]
[div=height: 170px;
width: 270px;
padding: 5px;
border: 1px solid #325cab;
position: relative;
top: -15px;
left: 5px][div=height: 135px;
width: 280px; 
padding-top: 30px;
padding-right: 5px;
padding-left: 5px;
margin: auto;
position: relative;
left: 0px;
top: 5px;
overflow: hidden][div=width: 100%; padding-right: 40px; height: 100%; overflow-y: scroll; font-align: justify; font-size: 10px;][imagefloat=left][div=height: 100px;
width: 90px;
position: relative;
top: 0px]
[div=height: 120px;
width: 90px;
background-image: url(http://division.pl/dev/wp-content/uploads/2017/11/0726251420_2_4_2.jpg);
background-size:320%;
background-position: 45% 0%;
position: relative;
top: -5px][/div][/div][/imagefloat][b]LOREM[/b] ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta pharetra ipsum ut hendrerit. Donec eget odio urna. Aenean auctor, mauris quis congue finibus, ex libero mattis urna, nec auctor magna purus ac augue. Aliquam lectus magna, ornare in consectetur non, euismod vitae risus. Cras vulputate augue non egestas placerat. Fusce ultrices tellus et imperdiet rhoncus. Sed placerat accumsan lorem et interdum. Aenean tempus semper vulputate. Nam vulputate leo id orci euismod, non porttitor leo tempus.

Curabitur nec varius ligula. Quisque vehicula sapien sed enim dictum, vulputate aliquam tortor volutpat. Curabitur vel diam at mauris tincidunt congue id sed lacus. Morbi congue finibus mauris, eu commodo orci tincidunt in. Proin eget felis facilisis, hendrerit ex eget, varius ex. Duis eget risus euismod, efficitur urna a, euismod tellus. Aenean nulla arcu, vestibulum viverra iaculis et, sagittis sed orci. Donec quis interdum tellus. Cras ultricies nec lectus ut tempus. Curabitur congue purus eget porttitor tempus. Nunc imperdiet facilisis lacus, sit amet condimentum magna pretium sit amet. Mauris rhoncus sit amet neque vel dictum. Quisque pellentesque pretium elit, in euismod libero aliquam ac. Nam fringilla nibh vitae velit varius, vel accumsan sem volutpat. Praesent a fermentum mi.

Donec dapibus bibendum eros. Aliquam faucibus posuere sem id eleifend. Cras venenatis id dolor id suscipit. Pellentesque tempus accumsan magna. Quisque non scelerisque dolor. Praesent ex augue, pellentesque at leo dignissim, sollicitudin viverra eros. Integer blandit dolor quis nibh consectetur cursus. Donec at neque accumsan, congue sem pharetra, eleifend urna. Mauris neque sem, cursus ac purus quis, dapibus facilisis libero.[/div][/div][div=height: 30px;
width: 260px;
background: white;
border-bottom: 1px solid #325cab;
position: relative;
top: -170px;
left: 5px][div=height: 20px;
width: 20px;
border-radius: 20px 20px 20px 20px;
background: #6080bd;
position: relative;
top: 5px;
left: 15px][div=height: 20px;
width: 20px;
border-radius: 20px 20px 20px 20px;
background: #496eb4;
position: relative;
left: 27px][div=height: 20px;
width: 20px;
border-radius: 20px 20px 20px 20px;
background: #325cab;
position: relative;
left: 27px][div=height: 20px;
width: 20px;
border-radius: 20px 20px 20px 20px;
background: #1c4aa2;
position: relative;
left: 27px][/div][/DIV][/div][/div][div=height: 25px;
width: 170px;
padding-top: 3px;
text-align: RIGHT;
color: #325cab;
font-size: 12px;
margin: auto;
position: relative;
top: -15px;
left: 20px;
LETTER-SPACING: 2px;
font-weight: 700;
text-transform: uppercase][font=Nunito Sans]β€” requisite[/font][/div][/div][/div]
[div=height: 170px;
width: 270px;
padding: 5px;
border: 1px solid #325cab;
position: relative;
top: -12px;
left: 5px][div=height: 135px;
width: 280px; 
padding-top: 30px;
padding-right: 5px;
padding-left: 5px;
margin: auto;
position: relative;
left: 0px;
top: 5px;
overflow: hidden][div=width: 100%; padding-right: 40px; height: 100%; overflow-y: scroll; font-align: justify; font-size: 10px;][imagefloat=left][div=height: 100px;
width: 90px;
position: relative;
top: 0px]
[div=height: 120px;
width: 90px;
background-image: url(https://i.pinimg.com/originals/a9/0b/33/a90b33f6bed59e2ddac01b12d9b5b23c.jpg);
background-size:210%;
background-position: 35% 40%;
position: relative;
top: -5px][/div][/div][/imagefloat][b]LOREM[/b] ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta pharetra ipsum ut hendrerit. Donec eget odio urna. Aenean auctor, mauris quis congue finibus, ex libero mattis urna, nec auctor magna purus ac augue. Aliquam lectus magna, ornare in consectetur non, euismod vitae risus. Cras vulputate augue non egestas placerat. Fusce ultrices tellus et imperdiet rhoncus. Sed placerat accumsan lorem et interdum. Aenean tempus semper vulputate. Nam vulputate leo id orci euismod, non porttitor leo tempus.

Curabitur nec varius ligula. Quisque vehicula sapien sed enim dictum, vulputate aliquam tortor volutpat. Curabitur vel diam at mauris tincidunt congue id sed lacus. Morbi congue finibus mauris, eu commodo orci tincidunt in. Proin eget felis facilisis, hendrerit ex eget, varius ex. Duis eget risus euismod, efficitur urna a, euismod tellus. Aenean nulla arcu, vestibulum viverra iaculis et, sagittis sed orci. Donec quis interdum tellus. Cras ultricies nec lectus ut tempus. Curabitur congue purus eget porttitor tempus. Nunc imperdiet facilisis lacus, sit amet condimentum magna pretium sit amet. Mauris rhoncus sit amet neque vel dictum. Quisque pellentesque pretium elit, in euismod libero aliquam ac. Nam fringilla nibh vitae velit varius, vel accumsan sem volutpat. Praesent a fermentum mi.

Donec dapibus bibendum eros. Aliquam faucibus posuere sem id eleifend. Cras venenatis id dolor id suscipit. Pellentesque tempus accumsan magna. Quisque non scelerisque dolor. Praesent ex augue, pellentesque at leo dignissim, sollicitudin viverra eros. Integer blandit dolor quis nibh consectetur cursus. Donec at neque accumsan, congue sem pharetra, eleifend urna. Mauris neque sem, cursus ac purus quis, dapibus facilisis libero.[/div][/div][div=height: 30px;
width: 260px;
background: white;
border-bottom: 1px solid #325cab;
position: relative;
top: -170px;
left: 5px][div=height: 20px;
width: 20px;
border-radius: 20px 20px 20px 20px;
background: #6080bd;
position: relative;
top: 5px;
left: 15px][div=height: 20px;
width: 20px;
border-radius: 20px 20px 20px 20px;
background: #496eb4;
position: relative;
left: 27px][div=height: 20px;
width: 20px;
border-radius: 20px 20px 20px 20px;
background: #325cab;
position: relative;
left: 27px][div=height: 20px;
width: 20px;
border-radius: 20px 20px 20px 20px;
background: #1c4aa2;
position: relative;
left: 27px][/div][/DIV][/div][/div][div=height: 25px;
width: 170px;
padding-top: 3px;
text-align: RIGHT;
color: #325cab;
font-size: 12px;
margin: auto;
position: relative;
top: -15px;
left: 20px;
LETTER-SPACING: 2px;
font-weight: 700;
text-transform: uppercase][font=Nunito Sans]β€” persona[/font][/div][/div][/div]
[div=height: 170px;
width: 270px;
padding: 5px;
border: 1px solid #325cab;
position: relative;
top: -13px;
left: 5px][div=height: 135px;
width: 280px; 
padding-top: 30px;
padding-right: 5px;
padding-left: 5px;
margin: auto;
position: relative;
left: 0px;
top: 5px;
overflow: hidden][div=width: 100%; padding-right: 40px; height: 100%; overflow-y: scroll; font-align: justify; font-size: 10px;][imagefloat=left][div=height: 95px;
width: 90px;
position: relative;
top: 0px]
[div=height: 120px;
width: 90px;
background-image: url(http://division.pl/dev/wp-content/uploads/2016/01/12507098_946950698675968_3787644595545816177_n.jpg);
background-size: 110%;
background-position: 45% 50%;
position: relative;
top: -5px][/div][/div][/imagefloat][b]LOREM[/b] ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta pharetra ipsum ut hendrerit. Donec eget odio urna. Aenean auctor, mauris quis congue finibus, ex libero mattis urna, nec auctor magna purus ac augue. Aliquam lectus magna, ornare in consectetur non, euismod vitae risus. Cras vulputate augue non egestas placerat. Fusce ultrices tellus et imperdiet rhoncus. Sed placerat accumsan lorem et interdum. Aenean tempus semper vulputate. Nam vulputate leo id orci euismod, non porttitor leo tempus.

Curabitur nec varius ligula. Quisque vehicula sapien sed enim dictum, vulputate aliquam tortor volutpat. Curabitur vel diam at mauris tincidunt congue id sed lacus. Morbi congue finibus mauris, eu commodo orci tincidunt in. Proin eget felis facilisis, hendrerit ex eget, varius ex. Duis eget risus euismod, efficitur urna a, euismod tellus. Aenean nulla arcu, vestibulum viverra iaculis et, sagittis sed orci. Donec quis interdum tellus. Cras ultricies nec lectus ut tempus. Curabitur congue purus eget porttitor tempus. Nunc imperdiet facilisis lacus, sit amet condimentum magna pretium sit amet. Mauris rhoncus sit amet neque vel dictum. Quisque pellentesque pretium elit, in euismod libero aliquam ac. Nam fringilla nibh vitae velit varius, vel accumsan sem volutpat. Praesent a fermentum mi.

Donec dapibus bibendum eros. Aliquam faucibus posuere sem id eleifend. Cras venenatis id dolor id suscipit. Pellentesque tempus accumsan magna. Quisque non scelerisque dolor. Praesent ex augue, pellentesque at leo dignissim, sollicitudin viverra eros. Integer blandit dolor quis nibh consectetur cursus. Donec at neque accumsan, congue sem pharetra, eleifend urna. Mauris neque sem, cursus ac purus quis, dapibus facilisis libero.[/div][/div][div=height: 30px;
width: 260px;
background: white;
border-bottom: 1px solid #325cab;
position: relative;
top: -170px;
left: 5px][div=height: 20px;
width: 20px;
border-radius: 20px 20px 20px 20px;
background: #6080bd;
position: relative;
top: 5px;
left: 15px][div=height: 20px;
width: 20px;
border-radius: 20px 20px 20px 20px;
background: #496eb4;
position: relative;
left: 27px][div=height: 20px;
width: 20px;
border-radius: 20px 20px 20px 20px;
background: #325cab;
position: relative;
left: 27px][div=height: 20px;
width: 20px;
border-radius: 20px 20px 20px 20px;
background: #1c4aa2;
position: relative;
left: 27px][/div][/DIV][/div][/div][div=height: 25px;
width: 170px;
padding-top: 3px;
text-align: RIGHT;
color: #325cab;
font-size: 12px;
margin: auto;
position: relative;
top: -15px;
left: 20px;
LETTER-SPACING: 2px;
font-weight: 700;
text-transform: uppercase][font=Nunito Sans]β€” history[/font][/div][/div][/div][/div][/div][/div]
[div=height: 10px;
width: 350px;
margin: auto;
position: relative;
top: -15px][size=8px]code by: diaphanous[/size][/div]
 
Last edited:
β€” code #9
here's my first code with bbcode+! it looks pretty bad on mobile and it's a very sensitive (and long) code. ctrl + f is VERY helpful when editing this code. this is just my first code with bbcode+ and it's not the best, but feel free to use it to figure out tabs and whatnot.





[class=taboutside]height: 30px; width: 90px; padding-top: 20px; padding-left: 10px; padding-right: 10px; font-size: 0.60em[/class] [class=tabs]height: 18px; width: 59px; font-weight: 700; padding-top: 5px; padding-left: 10px; padding-right: 10px; color: white; font-size: 1em; border: 1px solid white; cursor: pointer; display: inline-block; text-align: center; transition: 0.45s;[/class] [class name=tabs state=hover]border: 1px solid #f1f1f1; background: white; font-weight: 700; text-shadow: 1px 1px 2px orange; letter-spacing: 1.5px[/class] [script class=tabs on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} home) (show tabsContenthome) if (eq ${currentTab} requisite) (show tabsContentrequis) if (eq ${currentTab} persona) (show tabsContentperson) if (eq ${currentTab} history) (show tabsContenthistor) [/script]
[div class=taboutside style=width:100px;margin-top:65px;margin-left:-10px;][div class=tabs]home


[div class=tabs]requisite


[div class=tabs]persona[/div]

[div class=tabs]history[/div][/div] [div class=content][div class="tabsContent tabsContenthome" ]
first m. last
[/div][/div] [div class=content][div class="tabsContent tabsContentrequis" style=display:none]
your heart is like the warmth of the summer sunlight
the requisite
full name
Firstname Last name
age
Numbers
gender
Gender
sexual orient
sexual
orientation
etc.
etc.
[32] Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet consectetur adipisci[ng] velit, sed quia non-numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non-provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non-recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat…
[/div][/div] [div class=content][div class="tabsContent tabsContentperson" style=display:none]
your smile enchants everyone who sees it
preferences
[32] Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet consectetur adipisci[ng] velit, sed quia non-numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non-provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non-recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat…
personality
[32] Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet consectetur adipisci[ng] velit, sed quia non-numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non-provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non-recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat…
dd
[/div][/div] [div class=content][div class="tabsContent tabsContenthistor" style=display:none]
your eyes are the windows. . .
[32] Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet consectetur adipisci[ng] velit, sed quia non-numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non-provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non-recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat…
. . . to your soul
[/div][/div] [/div][/div]

Code: 
[nobr]
[class=taboutside]height: 30px;
width: 90px;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
font-size: 0.60em[/class]
[class=tabs]height: 18px;
width: 59px;
font-weight: 700;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
color: white;
font-size: 1em;
border: 1px solid white;
cursor: pointer;
display: inline-block;
text-align: center;
transition: 0.45s;[/class]
[class name=tabs state=hover]border: 1px solid #f1f1f1;
background: white;
font-weight: 700;
text-shadow: 1px 1px 2px orange;
letter-spacing: 1.5px[/class]
[script class=tabs on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} home) (show tabsContenthome)
if (eq ${currentTab} requisite) (show tabsContentrequis)
if (eq ${currentTab} persona) (show tabsContentperson)
if (eq ${currentTab} history) (show tabsContenthistor) [/script]

[div=height: 325px;
width: 500px;
background: #cecece;
border-radius: 10px 10px 10px 10px;
margin: auto;
overflow: hidden]

[div=height: 315px;
width: 85px;
padding: 5px;
background: #BC8C55;
border-radius: 0px 10px 10px 0px;
position: relative;
top: 0px;
left: 410px;
z-index: 2]

[div class=taboutside style=width:100px;margin-top:65px;margin-left:-10px;][div class=tabs]home[/div]
[br][/br][br][/br]
[div class=tabs]requisite[/div]
[br][/br][br][/br]
[div class=tabs]persona[/div]
[br][/br][br][/br]
[div class=tabs]history[/div][/div]

[div class=content][div class="tabsContent tabsContenthome" ]
[div=height: 400px;
width: 410px;
background-image:url(https://scontent.cdninstagram.com/vp/870566f61eed254698ab5ee42ee8ea10/5AE69B55/t51.2885-15/sh0.08/e35/p640x640/16788910_219561461851718_5342561694109401088_n.jpg);
background-size: 100%;
background-position: 30% 0%;
border-radius: 10px 0px 0px 10px;
position:absolute;
margin-left:-415px;
margin-top:-120px;][div=width: 340px;
height: 0px;
background: black;
transform: rotate(90deg);
color: white;
font-size: 40px;
text-transform: uppercase;
font-weight: 600;
text-align: center;
position: relative;
left: -125px;
top: 140px][font=Lato]first m. last[/font][/div][/div][/div][/div]

[div class=content][div class="tabsContent tabsContentrequis" style=display:none]
[div=height: 400px;
width: 410px;
background: #bd8f58;
border-radius: 10px 0px 0px 10px;
position: absolute;
margin-top: -120px;
left: -410px]
[div=height: 325px;
width: 195px;
background-image: url(https://media.giphy.com/media/lVrxiuOAUsvZu/giphy.gif);
background-size: 120%;
background-position: 45% 10%;
border-radius: 10px 0px 0px 10px;
position: relative;
top: 0px;
left: 0px]
[div=height: 325px;
width: 195px;
background: #bd8f58;
border-radius: 10px 0px 0px 10px;
opacity: 0.95;
position: relative;
top: 0px;
left: 0px]
[div=width: 150px;
height: 30px;
color: white;
text-align: center;
position: relative;
z-index: 5;
font-size: 0.60em;
top: 30px;
left: 20px;
font-weight: 700;
text-transform: uppercase;
line-height: 10px;
text-shadow: 0px 0px 2px orange][font=Quicksand]your heart is like the warmth
of the summer sunlight[/font]


[div=line-height: 13px;
font-size: 15px;
letter-spacing: 2.5px;
text-shadow: 0px 0px 2px orange;
font-weight: 400;
position: relative;
top: 15px][font=Quicksand]the
requisite[/font][/div][/div]
[div=height: 260px;
width: 180px;
padding: 5px;
position: relative;
z-index: 5;
top: 55px;
left: 5px;
font-size: 0.70em;
overflow: hidden][div=width: 110%; padding-right: 100px; height: 105%; overflow-y: auto; font-align: justify; color: white; text-shadow: 0px 0px 2px black]

[div=height: 5px;
width: 70px;
padding-top: 0px;
padding-bottom: 7px;
padding-right: 5px;
padding-left: 2px;
position: relative;
top: 0px;
font-style: Georgia;
text-transform: uppercase;
font-weight: 800;
line-height: 12px;
letter-spacing: 2.5px;][font=Lato][B]full
name[/B][/font][div=width: 110px;
padding: 5px;
position: relative;
top: -29px;
left: 60px;
text-align: right;
text-transform: capitalize;
font-weight: 400;
letter-spacing: 0px]Firstname Last name[/div][/div]
[div=height: 5px;
width: 70px;
padding-top: 0px;
padding-bottom: 7px;
padding-right: 5px;
padding-left: 2px;
position: relative;
top: 20px;
font-style: Georgia;
text-transform: uppercase;
font-weight: 800;
line-height: 12px;
letter-spacing: 2.5px;][font=Lato][B]age[/B][/font][div=width: 110px;
padding: 5px;
position: relative;
top: -17px;
left: 60px;
text-align: right;
text-transform: capitalize;
font-weight: 400;
letter-spacing: 0px]Numbers[/div][/div]
[div=height: 5px;
width: 80px;
padding-top: 0px;
padding-bottom: 7px;
padding-right: 5px;
padding-left: 2px;
position: relative;
top: 30px;
font-style: Georgia;
text-transform: uppercase;
font-weight: 800;
line-height: 12px;
letter-spacing: 2.5px;][font=Lato][B]gender[/B][/font][div=width: 100px;
padding: 5px;
position: relative;
top: -17px;
left: 70px;
text-align: right;
text-transform: capitalize;
font-weight: 400;
letter-spacing: 0px]Gender[/div][/div]
[div=height: 5px;
width: 80px;
padding-top: 0px;
padding-bottom: 7px;
padding-right: 5px;
padding-left: 2px;
position: relative;
top: 40px;
font-style: Georgia;
text-transform: uppercase;
font-weight: 800;
line-height: 12px;
letter-spacing: 2.5px;][font=Lato][B]sexual
orient[/B][/font][div=width: 100px;
padding: 5px;
position: relative;
top: -30px;
left: 70px;
text-align: right;
text-transform: capitalize;
font-weight: 400;
letter-spacing: 0px]sexual
[br][/br]
orientation[/div][/div]
[div=height: 5px;
width: 80px;
padding-top: 0px;
padding-bottom: 7px;
padding-right: 5px;
padding-left: 2px;
position: relative;
top: 65px;
font-style: Georgia;
text-transform: uppercase;
font-weight: 800;
line-height: 12px;
letter-spacing: 2.5px;][font=Lato][B]etc.[/B][/font][div=width: 100px;
padding: 5px;
position: relative;
top: -18px;
left: 70px;
text-align: right;
text-transform: capitalize;
font-weight: 400;
letter-spacing: 0px]etc.[/div][/div]

[div=height: 90px;
width: 195px;
overflow: hidden;
font-size: 0.98em;
position: relative;
top: 75px][div=width: 100%; padding-right: 100px; height: 100%; overflow-y: auto; font-align: justify][font=Lato]
[32] Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet consectetur adipisci[ng] velit, sed quia non-numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?

[33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non-provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non-recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat…[/font][/div][/div][/div][/div][/div][/div]
[div=height: 340px;
width: 215px;
background-image: url(https://scontent.cdninstagram.com/vp/74b40cf5c4a9e58f0c53bd7eadb31960/5AF9463C/t51.2885-15/sh0.08/e35/p640x640/16465607_1041195125992046_1375575177621929984_n.jpg);
background-size: 230%;
background-position: 40% 50%;
position: relative;
left: 195px;
top: -340px;][/div][/div][/div][/div]

[div class=content][div class="tabsContent tabsContentperson" style=display:none]
[div=height: 400px;
width: 410px;
background: #bd8f58;
border-radius: 10px 0px 0px 10px;
position: absolute;
margin-top: -120px;
left: -410px]
[div=height: 390px;
width: 160px;
background-image: url(https://scontent.cdninstagram.com/vp/733851659a5f474aa23df51777a8a01b/5AE8891E/t51.2885-15/sh0.08/e35/p640x640/14533558_1727030224288177_600923086430142464_n.jpg);
background-size: 220%;
background-position: 40% 50%;
border-radius: 10px 0px 0px 10px;
position: relative;
top: -20px;
left: 0px][/div]
[div=width: 230px;
height: 30px;
color: white;
text-align: center;
position: relative;
margin: auto;
z-index: 5;
font-size: 0.62em;
top: -365px;
left: 80px;
font-weight: 700;
text-transform: uppercase;
line-height: 10px;
text-shadow: 0px 0px 2px orange][font=Quicksand]your smile enchants
everyone who sees it[/font][/div]
[div=height: 250px;
width: 230px;
margin: auto;
position: relative;
top: -375px;
left: 80px;
overflow: hidden][div=width: 110%; padding-right: 100px; height: 100%; overflow-y: auto; font-align: justify]
[div=height: 30px;
width: 215px;
padding-top: 4px;
padding-bottom: 11px;
background: #b48854;
text-align: center;
font-size: 25px;
position: relative;
margin: auto;
left: -2px;
top: 10px;
color: #fff;
text-shadow: 0px 0px 1px orange][font=Quicksand]preferences[/font]
[div=height: 180px;
width: 203px;
padding: 5px;
border-left: 1px solid #b48854;
border-right: 1px solid #b48854;
border-bottom: 1px solid #b48854;
overflow: hidden;
text-align: left;
font-size: 0.40em;
color: white;
position: relative;
top: 4px;
text-shadow: 0px 0px 2px black][div=width: 110%; padding-right: 100px; height: 100%; overflow-y: auto; font-align: justify][32] Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet consectetur adipisci[ng] velit, sed quia non-numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?

[33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non-provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non-recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat…[/div][/div][/div]

[div=height: 30px;
width: 215px;
padding-top: 4px;
padding-bottom: 11px;
background: #b48854;
text-align: center;
font-size: 25px;
position: relative;
margin: auto;
left: -2px;
top: 220px;
color: #fff;
text-shadow: 0px 0px 1px orange][font=Quicksand]personality[/font]
[div=height: 180px;
width: 203px;
padding: 5px;
border-left: 1px solid #b48854;
border-right: 1px solid #b48854;
border-bottom: 1px solid #b48854;
overflow: hidden;
text-align: left;
font-size: 0.40em;
color: white;
position: relative;
top: 4px;
text-shadow: 0px 0px 2px black][div=width: 105%; padding-right: 100px; height: 100%; overflow-y: auto; font-align: justify][32] Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet consectetur adipisci[ng] velit, sed quia non-numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?

[33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non-provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non-recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat…[/div][/div][/div]

[div=height: 50px;
width: 50px;
position: relative;
top: 365px;
color: transparent]dd[/div][/div][/div][/div][/div][/div]

[div class=content][div class="tabsContent tabsContenthistor" style=display:none]
[div=height: 400px;
width: 410px;
background: #bd8f58;
border-radius: 10px 0px 0px 10px;
position: absolute;
margin-top: -120px;
left: -410px]
[div=height: 50px;
width: 350px;
background-image: url(https://scontent.cdninstagram.com/vp/01d459fae9b54b5074d7e5088cd3d9e5/5ADC81CF/t51.2885-15/sh0.08/e35/p640x640/16908475_206574496487323_3243589813386870784_n.jpg);
background-size: 140%;
background-position: 70% 19%;
margin: auto;
position: relative;
top: 30px]
[div=width: 350px;
color: white;
font-size: 20px;
text-shadow: 0px 0px 2px orange;
font-weight: 700;
text-align: right;
position: relative;
top: -25px][font=Quicksand]your eyes are the windows[SIZE=20px]. . .[/SIZE][/font][/div][/div]
[div=height: 2px;
width: 350px;
background: #b48854;
position: relative;
left: 30px;
top: 40px]
[div=height: 140px;
width: 350px;
font-size: 0.70em;
color: white;
position: relative;
top: 5px;
left: 0px;
overflow: hidden;
text-shadow: 0px 0px 3px black][div=width: 100%; padding-right: 100px; padding-left: 1px; height: 100%; overflow-y: auto; font-align: justify][32] Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet consectetur adipisci[ng] velit, sed quia non-numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?

[33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non-provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non-recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat…[/div][/div]

[div=height: 2px;
width: 350px;
background: #b48854;
position: relative;
left: 0px;
top: 10px][/div][/div]

[div=height: 50px;
width: 350px;
background-image: url(https://scontent.cdninstagram.com/vp/fa2c24e1856c0490b65fb4ea9c135913/5B00883F/t51.2885-15/sh0.08/e35/p640x640/19984528_791539067683811_8112677564075474944_n.jpg);
background-size: 180%;
background-position: 35% 31%;
margin: auto;
position: relative;
top: 200px]
[div=width: 350px;
color: white;
font-size: 20px;
font-weight: 700;
text-shadow: 0px 0px 2px orange;
position: relative;
top: 30px][font=Quicksand][SIZE=20px]. . . to your soul[/SIZE][/font][/div][/div][/div][/div][/div]

[/div][/div][/nobr]
 
Last edited:
omg
would you be willing to teach me tabs with bbcode+?
 
ye
could i pm you ??
bbcode + is literally too hard for me
and i don't want to go back to the old tab system )):<
 
β€” code #10
yay, my 10th freebie!! and it's an ic code!! this code is pretty simple and easily adjustable. there's a hover over the image and generally, it's not a very breakable code. it's mobile friendly, but there are several hidden scrolls, so be careful.





[class=imghover]width: 100%; padding: 40px 0px 30px 0px; opacity: 0; transition: 0.5s [/class] [class name=imghover state=hover]opacity: 1 [/class] [class=imghover2]height: 60px; width: 160px; padding-top: 10px; color: white; text-shadow: 2px 1px 0px black; text-align: center; position: relative; left: 10px left: -5px; line-height: 12px; opacity: 1; font-size: 15px; transition: 0.5s [/class] [class name=imghover2 state=hover]font-size: 18px [/class]
[div class=imghover]

outfit: xxx

mood: bloop

mentions: bloop

interaction: bloop

tags: bloop
[div class=imghover2]Firstname Middle
Lastname
[/div]
you're looking for . . .
What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
. . . the golden lie
[/div]
Code: 
[[nobr]
[div=height: 350px;
width: 500px;
padding: 10px;
background: #4D919C;
margin: auto]

[class=imghover]width: 100%; padding: 40px 0px 30px 0px; opacity: 0; transition: 0.5s
[/class]

[class name=imghover state=hover]opacity: 1
[/class]

[class=imghover2]height: 60px;
width: 160px;
padding-top: 10px;
color: white;
text-shadow: 2px 1px 0px black;
text-align: center;
position: relative;
left: 10px
left: -5px;
line-height: 12px;
opacity: 1;
font-size: 15px;
transition: 0.5s
[/class]

[class name=imghover2 state=hover]font-size: 18px
[/class]

[div=height: 350px;
width: 230px;
background-image: url(http://bohemiandiesel.com/media/sites/2/2015/03/Luiny25.jpg);
background-size: 140%;
background-position: 55% 10%;
position: relative]
[div=height: 270px;
width: 170px;
margin: auto;
border: 1px solid #4D919C;
position: relative;
top: 20px;]
[div=height: 270px;
width: 170px;
background: white;
opacity: 0.1;
position: relative;
top: 0px;][/div]

[div=height:270px;width:160px;top:-280px;left:-5px;margin:auto;transition:0.5s;position:relative; color: white;text-align:center;font-size:10px;overflow:hidden; ]
[div class=imghover][div=height: 100%; width: 100%; overflow-y: auto; padding-right: 40px][br][/br]
[u]outfit:[/u] xxx

[br][/br][br][/br]

[u]mood:[/u] bloop

[br][/br][br][/br]

[u]mentions:[/u] bloop

[br][/br][br][/br]

[u]interaction:[/u] bloop

[br][/br][br][/br]

[u]tags:[/u] bloop
[/div][/div]

[div class=imghover2][font=Niconne]Firstname Middle
[br][/br]Lastname[/font][/div][/div][/div][/div]

[div=height: 350px;
width: 260px;
background: #72A3AB;
position: relative;
left: 240px;
top: -350px]
[div=width: 240px;
color: white;
text-shadow: 0px 0px 8px #4D919C;
font-size: 20px;
text-align: right;
position: relative;
top: 50px;
font-style: italic;
font-weight: 700;
letter-spacing: 1px][font=IM Fell Great Primer]you're looking for . . .[/font][/div]

[div=height: 2px;
width: 100px;
background: #4D919C;
margin: auto;
position: relative;
top: 65px]

[div=height: 140px;
width: 240px;
padding: 5px;
position: relative;
top: 15px;
left: -70px;
font-size: 0.60em;
color: white;
text-align: justify;
overflow: hidden;
line-height: 10px][div=height: 100%; width: 100%; overflow-y: auto; padding-right: 40px]What is Lorem Ipsum?
[br][/br][br][/br]
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
[br][/br][br][/br]
Why do we use it?
[br][/br][br][/br]
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
[br][/br]
Where does it come from?
[br][/br]
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
[br][/br]
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
[br][/br]
Where can I get some?
[br][/br]
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.[/div][/div]

[div=height: 2px;
width: 100px;
background: #4D919C;
margin: auto;
position: relative;
top: 25px;
overflow: hidden][/div]

[div=width: 240px;
color: white;
text-shadow: 0px 0px 8px #4D919C;
font-size: 20px;
position: relative;
top: 35px;
left: -65px;
font-style: italic;
font-weight: 700;
letter-spacing: 1px][font=IM Fell Great Primer]. . . the golden lie[/font][/div][/div][/div][/div]
[div=width: 100%; opacity: 0; font-size: 10px; text-align: center][USER=38711]@undine[/USER][/div][/nobr]
 
Last edited:
as always ;
your codes are great,,
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)

Similar threads

mizton
Help quote bubble codes?
Replies
1
Views
146
Uxie
Uxie
Alteras
Resource Text Templater β€” a plain text template to form field generator
Replies
3
Views
213
A Murder Of Corviknight
A Murder Of Corviknight
JCKane
Help Tabs messing up due to too much text?
Replies
12
Views
92
JCKane
JCKane
arsensonfire
Help Anyone's shop still open?
Replies
1
Views
236
The Dark Wizard
The Dark Wizard
Back
Top