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!

    Remember to credit artists when using work not your own.

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

pasta

internet girl
[nobr][class=whole]
width:710px;
margin:auto;
background:#fff;
[/class]

[div class=whole]
[class=one]
height:200px;
width:200px;
background:#885544;
float:left;
[/class]

[class=two]
height:200px;
width:500px;
background:url('https://66.media.tumblr.com/c4bbfc3d50c7bc7f8cff2a1a8dab7f83/tumblr_ptgs6mv2uI1xg58k9o4_1280.png');
background-size:100%;
float:left;
margin-left:10px;
[/class]

[div class=one][class=hi]
height:180px;
width:180px;
background:url('https://66.media.tumblr.com/2ad121ad40e02808235c6443736144c0/tumblr_pez299hYGN1xd5ekeo6_r1_400.png');
background-size:100%;
float:left;
margin:10px 10px;
[/class]

[div class=hi][/div]

[/div][div class=two][class=clicker]
line-height:200px;
font-size:50px;
color:#fff;
letter-spacing:2px;
font-weight:800;
text-shadow:3px 3px #000;
text-align:center;
cursor:pointer;
[/class]

[script class=clicker on=click]
slideUp 800 clicker
fadeIn 1000 links
fadeIn 1000 return
[/script]

[script class=return on=click]
slideDown 800 clicker
fadeOut 300 links
fadeOut 300 return
[/script]

[div class=clicker]sincerity ⋆[/div]

[class=links]
height:80px;
width:85%;
margin:auto;
margin-top:70px;
display:none;
[/class]

[div class=links][div style="width:100px;font-size:30px;font-weight:800px;letter-spacing:1px;float:left;color:#fff;text-shadow:3px 3px #000;"]Links:[/div][div style="height:60px;width:310px;float:left;margin-left:0px;color:#fff;font-family:Arial;line-height:14px;font-size:10px;"]Here are the links to my original coding thread and my DIV tutorial thread. My old coding thread is filled with useage of the original bbcode (no divs, no bbcode+ -- really before most of that existed. Towards the middle/end, divs do start appearing).Old Thread & Tutorial Thread[/div]
[class=return]
cursor:pointer;
height:20px;
width:20px;
background:#fff;
float:left;
margin-top:-15px;
margin-left:35px;
border:0px solid #fff;
border-radius:10px;
[/class]

[div class=return][div style="color:#885544;font-size:13px;line-height:20px;text-align:center;"][/div][/div][/div][/div][class=mega]
height:305px;
width:710px;
background:#eee;
float:left;
[/class]

[div class=mega][class=firstbox]
height:260px;
width:320px;
background:#fff;
float:left;
margin:20px 20px;
[/class]

[div class=firstbox][div style="text-shadow:2px 2px #885544;margin:auto;color:#fff;font-size:45px;text-transform:uppercase;text-align:center;font-weight:800;"]Rules.[/div]
[div style="height:12px;width:80px;background:#885544;margin:auto;color:#fff;line-height:12px;font-size:15px;text-transform:uppercase;text-align:center;font-family:Arial;"]FOLLOW[/div]
[br][/br]
[div style="width:85%;margin:auto;color:#666;font-weight:500;font-size:9px;line-height:14px;text-transform:uppercase;font-family:Arial;"]01 Keep credit
[br][/br]
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.
[br][/br]
03 My codes are nearly now entirely in bbcode+, however, my older ones are not.
[br][/br]
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. [/div]
[/div]

[class=introduction]
height:260px;
width:330px;
background:#fff;
float:left;
margin:20px 0px;
[/class]

[div class=introduction][div style="text-shadow:2px 2px #885544;color:#fff;font-size:35px;text-transform:uppercase;text-align:center;font-weight:800;"]Intro.[/div]

[div style="height:12px;width:60px;background:#885544;margin:auto;color:#fff;line-height:12px;font-size:15px;text-transform:uppercase;text-align:center;font-family:Arial;"]PASTA[/div]
[br][/br]
[div style="width:85%;margin:auto;color:#666;font-size:9px;line-height:12px;text-transform:uppercase;font-family:Arial;"]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.

[class=img1]
height:90px;
background:url('https://66.media.tumblr.com/c17ed800b65c6e735b7920557491f5b1/tumblr_p8bf4dENud1wlgxz9o9_400.png');
background-size:100%;
margin:auto;
background-position:0px -80px;
margin-top:20px;
[/class]

[div class=img1][/div][/div][/div]

[/div]

[class=banner]
height:200px;
width:710px;
background:url('https://66.media.tumblr.com/05012615d50dd5eb30261e7430057933/tumblr_ptgs6mv2uI1xg58k9o5_1280.png');
background-size:100%;
float:left;
[/class]

[div class=banner][div style="line-height:200px;font-size:50px;color:#fff;letter-spacing:2px;font-weight:800;text-shadow:3px 3px #000;text-align:center;"]PRETTY DARK[/div]
[br][/br]
[div style="margin-top:-100px;font-size:13px;color:#fff;text-align:center;"]A Layout Boutique[/div][/div]

[class=applications]
height:180px;
width:710px;
background:#eee;
float:left;
[/class]

[div class=applications][class=apply]
height:140px;
width:670px;
background:#fff;
float:left;
margin:20px 20px;
[/class]

[div class=apply][div style="width:90%;margin:auto;margin-top:35px;color:#666;font-size:9px;line-height:12px;text-transform:uppercase;font-family:Arial;"]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.[/div]
[div style="width:100px;float:right;"][div style="text-shadow:2px 2px #885544;color:#fff;font-size:35px;text-transform:uppercase;float:right;margin-right:20px; ;font-weight:800;"]Applications.[/div]

[div style="height:12px;width:80px;background:#885544;float:right;margin-right:20px;;color:#fff;line-height:12px;font-size:15px;text-transform:uppercase;text-align:center;font-family:Arial;"]NOT OPEN[/div][/div][/div][/div][/div][/nobr]
 
Last edited:

pasta

internet girl
NOT MOBILE FRIENDY
hover over images besides the top img. Scroll down for more info.
[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%;]



Oh 'Sehun'//
[/div]

[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;]
male
[/div][/div][/nobr][/div]
[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;]
23
[/div][/div][/nobr][/div]

[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;]
sexuality
[/div][/div][/nobr]23[/div]
[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;]
south korean
[/div][/div][/nobr][/div]




Quote//

[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;]
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][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;]
2/2/18​
[/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;]
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][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;]
2/3/18​
[/div][/div][/div]



[/div][/div][/div][/div]
code by pasta 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

internet girl
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.

[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;]
sorΒ·cerΒ·er


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

noun
a person who claims or is believed to have magic powers; a wizard.​
[/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]
Mi Ji Ho
[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]
code by pasta 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

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

[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;]can't do it alone[/div][div=height:20px;]
- name name
[div=opacity: 0;margin-top:-35px;margin-left:-8px;][/div][/div]
[div=height:120px;width:120px;line-height:12px;]location - somewhere
mood - something
tags - people
[/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;]Said you'd always be my white blood


Circulate the right love
[/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;]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]
code by pasta pasta
[/div]

[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

internet girl
[div=width:500px;margin:auto;center;position:relative;left:40px;]
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
[/div]

[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;"]1[/div][div class=tab]2[/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;]Kim Hansol[/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;]About[/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;]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][/nobr][div=height:10px;position:relative;top:-10px;left:40px;]
code by pasta pasta
[/div]

[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

θ¦‹γ¬γŒθŠ±
Administrator
[div=width:500px;margin:auto;center;position:relative;left:40px;]
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
[/div]

[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;"]1[/div][div class=tab]2[/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;]Kim Hansol[/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;]About[/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;]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][/nobr][div=height:10px;position:relative;top:-10px;left:40px;]
code by pasta pasta
[/div]

[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

internet girl
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

θ¦‹γ¬γŒθŠ±
Administrator
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

θ¦‹γ¬γŒθŠ±
Administrator
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

internet girl
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

internet girl
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]

[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;]marker


[/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;]marker



[/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;]

marker[/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;]12.04.92[/div][/div][/div]
code by pasta pasta
[/div]
 

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

Top