ReverseTex
Old Timer
Use the following code for your sheet. Check out other links for info, this is solely for organization of sheets
Character List
Character List
Follow along with the video below to see how to install our site as a web app on your home screen.
Note: This feature currently requires accessing the site using the built-in Safari browser.
[nobr]
[class=variables]
--color: #b7cfda;
cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important
[/class]
[class=container]
width: 460px;
height: 300px;
display: flex;
margin: auto;
[/class]
[class=left]
background-color: var(--color);
height: 300px;
width: 220px;
padding: 10px;
box-sizing: border-box;
[/class]
[class name=left maxWidth=450px]
width: 135px;
padding: 5px;
height: 290px;
[/class]
[class=img]
height: 280px;
width: 200px;
background-image: url('https://pbs.twimg.com/media/CkJHc2TWsAEQRCe.jpg');
filter: saturate(0%);
background-size: cover;
padding: 20px;
box-sizing: border-box;
background-position: 50% 50%;
[/class]
[class name=img maxWidth=450px]
width: 125px;
[/class]
[class=brackets]
height: 100%;
width: 100%;
background:
linear-gradient(to right, white 2px, transparent 2px) 0 100%,
linear-gradient(to left, white 2px, transparent 2px) 100% 0,
linear-gradient(to bottom, white 2px, transparent 2px) 100% 0,
linear-gradient(to top, white 2px, transparent 2px) 0 100%;
background-repeat: no-repeat;
background-size: 20px 20px;
[/class]
[class name=brackets maxWidth=450px]
opacity: 0;
[/class]
[class=right]
width: 240px;
height: 300px;
display: flex;
flex-direction: column;
[/class]
[class=contentContainer]
position: relative;
width: 240px;
height: 270px;
[/class]
[class name=contentContainer maxWidth=450px]
left: -5px;
[/class]
[class=content]
position: absolute;
opacity: 0;
transition: 0.5s;
width: 240px;
height: 270px;
font-size: 12px;
padding-left: 10px;
box-sizing: border-box;
overflow: hidden;
[/class]
[class=scroll]
width: 100%;
padding-right: 150px;
height: 100%;
overflow-y: scroll;
[/class]
[class=name]
font-weight: 900;
text-align: center;
border-bottom: 4px solid var(--color);
width: 120px;
display: block;
margin: 10% auto;
font-size: 18px;
position: relative;
[/class]
[class=textHome]
font-size: 12px;
text-align: center;
text-transform: uppercase;
width: 200px;
margin: 0 6.5%;
[/class]
[class=title]
text-align: center;
font-size: 16px;
text-transform: uppercase;
font-weight: 900;
[/class]
[class=tag]
display: inline-block;
border-bottom: 1px solid var(--color);
height: 15px;
font-size: 10px;
text-transform: uppercase;
[/class]
[class=imgSmallContainer]
width: 80%;
height: 70px;
display: flex;
justify-content: space-between;
margin: 10px auto;
[/class]
[class=imgSmall]
width: 70px;
height: 70px;
background-size: cover;
background-position: 50% 50%;
filter: saturate(70%);
[/class]
[class=tabs]
display: flex;
width: 150px;
margin: 0 23%;
justify-content: space-between;
[/class]
[class name=tabs maxWidth=450px]
position: relative;
left: -10px;
[/class]
[class=tab]
border-radius: 50%;
height: 20px;
width: 20px;
border: 1px solid black;
transition: 0.5s;
[/class]
[class name=tab state=hover]
cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important;
border: 1px solid var(--color);
[/class]
[class=show]
z-index: 1;
opacity: 1;
[/class]
[class=click]
border: 1px solid var(--color);
background-color: var(--color);
[/class]
[script class=tab01 on=click]
addClass click tab01
removeClass click tab02
removeClass click tab03
removeClass click tab04
addClass show content01
removeClass show content02
removeClass show content03
removeClass show content04
removeClass show contentHome
[/script]
[script class=tab02 on=click]
addClass click tab02
removeClass click tab01
removeClass click tab03
removeClass click tab04
addClass show content02
removeClass show content01
removeClass show content03
removeClass show content04
removeClass show contentHome
[/script]
[script class=tab03 on=click]
addClass click tab03
removeClass click tab01
removeClass click tab02
removeClass click tab04
addClass show content03
removeClass show content01
removeClass show content02
removeClass show content04
removeClass show contentHome
[/script]
[script class=tab04 on=click]
addClass click tab04
removeClass click tab01
removeClass click tab02
removeClass click tab03
addClass show content04
removeClass show content01
removeClass show content02
removeClass show content03
removeClass show contentHome
[/script]
[div class=variables]
[div class=container]
[div class=left]
[div class=img]
[div class=brackets][/div]
[/div]
[/div]
[div class=right]
[div class=contentContainer]
[div class="show content contentHome"]
[div class=name][font=Playfair Display SC]NAME HERE.[/font][/div]
[div class=textHome][font=Work Sans]you can put some[br][/br][br][/br]words, quotes or lyrics here[br][/br][br][/br]idk go wild people (not too wild it'll look funky with too many words)[/font][/div]
[/div]
[div class="content content01"]
[div class=scroll]
[div class=title][font=Playfair Display SC]basics[/font][/div]
[div class=tag][font=Work Sans]name[/font][/div] here
[br][/br]
[div class=tag][font=Work Sans]nicknames[/font][/div] here
[br][/br]
[div class=tag][font=Work Sans]age[/font][/div] here
[br][/br]
[div class=tag][font=Work Sans]gender[/font][/div] here
[br][/br]
[div class=imgSmallContainer]
[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/5c6bdda06395918d539f1a74b461a4be/tumblr_inline_p2n1dpx7Gf1rbm3wd_500.gif');"][/div]
[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/237ccb779ff20060aefc3c39dbc184f5/tumblr_inline_p2n1dxKhwx1rbm3wd_500.gif');"][/div]
[/div]
[div class=title][font=Playfair Display SC]appearance[/font][/div]
[div class=tag][font=Work Sans]height[/font][/div] five foot, eight inches.
[br][/br]
[div class=tag][font=Work Sans]additional appearance info (tattoos, jewelry, exc...)[/font][/div] answer
[br][/br]
[/div]
[/div]
[div class="content content02"]
[div class=scroll]
[div class=title][font=Playfair Display SC]persona[/font][/div]
[div class=tag][font=Work Sans]vices & virtues (3 of each) [/font][/div] answer
[div class=imgSmallContainer]
[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/68ded5bba4c841da1a78817d182c3fbf/tumblr_inline_p2n1dhnFmO1rbm3wd_500.gif');"][/div]
[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/5132a61d29baef25ff3bad70a27ca89d/tumblr_inline_p2n1cqTnmk1rbm3wd_500.gif');"][/div]
[/div]
[div class=tag][font=Work Sans]things players should know[/font][/div] output/answer
[br][/br]
[/div]
[/div]
[div class="content content03"]
[div class=scroll]
[div class=title][font=Playfair Display SC]special[/font][/div]
[div class=imgSmallContainer]
[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/958523d0131f3fab9de7b99c9dcfab4e/tumblr_inline_p2n1cxOyQW1rbm3wd_500.gif');"][/div]
[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/125340aa07906c00b610fe3888e5936e/tumblr_inline_p2n1d8f6FE1rbm3wd_500.gif');"][/div]
[/div]
[div class=tag][font=Work Sans]pet/companion?[/font][/div] output
[br][/br]
[div class=tag][font=Work Sans]specialization[/font][/div] output
[br][/br]
[/div]
[/div]
[div class="content content04"]
[div class=scroll]
[div class=title][font=Playfair Display SC]background[/font][/div]
[div class=tag][font=Work Sans]age prior to the gates (if not applicable put not alive)[/font][/div] output
[div class=imgSmallContainer]
[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/442a13a55bfbe3022553b68e25dadf73/tumblr_inline_p2n1feBvAr1rbm3wd_500.gif');"][/div]
[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/acb1a84e37ba3c0b6526e617ed806627/tumblr_inline_p2n1fmKjhS1rbm3wd_500.gif');"][/div]
[/div]
[div class=tag][font=Work Sans]if alive prior write a brief summary of their life prior. I don’t want a novel. If not born yet write about your life so far. [/font][/div] answer
[br][/br]
[div class=tag][font=Work Sans]misc. facts[/font][/div]
[br][/br]
xx → can make a list of things like this, or whatever you want to do with arrows
[br][/br]
xx → etc.
[/div]
[/div]
[/div]
[div class=tabs]
[div class="tab tab01"][/div]
[div class="tab tab02"][/div]
[div class="tab tab03"][/div]
[div class="tab tab04"][/div]
[/div]
[/div]
[/div]
[/div]
[div=font-size: 9px; text-align: center; opacity: 0.7;]coded by [user=26242]shady[/user].[/div]
[/nobr]