• 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 Forest of Simplicity | Simple Codes

StoneWolf18

Within the Depths of a Dream
Alright, I don't understand most of how the new BBcode+ works so why stress over learning that when I can just make some pretty, simplistic things?

Feel free to use, just don't remove the credit. ^_^
 
Mountain Scene
Pretty and featuring a hidden scrollbar. What more could you want? :D

[class name=stoneBackground] height: 440px; width: calc(100% + 17px); background: white; margin: auto; overflow: auto; [/class] [class name=stoneImage] height: 480px; width: 100%; background-image: url(https://cdn.shopify.com/s/files/1/0765/0807/products/Misty_Mountain_Wall_Mural_Mountain_Wall_Decal_large.png?v=1495142921); background-size: 100%; background-repeat: no-repeat; [/class] [class name=stoneHeader] margin: auto; padding: 5px; text-align: center; font-size: 50px; color: #1c3d41; [/class] [class name=stoneArrow] margin-top: 150px; text-align: center; font-size: 60px; color: #e2eae8; [/class] [class name=stoneContent] padding: 5px; color: #1c3d41; margin-top: -10px; [/class] [class name=stoneWrapper] margin: auto; overflow: hidden; width: 440px; [/class] [class name=stoneCredit] font-size: 10px; color: #426369; text-align: right; [/class] [div class=stoneWrapper][div class=stoneBackground][div class=stoneImage][div class=stoneHeader]
Header
[/div][div class=stoneArrow]⇟[/div][/div][div class=stoneHeader]
Header
[/div][div class=stoneContent]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat turpis odio, vel dapibus magna imperdiet non. Pellentesque nec urna eu quam dapibus consectetur. Phasellus vulputate congue dolor in efficitur. Fusce vel consequat sapien. Integer nec nisl eget mauris facilisis varius. Sed fringilla felis sed arcu condimentum, sed ullamcorper purus tristique. Aliquam justo neque, ornare at accumsan ut, ultricies ut enim. Proin consequat id lorem sit amet imperdiet. Sed facilisis ornare ex id porttitor.

Donec pulvinar neque dolor, non interdum ligula laoreet in. Quisque tempor aliquam sem non accumsan. In ut ullamcorper dui. Aenean sit amet ligula massa. Suspendisse a nunc lectus. Donec pellentesque enim urna, ut sagittis urna rhoncus eget. Proin ac nisl tempus, mattis nisi vitae, mollis ante. Nullam nec libero pharetra nulla euismod maximus vitae dignissim ante. Suspendisse vehicula pellentesque hendrerit. Ut eget euismod risus.

Aenean justo enim, imperdiet sed tellus et, facilisis congue sem. Duis eu tellus dui. Nulla sed sodales mauris. Morbi convallis vel nulla sagittis dapibus. Curabitur et lorem nec tellus rhoncus gravida id vehicula orci. In hac habitasse platea dictumst. Vivamus tristique varius rutrum.

Suspendisse tempus efficitur gravida. Maecenas sit amet massa ultrices, congue arcu consequat, tempus nunc. Pellentesque tincidunt, tellus ac sagittis tincidunt, sapien velit egestas purus, non pellentesque felis neque sed erat. Cras porta odio sed rhoncus pellentesque. Phasellus suscipit elit quis tellus eleifend, eget feugiat mauris suscipit. In quis blandit tellus. Sed convallis rhoncus sagittis. Cras scelerisque ac velit quis tincidunt.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi vestibulum euismod egestas. Pellentesque quis nunc pharetra, ornare ipsum a, condimentum felis. Donec et faucibus purus. Integer id eleifend purus. Vivamus ultricies tincidunt felis, varius blandit arcu luctus sit amet. Nulla facilisi. Mauris a varius sem. Nunc vel ullamcorper ligula. Phasellus sit amet leo nec sapien fermentum iaculis. Sed et eros a est aliquet varius et nec leo. Aliquam quis velit interdum, dignissim velit quis, placerat justo. Nullam lobortis dui sed leo bibendum scelerisque.
[/div][/div][div class=stoneCredit]Coded By || StoneWolf18 StoneWolf18 [/div][/div]

Code:
[nobr]
[class name=stoneBackground]
height: 440px;
width: calc(100% + 17px);
background: white;
margin: auto;
overflow: auto;
[/class]
[class name=stoneImage]
height: 480px;
width: 100%;
background-image: url(https://cdn.shopify.com/s/files/1/0765/0807/products/Misty_Mountain_Wall_Mural_Mountain_Wall_Decal_large.png?v=1495142921);
background-size: 100%;
background-repeat: no-repeat;
[/class]
[class name=stoneHeader]
margin: auto;
padding: 5px;
text-align: center;
font-size: 50px;
color: #1c3d41;
[/class]
[class name=stoneArrow]
margin-top: 150px;
text-align: center;
font-size: 60px;
color: #e2eae8;
[/class]
[class name=stoneContent]
padding: 5px;
color: #1c3d41;
margin-top: -10px;
[/class]
[class name=stoneWrapper]
margin: auto;
overflow: hidden;
width: 440px;
[/class]
[class name=stoneCredit]
font-size: 10px;
color: #426369;
text-align: right;
[/class]
[/nobr][div class=stoneWrapper][div class=stoneBackground][div class=stoneImage][div class=stoneHeader][div=padding: 10px;][font=Julius Sans One]Header[/font][/div][/div][div class=stoneArrow]⇟[/div][/div][div class=stoneHeader][div=margin-top: -30px;][font=Julius Sans One]Header[/font][/div][/div][div class=stoneContent][font=EB Garamond]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat turpis odio, vel dapibus magna imperdiet non. Pellentesque nec urna eu quam dapibus consectetur. Phasellus vulputate congue dolor in efficitur. Fusce vel consequat sapien. Integer nec nisl eget mauris facilisis varius. Sed fringilla felis sed arcu condimentum, sed ullamcorper purus tristique. Aliquam justo neque, ornare at accumsan ut, ultricies ut enim. Proin consequat id lorem sit amet imperdiet. Sed facilisis ornare ex id porttitor.

Donec pulvinar neque dolor, non interdum ligula laoreet in. Quisque tempor aliquam sem non accumsan. In ut ullamcorper dui. Aenean sit amet ligula massa. Suspendisse a nunc lectus. Donec pellentesque enim urna, ut sagittis urna rhoncus eget. Proin ac nisl tempus, mattis nisi vitae, mollis ante. Nullam nec libero pharetra nulla euismod maximus vitae dignissim ante. Suspendisse vehicula pellentesque hendrerit. Ut eget euismod risus.

Aenean justo enim, imperdiet sed tellus et, facilisis congue sem. Duis eu tellus dui. Nulla sed sodales mauris. Morbi convallis vel nulla sagittis dapibus. Curabitur et lorem nec tellus rhoncus gravida id vehicula orci. In hac habitasse platea dictumst. Vivamus tristique varius rutrum.

Suspendisse tempus efficitur gravida. Maecenas sit amet massa ultrices, congue arcu consequat, tempus nunc. Pellentesque tincidunt, tellus ac sagittis tincidunt, sapien velit egestas purus, non pellentesque felis neque sed erat. Cras porta odio sed rhoncus pellentesque. Phasellus suscipit elit quis tellus eleifend, eget feugiat mauris suscipit. In quis blandit tellus. Sed convallis rhoncus sagittis. Cras scelerisque ac velit quis tincidunt.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi vestibulum euismod egestas. Pellentesque quis nunc pharetra, ornare ipsum a, condimentum felis. Donec et faucibus purus. Integer id eleifend purus. Vivamus ultricies tincidunt felis, varius blandit arcu luctus sit amet. Nulla facilisi. Mauris a varius sem. Nunc vel ullamcorper ligula. Phasellus sit amet leo nec sapien fermentum iaculis. Sed et eros a est aliquet varius et nec leo. Aliquam quis velit interdum, dignissim velit quis, placerat justo. Nullam lobortis dui sed leo bibendum scelerisque.
[/font][/div][/div][div class=stoneCredit][font=EB Garamond]Coded By || [USER=12813]@StoneWolf18[/USER][/font][/div][/div]
 
Last edited:
Orange Jazz
Not really sure why I made this one, honestly...

[class name=Background] margin: auto; width: 100%; height: auto; border: 3px solid #f6994c; border-radius: 10px; background: #f4f1ea; [/class] [class name=Banner] width: 100%; height: 100px; background: #f6994c; margin-top: 30px; [/class] [class name=Header] font-size: 50px; text-align: center; color: #f4f1ea; [/class] [class name=imageCard] width: 150px; height: 180px; margin: auto; background-image: url(https://c1.staticflickr.com/9/8054/8122654173_51a5106c7d_b.jpg); background-size: 100%; margin-top: -30px; [/class] [class name=SubheaderL] width: 150px; height: 40px; background: #f6994c; font-size: 30px; color: white; text-align: center; [/class] [class name=SubheaderR] width: 150px; height: 40px; background: #f6994c; font-size: 30px; color: white; text-align: center; float: right; [/class] [class name=Paragraph] width: 98%; height: auto; padding: 5px; color: black; font-size: 12px; [/class] [class name=Clear] clear: both; [/class] [class name=stoneCredit] font-size: 10px; color: #f6994c; text-align: right; [/class] [class name=stoneWrapper] margin: auto; width: 500px; height: auto; [/class] [div class=stoneWrapper][div class=Background][div class=Banner][div class=Header]Header[/div][/div][div class=imageCard][/div][div class=SubheaderL]Subheader[/div][div class=Paragraph]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum lectus ut commodo pellentesque. In aliquam gravida massa id pulvinar. Vivamus nisi enim, hendrerit molestie consectetur eu, ultrices vel felis. Integer gravida lobortis ipsum, sit amet dignissim diam posuere eu. Sed venenatis, sem vel congue laoreet, leo nulla malesuada arcu, sed convallis mi mauris ac est. Vestibulum posuere erat eu aliquam vehicula. Proin non tristique nibh, in venenatis neque. Nunc tincidunt, ipsum at molestie convallis, lacus erat condimentum lorem, eget dignissim risus neque nec tortor. Phasellus nibh diam, consectetur in lacus vitae, dignissim rhoncus purus. Suspendisse ornare mauris id auctor tempus. Donec pretium ipsum eget augue condimentum, a vestibulum mi volutpat.[/div][div class=SubheaderR]Subheader[/div][div class=Clear][/div][div class=Paragraph]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum lectus ut commodo pellentesque. In aliquam gravida massa id pulvinar. Vivamus nisi enim, hendrerit molestie consectetur eu, ultrices vel felis. Integer gravida lobortis ipsum, sit amet dignissim diam posuere eu. Sed venenatis, sem vel congue laoreet, leo nulla malesuada arcu, sed convallis mi mauris ac est. Vestibulum posuere erat eu aliquam vehicula. Proin non tristique nibh, in venenatis neque. Nunc tincidunt, ipsum at molestie convallis, lacus erat condimentum lorem, eget dignissim risus neque nec tortor. Phasellus nibh diam, consectetur in lacus vitae, dignissim rhoncus purus. Suspendisse ornare mauris id auctor tempus. Donec pretium ipsum eget augue condimentum, a vestibulum mi volutpat.[/div][/div][div class=stoneCredit]Coded By || StoneWolf18 StoneWolf18 [/div][/div]

Code:
[Nobr]
[class name=Background]
margin: auto;
width: 100%;
height: auto;
border: 3px solid #f6994c;
border-radius: 10px;
background: #f4f1ea;
[/class]
[class name=Banner]
width: 100%;
height: 100px;
background: #f6994c;
margin-top: 30px;
[/class]
[class name=Header;
font-size: 50px;
text-align: center;
color: #f4f1ea;
[/class]
[class name=imageCard]
width: 150px;
height: 180px;
margin: auto;
background-image: url(https://c1.staticflickr.com/9/8054/8122654173_51a5106c7d_b.jpg);
background-size: 100%;
margin-top: -30px;
[/class]
[class name=SubheaderL]
width: 150px;
height: 40px;
background: #f6994c;
font-size: 30px;
color: white;
text-align: center;
[/class]
[class name=SubheaderR]
width: 150px;
height: 40px;
background: #f6994c;
font-size: 30px;
color: white;
text-align: center;
float: right;
[/class]
[class name=Paragraph]
width: 98%;
height: auto;
padding: 5px;
color: black;
font-size: 12px;
[/class]
[class name=Clear]
clear: both;
[/class]
[class name=stoneCredit]
font-size: 10px;
color: #f6994c;
text-align: right;
[/class]
[class name=stoneWrapper]
margin: auto;
width: 500px;
height: auto;
[/class]
[/nobr][div class=stoneWrapper][div class=Background][div class=Banner][div class=Header][font=Supermercado One]Header[/font][/div][/div][div class=imageCard][/div][div class=SubheaderL][font=Supermercado One]Subheader[/font][/div][div class=Paragraph]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum lectus ut commodo pellentesque. In aliquam gravida massa id pulvinar. Vivamus nisi enim, hendrerit molestie consectetur eu, ultrices vel felis. Integer gravida lobortis ipsum, sit amet dignissim diam posuere eu. Sed venenatis, sem vel congue laoreet, leo nulla malesuada arcu, sed convallis mi mauris ac est. Vestibulum posuere erat eu aliquam vehicula. Proin non tristique nibh, in venenatis neque. Nunc tincidunt, ipsum at molestie convallis, lacus erat condimentum lorem, eget dignissim risus neque nec tortor. Phasellus nibh diam, consectetur in lacus vitae, dignissim rhoncus purus. Suspendisse ornare mauris id auctor tempus. Donec pretium ipsum eget augue condimentum, a vestibulum mi volutpat.[/div][div class=SubheaderR][font=Supermercado One]Subheader[/font][/div][div class=Clear][/div][div class=Paragraph]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum lectus ut commodo pellentesque. In aliquam gravida massa id pulvinar. Vivamus nisi enim, hendrerit molestie consectetur eu, ultrices vel felis. Integer gravida lobortis ipsum, sit amet dignissim diam posuere eu. Sed venenatis, sem vel congue laoreet, leo nulla malesuada arcu, sed convallis mi mauris ac est. Vestibulum posuere erat eu aliquam vehicula. Proin non tristique nibh, in venenatis neque. Nunc tincidunt, ipsum at molestie convallis, lacus erat condimentum lorem, eget dignissim risus neque nec tortor. Phasellus nibh diam, consectetur in lacus vitae, dignissim rhoncus purus. Suspendisse ornare mauris id auctor tempus. Donec pretium ipsum eget augue condimentum, a vestibulum mi volutpat.[/div][/div][div class=stoneCredit]Coded By || [USER=12813]@StoneWolf18[/USER][/div][/div]
 
Google Docs
I KNOW THIS ISN'T SIMPLE. I just couldn't help myself. Aside from achieving maximum mind-fuckery, its pretty easy to add more pages. Just add another set of stonePage and stoneBody after closing the ones before it and it'll work just fine.


[class name=stoneBackground] width: 100%; height: 1000px; background: #EEEEEE; overflow-y: scroll; overflow-x: hidden; [/class] [class name=stoneSticky] position: sticky; top: 0; [/class] [class name=stoneTopRibbon] width: 100%; height: 60px; background: #FFFFFE; [/class] [class name=stoneDocSymbol] width: 40px; height: 60px; background-image: url(https://image.prntscr.com/image/rdR2QZ5uRcOKHd0kgAmObw.png); display: inline-block; [/class] [class name=stoneToolBarWrap] width: 520px; height: 60px; padding: 5px; display: inline-block; position: relative; top: -10px; left: 16px; [/class] [class name=stoneDocTitle] width: auto; height: 30px; color: grey; font-size: 20px; [/class] [class name=stoneToolBar] height: 30px; color: black; font-size: 14px; margin-right: 20px; display: inline-block; [/class] [class name=stoneLowerRibbon] height: 35px; width: 100%; background: #FFFFFE; border-top: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; display: inline-block; position: relative; top: -20px; [/class] [class name=stoneToolImage] background-image: url(https://image.prntscr.com/image/0xbXitliQNKt9ut0stRQ2Q.png); background-repeat: no-repeat; display: inline-block; height: 35px; width: 100%; margin-left: 60px; [/class] [class name=stonePage] margin: auto; width: 55%; height: 850px; background: white; border: 1px solid lightgrey; margin-top: 45px; margin-bottom: 45px; [/class] [class name=stoneBody] margin: auto; margin-top: 40px; height: 700px; width: 80%; padding: 20px; color: black; overflow: hidden; [/class] [class name=stoneCredit] font-size: 10px; color: #4286F5; text-align: right; [/class] [div class=stoneBackground][div class=stoneWrap][div class=stoneSticky][div class=stoneTopRibbon][div class=stoneDocSymbol][/div][div class=stoneToolBarWrap][div class=stoneDocTitle]Untitled Document[/div][div class=stoneToolBar]File[/div][div class=stoneToolBar]Edit[/div][div class=stoneToolBar]View[/div][div class=stoneToolBar]Insert[/div][div class=stoneToolBar]Format[/div][div class=stoneToolBar]Tools[/div][div class=stoneToolBar]Table[/div][div class=stoneToolBar]Add-ons[/div][div class=stoneToolBar]Help[/div][/div][div class=stoneLowerRibbon][div class=stoneToolImage][/div][/div][/div][/div][div class=stonePage][div class=stoneBody]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat turpis odio, vel dapibus magna imperdiet non. Pellentesque nec urna eu quam dapibus consectetur. Phasellus vulputate congue dolor in efficitur. Fusce vel consequat sapien. Integer nec nisl eget mauris facilisis varius. Sed fringilla felis sed arcu condimentum, sed ullamcorper purus tristique. Aliquam justo neque, ornare at accumsan ut, ultricies ut enim. Proin consequat id lorem sit amet imperdiet. Sed facilisis ornare ex id porttitor.

Donec pulvinar neque dolor, non interdum ligula laoreet in. Quisque tempor aliquam sem non accumsan. In ut ullamcorper dui. Aenean sit amet ligula massa. Suspendisse a nunc lectus. Donec pellentesque enim urna, ut sagittis urna rhoncus eget. Proin ac nisl tempus, mattis nisi vitae, mollis ante. Nullam nec libero pharetra nulla euismod maximus vitae dignissim ante. Suspendisse vehicula pellentesque hendrerit. Ut eget euismod risus.

Aenean justo enim, imperdiet sed tellus et, facilisis congue sem. Duis eu tellus dui. Nulla sed sodales mauris. Morbi convallis vel nulla sagittis dapibus. Curabitur et lorem nec tellus rhoncus gravida id vehicula orci. In hac habitasse platea dictumst. Vivamus tristique varius rutrum.

Suspendisse tempus efficitur gravida. Maecenas sit amet massa ultrices, congue arcu consequat, tempus nunc. Pellentesque tincidunt, tellus ac sagittis tincidunt, sapien velit egestas purus, non pellentesque felis neque sed erat. Cras porta odio sed rhoncus pellentesque. Phasellus suscipit elit quis tellus eleifend, eget feugiat mauris suscipit. In quis blandit tellus. Sed convallis rhoncus sagittis. Cras scelerisque ac velit quis tincidunt.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi vestibulum euismod egestas. Pellentesque quis nunc pharetra, ornare ipsum a, condimentum felis. Donec et faucibus purus. Integer id eleifend purus. Vivamus ultricies tincidunt felis, varius blandit arcu luctus sit amet. Nulla facilisi. Mauris a varius sem. Nunc vel ullamcorper ligula. Phasellus sit amet leo nec sapien fermentum iaculis. Sed et eros a est aliquet varius et nec leo. Aliquam quis velit interdum, dignissim velit quis, placerat justo. Nullam lobortis dui sed leo bibendum scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat turpis odio, vel dapibus magna imperdiet non. Pellentesque nec urna eu quam dapibus consectetur. Phasellus vulputate congue dolor in efficitur. Fusce vel consequat sapien. Integer nec nisl eget mauris facilisis varius. Sed fringilla felis sed arcu condimentum, sed ullamcorper purus tristique. Aliquam justo neque, ornare at accumsan ut, ultricies ut enim. Proin consequat id lorem sit amet imperdiet. Sed facilisis ornare ex id porttitor.

Donec pulvinar neque dolor, non interdum ligula laoreet in. Quisque tempor aliquam sem non accumsan. In ut ullamcorper dui. Aenean sit amet ligula massa. Suspendisse a nunc lectus. Donec pellentesque enim urna, ut sagittis urna rhoncus eget. Proin ac nisl tempus, mattis nisi vitae, mollis ante. Nullam nec libero pharetra nulla euismod maximus vitae dignissim ante. Suspendisse vehicula pellentesque hendrerit. Ut eget euismod risus.

Aenean justo enim, imperdiet sed tellus et, facilisis congue sem. Duis eu tellus dui. Nulla sed sodales mauris. Morbi convallis vel nulla sagittis dapibus. Curabitur et lorem nec tellus rhoncus gravida id vehicula orci. In hac habitasse platea dictumst. Vivamus tristique varius rutrum.

Suspendisse tempus efficitur gravida. Maecenas sit amet massa ultrices, congue arcu consequat, tempus nunc. Pellentesque tincidunt, tellus ac sagittis tincidunt, sapien velit egestas purus, non pellentesque felis neque sed erat. Cras porta odio sed rhoncus pellentesque. Phasellus suscipit elit quis tellus eleifend, eget feugiat mauris suscipit. In quis blandit tellus. Sed convallis rhoncus sagittis. Cras scelerisque ac velit quis tincidunt.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi vestibulum euismod egestas. Pellentesque quis nunc pharetra, ornare ipsum a, condimentum felis. Donec et faucibus purus. Integer id eleifend purus. Vivamus ultricies tincidunt felis, varius blandit arcu luctus sit amet. Nulla facilisi. Mauris a varius sem. Nunc vel ullamcorper ligula. Phasellus sit amet leo nec sapien fermentum iaculis. Sed et eros a est aliquet varius et nec leo. Aliquam quis velit interdum, dignissim velit quis, placerat justo. Nullam lobortis dui sed leo bibendum scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat turpis odio, vel dapibus magna imperdiet non. Pellentesque nec urna eu quam dapibus consectetur. Phasellus vulputate
[/div][/div][div class=stonePage][div class=stoneBody]congue dolor in efficitur. Fusce vel consequat sapien. Integer nec nisl eget mauris facilisis varius. Sed fringilla felis sed arcu condimentum, sed ullamcorper purus tristique. Aliquam justo neque, ornare at accumsan ut, ultricies ut enim. Proin consequat id lorem sit amet imperdiet. Sed facilisis ornare ex id porttitor.[/div][/div][/div][/div][div class=stoneCredit]Coded By || StoneWolf18 StoneWolf18 [/div]

Code:
[nobr]
[class name=stoneBackground]
width: 100%;
height: 1000px;
background: #EEEEEE;
overflow-y: scroll;
overflow-x: hidden;
[/class]
[class name=stoneSticky]
position: sticky;
top: 0;
[/class]
[class name=stoneTopRibbon]
width: 100%;
height: 60px;
background: #FFFFFE;
[/class]
[class name=stoneDocSymbol]
width: 40px;
height: 60px;
background-image: url(https://image.prntscr.com/image/rdR2QZ5uRcOKHd0kgAmObw.png);
display: inline-block;
[/class]
[class name=stoneToolBarWrap]
width: 520px;
height: 60px;
padding: 5px;
display: inline-block;
position: relative;
top: -10px;
left: 16px;
[/class]
[class name=stoneDocTitle]
width: auto;
height: 30px;
color: grey;
font-size: 20px;
[/class]
[class name=stoneToolBar]
height: 30px;
color: black;
font-size: 14px;
margin-right: 20px;
display: inline-block;
[/class]
[class name=stoneLowerRibbon]
height: 35px;
width: 100%;
background: #FFFFFE;
border-top: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
display: inline-block;
position: relative;
top: -20px;
[/class]
[class name=stoneToolImage]
background-image: url(https://image.prntscr.com/image/0xbXitliQNKt9ut0stRQ2Q.png);
background-repeat: no-repeat;
display: inline-block;
height: 35px; 
width: 100%;
margin-left: 60px;
[/class]
[class name=stonePage]
margin: auto;
width: 55%;
height: 850px;
background: white;
border: 1px solid lightgrey;
margin-top: 45px;
margin-bottom: 45px;
[/class]
[class name=stoneBody]
margin: auto;
margin-top: 40px;
height: 700px;
width: 80%;
padding: 20px;
color: black;
overflow: hidden;
[/class]
[class name=stoneCredit]
font-size: 10px;
color: #4286F5;
text-align: right;
[/class]
[/nobr][div class=stoneBackground][div class=stoneWrap][div class=stoneSticky][div class=stoneTopRibbon][div class=stoneDocSymbol][/div][div class=stoneToolBarWrap][div class=stoneDocTitle][i]Untitled Document[/i][/div][div class=stoneToolBar]File[/div][div class=stoneToolBar]Edit[/div][div class=stoneToolBar]View[/div][div class=stoneToolBar]Insert[/div][div class=stoneToolBar]Format[/div][div class=stoneToolBar]Tools[/div][div class=stoneToolBar]Table[/div][div class=stoneToolBar]Add-ons[/div][div class=stoneToolBar]Help[/div][/div][div class=stoneLowerRibbon][div class=stoneToolImage][/div][/div][/div][/div][div class=stonePage][div class=stoneBody][font=Arial]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat turpis odio, vel dapibus magna imperdiet non. Pellentesque nec urna eu quam dapibus consectetur. Phasellus vulputate congue dolor in efficitur. Fusce vel consequat sapien. Integer nec nisl eget mauris facilisis varius. Sed fringilla felis sed arcu condimentum, sed ullamcorper purus tristique. Aliquam justo neque, ornare at accumsan ut, ultricies ut enim. Proin consequat id lorem sit amet imperdiet. Sed facilisis ornare ex id porttitor.

Donec pulvinar neque dolor, non interdum ligula laoreet in. Quisque tempor aliquam sem non accumsan. In ut ullamcorper dui. Aenean sit amet ligula massa. Suspendisse a nunc lectus. Donec pellentesque enim urna, ut sagittis urna rhoncus eget. Proin ac nisl tempus, mattis nisi vitae, mollis ante. Nullam nec libero pharetra nulla euismod maximus vitae dignissim ante. Suspendisse vehicula pellentesque hendrerit. Ut eget euismod risus.

Aenean justo enim, imperdiet sed tellus et, facilisis congue sem. Duis eu tellus dui. Nulla sed sodales mauris. Morbi convallis vel nulla sagittis dapibus. Curabitur et lorem nec tellus rhoncus gravida id vehicula orci. In hac habitasse platea dictumst. Vivamus tristique varius rutrum.

Suspendisse tempus efficitur gravida. Maecenas sit amet massa ultrices, congue arcu consequat, tempus nunc. Pellentesque tincidunt, tellus ac sagittis tincidunt, sapien velit egestas purus, non pellentesque felis neque sed erat. Cras porta odio sed rhoncus pellentesque. Phasellus suscipit elit quis tellus eleifend, eget feugiat mauris suscipit. In quis blandit tellus. Sed convallis rhoncus sagittis. Cras scelerisque ac velit quis tincidunt.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi vestibulum euismod egestas. Pellentesque quis nunc pharetra, ornare ipsum a, condimentum felis. Donec et faucibus purus. Integer id eleifend purus. Vivamus ultricies tincidunt felis, varius blandit arcu luctus sit amet. Nulla facilisi. Mauris a varius sem. Nunc vel ullamcorper ligula. Phasellus sit amet leo nec sapien fermentum iaculis. Sed et eros a est aliquet varius et nec leo. Aliquam quis velit interdum, dignissim velit quis, placerat justo. Nullam lobortis dui sed leo bibendum scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat turpis odio, vel dapibus magna imperdiet non. Pellentesque nec urna eu quam dapibus consectetur. Phasellus vulputate congue dolor in efficitur. Fusce vel consequat sapien. Integer nec nisl eget mauris facilisis varius. Sed fringilla felis sed arcu condimentum, sed ullamcorper purus tristique. Aliquam justo neque, ornare at accumsan ut, ultricies ut enim. Proin consequat id lorem sit amet imperdiet. Sed facilisis ornare ex id porttitor.

Donec pulvinar neque dolor, non interdum ligula laoreet in. Quisque tempor aliquam sem non accumsan. In ut ullamcorper dui. Aenean sit amet ligula massa. Suspendisse a nunc lectus. Donec pellentesque enim urna, ut sagittis urna rhoncus eget. Proin ac nisl tempus, mattis nisi vitae, mollis ante. Nullam nec libero pharetra nulla euismod maximus vitae dignissim ante. Suspendisse vehicula pellentesque hendrerit. Ut eget euismod risus.

Aenean justo enim, imperdiet sed tellus et, facilisis congue sem. Duis eu tellus dui. Nulla sed sodales mauris. Morbi convallis vel nulla sagittis dapibus. Curabitur et lorem nec tellus rhoncus gravida id vehicula orci. In hac habitasse platea dictumst. Vivamus tristique varius rutrum.

Suspendisse tempus efficitur gravida. Maecenas sit amet massa ultrices, congue arcu consequat, tempus nunc. Pellentesque tincidunt, tellus ac sagittis tincidunt, sapien velit egestas purus, non pellentesque felis neque sed erat. Cras porta odio sed rhoncus pellentesque. Phasellus suscipit elit quis tellus eleifend, eget feugiat mauris suscipit. In quis blandit tellus. Sed convallis rhoncus sagittis. Cras scelerisque ac velit quis tincidunt.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi vestibulum euismod egestas. Pellentesque quis nunc pharetra, ornare ipsum a, condimentum felis. Donec et faucibus purus. Integer id eleifend purus. Vivamus ultricies tincidunt felis, varius blandit arcu luctus sit amet. Nulla facilisi. Mauris a varius sem. Nunc vel ullamcorper ligula. Phasellus sit amet leo nec sapien fermentum iaculis. Sed et eros a est aliquet varius et nec leo. Aliquam quis velit interdum, dignissim velit quis, placerat justo. Nullam lobortis dui sed leo bibendum scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat turpis odio, vel dapibus magna imperdiet non. Pellentesque nec urna eu quam dapibus consectetur. Phasellus vulputate 
[/font][/div][/div][div class=stonePage][div class=stoneBody][font=Arial]congue dolor in efficitur. Fusce vel consequat sapien. Integer nec nisl eget mauris facilisis varius. Sed fringilla felis sed arcu condimentum, sed ullamcorper purus tristique. Aliquam justo neque, ornare at accumsan ut, ultricies ut enim. Proin consequat id lorem sit amet imperdiet. Sed facilisis ornare ex id porttitor.[/font][/div][/div][/div][/div][div class=stoneCredit]Coded By || [USER=12813]@StoneWolf18[/USER][/div]
 
Lined-Paper
This code is not mine. I found it here and tweaked it a little so it looked a bit nicer on RpN. Feel free to use in place of the paper tag.

[class name=paper] font-size: 20px; width: 50%; height: 80%; margin: 0 auto; padding: 6px 5px 4px 42px; position: relative; color: #444; line-height: 20px; border: 1px solid #d2d2d2; background: #fff; background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px; background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; -webkit-background-size: 100% 20px; -moz-background-size: 100% 20px; -ms-background-size: 100% 20px; -o-background-size: 100% 20px; background-size: 100% 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07); box-shadow: 0 1px 2px rgba(0,0,0,0.07); width: 816px; height: 1056px; [/class] [class name=edge] content: ''; position: absolute; width: 4px; top: 0; left: 30px; bottom: 0; border: 1px solid; border-color: transparent #efe4e4; [/class] [class name=text] display: block; width: 94%; margin: 0 auto; padding: 3.8% 3%; border: none; outline: none; height: 94%; background: transparent; line-height: 20px; margin-top: -25px; [/class] [class name=header] background-color: #FFF; min-height: 100px; margin-left: -42px; margin-top: -4px; [/class]
[div class=paper][div class=edge][/div][div class=header][/div][div class=text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat turpis odio, vel dapibus magna imperdiet non. Pellentesque nec urna eu quam dapibus consectetur. Phasellus vulputate congue dolor in efficitur. Fusce vel consequat sapien. Integer nec nisl eget mauris facilisis varius. Sed fringilla felis sed arcu condimentum, sed ullamcorper purus tristique. Aliquam justo neque, ornare at accumsan ut, ultricies ut enim. Proin consequat id lorem sit amet imperdiet. Sed facilisis ornare ex id porttitor.

Donec pulvinar neque dolor, non interdum ligula laoreet in. Quisque tempor aliquam sem non accumsan. In ut ullamcorper dui. Aenean sit amet ligula massa. Suspendisse a nunc lectus. Donec pellentesque enim urna, ut sagittis urna rhoncus eget. Proin ac nisl tempus, mattis nisi vitae, mollis ante. Nullam nec libero pharetra nulla euismod maximus vitae dignissim ante. Suspendisse vehicula pellentesque hendrerit. Ut eget euismod risus.

Aenean justo enim, imperdiet sed tellus et, facilisis congue sem. Duis eu tellus dui. Nulla sed sodales mauris. Morbi convallis vel nulla sagittis dapibus. Curabitur et lorem nec tellus rhoncus gravida id vehicula orci. In hac habitasse platea dictumst. Vivamus tristique varius rutrum.

Suspendisse tempus efficitur gravida. Maecenas sit amet massa ultrices, congue arcu consequat, tempus nunc. Pellentesque tincidunt, tellus ac sagittis tincidunt, sapien velit egestas purus, non pellentesque felis neque sed erat. Cras porta odio sed rhoncus pellentesque. Phasellus suscipit elit quis tellus eleifend, eget feugiat mauris suscipit. In quis blandit tellus. Sed convallis rhoncus sagittis. Cras scelerisque ac velit quis tincidunt.
[/div][/div]

Code:
[nobr]
[class name=paper]
  font-size: 20px;
  width: 50%;
  height: 80%;
  margin: 0 auto;
  padding: 6px 5px 4px 42px;
  position: relative;
  color: #444;
  line-height: 20px;
  border: 1px solid #d2d2d2;
  background: #fff;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
  background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
  background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
  background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
  background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
  background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
  -webkit-background-size: 100% 20px;
  -moz-background-size: 100% 20px;
  -ms-background-size: 100% 20px;
  -o-background-size: 100% 20px;
  background-size: 100% 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
  box-shadow: 0 1px 2px rgba(0,0,0,0.07);
  width: 816px;
  height: 1056px;
[/class]
[class name=edge]
  content: '';
  position: absolute;
  width: 4px;
  top: 0;
  left: 30px;
  bottom: 0;
  border: 1px solid;
  border-color: transparent #efe4e4;
[/class]
[class name=text]
  display: block;
  width: 94%;
  margin: 0 auto;
  padding: 3.8% 3%;
  border: none;
  outline: none;
  height: 94%;
  background: transparent;
  line-height: 20px;
  margin-top: -25px;
[/class]
[class name=header]
   background-color: #FFF;
   min-height: 100px;
   margin-left: -42px;
   margin-top: -4px;
[/class]
[/nobr]
[div class=paper][div class=edge][/div][div class=header][/div][div class=text][font=Nanum Pen Script]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat turpis odio, vel dapibus magna imperdiet non. Pellentesque nec urna eu quam dapibus consectetur. Phasellus vulputate congue dolor in efficitur. Fusce vel consequat sapien. Integer nec nisl eget mauris facilisis varius. Sed fringilla felis sed arcu condimentum, sed ullamcorper purus tristique. Aliquam justo neque, ornare at accumsan ut, ultricies ut enim. Proin consequat id lorem sit amet imperdiet. Sed facilisis ornare ex id porttitor.

Donec pulvinar neque dolor, non interdum ligula laoreet in. Quisque tempor aliquam sem non accumsan. In ut ullamcorper dui. Aenean sit amet ligula massa. Suspendisse a nunc lectus. Donec pellentesque enim urna, ut sagittis urna rhoncus eget. Proin ac nisl tempus, mattis nisi vitae, mollis ante. Nullam nec libero pharetra nulla euismod maximus vitae dignissim ante. Suspendisse vehicula pellentesque hendrerit. Ut eget euismod risus.

Aenean justo enim, imperdiet sed tellus et, facilisis congue sem. Duis eu tellus dui. Nulla sed sodales mauris. Morbi convallis vel nulla sagittis dapibus. Curabitur et lorem nec tellus rhoncus gravida id vehicula orci. In hac habitasse platea dictumst. Vivamus tristique varius rutrum.

Suspendisse tempus efficitur gravida. Maecenas sit amet massa ultrices, congue arcu consequat, tempus nunc. Pellentesque tincidunt, tellus ac sagittis tincidunt, sapien velit egestas purus, non pellentesque felis neque sed erat. Cras porta odio sed rhoncus pellentesque. Phasellus suscipit elit quis tellus eleifend, eget feugiat mauris suscipit. In quis blandit tellus. Sed convallis rhoncus sagittis. Cras scelerisque ac velit quis tincidunt.[/font][/div][/div]
 
Custom Fieldset
I made this on accident really. I was messing around with a code that I wanted to use fieldsets in, but then I realized that its blue and it lead me down the rabbit-hole that produced this wonky thing. Note that it will NOT work without a solid background color, as without it the border on the text box will be seen through the fieldset's title. Other than that, just use at your own risk as it is rather finicky.

[class name=stoneWrapper] height: auto; width: 90%; /* SIZE OF FIELDSET */ margin-top: -15px; margin: auto; [/class] [class name=stoneBackground] width: 95%; /* SIZE OF BACKGROUND COLOR */ height: auto; background: white; /* COLOR OF BACKGROUND HERE */ margin: auto; [/class] [class name=stoneTitle] width: 50px; height: 15px; background: white; /* COLOR OF BACKGROUND HERE*/ padding: 5px; color: maroon; /* COLOR OF TEXT HERE */ font-size: 15px; position: relative; top: 10px; left: 50px; text-align: center; [/class] [class name=stoneBorder] width: 99%; height: auto; border: 1px solid maroon; /* COLOR OF TEXT HERE */ color: maroon; /* COLOR OF TEXT HERE */ padding: 10px; padding-top: 15px; [/class] [class name=stoneCredit] font-size: 10px; color: black; text-align: right; [/class] [div class=stoneBackground][div class=stoneWrapper][div class=stoneTitle]Title[/div][div class=stoneBorder]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat turpis odio, vel dapibus magna imperdiet non. Pellentesque nec urna eu quam dapibus consectetur. Phasellus vulputate congue dolor in efficitur. Fusce vel consequat sapien. Integer nec nisl eget mauris facilisis varius. Sed fringilla felis sed arcu condimentum, sed ullamcorper purus tristique. Aliquam justo neque, ornare at accumsan ut, ultricies ut enim. Proin consequat id lorem sit amet imperdiet. Sed facilisis ornare ex id porttitor.

Donec pulvinar neque dolor, non interdum ligula laoreet in. Quisque tempor aliquam sem non accumsan. In ut ullamcorper dui. Aenean sit amet ligula massa. Suspendisse a nunc lectus. Donec pellentesque enim urna, ut sagittis urna rhoncus eget. Proin ac nisl tempus, mattis nisi vitae, mollis ante. Nullam nec libero pharetra nulla euismod maximus vitae dignissim ante. Suspendisse vehicula pellentesque hendrerit. Ut eget euismod risus.[/div][div class=stoneCredit]Coded By || StoneWolf18 StoneWolf18 [/div][/div][/div]

Code:
[nobr]
[class name=stoneWrapper]
height: auto;
width: 90%; /* SIZE OF FIELDSET */
margin-top: -15px;
margin: auto;
[/class]
[class name=stoneBackground]
width: 95%; /* SIZE OF BACKGROUND COLOR */
height: auto;
background: white;  /* COLOR OF BACKGROUND HERE */
margin: auto;
[/class]
[class name=stoneTitle]
width: 50px;
height: 15px;
background: white;  /* COLOR OF BACKGROUND HERE*/
padding: 5px;
color: maroon; /* COLOR OF TEXT HERE */
font-size: 15px;
position: relative;
top: 10px;
left: 50px;
text-align: center;
[/class]
[class name=stoneBorder]
width: 99%;
height: auto;
border: 1px solid maroon;  /* COLOR OF TEXT HERE */
color: maroon;  /* COLOR OF TEXT HERE */
padding: 10px;
padding-top: 15px;
[/class]
[class name=stoneCredit]
font-size: 10px;
color: black;
text-align: right;
[/class]
[/nobr][div class=stoneBackground][div class=stoneWrapper][div class=stoneTitle][b]Title[/b][/div][div class=stoneBorder]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat turpis odio, vel dapibus magna imperdiet non. Pellentesque nec urna eu quam dapibus consectetur. Phasellus vulputate congue dolor in efficitur. Fusce vel consequat sapien. Integer nec nisl eget mauris facilisis varius. Sed fringilla felis sed arcu condimentum, sed ullamcorper purus tristique. Aliquam justo neque, ornare at accumsan ut, ultricies ut enim. Proin consequat id lorem sit amet imperdiet. Sed facilisis ornare ex id porttitor.

Donec pulvinar neque dolor, non interdum ligula laoreet in. Quisque tempor aliquam sem non accumsan. In ut ullamcorper dui. Aenean sit amet ligula massa. Suspendisse a nunc lectus. Donec pellentesque enim urna, ut sagittis urna rhoncus eget. Proin ac nisl tempus, mattis nisi vitae, mollis ante. Nullam nec libero pharetra nulla euismod maximus vitae dignissim ante. Suspendisse vehicula pellentesque hendrerit. Ut eget euismod risus.[/div][div class=stoneCredit]Coded By || [USER=12813]@StoneWolf18[/USER][/div][/div][/div]
 
Locating Signal
I finally figured out hovers! :D

[class name=stonelyBackground] width: 200px; height: 300px; background-image: url(http://img25.laughinggif.com/pic/HTTPS9tZWRpYS5naXBoeS5jb20vbWVkaWEvWERPQVZaUXZ3dlU2NC9naXBoeS5naWYlog.gif); border: 5px solid black; background-repeat: no-repeat; background-position: 50%; margin: auto; overflow: hidden; transition: all 0.5s ease; [/class] [class=stonelyBox] width: 100%; height: 100%; margin: auto; transition: all 1s ease; [/class] [class name=stonelyBackground state=hover] width: 450px; overflow: auto; transition: all 0.5s ease; [/class] [class name=stonelyBox state=hover] background-color: rgba(52, 117, 131, .7); transition: all 1s ease; overflow: hidden; [/class] [class name=stonelyWrapper] height: 300px; width: calc(100%; + 17px); opacity: 0; transition: all 0.5s ease; [/class] [class name=stonelyWrapper state=hover] opacity: 1; transition: all 0.5s ease; [/class] [class name=stonelyHeader] color: #347583; text-align: center; font-size: 45px; justify-content: center; -webkit-text-stroke: 2px #d7e5f4; [/class] [class name=stonelyText] height: 223px; width: 465px; color: white; padding: 5px; position: relative; overflow-y: scroll; overflow-x: hidden; margin: auto; [/class] [class name=stoneCredit] font-size: 10px; color: rgba(52, 117, 131, 1); text-align: right; [/class] [div class=stonelyWrapper2][div class=stonelyBackground][div class=stonelyBox][div class=stonelyWrapper][div class=stonelyHeader]Header[/div][div class=stonelyText]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum lectus ut commodo pellentesque. In aliquam gravida massa id pulvinar. Vivamus nisi enim, hendrerit molestie consectetur eu, ultrices vel felis. Integer gravida lobortis ipsum, sit amet dignissim diam posuere eu. Sed venenatis, sem vel congue laoreet, leo nulla malesuada arcu, sed convallis mi mauris ac est. Vestibulum posuere erat eu aliquam vehicula. Proin non tristique nibh, in venenatis neque. Nunc tincidunt, ipsum at molestie convallis, lacus erat condimentum lorem, eget dignissim risus neque nec tortor. Phasellus nibh diam, consectetur in lacus vitae, dignissim rhoncus purus. Suspendisse ornare mauris id auctor tempus. Donec pretium ipsum eget augue condimentum, a vestibulum mi volutpat.[/div][/div][/div][/div][div class=stoneCredit]Coded By || StoneWolf18 StoneWolf18 [/div][/div]

Code:
[nobr]
[class name=stonelyBackground]
width: 200px;
height: 300px;
background-image: url(http://img25.laughinggif.com/pic/HTTPS9tZWRpYS5naXBoeS5jb20vbWVkaWEvWERPQVZaUXZ3dlU2NC9naXBoeS5naWYlog.gif);
border: 5px solid black;
background-repeat: no-repeat;
background-position: 50%;
margin: auto;
overflow: hidden;
transition: all 0.5s ease;
[/class]
[class=stonelyBox]
width: 100%;
height: 100%;
margin: auto;
transition: all 1s ease;
[/class]
[class name=stonelyBackground state=hover]
width: 450px;
overflow: auto;
transition: all 0.5s ease;
[/class]
[class name=stonelyBox state=hover]
background-color: rgba(52, 117, 131, .7);
transition: all 1s ease;
overflow: hidden;
[/class]
[class name=stonelyWrapper]
height: 300px;
width: calc(100%; + 17px);
opacity: 0;
transition: all 0.5s ease;
[/class]
[class name=stonelyWrapper state=hover]
opacity: 1;
transition: all 0.5s ease;
[/class]
[class name=stonelyHeader]
color: #347583;
text-align: center;
font-size: 45px;
justify-content: center;
-webkit-text-stroke: 2px #d7e5f4;
[/class]
[class name=stonelyText]
height: 223px;
width: 465px;
color: white;
padding: 5px;
position: relative;
overflow-y: scroll;
overflow-x: hidden;
margin: auto;
[/class]
[class name=stoneCredit]
font-size: 10px;
color: rgba(52, 117, 131, 1);
text-align: right;
[/class]
[/nobr][div class=stonelyWrapper2][div class=stonelyBackground][div class=stonelyBox][div class=stonelyWrapper][div class=stonelyHeader][font=Orbitron]Header[/font][/div][div class=stonelyText][font=Open Sans]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum lectus ut commodo pellentesque. In aliquam gravida massa id pulvinar. Vivamus nisi enim, hendrerit molestie consectetur eu, ultrices vel felis. Integer gravida lobortis ipsum, sit amet dignissim diam posuere eu. Sed venenatis, sem vel congue laoreet, leo nulla malesuada arcu, sed convallis mi mauris ac est. Vestibulum posuere erat eu aliquam vehicula. Proin non tristique nibh, in venenatis neque. Nunc tincidunt, ipsum at molestie convallis, lacus erat condimentum lorem, eget dignissim risus neque nec tortor. Phasellus nibh diam, consectetur in lacus vitae, dignissim rhoncus purus. Suspendisse ornare mauris id auctor tempus. Donec pretium ipsum eget augue condimentum, a vestibulum mi volutpat.[/font][/div][/div][/div][/div][div class=stoneCredit]Coded By || [USER=12813]@StoneWolf18[/USER][/div][/div]
 
Moonlit Snow
I'm too proud of that cover image...

[class=stoneBackground] width: 500px; height: 700px; margin: auto; background-image: url(https://i.pinimg.com/564x/ed/07/ff/ed07ff06380605f9cc386fa6b9856274.jpg); background-size: 100%; background-position: center; display: flex; justify-content: center; align-items: center; overflow: hidden; [/class] [class=stoneBorder] width: 90%; height: 660px; margin: auto; border: 3px solid #b3b3b3; overflow: hidden; [/class] [class=stoneWrapper] width: calc(100% + 21px); overflow: hidden; [/class] [class=stoneScroll] height: 660px; width: 100%; overflow-x: hidden; overflow-y: auto; padding-right: 100px; [/class] [class=stoneCover] height: 660px; width: calc(100% + 17px); background-image: url(https://i.pinimg.com/564x/ed/07/ff/ed07ff06380605f9cc386fa6b9856274.jpg); background-size: 110%; background-position: center; display: flex; justify-content: center; align-items: center; [/class] [class=stoneCoverText] color: white; font-size: 40px; text-align: center; [/class] [class=stoneText] background: #b3b3b3; color: black; padding: 5px; margin-right: -17px; [/class]
(I scroll!)
[div class=stoneBackground][div class=stoneBorder][div class=stoneScroll][div class=stoneCover][div class=stoneCoverText]Header[/div][/div][div class=stoneText]HeaderLorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia nisl nec ex efficitur vulputate. Morbi nec leo et risus ornare varius. Curabitur sodales turpis vitae mi gravida, quis fermentum urna semper. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus lobortis lorem ac orci hendrerit, eu tincidunt ante iaculis. In pulvinar hendrerit massa in aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin vehicula turpis velit. Nam vitae dignissim urna, lobortis vehicula risus. Maecenas ex nibh, tincidunt molestie nunc eu, luctus molestie odio. Vivamus sagittis, ipsum non pharetra tempor, augue libero lobortis mauris, nec suscipit lectus purus eget orci. Integer nec ante eu lectus volutpat gravida vel et enim. Donec consequat volutpat dui non tincidunt. Suspendisse placerat tincidunt augue quis dapibus.

Duis tempus pellentesque efficitur. Suspendisse ante justo, egestas non vulputate quis, sagittis ac nibh. Suspendisse ipsum lectus, tristique ac sodales nec, finibus sed tortor. Nulla fermentum diam at justo vulputate dignissim. Donec pharetra purus non erat gravida maximus. Sed vitae mollis metus. Maecenas at placerat arcu. Morbi quis iaculis erat. Donec quis mauris imperdiet, ullamcorper nunc at, commodo ligula. Morbi nec odio eu enim varius mattis. Curabitur lacinia massa magna, eget porttitor erat sollicitudin nec. Morbi euismod lectus at metus elementum pharetra. Donec tincidunt ante risus. Aliquam et tortor ante. In hac habitasse platea dictumst. Aenean a mollis elit, elementum congue ipsum.

Sed risus risus, pretium sit amet nunc at, sollicitudin condimentum urna. Suspendisse nec tortor posuere, rutrum quam sit amet, ultricies orci. Ut enim augue, consectetur quis dapibus in, efficitur condimentum massa. Morbi vel rutrum ligula. Etiam auctor mattis ipsum ac porta. Maecenas id felis semper, laoreet mi sit amet, luctus nisi. Fusce a commodo justo. Phasellus tempor sit amet enim vel commodo. Morbi sodales malesuada fermentum. Ut congue convallis ligula vel blandit.

Aenean vulputate, lorem sed facilisis porttitor, nisl lacus mollis nulla, at aliquam metus leo in ligula. Nunc ut sem pharetra, gravida metus a, fringilla metus. Donec eget iaculis risus, quis elementum tellus. Pellentesque non enim felis. Ut interdum, odio a finibus facilisis, ligula tortor sodales risus, ultricies pharetra orci nisi nec dolor. Donec consequat est quis porttitor feugiat. Cras congue tincidunt sollicitudin. Maecenas elementum imperdiet ante, quis malesuada nibh imperdiet eu. Maecenas tempor, eros ac pretium rutrum, nisl libero euismod augue, a pellentesque metus diam a magna. Vivamus feugiat interdum dapibus. Quisque ut diam posuere, aliquet libero ac, euismod felis. Ut sagittis felis efficitur, molestie felis at, feugiat odio. Vivamus volutpat tincidunt lacus a feugiat.

Suspendisse nisl urna, cursus eget pulvinar quis, mattis et elit. Sed quis libero imperdiet, dignissim sapien at, rutrum lacus. Quisque in malesuada justo. Fusce nec rutrum elit, sit amet tristique felis. Phasellus eu magna et arcu viverra eleifend non eu mauris. Etiam tempus eleifend neque. Praesent ac consequat eros, non cursus tellus. Fusce et accumsan nisl. Fusce ut mauris ut quam volutpat gravida. Pellentesque sed erat suscipit, aliquam lacus eget, ornare dolor. Duis finibus massa vitae eros convallis malesuada. Etiam maximus lorem et magna aliquet, sed lacinia dui ultricies. Donec gravida, risus vel semper pretium, erat magna cursus mi, suscipit laoreet ante tortor mollis dolor.
[/div][/div][/div][/div]
Coded By || StoneWolf18 StoneWolf18


Code:
[nobr]
[class=stoneBackground]
width: 500px;
height: 700px;
margin: auto;
background-image: url(https://i.pinimg.com/564x/ed/07/ff/ed07ff06380605f9cc386fa6b9856274.jpg);
background-size: 100%;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
[/class]
[class=stoneBorder]
width: 90%;
height: 660px;
margin: auto;
border: 3px solid #b3b3b3;
overflow: hidden;
[/class]
[class=stoneWrapper]
width: calc(100% + 21px);
overflow: hidden;
[/class]
[class=stoneScroll]
height: 660px;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
padding-right: 100px;
[/class]
[class=stoneCover]
height: 660px;
width: calc(100% + 17px);
background-image: url(https://i.pinimg.com/564x/ed/07/ff/ed07ff06380605f9cc386fa6b9856274.jpg);
background-size: 110%;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
[/class]
[class=stoneCoverText]
color: white;
font-size: 40px;
text-align: center;
[/class]
[class=stoneText]
background: #b3b3b3;
color: black;
padding: 5px;
margin-right: -17px;
[/class]
[/nobr][div=font-size: 11px; text-align: center;][FONT=times new roman](I scroll!)[/FONT][/div][FONT=times new roman][div class=stoneBackground][div  class=stoneBorder][div class=stoneScroll][div class=stoneCover][div class=stoneCoverText][font=Cormorant Garamond]Header[/font][/div][/div][div class=stoneText][font=Times New Roman][h][font=Cormorant Garamond]Header[/font][/h]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia nisl nec ex efficitur vulputate. Morbi nec leo et risus ornare varius. Curabitur sodales turpis vitae mi gravida, quis fermentum urna semper. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus lobortis lorem ac orci hendrerit, eu tincidunt ante iaculis. In pulvinar hendrerit massa in aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin vehicula turpis velit. Nam vitae dignissim urna, lobortis vehicula risus. Maecenas ex nibh, tincidunt molestie nunc eu, luctus molestie odio. Vivamus sagittis, ipsum non pharetra tempor, augue libero lobortis mauris, nec suscipit lectus purus eget orci. Integer nec ante eu lectus volutpat gravida vel et enim. Donec consequat volutpat dui non tincidunt. Suspendisse placerat tincidunt augue quis dapibus.

Duis tempus pellentesque efficitur. Suspendisse ante justo, egestas non vulputate quis, sagittis ac nibh. Suspendisse ipsum lectus, tristique ac sodales nec, finibus sed tortor. Nulla fermentum diam at justo vulputate dignissim. Donec pharetra purus non erat gravida maximus. Sed vitae mollis metus. Maecenas at placerat arcu. Morbi quis iaculis erat. Donec quis mauris imperdiet, ullamcorper nunc at, commodo ligula. Morbi nec odio eu enim varius mattis. Curabitur lacinia massa magna, eget porttitor erat sollicitudin nec. Morbi euismod lectus at metus elementum pharetra. Donec tincidunt ante risus. Aliquam et tortor ante. In hac habitasse platea dictumst. Aenean a mollis elit, elementum congue ipsum.

Sed risus risus, pretium sit amet nunc at, sollicitudin condimentum urna. Suspendisse nec tortor posuere, rutrum quam sit amet, ultricies orci. Ut enim augue, consectetur quis dapibus in, efficitur condimentum massa. Morbi vel rutrum ligula. Etiam auctor mattis ipsum ac porta. Maecenas id felis semper, laoreet mi sit amet, luctus nisi. Fusce a commodo justo. Phasellus tempor sit amet enim vel commodo. Morbi sodales malesuada fermentum. Ut congue convallis ligula vel blandit.

Aenean vulputate, lorem sed facilisis porttitor, nisl lacus mollis nulla, at aliquam metus leo in ligula. Nunc ut sem pharetra, gravida metus a, fringilla metus. Donec eget iaculis risus, quis elementum tellus. Pellentesque non enim felis. Ut interdum, odio a finibus facilisis, ligula tortor sodales risus, ultricies pharetra orci nisi nec dolor. Donec consequat est quis porttitor feugiat. Cras congue tincidunt sollicitudin. Maecenas elementum imperdiet ante, quis malesuada nibh imperdiet eu. Maecenas tempor, eros ac pretium rutrum, nisl libero euismod augue, a pellentesque metus diam a magna. Vivamus feugiat interdum dapibus. Quisque ut diam posuere, aliquet libero ac, euismod felis. Ut sagittis felis efficitur, molestie felis at, feugiat odio. Vivamus volutpat tincidunt lacus a feugiat.

Suspendisse nisl urna, cursus eget pulvinar quis, mattis et elit. Sed quis libero imperdiet, dignissim sapien at, rutrum lacus. Quisque in malesuada justo. Fusce nec rutrum elit, sit amet tristique felis. Phasellus eu magna et arcu viverra eleifend non eu mauris. Etiam tempus eleifend neque. Praesent ac consequat eros, non cursus tellus. Fusce et accumsan nisl. Fusce ut mauris ut quam volutpat gravida. Pellentesque sed erat suscipit, aliquam lacus eget, ornare dolor. Duis finibus massa vitae eros convallis malesuada. Etiam maximus lorem et magna aliquet, sed lacinia dui ultricies. Donec gravida, risus vel semper pretium, erat magna cursus mi, suscipit laoreet ante tortor mollis dolor.[/font][/div][/div][/div][/div][div=font-size: 11px; text-align: center;][FONT=times new roman]Coded By || [USER=12813]@StoneWolf18[/USER][/FONT][/div][/font]
 

Users who are viewing this thread

Back
Top