• 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 some codes rustic made

Rustic

Drunken Bumpkin
Roleplay Availability
Roleplay Type(s)
[class=Background] max-width: 700px; min-width: 325px; background:url(http://www.transparenttextures.com/patterns/vichy.png); margin:auto; padding-top: 2%; padding-bottom: 2%; min-width: 300px; box-sizing: border-box; [/class] [class=Body] max-width: 600px; background-color: #fcfcfc; width: 90%; color: black; margin: auto; text-align: center; padding: 20px; min-height: 300px; line-height: 1.5em; [/class] [class=Image] background: url(https://i.imgur.com/qEQppRa.png) no-repeat; margin: auto; height: 175px; margin: background-size: cover; background-position: 40% 42%; font-size: 33px; position: relative; z-index: 2; [/class] [div class=Background][div class=Body][div class=Image][/div]
hi! call me rustic.

i make bbcode sometimes for my personal use. over the time i've been on the site, i've usually stored it privately, but i've decided to share some of it here, thinking it might be of use to somebody.

feel free to use these codes however you like! i'd love to know if they were useful to you, but you don't have to tell me or anything. these codes are pretty (pointlessly) complicated, so if you're looking to utilize them, i'd suggest having a working knowledge of bbcode+; otherwise, they're probably more trouble than they're worth. unfortunately, at the moment, i can't offer much in the way of assistance with them either, so they're presented as is. maybe sometime in the future i can be of more help.

regardless, thank you for reading! i hope you like what you see!

[/div][/div]
 
Last edited:
[class name=Holder minWidth="900px"] width: 100%; height: 700px; box-sizing: border-box; margin-top: -35px; background: linear-gradient(#d0f2c0, #f2f2c0); [/class] [class name=Holder maxWidth="900px"] width: 100%; height: 500px; box-sizing: border-box; background-color: #ddf9cf; background: linear-gradient(#d0f2c0, #f2f2c0); [/class] [class name=MobileProfileBox minWidth="901px"] display: none; [/class] [class name=MobileProfileBox maxWidth="900px"] width: 90%; padding: 6%; background-color: White; margin: auto; margin-top: 40px; height: 225px; border-radius: 5px; box-sizing: border-box; border: 1px solid #bfbfbf; box-sizing: border-box; [/class] [class name=MobileProfileImage minWidth="900px"] display: none; [/class] [class name=MobileProfileImage maxWidth="900px"] box-sizing: border-box; background: url(https://i.imgur.com/XOpNjm4.png); margin: auto; height: 100%; width: 100%; background-size: 330px 900px; background-position: 40% 20%; opacity: 0.8; [/class] [class=Background] height: 100%; overflow: auto; background:url(https://www.transparenttextures.com/patterns/axiom-pattern.png); margin: auto; box-sizing: border-box; width: 100%; [/class] [class name=BackgroundBox minWidth="901px"] min-width: 325px; border-radius: 15px; background:url(https://www.transparenttextures.com/patterns/black-thread-light.png); background-color: rgb(255, 255, 255,0.5); margin: auto; margin-top: 120px; width: 80%; height: 450px; max-width: 1075px; min-width: 775px; box-sizing: border-box; [/class] [class name=BackgroundBox maxWidth="900px"] margin: auto; width: 100%; height: 100%; box-sizing: border-box; [/class] [class name=MainBody minWidth="901px"] background-color: White; width: 95%; max-width: 525px; margin: auto; border-radius: 14px; box-sizing: border-box; border: 1px solid #bfbfbf; padding: 20px; font-size: 14px; margin-top: 60px; [/class] [class name=MainBody maxWidth="900px"] background-color: White; width: 95%; margin: auto; border-radius: 14px; box-sizing: border-box; border: 1px solid #bfbfbf; padding: 5%; font-size: 14px; margin-top: 15px; [/class] [class=BodyImage] margin: auto; max-width: 650px; width: 100%; height: 250px; background-size: cover; background-position: 50% 65%; [/class] [class name=SideTitle minWidth="901px"] margin: auto; box-sizing: border-box; text-transform: lowercase; line-height: 1.5em; background-color: transparent; margin-top: 40px; font-size: 28px; height: 50px; min-width: 120px; width: 90%; text-align: center; color: #808080; letter-spacing: -1px; opacity: 0.6; [/class] [class name=SideTitle maxWidth="900px"] display: none; [/class] [class name=ScrollRight minWidth="901px"] width: 75%; background-color: White; color: gray; margin: auto; height: 250px; border-radius: 5px; font-size: 12px; padding: 10px; box-sizing: border-box; text-align: justify; font-family: Lato; text-transform: lowercase; line-height: 1.5em; max-height: 90px; border: 1px solid #bfbfbf; overflow: auto; [/class] [class name=ScrollRight maxWidth="900px"] display: none; [/class] [class name=Gradient minWidth="901px"] background: linear-gradient(#d0f2c0, transparent); position: relative; z-index: 2; height: 35px; [/class] [class name=Gradient maxWidth="900px"] display: none; [/class] [class name=ProfileImage] background: url(https://i.imgur.com/XOpNjm4.png) no-repeat; margin: auto; height: 96%; width: 96%; margin-top: 6px; background-size: 330px 900px; background-position: 0% 20%; opacity: 0.9; [/class] [class=Title] box-sizing: border-box; font-size: 18px; margin: 10px 0px; text-align: center; color: #808080; font-family: Roboto Slab; [/class] [class name=Middle minWidth="901px"] display: inline-block; vertical-align: top; max-width: 525px; box-sizing: border-box; width: 50%; height: 700px; margin-top: -120px; overflow: hidden; margin-left: 1.5%; [/class] [class name=Middle maxWidth="900px"] background-color: transparent; display: inline-block; vertical-align: top; box-sizing: border-box; width: 70%; height: 500px; overflow: hidden; [/class] [class=BottomBorder] background-color: #bfbfbf; height: 1px; width: 75%; margin: auto; margin-top: -2px; [/class] [class name=BottomSideBorder minWidth="901px"] background-color: #bfbfbf; height: 2px; width: 75%; margin: auto; margin-top: 20px; opacity: 0.8; [/class] [class name=BottomSideBorder maxWidth="900px"] background-color: #bfbfbf; height: 2px; width: 90%; margin: auto; margin-top: 20px; opacity: 0.8; [/class] [class=p] box-sizing: border-box; margin-bottom: 10px; [/class] [class name=SideBoxLeft minWidth="901px"] width: 22%; background-color: transparent; height: 450px; display: inline-block; vertical-align: top; box-sizing: border-box; opacity: 0.8; margin-left: 1.75%; [/class] [class name=SideBoxLeft maxWidth="900px"] display: none; [/class] [class name=SideBoxRight minWidth="901px"] width: 22%; background-color: transparent; height: 450px; display: inline-block; vertical-align: top; box-sizing: border-box; opacity: 0.8; [/class] [class name=SideBoxRight maxWidth="900px"] width: 30%; background-color: transparent; height: 100%; display: inline-block; vertical-align: top; box-sizing: border-box; [/class] [class name=SideBorder minWidth="901px"] height: 350px; margin: auto; margin-top: 35px; width: 2px; background-color: #bfbfbf; opacity: 0.6; display: inline-block; vertical-align: top; box-sizing: border-box; margin-left: 0.5%; margin-right: 0.5%; [/class] [class name=SideBorder maxWidth="900px"] display: none; [/class] [class name=HiddenScroll minWidth="901px"] width: 100%; padding-right: 5%; overflow-y: scroll; line-height: 1.5em; height: 100%; color: gray; text-align: justify; opacity: 0.9; font-family: Lato; text-transform: lowercase; [/class] [class name=HiddenScroll maxWidth="900px"] width: 100%; padding-right: 5%; overflow-y: scroll; line-height: 1.5em; height: 100%; color: gray; text-align: justify; opacity: 1; font-family: Lato; text-transform: lowercase; [/class] [class=SideText] width: 80%; background-color: White; color: gray; margin: auto; height: 250px; border-radius: 5px; font-size: 11px; padding: 10px; box-sizing: border-box; text-align: justify; font-family: Lato; text-transform: lowercase; line-height: 1.5em; [/class] [class name=Buttons minWidth="901px"] line-height: 1.5em; width: 57.5%; background-color: White; margin: auto; margin-top: 6px; height: 32px; border-radius: 2px; font-size: 12px; padding: 3px; box-sizing: border-box; text-align: center; border: 1px solid #bfbfbf; color: #999999; font-family: Lato; text-transform: lowercase; [/class] [class name=Buttons maxWidth="900px" minWidth="501px"] line-height: 1.5em; width: 75%; background-color: White; margin: auto; margin-top: 6px; height: 32px; border-radius: 2px; font-size: 11px; padding: 3px; box-sizing: border-box; text-align: center; border: 1px solid #bfbfbf; color: #999999; font-family: Lato; text-transform: lowercase; [/class] [class name=Buttons maxWidth="500px"] line-height: 1.5em; width: 90%; background-color: White; margin: auto; margin-top: 6px; height: 32px; border-radius: 2px; font-size: 11px; padding: 3px; box-sizing: border-box; text-align: center; border: 1px solid #bfbfbf; color: #999999; font-family: Lato; text-transform: lowercase; [/class] [class=tabLink] box-sizing: border-box; color: #565656; padding: 3px; text-align: center; [/class] [class=tabLink2] box-sizing: border-box; color: #565656; padding: 3px; text-align: center; [/class] [class name=tabLink state=hover] background-color: #c1eaad; box-sizing: border-box; color: white; cursor: pointer; [/class] [class name=tabLink2 state=hover] background-color: #efefa0; box-sizing: border-box; color: white; cursor: pointer; [/class] [class name=HiddenScroll state=hover] opacity: 1.0; [/class] [class=hidden] display: none; [/class] [script class=tabLink on=click] hide content set link (getText) if (eq "${link}" "Tab One") (show contentTabOne) if (eq "${link}" "Tab Three") (show contentTabThree) [/script] [script class=tabLink2 on=click] hide content set link (getText) if (eq "${link}" "Tab Two") (show contentTabTwo) if (eq "${link}" "Tab Four") (show contentTabFour) [/script] [div class=Gradient][/div] [div class=Holder][div class=Background][div class=BackgroundBox][div class=SideBoxLeft][div class=SideText style="margin-top: 60px; border: 1px solid #bfbfbf;"][div class=ProfileImage][/div][/div][div class=SideText style="margin-top: 15px; height: 75px; width: 70%; border: 4px double #bfbfbf; max-height: 65px; overflow: auto; line-height: 1em;"]"a quote could go here! it will look best if it's not too much longer than this."[/div][/div][div class=SideBorder style="margin-top: 55px;"][/div][div class=Middle][div class=HiddenScroll][div class="content contentTabOne"][div class=MainBody][div class=Title]tab header #1[/div] [div class=BottomBorder][/div]
[div class=p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris iaculis facilisis leo eget tempus. Ut cursus commodo ex in mollis. Aenean dignissim, metus sodales semper finibus, eros urna semper mauris, sodales porta lectus urna et nisi. Nunc in commodo metus. Phasellus consectetur auctor dignissim. Vivamus tortor quam, interdum at iaculis at, porta a massa. Aliquam erat volutpat. Sed neque urna, finibus quis ex laoreet, eleifend commodo neque. Aliquam auctor urna sit amet tortor ultricies gravida. Pellentesque massa odio, porta hendrerit nunc tempor, porttitor dapibus est. Sed scelerisque rutrum justo id luctus.[/div] [div class=p]In gravida dapibus sodales. Fusce accumsan felis vel justo lobortis porttitor. Quisque suscipit molestie tempus. Aenean sed dolor est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer at facilisis purus. Aenean dapibus nisl at ligula consequat porttitor. Mauris sit amet erat nec felis hendrerit rhoncus. Duis nunc neque, varius vitae rutrum faucibus, viverra at urna. Aenean pellentesque magna in libero facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam pretium magna viverra, tincidunt odio vel, fermentum nibh. Phasellus vel ipsum a augue blandit blandit.[/div][/div][div class=MainBody style="margin-top: 30px;"][div class=BodyImage style="background: url(https://i.imgur.com/K8ZC2Bq.png) no-repeat; background-position: 50% 65%;"][/div][/div][div class=MainBody style="margin-top: 30px; margin-bottom: 30px;"][div class=Title]tab header #1[/div] [div class=BottomBorder][/div]
[div class=p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris iaculis facilisis leo eget tempus. Ut cursus commodo ex in mollis. Aenean dignissim, metus sodales semper finibus, eros urna semper mauris, sodales porta lectus urna et nisi. Nunc in commodo metus. Phasellus consectetur auctor dignissim. Vivamus tortor quam, interdum at iaculis at, porta a massa. Aliquam erat volutpat. Sed neque urna, finibus quis ex laoreet, eleifend commodo neque. Aliquam auctor urna sit amet tortor ultricies gravida. Pellentesque massa odio, porta hendrerit nunc tempor, porttitor dapibus est. Sed scelerisque rutrum justo id luctus.[/div] [div class=p]In gravida dapibus sodales. Fusce accumsan felis vel justo lobortis porttitor. Quisque suscipit molestie tempus. Aenean sed dolor est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer at facilisis purus. Aenean dapibus nisl at ligula consequat porttitor. Mauris sit amet erat nec felis hendrerit rhoncus. Duis nunc neque, varius vitae rutrum faucibus, viverra at urna. Aenean pellentesque magna in libero facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam pretium magna viverra, tincidunt odio vel, fermentum nibh. Phasellus vel ipsum a augue blandit blandit.[/div][/div][/div][div class="content contentTabTwo hidden"][div class=MainBody][div class=Title]tab header #2[/div] [div class=BottomBorder][/div]
[div class=p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris iaculis facilisis leo eget tempus. Ut cursus commodo ex in mollis. Aenean dignissim, metus sodales semper finibus, eros urna semper mauris, sodales porta lectus urna et nisi. Nunc in commodo metus. Phasellus consectetur auctor dignissim. Vivamus tortor quam, interdum at iaculis at, porta a massa. Aliquam erat volutpat. Sed neque urna, finibus quis ex laoreet, eleifend commodo neque. Aliquam auctor urna sit amet tortor ultricies gravida. Pellentesque massa odio, porta hendrerit nunc tempor, porttitor dapibus est. Sed scelerisque rutrum justo id luctus.[/div] [div class=p]In gravida dapibus sodales. Fusce accumsan felis vel justo lobortis porttitor. Quisque suscipit molestie tempus. Aenean sed dolor est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer at facilisis purus. Aenean dapibus nisl at ligula consequat porttitor. Mauris sit amet erat nec felis hendrerit rhoncus. Duis nunc neque, varius vitae rutrum faucibus, viverra at urna. Aenean pellentesque magna in libero facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam pretium magna viverra, tincidunt odio vel, fermentum nibh. Phasellus vel ipsum a augue blandit blandit.[/div][/div][div class=MainBody style="margin-top: 30px;"][div class=BodyImage style="background: url(https://i.imgur.com/K8ZC2Bq.png) no-repeat; background-position: 50% 65%;"][/div][/div][div class=MainBody style="margin-top: 30px; margin-bottom: 30px;"][div class=Title]tab header #2[/div] [div class=BottomBorder][/div]
[div class=p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris iaculis facilisis leo eget tempus. Ut cursus commodo ex in mollis. Aenean dignissim, metus sodales semper finibus, eros urna semper mauris, sodales porta lectus urna et nisi. Nunc in commodo metus. Phasellus consectetur auctor dignissim. Vivamus tortor quam, interdum at iaculis at, porta a massa. Aliquam erat volutpat. Sed neque urna, finibus quis ex laoreet, eleifend commodo neque. Aliquam auctor urna sit amet tortor ultricies gravida. Pellentesque massa odio, porta hendrerit nunc tempor, porttitor dapibus est. Sed scelerisque rutrum justo id luctus.[/div] [div class=p]In gravida dapibus sodales. Fusce accumsan felis vel justo lobortis porttitor. Quisque suscipit molestie tempus. Aenean sed dolor est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer at facilisis purus. Aenean dapibus nisl at ligula consequat porttitor. Mauris sit amet erat nec felis hendrerit rhoncus. Duis nunc neque, varius vitae rutrum faucibus, viverra at urna. Aenean pellentesque magna in libero facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam pretium magna viverra, tincidunt odio vel, fermentum nibh. Phasellus vel ipsum a augue blandit blandit.[/div][/div][/div][div class="content contentTabThree hidden"][div class=MainBody][div class=Title]tab header #3[/div] [div class=BottomBorder][/div]
[div class=p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris iaculis facilisis leo eget tempus. Ut cursus commodo ex in mollis. Aenean dignissim, metus sodales semper finibus, eros urna semper mauris, sodales porta lectus urna et nisi. Nunc in commodo metus. Phasellus consectetur auctor dignissim. Vivamus tortor quam, interdum at iaculis at, porta a massa. Aliquam erat volutpat. Sed neque urna, finibus quis ex laoreet, eleifend commodo neque. Aliquam auctor urna sit amet tortor ultricies gravida. Pellentesque massa odio, porta hendrerit nunc tempor, porttitor dapibus est. Sed scelerisque rutrum justo id luctus.[/div] [div class=p]In gravida dapibus sodales. Fusce accumsan felis vel justo lobortis porttitor. Quisque suscipit molestie tempus. Aenean sed dolor est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer at facilisis purus. Aenean dapibus nisl at ligula consequat porttitor. Mauris sit amet erat nec felis hendrerit rhoncus. Duis nunc neque, varius vitae rutrum faucibus, viverra at urna. Aenean pellentesque magna in libero facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam pretium magna viverra, tincidunt odio vel, fermentum nibh. Phasellus vel ipsum a augue blandit blandit.[/div][/div][div class=MainBody style="margin-top: 30px;"][div class=BodyImage style="background: url(https://i.imgur.com/K8ZC2Bq.png) no-repeat; background-position: 50% 65%;"][/div][/div][div class=MainBody style="margin-top: 30px; margin-bottom: 30px;"][div class=Title]tab header #3[/div] [div class=BottomBorder][/div]
[div class=p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris iaculis facilisis leo eget tempus. Ut cursus commodo ex in mollis. Aenean dignissim, metus sodales semper finibus, eros urna semper mauris, sodales porta lectus urna et nisi. Nunc in commodo metus. Phasellus consectetur auctor dignissim. Vivamus tortor quam, interdum at iaculis at, porta a massa. Aliquam erat volutpat. Sed neque urna, finibus quis ex laoreet, eleifend commodo neque. Aliquam auctor urna sit amet tortor ultricies gravida. Pellentesque massa odio, porta hendrerit nunc tempor, porttitor dapibus est. Sed scelerisque rutrum justo id luctus.[/div] [div class=p]In gravida dapibus sodales. Fusce accumsan felis vel justo lobortis porttitor. Quisque suscipit molestie tempus. Aenean sed dolor est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer at facilisis purus. Aenean dapibus nisl at ligula consequat porttitor. Mauris sit amet erat nec felis hendrerit rhoncus. Duis nunc neque, varius vitae rutrum faucibus, viverra at urna. Aenean pellentesque magna in libero facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam pretium magna viverra, tincidunt odio vel, fermentum nibh. Phasellus vel ipsum a augue blandit blandit.[/div][/div][/div][div class="content contentTabFour hidden"][div class=MainBody][div class=Title]tab header #4[/div] [div class=BottomBorder][/div]
[div class=p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris iaculis facilisis leo eget tempus. Ut cursus commodo ex in mollis. Aenean dignissim, metus sodales semper finibus, eros urna semper mauris, sodales porta lectus urna et nisi. Nunc in commodo metus. Phasellus consectetur auctor dignissim. Vivamus tortor quam, interdum at iaculis at, porta a massa. Aliquam erat volutpat. Sed neque urna, finibus quis ex laoreet, eleifend commodo neque. Aliquam auctor urna sit amet tortor ultricies gravida. Pellentesque massa odio, porta hendrerit nunc tempor, porttitor dapibus est. Sed scelerisque rutrum justo id luctus.[/div] [div class=p]In gravida dapibus sodales. Fusce accumsan felis vel justo lobortis porttitor. Quisque suscipit molestie tempus. Aenean sed dolor est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer at facilisis purus. Aenean dapibus nisl at ligula consequat porttitor. Mauris sit amet erat nec felis hendrerit rhoncus. Duis nunc neque, varius vitae rutrum faucibus, viverra at urna. Aenean pellentesque magna in libero facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam pretium magna viverra, tincidunt odio vel, fermentum nibh. Phasellus vel ipsum a augue blandit blandit.[/div][/div][div class=MainBody style="margin-top: 30px;"][div class=BodyImage style="background: url(https://i.imgur.com/K8ZC2Bq.png) no-repeat; background-position: 50% 65%;"][/div][/div][div class=MainBody style="margin-top: 30px; margin-bottom: 30px;"][div class=Title]tab header #4[/div] [div class=BottomBorder][/div]
[div class=p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris iaculis facilisis leo eget tempus. Ut cursus commodo ex in mollis. Aenean dignissim, metus sodales semper finibus, eros urna semper mauris, sodales porta lectus urna et nisi. Nunc in commodo metus. Phasellus consectetur auctor dignissim. Vivamus tortor quam, interdum at iaculis at, porta a massa. Aliquam erat volutpat. Sed neque urna, finibus quis ex laoreet, eleifend commodo neque. Aliquam auctor urna sit amet tortor ultricies gravida. Pellentesque massa odio, porta hendrerit nunc tempor, porttitor dapibus est. Sed scelerisque rutrum justo id luctus.[/div] [div class=p]In gravida dapibus sodales. Fusce accumsan felis vel justo lobortis porttitor. Quisque suscipit molestie tempus. Aenean sed dolor est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer at facilisis purus. Aenean dapibus nisl at ligula consequat porttitor. Mauris sit amet erat nec felis hendrerit rhoncus. Duis nunc neque, varius vitae rutrum faucibus, viverra at urna. Aenean pellentesque magna in libero facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam pretium magna viverra, tincidunt odio vel, fermentum nibh. Phasellus vel ipsum a augue blandit blandit.[/div][/div][/div][/div][/div][div class=SideBorder][/div][div class=SideBoxRight][div class=SideTitle]name here[/div][div class=MobileProfileBox][div class=MobileProfileImage][/div][/div][div class=ScrollRight]lorem ipsum dolor sit amet, consect adipiscing elit. mauris iaculis facilisis leo eget tempus. ut cursus commodo ex in mollis. aenean dignissim, metus sodales semper finibus, eros urna semper mauris, sodales porta lectus urna et nisi. nunc in commodo metus. phasellus consectetur auctor dignissim.[/div][div class=BottomSideBorder][/div][div class=Buttons style="margin-top: 20px;"][div class=tabLink]Tab One[/div][/div][div class=Buttons][div class=tabLink2]Tab Two[/div][/div][div class=Buttons][div class=tabLink]Tab Three[/div][/div][div class=Buttons][div class=tabLink2]Tab Four[/div] [/div][/div][/div][/div][/div] [div class=Gradient style="background: linear-gradient(transparent, #f2f2c0); margin-top: -35px;"][/div]

Code:
[nobr]
[comment]made by Rustic / 30288[/comment]
[class name=Holder minWidth="900px"]
 width: 100%;
 height: 700px;
 box-sizing: border-box;
 margin-top: -35px;
 background: linear-gradient(#d0f2c0, #f2f2c0);
[/class]
[class name=Holder maxWidth="900px"]
  width: 100%;
  height: 500px;
  box-sizing: border-box;
  background-color: #ddf9cf;
  background: linear-gradient(#d0f2c0, #f2f2c0);
[/class]
[class name=MobileProfileBox minWidth="901px"]
 display: none;
[/class]
[class name=MobileProfileBox maxWidth="900px"]
 width: 90%;
 padding: 6%;
 background-color: White;
 margin: auto;
 margin-top: 40px;
 height: 225px;
 border-radius: 5px;
 box-sizing: border-box;
 border: 1px solid #bfbfbf;
 box-sizing: border-box;
[/class]
[class name=MobileProfileImage minWidth="900px"]
 display: none;
[/class]
[class name=MobileProfileImage maxWidth="900px"]
 box-sizing: border-box;
 background: url(https://i.imgur.com/XOpNjm4.png);
 margin: auto;
 height: 100%;
 width: 100%;
 background-size: 330px 900px;
 background-position: 0% 20%;
 opacity: 0.8;
[/class]
[class=Background]
  height: 100%;
  overflow: auto;
  background:url(https://www.transparenttextures.com/patterns/axiom-pattern.png);
  margin: auto;
  box-sizing: border-box;
  width: 100%;
[/class]
[class name=BackgroundBox minWidth="901px"]
  min-width: 325px;
  border-radius: 15px;
  background:url(https://www.transparenttextures.com/patterns/black-thread-light.png);
  background-color: rgb(255, 255, 255,0.5);
  margin: auto;
  margin-top: 120px;
  width: 80%;
  height: 450px;
  max-width: 1075px;
  min-width: 775px;
  box-sizing: border-box;
[/class]
[class name=BackgroundBox maxWidth="900px"]
  margin: auto;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
[/class]
[class name=MainBody minWidth="901px"]
 background-color: White;
 width: 95%;
 max-width: 525px;
 margin: auto;
 border-radius: 14px;
 box-sizing: border-box;
 border: 1px solid #bfbfbf;
 padding: 20px;
 font-size: 14px;
 margin-top: 60px;
[/class]
[class name=MainBody maxWidth="900px"]
 background-color: White;
 width: 95%;
 margin: auto;
 border-radius: 14px;
 box-sizing: border-box;
 border: 1px solid #bfbfbf;
 padding: 5%;
 font-size: 14px;
 margin-top: 15px;
[/class]
[class=BodyImage]
 margin: auto;
 max-width: 650px;
 width: 100%;
 height: 250px;
 background-size: cover;
 background-position: 50% 65%;
[/class]
[class name=SideTitle minWidth="901px"]
 margin: auto;
 box-sizing: border-box;
 line-height: 1.5em;
 background-color: transparent;
 margin-top: 40px;
 font-size: 28px;
 height: 50px;
 min-width: 120px;
 width: 90%;
 text-align: center; 
 color: #808080;
 letter-spacing: -1px;
 opacity: 0.6;
[/class]
[class name=SideTitle maxWidth="900px"]
 display: none;
[/class]
[class name=ScrollRight minWidth="901px"]
 width: 75%;
 background-color: White;
 color: gray;
 margin: auto;
 height: 250px;
 border-radius: 5px;
 font-size: 12px;
 padding: 10px;
 box-sizing: border-box;
 text-align: justify;
 font-family: Lato;
 line-height: 1.5em;
 max-height: 90px;  
 border: 1px solid #bfbfbf; 
 overflow: auto;
[/class]
[class name=ScrollRight maxWidth="900px"]
 display: none;
[/class]
[class name=Gradient minWidth="901px"]
 background: linear-gradient(#d0f2c0, transparent);
 position: relative;
 z-index: 2;
 height: 35px;
[/class]
[class name=Gradient maxWidth="900px"]
 display: none;
[/class]
[class name=ProfileImage]
 background: url(https://i.imgur.com/XOpNjm4.png) no-repeat;
 margin: auto;
 height: 96%;
 width: 96%;
 margin-top: 6px;
 background-size: 330px 900px;
 background-position: 0% 20%;
 opacity: 0.9;
[/class]
[class=Title]
  box-sizing: border-box;
  font-size: 18px;
  margin: 10px 0px;
  text-align: center;
  color: #808080;
  font-family: Roboto Slab;
[/class]
[class name=Middle minWidth="901px"]
 display: inline-block;
 vertical-align: top;
 max-width: 525px;
 box-sizing: border-box;
 width: 50%;
 height: 700px;
 margin-top: -120px;
 overflow: hidden;
 margin-left: 1.5%;
[/class]
[class name=Middle maxWidth="900px"]
 background-color: transparent;
 display: inline-block;
 vertical-align: top;
 box-sizing: border-box;
 width: 70%;
 height: 500px;
 overflow: hidden;
[/class]
[class=BottomBorder]
 background-color: #bfbfbf;
 height: 1px;
 width: 75%;
 margin: auto;
 margin-top: -2px;
[/class]
[class name=BottomSideBorder minWidth="901px"]
 background-color: #bfbfbf;
 height: 2px;
 width: 75%;
 margin: auto;
 margin-top: 20px; 
 opacity: 0.8;
[/class]
[class name=BottomSideBorder maxWidth="900px"]
 background-color: #bfbfbf;
 height: 2px;
 width: 90%;
 margin: auto;
 margin-top: 20px; 
 opacity: 0.8;
[/class]
[class=p]
  box-sizing: border-box;
  margin-bottom: 10px;
[/class]
[class name=SideBoxLeft minWidth="901px"]
  width: 22%;
  background-color: transparent;
  height: 450px;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  opacity: 0.8;
  margin-left: 1.75%;
[/class]
[class name=SideBoxLeft maxWidth="900px"]
 display: none;
[/class]
[class name=SideBoxRight minWidth="901px"]
  width: 22%;
  background-color: transparent;
  height: 450px;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  opacity: 0.8;
[/class]
[class name=SideBoxRight maxWidth="900px"]
  width: 30%;
  background-color: transparent;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
[/class]
[class name=SideBorder minWidth="901px"]
 height: 350px;
 margin: auto;
 margin-top: 35px;
 width: 2px;
 background-color: #bfbfbf;
 opacity: 0.6;
 display: inline-block;
 vertical-align: top;
 box-sizing: border-box;
 margin-left: 0.5%;
 margin-right: 0.5%;
[/class]
[class name=SideBorder maxWidth="900px"]
 display: none;
[/class]
[class name=HiddenScroll minWidth="901px"]
 width: 100%;
 padding-right: 5%;
 overflow-y: scroll;
 line-height: 1.5em;
 height: 100%;
 color: gray;
 text-align: justify;
 opacity: 0.9;
 font-family: Lato;
[/class]
[class name=HiddenScroll maxWidth="900px"]
 width: 100%;
 padding-right: 5%;
 overflow-y: scroll;
 line-height: 1.5em;
 height: 100%;
 color: gray;
 text-align: justify;
 opacity: 1;
 font-family: Lato;
[/class]
[class=SideText]
 width: 80%;
 background-color: White;
 color: gray;
 margin: auto;
 height: 250px;
 border-radius: 5px;
 font-size: 11px;
 padding: 10px;
 box-sizing: border-box;
 text-align: justify;
 font-family: Lato;
 line-height: 1.5em;
[/class]
[class name=Buttons minWidth="901px"]
  line-height: 1.5em;
  width: 57.5%;
  background-color: White;
  margin: auto;
  margin-top: 6px;
  height: 32px;
  border-radius: 2px;
  font-size: 12px;
  padding: 3px;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid  #bfbfbf;
  color: #999999;
  font-family: Lato;
[/class]
[class name=Buttons maxWidth="900px" minWidth="501px"]
  line-height: 1.5em;
  width: 75%;
  background-color: White;
  margin: auto;
  margin-top: 6px;
  height: 32px;
  border-radius: 2px;
  font-size: 11px;
  padding: 3px;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid  #bfbfbf;
  color: #999999;
  font-family: Lato;
[/class]
[class name=Buttons maxWidth="500px"]
  line-height: 1.5em;
  width: 90%;
  background-color: White;
  margin: auto;
  margin-top: 6px;
  height: 32px;
  border-radius: 2px;
  font-size: 11px;
  padding: 3px;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid  #bfbfbf;
  color: #999999;
  font-family: Lato;
[/class]
[class=tabLink]
    box-sizing: border-box;
    color: #565656;
    padding: 3px;
    text-align: center;
[/class]
[class=tabLink2]
    box-sizing: border-box;
    color: #565656;
    padding: 3px;
    text-align: center;
[/class]
[class name=tabLink state=hover]
    background-color: #c1eaad;
    box-sizing: border-box;
    color: white;
    cursor: pointer;
[/class]
[class name=tabLink2 state=hover]
    background-color: #efefa0;
    box-sizing: border-box;
    color: white;
    cursor: pointer;
[/class]
[class name=HiddenScroll state=hover]
   opacity: 1.0;
[/class]
[class=hidden]
    display: none;
[/class]
[script class=tabLink on=click]
    hide content
    set link (getText)
    if (eq "${link}" "Tab One") (show contentTabOne)
    if (eq "${link}" "Tab Three") (show contentTabThree)
[/script]
[script class=tabLink2 on=click]
    hide content
    set link (getText)
    if (eq "${link}" "Tab Two") (show contentTabTwo)
    if (eq "${link}" "Tab Four") (show contentTabFour)
[/script]

[div class=Gradient][/div]
[div class=Holder][div class=Background][div class=BackgroundBox][div class=SideBoxLeft][div class=SideText style="margin-top: 60px; border: 1px solid #bfbfbf;"][div class=ProfileImage][/div][/div][div class=SideText style="margin-top: 15px; height: 75px; width: 70%; border: 4px double #bfbfbf; max-height: 65px; overflow: auto; line-height: 1em;"][font=Lato]"a quote could go here! it will look best if it's not too much longer than this."[/font][/div][/div][div class=SideBorder style="margin-top: 55px;"][/div][div class=Middle][div class=HiddenScroll][div class="content contentTabOne"][div class=MainBody][div class=Title]tab header #1[/div]

[div class=BottomBorder][/div][br][/br]

[div class=p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris iaculis facilisis leo eget tempus. Ut cursus commodo ex in mollis. Aenean dignissim, metus sodales semper finibus, eros urna semper mauris, sodales porta lectus urna et nisi. Nunc in commodo metus. Phasellus consectetur auctor dignissim. Vivamus tortor quam, interdum at iaculis at, porta a massa. Aliquam erat volutpat. Sed neque urna, finibus quis ex laoreet, eleifend commodo neque. Aliquam auctor urna sit amet tortor ultricies gravida. Pellentesque massa odio, porta hendrerit nunc tempor, porttitor dapibus est. Sed scelerisque rutrum justo id luctus.[/div]

[div class=p]In gravida dapibus sodales. Fusce accumsan felis vel justo lobortis porttitor. Quisque suscipit molestie tempus. Aenean sed dolor est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer at facilisis purus. Aenean dapibus nisl at ligula consequat porttitor. Mauris sit amet erat nec felis hendrerit rhoncus. Duis nunc neque, varius vitae rutrum faucibus, viverra at urna. Aenean pellentesque magna in libero facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam pretium magna viverra, tincidunt odio vel, fermentum nibh. Phasellus vel ipsum a augue blandit blandit.[/div][/div][div class=MainBody style="margin-top: 30px;"][div class=BodyImage style="background: url(https://i.imgur.com/K8ZC2Bq.png) no-repeat;  background-position: 50% 65%;"][/div][/div][div class=MainBody style="margin-top: 30px; margin-bottom: 30px;"][div class=Title]tab header #1[/div]

[div class=BottomBorder][/div][br][/br]

[div class=p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris iaculis facilisis leo eget tempus. Ut cursus commodo ex in mollis. Aenean dignissim, metus sodales semper finibus, eros urna semper mauris, sodales porta lectus urna et nisi. Nunc in commodo metus. Phasellus consectetur auctor dignissim. Vivamus tortor quam, interdum at iaculis at, porta a massa. Aliquam erat volutpat. Sed neque urna, finibus quis ex laoreet, eleifend commodo neque. Aliquam auctor urna sit amet tortor ultricies gravida. Pellentesque massa odio, porta hendrerit nunc tempor, porttitor dapibus est. Sed scelerisque rutrum justo id luctus.[/div]

[div class=p]In gravida dapibus sodales. Fusce accumsan felis vel justo lobortis porttitor. Quisque suscipit molestie tempus. Aenean sed dolor est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer at facilisis purus. Aenean dapibus nisl at ligula consequat porttitor. Mauris sit amet erat nec felis hendrerit rhoncus. Duis nunc neque, varius vitae rutrum faucibus, viverra at urna. Aenean pellentesque magna in libero facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam pretium magna viverra, tincidunt odio vel, fermentum nibh. Phasellus vel ipsum a augue blandit blandit.[/div][/div][/div][div class="content contentTabTwo hidden"][div class=MainBody][div class=Title]tab header #2[/div]

[div class=BottomBorder][/div][br][/br]

[div class=p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris iaculis facilisis leo eget tempus. Ut cursus commodo ex in mollis. Aenean dignissim, metus sodales semper finibus, eros urna semper mauris, sodales porta lectus urna et nisi. Nunc in commodo metus. Phasellus consectetur auctor dignissim. Vivamus tortor quam, interdum at iaculis at, porta a massa. Aliquam erat volutpat. Sed neque urna, finibus quis ex laoreet, eleifend commodo neque. Aliquam auctor urna sit amet tortor ultricies gravida. Pellentesque massa odio, porta hendrerit nunc tempor, porttitor dapibus est. Sed scelerisque rutrum justo id luctus.[/div]

[div class=p]In gravida dapibus sodales. Fusce accumsan felis vel justo lobortis porttitor. Quisque suscipit molestie tempus. Aenean sed dolor est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer at facilisis purus. Aenean dapibus nisl at ligula consequat porttitor. Mauris sit amet erat nec felis hendrerit rhoncus. Duis nunc neque, varius vitae rutrum faucibus, viverra at urna. Aenean pellentesque magna in libero facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam pretium magna viverra, tincidunt odio vel, fermentum nibh. Phasellus vel ipsum a augue blandit blandit.[/div][/div][div class=MainBody style="margin-top: 30px;"][div class=BodyImage style="background: url(https://i.imgur.com/K8ZC2Bq.png) no-repeat; background-position: 50% 65%;"][/div][/div][div class=MainBody style="margin-top: 30px; margin-bottom: 30px;"][div class=Title]tab header #2[/div]

[div class=BottomBorder][/div][br][/br]

[div class=p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris iaculis facilisis leo eget tempus. Ut cursus commodo ex in mollis. Aenean dignissim, metus sodales semper finibus, eros urna semper mauris, sodales porta lectus urna et nisi. Nunc in commodo metus. Phasellus consectetur auctor dignissim. Vivamus tortor quam, interdum at iaculis at, porta a massa. Aliquam erat volutpat. Sed neque urna, finibus quis ex laoreet, eleifend commodo neque. Aliquam auctor urna sit amet tortor ultricies gravida. Pellentesque massa odio, porta hendrerit nunc tempor, porttitor dapibus est. Sed scelerisque rutrum justo id luctus.[/div]

[div class=p]In gravida dapibus sodales. Fusce accumsan felis vel justo lobortis porttitor. Quisque suscipit molestie tempus. Aenean sed dolor est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer at facilisis purus. Aenean dapibus nisl at ligula consequat porttitor. Mauris sit amet erat nec felis hendrerit rhoncus. Duis nunc neque, varius vitae rutrum faucibus, viverra at urna. Aenean pellentesque magna in libero facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam pretium magna viverra, tincidunt odio vel, fermentum nibh. Phasellus vel ipsum a augue blandit blandit.[/div][/div][/div][div class="content contentTabThree hidden"][div class=MainBody][div class=Title]tab header #3[/div]

[div class=BottomBorder][/div][br][/br]

[div class=p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris iaculis facilisis leo eget tempus. Ut cursus commodo ex in mollis. Aenean dignissim, metus sodales semper finibus, eros urna semper mauris, sodales porta lectus urna et nisi. Nunc in commodo metus. Phasellus consectetur auctor dignissim. Vivamus tortor quam, interdum at iaculis at, porta a massa. Aliquam erat volutpat. Sed neque urna, finibus quis ex laoreet, eleifend commodo neque. Aliquam auctor urna sit amet tortor ultricies gravida. Pellentesque massa odio, porta hendrerit nunc tempor, porttitor dapibus est. Sed scelerisque rutrum justo id luctus.[/div]

[div class=p]In gravida dapibus sodales. Fusce accumsan felis vel justo lobortis porttitor. Quisque suscipit molestie tempus. Aenean sed dolor est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer at facilisis purus. Aenean dapibus nisl at ligula consequat porttitor. Mauris sit amet erat nec felis hendrerit rhoncus. Duis nunc neque, varius vitae rutrum faucibus, viverra at urna. Aenean pellentesque magna in libero facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam pretium magna viverra, tincidunt odio vel, fermentum nibh. Phasellus vel ipsum a augue blandit blandit.[/div][/div][div class=MainBody style="margin-top: 30px;"][div class=BodyImage style="background: url(https://i.imgur.com/K8ZC2Bq.png) no-repeat;  background-position: 50% 65%;"][/div][/div][div class=MainBody style="margin-top: 30px; margin-bottom: 30px;"][div class=Title]tab header #3[/div]

[div class=BottomBorder][/div][br][/br]

[div class=p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris iaculis facilisis leo eget tempus. Ut cursus commodo ex in mollis. Aenean dignissim, metus sodales semper finibus, eros urna semper mauris, sodales porta lectus urna et nisi. Nunc in commodo metus. Phasellus consectetur auctor dignissim. Vivamus tortor quam, interdum at iaculis at, porta a massa. Aliquam erat volutpat. Sed neque urna, finibus quis ex laoreet, eleifend commodo neque. Aliquam auctor urna sit amet tortor ultricies gravida. Pellentesque massa odio, porta hendrerit nunc tempor, porttitor dapibus est. Sed scelerisque rutrum justo id luctus.[/div]

[div class=p]In gravida dapibus sodales. Fusce accumsan felis vel justo lobortis porttitor. Quisque suscipit molestie tempus. Aenean sed dolor est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer at facilisis purus. Aenean dapibus nisl at ligula consequat porttitor. Mauris sit amet erat nec felis hendrerit rhoncus. Duis nunc neque, varius vitae rutrum faucibus, viverra at urna. Aenean pellentesque magna in libero facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam pretium magna viverra, tincidunt odio vel, fermentum nibh. Phasellus vel ipsum a augue blandit blandit.[/div][/div][/div][div class="content contentTabFour hidden"][div class=MainBody][div class=Title]tab header #4[/div]

[div class=BottomBorder][/div][br][/br]

[div class=p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris iaculis facilisis leo eget tempus. Ut cursus commodo ex in mollis. Aenean dignissim, metus sodales semper finibus, eros urna semper mauris, sodales porta lectus urna et nisi. Nunc in commodo metus. Phasellus consectetur auctor dignissim. Vivamus tortor quam, interdum at iaculis at, porta a massa. Aliquam erat volutpat. Sed neque urna, finibus quis ex laoreet, eleifend commodo neque. Aliquam auctor urna sit amet tortor ultricies gravida. Pellentesque massa odio, porta hendrerit nunc tempor, porttitor dapibus est. Sed scelerisque rutrum justo id luctus.[/div]

[div class=p]In gravida dapibus sodales. Fusce accumsan felis vel justo lobortis porttitor. Quisque suscipit molestie tempus. Aenean sed dolor est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer at facilisis purus. Aenean dapibus nisl at ligula consequat porttitor. Mauris sit amet erat nec felis hendrerit rhoncus. Duis nunc neque, varius vitae rutrum faucibus, viverra at urna. Aenean pellentesque magna in libero facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam pretium magna viverra, tincidunt odio vel, fermentum nibh. Phasellus vel ipsum a augue blandit blandit.[/div][/div][div class=MainBody style="margin-top: 30px;"][div class=BodyImage style="background: url(https://i.imgur.com/K8ZC2Bq.png) no-repeat;  background-position: 50% 65%;"][/div][/div][div class=MainBody style="margin-top: 30px; margin-bottom: 30px;"][div class=Title]tab header #4[/div]

[div class=BottomBorder][/div][br][/br]

[div class=p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris iaculis facilisis leo eget tempus. Ut cursus commodo ex in mollis. Aenean dignissim, metus sodales semper finibus, eros urna semper mauris, sodales porta lectus urna et nisi. Nunc in commodo metus. Phasellus consectetur auctor dignissim. Vivamus tortor quam, interdum at iaculis at, porta a massa. Aliquam erat volutpat. Sed neque urna, finibus quis ex laoreet, eleifend commodo neque. Aliquam auctor urna sit amet tortor ultricies gravida. Pellentesque massa odio, porta hendrerit nunc tempor, porttitor dapibus est. Sed scelerisque rutrum justo id luctus.[/div]

[div class=p]In gravida dapibus sodales. Fusce accumsan felis vel justo lobortis porttitor. Quisque suscipit molestie tempus. Aenean sed dolor est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer at facilisis purus. Aenean dapibus nisl at ligula consequat porttitor. Mauris sit amet erat nec felis hendrerit rhoncus. Duis nunc neque, varius vitae rutrum faucibus, viverra at urna. Aenean pellentesque magna in libero facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam pretium magna viverra, tincidunt odio vel, fermentum nibh. Phasellus vel ipsum a augue blandit blandit.[/div][/div][/div][/div][/div][div class=SideBorder][/div][div class=SideBoxRight][div class=SideTitle][font=Roboto Slab]name here[/font][/div][div class=MobileProfileBox][div class=MobileProfileImage][/div][/div][div class=ScrollRight]lorem ipsum dolor sit amet, consect adipiscing elit. mauris iaculis facilisis leo eget tempus. ut cursus commodo ex in mollis. aenean dignissim, metus sodales semper finibus, eros urna semper mauris, sodales porta lectus urna et nisi. nunc in commodo metus. phasellus consectetur auctor dignissim.[/div][div class=BottomSideBorder][/div][div class=Buttons style="margin-top: 20px;"][div class=tabLink]Tab One[/div][/div][div class=Buttons][div class=tabLink2]Tab Two[/div][/div][div class=Buttons][div class=tabLink]Tab Three[/div][/div][div class=Buttons][div class=tabLink2]Tab Four[/div]
[/div][/div][/div][/div][/div]
[div class=Gradient style="background: linear-gradient(transparent, #f2f2c0); margin-top: -35px;"][/div]
[/nobr]
 
Last edited:
[class name=Container minWidth="801px"] background: linear-gradient(#d0f2c0, #f2f2c0); width: 100%; max-width: 900px; margin: auto; [/class] [class name=Container maxWidth="800px"] background: linear-gradient(#d0f2c0, #f2f2c0); margin: auto; box-sizing: border-box; [/class] [class name=Gradient minWidth="801px"] background: linear-gradient(#d0f2c0, transparent); position: relative; z-index: 2; height: 20px; max-width: 900px; margin: auto; [/class] [class name=Gradient maxWidth="800px"] display: none; [/class] [class name=Background minWidth="801px"] height: 550px; overflow: auto; min-width: 325px; background:url(https://www.transparenttextures.com/patterns/axiom-pattern.png); margin: auto; box-sizing: border-box; width: 100%; max-width: 900px; margin-top: -20px; [/class] [class name=Background maxWidth="800px"] height: 400px; overflow: auto; background:url(https://www.transparenttextures.com/patterns/axiom-pattern.png); margin: auto; box-sizing: border-box; width: 100%; padding: 2%; [/class] [class name=BackBox minWidth="801px"] border-radius: 15px; background:url(https://www.transparenttextures.com/patterns/black-thread-light.png); background-color: rgb(255, 255, 255, 0.5); margin: auto; margin-top: 45px; width: 90%; max-width: 825px; height: 85%; box-sizing: border-box; [/class] [class name=BackBox maxWidth="800px"] margin: auto; width: 100%; height: 100%; box-sizing: border-box; [/class] [class name=SideTitle minWidth="801px"] width: 100%; margin: auto; box-sizing: border-box; display: inline-block; vertical-align: top; font-size: 20px; height: 34px; text-align: center; color: #808080; padding: 0px; letter-spacing: -1px; margin-top: 7px; opacity: 0.6; line-height: 1.5em; [/class] [class name=SideTitle maxWidth="800px"] display: none; [/class] [class name=SideBox minWidth="801px"] width: 90%; border-radius: 5px; border: 1px solid #bfbfbf; background-color: White; color: gray; box-sizing: border-box; text-align: justify; font-family: Lato; overflow: auto; margin: auto; height: 185px; margin-top: 7px; max-width: 150px; font-size: 12px; word-spacing: -1px; padding: 4px; padding-top: 10px; overflow: hidden; [/class] [class name=SideBox maxWidth="800px" minWidth="501px"] width: 100%; border-radius: 5px; border: 1px solid #bfbfbf; background-color: White; color: gray; box-sizing: border-box; text-align: justify; font-family: Lato; overflow: auto; margin: auto; height: 185px; margin-top: 7px; max-width: 150px; font-size: 12px; word-spacing: -1px; padding: 2px; padding-top: 10px; overflow: hidden; [/class] [class name=SideBox maxWidth="500px"] width: 100%; border-radius: 5px; border: 1px solid #bfbfbf; background-color: White; color: gray; box-sizing: border-box; text-align: justify; font-family: Lato; overflow: auto; margin: auto; height: 185px; margin-top: 7px; max-width: 150px; font-size: 12px; word-spacing: -1px; padding: 8px; overflow: hidden; [/class] [class name=IconBox minWidth="801px"] width: 90%; border-radius: 5px; border: 1px solid #bfbfbf; background-color: White; padding: 10px; box-sizing: border-box; overflow: auto; height: 125px; max-width: 125px; overflow: hidden; margin: auto; margin-top: 50px; [/class] [class name=IconBox maxWidth="800px"] width: 100%; border-radius: 5px; border: 1px solid #bfbfbf; background-color: White; padding: 10px; box-sizing: border-box; overflow: auto; height: 125px; max-width: 125px; overflow: hidden; margin: auto; [/class] [class name=MainBox minWidth="801px"] width: 95%; border-radius: 5px; border: 1px solid #bfbfbf; background-color: White; color: gray; margin: auto; margin-top: 4%; height: 89%; font-size: 14px; padding: 10px; box-sizing: border-box; text-align: justify; font-family: Lato; overflow: hidden; padding-left: 20px; [/class] [class name=MainBox maxWidth="800px" minWidth="501px"] width: 100%; border-radius: 5px; border: 1px solid #bfbfbf; background-color: White; color: gray; margin: auto; height: 100%; font-size: 14px; padding: 10px; box-sizing: border-box; text-align: justify; font-family: Lato; overflow: hidden; padding-left: 18px; [/class] [class name=MainBox maxWidth="501px"] width: 100%; border-radius: 5px; border: 1px solid #bfbfbf; background-color: White; color: gray; margin: auto; height: 100%; font-size: 14px; padding: 10px; box-sizing: border-box; text-align: justify; font-family: Lato; overflow: hidden; [/class] [class=Subtitle] box-sizing: border-box; font-size: 18px; margin: 10px 0px; text-align: center; color: #808080; font-family: Roboto Slab; [/class] [class name=Side minWidth="801px"] display: inline-block; vertical-align: top; box-sizing: border-box; width: 19%; height: 100%; margin-left: 2%; [/class] [class name=Side maxWidth="800px"] display: inline-block; vertical-align: top; box-sizing: border-box; margin: auto; width: 20%; height: 90%; margin-right: 2%; margin-top: 30px; [/class] [class name=Main minWidth="801px"] display: inline-block; vertical-align: top; box-sizing: border-box; width: 76%; height: 100%; [/class] [class name=Main maxWidth="800px"] display: inline-block; vertical-align: top; box-sizing: border-box; width: 78%; height: 100%; [/class] [class=BottomBorder] background-color: #bfbfbf; height: 2px; width: 76%; margin: auto; [/class] [class name=SideBorder minWidth="801px"] height: 375px; margin: auto; margin-top: 45px; width: 2px; background-color: #bfbfbf; opacity: 0.6; display: inline-block; vertical-align: top; box-sizing: border-box; margin-left: 1%; margin-right: 0.5%; [/class] [class name=SideBorder maxWidth="800px"] display: none; [/class] [class name=HiddenScrollMain minWidth="501px"] width: 100%; padding-right: 150px; overflow-y: scroll; height: 100%; color: gray; text-align: justify; opacity: 0.9; font-family: Lato; text-transform: lowercase; [/class] [class name=HiddenScrollMain maxWidth="500px"] width: 100%; overflow-y: scroll; height: 100%; color: gray; text-align: justify; opacity: 0.9; font-family: Lato; text-transform: lowercase; [/class] [class name=HiddenScrollSide minWidth="501px"] width: 100%; padding-right: 150px; overflow-y: scroll; height: 100%; color: gray; text-align: justify; opacity: 0.9; font-family: Lato; text-transform: lowercase; margin-left: 6px; [/class] [class name=HiddenScrollSide maxWidth="500px"] width: 100%; overflow-y: scroll; height: 100%; color: gray; text-align: justify; opacity: 0.9; font-family: Lato; text-transform: lowercase; [/class] [class name=Icon] background:url(https://i.imgur.com/i9n8ute.png); position: relative; background-size: cover; height: 100px; max-width: 100px; margin: auto; [/class] [div class=Gradient][/div][div class=Container][div class=Background][div class=BackBox][div class=Side][div class=IconBox][div class=Icon][/div][/div][div class=SideTitle]name here[/div][div class=SideBox][div class=HiddenScrollSide]Location: an example location

Mood: this is an example mood.

Notes: put some notes here! i think this box looks best if you have a bit of info, but it's not required.

Mentions:
Rustic Rustic [/div][/div][/div][div class=SideBorder][/div][div class=Main][div class=MainBox][div class=HiddenScrollMain]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce venenatis, dui ut feugiat semper, libero sem pellentesque turpis, eu vestibulum turpis elit non enim. Maecenas pulvinar libero tincidunt diam sodales porttitor. Aliquam non massa a arcu vulputate tristique. Proin ligula nisi, convallis a est ut, pulvinar porttitor mi. Nunc lobortis orci id suscipit feugiat. Curabitur ut mi ipsum. Curabitur at pellentesque sapien. Curabitur eget orci purus. Nullam in justo at leo posuere fermentum. Curabitur lacinia mi porttitor nisi tincidunt, egestas fringilla quam laoreet. Vestibulum vitae quam sit amet lorem semper suscipit. Phasellus quis dui at orci blandit malesuada in eget lorem. Cras iaculis velit porta purus vestibulum mollis et sed ex.

"Aliquam a pharetra lorem." Ut euismod nibh lacus, id scelerisque neque placerat non. Pellentesque massa elit, gravida vitae lacus a, varius accumsan purus. Vestibulum lorem risus, posuere nec tincidunt sit amet, tempus pharetra ante. Nam et sapien faucibus, malesuada ex eu, convallis tortor. Donec tempus est et imperdiet sagittis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent efficitur viverra elit a cursus. Donec nulla nisi, imperdiet eu sodales at, lobortis et nisl. Maecenas eget augue sit amet neque dignissim sagittis. Ut fermentum mauris vitae leo aliquet, a dapibus risus commodo. Suspendisse et metus vel magna faucibus venenatis tristique a nunc. Mauris sollicitudin mi ante, eget mattis lectus pulvinar sit amet. Curabitur tempor nulla eu nibh porta, molestie pulvinar nunc suscipit. Curabitur vel tincidunt lectus. Fusce dignissim, neque eget mollis dictum, ipsum lacus sollicitudin libero, eget tempor justo leo in velit.

Donec sodales vel erat eget condimentum. Nulla sollicitudin venenatis semper. Aenean orci ipsum, tempor pretium porta id, condimentum sit amet mi. Proin pharetra vehicula arcu ut imperdiet. Curabitur posuere condimentum lectus, non aliquet elit ornare et. Suspendisse scelerisque, orci sit amet fringilla imperdiet, ex nibh ultrices ante, id vestibulum nibh urna quis eros. Donec sit amet venenatis ipsum, in sollicitudin magna. Suspendisse potenti. Sed ac fermentum tortor. Vestibulum scelerisque leo at aliquam convallis. Nullam sed massa eu nulla tempus laoreet at eu purus. Nam egestas accumsan quam sit amet rhoncus.

"Curabitur condimentum ligula rhoncus orci euismod, et faucibus magna pulvinar." Integer non mi fermentum, malesuada lacus sed, congue enim. Mauris vestibulum aliquet blandit. Mauris condimentum nulla ut arcu dapibus, nec egestas erat varius. Pellentesque pharetra consequat efficitur. Cras vel tincidunt ligula, in auctor erat. Duis non mauris eu purus auctor faucibus.

Pellentesque posuere eu nisi vel pretium. Integer ac sapien rhoncus, gravida ligula a, tempus justo. Morbi dapibus venenatis quam non tincidunt. Duis laoreet vel urna eget dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam a sapien sed turpis suscipit mollis quis quis nibh. Integer fermentum sed diam sed malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent et ex rhoncus, ullamcorper lectus sit amet, venenatis lacus. Duis vitae blandit arcu, et tempor tellus. Donec congue nunc at justo ultrices, sit amet maximus nisl vehicula. Donec est est, feugiat eu nibh in, convallis tincidunt diam.[/div][/div][/div][/div][/div][/div][div class=Gradient style="background: linear-gradient(transparent, #f2f2c0); margin-top: -20px;"][/div]

Code:
[nobr]
[comment]made by Rustic / 30288[/comment]
[class name=Container minWidth="801px"]
 background: linear-gradient(#d0f2c0, #f2f2c0);
 width: 100%;
 max-width: 900px;
 margin: auto;
[/class]
[class name=Container maxWidth="800px"]
 background: linear-gradient(#d0f2c0, #f2f2c0);
 margin: auto;
 box-sizing: border-box;
[/class]
[class name=Gradient minWidth="801px"]
 background: linear-gradient(#d0f2c0, transparent); 
 position: relative; 
 z-index: 2;
 height: 20px; 
 max-width: 900px;
 margin: auto;
[/class]
[class name=Gradient maxWidth="800px"]
 display: none;
[/class]
[class name=Background minWidth="801px"]
 height: 550px;
 overflow: auto;
 min-width: 325px;
 background:url(https://www.transparenttextures.com/patterns/axiom-pattern.png);
  margin: auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  margin-top: -20px;
[/class]
[class name=Background maxWidth="800px"]
 height: 400px;
 overflow: auto;
 background:url(https://www.transparenttextures.com/patterns/axiom-pattern.png);
  margin: auto;
  box-sizing: border-box;
  width: 100%;
  padding: 2%;
[/class]
[class name=BackBox minWidth="801px"]
  border-radius: 15px;
  background:url(https://www.transparenttextures.com/patterns/black-thread-light.png);
  background-color: rgb(255, 255, 255, 0.5);
  margin: auto;
  margin-top: 45px;
  width: 90%;
  max-width: 825px;
  height: 85%;
  box-sizing: border-box;
[/class]
[class name=BackBox maxWidth="800px"]
  margin: auto;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
[/class]
[class name=SideTitle minWidth="801px"]
 width: 100%;
 margin: auto;
 box-sizing: border-box;
 overflow: auto;
 display: inline-block;
 vertical-align: top;
 font-size: 20px; 
 height: 34px; 
 text-align: center; 
 color: #808080; 
 padding: 0px; 
 letter-spacing: -1px;
 margin-top: 7px;
 opacity: 0.6;
 line-height: 1.5em;
[/class]
[class name=SideTitle maxWidth="800px"]
 display: none;
[/class]
[class name=SideBox minWidth="801px"]
 width: 90%;
 border-radius: 5px;
 border: 1px solid #bfbfbf;
 background-color: White;
 color: gray;
 box-sizing: border-box;
 text-align: justify;
 font-family: Lato;
 overflow: auto;
 margin: auto;
 height: 185px;
 margin-top: 7px;
 max-width: 150px;
 font-size: 12px;
 word-spacing: -1px;
 padding: 4px; 
 padding-top: 10px;
 overflow: hidden;
[/class]
[class name=SideBox maxWidth="800px" minWidth="501px"]
 width: 100%;
 border-radius: 5px;
 border: 1px solid #bfbfbf;
 background-color: White;
 color: gray;
 box-sizing: border-box;
 text-align: justify;
 font-family: Lato;
 overflow: auto;
 margin: auto;
 height: 185px;
 margin-top: 7px;
 max-width: 150px;
 font-size: 12px;
 word-spacing: -1px;
 padding: 2px; 
 padding-top: 10px;
 overflow: hidden;
[/class]
[class name=SideBox maxWidth="500px"]
 width: 100%;
 border-radius: 5px;
 border: 1px solid #bfbfbf;
 background-color: White;
 color: gray;
 box-sizing: border-box;
 text-align: justify;
 font-family: Lato;
 overflow: auto;
 margin: auto;
 height: 185px;
 margin-top: 7px;
 max-width: 150px;
 font-size: 12px;
 word-spacing: -1px;
 padding: 8px;
 overflow: hidden;
[/class]
[class name=IconBox minWidth="801px"]
 width: 90%;
 border-radius: 5px;
 border: 1px solid #bfbfbf;
 background-color: White;
 padding: 10px;
 box-sizing: border-box;
 overflow: auto;
 height: 125px; 
 max-width: 125px;
 overflow: hidden; 
 margin: auto;
 margin-top: 50px;
[/class]
[class name=IconBox maxWidth="800px"]
 width: 100%;
 border-radius: 5px;
 border: 1px solid #bfbfbf;
 background-color: White;
 padding: 10px;
 box-sizing: border-box;
 overflow: auto;
 height: 125px; 
 max-width: 125px; 
 overflow: hidden; 
 margin: auto;
[/class]
[class name=MainBox minWidth="801px"]
 width: 95%;
 border-radius: 5px;
 border: 1px solid #bfbfbf;
 background-color: White;
 color: gray;
 margin: auto;
 margin-top: 4%;
 height: 89%;
 font-size: 14px;
 padding: 10px;
 box-sizing: border-box;
 text-align: justify;
 font-family: Lato;
 overflow: hidden;
 padding-left: 20px;
[/class]
[class name=MainBox maxWidth="800px" minWidth="501px"]
 width: 100%;
 border-radius: 5px;
 border: 1px solid #bfbfbf;
 background-color: White;
 color: gray;
 margin: auto;
 height: 100%;
 font-size: 14px;
 padding: 10px;
 box-sizing: border-box;
 text-align: justify;
 font-family: Lato;
 overflow: hidden;
 padding-left: 18px;
[/class]
[class name=MainBox maxWidth="501px"]
 width: 100%;
 border-radius: 5px;
 border: 1px solid #bfbfbf;
 background-color: White;
 color: gray;
 margin: auto;
 height: 100%;
 font-size: 14px;
 padding: 10px;
 box-sizing: border-box;
 text-align: justify;
 font-family: Lato;
 overflow: hidden;
[/class]
[class=Subtitle]
  box-sizing: border-box;
  font-size: 18px;
  margin: 10px 0px;
  text-align: center;
  color: #808080;
  font-family: Roboto Slab;
[/class]
[class name=Side minWidth="801px"]
 display: inline-block;
 vertical-align: top;
 box-sizing: border-box;
 width: 19%;
 height: 100%;
 margin-left: 2%;
[/class]
[class name=Side maxWidth="800px"]
 display: inline-block;
 vertical-align: top;
 box-sizing: border-box;
 margin: auto;
 width: 20%;
 height: 90%;
 margin-right: 2%;
 margin-top: 30px;
[/class]
[class name=Main minWidth="801px"]
 display: inline-block;
 vertical-align: top;
 box-sizing: border-box;
 width: 76%; 
 height: 100%; 
[/class]
[class name=Main maxWidth="800px"]
 display: inline-block;
 vertical-align: top;
 box-sizing: border-box;
 width: 78%; 
 height: 100%; 
[/class]
[class=BottomBorder]
 background-color: #bfbfbf;
 height: 2px;
 width: 76%;
 margin: auto;
[/class]
[class name=SideBorder minWidth="801px"]
 height: 375px;
 margin: auto;
 margin-top: 45px;
 width: 2px;
 background-color: #bfbfbf;
 opacity: 0.6;
 display: inline-block;
 vertical-align: top;
 box-sizing: border-box;
 margin-left: 1%; 
 margin-right: 0.5%;
[/class]
[class name=SideBorder maxWidth="800px"]
 display: none;
[/class]
[class name=HiddenScrollMain minWidth="501px"]
 width: 100%;
 padding-right: 150px;
 overflow-y: scroll;
 height: 100%;
 color: gray;
 text-align: justify;
 opacity: 0.9;
 font-family: Lato;
[/class]
[class name=HiddenScrollMain maxWidth="500px"]
 width: 100%;
 overflow-y: scroll;
 height: 100%;
 color: gray;
 text-align: justify;
 opacity: 0.9;
 font-family: Lato;
[/class]
[class name=HiddenScrollSide minWidth="501px"]
 width: 100%;
 padding-right: 150px;
 overflow-y: scroll;
 height: 100%;
 color: gray;
 text-align: justify;
 opacity: 0.9;
 font-family: Lato;
 margin-left: 6px;
[/class]
[class name=HiddenScrollSide maxWidth="500px"]
 width: 100%;
 overflow-y: scroll;
 height: 100%;
 color: gray;
 text-align: justify;
 opacity: 0.9;
 font-family: Lato;
[/class]
[class name=Icon] 
 background:url(https://i.imgur.com/i9n8ute.png);
 position: relative;
 background-size: cover;
 height: 100px;
 max-width: 100px;
 margin: auto;
[/class]

[/nobr][div class=Gradient][/div][div class=Container][div class=Background][div class=BackBox][div class=Side][div class=IconBox][div class=Icon][/div][/div][div class=SideTitle][font=Roboto Slab]name here[/font][/div][div class=SideBox][div class=HiddenScrollSide][font=Lato][b]Location:[/b][/font] an example location

[b]Mood:[/b] this is an example mood.

[b]Notes:[/b] put some notes here! i think this box looks best if you have a bit of info, but it's not required.

[b]Mentions:[/b]
[USER=30288][color=#90B37F]@Rustic[/color][/USER][/div][/div][/div][div class=SideBorder][/div][div class=Main][div class=MainBox][div class=HiddenScrollMain]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce venenatis, dui ut feugiat semper, libero sem pellentesque turpis, eu vestibulum turpis elit non enim. Maecenas pulvinar libero tincidunt diam sodales porttitor. Aliquam non massa a arcu vulputate tristique. Proin ligula nisi, convallis a est ut, pulvinar porttitor mi. Nunc lobortis orci id suscipit feugiat. Curabitur ut mi ipsum. Curabitur at pellentesque sapien. Curabitur eget orci purus. Nullam in justo at leo posuere fermentum. Curabitur lacinia mi porttitor nisi tincidunt, egestas fringilla quam laoreet. Vestibulum vitae quam sit amet lorem semper suscipit. Phasellus quis dui at orci blandit malesuada in eget lorem. Cras iaculis velit porta purus vestibulum mollis et sed ex.

[color=#90B37F]"Aliquam a pharetra lorem."[/color] Ut euismod nibh lacus, id scelerisque neque placerat non. Pellentesque massa elit, gravida vitae lacus a, varius accumsan purus. Vestibulum lorem risus, posuere nec tincidunt sit amet, tempus pharetra ante. Nam et sapien faucibus, malesuada ex eu, convallis tortor. Donec tempus est et imperdiet sagittis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent efficitur viverra elit a cursus. Donec nulla nisi, imperdiet eu sodales at, lobortis et nisl. Maecenas eget augue sit amet neque dignissim sagittis. Ut fermentum mauris vitae leo aliquet, a dapibus risus commodo. Suspendisse et metus vel magna faucibus venenatis tristique a nunc. Mauris sollicitudin mi ante, eget mattis lectus pulvinar sit amet. Curabitur tempor nulla eu nibh porta, molestie pulvinar nunc suscipit. Curabitur vel tincidunt lectus. Fusce dignissim, neque eget mollis dictum, ipsum lacus sollicitudin libero, eget tempor justo leo in velit.

Donec sodales vel erat eget condimentum. Nulla sollicitudin venenatis semper. Aenean orci ipsum, tempor pretium porta id, condimentum sit amet mi. Proin pharetra vehicula arcu ut imperdiet. Curabitur posuere condimentum lectus, non aliquet elit ornare et. Suspendisse scelerisque, orci sit amet fringilla imperdiet, ex nibh ultrices ante, id vestibulum nibh urna quis eros. Donec sit amet venenatis ipsum, in sollicitudin magna. Suspendisse potenti. Sed ac fermentum tortor. Vestibulum scelerisque leo at aliquam convallis. Nullam sed massa eu nulla tempus laoreet at eu purus. Nam egestas accumsan quam sit amet rhoncus.

[color=#90B37F]"Curabitur condimentum ligula rhoncus orci euismod, et faucibus magna pulvinar."[/color] Integer non mi fermentum, malesuada lacus sed, congue enim. Mauris vestibulum aliquet blandit. Mauris condimentum nulla ut arcu dapibus, nec egestas erat varius. Pellentesque pharetra consequat efficitur. Cras vel tincidunt ligula, in auctor erat. Duis non mauris eu purus auctor faucibus.

Pellentesque posuere eu nisi vel pretium. Integer ac sapien rhoncus, gravida ligula a, tempus justo. Morbi dapibus venenatis quam non tincidunt. Duis laoreet vel urna eget dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam a sapien sed turpis suscipit mollis quis quis nibh. Integer fermentum sed diam sed malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent et ex rhoncus, ullamcorper lectus sit amet, venenatis lacus. Duis vitae blandit arcu, et tempor tellus. Donec congue nunc at justo ultrices, sit amet maximus nisl vehicula. Donec est est, feugiat eu nibh in, convallis tincidunt diam.[/div][/div][/div][/div][/div][/div][div class=Gradient style="background: linear-gradient(transparent, #f2f2c0); margin-top: -20px;"][/div]
 
Last edited:
update: thank you all for the support! these codes have been cleaned up and made mobile compatible. take care to zoom in your browser window occasionally to preview the mobile variant as you edit.
 

Users who are viewing this thread

Back
Top