LittleDarkness
Come and kiss me, salt water
I do not own this character sheet. However, I would love for you to use this templet for your sheets.
You may post sheets here once they are finished.
BEFORE YOU MAKE YOUR CHARACTER, MAKE SURE YOU'VE BEEN APPROVED.
CODE
You may post sheets here once they are finished.
BEFORE YOU MAKE YOUR CHARACTER, MAKE SURE YOU'VE BEEN APPROVED.
CODE
[class=container] --accent-1: #A0C9C9; --accent-2: #B2E0E0; --accent-3: #333; --image-1: url(https://via.placeholder.com/150/000000/FFFFFF/?text=IMAGE 1); --image-2: url(https://via.placeholder.com/92/000000/FFFFFF/?text=IMAGE 2); --image-3: url(https://via.placeholder.com/92/000000/FFFFFF/?text=IMAGE 3); --image-4: url(https://via.placeholder.com/92/000000/FFFFFF/?text=IMAGE 4); --image-5: url(https://via.placeholder.com/92/000000/FFFFFF/?text=IMAGE 5); --image-6: url(https://via.placeholder.com/92/000000/FFFFFF/?text=IMAGE 6); --image-7: url(https://via.placeholder.com/92/000000/FFFFFF/?text=IMAGE 7); --image-8: url(https://via.placeholder.com/92/000000/FFFFFF/?text=IMAGE 8); --image-9: url(https://via.placeholder.com/92/000000/FFFFFF/?text=IMAGE 9); --image-10: url(https://via.placeholder.com/92/000000/FFFFFF/?text=IMAGE 10); --image-11: url(https://via.placeholder.com/92/000000/FFFFFF/?text=IMAGE 11); --image-12: url(https://via.placeholder.com/92/000000/FFFFFF/?text=IMAGE 12); --image-13: url(https://via.placeholder.com/92/000000/FFFFFF/?text=IMAGE 13); --image-14: url(https://via.placeholder.com/92/000000/FFFFFF/?text=IMAGE 14); --image-15: url(https://via.placeholder.com/92/000000/FFFFFF/?text=IMAGE 15); --image-16: url(https://via.placeholder.com/92/000000/FFFFFF/?text=IMAGE 16); [/class] [div class=credit][/div][div class=credit2 style="display: none;"]code + design by constellation [/div] [class=credit]position: absolute; top: 0px; left: 0px; font-size: 15px; color: #b2e0e0; transition: 1s;[/class] [class=credit2]position: absolute; z-index: 2; top: 5px; left: 15px; max-width: 160px; margin: 15px; font-size: 10px; letter-spacing: 3px; text-align: center; font-weight: 500; text-transform: lowercase; padding: 25px 30px; color: #333; border: 1px solid #e2e2e2; background: white;[/class] [class name="credit" state="hover"]cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; color: #A0C9C9; transitions: 1s;[/class] [script class=credit on=mouseenter]fadeIn 1000 credit2[/script][script class=credit on=mouseleave]fadeOut 1000 credit2[/script]
[div class=container][div class=border][div class=charactername]CHARACTERS NAME
[div class=icon][/div] [div class=role]Other[/div] [div class=sideword]ROLE[/div]
[div class="tabContents tabContents1"][div class=textbox][div class=scroll][div class=tag]full name.[/div]
information here
[div class=tag]nicknames.[/div]
information here
[div class=tag]age.[/div]
information here
[div class=tag]birthdate.[/div]
information here
[div class=tag]gender[/div]
information here
[div class=tag]country.[/div]
information here
[div class=tag]sexuality.[/div]
information here
[div class=tag]relationship status.[/div]
information here
[div class=tag]Theme Songs.[/div]
information here
[/div][/div]
[div class=column][div class=images style="background: var(--image-2); background-size: cover; background-position: center;"][/div]
[div class=images style="background: var(--image-3); background-size: cover; background-position: center;"][/div]
[div class=images style="background: var(--image-4); background-size: cover; background-position: center;"][/div][/div][/div]
[div class="tabContents tabContents2"][div class=textbox][div class=scroll][div class=tag]eyes.[/div]
information here.
[div class=tag]hair.[/div]
information here
[div class=tag]height.[/div]
information here
[div class=tag]body build.[/div]
information here
[div class=tag]distinguishing marks.[/div]
information here
[div class=tag]attire.[/div]
information here
[/div][/div]
[div class=column][div class=images style="background: var(--image-5); background-size: cover; background-position: center;"][/div]
[div class=images style="background: var(--image-6); background-size: cover; background-position: center;"][/div]
[div class=images style="background: var(--image-7); background-size: cover; background-position: center;"][/div][/div][/div]
[div class="tabContents tabContents3"][div class=textbox][div class=scroll][div class=tag]enneagram.[/div]
information here
[div class=tag]positive traits.[/div]
information here
[div class=tag]negative traits.[/div]
information here
[div class=tag]love language.[/div]
information here
[div class=tag]greatest fear.[/div]
information here
[div class=tag]priorities, goals and ambitions.[/div]
information here
[div class=tag]likes.[/div]
information here
[div class=tag]dislikes.[/div]
information here
[/div][/div]
[div class=column][div class=images style="background: var(--image-8); background-size: cover; background-position: center;"][/div]
[div class=images style="background: var(--image-9); background-size: cover; background-position: center;"][/div]
[div class=images style="background: var(--image-10); background-size: cover; background-position: center;"][/div][/div][/div]
[div class="tabContents tabContents4"][div class=textbox][div class=scroll][div class=tag]the backstory.[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin tempor felis, id hendrerit tortor consequat ultricies. Quisque eget purus lobortis, facilisis nisi sed, vehicula nisl. Cras pellentesque dictum sollicitudin. Nunc posuere ex a elit malesuada, vel condimentum quam sagittis. Suspendisse ipsum risus, laoreet ut pretium vitae, elementum eget ipsum. Phasellus felis lectus, pretium eu nibh quis, consectetur egestas turpis. Sed dignissim felis et sapien vulputate dapibus. Proin orci risus, tristique quis ante et, ultricies maximus purus. Phasellus ultricies, felis at facilisis iaculis, nulla massa vestibulum nunc, et malesuada tellus nisi eu arcu. Fusce rhoncus odio et velit pellentesque, et efficitur odio condimentum. Phasellus pharetra mi et laoreet iaculis. Quisque pulvinar nulla sit amet pretium faucibus.
Suspendisse sit amet venenatis urna, ut egestas justo. Maecenas et aliquet nisl, ac posuere felis. Nam eget tincidunt erat. Phasellus tincidunt lobortis nisi, volutpat suscipit dolor rhoncus vitae. Praesent quis est sit amet arcu commodo elementum eget mollis magna. Vestibulum dictum scelerisque quam id volutpat. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Maecenas malesuada tellus vel ultrices accumsan. Mauris quam nunc, mattis id tristique sit amet, pulvinar a mauris. Duis at porta lectus. Curabitur porta, sem non molestie lobortis, arcu augue gravida lacus, at congue libero lacus vel est. Pellentesque ornare, enim at maximus elementum, libero nunc aliquet est, nec convallis erat orci eu diam.
[/div][/div]
[div class=column][div class=images style="background: var(--image-11); background-size: cover; background-position: center;"][/div]
[div class=images style="background: var(--image-12); background-size: cover; background-position: center;"][/div]
[div class=images style="background: var(--image-13); background-size: cover; background-position: center;"][/div][/div][/div]
[div class="tabContents tabContents5"][div class=textbox][div class=scroll][div class=tag]father.[/div]
information here
[div class=tag]mother.[/div]
information here
[div class=tag]sister.[/div]
information here
[div class=tag]brother.[/div]
information here
[/div][/div]
[div class=column][div class=images style="background: var(--image-14); background-size: cover; background-position: center;"][/div]
[div class=images style="background: var(--image-15); background-size: cover; background-position: center;"][/div]
[div class=images style="background: var(--image-16); background-size: cover; background-position: center;"][/div][/div][/div]
[div class="tab tab1" style="left: 12px; bottom: -30px;"][/div]
[div class="tab tab2" style="left: 85px; bottom: -30px;"][/div]
[div class="tab tab3" style="left: 158px; bottom: -30px;"][/div]
[div class="tab tab4" style="left: 231px; bottom: -30px;"][/div]
[div class="tab tab5" style="left: 304px; bottom: -30px;"][/div]
[div class="tab tab6" style="left: 377px; bottom: -30px;"][/div]
[/div][/div][/div]
[class=container]
width: 450px;
height: 450px;
margin: auto;
cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important;
[/class]
[class=border]
position: absolute;
width: 450px;
height: 450px;
border: 1px solid #ccc;
outline: 1px solid #fafafa;
background: #f1f1f1;
margin: auto;
overflow: hidden;
[/class]
[class=charactername]
position: absolute;
width: 450px;
top: 75px;
right: 0;
text-align: center;
font-size: 30px;
text-transform: uppercase;
color: var(--accent-2);
font-weight: 900;
text-align: center;
transition: ease 1s;
white-space: nowrap;
transition-delay: 1s;
[/class]
[class=icon]
width: 150px;
height: 150px;
background: var(--image-1);
background-size: cover;
background-position: center;
border-radius: 100%;
position: absolute;
left: 145px;
top: 145px;
z-index: 2;
border: 5px solid var(--accent-1);
transform: rotateY(0deg);
transition: ease 1s;
cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]
[class=role]
position: absolute;
bottom: 90px;
width: 450px;
height: 10px;
text-align: center;
color: var(--accent-2);
font-size: 11px;
line-height: 10px;
transition: ease 1s;
transition-delay: 1s;
text-transform: uppercase;
[/class]
[class=charname]
font-size: 15px;
top: 34px;
right: 10px;
width: 170px;
transition-delay: 0s;
[/class]
[class=roledown]
bottom: -20px;
transition-delay: 0s;
[/class]
[class=sideword]
position: absolute;
width: 170px;
left: -170px;
top: 34px;
font: 15px;
text-transform: uppercase;
color: var(--accent-2);
font-weight: 900;
text-align: center;
transition: ease 1s;
box-sizing: border-box;
padding-right: 0px;
transition-delay: 1s;
[/class]
[class=swordin]
left: 10px;
transition-delay: 0s;
[/class]
[class=spin]
top: 15px;
left: 190px;
width: 60px;
height: 60px;
transform: rotateY(360deg);
transition-delay: 1s;
border-width: 2px;
[/class]
[class=tab]
position: absolute;
background: var(--accent-1);
width: 61px;
height: 30px;
border-radius: 3px;
display: inline-block;
transition: ease 0.5s;
line-height: 30px;
text-align: center;
font-size: 12px;
color: var(--accent-3);
cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]
[class=up]
margin-bottom: 40px;
transition: ease 0.5s;
[/class]
[class=stab1]
transition-delay: 2.2s;
[/class]
[class=stab2]
transition-delay: 2.4s;
[/class]
[class=stab3]
transition-delay: 2.6s;
[/class]
[class=stab4]
transition-delay: 2.8s;
[/class]
[class=stab5]
transition-delay: 3s;
[/class]
[class=stab6]
transition-delay: 3.2s;
[/class]
[class=tabContents]
position: absolute;
top: 85px;
left: 20px;
height: 320px;
width: 410px;
transition: all .5s;
opacity: 0;
[/class]
[class=fadein]
opacity: 1;
z-index: 1;
transition: all 1.5s;
transition-delay: 3.6s;
[/class]
[class=column]
height: 320px;
width: 96px;
display: flex;
justify-content: space-evenly;
position: absolute;
right: 0;
flex-direction: column;
[/class]
[class=images]
height: 92px;
width: 92px;
border: 2px solid var(--accent-2);
[/class]
[class=images2]
height: 92px;
width: 92px;
border: 2px solid var(--accent-1);
[/class]
[class=textbox]
position: absolute;
left: 0;
top: 7px;
width: 315px;
height: 305px;
overflow: hidden;
font-size: 12px;
white-space: pre-line;
line-height: 130%;
text-transform: lowercase;
[/class]
[class=scroll]
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px;
color: var(--accent-3);
[/class]
[class=tag]
text-transform: uppercase;
display: inline;
font-size: 12px;
letter-spacing: 1px;
text-align: left;
font-weight: 600;
color: var(--accent-1);
[/class]
[class name=tab state=hover]
background: var(--accent-3);
color: var(--accent-1);
transition: ease .5s;
[/class]
[class=chosen]
background: var(--accent-3);
color: var(--accent-1);
transition: ease .5s;
[/class]
[class=chosen1]
background: var(--accent-3);
color: var(--accent-1);
transition: ease .5s;
transition-delay: 2.2s;
[/class]
[class=show]
opacity: 1;
transition: all 1s;
z-index: 1;
[/class]
[class=none]
pointer-events: none;
[/class]
[script class=tab on=mouseenter]
removeClass stab1 tab1
removeClass stab2 tab2
removeClass stab3 tab3
removeClass stab4 tab4
removeClass stab5 tab5
removeClass stab6 tab6
[/script]
[script class=icon on=click]
addClass charname charactername
addClass roledown role
addClass swordin sideword
addClass spin icon
addClass up tab
addClass stab1 tab1
addClass stab2 tab2
addClass stab3 tab3
addClass stab4 tab4
addClass stab5 tab5
addClass stab6 tab6
addClass fadein tabContents1
addClass chosen1 tab1
addClass none icon
[/script]
[script class=tab1 on=click]
addClass show tabContents1
addClass chosen tab1
removeClass show tabContents2
removeClass show tabContents3
removeClass show tabContents4
removeClass show tabContents5
removeClass fadein tabContents1
removeClass chosen tab2
removeClass chosen tab3
removeClass chosen tab4
removeClass chosen tab5
removeClass chosen1 tab1
[/script]
[script class=tab2 on=click]
addClass show tabContents2
addClass chosen tab2
removeClass show tabContents1
removeClass show tabContents3
removeClass show tabContents4
removeClass show tabContents5
removeClass fadein tabContents1
removeClass chosen tab1
removeClass chosen tab3
removeClass chosen tab4
removeClass chosen tab5
removeClass chosen1 tab1
[/script]
[script class=tab3 on=click]
addClass show tabContents3
addClass chosen tab3
removeClass show tabContents1
removeClass show tabContents2
removeClass show tabContents4
removeClass show tabContents5
removeClass fadein tabContents1
removeClass chosen tab1
removeClass chosen tab2
removeClass chosen tab4
removeClass chosen tab5
removeClass chosen1 tab1
[/script]
[script class=tab4 on=click]
addClass show tabContents4
addClass chosen tab4
removeClass show tabContents1
removeClass show tabContents2
removeClass show tabContents3
removeClass show tabContents5
removeClass fadein tabContents1
removeClass chosen tab1
removeClass chosen tab2
removeClass chosen tab3
removeClass chosen tab5
removeClass chosen1 tab1
[/script]
[script class=tab5 on=click]
addClass show tabContents5
addClass chosen tab5
removeClass show tabContents1
removeClass show tabContents2
removeClass show tabContents3
removeClass show tabContents4
removeClass fadein tabContents1
removeClass chosen tab1
removeClass chosen tab2
removeClass chosen tab3
removeClass chosen tab4
removeClass chosen1 tab1
[/script]
[script class=tab6 on=click]
removeClass charname charactername
removeClass roledown role
removeClass swordin sideword
removeClass spin icon
removeClass up tab
removeClass fadein tabContents
removeClass show tabContents
removeClass chosen1 tab1
removeClass chosen tab
removeClass none icon
[/script]
Last edited: