• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Closed ► sox's laundry hamper [broken af lol] ◄

do you prefer simple, mobile friendly codes or complex codes made for monitors?

  • mobile friendly (cmon sox the future is now old man)

  • big and complex pls

  • complex AND mobile friendly step it up sox

Results are only viewable after voting.
LONG FLIGHT - NOT MOBILE FRIENDLY

womp womp it's another cs code lmao i've been in my taeyong feelings recently and my emo heart had to make a long flight inspired code. who's surprised? not me. the text boxes all scroll, and there's a lil gallery at the end (if you need help figured out how to use it, just dm me). i'm realizing i use this title font way too much but i love it so what heckin ever. please do not remove the credit! enjoy and lmk if u have any requests! c:

[class=bkgd] --bkgd-color: #d3d9c3; --shadow-color: #fff; --accent-color1: #bd4a5d; --accent-color2: #b0dceb; --text-color: #000; position: relative; margin-left: auto; margin-right: auto; margin-bottom: 7px; width: 500px; height: 400px; background-color: var(--bkgd-color); cursor: url('https://i.imgur.com/FMvuswx.png'), auto; box-shadow: 5px 5px 0px var(--accent-color1); [/class] [class=pic1] position: absolute; width: 230px; height: 320px; left: 210px; top: 30px; background: url(https://i.pinimg.com/474x/9c/f5/16/9cf5162d6403f1a50e8527538ee55bf9.jpg); background-size: 100%; border: 1px solid var(--shadow-color); box-shadow: 20px 20px 0px var(--accent-color2); [/class] [class=pic2] position: absolute; width: 250px; height: 150px; left: 150px; top: 70px; background: url(https://i.pinimg.com/474x/ec/cc/4b/eccc4be5aee44f6481b2e62007fd1dff.jpg); background-size: 100%; background-position: 50% 50%; border: 10px solid var(--shadow-color); [/class] [class=pic3] position: absolute; width: 190px; height: 250px; left: 80px; top: 30px; background: url(https://i.pinimg.com/474x/c8/e1/5c/c8e15c9f49e1698ae5d707ca840685bc.jpg); background-size: 100%; border: 1px solid var(--shadow-color); [/class] [class=pic4] position: absolute; width: 200px; height: 100px; left: 250px; top: 60px; background: url(https://i.pinimg.com/564x/18/21/93/182193771e5fa12b56ccbc591513167d.jpg); background-size: 100%; background-position: 50% 20%; border: 10px solid var(--shadow-color); [/class] [class=pic5] position: absolute; width: 170px; height: 210px; left: 60px; top: 150px; background: url(https://i.pinimg.com/474x/73/bf/7d/73bf7df584c749e479f8ba532cb60e7a.jpg); background-size: 100%; background-position: 50% 50%; border: 1px solid var(--shadow-color); [/class] [class=header] position: absolute; width: auto; height: auto; font-size: 35px; font-weight: 700; line-height: 35px; letter-spacing: 10px; text-align: right; color: var(--accent-color1); text-shadow: 3px 3px 0px var(--shadow-color); text-transform: uppercase; [/class] [class=tab] position: absolute; width: 15px; height: 15px; background-color: var(--accent-color2); color: var(--shadow-color); font-size: 8px; text-align: center; line-height: 15px; border-radius: 5%; transition-duration: 0.3s; box-shadow: 3px 3px 0px var(--shadow-color); [/class] [class name=tab state=hover] background-color: var(--accent-color1); color: var(--shadow-color); transition-duration: 0.3s; box-shadow: 2px 2px 0px var(--shadow-color); [/class] [class=textcontainer] position: absolute; background-color: var(--shadow-color); overflow: hidden; box-shadow: 10px 10px 0px var(--accent-color2); transition-duration: 0.3s; [/class] [class name=textcontainer state=hover] box-shadow: 10px 10px 0px var(--accent-color1); transition-duration: 0.3s; [/class] [class=text] position: relative; padding: 10px 20px 5px 10px; overflow: auto; color: var(--text-color); font-size: 10px; line-height: 11px; white-space: pre-wrap; text-align: justify; text-transform: lowercase; [/class] [class=gallery] position: relative; left: 0%; overflow: hidden; width: 100%; height: 700px; display: flex; flex-direction: row; justify-content: space-evenly; [/class] [class=column] width: 45%; height: 150px; margin-left: 5px; [/class] [class=galpic] width: 95%; height: 100%; background-position: 0% 0%; margin-bottom: 5px; [/class] [class=tag] position: relative; overflow: visible; display: inline; width: auto; height: auto; font-size: 9px; text-align: center; margin-right: 5px; padding: 1px 3px 1px 3px; text-transform: uppercase; background-color: var(--accent-color1); box-shadow: 2px 2px 0px var(--accent-color2); color: var(--shadow-color); font-weight: 400; [/class] [class=credit] position: relative; overflow: hidden; width: 100%; height: 10px; text-align: center; font-style: normal; font-weight: normal; font-size: 8px; color: #dedede; opacity: 0.25; [/class] [class=hidden] display: none; [/class] [script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} 1) (fadeIn 400 tabsContent1) if (eq ${currentTab} 2) (fadeIn 400 tabsContent2) if (eq ${currentTab} 3) (fadeIn 400 tabsContent3) if (eq ${currentTab} 4) (fadeIn 400 tabsContent4) if (eq ${currentTab} 5) (fadeIn 400 tabsContent5) [/script] [div class=bkgd] [div class="pic1 tabsContent tabsContent1"][/div] [div class="header tabsContent tabsContent1" style="left: 85px; top: 250px;"]long
flight[/div] [div class="pic2 tabsContent tabsContent2 hidden"][/div] [div class="header tabsContent tabsContent2 hidden" style="left: 360px; top: 30px; text-align: left; font-size: 30px; line-height: 35px;"]pro
file[/div] [div class="textcontainer tabsContent tabsContent2 hidden" style="width: 250px; height: 160px; left: 60px; top: 200px;"][div class=text style="width: 245px; height: 135px;"][div class=tag]name[/div] lee taeyong [div class=tag]nickname[/div] ty track, tyong [div class=tag]age[/div] 24 [div class=tag]gender[/div] male [div class=tag]sexuality[/div] heterosexual [div class=tag]role[/div] leader [div class=tag]hair color[/div] it changes every month [div class=tag]eye color[/div] dark brown [div class=tag]height[/div] 5' 9" [div class=tag]weight[/div] 128 lbs [div class=tag]body mods[/div] several ear piercings [div class=tag]distinguishing features[/div] very large eyes [/div][/div] [div class="pic3 tabsContent tabsContent3 hidden"][/div] [div class="header tabsContent tabsContent3 hidden" style="left: 80px; top: 295px; text-align: left; font-size: 30px; line-height: 32px;"]per
sona[/div] [div class="textcontainer tabsContent tabsContent3 hidden" style="width: 200px; height: 280px; left: 250px; top: 80px;"][div class=text style="width: 195px; height: 260px;"][div class=tag]vices[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi scelerisque eu ultrices vitae auctor eu augue. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra. [div class=tag]virtues[/div] Duis convallis convallis tellus id interdum velit laoreet id. Massa vitae tortor condimentum lacinia quis vel eros. Odio ut enim blandit volutpat maecenas volutpat blandit. Nec ultrices dui sapien eget mi proin. Ac auctor augue mauris augue neque gravida in. Duis convallis convallis tellus id interdum. Mauris cursus mattis molestie a iaculis at erat. Iaculis nunc sed augue lacus viverra vitae congue eu. [div class=tag]likes[/div] Cras fermentum odio eu feugiat pretium nibh ipsum consequat. Sollicitudin ac orci phasellus egestas. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Etiam erat velit scelerisque in dictum non consectetur a erat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Aliquet lectus proin nibh nisl condimentum id. Ipsum consequat nisl vel pretium lectus. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Euismod in pellentesque massa placerat duis. At quis risus sed vulputate odio ut. Suspendisse interdum consectetur libero id. [div class=tag]dislikes[/div] Sem viverra aliquet eget sit amet tellus. Dis parturient montes nascetur ridiculus mus mauris vitae. Habitant morbi tristique senectus et netus et. Sed euismod nisi porta lorem mollis aliquam ut porttitor. Eget duis at tellus at urna condimentum mattis pellentesque. Lectus mauris ultrices eros in cursus turpis massa tincidunt dui. Leo in vitae turpis massa sed. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. [div class=tag]fears[/div] Integer feugiat scelerisque varius morbi. Duis ut diam quam nulla porttitor massa id. Donec ac odio tempor orci dapibus. Posuere morbi leo urna molestie at elementum. Felis eget nunc lobortis mattis aliquam faucibus purus. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper. Egestas maecenas pharetra convallis posuere morbi. Amet risus nullam eget felis eget. Eget gravida cum sociis natoque. [div class=tag]hobbies[/div] Purus sit amet volutpat consequat mauris nunc. Cursus mattis molestie a iaculis at erat. Sed faucibus turpis in eu mi. Sed arcu non odio euismod lacinia at quis risus sed. Sit amet facilisis magna etiam. Magna etiam tempor orci eu. Ullamcorper velit sed ullamcorper morbi tincidunt ornare. Eget nullam non nisi est sit. Vitae et leo duis ut diam quam. [/div][/div] [div class="pic4 tabsContent tabsContent4 hidden"][/div] [div class="header tabsContent tabsContent4 hidden" style="left: 130px; top: 30px; text-align: left; font-size: 30px; line-height: 32px;"]bio
gra
phy[/div] [div class="textcontainer tabsContent tabsContent4 hidden" style="width: 300px; height: 200px; left: 80px; top: 150px;"][div class=text style="width: 295px; height: 180px;"][div class=tag]residence[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [div class=tag]family[/div] Nisi scelerisque eu ultrices vitae auctor eu augue. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra. Leo vel orci porta non pulvinar neque laoreet suspendisse interdum. [div class=tag]pets[/div] Id velit ut tortor pretium viverra suspendisse. Lacus vestibulum sed arcu non odio. Duis convallis convallis tellus id interdum velit laoreet id. [div class=tag]education[/div] Massa vitae tortor condimentum lacinia quis vel eros. Odio ut enim blandit volutpat maecenas volutpat blandit. Nec ultrices dui sapien eget mi proin. Ac auctor augue mauris augue neque gravida in. [div class=tag]occupation[/div] Duis convallis convallis tellus id interdum. Mauris cursus mattis molestie a iaculis at erat. Iaculis nunc sed augue lacus viverra vitae congue eu. [div class=tag]history[/div] Cras fermentum odio eu feugiat pretium nibh ipsum consequat. Sollicitudin ac orci phasellus egestas. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Etiam erat velit scelerisque in dictum non consectetur a erat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Aliquet lectus proin nibh nisl condimentum id. Ipsum consequat nisl vel pretium lectus. Bibendum enim facilisis gravida neque convallis a cras semper auctor. Euismod in pellentesque massa placerat duis. At quis risus sed vulputate odio ut. Suspendisse interdum consectetur libero id. Sem viverra aliquet eget sit amet tellus. Dis parturient montes nascetur ridiculus mus mauris vitae. Habitant morbi tristique senectus et netus et. Sed euismod nisi porta lorem mollis aliquam ut porttitor. Eget duis at tellus at urna condimentum mattis pellentesque. Lectus mauris ultrices eros in cursus turpis massa tincidunt dui. Leo in vitae turpis massa sed. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Eu sem integer vitae justo eget magna fermentum iaculis. Non tellus orci ac auctor augue mauris augue neque gravida. Sed euismod nisi porta lorem mollis aliquam ut. Lacus sed turpis tincidunt id aliquet. Pulvinar pellentesque habitant morbi tristique senectus et netus et. Ut etiam sit amet nisl purus in mollis. Felis donec et odio pellentesque diam. Eu scelerisque felis imperdiet proin fermentum leo. Urna et pharetra pharetra massa massa ultricies mi. Ut tortor pretium viverra suspendisse. Ut tellus elementum sagittis vitae et leo duis ut. [/div][/div] [div class="pic5 tabsContent tabsContent5 hidden"][/div] [div class="header tabsContent tabsContent5 hidden" style="left: 200px; top: 270px; text-align: left; font-size: 30px; line-height: 32px;"]misc. &
gallery[/div] [div class="textcontainer tabsContent tabsContent5 hidden" style="width: 280px; height: 220px; left: 180px; top: 30px;"][div class=text style="width: 275px; height: 195px;"][div class=tag]theme song[/div] long flight by lee taeyong [div class=tag]enneagram type[/div] 5 [div class=tag]mbti type[/div] infj [div class=tag]attire[/div] x x x [div class=tag]gallery[/div] ↓ [div class=gallery] [div class=column] [div class=galpic style="background: url(https://i.pinimg.com/474x/6c/1c/c5/6c1cc5e5b24ce8a8044218288f2fa69b.jpg); background-size: 120%; background-position: 50% 50%;"][/div] [div class=galpic style="background: url(https://i.pinimg.com/originals/8a/5f/1b/8a5f1b9b08bc1022f533fecc552c91bd.gif); background-size: 100%; background-position: 30% 30%;"][/div] [div class=galpic style="background: url(https://i.pinimg.com/474x/8e/5b/c8/8e5bc85b9641c708d93f5bfe8096dbb9.jpg); background-size: 110%; background-position: 50% 0%;"][/div] [div class=galpic style="background: url(https://i.pinimg.com/originals/26/eb/73/26eb73ea30023fb13c59a84a0e79695b.gif); background-size: 100%; background-position: 0% 0%;""][/div] [/div] [div class=column] [div class=galpic style="background: url(https://i.pinimg.com/originals/3b/2a/2d/3b2a2d0f34f19a1b7c58ee72342aee9e.gif); background-size: 100%; background-position: 45% 50%;"][/div] [div class=galpic style="background: url(https://i.pinimg.com/474x/0d/6b/72/0d6b721bbae7c200f44ed414e79141cc.jpg); background-size: 100%; background-position: 50% 20%;"][/div] [div class=galpic style="background: url(https://i.pinimg.com/originals/e1/ca/10/e1ca103bbb2ca5d73b495d42e4917729.gif); background-size: 120%; background-position: 50%; 0%;"][/div] [div class=galpic style="background: url(https://i.pinimg.com/474x/db/19/34/db1934c84e45d61f7ed070bdbb154a51.jpg); background-size: 100%; background-position: 0% 0%;"][/div] [/div] [/div] [/div][/div] [div class=tab style="top: 30px; left: 30px;"]1[/div] [div class=tab style="top: 50px; left: 30px;"]2[/div] [div class=tab style="top: 70px; left: 30px;"]3[/div] [div class=tab style="top: 90px; left: 30px;"]4[/div] [div class=tab style="top: 110px; left: 30px;"]5[/div] [/div][div class=credit]code by sox sox [/div]
pastebin: xxx​
 
DREAM IN A DREAM - MOBILE FRIENDLY

tis a dumb lil self-indulgent code because i have a dangerous obsession with this man uwu anyways here's an awfully coded placeholder code that has a hover for a second pic. the text can't get any longer than it is in the example here without it wrapping and looking w e i r d so try and limit ur character count in the name l o l sry bout that. please do not remove the credit! enjoy and lmk if u have any requests! c:

[class=container] --main-color: #fff9e8; --shadow-color: #540c24; margin-left: auto; margin-right: auto; margin-bottom: 5px; overflow: visible; width: 350px; height: 380px; position: relative; [/class] [class=image] position: absolute; left: 8%; width: 280px; height: 360px; background: url(https://i.pinimg.com/564x/25/57/a7/2557a7d83d61c3e03c6e31f3ddf28fd3.jpg); background-size: 100%; background-position: 0% 0%; border-radius: 100%; border: 10px solid var(--main-color); transition-duration: 0.2s; [/class] [class name=image state=hover] background: url(https://i.pinimg.com/564x/2c/ec/81/2cec818bbbb74213c3ec7d76dc8fd3ef.jpg); background-size: 100%; background-position: 0% 0%; transition-duration: 0.2s; [/class] [class=name] position: absolute; width: 100%; top: 3%; left: 0%; margin-left: auto; margin-right: auto; color: var(--main-color); font-size: 55px; line-height: 30px; text-align: center; font-weight: 600; transform: rotate(-8deg); text-shadow: 3px 3px 0px var(--shadow-color); [/class] [class=role] position: absolute; width: 100%; top: 10%; left: 0%; margin-left: auto; margin-right: auto; color: var(--main-color); font-size: 20px; line-height: 60px; text-align: center; font-weight: 600; transform: rotate(-8deg); text-shadow: 3px 3px 0px var(--shadow-color); [/class] [class=credit] position: relative; overflow: hidden; width: 100%; height: 10px; text-align: center; font-style: normal; font-weight: normal; font-size: 5px; color: #dedede; opacity: 0.2; [/class] [div class=container] [div class=image][/div] [div class=name]dream in a dream[/div] [div class=role]role: the prince[/div] [/div][div class=credit]code by sox sox [/div]
Code: 
[nobr]
[class=container]
   --main-color: #fff9e8;
   --shadow-color: #540c24;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 5px;
   overflow: visible;
   width: 350px;
   height: 380px;
   position: relative;
[/class]
[class=image]
   position: absolute;
   left: 8%;
   width: 280px;
   height: 360px;
   background: url(https://i.pinimg.com/564x/25/57/a7/2557a7d83d61c3e03c6e31f3ddf28fd3.jpg);
   background-size: 100%;
   background-position: 0% 0%;
   border-radius: 100%;
   border: 10px solid var(--main-color);
   transition-duration: 0.2s;
[/class]
[class name=image state=hover]
   background: url(https://i.pinimg.com/564x/2c/ec/81/2cec818bbbb74213c3ec7d76dc8fd3ef.jpg);
   background-size: 100%;
   background-position: 0% 0%;
   transition-duration: 0.2s;
[/class]
[class=name]
   position: absolute;
   width: 100%;
   top: 3%;
   left: 0%;
   margin-left: auto;
   margin-right: auto;
   color: var(--main-color);
   font-size: 55px;
   line-height: 30px;
   text-align: center;
   font-weight: 600;
   transform: rotate(-8deg);
   text-shadow: 3px 3px 0px var(--shadow-color);
[/class]
[class=role]
   position: absolute;
   width: 100%;
   top: 10%;
   left: 0%;
   margin-left: auto;
   margin-right: auto;
   color: var(--main-color);
   font-size: 20px;
   line-height: 60px;
   text-align: center;
   font-weight: 600;
   transform: rotate(-8deg);
   text-shadow: 3px 3px 0px var(--shadow-color);
[/class]
[class=credit]
   position: relative;
   overflow: hidden;
   width: 100%;
   height: 10px;
   text-align: center;
   font-style: normal;
   font-weight: normal;
   font-size: 5px;
   color: #dedede;
   opacity: 0.2;
[/class]

[div class=container]
[div class=image][/div]
[div class=name][font=Arizonia]dream in a dream[/font][/div]
[div class=role][font=Arizonia]role: the prince[/font][/div]
[/div][div class=credit]code by [USER=2383][COLOR=#dedede]sox[/COLOR][/USER][/div]
[/nobr]
 
In my dream(nightmare) you and I are slow dancing to Adore You by Harry Styles since you forced me to play it ​
 
STRAWBERRY MILK - MOBILE FRIENDLY

it's been a while!! i made this code for the beautiful cute lovely Stardust Galaxy Stardust Galaxy because she deserves good things. the home page slides to the left, the inside pic hovers, and the text all scrolls. i rly like this code tbh so i hope you all do too! everyone say thank u to bb mel. please do not remove the credit! enjoy and lmk if u have any requests! c:

[class=bkgd] --highlight: #fff; --lowlight: #4A3F3D; --color1: #DEDEDE; --color2: #CCB7A6; --color3: #7F3B54; --color4: #A67F80; --color5: #9CA68E; position: relative; margin-left: auto; margin-right: auto; margin-bottom: 4px; width: 500px; height: 350px; background-color: var(--color2); overflow: hidden; border-radius: 10px; box-shadow: 5px 5px 0px var(--color3); cursor: url('https://i.imgur.com/FMvuswx.png'), auto; [/class] [class=splash] position: absolute; width: 100%; height: 100%; background-color: var(--color5); [/class] [class=splashpic] position: absolute; width: 200px; height: 200px; top: 65px; left: 150px; background: url(https://i.pinimg.com/564x/c0/d2/bc/c0d2bcb6762ebf6335c9cbc714085a33.jpg); background-size: 100%; background-position: 50% 50%; border-radius: 10px; [/class] [class=splashpicshadow] position: absolute; width: 195px; height: 195px; top: 75px; left: 160px; border: 5px solid var(--color1); border-radius: 10px; [/class] [class=splashname] position: absolute; width: 100%; height: auto; top: 35px; padding-left: 80px; text-align: left; font-size: 30px; color: var(--highlight); text-shadow: 3px 3px 0px var(--color4); font-weight: 700; font-style: italic; text-transform: lowercase; [/class] [class=splashrole] position: absolute; width: 85%; height: auto; top: 250px; text-align: right; font-size: 27px; color: var(--lowlight); text-shadow: 3px 3px 0px var(--color1); font-weight: 700; font-style: italic; text-transform: lowercase; [/class] [class=pic] position: absolute; width: 150px; height: 150px; top: 25px; left: 30px; background: url(https://i.pinimg.com/564x/b8/38/d3/b838d3be80cf9b6ddfcd2f665099133f.jpg); background-size: 100%; background-position: 50% 50%; border-radius: 10px; transition-duration: 0.3s; [/class] [class name=pic state=hover] background: url(https://i.pinimg.com/474x/4c/b1/00/4cb100f3ad424d3abafb7efa6cb54736.jpg); background-size: 100%; background-position: 100% 60%; transition-duration: 0.3s; [/class] [class=picshadow] position: absolute; width: 145px; height: 145px; top: 30px; left: 35px; border: 4px solid var(--color1); border-radius: 10px; [/class] [class=name] position: absolute; width: 150px; height: auto; top: 190px; left: 30px; text-align: center; font-size: 20px; line-height: 20px; color: var(--highlight); text-shadow: 3px 3px 0px var(--color4); font-weight: 700; font-style: italic; text-transform: lowercase; [/class] [class=tab] position: absolute; width: 130px; height: 16px; background: var(--color5); border-radius: 5px; transition-duration: 0.3s; color: var(--highlight); font-size: 12px; line-height: 16px; font-weight: 700; text-transform: lowercase; text-align: center; font-style: italic; box-shadow: 2px 2px 0px var(--color1); [/class] [class name=tab state=hover] background: var(--color3); transition-duration: 0.3s; [/class] [class=textcontainer] position: absolute; width: 300px; height: 300px; left: 220px; top: 30px; overflow: hidden; [/class] [class=text] position: relative; width: 260px; height: 100%; overflow: auto; color: var(--lowlight); font-size: 10px; line-height: 12px; text-align: justify; padding-right: 100px; white-space: pre-wrap; padding-top: 2px; [/class] [class=tag] position: relative; overflow: visible; display: inline; width: auto; height: auto; font-size: 9px; text-align: center; margin-right: 5px; padding: 1px 3px 1px 3px; text-transform: lowercase; border: 2px solid var(--color1); border-radius: 3px; color: var(--color3); font-weight: 700; letter-spacing: 0px; [/class] [class=credit] position: relative; overflow: hidden; width: 100%; height: 10px; text-align: center; font-style: normal; font-weight: normal; font-size: 8px; color: #dedede; opacity: 0.2; [/class] [script class=button on=click] addClass slideleft splash [/script] [class=slideleft] animation-name: {post_id}sleft; animation-duration: 1.7s; animation-fill-mode: forwards; [/class] [animation=sleft] [keyframe=0]transform: translateX(0%);[/keyframe] [keyframe=100]transform: translateX(-100%);visibility:hidden;[/keyframe] [/animation] [script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} basics) (fadeIn 400 tabsContent1) if (eq ${currentTab} persona) (fadeIn 400 tabsContent2) if (eq ${currentTab} backstory) (fadeIn 400 tabsContent3) if (eq ${currentTab} extras) (fadeIn 400 tabsContent4) [/script] [class=hidden] display:none; [/class] [div class=bkgd] [div class=picshadow][/div] [div class=pic][/div] [div class=name]it's strawberry milk baby.[/div] [div class=tab style="top: 245px; left: 40px;"]basics[/div] [div class=tab style="top: 267px; left: 40px;"]persona[/div] [div class=tab style="top: 289px; left: 40px;"]backstory[/div] [div class=tab style="top: 311px; left: 40px;"]extras[/div] [div class="textcontainer tabsContent tabsContent1"][div class=text][div class=tag]name[/div] phat babie [div class=tag]age[/div] 21 [div class=tag]gender[/div] female [div class=tag]sexuality[/div] heterosexual [div class=tag]d.o.b[/div] march 28 [div class=tag]hometown[/div] kyoto [div class=tag]role[/div] last sip thief [div class=tag]faceclaim[/div] a literal jar of milk [div class=tag]hair color[/div] pink [div class=tag]eye color[/div] red [div class=tag]height/weight[/div] 9 in. / 1 lb. [div class=tag]body type[/div] mesomorph [div class=tag]dist. features[/div] made of clear glass, aesthetically pleasing to look at, can't see or hear or talk to you because she's a literal jar of milk. [div class=tag]body mods[/div] she has a nice metal cap that screws off in order to access the milk. also she's $3 at the local fresh market. [div class=tag]ailments[/div] she's horribly apathetic, has no soul. [/div][/div] [div class="textcontainer tabsContent tabsContent2 hidden"][div class=text][div class=tag]vices[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Proin nibh nisl condimentum id venenatis. Erat nam at lectus urna duis. Sit amet aliquam id diam maecenas ultricies mi eget mauris. Neque vitae tempus quam pellentesque. [div class=tag]virtues[/div] Convallis tellus id interdum velit laoreet. Volutpat lacus laoreet non curabitur gravida arcu ac. Feugiat nibh sed pulvinar proin. Viverra justo nec ultrices dui. Amet luctus venenatis lectus magna fringilla urna. Augue neque gravida in fermentum et. Arcu bibendum at varius vel pharetra vel turpis nunc eget. Ut diam quam nulla porttitor massa id. Enim blandit volutpat maecenas volutpat blandit aliquam etiam. [div class=tag]likes[/div] Risus nec feugiat in fermentum posuere urna nec. Cursus sit amet dictum sit amet. Non tellus orci ac auctor augue mauris augue neque. Habitant morbi tristique senectus et. At quis risus sed vulputate odio ut. [div class=tag]dislikes[/div] Condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus. Iaculis at erat pellentesque adipiscing commodo. Aenean pharetra magna ac placerat vestibulum lectus. [div class=tag]fears[/div] Dui id ornare arcu odio ut sem nulla pharetra diam. Blandit aliquam etiam erat velit scelerisque. Netus et malesuada fames ac turpis. Aliquam etiam erat velit scelerisque. [div class=tag]habits/quirks[/div] Dictum non consectetur a erat nam at lectus urna duis. Id donec ultrices tincidunt arcu non sodales neque sodales ut. Ac orci phasellus egestas tellus rutrum tellus pellentesque. A pellentesque sit amet porttitor eget dolor morbi non. [/div][/div] [div class="textcontainer tabsContent tabsContent3 hidden"][div class=text][div class=tag]occupation[/div] Neque vitae turpis tempus quam pellentesque. [div class=tag]residence[/div] Convallis tellus id interdum velit laoreet. Volutpat lacus laoreet non curabitur gravida arcu ac. Feugiat nibh sed pulvinar proin. Viverra justo nec ultrices dui. [div class=tag]family[/div] Cursus sit amet dictum sit amet. Non tellus orci ac auctor augue mauris augue neque. Habitant morbi tristique senectus et. At quis risus sed vulputate odio ut. [div class=tag]history[/div] Condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus. Iaculis at erat pellentesque adipiscing commodo. Aenean pharetra magna ac placerat vestibulum lectus. Dui id ornare arcu odio ut sem nulla pharetra diam. Blandit aliquam etiam erat velit scelerisque. Netus et malesuada fames ac turpis. Aliquam etiam erat velit scelerisque. Dictum non consectetur a erat nam at lectus urna duis. Id donec ultrices tincidunt arcu non sodales neque sodales ut. Ac orci phasellus egestas tellus rutrum tellus pellentesque. A pellentesque sit amet porttitor eget dolor morbi non. Molestie nunc non blandit massa enim. Leo integer malesuada nunc vel risus commodo. Id diam maecenas ultricies mi eget mauris pharetra et ultrices. Sem integer vitae justo eget magna fermentum iaculis. Nisl vel pretium lectus quam id leo. Dolor magna eget est lorem ipsum. Duis ut diam quam nulla. Consequat nisl vel pretium lectus quam id leo in. Nec sagittis aliquam malesuada bibendum arcu vitae. Orci a scelerisque purus semper eget duis at tellus. Cum sociis natoque penatibus et magnis dis parturient. Nullam non nisi est sit amet facilisis magna etiam. [div class=tag]relationships[/div]
  • one: Mi bibendum neque egestas congue. Molestie nunc non blandit massa enim nec dui. Velit ut tortor pretium viverra.
  • two: Mi bibendum neque egestas congue. Molestie nunc non blandit massa enim nec dui. Velit ut tortor pretium viverra.
  • three: Mi bibendum neque egestas congue. Molestie nunc non blandit massa enim nec dui. Velit ut tortor pretium viverra.
  • four: Mi bibendum neque egestas congue. Molestie nunc non blandit massa enim nec dui. Velit ut tortor pretium viverra.
[/div][/div] [div class="textcontainer tabsContent tabsContent4 hidden"][div class=text][div class=tag]theme song[/div] Neque vitae turpis tempus quam pellentesque. [div class=tag]favorite food[/div] Convallis tellus id interdum velit laoreet. Volutpat lacus laoreet non curabitur gravida arcu ac. Feugiat nibh sed pulvinar proin. Viverra justo nec ultrices dui. [div class=tag]hidden talents[/div] Convallis tellus id interdum velit laoreet. Volutpat lacus laoreet non curabitur gravida arcu ac. Feugiat nibh sed pulvinar proin. Viverra justo nec ultrices dui. [div class=tag]misc. info[/div] Cursus sit amet dictum sit amet. Non tellus orci ac auctor augue mauris augue neque. Habitant morbi tristique senectus et. At quis risus sed vulputate odio ut. [div class=tag style="display: block;"]gallery[/div]
cf6e3814fd193f8536bf9364f76784bc.jpg
eeab4ab10a365e6e18d62b9f5e6dd707.jpg
572ec19cc3b3e4c0b1df409dd1847ecf.jpg
59ae517fe1badd8fa2ba909b199b01bf.jpg
a156fc9e3005b01f07e8121952f8194b.jpg
[/div][/div] [div class="splash button"] [div class=splashpicshadow][/div] [div class=splashpic][/div] [div class=splashname]strawberry milk[/div] [div class=splashrole]the last sip[/div] [/div] [/div] [div class=credit]code by sox sox [/div]
pastebin: xxx​
 
Last edited:
sox said:
STRAWBERRY MILK - MOBILE FRIENDLY

it's been a while!! i made this code for the beautiful cute lovely Stardust Galaxy Stardust Galaxy because she deserves good things. the home page slides to the left, the inside pic hovers, and the text all scrolls. i rly like this code tbh so i hope you all do too! everyone say thank u to bb mel. please do not remove the credit! enjoy and lmk if u have any requests! c:

[class=bkgd] --highlight: #fff; --lowlight: #4A3F3D; --color1: #DEDEDE; --color2: #CCB7A6; --color3: #7F3B54; --color4: #A67F80; --color5: #9CA68E; position: relative; margin-left: auto; margin-right: auto; margin-bottom: 4px; width: 500px; height: 350px; background-color: var(--color2); overflow: hidden; border-radius: 10px; box-shadow: 5px 5px 0px var(--color3); [/class] [class=splash] position: absolute; width: 100%; height: 100%; background-color: var(--color5); [/class] [class=splashpic] position: absolute; width: 200px; height: 200px; top: 65px; left: 150px; background: url(https://i.pinimg.com/564x/c0/d2/bc/c0d2bcb6762ebf6335c9cbc714085a33.jpg); background-size: 100%; background-position: 50% 50%; border-radius: 10px; [/class] [class=splashpicshadow] position: absolute; width: 195px; height: 195px; top: 75px; left: 160px; border: 5px solid var(--color1); border-radius: 10px; [/class] [class=splashname] position: absolute; width: 100%; height: auto; top: 35px; padding-left: 80px; text-align: left; font-size: 30px; color: var(--highlight); text-shadow: 3px 3px 0px var(--color4); font-weight: 700; font-style: italic; text-transform: lowercase; [/class] [class=splashrole] position: absolute; width: 85%; height: auto; top: 250px; text-align: right; font-size: 27px; color: var(--lowlight); text-shadow: 3px 3px 0px var(--color1); font-weight: 700; font-style: italic; text-transform: lowercase; [/class] [class=pic] position: absolute; width: 150px; height: 150px; top: 25px; left: 30px; background: url(https://i.pinimg.com/564x/b8/38/d3/b838d3be80cf9b6ddfcd2f665099133f.jpg); background-size: 100%; background-position: 50% 50%; border-radius: 10px; transition-duration: 0.3s; [/class] [class name=pic state=hover] background: url(https://i.pinimg.com/474x/4c/b1/00/4cb100f3ad424d3abafb7efa6cb54736.jpg); background-size: 100%; background-position: 100% 60%; transition-duration: 0.3s; [/class] [class=picshadow] position: absolute; width: 145px; height: 145px; top: 30px; left: 35px; border: 4px solid var(--color1); border-radius: 10px; [/class] [class=name] position: absolute; width: 150px; height: auto; top: 190px; left: 30px; text-align: center; font-size: 20px; line-height: 20px; color: var(--highlight); text-shadow: 3px 3px 0px var(--color4); font-weight: 700; font-style: italic; text-transform: lowercase; [/class] [class=tab] position: absolute; width: 130px; height: 16px; background: var(--color5); border-radius: 5px; transition-duration: 0.3s; color: var(--highlight); font-size: 12px; line-height: 16px; font-weight: 700; text-transform: lowercase; text-align: center; font-style: italic; box-shadow: 2px 2px 0px var(--color1); [/class] [class name=tab state=hover] background: var(--color3); transition-duration: 0.3s; [/class] [class=textcontainer] position: absolute; width: 300px; height: 300px; left: 220px; top: 30px; overflow: hidden; [/class] [class=text] position: relative; width: 260px; height: 100%; overflow: auto; color: var(--lowlight); font-size: 10px; line-height: 12px; text-align: justify; padding-right: 100px; white-space: pre-wrap; padding-top: 2px; [/class] [class=tag] position: relative; overflow: visible; display: inline; width: auto; height: auto; font-size: 9px; text-align: center; margin-right: 5px; padding: 1px 3px 1px 3px; text-transform: lowercase; border: 2px solid var(--color1); border-radius: 3px; color: var(--color3); font-weight: 700; letter-spacing: 0px; [/class] [class=credit] position: relative; overflow: hidden; width: 100%; height: 10px; text-align: center; font-style: normal; font-weight: normal; font-size: 8px; color: #dedede; opacity: 0.2; [/class] [script class=button on=click] addClass slideleft splash [/script] [class=slideleft] animation-name: {post_id}sleft; animation-duration: 1.7s; animation-fill-mode: forwards; [/class] [animation=sleft] [keyframe=0]transform: translateX(0%);[/keyframe] [keyframe=100]transform: translateX(-100%);visibility:hidden;[/keyframe] [/animation] [script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} basics) (fadeIn 400 tabsContent1) if (eq ${currentTab} persona) (fadeIn 400 tabsContent2) if (eq ${currentTab} backstory) (fadeIn 400 tabsContent3) if (eq ${currentTab} extras) (fadeIn 400 tabsContent4) [/script] [class=hidden] display:none; [/class] [div class=bkgd] [div class=picshadow][/div] [div class=pic][/div] [div class=name]it's strawberry milk baby.[/div] [div class=tab style="top: 245px; left: 40px;"]basics[/div] [div class=tab style="top: 267px; left: 40px;"]persona[/div] [div class=tab style="top: 289px; left: 40px;"]backstory[/div] [div class=tab style="top: 311px; left: 40px;"]extras[/div] [div class="textcontainer tabsContent tabsContent1"][div class=text][div class=tag]name[/div] phat babie [div class=tag]age[/div] 21 [div class=tag]gender[/div] female [div class=tag]sexuality[/div] heterosexual [div class=tag]d.o.b[/div] march 28 [div class=tag]hometown[/div] kyoto [div class=tag]role[/div] last sip thief [div class=tag]faceclaim[/div] a literal jar of milk [div class=tag]hair color[/div] pink [div class=tag]eye color[/div] red [div class=tag]height/weight[/div] 9 in. / 1 lb. [div class=tag]body type[/div] mesomorph [div class=tag]dist. features[/div] made of clear glass, aesthetically pleasing to look at, can't see or hear or talk to you because she's a literal jar of milk. [div class=tag]body mods[/div] she has a nice metal cap that screws off in order to access the milk. also she's $3 at the local fresh market. [div class=tag]ailments[/div] she's horribly apathetic, has no soul. [/div][/div] [div class="textcontainer tabsContent tabsContent2 hidden"][div class=text][div class=tag]vices[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Proin nibh nisl condimentum id venenatis. Erat nam at lectus urna duis. Sit amet aliquam id diam maecenas ultricies mi eget mauris. Neque vitae tempus quam pellentesque. [div class=tag]virtues[/div] Convallis tellus id interdum velit laoreet. Volutpat lacus laoreet non curabitur gravida arcu ac. Feugiat nibh sed pulvinar proin. Viverra justo nec ultrices dui. Amet luctus venenatis lectus magna fringilla urna. Augue neque gravida in fermentum et. Arcu bibendum at varius vel pharetra vel turpis nunc eget. Ut diam quam nulla porttitor massa id. Enim blandit volutpat maecenas volutpat blandit aliquam etiam. [div class=tag]likes[/div] Risus nec feugiat in fermentum posuere urna nec. Cursus sit amet dictum sit amet. Non tellus orci ac auctor augue mauris augue neque. Habitant morbi tristique senectus et. At quis risus sed vulputate odio ut. [div class=tag]dislikes[/div] Condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus. Iaculis at erat pellentesque adipiscing commodo. Aenean pharetra magna ac placerat vestibulum lectus. [div class=tag]fears[/div] Dui id ornare arcu odio ut sem nulla pharetra diam. Blandit aliquam etiam erat velit scelerisque. Netus et malesuada fames ac turpis. Aliquam etiam erat velit scelerisque. [div class=tag]habits/quirks[/div] Dictum non consectetur a erat nam at lectus urna duis. Id donec ultrices tincidunt arcu non sodales neque sodales ut. Ac orci phasellus egestas tellus rutrum tellus pellentesque. A pellentesque sit amet porttitor eget dolor morbi non. [/div][/div] [div class="textcontainer tabsContent tabsContent3 hidden"][div class=text][div class=tag]occupation[/div] Neque vitae turpis tempus quam pellentesque. [div class=tag]residence[/div] Convallis tellus id interdum velit laoreet. Volutpat lacus laoreet non curabitur gravida arcu ac. Feugiat nibh sed pulvinar proin. Viverra justo nec ultrices dui. [div class=tag]family[/div] Cursus sit amet dictum sit amet. Non tellus orci ac auctor augue mauris augue neque. Habitant morbi tristique senectus et. At quis risus sed vulputate odio ut. [div class=tag]history[/div] Condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus. Iaculis at erat pellentesque adipiscing commodo. Aenean pharetra magna ac placerat vestibulum lectus. Dui id ornare arcu odio ut sem nulla pharetra diam. Blandit aliquam etiam erat velit scelerisque. Netus et malesuada fames ac turpis. Aliquam etiam erat velit scelerisque. Dictum non consectetur a erat nam at lectus urna duis. Id donec ultrices tincidunt arcu non sodales neque sodales ut. Ac orci phasellus egestas tellus rutrum tellus pellentesque. A pellentesque sit amet porttitor eget dolor morbi non. Molestie nunc non blandit massa enim. Leo integer malesuada nunc vel risus commodo. Id diam maecenas ultricies mi eget mauris pharetra et ultrices. Sem integer vitae justo eget magna fermentum iaculis. Nisl vel pretium lectus quam id leo. Dolor magna eget est lorem ipsum. Duis ut diam quam nulla. Consequat nisl vel pretium lectus quam id leo in. Nec sagittis aliquam malesuada bibendum arcu vitae. Orci a scelerisque purus semper eget duis at tellus. Cum sociis natoque penatibus et magnis dis parturient. Nullam non nisi est sit amet facilisis magna etiam. [div class=tag]relationships[/div]
  • one: Mi bibendum neque egestas congue. Molestie nunc non blandit massa enim nec dui. Velit ut tortor pretium viverra.
  • two: Mi bibendum neque egestas congue. Molestie nunc non blandit massa enim nec dui. Velit ut tortor pretium viverra.
  • three: Mi bibendum neque egestas congue. Molestie nunc non blandit massa enim nec dui. Velit ut tortor pretium viverra.
  • four: Mi bibendum neque egestas congue. Molestie nunc non blandit massa enim nec dui. Velit ut tortor pretium viverra.
[/div][/div] [div class="textcontainer tabsContent tabsContent4 hidden"][div class=text][div class=tag]theme song[/div] Neque vitae turpis tempus quam pellentesque. [div class=tag]favorite food[/div] Convallis tellus id interdum velit laoreet. Volutpat lacus laoreet non curabitur gravida arcu ac. Feugiat nibh sed pulvinar proin. Viverra justo nec ultrices dui. [div class=tag]hidden talents[/div] Convallis tellus id interdum velit laoreet. Volutpat lacus laoreet non curabitur gravida arcu ac. Feugiat nibh sed pulvinar proin. Viverra justo nec ultrices dui. [div class=tag]misc. info[/div] Cursus sit amet dictum sit amet. Non tellus orci ac auctor augue mauris augue neque. Habitant morbi tristique senectus et. At quis risus sed vulputate odio ut. [div class=tag style="display: block;"]gallery[/div]
cf6e3814fd193f8536bf9364f76784bc.jpg
eeab4ab10a365e6e18d62b9f5e6dd707.jpg
572ec19cc3b3e4c0b1df409dd1847ecf.jpg
59ae517fe1badd8fa2ba909b199b01bf.jpg
a156fc9e3005b01f07e8121952f8194b.jpg
[/div][/div] [div class="splash button"] [div class=splashpicshadow][/div] [div class=splashpic][/div] [div class=splashname]strawberry milk[/div] [div class=splashrole]the last sip[/div] [/div] [/div] [div class=credit]code by sox sox [/div]
pastebin: xxx​
Click to expand...

What did I do to deserve such a cute code from a queen? I'm not crying you are.
 
SNAKECHARMER - MOBILE FRIENDLY

just a tiny little placeholder code because im feelin inspired during quarantine c: i'm also going through a bit of a taemin love phase so i might make a couple more taemin codes lmaooo ANYWAYS no hovers or anything, just a basic name and pic placeholder c: please do not remove the credit! enjoy and lmk if u have any requests! c:

[class=bkgd] --box-color: #2b1b12; --border-color: #fbfacd; position: relative; margin-left: auto; margin-right: auto; width: 400px; height: 260px; overflow: visible; [/class] [class=box] position: absolute; width: 200px; height: 200px; background-color: var(--box-color); [/class] [class=border] border: 0.5px solid var(--border-color); [/class] [class=pic] background: url(https://i.pinimg.com/474x/00/39/de/0039dee7b4e9804103ae985971907cd9.jpg); background-size: 100%; [/class] [class=name] position: absolute; height: auto; width: auto; top: 150px; left: 150px; background-color: var(--box-color); color: var(--border-color); font-size: 15px; line-height: 20px; padding: 5px 10px 5px 10px; text-transform: uppercase; font-weight: 700; [/class] [class=credit] position: relative; overflow: hidden; width: 92%; height: 10px; text-align: center; font-style: normal; font-weight: normal; font-size: 5px; color: #dedede; opacity: 0.2; [/class] [div class=bkgd] [div class="box pic" style="top: 45px; left: 45px; box-shadow: 15px 15px 0px var(--border-color);"][/div] [div class="box border" style="top: 30px; left: 30px;"][/div] [div class="box border" style="top: 15px; left: 15px;"][/div] [div class="box pic" style="top: 0px; left: 0px;"][/div] [div class="name border"]the snakecharmer[/div] [/div] [div class=credit]code by sox sox [/div]
Code: 
[nobr]
[class=bkgd]
   --box-color: #2b1b12;
   --border-color: #fbfacd;
   position: relative;
   margin-left: auto;
   margin-right: auto;
   width: 400px;
   height: 260px;
   overflow: visible;
[/class]

[class=box]
   position: absolute;
   width: 200px;
   height: 200px;
   background-color: var(--box-color);
[/class]

[class=border]
   border: 0.5px solid var(--border-color);
[/class]

[class=pic]
   background: url(https://i.pinimg.com/474x/00/39/de/0039dee7b4e9804103ae985971907cd9.jpg);
   background-size: 100%;
[/class]

[class=name]
   position: absolute;
   height: auto;
   width: auto;
   top: 150px;
   left: 150px;
   background-color: var(--box-color); 
   color: var(--border-color);
   font-size: 15px;
   line-height: 20px;
   padding: 5px 10px 5px 10px;
   text-transform: uppercase;
   font-weight: 700;
[/class]

[class=credit]
   position: relative;
   overflow: hidden;
   width: 92%;
   height: 10px;
   text-align: center;
   font-style: normal;
   font-weight: normal;
   font-size: 5px;
   color: #dedede;
   opacity: 0.2;
[/class]

[div class=bkgd]
   [div class="box pic" style="top: 45px; left: 45px; box-shadow: 15px 15px 0px var(--border-color);"][/div]
   [div class="box border" style="top: 30px; left: 30px;"][/div]
   [div class="box border" style="top: 15px; left: 15px;"][/div]
   [div class="box pic" style="top: 0px; left: 0px;"][/div]
   [div class="name border"][font=Sen]the snakecharmer[/font][/div]
[/div]
[/nobr][div class=credit]code by [USER=2383][COLOR=#dedede]sox[/COLOR][/USER][/div]
 
u gotta make a minho code next sry i dont make the rules
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 3 (members: 0, guests: 3)

Similar threads

Lumpkinz11
Help SOLVED: ISO Simple BBCode Character Sheet
Replies
2
Views
250
Idea
Idea
BloopNoodle
Help Help resizing an image that just… won’t
Replies
6
Views
77
CloudySkyLoftyMoon
CloudySkyLoftyMoon
Noxxy
Help Bbcode tutor?
Replies
2
Views
132
Ness_eb
Ness_eb
BenjaminTD6
Help How do you roll dice?
Replies
1
Views
87
Idea
Idea
Back
Top