• 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 summerwine's coding junkyard

summerwine

an angel's kiss in spring
[class=image] margin: auto; background: url('http://38.media.tumblr.com/23c8901cd2eb0d2fd78833945012a5b9/tumblr_n49euvNGxc1szshp3o1_r2_500.gif'); height: 280px; width: 500px; [/class] [div class=image]








summerwine's coding junkyard









Hey there kiddos! So this is my junkyard of all different kinda codes! Please use whichever one you'd like! Just keep the credits!!! You also have the option of posting the link you used my code in on this thread. I'd love to see what you've done with it. ♡
My main purpose of this is to keep track on my coding progress and share to a really great community of peeps. (:
code by summerwine
[/div]
 
Last edited:
one: my girl
- there are scrolls in each tab
cuz you're my girl
type stuff here
whenever you're around I hate everything less
type stuff here
type stuff here
code by summerwine


Code:
[nobr][centerblock=55][div=background:url('http://static.tumblr.com/bfc5033a345ca11571dcc4890c21af06/b9iupnk/SuOmocbqd/tumblr_static_rapid_city_art_alley_tumblr_background_editted.jpg');background-size:cover;border:5px #B20000
 double;color: #000000;padding:5px;][border=dotted #B20000][border=double #B20000][Row][Column=span2][div=background:url('https://66.media.tumblr.com/95847764fea8f4d65e9cd3e99ed6c564/tumblr_pbtrztEE3M1xuoaczo1_400.png');background-size:cover;border:2px white solid;color: #000000;height:100px;width:100px;border-radius:100px;padding:20px;][/div][/Column]

[Column=span2][div=background:url('https://66.media.tumblr.com/9c31e6929d40fae6dd158b266d2080eb/tumblr_pbtrztEE3M1xuoaczo2_400.png');background-size:cover;border:2px white solid;color: #000000;height:100px;width:100px;border-radius:100px;padding:20px;][/div][/Column]

[Column=span2][div=background:url('https://66.media.tumblr.com/1ed776fe07d5e88c8cff5176cb953819/tumblr_pbtrztEE3M1xuoaczo3_400.png');background-size:cover;border:2px white solid;color: #000000;height:100px;width:100px;border-radius:100px;padding:20px;][/div][/Column]

[Column=span2][div=background:url('https://66.media.tumblr.com/676c56145b4e35ca028d50d147a07245/tumblr_pbtrztEE3M1xuoaczo5_400.png');background-size:cover;border:2px white solid;color: #000000;height:100px;width:100px;border-radius:100px;padding:20px;][/div][/Column][/Row]
[center][size=60px][color=#B20000][font=Emilys Candy]cuz you're my girl[/font][/color][/size][/center]

[border=none][accordion=80%|bcenter]
{slide=[bg=#ACDCDB][center][size=20px][font=Lora][color=white][fa] fa-diamond fa-spin[/fa] [fa]fa-gratipay[/fa] [fa]fa-diamond fa-spin[/fa] [fa]fa-gratipay[/fa] [fa]fa-diamond fa-spin[/fa][/color][/font][/size][/center][/bg]}[div=position: relative;width: calc(100%  - 0px);height: 120px;overflow: hidden;background-color: transparent;padding: 10px;border: 1px transparent;][div=width: 100%;padding-right: 120px;height: 100%;overflow-y: scroll;font-align: justify;font-width: bold;][justify][size=14px][font=Alice]type stuff here[/font][/size][/justify][/div][/div]{/slide}
{slide=[bg=#ACDCDB][center][size=20px][font=Lora][color=white] whenever you're around I hate everything less[/color][/font][/size][/center][/bg]}[div=position: relative;width: calc(100%  - 0px);height: 120px;overflow: hidden;background-color: transparent;padding: 10px;border: 1px transparent;][div=width: 100%;padding-right: 120px;height: 100%;overflow-y: scroll;font-align: justify;font-width: bold;][justify][size=14px][font=Alice]type stuff here[/font][/size][/justify][/div][/div]{/slide}
{slide=[bg=#ACDCDB][center][size=20px][font=Lora][color=white][fa] fa-diamond fa-spin[/fa] [fa]fa-gratipay[/fa] [fa]fa-diamond fa-spin[/fa] [fa]fa-gratipay[/fa] [fa]fa-diamond fa-spin[/fa][/color][/font][/size][/center][/bg]}[div=position: relative;width: calc(100%  - 0px);height: 120px;overflow: hidden;background-color: transparent;padding: 10px;border: 1px transparent;][div=width: 100%;padding-right: 120px;height: 100%;overflow-y: scroll;font-align: justify;font-width: bold;][justify][size=14px][font=Alice]type stuff here[/font][/size][/justify][/div][/div]{/slide}
[/accordion][/border]
[size=12px][color=#B20000][font=Crimson Text]code by summerwine[/font][/color][/size]
[/border][/border][/div][/centerblock][/nobr]
 
Last edited:
two: elegance
- hover over left picture
- gray text box scrolls

[class=header] background:url('https://i.pinimg.com/originals/9a/ea/be/9aeabec39682bc3d832d8e0f09d8b28f.png'); width: 590px; height: 110px; margin-left: 361px; [/class] [class=pfp] background: url('https://66.media.tumblr.com/1545c0d82a4499f2c9ed429b651e6d94/tumblr_okieguKdOO1slzelwo1_540.png'); width: 230px; height: 350px; background-size: cover; margin-left: 361px; [/class] [class=pfptext] position: relative; width: 100%; height: 100%; opacity: 0; transition: opacity 1s; color: white; background-color: rgb(0,0,0,0.7); [/class] [class name=pfptext state=hover] opacity: 1; [/class] [div class=header]code by summerwine[/div]
[div class=pfp][div class=pfptext]
Cupcake ipsum dolor sit amet. Liquorice cake fruitcake. Chocolate bar tootsie roll toffee. Liquorice muffin carrot cake brownie jujubes halvah. Caramels cheesecake pudding cupcake toffee cotton candy sugar plum biscuit jelly. Cupcake donut chocolate apple pie gummi bears candy canes gummi bears bear claw. Icing muffin dragée chocolate cupcake topping chocolate bar. Chocolate bar gummies oat cake tootsie roll marzipan. Biscuit liquorice candy canes oat cake donut chocolate marshmallow sweet chocolate bar. Sugar plum tiramisu pie.
Cheesecake cake cookie. Marshmallow cotton candy soufflé sesame snaps danish powder dessert. Cake cake bear claw donut lollipop lemon drops sweet cotton candy. Jelly-o candy chocolate cake bear claw cookie chupa chups tootsie roll candy canes danish. Pie cake sesame snaps soufflé chocolate croissant bear claw sweet roll. Ice cream candy jelly-o sweet roll brownie jelly.
Cookie gummi bears cookie tiramisu. Carrot cake wafer pie danish tart toffee gummies candy. Icing chocolate bar cookie candy canes candy pastry chocolate bar oat cake. Lemon drops carrot cake chocolate biscuit pie jelly biscuit bear claw jelly. Lemon drops chupa chups apple pie biscuit pie. Donut halvah danish lemon drops carrot cake jelly cake brownie brownie. Caramels pastry bear claw cotton candy carrot cake cake lollipop bear claw apple pie.
Jelly dessert brownie cupcake. Bonbon bear claw sugar plum sweet roll lemon drops lemon drops jelly beans. Jujubes cookie fruitcake. Pastry lemon drops cotton candy croissant fruitcake jelly-o biscuit chocolate cake jelly beans. Bear claw chocolate bar jelly-o gummies dragée. Fruitcake sweet roll danish tootsie roll toffee icing. Cake liquorice macaroon candy gummi bears candy tootsie roll gummi bears muffin. Sesame snaps jelly halvah bear claw. Jelly tart wafer. Chupa chups croissant cheesecake croissant chocolate cake cookie.
Chocolate bar topping brownie marshmallow donut candy pudding pastry. Carrot cake sesame snaps danish cheesecake macaroon toffee caramels tootsie roll cookie. Lemon drops tart pastry candy canes candy chupa chups tart cake sesame snaps. Gingerbread halvah donut gingerbread bonbon jujubes. Liquorice macaroon candy canes candy bonbon muffin toffee. Pie soufflé marshmallow macaroon donut oat cake sugar plum liquorice. Pudding candy marzipan candy. Carrot cake wafer gummies sweet pastry. Gingerbread cake muffin. Gummi bears cheesecake lollipop cheesecake.
[/div][/div]
tumblr_phuuplGup31tg72yro3_540.gif
Cupcake ipsum dolor sit amet. Jelly chocolate chupa chups. Brownie jelly beans apple pie. Topping lollipop croissant soufflé jelly apple pie chocolate halvah donut. Powder croissant wafer pie topping gummies caramels. Lemon drops jelly sweet roll gummies. Lollipop gummies cheesecake. Cotton candy croissant cookie soufflé cake chupa chups gingerbread.

Cheesecake pastry oat cake jelly wafer pastry. Donut carrot cake donut dessert gummi bears danish muffin wafer. Toffee cupcake candy canes apple pie cotton candy soufflé cotton candy topping. Cake icing chupa chups. Powder macaroon croissant liquorice gummies tart gummies. Cupcake tiramisu dragée. Dessert sugar plum donut gummi bears dessert sweet fruitcake icing.

Muffin toffee cake sweet. Cupcake tart ice cream fruitcake pudding tart gummies brownie. Chupa chups biscuit powder marshmallow tart tart. Lemon drops jelly beans chocolate cotton candy macaroon cupcake apple pie chocolate bar pudding. Wafer biscuit pastry pie pastry lollipop wafer gummi bears chocolate. Chocolate bar muffin danish carrot cake jelly-o. Jujubes chocolate bar soufflé halvah jujubes tart cake. Gummies sugar plum chocolate toffee toffee pie candy canes.


Code:
[nobr]
[class=header]
background:url('https://i.pinimg.com/originals/9a/ea/be/9aeabec39682bc3d832d8e0f09d8b28f.png');
width: 590px;
height: 110px;
margin-left: 361px;
[/class]

[class=pfp]
background: url('https://66.media.tumblr.com/1545c0d82a4499f2c9ed429b651e6d94/tumblr_okieguKdOO1slzelwo1_540.png');
width: 230px;
height: 350px;
background-size: cover;
margin-left: 361px;
[/class]

[class=pfptext]
position: relative;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s;
color: white;
background-color: rgb(0,0,0,0.7);

[/class]

[class name=pfptext state=hover]
opacity: 1;
[/class]

[div class=header][center][size=16px][color=#B20000][font=Crimson Text]code by summerwine[/font][/color][/size][/center][/div]
[br][/br]
[Row]
[column=span14]
[div class=pfp][div class=pfptext][div=width: 100%;position: relative; height: 350px; opacity:1;overflow:hidden;][div=width:100%; padding-right:150px; height: 100%; overflow: auto; color: white; font-size: 0.9em; font-align: justify;][div=padding:10px;][font=Playfair Display][color=white]type more stuff here[/color][/font][/div][/div][/div][/div][/div][/column]
[column=span2]
[div=width: 100%;position: relative; height: 350px; opacity:1;overflow:hidden;][div=width:100%; padding-right:150px; height: 100%; overflow: auto; font-size: 0.9em; font-align: justify;][div=padding:10px;][bg=#bebebe][font=Playfair Display][color=black]type stuff here[/color][/font][/bg][/div][/div][/div][/column][/Row]
[/nobr]
 
Last edited:
three: very lazy
- tabs
- no scroll in tabs

[class=gif1] background:url('https://i.pinimg.com/originals/6a/a3/9f/6aa39fb791aa847139c9df584ff5f530.gif'); height: 240px; width: 405px; border-radius: 90px; border: 8px; border-style: double; border-color: #FFC9C9; margin: auto; [/class]
code by summerwine
[div class=gif1]


darling, ur different
[/div]
basics
words here
persona
more words here
extras
even more words here


Code:
[nobr]
[class=header]
background:url('add img address here');
height: 240px;
width: 405px;
border-radius: 90px;
border: 8px;
border-style: double;
border-color: #B2DFFB;
margin: auto;
[/class]

[center][size=12px][color=#a7adba][font=Crimson Text]code by summerwine[/font][/color][/size][/center]
[div class=header]
[br][/br]
[br][/br]
[br][/br]
[left][size=60px][font=Bad Script][color=white]header words here[/color][/font][/size][/left][/div]

[border=none][accordion=38%|bcenter]
{slide=[center][bg=#B2DFFB][size=25px][font=Playfair Display SC][color=white]tab 1[/color][/font][/size][/bg][/center]}[bg=#B2DFFB][font=Bitter][color=black][size=14px]words here, no scroll[/size][/color][/font][/bg]{/slide}

{slide=[center][bg=#B2DFFB][size=25px][font=Playfair Display SC][color=white]tab 2[/color][/font][/size][/bg][/center]}[bg=#B2DFFB][font=Bitter][color=black][size=14px]more words here, no scroll[/size][/color][/font][/bg]{/slide}

{slide=[center][bg=#B2DFFB][size=25px][font=Playfair Display SC][color=white]tab 3[/color][/font][/size][/bg][/center]}[bg=#B2DFFB][font=Bitter][color=black][size=14px]even more words here, no scroll[/size][/color][/font][/bg]{/slide}
[/accordion][/border][/nobr]
 
Last edited:
four: dreaming
- hover over image
- includes scroll when hovered


[class=wrapper] max-width:400px; margin:auto; [/class] [class=imagebox] width:90%; height:590px; background:url('https://66.media.tumblr.com/67be8e06d40c5b3e637b540c6efbed05/tumblr_okbew8zrNI1qbg3s6o4_400.png'); border-radius: 20px; [/class] [class=overlayparent] display: flex; align-items: center; justify-content: center; max-width:400px; height:500px; [/class] [class=overlay] display: flex; width:200px; height:200px; margin:auto; background:url('https://66.media.tumblr.com/fe251ff94301239a81d4dc19c716853c/tumblr_otkyvcosnS1w5071wo1_540.png'); border-radius: 100px; background-size: cover; [/class] [class=header] display: flex; align-items: center; justify-content: center; flex-flow: column nowrap; text-align:center; width:100%; font-family: 'Dancing Script', Impact; font-size:30px; color:#fff; font-size: 40px; [/class] [class=parent] opacity:0.0; position:relative; margin:-600px 10px 100px 500px; width:28%; height:570px; transition: 2.3s; border-radius: 17px; [/class] [class name=parent state=hover] opacity:1.0; width:1100px; height:590px; border-radius: 30px; padding:10px; [/class] [class=content] width:33%; height:585px; background-color: #6970AB; overflow: hidden; padding:2px; color:#313131; border-radius: 17px; text-align: left; [/class] [class=textbox] height: 585px; width: 100%; overflow-y: scroll; padding-right: 45px; [/class] [div class=wrapper][div class=imagebox][div class=overlayparent][div class=overlay][div class=header]




Dreaming
code by summerwine[/div][/div][/div][/div][/div] [div class=parent][div class=content][div class=textbox]
you were my everything
words and other stuff here
[/div][/div][/div]

Code:
[nobr]

[class=wrapper]
max-width:400px;
margin:auto;
[/class]

[class=imagebox]
width:90%;
height:590px;
background:url('https://66.media.tumblr.com/67be8e06d40c5b3e637b540c6efbed05/tumblr_okbew8zrNI1qbg3s6o4_400.png');
border-radius: 20px;
[/class]

[class=overlayparent]
display: flex;
align-items: center;
justify-content: center;
max-width:400px;
height:500px;
[/class]

[class=overlay]
display: flex;
width:200px;
height:200px;
margin:auto;
background:url('https://66.media.tumblr.com/fe251ff94301239a81d4dc19c716853c/tumblr_otkyvcosnS1w5071wo1_540.png');
border-radius: 100px;
background-size: cover;
[/class]

[class=header]
display: flex;
align-items: center;
justify-content: center;
flex-flow: column nowrap;
text-align:center;
width:100%;
font-family: 'Dancing Script', Impact;
font-size:30px;
color:#fff;
font-size: 40px;
[/class]

[class=parent]
opacity:0.0;
position:relative;
margin:-600px 10px 100px 500px;
width:28%;
height:570px;
transition:  2.3s;
border-radius: 17px;
[/class]

[class name=parent state=hover]
opacity:1.0;
width:1100px;
height:590px;
border-radius: 30px;
padding:10px;
[/class]

[class=content]
width:33%;
height:585px;
background-color: #6970AB;
overflow: hidden;
padding:2px;
color:#313131;
border-radius: 17px;
text-align: left;
[/class]

[class=textbox]
height: 585px;
width: 100%;
overflow-y: scroll;
padding-right: 45px;
[/class]



[div class=wrapper][div class=imagebox][div class=overlayparent][div class=overlay][div class=header]
[br][/br]
[br][/br]
[br][/br]
[br][/br]
[br][/br]
Dreaming
[br][/br]
[size=10px][color=#ffffff][font=Crimson Text]code by summerwine[/font][/color][/size][/div][/div][/div][/div][/div]

[div class=parent][div class=content][div class=textbox]

[Row][Column=span3]
[div=background:url('https://66.media.tumblr.com/cdf174efc184853abf7374afa5f808f3/tumblr_oo5g2ySUPr1vqe51yo3_250.png'); background-size:cover; border-radius:50px; height:100px; width:100px;] [/div]

[div=background:url('https://i.pinimg.com/originals/2a/45/34/2a45345c1dc5d89dc16cf641aea29d40.png'); background-size:cover; border-radius:50px; height:100px; width:100px;] [/div][/Column]

[Column=span3]
[div=background:url('https://i.imgur.com/KZJ5mRn.jpg'); background-size:cover; border-radius:100px; height:200px; width:200px;] [/div][/Column]

[/Row]

[center][size=55px][color=#ffffff][font=Dancing Script]you were my everything[/font][/color][/size]

[color=white][size=17px][font=EB Garamond]
words and other stuff here
[/font][/size]
[/color][/center][/div][/div][/div]

[/nobr]
 
Last edited:
five: my entire universe
- scrolls under quote/header
















character name
code by summerwine
you deserve the entire universe, but i'm just a star...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae varius nisi, sit amet egestas magna. Donec semper cursus magna. Mauris quis pretium lacus. Donec nec lacus vitae turpis pharetra efficitur sed ultricies tortor. Donec quis nunc neque. Ut a auctor metus. Vivamus in scelerisque leo. Proin nec sollicitudin ante. Vestibulum vel lectus sed sapien rutrum tempus sit amet eget enim. Praesent id urna ut est congue porttitor in sit amet erat. Integer id venenatis quam. Vestibulum eget metus sit amet purus sagittis cursus. Fusce scelerisque, libero a lobortis dignissim, ipsum arcu efficitur metus, eu dictum elit nunc ac dolor. Fusce urna nunc, congue eget dignissim vitae, auctor vitae ipsum. In hac habitasse platea dictumst. Fusce nec justo eget arcu tempus commodo id efficitur felis. Pellentesque fermentum interdum congue. Pellentesque sagittis ante velit, eleifend mattis massa lacinia ut. Fusce iaculis dictum posuere. Nunc blandit est in sagittis volutpat. Pellentesque id posuere dolor. Proin efficitur feugiat purus. Donec nisl felis, consectetur ut posuere eu, tincidunt sit amet risus. Nam non felis commodo turpis rhoncus rhoncus id eu odio. Quisque non est vitae magna porttitor venenatis. Maecenas imperdiet euismod lorem, vel luctus ante cursus ut. In laoreet nisl eu porttitor maximus. Aliquam erat volutpat. Proin condimentum posuere enim et consequat. Nunc dictum mi laoreet gravida mollis. Curabitur et eros congue, efficitur purus vel, lacinia felis. Sed ac malesuada justo. Nulla scelerisque est nisi, id egestas felis semper nec. Morbi quis elit tellus. Vivamus at felis quis orci convallis consectetur. Fusce libero nibh, imperdiet vitae volutpat eu, viverra ac augue. Nulla malesuada auctor elementum. Praesent fermentum sapien et nulla lobortis vestibulum et eu ex. Duis volutpat sapien vel lacus posuere eleifend. Sed sit amet elit tincidunt, varius nunc vitae, porttitor arcu. Pellentesque ut nulla tincidunt ante scelerisque rutrum. Vestibulum placerat, lorem quis posuere tempor, elit lectus tempus neque, ac efficitur libero tortor eget diam. Etiam fringilla, turpis at sollicitudin maximus, risus magna ultrices lorem, eu vestibulum magna sapien et velit. Sed vitae tempor erat. Sed a arcu sodales, auctor diam vitae, ullamcorper odio. In placerat ipsum id semper scelerisque. Nullam laoreet augue erat, a venenatis sem gravida quis. Pellentesque quis tellus nec risus interdum egestas. Duis commodo viverra felis ac iaculis. Aenean id fermentum lectus. Morbi efficitur felis a neque vulputate, sagittis porta metus gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam sem metus, efficitur et est et, dignissim varius elit. Fusce eget arcu ut orci scelerisque dapibus vel facilisis nisl. Cras auctor lectus vel eros ullamcorper rhoncus. Aliquam sed sem neque. Quisque rhoncus libero a neque accumsan, ac facilisis orci accumsan. Vestibulum aliquam tortor ac nisi congue, quis tempor odio ultrices. Aenean a congue neque. Etiam volutpat mauris non arcu placerat, sed pretium magna malesuada. Pellentesque pellentesque nunc ut malesuada rhoncus. Nam et felis venenatis, bibendum purus eu, tempus tellus.

Code:
[nobr][Row][centerblock=93][Column=span1][div= background: url('https://archziner.com/wp-content/uploads/2020/01/photo-collage-with-dark-black-purple-aesthetic-consisitng-of-photos-from-space-pink-aesthetic-background-moon-phases.jpg'); height: 450px; width: 280px; background-size: cover; box-shadow: 10px 10px 10px #000; margin-bottom: 20px; border-radius: 5px;]
[br][/br][br][/br][br][/br][br][/br][br][/br][br][/br][br][/br][br][/br][br][/br][br][/br][br][/br][br][/br][br][/br][br][/br][center][font=Bebas Neue][size=40px][color=white]character name[/color][/size][/font][br][/br][font=Times New Roman][size=10px][color=white]code by summerwine[/color][/size][/font][/center][/div][/Column][/centerblock]

[centerblock=50][Column=span6][font=Bebas Neue][size=25px]you deserve the entire universe, but i'm just a star...[/size][/font][div=position: relative;width: calc(100%  - 20px);height: 410px;overflow: hidden;background-color: transparent;padding: 0px;border-top:5px double #000;][div=width: 100%;padding-right: 145px;height: 100%;overflow-y: scroll;font-align: justify;font-width: bold;][font=Oxygen Mono]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae varius nisi, sit amet egestas magna. Donec semper cursus magna. Mauris quis pretium lacus. Donec nec lacus vitae turpis pharetra efficitur sed ultricies tortor. Donec quis nunc neque. Ut a auctor metus. Vivamus in scelerisque leo. Proin nec sollicitudin ante. Vestibulum vel lectus sed sapien rutrum tempus sit amet eget enim. Praesent id urna ut est congue porttitor in sit amet erat. Integer id venenatis quam. Vestibulum eget metus sit amet purus sagittis cursus. Fusce scelerisque, libero a lobortis dignissim, ipsum arcu efficitur metus, eu dictum elit nunc ac dolor.

Fusce urna nunc, congue eget dignissim vitae, auctor vitae ipsum. In hac habitasse platea dictumst. Fusce nec justo eget arcu tempus commodo id efficitur felis. Pellentesque fermentum interdum congue. Pellentesque sagittis ante velit, eleifend mattis massa lacinia ut. Fusce iaculis dictum posuere. Nunc blandit est in sagittis volutpat. Pellentesque id posuere dolor. Proin efficitur feugiat purus. Donec nisl felis, consectetur ut posuere eu, tincidunt sit amet risus.

Nam non felis commodo turpis rhoncus rhoncus id eu odio. Quisque non est vitae magna porttitor venenatis. Maecenas imperdiet euismod lorem, vel luctus ante cursus ut. In laoreet nisl eu porttitor maximus. Aliquam erat volutpat. Proin condimentum posuere enim et consequat. Nunc dictum mi laoreet gravida mollis. Curabitur et eros congue, efficitur purus vel, lacinia felis. Sed ac malesuada justo. Nulla scelerisque est nisi, id egestas felis semper nec. Morbi quis elit tellus. Vivamus at felis quis orci convallis consectetur. Fusce libero nibh, imperdiet vitae volutpat eu, viverra ac augue. Nulla malesuada auctor elementum.

Praesent fermentum sapien et nulla lobortis vestibulum et eu ex. Duis volutpat sapien vel lacus posuere eleifend. Sed sit amet elit tincidunt, varius nunc vitae, porttitor arcu. Pellentesque ut nulla tincidunt ante scelerisque rutrum. Vestibulum placerat, lorem quis posuere tempor, elit lectus tempus neque, ac efficitur libero tortor eget diam. Etiam fringilla, turpis at sollicitudin maximus, risus magna ultrices lorem, eu vestibulum magna sapien et velit. Sed vitae tempor erat. Sed a arcu sodales, auctor diam vitae, ullamcorper odio. In placerat ipsum id semper scelerisque.

Nullam laoreet augue erat, a venenatis sem gravida quis. Pellentesque quis tellus nec risus interdum egestas. Duis commodo viverra felis ac iaculis. Aenean id fermentum lectus. Morbi efficitur felis a neque vulputate, sagittis porta metus gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam sem metus, efficitur et est et, dignissim varius elit. Fusce eget arcu ut orci scelerisque dapibus vel facilisis nisl. Cras auctor lectus vel eros ullamcorper rhoncus. Aliquam sed sem neque. Quisque rhoncus libero a neque accumsan, ac facilisis orci accumsan. Vestibulum aliquam tortor ac nisi congue, quis tempor odio ultrices. Aenean a congue neque. Etiam volutpat mauris non arcu placerat, sed pretium magna malesuada. Pellentesque pellentesque nunc ut malesuada rhoncus. Nam et felis venenatis, bibendum purus eu, tempus tellus.
[/font][/div][/div][/Column][/centerblock][/Row][/nobr]
[/nobr]
 
six: canyon moon
- each tab has a scroll

[class=tabs] background-color: #954105 ; color: #e4eeff; font-size: 18px; font-weight: bold; line-height: 1; margin: auto; min-width: 350px; text-align: center; width: 10px; [/class] [class=tab] cursor: pointer; display: inline-block; width: 90px; [/class] [class name=tab state=hover] opacity: 0.5; [/class] [script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} Basics) (show tabsContentBasics) if (eq ${currentTab} Persona) (show tabsContentPersona) if (eq ${currentTab} Backstory) (show tabsContentBackstory) [/script]




code by summerwine
[div class=tabs][div class=tab style="border-top-left-radius: 5px; border-bottom-left-radius: 5px;"]Basics[/div][div class=tab]Persona[/div][div class=tab style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"]Backstory[/div][/div] [div class="tabsContent tabsContentBasics"]


words and stuff here
[/div] [div class="tabsContent tabsContentPersona" style="display: none;"]

more words and stuff here
[/div] [div class="tabsContent tabsContentBackstory" style="display: none;"]

even more words and stuff here
[/div]


Code:
[nobr]
    [class=tabs]
        background-color: #954105 ;
        color: #e4eeff;
        font-size: 18px;
        font-weight: bold;
        line-height: 1;
        margin: auto;
        min-width: 350px;
        text-align: center;
        width: 10px;
    [/class]
    
    [class=tab]
        cursor: pointer;
        display: inline-block;
        width: 90px;
    [/class]

    [class name=tab state=hover]
opacity: 0.5;
    [/class]
    
    [script class=tab on=click]
        hide tabsContent
        set currentTab (getText)
        if (eq ${currentTab} Basics) (show tabsContentBasics)
        if (eq ${currentTab} Persona) (show tabsContentPersona)
        if (eq ${currentTab} Backstory) (show tabsContentBackstory)
    [/script]

[centerblock=95][Row]

[Column=span1]
  [div=background:url('https://i.pinimg.com/474x/92/a6/2a/92a62a4ae491713c2ce55fad10cb68aa.jpg'); border:double 5px white; width:150px; height:150px; background-size:cover;] [/div]
                 [br][/br]
  [div=background:url('https://66.media.tumblr.com/8b2a82a8f2a0e2474dd97e973d1a0ff1/a4bb843730c9dc0a-e4/s640x960/0acb39ee7ab7dfbf2d95ccde2268eff01caaff01.jpg'); border:double 5px white; width:150px; height:150px; background-size:cover;] [/div]
                 [br][/br]
  [div=background:url('https://data.whicdn.com/images/272563874/original.jpg'); border:double 5px white; width:150px; height:150px; background-size:cover;] [/div]
[/Column]

[Column=span1]
  [div=background:url('https://66.media.tumblr.com/a3f9d0d3acbb218389e74f1ca885058a/tumblr_pxdd3wtjaj1va9qj9o3_250.jpg'); border:double 5px white; width:140px; height:140px; background-size:cover;] [/div]
                 [br][/br]
  [div=background:url('https://wallpaperaccess.com/full/1208376.png'); border:double 5px white; width:140px; height:140px; background-size:cover;] [/div]
                 [br][/br]
  [div=background:url('https://i.pinimg.com/236x/a7/73/b8/a773b844bc3631d44c34ff9fc99a3f39.jpg'); border:double 5px white; width:140px; height:140px; background-size:cover;] [/div]
[size=12px][color=#ff724c][font=Crimson Text]code by summerwine[/font][/color][/size]
[/Column]

[Column=span3] 
[div class=tabs][div class=tab style="border-top-left-radius: 5px; border-bottom-left-radius: 5px;"][font=Mr Dafoe]Basics[/font][/div][div class=tab][font=Mr Dafoe]Persona[/font][/div][div class=tab style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"][font=Mr Dafoe]Backstory[/font][/div][/div]
    
    [div class="tabsContent tabsContentBasics"]

[div=position: relative; width: calc(100%  - 20px);height: 560px; overflow: hidden; opacity:1; padding: 10px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; color: black; font-size: 0.9em; font-align: justify;]

[Row]
[Column=span4][div=background:url('https://66.media.tumblr.com/c09572073b94aa809bac949b8916f78b/tumblr_pxdd3wtjaj1va9qj9o2_250.jpg'); width: 180px; height: 290px; background-size:cover; border: double white 5px;] [/div]
[br][/br]
[div=background:url('https://i.pinimg.com/originals/33/6c/47/336c47fa37250b4b4c4265ff36334856.jpg'); width: 250px; height: 250px; background-size: cover; border-radius: 100px; height: 120px; width: 120px; margin-left: 35px; border: double white 5px] [/div]
[br][/br]
[div=background:url('https://66.media.tumblr.com/e6c686ad3ac7223cff79285bb90fc9f1/tumblr_pxdd3wtjaj1va9qj9o4_250.jpg'); width: 180px; height: 290px; background-size:cover; border: double white 5px;] [/div]
[/Column]
[font=Open Sans]
[color=#467C8D]
[Column=span4]
words and stuff here[/Column][/color][/font]
[/Row][/div][/div][/div]
    
    [div class="tabsContent tabsContentPersona" style="display: none;"]

[div=position: relative; width: calc(100%  - 20px);height: 560px; overflow: hidden; opacity:1; padding: 10px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; color: black; font-size: 0.9em; font-align: justify;][font=Open Sans][color=#467C8D]

[div=background:url('https://i.pinimg.com/736x/09/85/b1/0985b144eb131ff1d4380aa68f161e15.jpg'); width: 450px; height: 150px; background-size:cover; border: double white 5px;] [/div]
[br][/br]
more words and stuff here
[/color][/font][/div][/div][/div]
      
    [div class="tabsContent tabsContentBackstory" style="display: none;"]

[div=position: relative; width: calc(100%  - 20px);height: 560px; overflow: hidden; opacity:1; padding: 10px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; color: black; font-size: 0.9em; font-align: justify;][font=Open Sans][color=#467C8D]

[div=background:url('https://i.pinimg.com/originals/3f/5f/5c/3f5f5cc83868fd3f56a9344722faf539.jpg'); width: 450px; height: 150px; background-size:cover; border: double white 5px;] [/div]
[br][/br]
even more words and stuff here
[/color][/font][/div][/div][/div][/Column][/Row]

[/centerblock][/nobr]
 

Users who are viewing this thread

Back
Top