โ€” ๐–บ ๐—Œ๐—„๐—’ ๐–ฟ๐—Ž๐—…๐—… ๐—ˆ๐–ฟ ๐–ผ๐—ˆ๐–ฝ๐–พ๐—Œ โ˜†

constellation

๐–บ ๐—Œ๐—๐—‚๐—‡๐—’ ๐—Œ๐—๐–บ๐—‹
[class=container]width: 700px; height: 350px; margin: auto; cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important;[/class] [class=border]position: absolute; width: 700px; height: 320px; background: #191919; margin: 0 auto;[/class] [class=left]position: absolute; top: 0; left: 0; padding: 0 35px; height: 320px; width: 130px; color: white; font-size: 30px; font-family: Spartan; font-weight: 400; display: table; line-height: 130%;[/class] [class=middle]position: absolute; top: 0; left: 200px; height: 350px; width: 300px; background: #b2e0e0; clip-path: polygon(0 0, 100% 0, 100% 91.5%, 50% 100%, 0 91.5%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 91.5%, 50% 100%, 0 91.5%); transition: 1s;[/class] [class=circle]position: absolute; top: 55px; left: 45px; height: 210px; width: 210px; border-radius: 100%; background-color: rgba(160, 201, 201, .7); transition: 1s;[/class] [class=circle1]position: absolute; top: 20px; left: 20px; border-radius: 100%; border: 3px solid #fff; width: 170px; height: 170px; box-sizing: border-box;[/class] [class=image]position: relative; width: 164px; height: 164px; background-image: url(https://i.imgur.com/Aupxd4J.png); border-radius: 100%; border: 12px solid #A0C9C9; box-sizing: border-box; background-size: cover; background-position: center;[/class] [class=right]position: absolute; top: 0; left: 0; height: 320px; width: 700px; background: transparent; overflow: hidden;[/class] [class=right1]position: absolute; top: 0; left: 500px; height: 320px; width: 380px; transition: 1s;[/class] [class=tab]position: absolute; height: 50px; width: 50px; border-radius: 5px; background: #b2e0e0; transition: 1s; color: #191919; font-size: 20px; display: flex; align-items: center; justify-content: center; font-family: Spartan; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;[/class] [class=textbox]position: absolute; top: 15px; left: 220px; height: 260px; width: 340px; font-size: 11px; color: white; text-align: justify; transition: 1s; font-family: Spartan; white-space: pre-line; opacity: 0; transition: all 1s;[/class] [class=show]opacity: 1; transition: all 1s; z-index: 1;[/class] [class=header]display: inline-block; height: 35px; width: 100%; background: #b2e0e0; font-size: 15px; font-family: Spartan; text-align: center; color: #191919; line-height: 35px; margin-bottom: 10px;[/class] [class=link]display: inline-block; height: 30px; width: 100%; transition: 1s; font-size: 15px; font-family: Spartan; text-align: center; color: #f5f5f5; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;[/class] [class name=tab state=hover] color: rgb(160, 201, 201); transition: 1s; [/class] [class name=link state=hover] color: rgb(160, 201, 201); transition: 1s; [/class] [script class=right1 on=mouseenter] addClass slide middle addClass circleslide circle addClass t1s tab1 addClass t2s tab2 addClass t3s tab3 addClass t4s tab4 addClass tslide right1 addClass textslide textbox [/script] [script class=right on=mouseleave] addClass show textbox0 removeClass show textbox1 removeClass show textbox2 removeClass show textbox3 removeClass show textbox4 removeClass slide middle removeClass circleslide circle removeClass t1s tab1 removeClass t2s tab2 removeClass t3s tab3 removeClass t4s tab4 removeClass tslide right1 removeClass textslide textbox [/script] [script class=tab1 on=click] addClass show textbox1 addClass chosen tab1 removeClass show textbox0 removeClass show textbox2 removeClass show textbox3 removeClass show textbox4 [/script] [script class=tab2 on=click] addClass show textbox2 addClass chosen tab2 removeClass show textbox0 removeClass show textbox1 removeClass show textbox3 removeClass show textbox4 [/script] [script class=tab3 on=click] addClass show textbox3 addClass chosen tab3 removeClass show textbox0 removeClass show textbox1 removeClass show textbox2 removeClass show textbox4 [/script] [script class=tab4 on=click] addClass show textbox4 addClass chosen tab4 removeClass show textbox0 removeClass show textbox1 removeClass show textbox2 removeClass show textbox3 [/script]
[div class=container][div class=border] [div class=left]
a sky
full of codes
[div class=middle][div class=circle][div class=circle1][div class=image][/div][/div][/div][/div] [div class=right][div class="tab tab1" style="right: 75px; top: 36px;"][/div][div class="tab tab2" style="right: 75px; top: 102px;"][/div][div class="tab tab3" style="right: 75px; top: 168px;"][/div][div class="tab tab4" style="right: 75px; top: 235px;"][/div] [div class=right1][div class="textbox textbox0 show"]hellooo fellow writers of rpnation, i'm noora and i will be your host for tonig- lmao kiddinggg. welcome to a sky full of codes! ( insert crowd cheers and applause sound effect ) i'm super excited to be creating freebies again for you all. anything that is posted down and below is for your use, so long as my credit ( a star icon in the corner ) stays intact and is not removed! feel free to change any fonts, colours and photos in the code to your likingggg. i'm a light mode user and will mainly be creating placeholders, character sheets and in character codes but if you guys ever want me to code anything specific ( eg. interest check ) then just let me know below! don't be afraid to ask any questions if you have any and thank you for stopping by![/div] [div class="textbox textbox1"][div class=header]placeholder codes[/div] [div class=link]06. ephemeral[/div] [/div] [div class="textbox textbox2"][div class=header]character sheet codes[/div] [div class=link]01. raindrops[/div] [div class=link]03. capture[/div] [div class=link]04. breeze[/div] [div class=link]05. sonder[/div] [div class=link]08. firdaus[/div] [div class=link]09. lilac[/div] [/div] [div class="textbox textbox3"][div class=header]in character codes[/div] [div class=link]02. salvation[/div] [div class=link]07. dandelion[/div] [/div] [div class="textbox textbox4"][div class=header]other codes[/div] [div class=link]coming soon ![/div] [/div] [/div][/div][/div][/div][/div] [class=circleslide] top: 30px; [/class] [class=slide] left: 20px; [/class] [class=t1s] background: #191919; margin-top: 219px; margin-right: 529px; color: #f5f5f5; [/class] [class=t2s] background: #191919; bottom: 250px; margin-top: 153px; margin-right: 463px; color: #f5f5f5; [/class] [class=t3s] background: #191919; top: 250px; margin-top: 87px; margin-right: 397px; color: #f5f5f5; [/class] [class=t4s] background: #191919; margin-top: 20px; margin-right: 331px; color: #f5f5f5; [/class] [class=tslide] left: 320px; [/class] [class=textslide] left: 20px; [/class]
 
Last edited:
[class=container1]width: 700px; height: 350px; margin: auto; cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important;[/class] [class=border1]position: absolute; width: 700px; height: 320px; background: #191919; margin: 0 auto;[/class] [class=middle]position: absolute; top: 0; left: 20px; height: 350px; width: 300px; background: #b2e0e0; clip-path: polygon(0 0, 100% 0, 100% 91.5%, 50% 100%, 0 91.5%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 91.5%, 50% 100%, 0 91.5%);[/class] [class=circle]position: absolute; top: 30px; left: 45px; height: 210px; width: 210px; border-radius: 100%; background-color: rgba(160, 201, 201, .7);[/class] [class=circle1]position: absolute; top: 20px; left: 20px; border-radius: 100%; border: 3px solid #fff; width: 170px; height: 170px; box-sizing: border-box;[/class] [class=image1]position: relative; width: 164px; height: 164px; background-image: url(https://i.imgur.com/Aupxd4J.png); border-radius: 100%; border: 12px solid #A0C9C9; box-sizing: border-box; background-size: cover; background-position: center; color: #f5f5f5; font-size: 90px; display: flex; align-items: center; justify-content: center; text-align: center;[/class] [class=right]position: absolute; top: 0; left: 320px; height: 320px; width: 380px; font-family: Spartan;[/class] [class=textbox1]position: absolute; top: 15px; left: 20px; height: 260px; width: 340px; font-size: 11px; color: white; text-align: justify; font-family: Spartan; white-space: pre-line;[/class] [class=header1]height: 35px; width: 100%; background: #b2e0e0; font-size: 15px; font-family: Spartan; text-align: center; color: #191919; line-height: 35px;[/class] [class=text1]position: absolute; top: 45px; width: 100%; font-size: 12px; font-family: Spartan; text-align: justify; color: #f5f5f5;[/class] [class=tabb]position: absolute; bottom: 45px; left: 60px; height: 50px; width: 180px; border-radius: 5px; background: #191919; transition: 1s; color: #f5f5f5; font-size: 20px; display: flex; align-items: center; justify-content: center; font-family: Spartan; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;[/class] [class name=tabb state=hover] color: rgb(160, 201, 201); transition: 1s; [/class] [div class=container1][div class=border1][div class=middle][div class=circle][div class=circle1][div class=image1]01
[/div][/div] [div class=tabb]code here[/div][/div] [div class=right][div class=textbox1][div class=header1]raindrops[/div] [div class=text1]i literally don't even know how to start this alsjdasd but here is the first freebie! a pretty simple character sheet with a lot of image placeholders lmao. press the circle for a little a big surprise teehee. the links at the beginning can be replaced with your respective links to change the images. i don't know if people find this easier but i know i do? you can see a live version here if you'd like! please keep the credit intact and enjoy c:[/div][/div][/div][/div][/div]

[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=container][div class=border][div class=charactername]anastasia[/div] [div class=icon][/div] [div class=role]princess of alfaria[/div] [div class=sideword]princess[/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]spoken languages.[/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] [class=container] width: 450px; height: 450px; margin: auto; [/class] [class=border] position: absolute; width: 450px; height: 450px; border: 1px solid #333; outline: 1px solid #fafafa; background: #fff; 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] [/div]
 
Last edited:
[class=container1]width: 700px; height: 350px; margin: auto; cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important;[/class] [class=border1]position: absolute; width: 700px; height: 320px; background: #191919; margin: 0 auto;[/class] [class=middle]position: absolute; top: 0; left: 20px; height: 350px; width: 300px; background: #b2e0e0; clip-path: polygon(0 0, 100% 0, 100% 91.5%, 50% 100%, 0 91.5%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 91.5%, 50% 100%, 0 91.5%);[/class] [class=circle]position: absolute; top: 30px; left: 45px; height: 210px; width: 210px; border-radius: 100%; background-color: rgba(160, 201, 201, .7);[/class] [class=circle1]position: absolute; top: 20px; left: 20px; border-radius: 100%; border: 3px solid #fff; width: 170px; height: 170px; box-sizing: border-box;[/class] [class=image1]position: relative; width: 164px; height: 164px; background-image: url(https://i.imgur.com/Aupxd4J.png); border-radius: 100%; border: 12px solid #A0C9C9; box-sizing: border-box; background-size: cover; background-position: center; color: #f5f5f5; font-size: 90px; display: flex; align-items: center; justify-content: center; text-align: center;[/class] [class=right]position: absolute; top: 0; left: 320px; height: 320px; width: 380px; font-family: Spartan;[/class] [class=textbox1]position: absolute; top: 15px; left: 20px; height: 260px; width: 340px; font-size: 11px; color: white; text-align: justify; font-family: Spartan; white-space: pre-line;[/class] [class=header1]height: 35px; width: 100%; background: #b2e0e0; font-size: 15px; font-family: Spartan; text-align: center; color: #191919; line-height: 35px;[/class] [class=text1]position: absolute; top: 45px; width: 100%; font-size: 12px; font-family: Spartan; text-align: justify; color: #f5f5f5;[/class] [class=tabb]position: absolute; bottom: 45px; left: 60px; height: 50px; width: 180px; border-radius: 5px; background: #191919; transition: 1s; color: #f5f5f5; font-size: 20px; display: flex; align-items: center; justify-content: center; font-family: Spartan; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;[/class] [class name=tabb state=hover] color: rgb(160, 201, 201); transition: 1s; [/class] [div class=container1][div class=border1][div class=middle][div class=circle][div class=circle1][div class=image1]02[/div][/div][/div] [div class=tabb]code here[/div][/div] [div class=right][div class=textbox1][div class=header1]salvation[/div] [div class=text1]just something that i wanted to test outttt. i always struggle finding a good place to put character details such as the mood, location, tags, etc. but this worked out pretty nicely! if you plan to use this, i would recommend that when you fill out those details, you make sure that the time of the animation is slow enough to be read. right now, it's set at fifteen seconds but the longer the text is then the faster the speed will increase. so, make sure to change that ( feel free to pm me if you have any issues ) and i hope you enjoy using it! c:[/div][/div][/div][/div][/div]
[class=container] --accent-1: #A0C9C9; --image: url(https://via.placeholder.com/450x150/000000/FFFFFF/?text=IMAGE HERE); --time: 15s; [/class] [div class=container][div class=border][div class=name]character name[/div][div class=role]princess of alfaria[/div] [div class=image][/div] [div class=textbox][div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus accumsan neque at rutrum. Aenean quis finibus ligula, at consectetur libero. Suspendisse dignissim tellus non libero viverra, ac accumsan ipsum porttitor. Suspendisse scelerisque, nibh luctus molestie rutrum, mauris libero faucibus magna, at ultrices orci ligula ut sapien. Fusce nec est quis ex pharetra aliquam. Nunc mollis magna enim, eu tempor libero dignissim vel. Mauris auctor feugiat ipsum, at laoreet felis. Ut cursus erat et blandit blandit. Sed quis lobortis nisi. Pellentesque mauris est, congue eget porttitor eu, vestibulum molestie nibh. In justo ligula, consectetur et nisl ut, volutpat sodales eros. Phasellus hendrerit bibendum dui. Morbi fringilla neque pharetra odio interdum efficitur. In tristique leo justo. Fusce pharetra ex ac massa facilisis tristique. Praesent et dui nec tortor ultrices dignissim sed eget urna. Duis non vestibulum sapien. Nam in enim sem. Pellentesque semper accumsan quam sed varius. Fusce condimentum luctus massa nec lobortis. Curabitur ullamcorper laoreet eros nec venenatis. In est felis, sollicitudin sit amet sapien id, porttitor scelerisque est. Donec pharetra justo ac efficitur ultricies. Aenean efficitur luctus pharetra. Pellentesque sit amet eleifend ligula. Sed arcu tortor, volutpat id augue sit amet, ultrices auctor purus. Ut et sapien turpis. Pellentesque finibus, ante a faucibus rhoncus, ex arcu volutpat felis, non cursus risus ligula et urna. Fusce hendrerit commodo enim, eu sagittis felis tempus sed. Integer nec tortor faucibus, dignissim justo at, feugiat massa. Nunc sed dictum urna.[/div][/div] [div class=info][div class=text]MOOD: here. LOCATON: here. TAGS: here.[/div][/div][/div][/div] [class=container] width: 450px; height: 630px; 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: 630px; background: #f1f1f1; margin: 0 auto; border: 1px solid #ccc; [/class] [class=name] position: relative; top: 20px; line-height: 80%; margin: 0 auto; text-align: center; font: 27px Abril Fatface; color: #333; text-transform: uppercase; [/class] [class=role] display: inline-block; position: relative; top: 15px; left: 50%; transform: translateX(-50%); line-height: 80%; margin: 0 auto; text-align: center; font: 9px Verdana; background: var(--accent-1); padding: 5px; color: #fff; text-transform: uppercase; [/class] [class=image] position: absolute; top: 100px; left: 0; height: 150px; width: 450px; background: var(--image); -webkit-clip-path: polygon(100% 0, 100% 100%, 0% 100%, 0 0, 50% 15%); clip-path: polygon(100% 0, 100% 100%, 0% 100%, 0 0, 50% 15%); [/class] [class=info] position: absolute; bottom: 0; left: 0; height: 30px; width: 440px; padding: 0px 5px; font: 11px Verdana; background: var(--accent-1); color: #fff; text-transform: uppercase; line-height: 28px; white-space: nowrap; overflow: hidden; [/class] [class=text] display: inline-block; padding-left: calc(100% + 5px); animation: {post_id}marquee var(--time) linear infinite; [/class] [class=textbox] position: absolute; left: 0; top: 250px; width: 433px; height: 316px; overflow-x: hidden; font-size: 12px; white-space: pre-line; line-height: 125%; padding: 17px 0px 17px 17px; [/class] [class=scroll] width: 100%; height: 100%; overflow-y: scroll; padding-right: 17px; text-align: justify; color: #333; [/class] [animation=marquee] [keyframe=0] transform: translate(0, 0); [/keyframe] [keyframe=100] transform: translate(-100%, 0); [/keyframe] [/animation]
 
Last edited:
I missed chuu! //>w<

//QwQ also i need help coding an interest check for an rp
 
Cosmos Cosmos โ€” eeee thank you so much! itโ€™s good to be back ๐Ÿ’•
feel free to pm and i can definitely help! c:
 
I have this weird urge to make the invisible credit in your codes visible so everyone who sees them knows just who created these masterpieces xD
 
Ayama Ayama โ€” dgdfdkjh thank you so much! honestly, i'm still not sure how i feel about the current credit i have right now heh. might change in the futureee? we shall see!
 
Ayama Ayama โ€” dgdfdkjh thank you so much! honestly, i'm still not sure how i feel about the current credit i have right now heh. might change in the futureee? we shall see!
Sister, your credit should never be hidden! <3
You deserve all the recognition of the work you do!
 
[class=container1]width: 700px; height: 350px; margin: auto; cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important;[/class] [class=border1]position: absolute; width: 700px; height: 320px; background: #191919; margin: 0 auto;[/class] [class=middle]position: absolute; top: 0; left: 20px; height: 350px; width: 300px; background: #b2e0e0; clip-path: polygon(0 0, 100% 0, 100% 91.5%, 50% 100%, 0 91.5%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 91.5%, 50% 100%, 0 91.5%);[/class] [class=circle]position: absolute; top: 30px; left: 45px; height: 210px; width: 210px; border-radius: 100%; background-color: rgba(160, 201, 201, .7);[/class] [class=circle1]position: absolute; top: 20px; left: 20px; border-radius: 100%; border: 3px solid #fff; width: 170px; height: 170px; box-sizing: border-box;[/class] [class=image1]position: relative; width: 164px; height: 164px; background-image: url(https://i.imgur.com/Aupxd4J.png); border-radius: 100%; border: 12px solid #A0C9C9; box-sizing: border-box; background-size: cover; background-position: center; color: #f5f5f5; font-size: 90px; display: flex; align-items: center; justify-content: center; text-align: center;[/class] [class=right]position: absolute; top: 0; left: 320px; height: 320px; width: 380px; font-family: Spartan;[/class] [class=textbox1]position: absolute; top: 15px; left: 20px; height: 260px; width: 340px; font-size: 11px; color: white; text-align: justify; font-family: Spartan; white-space: pre-line;[/class] [class=header1]height: 35px; width: 100%; background: #b2e0e0; font-size: 15px; font-family: Spartan; text-align: center; color: #191919; line-height: 35px;[/class] [class=text1]position: absolute; top: 45px; width: 100%; font-size: 12px; font-family: Spartan; text-align: justify; color: #f5f5f5;[/class] [class=tabb]position: absolute; bottom: 45px; left: 60px; height: 50px; width: 180px; border-radius: 5px; background: #191919; transition: 1s; color: #f5f5f5; font-size: 20px; display: flex; align-items: center; justify-content: center; font-family: Spartan; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;[/class] [class name=tabb state=hover] color: rgb(160, 201, 201); transition: 1s; [/class] [div class=container1][div class=border1][div class=middle][div class=circle][div class=circle1][div class=image1]03[/div][/div][/div] [div class=tabb]code here[/div][/div] [div class=right][div class=textbox1][div class=header1]capture[/div] [div class=text1]another character sheet coming your wayyyy. like the previous, i wanted to test out a continuous slideshow but with images instead of text and iโ€™m pretty satisfied with the results! there are hidden scrolls about, so donโ€™t worry if you feel like your information will overflow. it might look a little bland right now with all the image placeholders but thereโ€™s a live version here if youโ€™d love to check it out with actual images! if you have any questions about the code or in general, don't be afraid to private message me c:[/div][/div][/div][/div][/div]
[class=container] --main-color: #A0C9C9; --image-1: url(https://via.placeholder.com/460x270/000000/FFFFFF/?text=IMAGE 1); --image-2: url(https://via.placeholder.com/490x100/000000/FFFFFF/?text=IMAGE 2); --image-3: url(https://via.placeholder.com/250x300/000000/FFFFFF/?text=IMAGE 3); --image-4: url(https://via.placeholder.com/161x100/FFFFFF/000000/?text=IMAGE 4); --image-5: url(https://via.placeholder.com/161x100/FFFFFF/000000/?text=IMAGE 5); --image-6: url(https://via.placeholder.com/161x100/FFFFFF/000000/?text=IMAGE 6); --image-7: url(https://via.placeholder.com/161x100/FFFFFF/000000/?text=IMAGE 7); --image-8: url(https://via.placeholder.com/161x100/FFFFFF/000000/?text=IMAGE 8); --image-9: url(https://via.placeholder.com/460x270/000000/FFFFFF/?text=IMAGE 9); [/class] [div class=container][div class=border][div class=tabs][div class="tab tab1 chosentab"][/div] [div class="tab tab2"][/div] [div class="tab tab3"][/div] [div class="tab tab4"][/div] [div class="tab tab5"][/div][/div] [div class="tabContents tabContents1 show"][div class=header]home.[/div] [div class=mainimage][/div] [div class=title]CHARACTER NAME[/div] [div class=subtitle]CHARACTER ROLE[/div][/div] [div class="tabContents tabContents2"][div class=header]about.[/div][div class=tabtwoimage][/div] [div class=about2]
[div class=tag2]HAIR[/div] text here. [div class=tag2]EYES[/div] text here. [div class=tag2]HEIGHT[/div] text here. [div class=tag2]BUILD[/div] text here.
[div class=tag2]DIST. FEATURES[/div] text here. [div class=tag2]BODY MODS[/div] text here. [div class=tag2]FACECLAIM[/div] text here.
[/div] [div class=about][div class=info][div class=tag]nickname[/div] here[/div] [div class=info][div class=tag]age[/div] here[/div] [div class=info][div class=tag]gender[/div] here[/div] [div class=info][div class=tag]sexuality[/div] here[/div][/div][/div] [div class="tabContents tabContents3"][div class=header]persona.[/div] [div class=tabthreeimage][/div] [div class=persona][div class=scroll][div class=tag2]positive traits[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies nisi vitae eleifend rutrum. Sed at libero eget turpis finibus fermentum sit amet et est. Proin consectetur arcu quis consectetur molestie. Etiam tempor tortor eu est dignissim porttitor. Nulla sit amet orci eget tortor viverra pellentesque eget vel ante. Etiam feugiat lacinia felis non eleifend. [div class=tag2]negative traits[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies nisi vitae eleifend rutrum. Sed at libero eget turpis finibus fermentum sit amet et est. Proin consectetur arcu quis consectetur molestie. Etiam tempor tortor eu est dignissim porttitor. Nulla sit amet orci eget tortor viverra pellentesque eget vel ante. Etiam feugiat lacinia felis non eleifend. [div class=tag2]strengths[/div] Sed volutpat iaculis augue. Quisque interdum nisl ut finibus feugiat. Nunc pulvinar eget libero eu interdum. Proin bibendum diam magna, quis volutpat nisl commodo sed. [div class=tag2]weaknesses[/div] Pellentesque ut luctus quam. Sed orci libero, placerat a vestibulum finibus, rhoncus et metus. Suspendisse imperdiet vel mauris id mattis. Fusce non volutpat lacus, vel porta tellus. [div class=tag2]likes[/div] In ut porttitor erat, sit amet sodales mi. Phasellus id mi eget lorem scelerisque molestie. Maecenas sit amet semper nisi. Sed pulvinar laoreet cursus. [div class=tag2]dislikes[/div] Ut lacus ex, pharetra at leo ultrices, ultricies commodo enim. Donec eu blandit metus, non mollis risus. Ut ut interdum neque, sit amet congue nibh. Donec vestibulum tempor est. Donec vitae libero id velit commodo sagittis vitae at lectus.[/div][/div][/div] [div class="tabContents tabContents4"][div class=header]backstory.[/div] [div class=boxes][div class=box]BORN
here[/div] [div class=box]HOMEPLACE
here[/div] [div class=box]OCCUPATION
here[/div] [div class=box]STATUS
here[/div][/div] [div class=history][div class=scroll][div class=tag]birth.[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies nisi vitae eleifend rutrum. Sed at libero eget turpis finibus fermentum sit amet et est. Proin consectetur arcu quis consectetur molestie. Etiam tempor tortor eu est dignissim porttitor. Nulla sit amet orci eget tortor viverra pellentesque eget vel ante. Etiam feugiat lacinia felis non eleifend. [div class=tag]childhood.[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies nisi vitae eleifend rutrum. Sed at libero eget turpis finibus fermentum sit amet et est. Proin consectetur arcu quis consectetur molestie. Etiam tempor tortor eu est dignissim porttitor. Nulla sit amet orci eget tortor viverra pellentesque eget vel ante. Etiam feugiat lacinia felis non eleifend. [div class=tag]teenage years.[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies nisi vitae eleifend rutrum. Sed at libero eget turpis finibus fermentum sit amet et est. Proin consectetur arcu quis consectetur molestie. Etiam tempor tortor eu est dignissim porttitor. Nulla sit amet orci eget tortor viverra pellentesque eget vel ante. Etiam feugiat lacinia felis non eleifend. [div class=tag]adulthood.[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies nisi vitae eleifend rutrum. Sed at libero eget turpis finibus fermentum sit amet et est. Proin consectetur arcu quis consectetur molestie. Etiam tempor tortor eu est dignissim porttitor. Nulla sit amet orci eget tortor viverra pellentesque eget vel ante. Etiam feugiat lacinia felis non eleifend. [div class=tag]present.[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies nisi vitae eleifend rutrum. Sed at libero eget turpis finibus fermentum sit amet et est. Proin consectetur arcu quis consectetur molestie. Etiam tempor tortor eu est dignissim porttitor. Nulla sit amet orci eget tortor viverra pellentesque eget vel ante. Etiam feugiat lacinia felis non eleifend.[/div][/div][/div] [div class="tabContents tabContents5"][div class=header]gallery.[/div] [div class=tabfiveimage][/div] [div class=slideshow][div class=slide][div class=simage style="background: var(--image-4); background-size: cover; background-position: center;"][/div] [div class=simage style="background: var(--image-5); background-size: cover; background-position: center;"][/div] [div class=simage style="background: var(--image-6); background-size: cover; background-position: center;"][/div] [div class=simage style="background: var(--image-7); background-size: cover; background-position: center;"][/div] [div class=simage style="background: var(--image-8); background-size: cover; background-position: center;"][/div] [div class=simage style="background: var(--image-4); background-size: cover; background-position: center;"][/div] [div class=simage style="background: var(--image-5); background-size: cover; background-position: center;"][/div] [div class=simage style="background: var(--image-6); background-size: cover; background-position: center;"][/div] [div class=simage style="background: var(--image-7); background-size: cover; background-position: center;"][/div][/div][/div][/div][/div][/div] [class=container] width: 540px; height: 350px; margin: auto; cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important; [/class] [class=border] position: absolute; width: 540px; height: 350px; background: #f1f1f1; margin: 0 auto; border: 1px solid #f1f1f1; background-image: url(https://www.transparenttextures.com/patterns/ecailles.png); [/class] [class=tabs] position: absolute; top: 50px; left: 0; height: 290px; width: 50px; display: flex; justify-content: flex-end; flex-direction: column; [/class] [class=tab] height: 11px; width: 11px; background: var(--main-color); border-radius: 100%; margin: 5px 20px; border: 1px solid var(--main-color); transition: 1s; [/class] [class=header] position: absolute; top: -50px; left: -50px; height: 50px; width: 320px; padding: 0 15px; color: var(--main-color); line-height: 50px; text-transform: uppercase; font-weight: 900; font-size: 23px; [/class] [class=tabContents] position: absolute; bottom: 0; right: 0; height: 300px; width: 490px; background: white; opacity: 0; transition: all .5s; font-family: Sen; font-size: 12px; color: black; [/class] [class=show] opacity: 1; transition: all 1s; z-index: 1; [/class] [script class=tab1 on=click] addClass show tabContents1 addClass chosentab tab1 removeClass show tabContents2 removeClass show tabContents3 removeClass show tabContents4 removeClass show tabContents5 removeClass chosentab tab2 removeClass chosentab tab3 removeClass chosentab tab4 removeClass chosentab tab5 [/script] [script class=tab2 on=click] addClass show tabContents2 addClass chosentab tab2 removeClass show tabContents1 removeClass show tabContents3 removeClass show tabContents4 removeClass show tabContents5 removeClass chosentab tab1 removeClass chosentab tab3 removeClass chosentab tab4 removeClass chosentab tab5 [/script] [script class=tab3 on=click] addClass show tabContents3 addClass chosentab tab3 removeClass show tabContents1 removeClass show tabContents2 removeClass show tabContents4 removeClass show tabContents5 removeClass chosentab tab1 removeClass chosentab tab2 removeClass chosentab tab4 removeClass chosentab tab5 [/script] [script class=tab4 on=click] addClass show tabContents4 addClass chosentab tab4 removeClass show tabContents1 removeClass show tabContents2 removeClass show tabContents3 removeClass show tabContents5 removeClass chosentab tab1 removeClass chosentab tab2 removeClass chosentab tab3 removeClass chosentab tab5 [/script] [script class=tab5 on=click] addClass show tabContents5 addClass chosentab tab5 removeClass show tabContents1 removeClass show tabContents2 removeClass show tabContents3 removeClass show tabContents4 removeClass chosentab tab1 removeClass chosentab tab2 removeClass chosentab tab3 removeClass chosentab tab4 [/script] [class name="tab" state="hover"] cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; background: white; transition: 1s; [/class] [class=chosentab] background: white; [/class] [class=mainimage] position: absolute; top: 15px; left: 15px; height: 270px; width: 460px; background: var(--image-1); background-size: cover; background-position: center; [/class] [class=title] position: absolute; bottom: 50px; left: 50px; font-size: 40px; font-weight: 900; text-transform: uppercase; color: var(--main-color); [/class] [class=subtitle] position: absolute; bottom: 100px; left: 53px; font-size: 12px; font-weight: 200; text-transform: uppercase; color: #fff; [/class] [class=about] position: absolute; top: 0; left: 0; height: 80px; width: 490px; display: flex; flex-direction: row; [/class] [class=info] height: 40px; width: 122.5px; font-size: 11px; text-transform: uppercase; font-weight: 200; color: #333; text-align: center; padding: 20px 0; [/class] [class=tag] font-size: 12px; text-transform: uppercase; font-weight: 600; color: var(--main-color); [/class] [class=tabtwoimage] position: absolute; top: 80px; left: 0; height: 100px; width: 490px; background: var(--image-2); background-size: cover; background-position: 50% 36%; [/class] [class=tag2] display: inline-block; padding: 0px 5px; background: var(--main-color); color: white; font-size: 10px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; line-height: 150%; [/class] [class=about2] position: absolute; bottom: 10px; left: 10px; height: 100px; width: 470px; white-space: pre-line; overflow-x: hidden; line-height: 150%; [/class] [class=tabthreeimage] position: absolute; top: 0; right: 0; height: 300px; width: 250px; -webkit-clip-path: polygon(10% 0, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(10% 0, 100% 0%, 100% 100%, 0% 100%); background: var(--image-3); background-size: cover; background-position: center left; [/class] [class=persona] position: absolute; top: 15px; left: 15px; height: 270px; width: 235px; overflow: hidden; white-space: pre-line; line-height: 150%; text-transform: lowercase; [/class] [class=scroll] width: 100%; height: 100%; overflow-y: scroll; padding-right: 17px; color: #333; [/class] [class=boxes] position: absolute; top: 15px; left: 15px; height: 270px; width: 460px; display: flex; flex-direction: column; justify-content: space-between; [/class] [class=box] height: 28px; width: 80px; background: var(--main-color); font-size: 11px; text-transform: uppercase; font-weight: 200; color: #fff; padding: 14px 10px; line-height: 130%; [/class] [class=history] position: absolute; top: 15px; right: 0; height: 270px; width: 360px; overflow: hidden; white-space: pre-line; line-height: 150%; padding-left: 20px; text-align: justify; text-transform: lowercase; [/class] [class=slideshow] height: 110px; max-width: 490px; margin: 0 auto; position: relative; top: 150px; overflow: hidden; transform: translate3d(0, 0, 0); border-top: 3px solid black; border-bottom: 3px solid black; [/class] [class=slide] height: 110px; width: 1485px; background: black; position: absolute; top: 0; left: 0; height: 100%; transform: translate3d(0, 0, 0); [/class] [class=simage] display: inline-block; height: 110px; width: 161px; [/class] [class=slide] animation: {post_id}move 10s linear infinite; [/class] [animation=move] [keyframe=100] transform: translateX(-55.56%); [/keyframe] [/animation] [class=tabfiveimage] position: absolute; top: 15px; left: 15px; height: 270px; width: 460px; background: var(--image-9); background-size: cover; background-position: center; [/class]
 
[class=container1]width: 700px; height: 350px; margin: auto; cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important;[/class] [class=border1]position: absolute; width: 700px; height: 320px; background: #191919; margin: 0 auto;[/class] [class=middle]position: absolute; top: 0; left: 20px; height: 350px; width: 300px; background: #b2e0e0; clip-path: polygon(0 0, 100% 0, 100% 91.5%, 50% 100%, 0 91.5%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 91.5%, 50% 100%, 0 91.5%);[/class] [class=circle]position: absolute; top: 30px; left: 45px; height: 210px; width: 210px; border-radius: 100%; background-color: rgba(160, 201, 201, .7);[/class] [class=circle1]position: absolute; top: 20px; left: 20px; border-radius: 100%; border: 3px solid #fff; width: 170px; height: 170px; box-sizing: border-box;[/class] [class=image1]position: relative; width: 164px; height: 164px; background-image: url(https://i.imgur.com/Aupxd4J.png); border-radius: 100%; border: 12px solid #A0C9C9; box-sizing: border-box; background-size: cover; background-position: center; color: #f5f5f5; font-size: 90px; display: flex; align-items: center; justify-content: center; text-align: center;[/class] [class=right]position: absolute; top: 0; left: 320px; height: 320px; width: 380px; font-family: Spartan;[/class] [class=textbox1]position: absolute; top: 15px; left: 20px; height: 260px; width: 340px; font-size: 11px; color: white; text-align: justify; font-family: Spartan; white-space: pre-line;[/class] [class=header1]height: 35px; width: 100%; background: #b2e0e0; font-size: 15px; font-family: Spartan; text-align: center; color: #191919; line-height: 35px;[/class] [class=text1]position: absolute; top: 45px; width: 100%; font-size: 12px; font-family: Spartan; text-align: justify; color: #f5f5f5;[/class] [class=tabb]position: absolute; bottom: 45px; left: 60px; height: 50px; width: 180px; border-radius: 5px; background: #191919; color: #f5f5f5; display: flex; align-items: center; justify-content: center; font-family: Spartan; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;[/class] [class=tabbb]display: inline-block; transition: 1s; color: #f5f5f5; font-size: 20px; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;[/class] [class name=tabbb state=hover] color: rgb(160, 201, 201); transition: 1s; [/class] [div class=container1][div class=border1][div class=middle][div class=circle][div class=circle1][div class=image1]04
[/div][/div] [div class=tabb][div class=tabbb]male[/div] ./. [div class=tabbb]female[/div][/div][/div] [div class=right][div class=textbox1][div class=header1]breeze[/div] [div class=text1]hi again all! i hope everybody is doing well amid all the issues going on. here's another character sheet that i coded with a few fancy transitions ( hover over the image to play ). i tried to get a little more creative by inserting the female silhouette and i also created a male version! gotta keep all the customers satisfied, ya feels me? lolsomebodystopme. hover over either male or female on the left to grab the code(s) and if you have any questions, please don't be afraid to private message me and i will get back to you as soon as possible. please stay safe all and have a great day! c:[/div][/div][/div][/div][/div]

[class=border] --main-color: #A0C9C9; --image-1: url(https://i.picsum.photos/id/1050/6000/4000.jpg); --image-2: url(https://via.placeholder.com/175x210/000000/FFFFFF/?text=IMAGE 2); --image-3: url(https://via.placeholder.com/175x210/000000/FFFFFF/?text=IMAGE 3); --image-4: url(https://via.placeholder.com/175x210/000000/FFFFFF/?text=IMAGE 4); --image-5: url(https://via.placeholder.com/175x210/000000/FFFFFF/?text=IMAGE 5); --image-6: url(https://via.placeholder.com/175x210/000000/FFFFFF/?text=IMAGE 6); --image-7: url(https://via.placeholder.com/175x210/000000/FFFFFF/?text=IMAGE 7); --image-8: url(https://via.placeholder.com/175x210/000000/FFFFFF/?text=IMAGE 8); --image-9: url(https://via.placeholder.com/175x210/000000/FFFFFF/?text=IMAGE 9); [/class] [div class=border][div class=border2][div class=home][div class=homeimage][/div][div class=square1][/div][div class=square2][/div] [div class=ba][/div] [div class=bb][/div] [div class=bc][/div] [div class=bd][/div] [div class=line][/div] [div class="tab tab1 chosentab" style="top: 85px; transition-delay: 2s;"]home[/div] [div class="tab tab2" style="top: 135px; transition-delay: 2.1s;"]about[/div] [div class="tab tab3" style="top: 185px; transition-delay: 2.2s;"]persona[/div] [div class="tab tab4" style="top: 235px; transition-delay: 2.3s;"]backstory[/div] [div class="tab tab5" style="top: 285px; transition-delay: 2.4s;"]gallery[/div][/div] [div class=border3][div class=contents] [div class="tabContents tabContents1 show"]
[div class=roleline style="left: 67px;"][/div] [div class=roleline style="left: 132px;"][/div] [div class=role style="top: 30px; left: 50px;"]the[/div] [div class=role style="top: 65px; left: 115px;"]role here[/div][/div] [div class="tabContents tabContents2"][div class=scroll][div class=tag]name[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. [div class=tag]nickname/s[/div] Suspendisse in condimentum leo. Donec scelerisque, risus quis congue aliquam, ligula risus posuere ipsum, a maximus libero erat dictum tortor. [div class=tag]age[/div] Nunc ac malesuada ante, a ornare nunc. Etiam vitae purus eleifend, ultrices nibh quis, pulvinar nisl. [div class=tag]gender[/div] Aenean varius sem viverra maximus egestas. Pellentesque sed sollicitudin nunc, nec scelerisque odio. [div class=tag]sexuality[/div] Suspendisse ex turpis, egestas blandit porta a, tristique non tortor. [div class=tag]ethnicity[/div] Maecenas hendrerit eget ante in egestas. Donec convallis dolor et malesuada euismod. [div class=tag]height + weight[/div] Praesent semper lacus at dui faucibus, ut accumsan dolor efficitur. Vivamus hendrerit ut justo ut consectetur. [div class=tag]eyes[/div] Duis vel nulla eget nibh mattis tempor. In vel lorem diam. Vivamus mattis quam eget luctus imperdiet. [div class=tag]hair[/div] Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. [div class=tag]build[/div] Mauris dictum elementum purus, nec facilisis erat posuere in. [div class=tag]attire[/div] Proin ultricies neque quis dolor fermentum volutpat. Vestibulum sit amet iaculis metus. [div class=tag]faceclaim[/div] Donec mattis lacus ac sagittis aliquam.[/div][/div] [div class="tabContents tabContents3"][div class=scroll][div class=tag]positive traits[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. [div class=tag]negative traits[/div] Suspendisse in condimentum leo. Donec scelerisque, risus quis congue aliquam, ligula risus posuere ipsum, a maximus libero erat dictum tortor. [div class=tag]likes[/div] Nunc ac malesuada ante, a ornare nunc. Etiam vitae purus eleifend, ultrices nibh quis, pulvinar nisl. [div class=tag]dislikes[/div] Aenean varius sem viverra maximus egestas. Pellentesque sed sollicitudin nunc, nec scelerisque odio. [div class=tag]strengths[/div] Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. [div class=tag]weaknesses[/div] Mauris dictum elementum purus, nec facilisis erat posuere in. [div class=tag]something[/div] Proin ultricies neque quis dolor fermentum volutpat. Vestibulum sit amet iaculis metus.[/div][/div] [div class="tabContents tabContents4"][div class=scroll][div class=tag]backstory[/div] Morbi viverra ullamcorper dolor nec ultrices. Etiam mollis laoreet aliquam. Vestibulum dignissim lorem ante, id hendrerit elit rutrum et. Morbi eu est id est dignissim laoreet. Donec eget dapibus lacus, id congue urna. Sed vitae libero vel eros efficitur sodales ac a eros. Aliquam erat nulla, fringilla eget eros vitae, vestibulum maximus ante. Maecenas vulputate eleifend mauris sit amet congue. Maecenas et sem arcu. Cras aliquam viverra elit id tincidunt. Phasellus mattis felis nec nulla tempor, sit amet gravida mi consectetur. Curabitur volutpat massa sed tortor dictum fringilla. Aliquam luctus volutpat magna id molestie. [div class=tag]relationships[/div] Duis vel nulla eget nibh mattis tempor. In vel lorem diam. Vivamus mattis quam eget luctus imperdiet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris dictum elementum purus, nec facilisis erat posuere in. Proin ultricies neque quis dolor fermentum volutpat. Vestibulum sit amet iaculis metus. Donec mattis lacus ac sagittis aliquam.[/div][/div] [div class="tabContents tabContents5"][div class=scroll][div class=leftpic style="background: var(--image-2); background-size: cover; background-position: center;"][/div] [div class=rightpic style="background: var(--image-3); background-size: cover; background-position: center;"][/div] [div class=leftpic style="background: var(--image-4); background-size: cover; background-position: center;"][/div] [div class=rightpic style="background: var(--image-5); background-size: cover; background-position: center;"][/div] [div class=leftpic style="background: var(--image-6); background-size: cover; background-position: center;"][/div] [div class=rightpic style="background: var(--image-7); background-size: cover; background-position: center;"][/div] [div class=leftpic style="background: var(--image-8); background-size: cover; background-position: center;"][/div] [div class=rightpic style="background: var(--image-9); background-size: cover; background-position: center;"][/div] [/div][/div] [/div][/div][/div][/div] [class=border] width: 650px; height: 400px; margin: auto; cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important; [/class] [class=border2] position: absolute; width: 650px; height: 400px; [/class] [class=home] position: relative; width: 250px; height: 400px; left: 200px; transition: 2s; transition-delay: 3s; z-index: 2; [/class] [class=homeimage] width: 250px; height: 400px; background: var(--image-1); background-size: cover; background-position: center; filter: grayscale(100%); transition: 1s ease-in-out; [/class] [class=square1] position: absolute; top: -10px; left: -10px; transition: 1s ease-in-out; border: 1px solid #000; width: 248px; height: 398px; [/class] [class=square2] position: absolute; top: 10px; left: 10px; transition: 1s ease-in-out; opacity: 1; border: 1px solid var(--main-color); width: 248px; height: 398px; [/class] [class=ba] position: absolute; top: 10px; left: 10px; width: 1px; height: 0px; background: white; transition: 1s ease-in-out; transition-delay: 0.5s; [/class] [class=bb] position: absolute; top: 10px; left: 10px; width: 0px; height: 1px; background: white; transition: 1s ease-in-out; transition-delay: 0.5s; [/class] [class=bc] position: absolute; bottom: 10px; right: 10px; width: 1px; height: 0px; background: white; transition: 1s ease-in-out; transition-delay: 0.5s; [/class] [class=bd] position: absolute; bottom: 10px; right: 10px; width: 0px; height: 1px; background: white; transition: 1s ease-in-out; transition-delay: 0.5s; [/class] [class=line] position: absolute; top: 50px; left: 60px; transition: 1s ease-in-out; width: 5px; height: 0px; background: white; transition-delay: 1.5s; [/class] [class=tab] position: absolute; left: 100px; transition: 1s ease-in-out; border-bottom: 5px solid white; font: 14px/120% Chivo; color: white; text-transform: uppercase; opacity: 0; [/class] [class=leftpic] float: left; display: inline-block; width: 175px; height: 210px; background: red; margin: 5px 0; [/class] [class=rightpic] float: right; display: inline-block; width: 175px; height: 210px; background: red; margin: 5px 0; [/class] [class=contents] position: absolute; z-index: 1; height: 400px; width: 400px; background: #fff; top: 0px; left: -250px; opacity: 0; transition: 3s; transition-delay: 4s; border: 1px solid #e1e1e1; [/class] [class=tabContents] position: absolute; height: 370px; width: 385px; opacity: 0; padding: 15px 0 15px 15px; overflow: hidden; white-space: pre-line; [/class] [class=scroll] width: 100%; height: 100%; overflow-y: scroll; padding-right: 17px; color: #333; font-size: 12px; [/class] [class=border3] position: absolute; width: 402px; height: 402px; top: -1px; left: 250px; overflow: hidden; [/class] [class=role] position: absolute; text-align: center; font: 22px Chivo; background: var(--main-color); padding: 10px 5px 3px 5px; writing-mode: vertical-rl; text-orientation: upright; color: #fff; text-transform: uppercase; [/class] [class=roleline] position: absolute; height: 75px; background: var(--main-color); top: 0; width: 2px; [/class] [class=show] opacity: 1; transition: all 1.5s; z-index: 1; [/class] [class=tag] display: inline; padding: 3px 5px; margin-right: 2px; background: var(--main-color); color: white; font-size: 9px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; line-height: 150%; font-family: Chivo; [/class] [class name="tab" state="hover"] cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; font-style: italic; transition: 1s; [/class] [class=chosentab] font-style: italic; transition-delay: 0s; [/class] [script class=tab1 on=click] addClass show tabContents1 addClass chosentab tab1 removeClass show tabContents2 removeClass show tabContents3 removeClass show tabContents4 removeClass show tabContents5 removeClass chosentab tab2 removeClass chosentab tab3 removeClass chosentab tab4 removeClass chosentab tab5 [/script] [script class=tab2 on=click] addClass show tabContents2 addClass chosentab tab2 removeClass show tabContents1 removeClass show tabContents3 removeClass show tabContents4 removeClass show tabContents5 removeClass chosentab tab1 removeClass chosentab tab3 removeClass chosentab tab4 removeClass chosentab tab5 [/script] [script class=tab3 on=click] addClass show tabContents3 addClass chosentab tab3 removeClass show tabContents1 removeClass show tabContents2 removeClass show tabContents4 removeClass show tabContents5 removeClass chosentab tab1 removeClass chosentab tab2 removeClass chosentab tab4 removeClass chosentab tab5 [/script] [script class=tab4 on=click] addClass show tabContents4 addClass chosentab tab4 removeClass show tabContents1 removeClass show tabContents2 removeClass show tabContents3 removeClass show tabContents5 removeClass chosentab tab1 removeClass chosentab tab2 removeClass chosentab tab3 removeClass chosentab tab5 [/script] [script class=tab5 on=click] addClass show tabContents5 addClass chosentab tab5 removeClass show tabContents1 removeClass show tabContents2 removeClass show tabContents3 removeClass show tabContents4 removeClass chosentab tab1 removeClass chosentab tab2 removeClass chosentab tab3 removeClass chosentab tab4 [/script] [script class=home on=mouseenter] addClass b1 square1 addClass b2 square2 addClass bh ba addClass bw bb addClass bh bc addClass bw bd addClass blur homeimage addClass linemove line addClass appear tab addClass homeslide home addClass contentslide contents [/script] [class=b1] top: 0; left: 0; border: 1px solid var(--main-color); [/class] [class=b2] top: 0; left: 0; background: var(--main-color); opacity: 0.4; [/class] [class=bh] height: 380px; [/class] [class=bw] width: 230px; [/class] [class=blur] filter: grayscale(100%) blur(0.5px); [/class] [class=linemove] height: 300px; [/class] [class=appear] opacity: 1; [/class] [class=homeslide] left: 0; [/class] [class=contentslide] left: 0px; opacity: 1; [/class] [/div]
 
Last edited:
[class=container1]width: 700px; height: 350px; margin: auto; cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important;[/class] [class=border1]position: absolute; width: 700px; height: 320px; background: #191919; margin: 0 auto;[/class] [class=middle]position: absolute; top: 0; left: 20px; height: 350px; width: 300px; background: #b2e0e0; clip-path: polygon(0 0, 100% 0, 100% 91.5%, 50% 100%, 0 91.5%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 91.5%, 50% 100%, 0 91.5%);[/class] [class=circle]position: absolute; top: 30px; left: 45px; height: 210px; width: 210px; border-radius: 100%; background-color: rgba(160, 201, 201, .7);[/class] [class=circle1]position: absolute; top: 20px; left: 20px; border-radius: 100%; border: 3px solid #fff; width: 170px; height: 170px; box-sizing: border-box;[/class] [class=image1]position: relative; width: 164px; height: 164px; background-image: url(https://i.imgur.com/Aupxd4J.png); border-radius: 100%; border: 12px solid #A0C9C9; box-sizing: border-box; background-size: cover; background-position: center; color: #f5f5f5; font-size: 90px; display: flex; align-items: center; justify-content: center; text-align: center;[/class] [class=right]position: absolute; top: 0; left: 320px; height: 320px; width: 380px; font-family: Spartan;[/class] [class=textbox1]position: absolute; top: 15px; left: 20px; height: 260px; width: 340px; font-size: 11px; color: white; text-align: justify; font-family: Spartan; white-space: pre-line;[/class] [class=header1]height: 35px; width: 100%; background: #b2e0e0; font-size: 15px; font-family: Spartan; text-align: center; color: #191919; line-height: 35px;[/class] [class=text1]position: absolute; top: 45px; width: 100%; font-size: 12px; font-family: Spartan; text-align: justify; color: #f5f5f5;[/class] [class=tabb]position: absolute; bottom: 45px; left: 60px; height: 50px; width: 180px; border-radius: 5px; background: #191919; transition: 1s; color: #f5f5f5; font-size: 20px; display: flex; align-items: center; justify-content: center; font-family: Spartan; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;[/class] [class name=tabb state=hover] color: rgb(160, 201, 201); transition: 1s; [/class] [div class=container1][div class=border1][div class=middle][div class=circle][div class=circle1][div class=image1]05[/div][/div][/div] [div class=tabb]code here[/div][/div] [div class=right][div class=textbox1][div class=header1]sonder[/div] [div class=text1]just another simple code i made for a zombie theme roleplay โ€” hover for action! my first time doing something like it and i'm pretty happy about it. i've given you guys the freedom to change all colours for the background and text in case you wanted to go for a lighter theme! any comments or feedback would be very much appreciated, i'd love to hear any ideas or improvements you guys have to help make my codes easier to use! if you have any questions about anything, feel free to private message me and i'll get back to you as soon as possible. happy writing and stay safe all![/div][/div][/div][/div][/div]
[class=border] --bkgd-colour: #000000; --text-colour: #ffffff; --accent-1: #A0C9C9; --image-1: url(https://picsum.photos/120/300); --image-2: url(https://picsum.photos/145/180); --image-3: url(https://picsum.photos/145/180); --image-5: url(https://picsum.photos/145/180); --image-4: url(https://picsum.photos/145/180); [/class] [div class=container][div class=border][div class=image][/div] [div class=title]CHARACTER NAME
THE ROLE HERE
[/div][div class=line][/div] [div class=inner][div class=innerfade][div class=header]CHARACTER
NAME
[/div] [div class="tab tab1 chosentab" style="top: 5px;"]BASICS โ€”[/div] [div class="tab tab2" style="top: 17px;"]LOOKS โ€”[/div] [div class="tab tab3" style="top: 29px;"]PERSONA โ€”[/div] [div class="tab tab4" style="top: 41px;"]HISTORY โ€”[/div] [div class="tabContents tabContents1 show"][div class=scroll]NAME [div class=answer]name goes here.[/div] AGE + BIRTHDATE [div class=answer]age and birthdate here.[/div] ETHNICITY [div class=answer]the ethnicity here.[/div] GENDER [div class=answer]male or female.[/div] SEXUALITY [div class=answer]the sexuality here.[/div][/div][/div] [div class="tabContents tabContents2"][div class=scroll]HEIGHT [div class=answer]the height here.[/div] WEIGHT [div class=answer]the weight here.[/div] BUILD [div class=answer]the build here.[/div] HAIR [div class=answer]the hair here.[/div] EYES [div class=answer]the eyes here.[/div] BODY MODIFICATIONS [div class=answer]any tattoos? piercings?[/div] WARDROBE [div class=answer]what they wear here.[/div] GALLERY
[div class=leftpic style="background: var(--image-2); background-size: cover; background-position: top center;"][/div] [div class=rightpic style="background: var(--image-3); background-size: cover; background-position: top center;"][/div] [div class=leftpic style="background: var(--image-4); background-size: cover; background-position: center;"][/div] [div class=rightpic style="background: var(--image-5); background-size: cover; background-position: center;"][/div][/div][/div] [div class="tabContents tabContents3"][div class=scroll]THE PERSONA [div class=answer]lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis pretium convallis. ut sed quam non nisi tincidunt sollicitudin. In hac habitasse platea dictumst. phasellus non rhoncus sapien. vivamus elementum vel leo sit amet fringilla. duis eget tempus metus. donec posuere congue purus, nec varius est. aenean sapien ipsum, tempus at convallis sit amet, fringilla vel lectus.[/div] FEARS [div class=answer]โ€ข first fear โ€ข second fear โ€ข and another one[/div] LIKES [div class=answer]โ€ข first like โ€ข second like โ€ข and another one[/div] DISLIKES [div class=answer]โ€ข first like โ€ข second like โ€ข and another one[/div] AILMENTS [div class=answer]lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis pretium convallis. ut sed quam non nisi tincidunt sollicitudin. In hac habitasse platea dictumst. phasellus non rhoncus sapien. vivamus elementum vel leo sit amet fringilla. duis eget tempus metus. donec posuere congue purus, nec varius est. aenean sapien ipsum, tempus at convallis sit amet, fringilla vel lectus.[/div][/div][/div] [div class="tabContents tabContents4"][div class=scroll]THE STORY [div class=answer]lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis pretium convallis. ut sed quam non nisi tincidunt sollicitudin. In hac habitasse platea dictumst. phasellus non rhoncus sapien. vivamus elementum vel leo sit amet fringilla. duis eget tempus metus. donec posuere congue purus, nec varius est. aenean sapien ipsum, tempus at convallis sit amet, fringilla vel lectus. nulla facilisi. morbi aliquam egestas est nec mattis. quisque egestas a mi at maximus. sed pulvinar odio et leo congue tempor. sed sagittis et magna id suscipit. etiam semper nisl faucibus pretium elementum. phasellus efficitur sit amet magna id imperdiet. fusce vestibulum quam vitae justo rutrum, a lobortis erat tincidunt. donec ultrices dapibus pharetra. phasellus scelerisque dignissim sapien vitae pretium. pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. donec vulputate fringilla leo, ut pulvinar leo efficitur vitae. nullam imperdiet lacus ut pellentesque euismod. praesent tempus auctor quam sed commodo. donec viverra scelerisque sapien, eu rhoncus est suscipit in.[/div][/div][/div] [/div][/div][/div][/div] [class=container] width: 550px; height: 350px; 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: 350px; margin: auto; background: var(--bkgd-colour); margin-left: 50px; display: flex; align-items: center; [/class] [class=image] width: 120px; height: 300px; left: 380px; position: absolute; border: 2px solid var(--bkgd-colour); background: var(--image-1); background-position: center; background-size: cover; z-index: 1; transition: 1s all; [/class] [class=title] color: var(--text-colour); position: absolute; font-weight: 900; text-transform: uppercase; line-height: 35px; padding: 5px; width: 330px; font-size: 35px; text-align: left; left: 20px; [/class] [class=line] background: var(--accent-1); opacity: 3; Width: 380px; height: 1px; bottom: 135px; position: absolute; [/class] [class=inner] position: absolute; right: 0px; height: 300px; width: 0px; background: var(--bkgd-colour); transition: 1s all; [/class] [class=slide] left: -50px; transition: 1s all; [/class] [class=expand] width: 378px; transition: 1s all; [/class] [class=tab] width: 120px; background: none; line-height: 10px; font-size: 11px; position: absolute; right: 15px; color: var(--text-colour); text-transform: uppercase; letter-spacing: 5px; text-align: right; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; font-family: Acme; transition: 1s all; [/class] [class=header] line-height: 25px; font-size: 24px; position: absolute; color: var(--text-colour); text-transform: uppercase; padding: 5px; letter-spacing: 1px; text-align: left; font-weight: bold; position: absolute; top: 0px; left: 10px; height: 20px; width: 220px; text-decoration: underline; text-decoration-color: var(--accent-1); [/class] [class name=tab state=hover] color: var(--accent-1); transition: 1s all; [/class] [class=innerfade] height: 100%; width: 100%; opacity: 0; transition: 0.3s all; pointer-events: none; [/class] [class=fadein] opacity: 1; transition: 1s all; transition-delay: 0.8s; pointer-events: auto; [/class] [class=tabContents] position: absolute; border-right: 5px solid transparent; box-sizing: border-box; top: 85px; left: 35px; width: 325px; height: 200px; font-size: 10px; line-height: 20px; font-family: 'Source Code Pro'; text-align: left; text-transform: uppercase; text-align: justify; overflow: hidden; color: var(--accent-1); opacity: 0; [/class] [class=answer] text-transform: none; line-height: 15px; padding-bottom: 15px; color: var(--text-colour); letter-spacing: 0px; white-space: pre-line; [/class] [class=show] opacity: 1; transition: all 1.5s; z-index: 1; [/class] [script class=border on=mouseenter] addClass slide image addClass expand inner addClass fadein innerfade [/script] [script class=border on=mouseleave] removeClass slide image removeClass expand inner removeClass fadein innerfade [/script] [script class=tab1 on=click] addClass show tabContents1 addClass chosentab tab1 removeClass show tabContents2 removeClass show tabContents3 removeClass show tabContents4 removeClass chosentab tab2 removeClass chosentab tab3 removeClass chosentab tab4 [/script] [script class=tab2 on=click] addClass show tabContents2 addClass chosentab tab2 removeClass show tabContents1 removeClass show tabContents3 removeClass show tabContents4 removeClass chosentab tab1 removeClass chosentab tab3 removeClass chosentab tab4 [/script] [script class=tab3 on=click] addClass show tabContents3 addClass chosentab tab3 removeClass show tabContents1 removeClass show tabContents2 removeClass show tabContents4 removeClass chosentab tab1 removeClass chosentab tab2 removeClass chosentab tab4 [/script] [script class=tab4 on=click] addClass show tabContents4 addClass chosentab tab4 removeClass show tabContents1 removeClass show tabContents2 removeClass show tabContents3 removeClass chosentab tab1 removeClass chosentab tab2 removeClass chosentab tab3 [/script] [class=chosentab] color: var(--accent-1); transition: 1s all; z-index: 2; [/class] [class=scroll] width: 100%; height: 100%; overflow-y: scroll; padding-right: 17px; [/class] [class=leftpic] float: left; display: inline-block; width: 145px; height: 180px; margin: 5px 0; [/class] [class=rightpic] float: right; display: inline-block; width: 145px; height: 180px; margin: 5px 0; [/class]
 
it is beauty
it is grace
noora's majestic coding skills will kick you in the face
 
neon reverie neon reverie โ€” i'm about to wrap my heart and send it to u in a little gift box
how dare you be so kind and precious to me ๐Ÿ’ž
 
bro what the heckity heck
 
bro what the heckity heck
tenor.gif
 
[class=container1]width: 700px; height: 350px; margin: auto; cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important;[/class] [class=border1]position: absolute; width: 700px; height: 320px; background: #191919; margin: 0 auto;[/class] [class=middle]position: absolute; top: 0; left: 20px; height: 350px; width: 300px; background: #b2e0e0; clip-path: polygon(0 0, 100% 0, 100% 91.5%, 50% 100%, 0 91.5%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 91.5%, 50% 100%, 0 91.5%);[/class] [class=circle2]position: absolute; top: 30px; left: 45px; height: 210px; width: 210px; border-radius: 100%; background-color: rgba(160, 201, 201, .7);[/class] [class=circle1]position: absolute; top: 20px; left: 20px; border-radius: 100%; border: 3px solid #fff; width: 170px; height: 170px; box-sizing: border-box;[/class] [class=image1]position: relative; width: 164px; height: 164px; background-image: url(https://i.imgur.com/Aupxd4J.png); border-radius: 100%; border: 12px solid #A0C9C9; box-sizing: border-box; background-size: cover; background-position: center; color: #f5f5f5; font-size: 90px; display: flex; align-items: center; justify-content: center; text-align: center;[/class] [class=right]position: absolute; top: 0; left: 320px; height: 320px; width: 380px; font-family: Spartan;[/class] [class=textbox1]position: absolute; top: 15px; left: 20px; height: 260px; width: 340px; font-size: 11px; color: white; text-align: justify; font-family: Spartan; white-space: pre-line;[/class] [class=header1]height: 35px; width: 100%; background: #b2e0e0; font-size: 15px; font-family: Spartan; text-align: center; color: #191919; line-height: 35px;[/class] [class=text1]position: absolute; top: 45px; width: 100%; font-size: 12px; font-family: Spartan; text-align: justify; color: #f5f5f5;[/class] [class=tabb]position: absolute; bottom: 45px; left: 60px; height: 50px; width: 180px; border-radius: 5px; background: #191919; transition: 1s; color: #f5f5f5; font-size: 20px; display: flex; align-items: center; justify-content: center; font-family: Spartan; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;[/class] [class name=tabb state=hover] color: rgb(160, 201, 201); transition: 1s; [/class] [div class=container1][div class=border1][div class=middle][div class=circle2][div class=circle1][div class=image1]06[/div][/div][/div] [div class=tabb]code here[/div][/div] [div class=right][div class=textbox1][div class=header1]ephemeral[/div] [div class=text1]here's a simple but cute placeholder code that i've been using for quite some time now, it's one of my favourites so i figured i'd make it a freebie and i still have yet to post a placeholder, so here we are! if you'd like to change the icon, font awesome will have many options for you here. feel free to get creative and use this as you'd like, below is just an example of how i've used it in the past. don't be afraid to message if you have any questions anddd have a great day c:[/div][/div][/div][/div][/div]

[class=container] --main-color: #A0C9C9; --img: url(https://www.ajactraining.org/wp-content/uploads/2019/09/image-placeholder.jpg); [/class] [div class=container][div class=border][div class=top][div class=icon][/div][div class=role]THE ROLE HERE[/div][/div] [div class=bottom][div class=circle][div class=image][/div][/div] [div class=info]character name faceclaim add whatever you'd like here[/div] [div class=block][/div][/div][/div][/div] [class=container] width: 400px; height: 200px; margin: auto; [/class] [class=border]position: absolute; width: 400px; height: 200px; background: #fafafa; border: 1px solid #ddd; margin: 0 auto; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;[/class] [class=top]position: absolute; top: 0; left: 0; height: 50px; width: 400px; border-bottom: 1px solid #ddd; [/class] [class=icon] position: absolute; left: 0; top: 0; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; font-size: 25px; background: var(--main-color); color: #fff; text-shadow: 1px 1px 0px rgba(0,0,0,0.2), -1px 1px 0px rgba(0,0,0,0.2), 1px -1px 0px rgba(0,0,0,0.2), -1px -1px 0px rgba(0,0,0,0.2); [/class] [class=role] position: absolute; left: 50px; height: 50px; width: 350px; line-height: 50px; text-align: center; font-family: Roboto Slab; font-size: 20px; color: #000; letter-spacing: 1px; text-transform: uppercase; [/class] [class=bottom] position: absolute; top: 51px; left: 0; background: #f4f4f4; height: 149px; width: 340px; padding: 0 30px; [/class] [class=block] position: absolute; right: 0; top: 0; width: 25px; height: 149px; background: var(--main-color); [/class] [class=circle] position: absolute; top: 14px; border-radius: 100%; border: 1px solid var(--main-color); width: 120px; height: 120px; box-sizing: border-box; [/class] [class=image] position: relative; width: 118px; height: 118px; background-image: var(--img); border-radius: 100%; border: 10px solid #fff; box-sizing: border-box; background-size: cover; background-position: center; [/class] [class=info] position: absolute; right: 35px; height: 149px; width: 195px; display: flex; justify-content: center; align-items: center; text-align: center; font-family: Ubuntu mono; font-size: 12px; color: var(--main-color); text-transform: uppercase; font-weight: 400; letter-spacing: 1px; white-space: pre-line; [/class]
 
Last edited:

Users who are viewing this thread

Back
Top