Resource asterism (code dump/freebies)

lavendre · Jan 28, 2018

sadvalentine said:
as always ;
your codes are great,,

thank you!

norway · Jan 28, 2018

these are so incredibly lovely! just adore them.

lavendre · Feb 3, 2018

— code #11

this is literally the most unsatisfying code i've made so far. it just looks kinda bleh to me and it really didn't turn out the way i wanted it to. hopefully someone else can make the most out of it. it's another easy-to-break code and it's NOT mobile-friendly, but it has tabs and hovers and stuff, so i guess that's cool?

[class=taboutside]height: 30px; width: 100px; padding-top: 20px; padding-left: 10px; padding-right: 10px; font-size: 0.55em[/class] [class=tabs]height: 18px; width: 50px; font-weight: 700; color: white; font-size: 3em; cursor: pointer; display: inline-block; text-align: center; transition: 0.3s;[/class] [class name=tabs state=hover]font-weight: 700; color:#A4AAB4; font-size: 4em; text-shadow: 0px 0px 3px white; letter-spacing: 0.5px; transform:rotate(20deg)[/class] [script class=tabs on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} 01) (show tabsContent01) if (eq ${currentTab} 02) (show tabsContent02) if (eq ${currentTab} 03) (show tabsContent03) if (eq ${currentTab} 04) (show tabsContent04) [/script]

you live in shades of cool

name here

[div class=taboutside style=width:365px;height:150px;margin-top:-5px;margin-left:70px;][div class=tabs]01.

[div class=tabs]02.

[div class=tabs]03.[/div][div class=tabs]04.[/div][/div]

[div class=content][div class="tabsContent tabsContent01" ]

requisite .

name:

Firstname M. Lastname

age:

Age

gender:

Gender

sexuality:

Sexuality

occupation:

Their job

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 class=content][div class="tabsContent tabsContent02" style="display:none"]

persona .

likes

• lorem ipsum dolor sit amet

• thing

• thing

• thing

• thing

• thing

dislikes

• lorem ipsum dolor sit amet

• thing

• thing

• thing

• thing

• thing

habits

• lorem ipsum dolor sit amet

• thing

• thing

• thing

• thing

• thing

etc

• lorem ipsum dolor sit amet

• thing

• thing

• thing

• thing

• thing

personality

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 class=content][div class="tabsContent tabsContent03" style="display:none"]

biography .

history

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 class=content][div class="tabsContent tabsContent04" style="display:none"]

relations .

relationships

[class=imagehover]height:85px;width:85px;top:0px;margin:auto;transition:0.5s;position:relative;color:transparent [/class] [class name=imagehover state=hover]background:#f1f1f1;height:85px;width:85px;margin-top:0px;color:black;opacity:0.75;border-radius:10px 10px 10px 10px [/class]

[div class=imagehover]

firstname

dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

[div class=imagehover]

firstname

dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

[div class=imagehover]

firstname

dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

[div class=imagehover]

firstname

dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

[div class=imagehover]

firstname

dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

[div class=imagehover]

firstname

dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

[/div]

[/div][/div][/div][/div][/div][/div][/div][/div][/div]

Code:

[nobr]
[class=taboutside]height: 30px;
width: 100px;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
font-size: 0.55em[/class]
[class=tabs]height: 18px;
width: 50px;
font-weight: 700;
color: white;
font-size: 3em;
cursor: pointer;
display: inline-block;
text-align: center;
transition: 0.3s;[/class]
[class name=tabs state=hover]font-weight: 700;
color:#A4AAB4;
font-size: 4em;
text-shadow: 0px 0px 3px white;
letter-spacing: 0.5px;
transform:rotate(20deg)[/class]
[script class=tabs on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} 01) (show tabsContent01)
if (eq ${currentTab} 02) (show tabsContent02)
if (eq ${currentTab} 03) (show tabsContent03)
if (eq ${currentTab} 04) (show tabsContent04) [/script]

[div=height: 325px;
width: 600px;
background: #cecece;
margin: auto;
overflow: hidden]
[div=height: 325px;
width: 220px;
background-image: url(https://data.whicdn.com/images/309185486/large.jpg);
background-size: 140%;
background-position: 50% 100%;
position: relative;
top: 0px;
overflow: hidden]
[div=height: 10px;
width: 170px;
padding: 5px;
background: black;
position: relative;
top: 300px;
left: 20px;
color: white;
transform: rotate(0deg);
font-size: 0.60em;
text-align: center][font=Georgia]you live in shades of cool[/font]
[div=height: 60px;
width: 215px;
position: relative;
top: -50px;
left: -20px;
font-size: 33px;
text-shadow: 1px 1px 0px black][font=Pacifico]name here[/font][/div][/div][/div]

[div=height: 55px;
width: 370px;
padding: 5px;
background: #A4AAB4;
position: relative;
top: -325px;
left: 220px;
z-index: 2]

[div class=taboutside style=width:365px;height:150px;margin-top:-5px;margin-left:70px;][div class=tabs]01.[/div][div class=tabs]02.[/div][div class=tabs]03.[/div][div class=tabs]04.[/div][/div]

[div=height: 54px;
width: 54px;
border: 1px solid white;
border-radius: 50%;
position: relative;
top: -165px;
left: 300px]
[div=height: 50px;
width: 50px;
background-image: url(https://data.whicdn.com/images/317251074/original.gif);
filter: brightness(95%) grayscale(20%);
background-size: 170%;
background-position: 55% 40%;
border-radius: 50%;
position: relative;
left: 2px;
top: 2px][/div][/div]

[div class=content][div class="tabsContent tabsContent01" ]
[div=height: 248px;
width: 368px;
padding: 5px;
border: 1px solid #A4AAB4;
position: absolute;
margin-top: -161px;
margin-left: -5px]
[div=height: 250px;
width: 160px;
background-image: url(https://pbs.twimg.com/media/DSW0YfqVwAE4CZz.jpg);
background-size: 170%;
background-position: 50% 30%;
position: relative;
left: 210px;
overflow: hidden]
[div=height: 400px;
width: 120px;
background: white;
opacity: 0.15;
transform: rotate(40deg);
position: relative;
top: -55px;
left: -10px][/div][/div]

[div=width: 200px;
height: 50px;
position: relative;
top: -260px;
text-align: right;
font-style: oblique;
color: white;
font-size: 35px;
text-shadow: 0px 0px 10px #72767d][font=Courgette]requisite .[/font][/div]

[div=height: 200px;
width: 205px;
padding: 5px;
position: relative;
top: -260px;
left: -5px;
overflow: hidden][div=height: 136%; width: 100%; overflow-y: auto; padding-right: 40px;]
[div=height: 15px;
width: 195px;
background: #f1f1f1;
padding: 5px;
font-size: 0.65em][div=font-weight: 700;
text-transform: uppercase][font=Martel Sans]name:[/font][/div]
[div=width: 160px;
position: relative;
top: -16px;
left: 35px]Firstname M. Lastname[/div][/div]
[br][/br]

[div=height: 15px;
width: 195px;
background: #f1f1f1;
padding: 5px;
font-size: 0.65em;
position: relative;
top: -15px][div=font-weight: 700;
text-transform: uppercase][font=Martel Sans]age:[/font][/div]
[div=width: 170px;
position: relative;
top: -16px;
left: 25px]Age[/div][/div]
[br][/br]

[div=height: 15px;
width: 195px;
background: #f1f1f1;
padding: 5px;
font-size: 0.65em;
position: relative;
top: -30px][div=font-weight: 700;
text-transform: uppercase][font=Martel Sans]gender:[/font][/div]
[div=width: 145px;
position: relative;
top: -16px;
left: 45px]Gender[/div][/div]
[br][/br]

[div=height: 15px;
width: 195px;
background: #f1f1f1;
padding: 5px;
font-size: 0.65em;
position: relative;
top: -45px][div=font-weight: 700;
text-transform: uppercase][font=Martel Sans]sexuality:[/font][/div]
[div=width: 137px;
position: relative;
top: -16px;
left: 58px]Sexuality[/div][/div]
[br][/br]

[div=height: 15px;
width: 195px;
background: #f1f1f1;
padding: 5px;
font-size: 0.65em;
position: relative;
top: -60px][div=font-weight: 700;
text-transform: uppercase][font=Martel Sans]occupation:[/font][/div]
[div=width: 125px;
position: relative;
top: -16px;
left: 70px]Their job[/div][/div]

[div=height: 100px;
width: 205px;
position: relative;
top: -50px][div=height: 100%; width: 105%; overflow-y: auto; padding-right: 40px; font-size: 0.76em; letter-spacing: -0.4px; color: black]
[font=Source Sans Pro]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]
[br][/br]
Where does it come from?
[br][/br]
[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]
[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]
[br][/br]
Where can I get some?
[br][/br]
[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.[/font][/div][/div][/div][/div][/div][/div][/div]

[div class=content][div class="tabsContent tabsContent02" style="display:none"]
[div=height: 248px;
width: 368px;
padding: 5px;
border: 1px solid #A4AAB4;
position: absolute;
margin-top: -161px;
margin-left: -5px]
[div=height: 250px;
width: 160px;
background-image: url(https://i.pinimg.com/originals/83/46/08/834608efee7f6b6d2db440b737f14e0b.jpg);
background-size: 160%;
background-position: 50% 0%;
position: relative;
left: 210px;
overflow: hidden]
[div=height: 400px;
width: 120px;
background: white;
opacity: 0.15;
transform: rotate(40deg);
position: relative;
top: -55px;
left: -10px][/div][/div]

[div=width: 200px;
height: 50px;
position: relative;
top: -260px;
text-align: right;
font-style: oblique;
color: white;
font-size: 35px;
text-shadow: 0px 0px 10px #72767d][font=Courgette]persona .[/font][/div]

[div=height: 200px;
width: 205px;
padding: 5px;
position: relative;
top: -260px;
left: -5px;
overflow: hidden][div=height: 150%; width: 100%; overflow-y: auto; padding-right: 40px;]
[row][column=span4][div=height: 15px;
width: 70px;
background: #f1f1f1;
padding: 5px;
font-size: 0.65em;
text-align: center;
text-transform: uppercase;
font-weight: 700;
position: relative;
left: 15px][font=Martel Sans]likes[/font][/div]
[div=height: 75px;
width: 85px;
overflow: hidden;
position: relative;
left: 15px;
top: 5px;
line-height: 9px][div=height: 100%; width: 100%; overflow-y: auto; padding-right: 40px; font-size: 0.65em]
[font=Source Sans Pro]• lorem ipsum dolor sit amet
[br][/br]
[br][/br]
• thing
[br][/br]
[br][/br]
• thing
[br][/br]
[br][/br]
• thing
[br][/br]
[br][/br]
• thing
[br][/br]
[br][/br]
• thing[/font][/div][/div][/column]
[br][/br]

[column=span4][div=height: 15px;
width: 70px;
background: #f1f1f1;
padding: 5px;
font-size: 0.65em;
text-align: center;
text-transform: uppercase;
font-weight: 700;
position: relative;
top: -21px;
left: 10px][font=Martel Sans]dislikes[/font][/div]
[div=height: 75px;
width: 85px;
overflow: hidden;
position: relative;
top: -16px;
left: 10px;
line-height: 9px][div=height: 100%; width: 100%; overflow-y: auto; padding-right: 40px; font-size: 0.65em]
[font=Source Sans Pro]• lorem ipsum dolor sit amet
[br][/br]
[br][/br]
• thing
[br][/br]
[br][/br]
• thing
[br][/br]
[br][/br]
• thing
[br][/br]
[br][/br]
• thing
[br][/br]
[br][/br]
• thing[/font][/div][/div][/column]

[column=span4][div=height: 15px;
width: 70px;
background: #f1f1f1;
padding: 5px;
font-size: 0.65em;
text-align: center;
text-transform: uppercase;
font-weight: 700;
position: relative;
left: 15px;
top: -10px][font=Martel Sans]habits[/font][/div]
[div=height: 60px;
width: 85px;
overflow: hidden;
position: relative;
left: 15px;
top: -5px;
line-height: 9px][div=height: 100%; width: 100%; overflow-y: auto; padding-right: 40px; font-size: 0.65em]
[font=Source Sans Pro]• lorem ipsum dolor sit amet
[br][/br]
[br][/br]
• thing
[br][/br]
[br][/br]
• thing
[br][/br]
[br][/br]
• thing
[br][/br]
[br][/br]
• thing
[br][/br]
[br][/br]
• thing[/font][/div][/div][/column]

[column=span4][div=height: 15px;
width: 70px;
background: #f1f1f1;
padding: 5px;
font-size: 0.65em;
text-align: center;
text-transform: uppercase;
font-weight: 700;
position: relative;
left: 10px;
top: -10px][font=Martel Sans]etc[/font][/div]
[div=height: 60px;
width: 85px;
overflow: hidden;
position: relative;
left: 15px;
top: -5px;
line-height: 9px][div=height: 100%; width: 100%; overflow-y: auto; padding-right: 40px; font-size: 0.65em]
[font=Source Sans Pro]• lorem ipsum dolor sit amet
[br][/br]
[br][/br]
• thing
[br][/br]
[br][/br]
• thing
[br][/br]
[br][/br]
• thing
[br][/br]
[br][/br]
• thing
[br][/br]
[br][/br]
• thing[/font][/div][/div][/column][/row]

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

[div=height: 15px;
width: 195px;
background: #f1f1f1;
padding: 5px;
font-size: 0.65em;
font-weight: 700;
text-transform: uppercase;
text-align: center;
position: relative;
top: -60px;][font=Martel Sans]personality[/font][/div]
[br][/br]

[div=height: 175px;
width: 205px;
position: relative;
top: -75px][div=height: 100%; width: 105%; overflow-y: auto; padding-right: 40px; font-size: 0.76em; letter-spacing: -0.4px; color: black]
[font=Source Sans Pro]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]
[br][/br]
Where does it come from?
[br][/br]
[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]
[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]
[br][/br]
Where can I get some?
[br][/br]
[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.[/font][/div][/div][/div][/div][/div][/div][/div]

[div class=content][div class="tabsContent tabsContent03" style="display:none"]
[div=height: 248px;
width: 368px;
padding: 5px;
border: 1px solid #A4AAB4;
position: absolute;
margin-top: -161px;
margin-left: -5px]
[div=height: 250px;
width: 160px;
background-image: url(https://data.whicdn.com/images/304269582/large.jpg);
background-size: 190%;
background-position: 65% 10%;
position: relative;
left: 210px;
overflow: hidden]
[div=height: 400px;
width: 120px;
background: white;
opacity: 0.15;
transform: rotate(40deg);
position: relative;
top: -55px;
left: -10px][/div][/div]

[div=width: 200px;
height: 50px;
position: relative;
top: -260px;
text-align: right;
font-style: oblique;
color: white;
font-size: 35px;
text-shadow: 0px 0px 10px #72767d][font=Courgette]biography .[/font][/div]

[div=height: 200px;
width: 205px;
padding: 5px;
position: relative;
top: -260px;
left: -5px;
overflow: hidden][div=height: 136%; width: 100%; overflow-y: auto; padding-right: 40px;][div=height: 15px;
width: 195px;
background: #f1f1f1;
padding: 5px;
font-size: 0.65em;
font-weight: 700;
text-transform: uppercase;
text-align: center;
position: relative;
top: 0px;][font=Martel Sans]history[/font][/div]
[br][/br]

[div=height: 175px;
width: 205px;
position: relative;
top: -15px][div=height: 100%; width: 105%; overflow-y: auto; padding-right: 40px; font-size: 0.76em; letter-spacing: -0.4px; color: black]
[font=Source Sans Pro]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]
[br][/br]
Where does it come from?
[br][/br]
[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]
[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]
[br][/br]
Where can I get some?
[br][/br]
[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.[/font][/div][/div][/div][/div][/div][/div][/div]

[div class=content][div class="tabsContent tabsContent04" style="display:none"]
[div=height: 248px;
width: 368px;
padding: 5px;
border: 1px solid #A4AAB4;
position: absolute;
margin-top: -161px;
margin-left: -5px]

[div=height: 250px;
width: 160px;
background-image: url(https://data.whicdn.com/images/303299851/large.jpg);
background-size: 170%;
background-position: 50% 25%;
position: relative;
left: 210px;
overflow: hidden]
[div=height: 400px;
width: 120px;
background: white;
opacity: 0.15;
transform: rotate(40deg);
position: relative;
top: -55px;
left: -10px][/div][/div]

[div=width: 200px;
height: 50px;
position: relative;
top: -260px;
text-align: right;
font-style: oblique;
color: white;
font-size: 35px;
text-shadow: 0px 0px 10px #72767d][font=Courgette]relations .[/font][/div]
[div=height: 200px;
width: 205px;
padding: 5px;
position: relative;
top: -260px;
left: -5px;
overflow: hidden][div=height: 130%; width: 100%; overflow-y: auto; padding-right: 40px;][div=height: 15px;
width: 195px;
background: #f1f1f1;
padding: 5px;
font-size: 0.65em;
font-weight: 700;
text-transform: uppercase;
text-align: center;
position: relative;
top: 0px;][font=Martel Sans]relationships[/font][/div]
[br][/br]
[div=height: 175px;
width: 205px;
position: relative;
top: -15px][div=height: 110%; width: 105%; overflow-y: auto; padding-right: 40px; font-size: 0.70em]

[class=imagehover]height:85px;width:85px;top:0px;margin:auto;transition:0.5s;position:relative;color:transparent
[/class]

[class name=imagehover state=hover]background:#f1f1f1;height:85px;width:85px;margin-top:0px;color:black;opacity:0.75;border-radius:10px 10px 10px 10px
[/class]

[row][column=span4]
[div=height: 89px;
width: 89px;
border: 1px solid white;
border-radius: 10px 10px 10px 10px;
position: relative;
left: 2px]

[div=height: 85px;
width: 85px;
background-image: url(http://via.placeholder.com/85x85);
background-size: 100%;
border-radius: 10px 10px 10px 10px;
position: relative;
top: 2px;
left: 2px]

[div class=imagehover]
[div=width: 85px;
text-align: center;
position: relative;
top: 5px][font=Martel Sans]firstname[/font][/div]

[div=height: 60px;
width: 95px;
overflow: hidden;
position: relative;
top: 5px;
left: 4px][div=height:100%;width:100%;overflow-y:auto;padding-right:40px; font-size: 0.91em][font=Source Sans Pro]dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd[/font][/div][/div][/div][/div][/div]
[br][/br][/column]

[column=span4]
[div=height: 89px;
width: 89px;
border: 1px solid white;
border-radius: 10px 10px 10px 10px]

[div=height: 85px;
width: 85px;
background-image: url(http://via.placeholder.com/85x85);
background-size: 100%;
border-radius: 10px 10px 10px 10px;
position: relative;
top: 2px;
left: 2px]

[div class=imagehover]
[div=width: 85px;
text-align: center;
position: relative;
top: 5px][font=Martel Sans]firstname[/font][/div]

[div=height: 60px;
width: 95px;
overflow: hidden;
position: relative;
top: 5px;
left: 4px][div=height:100%;width:100%;overflow-y:auto;padding-right:40px; font-size: 0.91em][font=Source Sans Pro]dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd[/font][/div][/div][/div][/div][/div]
[br][/br][/column]

[column=span4][div=height: 89px;
width: 89px;
border: 1px solid white;
border-radius: 10px 10px 10px 10px;
position: relative;
left: 2px;
top: 5px]

[div=height: 85px;
width: 85px;
background-image: url(http://via.placeholder.com/85x85);
background-size: 100%;
border-radius: 10px 10px 10px 10px;
position: relative;
top: 2px;
left: 2px]

[div class=imagehover]
[div=width: 85px;
text-align: center;
position: relative;
top: 5px][font=Martel Sans]firstname[/font][/div]

[div=height: 60px;
width: 95px;
overflow: hidden;
position: relative;
top: 5px;
left: 4px][div=height:100%;width:100%;overflow-y:auto;padding-right:40px; font-size: 0.91em][font=Source Sans Pro]dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd[/font][/div][/div][/div][/div][/div]
[br][/br][/column]

[column=span4][div=height: 89px;
width: 89px;
border: 1px solid white;
border-radius: 10px 10px 10px 10px;
position: relative;
left: 2px;
top: 5px]

[div=height: 85px;
width: 85px;
background-image: url(http://via.placeholder.com/85x85);
background-size: 100%;
border-radius: 10px 10px 10px 10px;
position: relative;
top: 2px;
left: 2px]

[div class=imagehover]
[div=width: 85px;
text-align: center;
position: relative;
top: 5px][font=Martel Sans]firstname[/font][/div]

[div=height: 60px;
width: 95px;
overflow: hidden;
position: relative;
top: 5px;
left: 4px][div=height:100%;width:100%;overflow-y:auto;padding-right:40px; font-size: 0.91em][font=Source Sans Pro]dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd[/font][/div][/div][/div][/div][/div]
[br][/br][/column]

[column=span4][div=height: 89px;
width: 89px;
border: 1px solid white;
border-radius: 10px 10px 10px 10px;
position: relative;
left: 2px;
top: 5px]

[div=height: 85px;
width: 85px;
background-image: url(http://via.placeholder.com/85x85);
background-size: 100%;
border-radius: 10px 10px 10px 10px;
position: relative;
top: 2px;
left: 2px]

[div class=imagehover]
[div=width: 85px;
text-align: center;
position: relative;
top: 5px][font=Martel Sans]firstname[/font][/div]

[div=height: 60px;
width: 95px;
overflow: hidden;
position: relative;
top: 5px;
left: 4px][div=height:100%;width:100%;overflow-y:auto;padding-right:40px; font-size: 0.91em][font=Source Sans Pro]dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd[/font][/div][/div][/div][/div][/div]
[br][/br][/column]

[column=span4][div=height: 89px;
width: 89px;
border: 1px solid white;
border-radius: 10px 10px 10px 10px;
position: relative;
left: 2px;
top: 5px]

[div=height: 85px;
width: 85px;
background-image: url(http://via.placeholder.com/85x85);
background-size: 100%;
border-radius: 10px 10px 10px 10px;
position: relative;
top: 2px;
left: 2px]

[div class=imagehover]
[div=width: 85px;
text-align: center;
position: relative;
top: 5px][font=Martel Sans]firstname[/font][/div]

[div=height: 60px;
width: 95px;
overflow: hidden;
position: relative;
top: 5px;
left: 4px][div=height:100%;width:100%;overflow-y:auto;padding-right:40px; font-size: 0.91em][font=Source Sans Pro]dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd[/font][/div][/div][/div][/div][/div]
[br][/br]
[br][/br][/column][/row][/div][/div][/div][/div][/div][/div][/div][/div][/div][/nobr]

cherub. · Feb 3, 2018

wtf this code is great

neverlandeds · Feb 12, 2018

is there a set size of the picture in code #6?

lavendre · Feb 12, 2018

faultinourselves said:
is there a set size of the picture in code #6?

nope, the picture itself can be any size and it's easily adjustable. however, it's probably best for the picture to be 300x150 (the size of the div) or larger.

neverlandeds · Feb 12, 2018

diaphanous said:
nope, the picture itself can be any size and it's easily adjustable. however, it's probably best for the picture to be 300x150 (the size of the div) or larger.

okay! thank you!

lavendre · Feb 15, 2018

— code #12

here's yet another cs code that i decided not to use, despite being happy with the results. it's a rather minimalistic design, though the code itself can get complicated. however, it's not too prone to breaking and it looks pretty good on mobile. also, there are small hovers over the tabs, which is pretty cool in my opinion.

character name

[class=taboutside]height: 30px; width: 100px; padding-top: 20px; padding-left: 10px; padding-right: 10px; font-size: 0.55em[/class] [class=tabs]height: 5px; width: 27px; padding-top: 5px; padding-bottom: 15px; border-radius: 50%; background: #b1b1b1; font-weight: 700; color: white; font-size: 1.4em; cursor: pointer; display: inline-block; text-align: center; transition: 0.8s;[/class] [class name=tabs state=hover]font-weight: 700; color: #b1b1b1[/class] [script class=tabs on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} 1requisite) (show tabsContentrequisite) if (eq ${currentTab} 2persona) (show tabsContentpersona) if (eq ${currentTab} 3history) (show tabsContenthistory) if (eq ${currentTab} 4relations) (show tabsContentrelations)[/script] [class=container] display: inline; position: relative; [/class] [class=boxcontainer] display: inline-block; opacity: 0; position: absolute; margin-left: -25px; margin-top: 0px; height: 100%; text-align: center; transition: opacity 0.4s; width: 100%; [/class] [class name=boxcontainer state=hover] opacity: 1; transition: all .7s ease-in-out; margin-top: -10px; [/class] [class name=box] background-color: #b1b1b1; border-radius: 10px 10px 10px 10px; color: white; display: inline-block; font-family: Arial, sans-serif; font-size: 0.75em; padding: 2px 5px; text-align: center; transition: all .7s ease-in-out[/class] [class name=box state=hover]border-radius: 10px 10px 10px 0px; margin-top: -10px [/class] [div class=taboutside style=width:350px;height:0px;position:relative;margin-top:-73px;margin-left:0px;color:transparent;][div class=tabs][div class=container]1[div class=boxcontainer][div class=box]requisite

[/div][/div][div class=tabs][div class=container]2[div class=boxcontainer][div class=box]persona[/div][/div][/div][/div][div class=tabs][div class=container]3[div class=boxcontainer][div class=box]history[/div][/div][/div][/div][div class=tabs][div class=container]4[div class=boxcontainer][div class=box]relations[/div][/div][/div][/div][/div][/div]

[div class=content][div class="tabsContent tabsContentrequisite"]

requisite

all i ever wanted was the world

name or something

age or something

gender or something

sexuality or something

role or something

height or something

weight or something

eye color or something

hair color or something

[/div] [div class=content][div class="tabsContent tabsContentpersona" style="display:none"]

persona

you { say } i'm kinda difficult

likes

blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah

dislikes

blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah

habits/quirks

blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah

etc

blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah

personality

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Sed ne, dum huic obsequor, vobis molestus sim. Summus dolor plures dies manere non potest? Omnes enim iucundum motum, quo sensus hilaretur. Est, ut dicis, inquit; Duo Reges: constructio interrete. Haec quo modo conveniant, non sane intellego. Illis videtur, qui illud non dubitant bonum dicere; Unum est sine dolore esse, alterum cum voluptate. Nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Illi enim inter se dissentiunt. Quo plebiscito decreta a senatu est consuli quaestio Cn. Quid enim? De ingenio eius in his disputationibus, non de moribus quaeritur. Quis non odit sordidos, vanos, leves, futtiles? Hic quoque suus est de summoque bono dissentiens dici vere Peripateticus non potest. Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Quae cum dixisset paulumque institisset, Quid est?

[/div] [div class=content][div class="tabsContent tabsContenthistory" style="display:none"]

history

you can { count } on me to misbehave

biography

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Sed ne, dum huic obsequor, vobis molestus sim. Summus dolor plures dies manere non potest? Omnes enim iucundum motum, quo sensus hilaretur. Est, ut dicis, inquit; Duo Reges: constructio interrete. Haec quo modo conveniant, non sane intellego. Illis videtur, qui illud non dubitant bonum dicere; Unum est sine dolore esse, alterum cum voluptate. Nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Illi enim inter se dissentiunt. Quo plebiscito decreta a senatu est consuli quaestio Cn. Quid enim? De ingenio eius in his disputationibus, non de moribus quaeritur. Quis non odit sordidos, vanos, leves, futtiles? Hic quoque suus est de summoque bono dissentiens dici vere Peripateticus non potest. Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Quae cum dixisset paulumque institisset, Quid est?

misc

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Sed ne, dum huic obsequor, vobis molestus sim. Summus dolor plures dies manere non potest? Omnes enim iucundum motum, quo sensus hilaretur. Est, ut dicis, inquit; Duo Reges: constructio interrete. Haec quo modo conveniant, non sane intellego. Illis videtur, qui illud non dubitant bonum dicere; Unum est sine dolore esse, alterum cum voluptate. Nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Illi enim inter se dissentiunt. Quo plebiscito decreta a senatu est consuli quaestio Cn. Quid enim? De ingenio eius in his disputationibus, non de moribus quaeritur. Quis non odit sordidos, vanos, leves, futtiles? Hic quoque suus est de summoque bono dissentiens dici vere Peripateticus non potest. Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Quae cum dixisset paulumque institisset, Quid est?

[/div][/div] [div class=content][div class="tabsContent tabsContentrelations" style="display:none"]

relations

got you { wrapped } around my finger babe

[class=imagehover]height:124px;width:110px;top:0px;margin:auto;transition:1s;position:relative;color:transparent [/class] [class name=imagehover state=hover]background:#f1f1f1;height:124px;width:110px;margin-top:0px;color:black;opacity:0.8; [/class]

[div class=imagehover]

firstname