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
CLICK ME
BACK
So, this is my coding thread! I've been coding since mid-late 2016. Although, I started posting codes in early 2017. My codes at the time were quite ugly, but you can view the ones I decided to put up here.

People still seem to use them and I don't understand why, but I suppose it's because they're simple and easy to understand. My old thread can show how far I've come along; even, this thread shows how far I've come along. I couldn't even look at bbcode+ tabs without getting a headache, and now I understand them extremely well. I still don't think my codes are amazing or anything, but I like to think they look nice.

Please, leave the credit on my codes. I don't mind if you change colors, images or fonts. I love when people use my codes, so you don't need to ask. I'm also fine with anyone using to them to learn to code; I often did that too when I first started. Feel free to pick them apart, but just make sure to keep the credit.

Alright, the last thing I need to do is plug by DIV tutorial thread. It's simple and I don't even use divs anyone i moved completely onto classes lmao, but I think it can help a few coders who are just starting out! You can find it here!

 
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
a cs for a vampire rp im in.




Basics


here


Looks


here



























scroll​




I've been upside down
I don't wanna be the right way round
Can't find paradise on the ground


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=margin:auto;center;background:#fff;width:640px;]
[div=height:177px;width:100px;background:#cccccc;margin:auto;center;position:relative;left:-250px;overflow:hidden;color:#000000;font-size:12px;][div=width: calc(100% + 17px); height: calc(100% + 17px); overflow: scroll; box-sizing: border-box; text-align: justify;][font=Oswald][size=25px][color=white][center]

Basics


[/center][/color][/size][/font][div=background:#fff;line-height:12px;][font=Karla]here
[/font][/div][/div][/div][div=height:177px;width:100px;background:#cccccc;margin:auto;center;position:relative;left:-250px;postion:relative;top:2px;overflow:hidden;color:#000000;font-size:12px;][div=width: calc(100% + 17px); height: calc(100% + 17px); overflow: scroll; box-sizing: border-box; text-align: justify;][font=Oswald][size=25px][color=white][center]

Looks


[/center][/color][/size][/font][div=background:#fff;line-height:12px;][font=Karla]here

[/font][/div][/div][/div][div=height:0px;][div=height:355px;width:250px;background:url('https://78.media.tumblr.com/85b6be2591364d9ea55b9a909ba1d2d8/tumblr_ox7ip4gesr1wx3cmko1_1280.jpg');background-size:150%;position:relative;margin:auto;center;top:-355px;left:-70px;overflow:hidden;color:#000000;font-size:12px;line-height:12px;][div=width: calc(100% + 17px); height: calc(100% + 17px); overflow: scroll; box-sizing: border-box; text-align: justify;]

























[div=text-shadow:2px 1px #000000;color:white;][font=Karla][size=14px][center]scroll[/center][/size][/font][/div]



[div=background:#fff;height:355px;][font=Karla][size=20px]
I've been upside down
I don't wanna be the right way round
Can't find paradise on the ground[/size]

[/font][/div][/div][/div][/div][div=height:0px;][div=height:355px;width:250px;margin:auto;center;position:relative;top:-355px;left:185px;background:#fff;overflow:hidden;color:#000000;font-size:13px;line-height:12px;][div=width: calc(100% + 13px); height: calc(100% + 17px); overflow: scroll; box-sizing: border-box; text-align: justify;][font=Karla]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.

[row][column=span3][div=height:80px;width:80px;background:url('https://78.media.tumblr.com/04daaf934560e07ff6e0cc8bf3f10320/tumblr_orz3eql6Za1vgoaqio2_250.png');background-size:100%;][/div][/column][column=span3][div=height:80px;width:80px;background:url('https://78.media.tumblr.com/ac98d8611d2d93de1086ce704b05b84a/tumblr_orz3eql6Za1vgoaqio5_250.png');background-size:100%;position:relative;left:-11px;][/div][/column][column=span2][div=height:80px;width:80px;background:url('https://78.media.tumblr.com/2e81b08eb7c43f0dc8fc501c127bcbf0/tumblr_ogusb6V68H1skjimxo2_400.png');background-size:100%;position:relative;left:-21px;][/div][/column][/row][div=position:relative;top:2px;][row][column=span3][div=height:80px;width:80px;background:url('https://78.media.tumblr.com/882a1b711e549ec967ddefd5dceee1b8/tumblr_oome62CCL21ug8cf7o8_250.png');background-size:100%;][/div][/column][column=span3][div=height:80px;width:80px;background:url('https://78.media.tumblr.com/7fee4e7739634b1c016cdedbf30ce394/tumblr_oohn7qAbWe1vb84x0o6_250.png');background-size:100%;position:relative;left:-11px;][/div][/column][column=span2][div=height:80px;width:80px;background:url('https://78.media.tumblr.com/7ebfb9c9a3d153edbfb83ba7cf02793b/tumblr_oohn7qAbWe1vb84x0o4_250.png');background-size:100%;position:relative;left:-21px;][/div][/column][/row][/div][div=position:relative;top:4px;][row][column=span3][div=height:80px;width:80px;background:url('https://78.media.tumblr.com/30fd2863a39b7d747512b5ba6f7120df/tumblr_p3cj7hwvDw1wc73awo8_250.png');background-size:100%;][/div][/column][column=span3][div=height:80px;width:80px;background:url('https://78.media.tumblr.com/9df54d81e97087d78bc88f21a2995fd6/tumblr_p0xa4cEzZq1wiujh5o1_400.png');background-size:100%;position:relative;left:-11px;][/div][/column][column=span2][div=height:80px;width:80px;background:url('https://78.media.tumblr.com/0a12dc6c548441ce8d718f78586d548f/tumblr_p0xa4cEzZq1wiujh5o2_400.png');background-size:100%;position:relative;left:-21px;][/div][/column][/row][div=position:relative;top:2px;][row][column=span3][div=height:80px;width:80px;background:url('https://78.media.tumblr.com/07635752d2d870720a3baf2b136a1f3e/tumblr_p1qh34hPVI1ug8cf7o6_r1_250.png');background-size:100%;][/div][/column][column=span3][div=height:80px;width:80px;background:url('https://78.media.tumblr.com/29d99fd81658b6a2e62bd62fc398d63d/tumblr_p2khmv73Hm1wc73awo6_r1_250.png');background-size:100%;position:relative;left:-11px;][/div][/column][column=span2][div=height:80px;width:80px;background:url('https://78.media.tumblr.com/c66304061d9721cb1807ef35b9f3bfc0/tumblr_oxiaxijQXW1wrikq8o1_400.png');background-size:100%;position:relative;left:-21px;][/div][/column][/row][div=position:relative;top:3px;][row][column=span3][div=height:80px;width:80px;background:url('https://78.media.tumblr.com/78f44b0456a404ba1d33e7187f49fddf/tumblr_oz0ousNTHv1wg0pvno4_250.png');background-size:100%;][/div][/column][column=span3][div=height:80px;width:80px;background:url('https://78.media.tumblr.com/07dbc9d558eea5eade611e5e38e9c5db/tumblr_oz0ousNTHv1wg0pvno9_250.png');background-size:100%;position:relative;left:-11px;][/div][/column][column=span2][div=height:80px;width:80px;background:url('https://78.media.tumblr.com/d2c23cdb776c2fc0b7d9ed1afca2a6df/tumblr_p08ze9JSzY1wiujh5o7_400.png');background-size:100%;position:relative;left:-21px;][/div][/column][/row][/div][/div][/div][/font][div=position:relative;top:4px;][div=position:relative;top:4px;]
[/div][/div][/div][/div][/div][center][size=1][color=#000000]code by [USER=27673]@pasta[/USER][/color][/size][/center][/div]
 
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Ιͺ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Ιͺ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Ιͺ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:

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

  • Top