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

Resource β‹† sincerity ! πŸπ«πžπžπ›π’πžπ¬ ⋆ 2.0

pasta

sehun
sincerity ⋆
Rules.
FOLLOW

01 Keep credit
02 I don't mind if you disect the codes to learn how to code or how things are done. Feel free to ask questions if you have any.
03 My codes are nearly now entirely in bbcode+, however, my older ones are not.
04 I code solely on rpn. I don't use html converters or anything like that. I do know a bit of html thanks to bbcode's divs, but I have no use for it as of now.
Intro.
PASTA

I started coding in late 2016, and I made my first coding thread in 2017. These are freebies, and as long as your leave credit, they're free to use.
PRETTY DARK

A Layout Boutique
I used to take applications of few years back, but as of now I do not. I find them stressful to do, and I'd rather not, but maybe in the future. I'll open them back up again.
Applications.
NOT OPEN
 
Last edited:

pasta

sehun
NOT MOBILE FRIENDY
hover over images besides the top img. Scroll down for more info.







Oh 'Sehun'//

male
23

sexuality
23
south korean




Quote//


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. Nunc scelerisque eros mauris, ac tincidunt sem euismod at. Sed mollis sollicitudin enim, ut sollicitudin urna mollis et. Duis a risus quam. Mauris ultricies vehicula erat, eu tempus risus iaculis vitae. Fusce id eros in eros dapibus finibus. Sed vel imperdiet velit, ac auctor eros. Suspendisse potenti. Curabitur dapibus metus et tellus accumsan feugiat. Donec est velit, porttitor vitae dignissim at, sollicitudin ac diam. Pellentesque condimentum augue eu magna facilisis, a ultricies felis ornare. Phasellus sit amet neque nisl. Maecenas fringilla, lorem et pharetra efficitur, justo urna consectetur erat, et porta dui libero vel tortor. Praesent vehicula, ipsum euismod consequat aliquet, sapien purus dapibus urna, sit amet tempus libero arcu eu quam. Aliquam nec turpis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc porta mauris ex, non venenatis augue porta eu. Aliquam nibh sem, gravida non nulla nec, lacinia volutpat magna. Mauris semper massa eu turpis pulvinar semper.
2/2/18​




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. Nunc scelerisque eros mauris, ac tincidunt sem euismod at. Sed mollis sollicitudin enim, ut sollicitudin urna mollis et. Duis a risus quam. Mauris ultricies vehicula erat, eu tempus risus iaculis vitae. Fusce id eros in eros dapibus finibus. Sed vel imperdiet velit, ac auctor eros. Suspendisse potenti. Curabitur dapibus metus et tellus accumsan feugiat. Donec est velit, porttitor vitae dignissim at, sollicitudin ac diam. Pellentesque condimentum augue eu magna facilisis, a ultricies felis ornare. Phasellus sit amet neque nisl. Maecenas fringilla, lorem et pharetra efficitur, justo urna consectetur erat, et porta dui libero vel tortor. Praesent vehicula, ipsum euismod consequat aliquet, sapien purus dapibus urna, sit amet tempus libero arcu eu quam. Aliquam nec turpis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc porta mauris ex, non venenatis augue porta eu. Aliquam nibh sem, gravida non nulla nec, lacinia volutpat magna. Mauris semper massa eu turpis pulvinar semper.
2/3/18​



code by @pasta

[div=width:380px;height:438px;border: 1px solid #cccccc;margin:auto;center;background:white;][div=width:380px;height:438px;margin:auto;center;overflow:hidden;line-height:12px;][div=width: calc(100% + 17px); height: calc(100% + 17px); overflow: scroll; box-sizing: border-box; text-align: justify;][div=width:300px;margin:auto;center;]


[div=height:80px;width:285px;margin:auto;center;background:url('https://78.media.tumblr.com/5a426709006966425accde771a8eaaa3/tumblr_p1bg0dmNCN1wjl0yoo6_1280.png');background-size:100%;]



[right][font=Times New Roman][color=#DFB6AC][size=25px]Oh [i]'Sehun'[/i][color=transparent]//[/color][/size][/color][/font][/right][/div]

[row][column=span4][div=margin:auto;center;width:130px;height:130px;background:url('https://78.media.tumblr.com/a4a8bac0cd4188f4bebef3a5b110db40/tumblr_p3i6bjw12D1r2f14do1_250.png');background-size:100%;][class=x]
background:transparent;
padding: 7px;
Height: 130px;
Width: 130px;
transition-duration: 0.5s;
z-index:-1;
color:transparent;[/class][class name=x state=hover]
background-color: rgb(234,198,191);
opacity:0.8;
color:gray;
width:116px;
height:130px;
[/class][nobr][div class=x][div=position:relative;top:45px;]
[center][font=Times New Roman][size=13px]male[/size][/font][/center][/div][/div][/nobr][/div][/column][column=span4][div=margin:auto;center;width:130px;height:130px;background:url('https://78.media.tumblr.com/26240614da34582ffd3159a86b64d6f2/tumblr_p3i6bjw12D1r2f14do3_250.png');background-size:100%;][class=x]
background:transparent;
padding: 7px;
Height: 130px;
Width: 130px;
transition-duration: 0.5s;
z-index:-1;
color:transparent;[/class][class name=x state=hover]
background-color: rgb(234,198,191);
opacity:0.8;
color:gray;
width:116px;
height:130px;
[/class][nobr][div class=x][div=position:relative;top:45px;]
[center][font=Times New Roman][size=13px]23[/size][/font][/center][/div][/div][/nobr][/div][/column][/row]

[row][column=span4][div=margin:auto;center;width:130px;height:130px;background:url('https://78.media.tumblr.com/fd0be25517418df258624d00ebbd7e94/tumblr_p3i6bjw12D1r2f14do2_250.png');background-size:100%;][class=x]
background:transparent;
padding: 7px;
Height: 130px;
Width: 130px;
transition-duration: 0.5s;
z-index:-1;
color:transparent;[/class][class name=x state=hover]
background-color: rgb(234,198,191);
opacity:0.8;
color:gray;
width:116px;
height:130px;
[/class][nobr][div class=x][div=position:relative;top:45px;]
[center][font=Times New Roman][size=13px]sexuality[/size][/font][/center][/div][/div][/nobr]23[/div][/column][column=span4][div=margin:auto;center;width:130px;height:130px;background:url('https://78.media.tumblr.com/1ecb2df3788da29d8eba9b93e6ca42b3/tumblr_p3i6bjw12D1r2f14do5_250.png');background-size:100%;][class=x]
background:transparent;
padding: 7px;
Height: 130px;
Width: 130px;
transition-duration: 0.5s;
z-index:-1;
color:transparent;[/class][class name=x state=hover]
background-color: rgb(234,198,191);
opacity:0.8;
color:gray;
width:116px;
height:130px;
[/class][nobr][div class=x][div=position:relative;top:45px;]
[center][font=Times New Roman][size=13px]south korean[/size][/font][/center][/div][/div][/nobr][/div][/column][/row]




[size=25px][font=Times New Roman][color=#DFB6AC][right][i]Quote[/i][color=transparent]//[/color][/right][/color][/font][/size]

[div=height:150px;background:#F4EFEC;margin:auto;]
[div=height:120px;center;overflow:hidden;][div=width: calc(100% + 17px); height: calc(100% + 17px); overflow: scroll; box-sizing: border-box; text-align: justify;][font=Karla][color=#DFB6AC][center][size=12px]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. Nunc scelerisque eros mauris, ac tincidunt sem euismod at. Sed mollis sollicitudin enim, ut sollicitudin urna mollis et. Duis a risus quam. Mauris ultricies vehicula erat, eu tempus risus iaculis vitae. Fusce id eros in eros dapibus finibus. Sed vel imperdiet velit, ac auctor eros. Suspendisse potenti. Curabitur dapibus metus et tellus accumsan feugiat. Donec est velit, porttitor vitae dignissim at, sollicitudin ac diam. Pellentesque condimentum augue eu magna facilisis, a ultricies felis ornare. Phasellus sit amet neque nisl. Maecenas fringilla, lorem et pharetra efficitur, justo urna consectetur erat, et porta dui libero vel tortor. Praesent vehicula, ipsum euismod consequat aliquet, sapien purus dapibus urna, sit amet tempus libero arcu eu quam. Aliquam nec turpis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc porta mauris ex, non venenatis augue porta eu. Aliquam nibh sem, gravida non nulla nec, lacinia volutpat magna. Mauris semper massa eu turpis pulvinar semper.
[/size][/center][/color][/font][/div][/div][/div][div=height:0px;position:relative;top:-170px;][div=height:20px;width:90px;background:#E7D6D1;border:0px;border-top-right-radius:30px;border-top-left-radius:30px;][div=position:relative;top:5px;][font=Fjalla One][size=15px][color=#F4EFEC][center]2/2/18[/center][/color][/size][/font][/div][/div][/div]



[div=height:150px;background:#F4EFEC;margin:auto;]
[div=height:120px;center;overflow:hidden;][div=width: calc(100% + 17px); height: calc(100% + 17px); overflow: scroll; box-sizing: border-box; text-align: justify;][font=Karla][color=#DFB6AC][center][size=12px]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. Nunc scelerisque eros mauris, ac tincidunt sem euismod at. Sed mollis sollicitudin enim, ut sollicitudin urna mollis et. Duis a risus quam. Mauris ultricies vehicula erat, eu tempus risus iaculis vitae. Fusce id eros in eros dapibus finibus. Sed vel imperdiet velit, ac auctor eros. Suspendisse potenti. Curabitur dapibus metus et tellus accumsan feugiat. Donec est velit, porttitor vitae dignissim at, sollicitudin ac diam. Pellentesque condimentum augue eu magna facilisis, a ultricies felis ornare. Phasellus sit amet neque nisl. Maecenas fringilla, lorem et pharetra efficitur, justo urna consectetur erat, et porta dui libero vel tortor. Praesent vehicula, ipsum euismod consequat aliquet, sapien purus dapibus urna, sit amet tempus libero arcu eu quam. Aliquam nec turpis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc porta mauris ex, non venenatis augue porta eu. Aliquam nibh sem, gravida non nulla nec, lacinia volutpat magna. Mauris semper massa eu turpis pulvinar semper.
[/size][/center][/color][/font][/div][/div][/div][div=height:0px;position:relative;top:-170px;left:210px;][div=height:20px;width:90px;background:#E7D6D1;border:0px;border-top-right-radius:30px;border-top-left-radius:30px;][div=position:relative;top:5px;][font=Fjalla One][size=15px][color=#F4EFEC][center]2/3/18[/center][/color][/size][/font][/div][/div][/div]



[/div][/div][/div][/div][center][size=1]code by [USER=27673]@pasta[/USER][/size][/center]
 
Last edited:

. l e m o n c h i l d .

𝙙𝙀𝙣'𝙩 π™—π™š 𝙨𝙀π™ͺ𝙧
AHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
 

pasta

sehun
NOT MOBILE FRIENDY
an ic post for a 1x1 i'm in w/ a friend. instead of replying to the rp, i just made a new code for it.




sorΒ·cerΒ·er


/ˈsΓ΄rs(Ι™)rΙ™r/

noun
a person who claims or is believed to have magic powers; a wizard.​
Mi Ji Ho
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. Nunc scelerisque eros mauris, ac tincidunt sem euismod at. Sed mollis sollicitudin enim, ut sollicitudin urna mollis et. Duis a risus quam. Mauris ultricies vehicula erat, eu tempus risus iaculis vitae. Fusce id eros in eros dapibus finibus. Sed vel imperdiet velit, ac auctor eros. Suspendisse potenti. Curabitur dapibus metus et tellus accumsan feugiat. Donec est velit, porttitor vitae dignissim at, sollicitudin ac diam. Pellentesque condimentum augue eu magna facilisis, a ultricies felis ornare. Phasellus sit amet neque nisl. Maecenas fringilla, lorem et pharetra efficitur, justo urna consectetur erat, et porta dui libero vel tortor. Praesent vehicula, ipsum euismod consequat aliquet, sapien purus dapibus urna, sit amet tempus libero arcu eu quam. Aliquam nec turpis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc porta mauris ex, non venenatis augue porta eu. Aliquam nibh sem, gravida non nulla nec, lacinia volutpat magna. Mauris semper massa eu turpis pulvinar semper.


code by @pasta

[div=width:500px;margin:auto;center;border:1px solid #cccccc;height:480px;background-color:white;]

[div=width:200px;height:150px;background:#cccccc;background-size:100%;margin:auto;center;font-family:Karla;color:white;line-height:12px;position:relative;left:-105px;]
[size=25px]sorΒ·cerΒ·er[/size]


[size=20px]/ˈsΓ΄rs(Ι™)rΙ™r/[/size]

noun
[indent]a person who claims or is believed to have magic powers; a wizard.[/indent]
[/div][div=height:0px;][div=height:150px;width:200px;background:url('https://78.media.tumblr.com/6233e701377a0233b5e705ee5242f213/tumblr_orrma8vrC41vimwv4o1_1280.png');background-size:100%;margin:auto;center;position:relative;top:-150px;left:100px;][/div][/div][size=35px][font=Times New Roman][center][color=#cccccc]Mi Ji Ho[/color][/center][/font][/size]
[div=width:410px;height:200px;margin:auto;center;background:#cccccc;overflow:hidden;color:white;font-size:13px;font-family:Karla;line-height:13px;][div=width: calc(100% + 13px); height: calc(100% + 17px); overflow: scroll; box-sizing: border-box; text-align: center;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. Nunc scelerisque eros mauris, ac tincidunt sem euismod at. Sed mollis sollicitudin enim, ut sollicitudin urna mollis et. Duis a risus quam. Mauris ultricies vehicula erat, eu tempus risus iaculis vitae. Fusce id eros in eros dapibus finibus. Sed vel imperdiet velit, ac auctor eros. Suspendisse potenti. Curabitur dapibus metus et tellus accumsan feugiat. Donec est velit, porttitor vitae dignissim at, sollicitudin ac diam. Pellentesque condimentum augue eu magna facilisis, a ultricies felis ornare. Phasellus sit amet neque nisl. Maecenas fringilla, lorem et pharetra efficitur, justo urna consectetur erat, et porta dui libero vel tortor. Praesent vehicula, ipsum euismod consequat aliquet, sapien purus dapibus urna, sit amet tempus libero arcu eu quam. Aliquam nec turpis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc porta mauris ex, non venenatis augue porta eu. Aliquam nibh sem, gravida non nulla nec, lacinia volutpat magna. Mauris semper massa eu turpis pulvinar semper.
[/div][/div]

[/div][size=1][center]code by [USER=27673]@pasta[/USER][/center][/size]
 
Last edited:

pasta

sehun
NOT MOBILE FRIENDY
warning: first img is adjusted so it only shows bobby's eyes!!!! press play button for music.

can't do it alone
- name name
location - somewhere
mood - something
tags - people
Said you'd always be my white blood


Circulate the right love
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. Nunc scelerisque eros mauris, ac tincidunt sem euismod at. Sed mollis sollicitudin enim, ut sollicitudin urna mollis et. Duis a risus quam. Mauris ultricies vehicula erat, eu tempus risus iaculis vitae. Fusce id eros in eros dapibus finibus. Sed vel imperdiet velit, ac auctor eros. Suspendisse potenti. Curabitur dapibus metus et tellus accumsan feugiat. Donec est velit, porttitor vitae dignissim at, sollicitudin ac diam. Pellentesque condimentum augue eu magna facilisis, a ultricies felis ornare. Phasellus sit amet neque nisl. Maecenas fringilla, lorem et pharetra efficitur, justo urna consectetur erat, et porta dui libero vel tortor. Praesent vehicula, ipsum euismod consequat aliquet, sapien purus dapibus urna, sit amet tempus libero arcu eu quam. Aliquam nec turpis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuerecubilia Curae; Nunc porta mauris ex, non venenatis augue porta eu. Aliquam nibh sem, gravida non nulla nec, lacinia volutpat magna. Mauris semper massa eu turpis pulvinar semper.
code by @pasta

[div=margin:auto;center;width:400px;background:white;][div=width:400px;height:80px;background:url('https://78.media.tumblr.com/5549362db4f0bb983003e71370b27ddf/tumblr_ovv16ttB4h1s3wt63o6_400.png');background:size:100%;background-position:0px -500px;margin:auto;center;text-shadow:2px 1px black;font-size:45px;][font=Times New][COLOR=white]can't do it alone[/COLOR][/font][/div][div=height:20px;][left][color=#666][font=Lato][fa]fa-play[/fa] - name name[/font][/color][font=Lato][/font][/left][div=opacity: 0;margin-top:-35px;margin-left:-8px;][media=soundcloud]https://soundcloud.com/ohwondermusic/white-blood[/media][/div][/div]
[div=height:120px;width:120px;line-height:12px;][color=gray][size=12px][font=Alegreya Sans SC]location - somewhere
mood - something
tags - people[/font][/size][/color][/div][div=height:0px;margin:auto;center;position:relative;top:-120px;left:65px;][div=height:120px;width:270px;background:url('https://i2.wp.com/68.media.tumblr.com/8843f2a4b9185be97d5e2c810ad1e763/tumblr_ow4epm6ZKu1r0p67co4_1280.gif?w=605');background-size:100%;margin:auto;center;text-shadow:2px 1px black;font-size:18px;line-height:29px;][font=Times New][COLOR=white]Said you'd always be my white blood


Circulate the right love[/COLOR][/font][/div][/div][div=height:120px;width:400px;margin:auto;center;overflow:hidden;color:gray;font-size:12px;line-height:12px;][div=width: calc(100% + 17px); height: calc(100% + 17px); overflow: scroll; box-sizing: border-box; text-align: justify;][font=Alegreya Sans SC]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. Nunc scelerisque eros mauris, ac tincidunt sem euismod at. Sed mollis sollicitudin enim, ut sollicitudin urna mollis et. Duis a risus quam. Mauris ultricies vehicula erat, eu tempus risus iaculis vitae. Fusce id eros in eros dapibus finibus. Sed vel imperdiet velit, ac auctor eros. Suspendisse potenti. Curabitur dapibus metus et tellus accumsan feugiat. Donec est velit, porttitor vitae dignissim at, sollicitudin ac diam. Pellentesque condimentum augue eu magna facilisis, a ultricies felis ornare. Phasellus sit amet neque nisl. Maecenas fringilla, lorem et pharetra efficitur, justo urna consectetur erat, et porta dui libero vel tortor. Praesent vehicula, ipsum euismod consequat aliquet, sapien purus dapibus urna, sit amet tempus libero arcu eu quam. Aliquam nec turpis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuerecubilia Curae; Nunc porta mauris ex, non venenatis augue porta eu. Aliquam nibh sem, gravida non nulla nec, lacinia volutpat magna. Mauris semper massa eu turpis pulvinar semper.
[/font][/div][/div][center][size=1][color=black]code by [USER=27673]@pasta[/USER][/color][/size][/center][/div]
 

pasta

sehun
NOT MOBILE FRIENDY
looooooks way better on the light theme. i don't feel like fixing it for the dark theme :[ i used the tabs from the bbcode+ thread as a base and then made that mess. ok it's my first try at these tabs >:[ im trying to make them look nice. i swear i'll get better!!!! lowkey should've added more detail. save me

1
2
Kim Hansol
code by @pasta

[nobr]
[class=tabs]
background-color: white;
box-sizing: border-box;
color: black;
font-size: 12px;
font-weight: bold;
line-height: 1;
margin: 20px auto;
position:relative;
left: -110px;
top:0px;
text-align: center;
width:30px;
[/class]

[class=tab]
box-sizing: border-box;
cursor: cell;
display: inline-block;
padding: 10px 0;
width: 30px;
[/class]

[class name=tab state=hover]
background-color: #cccccc;
color:white;
[/class]

[script class=tab on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} 1) (show tabsContentOne)
if (eq ${currentTab} 2) (show tabsContentTwo)
[/script]
[div class=tabs][div class=tab style="color:black;width:30px;top:0px;position:relative;left:0px;"][size=12px][font=Times New Roman]1[/font][/size][/div][div class=tab][color=black][size=12px][font=Times New Roman]2[/font][/size][/color][/div][/div]

[div class="tabsContent tabsContentOne"][div=height:320px;position:relative;margin-left:500px;margin-top:-100px;][div=width:250px;height:45px;background:#cccccc;font-size:30px;color:white;][font=Lato][i]Kim Hansol[/i][/font][/div]

[div=border:1px solid #cccccc;height:250px;width:250px;margin:auto;position:relative;left:-207px;top:10px;][div=height:230px;width:230px;background:url('https://78.media.tumblr.com/17589d1f3bd9b957bed69ab121f44e5e/tumblr_p08g5qoJka1wpxit8o1_500.jpg');background-size:110%;margin:auto;border:10px solid #fff;][/div][/div]
[/div][/div]

[div class="tabsContent tabsContentTwo" style="display: none;"][div=height:320px;position:relative;margin-left:500px;margin-top:-100px;][div=width:250px;height:45px;background:#cccccc;font-size:30px;color:white;][font=Lato][i]About[/i][/font][/div][div=border:1px solid #cccccc;height:250px;width:250px;margin:auto;position:relative;left:-207px;top:10px;][div=height:230px;width:230px;margin:auto;border:10px solid #fff;overflow:hidden;color:gray;font-size:12px;line-height:12px;background:white;][div=width: calc(100% + 17px); height: calc(100% + 17px); overflow: scroll; box-sizing: border-box; text-align: justify;][font=Alegreya Sans SC]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. Nunc scelerisque eros mauris, ac tincidunt sem euismod at. Sed mollis sollicitudin enim, ut sollicitudin urna mollis et. Duis a risus quam. Mauris ultricies vehicula erat, eu tempus risus iaculis vitae. Fusce id eros in eros dapibus finibus. Sed vel imperdiet velit, ac auctor eros. Suspendisse potenti. Curabitur dapibus metus et tellus accumsan feugiat. Donec est velit, porttitor vitae dignissim at, sollicitudin ac diam. Pellentesque condimentum augue eu magna facilisis, a ultricies felis ornare. Phasellus sit amet neque nisl. Maecenas fringilla, lorem et pharetra efficitur, justo urna consectetur erat, et porta dui libero vel tortor. Praesent vehicula, ipsum euismod consequat aliquet, sapien purus dapibus urna, sit amet tempus libero arcu eu quam. Aliquam nec turpis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuerecubilia Curae; Nunc porta mauris ex, non venenatis augue porta eu. Aliquam nibh sem, gravida non nulla nec, lacinia volutpat magna. Mauris semper massa eu turpis pulvinar semper.
[/font][/div][/div][/div][/div][/div][/nobr][div=height:10px;position:relative;top:-10px;left:40px;][center][size=1]code by [USER=27673]@pasta[/USER][/size][/center][/div]
 

Fyuri

ηΡмσρнιℓιsΡ‚
Administrator
Supporter
NOT MOBILE FRIENDY
looooooks way better on the light theme. i don't feel like fixing it for the dark theme :[ i used the tabs from the bbcode+ thread as a base and then made that mess. ok it's my first try at these tabs >:[ im trying to make them look nice. i swear i'll get better!!!! lowkey should've added more detail. save me

1
2
Kim Hansol
code by @pasta

[nobr]
[class=tabs]
background-color: white;
box-sizing: border-box;
color: black;
font-size: 12px;
font-weight: bold;
line-height: 1;
margin: 20px auto;
position:relative;
left: -110px;
top:0px;
text-align: center;
width:30px;
[/class]

[class=tab]
box-sizing: border-box;
cursor: cell;
display: inline-block;
padding: 10px 0;
width: 30px;
[/class]

[class name=tab state=hover]
background-color: #cccccc;
color:white;
[/class]

[script class=tab on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} 1) (show tabsContentOne)
if (eq ${currentTab} 2) (show tabsContentTwo)
[/script]
[div class=tabs][div class=tab style="color:black;width:30px;top:0px;position:relative;left:0px;"][size=12px][font=Times New Roman]1[/font][/size][/div][div class=tab][color=black][size=12px][font=Times New Roman]2[/font][/size][/color][/div][/div]

[div class="tabsContent tabsContentOne"][div=height:320px;position:relative;margin-left:500px;margin-top:-100px;][div=width:250px;height:45px;background:#cccccc;font-size:30px;color:white;][font=Lato][i]Kim Hansol[/i][/font][/div]

[div=border:1px solid #cccccc;height:250px;width:250px;margin:auto;position:relative;left:-207px;top:10px;][div=height:230px;width:230px;background:url('https://78.media.tumblr.com/17589d1f3bd9b957bed69ab121f44e5e/tumblr_p08g5qoJka1wpxit8o1_500.jpg');background-size:110%;margin:auto;border:10px solid #fff;][/div][/div]
[/div][/div]

[div class="tabsContent tabsContentTwo" style="display: none;"][div=height:320px;position:relative;margin-left:500px;margin-top:-100px;][div=width:250px;height:45px;background:#cccccc;font-size:30px;color:white;][font=Lato][i]About[/i][/font][/div][div=border:1px solid #cccccc;height:250px;width:250px;margin:auto;position:relative;left:-207px;top:10px;][div=height:230px;width:230px;margin:auto;border:10px solid #fff;overflow:hidden;color:gray;font-size:12px;line-height:12px;background:white;][div=width: calc(100% + 17px); height: calc(100% + 17px); overflow: scroll; box-sizing: border-box; text-align: justify;][font=Alegreya Sans SC]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. Nunc scelerisque eros mauris, ac tincidunt sem euismod at. Sed mollis sollicitudin enim, ut sollicitudin urna mollis et. Duis a risus quam. Mauris ultricies vehicula erat, eu tempus risus iaculis vitae. Fusce id eros in eros dapibus finibus. Sed vel imperdiet velit, ac auctor eros. Suspendisse potenti. Curabitur dapibus metus et tellus accumsan feugiat. Donec est velit, porttitor vitae dignissim at, sollicitudin ac diam. Pellentesque condimentum augue eu magna facilisis, a ultricies felis ornare. Phasellus sit amet neque nisl. Maecenas fringilla, lorem et pharetra efficitur, justo urna consectetur erat, et porta dui libero vel tortor. Praesent vehicula, ipsum euismod consequat aliquet, sapien purus dapibus urna, sit amet tempus libero arcu eu quam. Aliquam nec turpis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuerecubilia Curae; Nunc porta mauris ex, non venenatis augue porta eu. Aliquam nibh sem, gravida non nulla nec, lacinia volutpat magna. Mauris semper massa eu turpis pulvinar semper.
[/font][/div][/div][/div][/div][/div][/nobr][div=height:10px;position:relative;top:-10px;left:40px;][center][size=1]code by [USER=27673]@pasta[/USER][/size][/center][/div]
This is completely static for me...
 

pasta

sehun
This is completely static for me...
Hm, I don't know why that would be. Maybe because I used relative instead of absolute, or I didn't only use classes or different browsers. I didn't change much of the base code besides moving it around. Even on mobile it looks somewhat ok for me.
 

Fyuri

ηΡмσρнιℓιsΡ‚
Administrator
Supporter
Hm, I don't know why that would be. Maybe because I used relative instead of absolute, or I didn't only use classes or different browsers. I didn't change much of the base code besides moving it around. Even on mobile it looks somewhat ok for me.
Yeah, the tabs don't work and I tried it on FF and Chrome. X3 It's just completely static.
pastanowork.png
 

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
The "Kim Hansol" part covers up the tabs when the page gets to a certain width, preventing interaction.
 

Fyuri

ηΡмσρнιℓιsΡ‚
Administrator
Supporter
Ah, my screen is actually quite large so thay may be the problem. I use chrome so it's probably not different browsers.
Yeah, the resolution works on mobile to show the tabs. How large is your resolution exactly? Mine is actually fairly standard, so it's odd that on a smaller resolution it works, but larger.. it doesn't X3
 

pasta

sehun
Yeah, the resolution works on mobile to show the tabs. How large is your resolution exactly? Mine is actually fairly standard, so it's odd that on a smaller resolution it works, but larger.. it doesn't X3
I don't exactly know. My screen, in my opinion, is wide for an average laptop. I think it is, compared to the laptops I've had before. But, it works for some screens and not for others.
 
Last edited:

pasta

sehun
NOT MOBILE FRIENDY
i don't listen to bts that much anymore but this gif set was too beautiful not to use in a code. there are three hidden scrolls.

[div=width:620px;background:#fff;margin:auto;center;]
[div=width:300px;position:relative;left:-140px;margin:auto;center;][div=width:300px;height:120px;background:url('https://78.media.tumblr.com/4939f7c6a85cb5af393610475fc2203c/tumblr_oycky9BnvU1wofqfvo1_500.gif');background-size:100%;margin:auto;center;overflow:hidden;][div=width: calc(100% + 17px); height: calc(100% + 17px); overflow: scroll; box-sizing: border-box; text-align: justify;][div=height:120px;][color=transparent]marker[/color]


[/div][div=height:120px;overflow:hidden;background:#fff;][div=width: calc(100% + 17px); height: calc(100% + 17px); overflow: scroll; box-sizing: border-box; text-align: justify;][div=font-family:'lao ui', calibri, arial, sans-serif;font-size:12px;text-align:justify;text-transform:uppercase;letter-spacing:.4px;margin:5px 0px;color:#666;line-height:12px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. Nunc scelerisque eros mauris, ac tincidunt sem euismod at. Sed mollis sollicitudin enim, ut sollicitudin urna mollis et. Duis a risus quam. Mauris ultricies vehicula erat, eu tempus risus iaculis vitae. Fusce id eros in eros dapibus finibus. Sed vel imperdiet velit, ac auctor eros. Suspendisse potenti. Curabitur dapibus metus et tellus accumsan feugiat. Donec est velit, porttitor vitae dignissim at, sollicitudin ac diam. Pellentesque condimentum augue eu magna facilisis, a ultricies felis ornare. Phasellus sit amet neque nisl. Maecenas fringilla, lorem et pharetra efficitur, justo urna consectetur erat, et porta dui libero vel tortor. Praesent vehicula, ipsum euismod consequat aliquet, sapien purus dapibus urna, sit amet tempus libero arcu eu quam. Aliquam nec turpis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuerecubilia Curae; Nunc porta mauris ex, non venenatis augue porta eu. Aliquam nibh sem, gravida non nulla nec, lacinia volutpat magna. Mauris semper massa eu turpis pulvinar semper.[/div][/div][/div][/div][/div]
[div=width:300px;height:120px;background:url('https://78.media.tumblr.com/22864026bff2854a1886e260fb072961/tumblr_oycky9BnvU1wofqfvo3_500.gif');background-size:100%;margin:auto;center;][/div]
[div=width:300px;height:120px;background:url('https://78.media.tumblr.com/e73bec11e65be22a10eec75c0500828a/tumblr_oycky9BnvU1wofqfvo2_500.gif');background-size:100%;margin:auto;center;overflow:hidden;][div=width: calc(100% + 17px); height: calc(100% + 17px); overflow: scroll; box-sizing: border-box; text-align: justify;][div=height:120px;][color=transparent]marker[/color]



[/div][div=height:120px;overflow:hidden;background:#fff;][div=width: calc(100% + 17px); height: calc(100% + 17px); overflow: scroll; box-sizing: border-box; text-align: justify;][div=font-family:'lao ui', calibri, arial, sans-serif;font-size:12px;text-align:justify;text-transform:uppercase;letter-spacing:.4px;margin:5px 0px;color:#666;line-height:12px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. Nunc scelerisque eros mauris, ac tincidunt sem euismod at. Sed mollis sollicitudin enim, ut sollicitudin urna mollis et. Duis a risus quam. Mauris ultricies vehicula erat, eu tempus risus iaculis vitae. Fusce id eros in eros dapibus finibus. Sed vel imperdiet velit, ac auctor eros. Suspendisse potenti. Curabitur dapibus metus et tellus accumsan feugiat. Donec est velit, porttitor vitae dignissim at, sollicitudin ac diam. Pellentesque condimentum augue eu magna facilisis, a ultricies felis ornare. Phasellus sit amet neque nisl. Maecenas fringilla, lorem et pharetra efficitur, justo urna consectetur erat, et porta dui libero vel tortor. Praesent vehicula, ipsum euismod consequat aliquet, sapien purus dapibus urna, sit amet tempus libero arcu eu quam. Aliquam nec turpis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuerecubilia Curae; Nunc porta mauris ex, non venenatis augue porta eu. Aliquam nibh sem, gravida non nulla nec, lacinia volutpat magna. Mauris semper massa eu turpis pulvinar semper.
[/div][/div][/div][/div][/div][/div][div=height:0px][div=width:250px;height:250px;background:url('https://78.media.tumblr.com/a0d336711f984d915e1971fa30f41fab/tumblr_oe623s09Hg1rx1zf1o1_500.jpg');background-size:100%;margin:auto;position:relative;left:160px;top:-402px;overflow:hidden;][div=width: calc(100% + 17px); height: calc(100% + 17px); overflow: scroll; box-sizing: border-box; text-align: justify;][div=height:250px;]

[color=transparent]marker[/color][/div][div=height:250px;overflow:hidden;background:#fff;][div=width: calc(100% + 17px); height: calc(100% + 17px); overflow: scroll; box-sizing: border-box; text-align: justify;][div=font-family:'lao ui', calibri, arial, sans-serif;font-size:12px;text-align:justify;text-transform:uppercase;letter-spacing:.4px;margin:5px 0px;color:#666;line-height:12px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. Nunc scelerisque eros mauris, ac tincidunt sem euismod at. Sed mollis sollicitudin enim, ut sollicitudin urna mollis et. Duis a risus quam. Mauris ultricies vehicula erat, eu tempus risus iaculis vitae. Fusce id eros in eros dapibus finibus. Sed vel imperdiet velit, ac auctor eros. Suspendisse potenti. Curabitur dapibus metus et tellus accumsan feugiat. Donec est velit, porttitor vitae dignissim at, sollicitudin ac diam. Pellentesque condimentum augue eu magna facilisis, a ultricies felis ornare. Phasellus sit amet neque nisl. Maecenas fringilla, lorem et pharetra efficitur, justo urna consectetur erat, et porta dui libero vel tortor. Praesent vehicula, ipsum euismod consequat aliquet, sapien purus dapibus urna, sit amet tempus libero arcu eu quam. Aliquam nec turpis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuerecubilia Curae; Nunc porta mauris ex, non venenatis augue porta eu. Aliquam nibh sem, gravida non nulla nec, lacinia volutpat magna. Mauris semper massa eu turpis pulvinar semper.
[/div][/div][/div][/div][/div]
[div=height:130px;width:250px;background:#aaa;position:relative;left:160px;top:-408px;margin:auto;center;][div=font-family:'lao ui', calibri, arial, sans-serif;font-size:30px;text-align:center;text-transform:uppercase;letter-spacing:0.4px;margin:5px 0px;color:#F1DDC5;line-height:30px;]
k i m
s e o k j i n[/div][div=font-family:'lao ui', calibri, arial, sans-serif;font-size:12px;text-align:center;text-transform:uppercase;letter-spacing:.4px;margin:5px 0px;color:#F1DDC5;line-height:12px;][size=12px][i]12.04.92[/i][/size][/div][/div][/div][color=#666][size=1][center]code by [USER=27673]@pasta[/USER][/center][/size][/color][/div]


marker


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. Nunc scelerisque eros mauris, ac tincidunt sem euismod at. Sed mollis sollicitudin enim, ut sollicitudin urna mollis et. Duis a risus quam. Mauris ultricies vehicula erat, eu tempus risus iaculis vitae. Fusce id eros in eros dapibus finibus. Sed vel imperdiet velit, ac auctor eros. Suspendisse potenti. Curabitur dapibus metus et tellus accumsan feugiat. Donec est velit, porttitor vitae dignissim at, sollicitudin ac diam. Pellentesque condimentum augue eu magna facilisis, a ultricies felis ornare. Phasellus sit amet neque nisl. Maecenas fringilla, lorem et pharetra efficitur, justo urna consectetur erat, et porta dui libero vel tortor. Praesent vehicula, ipsum euismod consequat aliquet, sapien purus dapibus urna, sit amet tempus libero arcu eu quam. Aliquam nec turpis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuerecubilia Curae; Nunc porta mauris ex, non venenatis augue porta eu. Aliquam nibh sem, gravida non nulla nec, lacinia volutpat magna. Mauris semper massa eu turpis pulvinar semper.


marker



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. Nunc scelerisque eros mauris, ac tincidunt sem euismod at. Sed mollis sollicitudin enim, ut sollicitudin urna mollis et. Duis a risus quam. Mauris ultricies vehicula erat, eu tempus risus iaculis vitae. Fusce id eros in eros dapibus finibus. Sed vel imperdiet velit, ac auctor eros. Suspendisse potenti. Curabitur dapibus metus et tellus accumsan feugiat. Donec est velit, porttitor vitae dignissim at, sollicitudin ac diam. Pellentesque condimentum augue eu magna facilisis, a ultricies felis ornare. Phasellus sit amet neque nisl. Maecenas fringilla, lorem et pharetra efficitur, justo urna consectetur erat, et porta dui libero vel tortor. Praesent vehicula, ipsum euismod consequat aliquet, sapien purus dapibus urna, sit amet tempus libero arcu eu quam. Aliquam nec turpis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuerecubilia Curae; Nunc porta mauris ex, non venenatis augue porta eu. Aliquam nibh sem, gravida non nulla nec, lacinia volutpat magna. Mauris semper massa eu turpis pulvinar semper.


marker
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra tortor purus, id hendrerit enim dictum at. Nunc scelerisque eros mauris, ac tincidunt sem euismod at. Sed mollis sollicitudin enim, ut sollicitudin urna mollis et. Duis a risus quam. Mauris ultricies vehicula erat, eu tempus risus iaculis vitae. Fusce id eros in eros dapibus finibus. Sed vel imperdiet velit, ac auctor eros. Suspendisse potenti. Curabitur dapibus metus et tellus accumsan feugiat. Donec est velit, porttitor vitae dignissim at, sollicitudin ac diam. Pellentesque condimentum augue eu magna facilisis, a ultricies felis ornare. Phasellus sit amet neque nisl. Maecenas fringilla, lorem et pharetra efficitur, justo urna consectetur erat, et porta dui libero vel tortor. Praesent vehicula, ipsum euismod consequat aliquet, sapien purus dapibus urna, sit amet tempus libero arcu eu quam. Aliquam nec turpis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuerecubilia Curae; Nunc porta mauris ex, non venenatis augue porta eu. Aliquam nibh sem, gravida non nulla nec, lacinia volutpat magna. Mauris semper massa eu turpis pulvinar semper.


k i m
s e o k j i n
12.04.92
code by @pasta
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top