— 𝖺 𝗌𝗄𝗒 𝖿𝗎𝗅𝗅 𝗈𝖿 𝖼𝗈𝖽𝖾𝗌 ☆

aphrodisiac · Apr 4, 2020

your codes are beyond good omg

constellation · Apr 4, 2020

aphrodisiac said:
your codes are beyond good omg

eeee thank you so much! c :

constellation · Apr 10, 2020

[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]07[/div][/div][/div] [div class=tabb]code here[/div][/div] [div class=right][div class=textbox1][div class=header1]dandelion[/div] [div class=text1]tis me with another freebieeee, yay! this is a little different than what i usually make but it came out satisfyingly pleasing. (check me out, saying the same ol' thing aha) the code might look a little complicated but it really isn't. if you're not fond of the tint on the image, you can simply delete the 'icon colour' div in the code or just message me and i can lend a helping hand! thank you to everyone that uses my freebies and reacts to them, it genuinely makes me super happy and ecstatic to see all the love. 'kay, i'm gonna stop here before i cheese all over you guys. once again, happy writing and stay safe y'all! ♡[/div][/div][/div][/div][/div]

[class=border] --main-colour: #A0C9C9; --image: url(https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png); [/class] [div class=container][div class=border][div class=line style="top: 80px;"][/div][div class=line style="top: 175px;"][/div][div class=line style="top: 490px;"][/div] [div class=line style="background: var(--main-colour); top: 70px;"][/div][div class=line style="background: var(--main-colour); top: 165px;"][/div][div class=line style="background: var(--main-colour); top: 500px;"][/div] [div class=bubble style="top: 110px; left: 170px"][/div][div class=bubble style="top: 110px; left: 210px; background: var(--main-colour);"][/div][div class=bubble style="top: 110px; left: 250px;"][/div] [div class=bubble style="background: var(--main-colour); top: 520px; left: 370px;"][/div][div class=bubble style="top: 520px; left: 410px;"][/div][div class=bubble style="background: var(--main-colour); top: 520px; left: 450px;"][/div] [div class=charname]a name here.[/div] [div class=icon][/div][div class=iconcolour][/div][div class=charinfo][div class=scroll]MOOD. this section scrolls LOCATION. here ATTIRE. here INTERACTIONS. here[/div][/div] [div class=post][div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc laoreet malesuada magna, eget tincidunt sapien euismod vitae. Proin eget nibh sagittis elit finibus condimentum. Fusce euismod sollicitudin tortor, sit amet volutpat massa ullamcorper sit amet. Praesent luctus fringilla ipsum, ut elementum ipsum porta malesuada. Nunc eu dolor venenatis massa facilisis varius vitae quis urna. Curabitur sed gravida arcu. Quisque in feugiat turpis, sed facilisis ex. Nulla rutrum consectetur dui vel condimentum. Maecenas feugiat quis metus sed feugiat. Donec nec urna sem. Etiam sollicitudin, metus at consequat rutrum, enim augue aliquam metus, tristique faucibus dui erat non neque. Curabitur ac tempor velit, in imperdiet felis. Morbi luctus justo et ante fringilla tincidunt. Mauris dictum pellentesque magna, quis auctor mauris tempor ut. Aliquam elit tellus, fermentum vitae nisi in, hendrerit ultricies ex. Maecenas sit amet diam neque. Pellentesque placerat lacus ac sagittis egestas. Donec sit amet iaculis sapien. In sollicitudin, tortor non pulvinar aliquam, nisi risus feugiat magna, a placerat ligula nulla a nisl. Sed sagittis tincidunt nunc, id posuere purus. Sed sit amet lorem gravida tortor condimentum mattis. Sed imperdiet maximus felis, ac fringilla tortor sodales quis. In imperdiet velit sed maximus congue. Cras suscipit quis enim ac viverra. Nullam at enim quis diam fermentum iaculis ac sit amet sem. Vivamus elit quam, mattis dignissim massa eu, condimentum egestas ante. Vivamus quis neque id urna maximus rutrum nec a libero. Morbi nec molestie lectus, quis commodo nunc. Pellentesque bibendum purus eu urna maximus cursus. Cras et magna eget mauris suscipit rutrum sed et risus. Nullam commodo vulputate dolor, id laoreet metus efficitur ac.[/div][/div] [div class=quote]a short quote goes here.[/div][/div][/div] [class=container] width: 500px; height: 560px; margin: auto; cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important; [/class] [class=border] position: absolute; width: 500px; height: 560px; margin: auto; background: #f1f1f1; [/class] [class=line] position: absolute; height: 2px; background: #252525; width: 100%; [/class] [class=charname] position: absolute; text-transform: uppercase; font-size: 33px; color: #252525; top: 27px; left: 175px; letter-spacing: 5px; [/class] [class=icon] position: absolute; background: var(--image); background-size: cover; background-position: top center; width: 140px; height: 140px; box-sizing: border-box; border-radius: 100%; top: 15px; left: 15px; filter: grayscale(100%); [/class] [class=iconcolour] border-radius: 100%; position: absolute; width: 140px; height: 140px; box-sizing: border-box; opacity: 0.3; top: 15px; left: 15px; background: var(--main-colour); filter: none; [/class] [class=bubble] position: absolute; width: 20px; height: 20px; border-radius: 100%; background: #252525; [/class] [class=quote] position: absolute; box-sizing: border-box; font-size: 12px; color: #252525; top: 525px; left: 20px; text-transform: uppercase; font-weight: 600; [/class] [class=charinfo] position: absolute; width: 200px; height: 63px; display: block; top: 92px; left: 285px; font-size: 11px; font-family: Manrope; color: #252525; white-space: pre-line; overflow-x: hidden; line-height: 140%; [/class] [class=post] position: absolute; height: 250px; width: 417px; color: #000; text-align: justify; font-size: 12px; overflow: hidden; font-family: Manrope; top: 210px; left: 50px; white-space: pre-line; [/class] [class=scroll] width: 100%; height: 100%; overflow-y: scroll; padding-right: 17px; [/class]

jasmyn · Apr 10, 2020

i swear i'm not a stalker liking this code the min you add it lmaooo.
but on a serious note this is amazing like all of your codes! *bows to a coding queen*

constellation · Apr 10, 2020

jasmichelle said:
i swear i'm not a stalker liking this code the min you add it lmaooo.
but on a serious note this is amazing like all of your codes! *bows to a coding queen*

the fact that you liked it as soon as i posted made me want to cry asdaksd
thank you so much lovely! i really appreciate all the support

constellation · Apr 16, 2020

[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=circless]position: absolute; top: 30px; left: 45px; height: 210px; width: 210px; border-radius: 100%; background-color: rgba(160, 201, 201, .7);[/class] [class=circles1]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=circless][div class=circles1][div class=image1]08

[/div][/div] [div class=tabb]code here[/div][/div] [div class=right][div class=textbox1][div class=header1]firdaus[/div] [div class=text1]hiii, it meee! coming at you with another character sheet code. i created this a while ago for the lovely @sox's roleplay and revamped it a little bit to turn it into a freebie for y'all. i really just loved the animations on the circle ( hover over it for a surprise ), i think it was the first time i tried animations and lord, the math killed me lmao. but here we are! feel free to change fonts, colours and whatever you like. definitely trying to test myself more with coding, but if you guys have any cool ideas, feel free to send me a private message? thankieees! happy writing and stay safe y'all! ♡[/div][/div][/div][/div][/div]

[class=border] --main-colour: #A0C9C9; --circle-image: url(https://live.staticflickr.com/7369/14174782851_7d2b963cb9.jpg); --tab1-image1: url(https://via.placeholder.com/140x290/191919/FFFFFF/?text=IMAGE 1); --tab1-image2: url(https://via.placeholder.com/140x290/191919/FFFFFF/?text=IMAGE 2); --tab2-image1: url(https://via.placeholder.com/125x163/191919/FFFFFF/?text=IMAGE 1); --tab2-image2: url(https://via.placeholder.com/125x163/191919/FFFFFF/?text=IMAGE 2); --tab2-image3: url(https://via.placeholder.com/125x163/191919/FFFFFF/?text=IMAGE 3); --tab2-image4: url(https://via.placeholder.com/125x163/191919/FFFFFF/?text=IMAGE 4); --tab3-image1: url(https://via.placeholder.com/140x290/191919/FFFFFF/?text=IMAGE 1); --tab3-image2: url(https://via.placeholder.com/140x290/191919/FFFFFF/?text=IMAGE 2); --tab4-image1: url(https://via.placeholder.com/135x190/191919/FFFFFF/?text=IMAGE 1); --tab4-image2: url(https://via.placeholder.com/135x190/191919/FFFFFF/?text=IMAGE 2); [/class] [div class=border][div class=container][div class=circle][div class=cimage] [div class="leaf leaf1" style="margin-top: 84px; margin-left: 152px;"][div class="icon icon1"]

01

[/div][/div] [div class="leaf leaf2" style="margin-top: 18px; margin-left: 84px;"][div class="icon icon2"]

02

[/div][/div] [div class="leaf leaf3" style="margin-top: 84px; margin-left: 18px;"][div class="icon icon3"]

03

[/div][/div] [div class="leaf leaf4" style="margin-top: 152px; margin-left: 84px;"][div class="icon icon4"]

04

[/div][/div] [/div][/div] [div class=title]name or role[/div] [div class="tabContents tabContents01"][div class="button bone"][/div] [div class=t1image style="bottom: 0px; left: 15px; background: var(--tab1-image1); background-size: cover; background-position: center;"][/div] [div class=t1image style="top: 0px; left: 170px; background: var(--tab1-image2); background-size: cover; background-position: center;"][/div] [div class=t1content style="top: 15px; right: 0px;"][div class=scroll][div class=tag]name.[/div]

name goes here.

[div class=tag]nickname(s).[/div]

nicknames here.

[div class=tag]age.[/div]

age here.

[div class=tag]gender.[/div]

gender here.

[div class=tag]sexuality.[/div]

sexuality here.

[div class=tag]role.[/div]

the role here.

[div class=tag]faceclaim.[/div]

faceclaim here.

[/div][/div][/div] [div class="tabContents tabContents02"][div class="button btwo"][/div] [div class=t2image style="right: 155px; top: 0px; background: var(--tab2-image1); background-size: cover; background-position: center;"][/div] [div class=t2image style="right: 155px; top: 177px; background: var(--tab2-image2); background-size: cover; background-position: center;"][/div] [div class=t2image style="right: 15px; top: 60px; background: var(--tab2-image3); background-size: cover; background-position: center;"][/div] [div class=t2image style="right: 15px; bottom: 0px; background: var(--tab2-image4); background-size: cover; background-position: center;"][/div] [div class=t2content][div class=scroll][div class=tag]hair colour.[/div]

information here.

[div class=tag]eye colour.[/div]

information here.

[div class=tag]body.[/div]

information here.

[div class=tag]distinguishing features.[/div]

information here.

[div class=tag]body modifications.[/div]

information here.

[div class=tag]ailments.[/div]

information here.

[div class=tag]attire.[/div]

information here.

[/div][/div][/div] [div class="tabContents tabContents03"][div class="button bthree"][/div] [div class=t1image style="bottom: 0px; right: 15px; background: var(--tab3-image1); background-size: cover; background-position: center;"][/div] [div class=t1image style="top: 0px; right: 170px; background: var(--tab3-image2); background-size: cover; background-position: center;"][/div] [div class=t1content style="top: 15px; left: 20px;"][div class=scroll][div class=tag]persona.[/div]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor arcu felis, vestibulum imperdiet ante commodo id. Aliquam scelerisque magna et lorem condimentum interdum. Pellentesque varius arcu quis tellus suscipit, eget ullamcorper urna tincidunt. Maecenas a ante condimentum, commodo dolor ac, interdum quam. Donec ornare justo sit amet euismod interdum. Maecenas sit amet imperdiet orci. Vivamus facilisis rutrum ipsum, vel faucibus eros suscipit sit amet. Suspendisse consectetur pharetra dui a sollicitudin. Nunc commodo sagittis risus sed congue. Praesent blandit sem eget nisl facilisis, vestibulum tempus sapien bibendum. Nunc egestas congue arcu et porta. Praesent tristique et mauris eu dictum. Proin suscipit orci sit amet placerat varius. Suspendisse sagittis, nisi nec congue semper, velit eros dictum massa, id venenatis ex velit id velit. Aliquam erat volutpat. Proin euismod odio fringilla erat pellentesque rhoncus. In at odio justo. Nunc sit amet posuere lorem. Aliquam in tincidunt velit. In hac habitasse platea dictumst. Mauris sed mauris magna. Mauris id odio sed nibh suscipit fringilla. Nam luctus massa in nisl semper porttitor. Vivamus mauris sapien, sodales in mi at, pellentesque malesuada odio. Cras non vulputate sapien.

[div class=tag]likes.[/div]

• first like • second like • and another one

[div class=tag]dislikes.[/div]

• first dislike • second dislike • and another one

[div class=tag]fears.[/div]

• first fear • second fear • and another one

[/div][/div][/div] [div class="tabContents tabContents04"][div class="button bfour"][/div] [div class=t4image style="top: 0; left: 30px; background: var(--tab4-image1); background-size: cover; background-position: center;"][/div] [div class=t4image style="bottom: 0; right: 30px; background: var(--tab4-image2); background-size: cover; background-position: center;"][/div] [div class=t4content style="right: 40px; top: 15px; width: 375px;"][div class=scroll][div class=tag]history.[/div]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor arcu felis, vestibulum imperdiet ante commodo id. Aliquam scelerisque magna et lorem condimentum interdum. Pellentesque varius arcu quis tellus suscipit, eget ullamcorper urna tincidunt. Maecenas a ante condimentum, commodo dolor ac, interdum quam. Donec ornare justo sit amet euismod interdum. Maecenas sit amet imperdiet orci. Vivamus facilisis rutrum ipsum, vel faucibus eros suscipit sit amet. Suspendisse consectetur pharetra dui a sollicitudin. Nunc commodo sagittis risus sed congue. Praesent blandit sem eget nisl facilisis, vestibulum tempus sapien bibendum. Nunc egestas congue arcu et porta. Praesent tristique et mauris eu dictum. Proin suscipit orci sit amet placerat varius. Suspendisse sagittis, nisi nec congue semper, velit eros dictum massa, id venenatis ex velit id velit. Aliquam erat volutpat. Proin euismod odio fringilla erat pellentesque rhoncus. In at odio justo. Nunc sit amet posuere lorem. Aliquam in tincidunt velit. In hac habitasse platea dictumst. Mauris sed mauris magna. Mauris id odio sed nibh suscipit fringilla. Nam luctus massa in nisl semper porttitor. Vivamus mauris sapien, sodales in mi at, pellentesque malesuada odio. Cras non vulputate sapien.

[/div][/div] [div class=t4content style="bottom: 15px; left: 30px;"][div class=scroll][div class=tag]relationships.[/div]

relationships here.

[/div][/div][/div] [/div][/div] [class=border] height: 400px; width: 700px; margin: auto; [/class] [class=container] position: absolute; width: 700px; height: 400px; [/class] [class=circle] position: absolute; left: 200px; width: 299px; height: 299px; background-color: #fdfdfd; box-shadow: 0px 0px 10px rgba(79,78,78,0.15); border-radius: 50%; overflow: hidden; [/class] [class=cimage] position: absolute; top: 15px; left: 15px; width: 269px; height: 269px; background: var(--circle-image); background-size: cover; background-position: center; border-radius: 50%; [/class] [class=title] position: absolute; bottom: 0; width: 700px; text-align: center; font: 80px viga; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; text-transform: lowercase; line-height: 80px; font-weight: 600; color: var(--main-colour); [/class] [class=leaf] width: 90px; height: 90px; opacity: 0; border: 5px solid white; position: absolute; background: rgba(255,255,255,0.7); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-left-radius: 100%; transition: all 1s ease; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; overflow: hidden; [/class] [class=one]animation: {post_id}one 0.75s both 1 ease-in-out;[/class] [class=two]animation: {post_id}two 0.75s both 1 ease-in-out; animation-delay: 0.75s;[/class] [class=three]animation: {post_id}three 0.75s both 1 ease-in-out; animation-delay: 1.5s;[/class] [class=four]animation: {post_id}four 0.75s both 1 ease-in-out; animation-delay: 2.25s;[/class] [class=iconani]animation: {post_id}icon 1s both 1 ease-in-out; animation-delay: 2.75s;[/class] [class=icon] display: block; width: 100%; height: 100%; text-align: center; line-height: 90px; font-size: 25px; transition: 1s; filter: none; font-family: Viga; color: #191919; [/class] [class=tabContents] position: absolute; left: 50px; width: 600px; height: 400px; background-color: #fdfdfd; border-radius: 15px; box-shadow: 0px 0px 10px rgba(79,78,78,0.15); z-index: -1; opacity: 0; transition: all 1.5s; overflow: hidden; [/class] [class=show] opacity: 1; transition: all 1.5s; z-index: 1; [/class] [class=button] position: absolute; z-index: 2; top: 15px; right: 15px; width: 30px; height: 30px; font-size: 16px; line-height: 30px; text-align: center; border-radius: 100px; border: 1px solid black; transition: 1s all; -webkit-text-stroke: 1px #000; box-shadow: 0px 0px 10px rgba(255,255,255,0.15); cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=t1image] position: absolute; height: 290px; width: 140px; box-shadow: 0 0 2px #b2b2b2; [/class] [class=t1content] position: absolute; width: 265px; height: 370px; white-space: pre-line; line-height: 150%; font-family: Roboto; overflow-x: hidden;[/class] [class=t2content] position: absolute; top: 15px; left: 20px; width: 290px; height: 370px; white-space: pre-line; line-height: 150%; font-family: Roboto; overflow-x: hidden; [/class] [class=tag] text-transform: uppercase; font-size: 13px; letter-spacing: 1px; font-family: Viga; text-align: left; color: var(--main-colour); [/class] [class=t2image] position: absolute; height: 163px; width: 125px; box-shadow: 0 0 2px #b2b2b2; [/class] [class=t4image] position: absolute; height: 190px; width: 135px; background: #ECECEA; box-shadow: 0 0 2px #b2b2b2; [/class] [class=t4content] position: absolute; width: 400px; height: 175px; white-space: pre-line; line-height: 150%; font-family: Roboto; overflow-x: hidden; [/class] [class=scroll] width: 100%; height: 100%; overflow-y: scroll; padding-right: 17px; color: black; text-transform: lowercase; font-size: 12px; [/class] [script class=cimage on=mouseenter] addClass one leaf1 addClass two leaf2 addClass three leaf3 addClass four leaf4 addClass iconani icon [/script] [class name=button state=hover] background: #191919; -webkit-text-stroke: 1px #fff; box-shadow: 0px 0px 10px rgba(0,0,0,0.15); transition: 1s all; [/class] [class name=icon state=hover] background: var(--main-colour); color: white; transition: 0.5s all; [/class] [script class=leaf1 on=click] addClass show tabContents01 [/script] [script class=bone on=click] removeClass show tabContents01 [/script] [script class=leaf2 on=click] addClass show tabContents02 [/script] [script class=btwo on=click] removeClass show tabContents02 [/script] [script class=leaf3 on=click] addClass show tabContents03 [/script] [script class=bthree on=click] removeClass show tabContents03 [/script] [script class=leaf4 on=click] addClass show tabContents04 [/script] [script class=bfour on=click] removeClass show tabContents04 [/script] [/div]

constellation · Apr 17, 2020

Drakoviri said:
You have to name your codes by the constellations

this is actual. pure. genius.
i had the thought last night and i'm honestly considering it!

constellation · Apr 17, 2020

Drakoviri said:
However imma gonna Frankstein your last code within mine

so long as you keep the credit/credit me then go for it! (:

blackout · Apr 18, 2020

~~i thought your code looked familiar and then i realized it looks like the troom troom logo~~
i love it though ok ty

constellation · Apr 18, 2020

fated said:
~~i thought your code looked familiar and then i realized it looks like the troom troom logo~~
i love it though ok ty

omfg i didn’t even notice until u pointed it out jsjfjsjd
thank u babie

constellation · Apr 21, 2020

M Mesenterium — you are not a bother at all, and thank you for asking! you can definitely add new categories! what’s there is just an example of how i’ve used the code in the past c :

constellation · Apr 21, 2020

M Mesenterium — ahhh, thank you so much! i’m glad you think so, i appreciate it

constellation · Apr 25, 2020

[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]09

[/div][/div] [div class=tabb]code here[/div][/div] [div class=right][div class=textbox1][div class=header1]lilac[/div] [div class=text1]a character sheet coming your way! hover over the image for a surprise and the rest is pretty straight forward. it's cute and simple which i like. feel free to change up the icons ( more here ), colours and fonts. there are hidden scrolls! there's a live version here if you'd like to see which also includes a relationship tab, so if you would like that version, feel free and ask and i'd be happy to send that code over! if you have any overall questions, please don't be afraid to message me and i'll respond as soon as i can! on a side note, ramadan mubarak to those fasting! happy writing and stay safe y'all! ♡[/div][/div][/div][/div][/div]

[class=border] --main-colour: #A0C9C9; --main-image: url(https://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg); --image-1: url(https://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg); --image-2: url(https://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg); [/class] [div class=container][div class=border][div class=sborder2][div class=shape2][div class=imagea][/div][div class=imageb][/div] [div class=tabs][div class="tab tab1 chosen"][/div] [div class="tab tab2"][/div] [div class="tab tab3"][/div] [div class="tab tab4"][/div] [div class="tab tab5"][/div][/div] [div class=banner]NAME OR ROLE[/div][/div][/div] [div class=sborder1][div class=shape1][div class="tabContents tabContents1 show"][div class=mainimage][/div][/div] [div class="tabContents tabContents2"][div class=header]01. BASICS[/div][div class=line][/div][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]place of birth.[/div]

information here.

[div class=tag]gender.[/div]

information here.

[div class=tag]sexuality.[/div]

information here.

[/div][/div][/div] [div class="tabContents tabContents3"][div class=header]02. LOOKS[/div][div class=line][/div][div class=textbox][div class=scroll][div class=tag]height.[/div]

information here.

[div class=tag]weight.[/div]

information here.

[div class=tag]body.[/div]

information here.

[div class=tag]hair.[/div]

information here.

[div class=tag]eyes.[/div]

information here.

[div class=tag]marks.[/div]

information here.

[div class=tag]wardrobe.[/div]

information here.

[/div][/div][/div] [div class="tabContents tabContents4"][div class=header]03. PERSONA[/div][div class=line][/div][div class=textbox][div class=scroll][div class=tag]personality.[/div]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt blandit rutrum. Pellentesque eu imperdiet turpis, suscipit fringilla libero. Ut auctor euismod volutpat. Cras quis sagittis nisi, dapibus lacinia elit. Proin dictum, tellus at sagittis dictum, lectus felis tincidunt augue, in gravida sem eros vitae odio. Vivamus tempus eleifend urna et malesuada. Etiam pellentesque lectus vitae ante sodales suscipit. Sed non ornare ligula. Phasellus dui magna, pellentesque at ipsum et, mollis blandit tellus.

[div class=tag]likes.[/div]

list them here.

[div class=tag]dislikes.[/div]

list them here.

[div class=tag]fears.[/div]

list them here.

[/div][/div][/div] [div class="tabContents tabContents5"][div class=header]04. HISTORY[/div][div class=line][/div][div class=textbox][div class=scroll][div class=tag]childhood.[/div]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt blandit rutrum. Pellentesque eu imperdiet turpis, suscipit fringilla libero. Ut auctor euismod volutpat. Cras quis sagittis nisi, dapibus lacinia elit. Proin dictum, tellus at sagittis dictum, lectus felis tincidunt augue, in gravida sem eros vitae odio. Vivamus tempus eleifend urna et malesuada. Etiam pellentesque lectus vitae ante sodales suscipit. Sed non ornare ligula. Phasellus dui magna, pellentesque at ipsum et, mollis blandit tellus.

[div class=tag]teens.[/div]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt blandit rutrum. Pellentesque eu imperdiet turpis, suscipit fringilla libero. Ut auctor euismod volutpat. Cras quis sagittis nisi, dapibus lacinia elit. Proin dictum, tellus at sagittis dictum, lectus felis tincidunt augue, in gravida sem eros vitae odio. Vivamus tempus eleifend urna et malesuada. Etiam pellentesque lectus vitae ante sodales suscipit. Sed non ornare ligula. Phasellus dui magna, pellentesque at ipsum et, mollis blandit tellus.

[div class=tag]adulthood.[/div]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt blandit rutrum. Pellentesque eu imperdiet turpis, suscipit fringilla libero. Ut auctor euismod volutpat. Cras quis sagittis nisi, dapibus lacinia elit. Proin dictum, tellus at sagittis dictum, lectus felis tincidunt augue, in gravida sem eros vitae odio. Vivamus tempus eleifend urna et malesuada. Etiam pellentesque lectus vitae ante sodales suscipit. Sed non ornare ligula. Phasellus dui magna, pellentesque at ipsum et, mollis blandit tellus.

[/div][/div][/div] [/div][/div][/div][/div] [class=container] width: 700px; height: 400px; margin: auto; [/class] [class=border] position: absolute; width: 700px; height: 400px; [/class] [class=sborder1] position: absolute; top: -1px; left: 124px; height: 402px; width: 452px; -webkit-clip-path: inset(0 0 0 0 round 40% 0%); clip-path: inset(0 0 0 0 round 40% 0%); background: #eee; z-index: 1; [/class] [class=sborder2] position: absolute; top: -1px; right: 124px; height: 402px; width: 452px; -webkit-clip-path: inset(0 0 0 0 round 40% 0%); clip-path: inset(0 0 0 0 round 40% 0%); background: #eee; [/class] [class=shape1] position: absolute; z-index: 1; top: 1px; left: 1px; height: 400px; width: 450px; background: #fff; -webkit-clip-path: inset(0 0 0 0 round 40% 0%); clip-path: inset(0 0 0 0 round 40% 0%); [/class] [class=shape2] position: absolute; top: 1px; right: 1px; height: 400px; width: 450px; background: var(--main-colour); background-image: url(https://www.transparenttextures.com/patterns/ag-square.png); -webkit-clip-path: inset(0 0 0 0 round 40% 0%); clip-path: inset(0 0 0 0 round 40% 0%); [/class] [class=slideright] right: -1px; transition: 1s all; [/class] [class=slideleft] left: -1px; transition: 1s all; [/class] [script class=border on=mouseenter] addClass slideleft sborder1 addClass slideright sborder2 [/script] [class=mainimage] position: absolute; top: 5px; right: 5px; height: 390px; width: 440px; background: var(--main-image); background-size: cover; background-position: top center; -webkit-clip-path: inset(0 0 0 0 round 40% 0%); clip-path: inset(0 0 0 0 round 40% 0%); [/class] [class=imagea] position: absolute; top: 25px; right: 105px; height: 120px; width: 120px; -webkit-clip-path: inset(0 0 0 0 round 30% 5%); clip-path: inset(0 0 0 0 round 30% 5%); background: var(--image-1); background-size: cover; background-position: center; [/class] [class=imageb] position: absolute; top: 165px; right: 105px; height: 120px; width: 120px; -webkit-clip-path: inset(0 0 0 0 round 30% 5%); clip-path: inset(0 0 0 0 round 30% 5%); background: var(--image-2); background-size: cover; background-position: center; [/class] [class=banner] position: absolute; bottom: 45px; right: 105px; height: 40px; width: 230px; background: white; border-radius: 0 90px 5px 0; text-align: right; line-height: 40px; padding-right: 25px; font-size: 14px; color: var(--main-colour); text-transform: uppercase; letter-spacing: .5px; box-shadow: 0px 0px 50px 0px #fff; font-weight: 600; [/class] [class=tabs] position: absolute; top: 20px; right: 20px; width: 50px; height: 230px; background: transparent; display: flex; flex-direction: column; justify-content: space-evenly; border: 1px solid transparent; [/class] [class=tab] width: 35px; height: 35px; background: #fff; color: var(--main-colour); font-size: 15px; border-radius: 10px; line-height: 33px; text-align: center; transition: 0.5s ease-in-out; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; box-shadow: 0px 0px 50px 0px #fff; [/class] [class=tabContents] position: absolute; height: 100%; width: 100%; opacity: 0; transition: all 1.5s; [/class] [class name=tab state=hover] background: #333; color: #fff; transition: 0.5s ease-in-out; [/class] [script class=tab1 on=click] addClass show tabContents1 addClass chosen tab1 removeClass show tabContents2 removeClass show tabContents3 removeClass show tabContents4 removeClass show tabContents5 removeClass chosen tab2 removeClass chosen tab3 removeClass chosen tab4 removeClass chosen tab5 [/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 chosen tab1 removeClass chosen tab3 removeClass chosen tab4 removeClass chosen tab5 [/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 chosen tab1 removeClass chosen tab2 removeClass chosen tab4 removeClass chosen tab5 [/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 chosen tab1 removeClass chosen tab2 removeClass chosen tab3 removeClass chosen tab5 [/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 chosen tab1 removeClass chosen tab2 removeClass chosen tab3 removeClass chosen tab4 [/script] [class=show] opacity: 1; transition: all 1.5s; z-index: 1; [/class] [class=scroll] width: 100%; height: 100%; overflow-y: scroll; padding-right: 17px; color: black; text-transform: lowercase; font-size: 12px; [/class] [class=textbox] font-family: Manrope; font-size: 12px; position: absolute; bottom: 25px; left: 30px; height: 250px; width: 360px; overflow-x: hidden; color: #333; white-space: pre-line; [/class] [class=line] position: absolute; width: 420px; height: 1px; background: #eee; bottom: 300px; left: 15px; [/class] [class=header] position: absolute; top: 20px; right: 20px; text-transform: uppercase; font-size: 50px; width: 400px; text-align: right; font-family: Manrope; letter-spacing: 1px; color: var(--main-colour); [/class] [class=tag] text-transform: uppercase; display: inline; font-size: 12px; letter-spacing: 1px; text-align: left; font-weight: 600; color: var(--main-colour); [/class] [class=chosen] color: white; background: #333; [/class] [/div]

Ayama · Apr 25, 2020

Love this one- it's adorable! >w<

constellation · Apr 25, 2020

Ayama said:
Love this one- it's adorable! >w<

thank you, ayama! truly appreciate it

jasmyn · Apr 25, 2020

How do you always manage to create such beautiful codes?! The amount of talent you have is astronomical.

constellation · Apr 25, 2020

jasmichelle said:
How do you always manage to create such beautiful codes?! The amount of talent you have is astronomical.

oh my goahhh, my heart, this was the best thing to read waking up from my nap wjfjwjf

thank u so much, it honestly means a lot and motivates me to make more freebs!!

constellation · Apr 30, 2020

[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]10

[/div][/div] [div class=tabb]code here[/div][/div] [div class=right][div class=textbox1][div class=header1]wanderlust[/div] [div class=text1]hello again! i come with a new character sheet code, which is personally one of my favourites. there are hidden scrolls and a little slideshow which i love. all you have to do for the slideshow is enter links in the variables at the beginning and the same goes for the main colour, i have left comments to help you navigate your way around it, so it should be really simple. if you do come across any problems, feel free to private message me with any questions! i've also been wanting to change the theme of my code thread for a while now... so look out for that hehe. anywho, happy writing and stay safe and happy y'all! ♡[/div][/div][/div][/div][/div][/div] [class=border] --main-color: #A0C9C9; --main-image: url(https://66.media.tumblr.com/23515fd9e01cf7e482a870a89e3444d9/d685990fd72b3d73-06/s400x600/033d4612e63c0281941ee501b78627b63cbaac8d.png); --image-1: url(https://66.media.tumblr.com/d1652cd73126b64ddc863d57481744d6/d685990fd72b3d73-a6/s250x400/73fe0febd0bb01cac5c2a1cfa3f5eabe79607559.png); --image-2: url(https://66.media.tumblr.com/9f561543f70f74ba853f2cd37f9d4c27/d685990fd72b3d73-48/s250x400/0a272bfaff21a6805a71a47430ebde01e7a03126.png); --image-3: url(https://66.media.tumblr.com/1c37f9b291d64625bffe7f6b0ab9bb5e/d685990fd72b3d73-64/s250x400/c759e68b3dc69c953282096ddef6d895c613f60b.png); --image-4: url(https://66.media.tumblr.com/86542552a8293dbfdd6254fc8eceefbb/d685990fd72b3d73-28/s250x400/7b143bb14ba95e8c603e3a6e3441ff6b2932dac9.png); --image-5: url(https://66.media.tumblr.com/4b9952d16e2f02cbbf967307572e5288/d685990fd72b3d73-89/s250x400/b63e5a8b56df9846886c88c433df3dd66cdd5fb3.png); [/class]

[div class=container][div class=border] [div class=main][div class=mainimage]

[div class=textbox][div class=scroll][div class=tag]name.[/div]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[div class=tag]nickname.[/div]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[div class=tag]age.[/div]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[div class=tag]gender.[/div]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[div class=tag]sexuality.[/div]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[/div][/div][/div] [div class=mone][div class=outsidetb][div class=insidetb][div class=tabContents][div class=scroll][div class=tag]height.[/div]