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]
[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]a sky
full of codes
full of codes
Last edited: