What's new

Resource Fyurious Codes 2.0

Should I open requests?


  • Total voters
    1

Fyuri

積ん読
Administrator
Supporter
#1


.

Fyurious Codes 2.0

[hover for more]​

Code Keys

- Desktop Only
- Mobile Friendly
- Fyuri's Personal Codes

Free-to-Use

Mock Mobile
Misc #1
Faux Hover Accordion
Hidden Content Hover
Character Sheet Remake
Faux Vertical Tabs
Faux Horizontal Tabs
Misc #2
Alternate E-Mail
Faux Tabs Header
Dark Misc #1
Character Hover
Cyberpunk Simple
O-mikuji Fortune
Faux Playlist

Fyuri's Personal Codes



Old Codes

You can find my older codes here.

Introduction

Welcome to my pathetic BBCode thread.

Most of the codes you'll find in here are fairly minimalistic in style. This is for a variety of reasons, my personal BBCode skill level, my style preference, and it's easier to create more mobile friendly codes.

Not all the codes here are mobile friendly, but I do try my best to offer them when I can and if they work well with a design I have in mind.

I also like to experiment quite a bit and my coding is a bit messy when you look at it. I am completely self-taught, taking my knowledge of CSS/HTML and applying it my BBCodes as best as I can. I am far from a professional and would not suggest using my codes to learn from. X3

Usage

I use this thread as a code/design showcase.

Some of the codes/designs displayed here are free-to-use with credit. There will also be codes/designs I share that I intended for personal use only, such as for my roleplay projects.

While all BBCode falls under Creative Commons (Attribution/NonCommerical) here on RpNation, I would appreciate the consideration to not use codes I do not provide the raw code for.

If you use a free-to-use code and alter the code, which results in the code breaking, please do not come to me to fix it. You accept the risk of code breaking should you tamper with it. Also, please do not come to me to customize the codes for you. I try to break down the classes so you can modify them yourself.

Please do not steal, re-color and re-post as your own, or remove/edit the credit.

Changelog

If I update a code, I will log that information here.

6/17/2018 - Minor update to all codes linking back to the original. I saw one popular code of mine getting broken from improper code sharing and a link back to the original is meant to help direct others to my resource. Now all code credit links back to my originals.

5/13/2018 - Minor update to Faux Tabs (Horizontal) to work in Dark Theme.

2/4/2018 - Minor update to fyuriheader2 in Character Sheet Remake.

2/3/2018 - Updated Faux Tabs (Vertical) to stop hover issue when hovering below the tabs.

2/2/2018 - Updated Hidden Content Hover code to resolve header issue.

To-Do

  • Dark phone version.
  • Alt phone option
  • New CS

Requests

I am currently not taking any requests for custom codes.

I am on a steep learning curve regarding the new BBCode+ scripts and adapting to the new BBCode+ language. Not to mention I don't really have the time to do them.

code/design by @Fyuri


Introduction
Welcome to my pathetic BBCode thread.

Most of the codes you'll find in here are fairly minimalistic in style. This is for a variety of reasons, my personal BBCode skill level, my style preference, and it's easier to create more mobile friendly codes.

Not all the codes here are mobile friendly, but I do try my best to offer them when I can and they work well with a design I have in mind.

I also like to experiment quite a bit and my coding is a bit messy when you look at it. I am completely self-taught, taking my knowledge of CCS/HTML and applying it my BBCodes as best as I can. I am far from a professional and would not suggest using my codes to learn from. X3

Usage
I use this thread as a code/design showcase.

Some of the designs here are free-to-use with credit and some are not. I would appreciate consideration regarding my choice in not offering specific codes, as well as not removing any credit coded into the free-to-use codes.

If you use a free-to-use code and alter the code, which results in the code breaking, please do not come to me to fix it. You accept the risk of code breaking should you tamper with it. Also, please do not come to me to customize the codes for you. I try to break down the classes so you can modify them yourself.

Please do not steal, re-color and re-post as your own, or remove/edit the credit.

Requests
I am currently not taking any requests for custom codes.

I am on a steep learning curve regarding the new BBCode+ scripts and adapting to the new BBCode+ language. Not to mention I don't really have the time to do them.

Changelog
If I update a code, I will log that information here.

6/17/2018 - Minor update to all codes linking back to the original. I saw one popular code of mine getting broken from improper code sharing and a link back to the original is meant to help direct others to my resource. Now all code credit links back to my originals.

5/13/2018 - Minor update to Faux Tabs (Horizontal) to work in Dark Theme.

2/4/2018 - Minor update to fyuriheader2 in Character Sheet Remake.

2/3/2018 - Updated Faux Tabs (Vertical) to stop hover issue when hovering below the tabs.

2/2/2018 - Updated Hidden Content Hover code to resolve header issue.
 
Last edited:

Fyuri

積ん読
Administrator
Supporter
#2
Well, I finally got around to playing with the new BBCode+. Now, this only uses the new CLASS ability, no scripts were harmed used in the making of this code.
Mobile Friendly: Yup (at least on my phone)
Note: Hidden Scrollbar
Free To Use? Yes, with credit.


Current Weather
Cloudy
80°F
City, Country
Current Events
2017 Dead Memes
Cat Facts
BBCode+ Is Awesome
Recent Comments
I love ratings!
Cookies!
Hearts too?!


I'm bored.

Then go do something.

Thank you Captain Obvious. I want to know if you want to go do something with me.

Depends on what this 'something' is.

Mini golf?

Hell. Yes.

I am on my way to your place now!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam ipsum, fringilla vel sollicitudin eget, tincidunt in lacus. Sed gravida eros vel bibendum scelerisque. Proin nec viverra tortor, sed pellentesque elit. In in tortor at ligula tristique euismod. Curabitur suscipit, est non pretium dictum, mi metus dapibus lorem, in fermentum odio urna ac nibh. Aenean vehicula erat eget enim mattis tempor. Vestibulum tempor justo velit, ac dignissim neque pellentesque at. Morbi in condimentum est, quis ultrices metus. Quisque ornare feugiat nibh, quis hendrerit arcu finibus ac. Maecenas sagittis, libero ac consectetur pretium, ligula velit aliquam nibh, vel dictum augue massa et lorem.

Vivamus mattis ante ut est facilisis, et suscipit nunc auctor. Ut nisi ante, eleifend eget mauris nec, tempor ultricies enim. Morbi ornare interdum orci, fringilla venenatis risus vehicula sit amet. Ut at ornare leo. Quisque ac ipsum at ligula tempus tincidunt. Nullam at lectus facilisis, pretium risus in, suscipit eros. Sed sodales, arcu ut rhoncus ultricies, diam sapien tristique felis, ut mollis tortor ipsum faucibus lacus. Sed at neque sit amet orci aliquet auctor. Nunc sed velit et magna imperdiet finibus. Mauris cursus fermentum dolor aliquam porta. Donec malesuada aliquam nunc, nec tristique purus. Proin sit amet mi tincidunt neque porttitor mollis a et metus. Morbi vel dapibus magna, et ornare ante. Nunc ultricies in justo vitae tempor.

Code:
[nobr]
[font=Open Sans][/font]
[class=credit]
width:300px;
margin:auto;
font-size:10px;
opacity:0.3;
[/class]
[class=box]
width:300px;
height:500px;
margin:auto;
-webkit-box-shadow: 0px 10px 35px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 10px 35px 0px rgba(0,0,0,0.25);
box-shadow: 0px 10px 35px 0px rgba(0,0,0,0.25);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-style: solid;
border-width: 40px 10px 80px 10px;
border-color: rgba(229,229,229, 0.8);
[/class]
[class=screenbox]
width:100%;
height:500px;
overflow:hidden;
[/class]
[class=screenboxchild]
width:100%;
height:500px;
padding-right:17px;
overflow:auto;
text-align:justify;
color:#313131;
[/class]
[class=screen]
margin-top:-20px;
background-color:#fff;
padding:5px;
[/class]
[class=topcontain]
width:300px;
margin:auto;
[/class]
[class=camera]
position:relative;
top:-20px;
left:80px;
width:8px;
height:8px;
border-radius:50%;
background-color: #000000;
[/class]
[class=top]
position:relative;
left:10px;
top:-27px;
background-color:rgba(229,229,229, 1.0);
width:40%;
height:8px;
margin:auto;
box-shadow: 0 0 1px #000 inset;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
[/class]
[class=buttonbottom]
position:relative;
top:-70px;
width:35px;
height:35px;
margin:auto;
background-color:rgba(229,229,229, 1.0);
border:3px solid rgba(114,114,114, 0.2);
border-radius:50%;
box-shadow: 0 0 1px #000 inset;
[/class]
[class=weather]
width:270px;
background-color:#D3F1F4;
padding:10px;
font-family: Open Sans, Arial, Helvetica, sans-serif;
font-size:11px;
color:#313131;
[/class]
[class=weathericon]
float:left;
  display: flex;
  align-items: center;
  justify-content: center;
margin-right:10px;
width:50px;
height:50px;
color:#fff;
font-family: Open Sans, Arial, Helvetica, sans-serif;
font-size:55px!important;
[/class]
[class=weatherinfo]
width:100px;
height:30px;
[/class]
[class=news]
width:270px;
background-color:#E0F5F7;
padding:10px;
font-family: Open Sans, Arial, Helvetica, sans-serif;
font-size:11px;
color:#313131;
[/class]
[class=newsicon]
float:right;
  display: flex;
  align-items: center;
  justify-content: center;
margin-right:10px;
width:50px;
height:50px;
color:#fff;
font-family: Open Sans, Arial, Helvetica, sans-serif;
font-size:55px!important;
[/class]
[class=newsrinfo]
width:100px;
height:30px;
[/class]
[class=other]
width:270px;
background-color:#ECF9FA;
padding:10px;
font-family: Open Sans, Arial, Helvetica, sans-serif;
font-size:11px;
color:#313131;
[/class]
[class=othericon]
float:left;
  display: flex;
  align-items: center;
  justify-content: center;
margin-right:10px;
width:50px;
height:50px;
color:#e6e6e6;
font-family: Open Sans, Arial, Helvetica, sans-serif;
font-size:55px!important;
[/class]
[class=otherinfo]
width:100px;
height:30px;
[/class]
[class=textarea]
width:270px;
background-color:#ECF9FA;
padding:10px;
font-family: Open Sans, Arial, Helvetica, sans-serif;
font-size:11px;
color:#313131;
[/class]
[class=leftchat]
float:left;
width:70%;
margin:2px;
background-color:#2E86AB;
color:#fff;
font-family: Open Sans, Arial, Helvetica, sans-serif;
font-size:11px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding:3px;
[/class]
[class=rightchat]
float:right;
width:70%;
margin:2px;
background-color:#92DCE5;
color:#fff;
font-family: Open Sans, Arial, Helvetica, sans-serif;
font-size:11px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding:3px;
[/class]
[/nobr]
[div=background-color:#fff;padding-top:50px;padding-bottom:50px;][div class=box][div=topcontain][div class=camera][/div][div class=top][/div][/div][div class=screen][div class=screenbox][div class=screenboxchild][div class=weather][div class=weathericon][fa]fa-cloud[/fa][/div][div=weatherinfo][b]Current Weather[/b]
Cloudy
80°F
City, Country [/div][/div][div class=news][div class=newsicon][fa]fa-newspaper-o[/fa][/div][div=newsinfo][b]Current Events[/b]
2017 Dead Memes
Cat Facts
BBCode+ Is Awesome[/div][/div][div class=other][div class=othericon][fa]fa-comments-o[/fa][/div][div=otherinfo][b]Recent Comments[/b]
I love ratings!
Cookies!
Hearts too?![/div][/div]

[div=width:270px;padding:10px;][div class=leftchat]I'm bored.[/div]
[div class=rightchat]Then go do something.[/div]
[div class=leftchat]Thank you Captain Obvious.  I want to know if you want to go do something with me.[/div]
[div class=rightchat]Depends on what this 'something' is.[/div]
[div class=leftchat]Mini golf?[/div]
[div class=rightchat]Hell.  Yes.[/div]
[div class=rightchat]I am on my way to your place now![/div][div=clear:both;][/div][/div]
[div class=textarea]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam ipsum, fringilla vel sollicitudin eget, tincidunt in lacus. Sed gravida eros vel bibendum scelerisque. Proin nec viverra tortor, sed pellentesque elit. In in tortor at ligula tristique euismod. Curabitur suscipit, est non pretium dictum, mi metus dapibus lorem, in fermentum odio urna ac nibh. Aenean vehicula erat eget enim mattis tempor. Vestibulum tempor justo velit, ac dignissim neque pellentesque at. Morbi in condimentum est, quis ultrices metus. Quisque ornare feugiat nibh, quis hendrerit arcu finibus ac. Maecenas sagittis, libero ac consectetur pretium, ligula velit aliquam nibh, vel dictum augue massa et lorem.

Vivamus mattis ante ut est facilisis, et suscipit nunc auctor. Ut nisi ante, eleifend eget mauris nec, tempor ultricies enim. Morbi ornare interdum orci, fringilla venenatis risus vehicula sit amet. Ut at ornare leo. Quisque ac ipsum at ligula tempus tincidunt. Nullam at lectus facilisis, pretium risus in, suscipit eros. Sed sodales, arcu ut rhoncus ultricies, diam sapien tristique felis, ut mollis tortor ipsum faucibus lacus. Sed at neque sit amet orci aliquet auctor. Nunc sed velit et magna imperdiet finibus. Mauris cursus fermentum dolor aliquam porta. Donec malesuada aliquam nunc, nec tristique purus. Proin sit amet mi tincidunt neque porttitor mollis a et metus. Morbi vel dapibus magna, et ornare ante. Nunc ultricies in justo vitae tempor.[/div] [/div][/div][/div][/div][div class=credit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-8650235]code[/url] by [USER=39545]@Fyuri[/USER][/div][div class=buttonbottom][/div][/div]
 

Fyuri

積ん読
Administrator
Supporter
#3
Another minimal design. You can use the IMG tag within the [div class=fyurir04imagebox][img]URL HERE[/img][/div]. If you are familiar with DIV classes, you should be able to place images, headers, and the lined text boxes where you please.
Mobile Friendly: Yup
Note: Automatically adjusts to fit text. Images will resize to fit.
Free To Use? Yes, with credit.
Div Classes
  • [div class=fyurir04imagebox][img]URL HERE[/img][/div] - For images.
  • [div class=fyuri04headerleft]Header Left[/div] - Left Aligned Header
  • [div class=fyuri04headerright]Header Right[/div] - Right Aligned Header
  • [div class=fyuri04boxleft]Content[/div] - Left Border Box
  • [div class=fyuri04boxright]Content[/div]- Right Border Box
.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id consequat erat, quis lacinia quam. Aenean turpis odio, mattis malesuada consequat sed, hendrerit et quam. Aenean eu pharetra metus. In id augue in neque tincidunt vestibulum. Phasellus a venenatis dolor. Maecenas et nibh ac quam iaculis dictum. Fusce eleifend lacus non felis semper fermentum. Cras congue et justo nec venenatis. Donec ac neque id arcu finibus fermentum. Fusce a velit rhoncus, aliquam libero sit amet, accumsan mauris. Duis congue ex commodo mi consectetur, vitae imperdiet nunc tincidunt. Ut consectetur tortor in urna gravida eleifend. Morbi bibendum scelerisque sollicitudin.

Header Left

Aenean ullamcorper ante sit amet lacus pretium tincidunt. In nec placerat nulla, ut dictum leo. Suspendisse aliquam ex nisl. Maecenas non purus nisl. Nulla nisl est, fringilla nec vulputate sit amet, euismod eu sapien. Proin eget sagittis nulla, ac vulputate arcu. Mauris mauris metus, tincidunt lacinia neque ut, lobortis ornare diam. Quisque sit amet arcu neque. Vestibulum lacinia diam ut egestas varius. Praesent ultrices facilisis fringilla. Morbi vestibulum dui egestas tempus fermentum. Nullam hendrerit faucibus neque non vulputate. Aenean sed urna at orci molestie consectetur vel sed magna.


Header Right

Praesent imperdiet ex nec erat gravida, et hendrerit arcu congue. Cras vestibulum mi non leo congue fermentum. Phasellus est eros, viverra non mauris luctus, commodo consectetur felis. Nam sit amet ligula tristique, facilisis nibh sit amet, semper lorem. Phasellus non massa varius, sollicitudin erat eget, tristique diam. Suspendisse facilisis vulputate euismod. Suspendisse dolor augue, ornare vitae consectetur non, bibendum non lorem. Fusce ac maximus eros. Etiam iaculis commodo elit, in aliquam ante tempus non. Quisque eu dapibus diam, eu fringilla ante. Nunc sit amet condimentum lectus.

Maecenas vitae egestas libero. Sed convallis ut nibh id faucibus. Donec porta posuere odio. Quisque sit amet tempus dolor, sed malesuada leo. Nunc placerat arcu augue, eget interdum tortor euismod nec. Nullam tincidunt ornare nibh et lobortis. Nulla tincidunt iaculis maximus. Sed posuere porta erat, ut facilisis mi scelerisque at. Phasellus ultricies vitae mauris eget lacinia. Integer sapien quam, euismod at fringilla non, mollis id sapien. Duis orci neque, congue ac mattis at, interdum at felis. In tempor, ipsum quis iaculis consequat, odio nulla rutrum neque, eget rutrum ligula mauris ut purus.

Code:
[nobr]
[font=Open Sans Condensed][div=display: none;].[/div][/font]
[class=fyuri04wrapper]
max-width:450px;
min-height:600px;
margin:30px auto;
background: #272e38;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
overflow:hidden;
-webkit-box-shadow: 0px 0px 40px 7px rgba(0,0,0,0.32);
-moz-box-shadow: 0px 0px 40px 7px rgba(0,0,0,0.32);
box-shadow: 0px 0px 40px 7px rgba(0,0,0,0.32);
padding:115px 0px 35px 0px;
[/class]

[class=fyuri04mid]
position:relative;
width:100%;
min-height:600px;
background-color:#efefef;
padding-bottom:10px;
[/class]

[class=fyuri04parent]
display: block;
position:relative;
top:-60px;
z-index:5;
width:90%;
min-height:500px;
margin:0px auto -60px auto;
background-color:#fff;
padding:10px;
text-align:justify;
color:#313131;
font-size:13px;
[/class]

[class=fyuri04headerleft]
text-align:left;
margin:-10px 0px -15px 0px;
font-family: 'Open Sans Condensed', Arial, Verdana;
font-size:30px;
color:#313131;
padding-left:10px;
[/class]

[class=fyuri04headerright]
padding-right:10px;
margin:-10px 0px -15px 0px;
text-align:right;
font-family: 'Open Sans Condensed', Arial, Verdana;
font-size:30px;
color:#313131;
[/class]

[class=fyurir04imagebox]
display:inline;
text-align:center;
pointer-events:none;
[/class]

[class=fyuri04boxleft]
border-left:10px solid #272e38;
padding:5px 10px 5px 5px;
[/class]

[class=fyuri04boxright]
border-right:10px solid #272e38;
padding:5px 5px 5px 10px;
[/class]

[class=fyuri04credit]
position:relative;
top:-30px;
max-width:450px;
margin:auto;
opacity:0.3;
font-size:10px;
[/class]

[/nobr]
[div class=fyuri04wrapper][div class=fyuri04mid][div class=fyuri04parent][div class=fyurir04imagebox][img]http://via.placeholder.com/450x150[/img][/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id consequat erat, quis lacinia quam. Aenean turpis odio, mattis malesuada consequat sed, hendrerit et quam. Aenean eu pharetra metus. In id augue in neque tincidunt vestibulum. Phasellus a venenatis dolor. Maecenas et nibh ac quam iaculis dictum. Fusce eleifend lacus non felis semper fermentum. Cras congue et justo nec venenatis. Donec ac neque id arcu finibus fermentum. Fusce a velit rhoncus, aliquam libero sit amet, accumsan mauris. Duis congue ex commodo mi consectetur, vitae imperdiet nunc tincidunt. Ut consectetur tortor in urna gravida eleifend. Morbi bibendum scelerisque sollicitudin.

[div class=fyuri04headerleft]Header Left[/div]
[div class=fyuri04boxleft]Aenean ullamcorper ante sit amet lacus pretium tincidunt. In nec placerat nulla, ut dictum leo. Suspendisse aliquam ex nisl. Maecenas non purus nisl. Nulla nisl est, fringilla nec vulputate sit amet, euismod eu sapien. Proin eget sagittis nulla, ac vulputate arcu. Mauris mauris metus, tincidunt lacinia neque ut, lobortis ornare diam. Quisque sit amet arcu neque. Vestibulum lacinia diam ut egestas varius. Praesent ultrices facilisis fringilla. Morbi vestibulum dui egestas tempus fermentum. Nullam hendrerit faucibus neque non vulputate. Aenean sed urna at orci molestie consectetur vel sed magna.[/div]

[div class=fyuri04headerright]Header Right[/div]
[div class=fyuri04boxright]Praesent imperdiet ex nec erat gravida, et hendrerit arcu congue. Cras vestibulum mi non leo congue fermentum. Phasellus est eros, viverra non mauris luctus, commodo consectetur felis. Nam sit amet ligula tristique, facilisis nibh sit amet, semper lorem. Phasellus non massa varius, sollicitudin erat eget, tristique diam. Suspendisse facilisis vulputate euismod. Suspendisse dolor augue, ornare vitae consectetur non, bibendum non lorem. Fusce ac maximus eros. Etiam iaculis commodo elit, in aliquam ante tempus non. Quisque eu dapibus diam, eu fringilla ante. Nunc sit amet condimentum lectus.[/div]
Maecenas vitae egestas libero. Sed convallis ut nibh id faucibus. Donec porta posuere odio. Quisque sit amet tempus dolor, sed malesuada leo. Nunc placerat arcu augue, eget interdum tortor euismod nec. Nullam tincidunt ornare nibh et lobortis. Nulla tincidunt iaculis maximus. Sed posuere porta erat, ut facilisis mi scelerisque at. Phasellus ultricies vitae mauris eget lacinia. Integer sapien quam, euismod at fringilla non, mollis id sapien. Duis orci neque, congue ac mattis at, interdum at felis. In tempor, ipsum quis iaculis consequat, odio nulla rutrum neque, eget rutrum ligula mauris ut purus.[/div][/div][/div][div class=fyuri04credit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-8653989]code[/url] by [USER=39545]@Fyuri[/USER][/div][comment]do not remove/alter credit. code by @fyuri[/comment]
 

Fyuri

積ん読
Administrator
Supporter
#4
I present... faux hover accordions! No scripts were used, this is pure hover effect. So, when you hover over a boxed section, it will expand to reveal a text area. No hidden scrolls here, figured with the hover it'd make it a bit less confusing. That isn't to say it isn't possible to hide the scrollbars, I just chose not to.
As this isn't a real accordion, if you scroll and stop hovering, the content will not reset back to the "header" and you'll see the content text.
Mobile Friendly: Yup
Note: Hover over (desktop) or click the box (mobile) to expand. If on mobile, just tap the top image and you can close the section. If on desktop, just hover anywhere but the text area.
Free To Use? Yes, with credit.
Div Classes
  • [div class=fyuri07header]Header #[/div] - Header
.

Header One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam ipsum, fringilla vel sollicitudin eget, tincidunt in lacus. Sed gravida eros vel bibendum scelerisque. Proin nec viverra tortor, sed pellentesque elit. In in tortor at ligula tristique euismod. Curabitur suscipit, est non pretium dictum, mi metus dapibus lorem, in fermentum odio urna ac nibh. Aenean vehicula erat eget enim mattis tempor. Vestibulum tempor justo velit, ac dignissim neque pellentesque at. Morbi in condimentum est, quis ultrices metus. Quisque ornare feugiat nibh, quis hendrerit arcu finibus ac. Maecenas sagittis, libero ac consectetur pretium, ligula velit aliquam nibh, vel dictum augue massa et lorem.
Header Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam ipsum, fringilla vel sollicitudin eget, tincidunt in lacus. Sed gravida eros vel bibendum scelerisque. Proin nec viverra tortor, sed pellentesque elit. In in tortor at ligula tristique euismod. Curabitur suscipit, est non pretium dictum, mi metus dapibus lorem, in fermentum odio urna ac nibh. Aenean vehicula erat eget enim mattis tempor. Vestibulum tempor justo velit, ac dignissim neque pellentesque at. Morbi in condimentum est, quis ultrices metus. Quisque ornare feugiat nibh, quis hendrerit arcu finibus ac. Maecenas sagittis, libero ac consectetur pretium, ligula velit aliquam nibh, vel dictum augue massa et lorem.
Header Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam ipsum, fringilla vel sollicitudin eget, tincidunt in lacus. Sed gravida eros vel bibendum scelerisque. Proin nec viverra tortor, sed pellentesque elit. In in tortor at ligula tristique euismod. Curabitur suscipit, est non pretium dictum, mi metus dapibus lorem, in fermentum odio urna ac nibh. Aenean vehicula erat eget enim mattis tempor. Vestibulum tempor justo velit, ac dignissim neque pellentesque at. Morbi in condimentum est, quis ultrices metus. Quisque ornare feugiat nibh, quis hendrerit arcu finibus ac. Maecenas sagittis, libero ac consectetur pretium, ligula velit aliquam nibh, vel dictum augue massa et lorem.
Header Four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam ipsum, fringilla vel sollicitudin eget, tincidunt in lacus. Sed gravida eros vel bibendum scelerisque. Proin nec viverra tortor, sed pellentesque elit. In in tortor at ligula tristique euismod. Curabitur suscipit, est non pretium dictum, mi metus dapibus lorem, in fermentum odio urna ac nibh. Aenean vehicula erat eget enim mattis tempor. Vestibulum tempor justo velit, ac dignissim neque pellentesque at. Morbi in condimentum est, quis ultrices metus. Quisque ornare feugiat nibh, quis hendrerit arcu finibus ac. Maecenas sagittis, libero ac consectetur pretium, ligula velit aliquam nibh, vel dictum augue massa et lorem.
Header Five

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam ipsum, fringilla vel sollicitudin eget, tincidunt in lacus. Sed gravida eros vel bibendum scelerisque. Proin nec viverra tortor, sed pellentesque elit. In in tortor at ligula tristique euismod. Curabitur suscipit, est non pretium dictum, mi metus dapibus lorem, in fermentum odio urna ac nibh. Aenean vehicula erat eget enim mattis tempor. Vestibulum tempor justo velit, ac dignissim neque pellentesque at. Morbi in condimentum est, quis ultrices metus. Quisque ornare feugiat nibh, quis hendrerit arcu finibus ac. Maecenas sagittis, libero ac consectetur pretium, ligula velit aliquam nibh, vel dictum augue massa et lorem.

Code:
[nobr]
[font=Exo][div=display: none;].[/div][/font]
[class=fyuri07wrapper]
position:relative;
width:300px;
height:479px;
margin:auto;
background: #531cb3; 
background: -moz-linear-gradient(top, #531cb3 0%, #944bbb 25%, #aa7bc3 50%, #cc92c2 75%, #dba8ac 100%); 
background: -webkit-linear-gradient(top, #531cb3 0%,#944bbb 25%,#aa7bc3 50%,#cc92c2 75%,#dba8ac 100%); 
background: linear-gradient(to bottom, #531cb3 0%,#944bbb 25%,#aa7bc3 50%,#cc92c2 75%,#dba8ac 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#531cb3', endColorstr='#dba8ac',GradientType=0 ); 
overflow:hidden;
[/class]

[class=fyuri07imagebox]
display:inline;
text-align:center;
pointer-events:none;
[/class]

[class=fyuri07infohover]
width:calc (100%-10px);
height:25px;
margin-top:-6px;
background-color:transparent;
color:#fff;
overflow:hidden;
transition: all 0.5s ease;
padding:5px;
text-align:justify;
font-size:13px;
line-height:25px;
border-bottom:1px solid rgba(0,0,0, 0.1);
[/class]

[class name=fyuri07infohover state=hover]
width:calc (100%-10px);
height:320px;
background-color:#000;
color:#fff;
overflow:auto;
border:none;
[/class]

[class=fyuri07infohover2]
position:relative;
z-index:3;
width:calc (100%-10px);
height:25px;
background-color:transparent;
color:#fff;
overflow:hidden;
transition: all 0.5s ease;
padding:5px;
text-align:justify;
font-size:13px;
line-height:25px;
border-bottom:1px solid rgba(0,0,0, 0.1);
[/class]

[class name=fyuri07infohover2 state=hover]
position:relative;
z-index:3;
width:calc (100%-10px);
height:321px;
margin-top:-37px;
background-color:#000;
color:#fff;
overflow:auto;
border:none;
[/class]

[class=fyuri07infohover3]
position:relative;
z-index:4;
width:calc (100%-10px);
height:25px;
background-color:transparent;
color:#fff;
overflow:hidden;
transition: all 0.5s ease;
padding:5px;
text-align:justify;
font-size:13px;
line-height:25px;
border-bottom:1px solid rgba(0,0,0, 0.1);
[/class]

[class name=fyuri07infohover3 state=hover]
position:relative;
z-index:4;
width:calc (100%-10px);
height:321px;
margin-top:-73px;
background-color:#000;
color:#fff;
overflow:auto;
border:none;
[/class]

[class=fyuri07infohover4]
position:relative;
z-index:5;
width:calc (100%-10px);
height:25px;
background-color:transparent;
color:#fff;
overflow:hidden;
transition: all 0.5s ease;
padding:5px;
text-align:justify;
font-size:13px;
line-height:25px;
border-bottom:1px solid rgba(0,0,0, 0.1);
[/class]

[class name=fyuri07infohover4 state=hover]
position:relative;
z-index:5;
width:calc (100%-10px);
height:321px;
margin-top:-109px;
background-color:#000;
color:#fff;
overflow:auto;
border:none;
[/class]

[class=fyuri07infohover5]
position:relative;
z-index:6;
width:calc (100%-10px);
height:25px;
background-color:transparent;
color:#fff;
overflow:hidden;
transition: all 0.5s ease;
padding:5px;
text-align:justify;
font-size:13px;
line-height:25px;
border-bottom:1px solid rgba(0,0,0, 0.1);
[/class]

[class name=fyuri07infohover5 state=hover]
position:relative;
z-index:6;
width:calc (100%-10px);
height:321px;
margin-top:-145px;
background-color:#000;
color:#fff;
overflow:auto;
border:none;
[/class]

[class=fyuri07header]
font-size:30px;
color:#fff;
font-family: 'Exo';
line-height:30px;
text-align:left;
[/class]

[class=fyuri07credit]
width:300px;
margin:auto;
opacity:0.3;
font-size:10px;
[/class]

[/nobr]
[div class=fyuri07wrapper][img]http://via.placeholder.com/300x150[/img][div class=fyuri07infohover][div class=fyuri07header]Header One[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam ipsum, fringilla vel sollicitudin eget, tincidunt in lacus. Sed gravida eros vel bibendum scelerisque. Proin nec viverra tortor, sed pellentesque elit. In in tortor at ligula tristique euismod. Curabitur suscipit, est non pretium dictum, mi metus dapibus lorem, in fermentum odio urna ac nibh. Aenean vehicula erat eget enim mattis tempor. Vestibulum tempor justo velit, ac dignissim neque pellentesque at. Morbi in condimentum est, quis ultrices metus. Quisque ornare feugiat nibh, quis hendrerit arcu finibus ac. Maecenas sagittis, libero ac consectetur pretium, ligula velit aliquam nibh, vel dictum augue massa et lorem.
[/div][div class=fyuri07infohover2][div class=fyuri07header]Header Two[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam ipsum, fringilla vel sollicitudin eget, tincidunt in lacus. Sed gravida eros vel bibendum scelerisque. Proin nec viverra tortor, sed pellentesque elit. In in tortor at ligula tristique euismod. Curabitur suscipit, est non pretium dictum, mi metus dapibus lorem, in fermentum odio urna ac nibh. Aenean vehicula erat eget enim mattis tempor. Vestibulum tempor justo velit, ac dignissim neque pellentesque at. Morbi in condimentum est, quis ultrices metus. Quisque ornare feugiat nibh, quis hendrerit arcu finibus ac. Maecenas sagittis, libero ac consectetur pretium, ligula velit aliquam nibh, vel dictum augue massa et lorem.[/div][div class=fyuri07infohover3][div class=fyuri07header]Header Three[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam ipsum, fringilla vel sollicitudin eget, tincidunt in lacus. Sed gravida eros vel bibendum scelerisque. Proin nec viverra tortor, sed pellentesque elit. In in tortor at ligula tristique euismod. Curabitur suscipit, est non pretium dictum, mi metus dapibus lorem, in fermentum odio urna ac nibh. Aenean vehicula erat eget enim mattis tempor. Vestibulum tempor justo velit, ac dignissim neque pellentesque at. Morbi in condimentum est, quis ultrices metus. Quisque ornare feugiat nibh, quis hendrerit arcu finibus ac. Maecenas sagittis, libero ac consectetur pretium, ligula velit aliquam nibh, vel dictum augue massa et lorem.[/div][div class=fyuri07infohover4][div class=fyuri07header]Header Four[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam ipsum, fringilla vel sollicitudin eget, tincidunt in lacus. Sed gravida eros vel bibendum scelerisque. Proin nec viverra tortor, sed pellentesque elit. In in tortor at ligula tristique euismod. Curabitur suscipit, est non pretium dictum, mi metus dapibus lorem, in fermentum odio urna ac nibh. Aenean vehicula erat eget enim mattis tempor. Vestibulum tempor justo velit, ac dignissim neque pellentesque at. Morbi in condimentum est, quis ultrices metus. Quisque ornare feugiat nibh, quis hendrerit arcu finibus ac. Maecenas sagittis, libero ac consectetur pretium, ligula velit aliquam nibh, vel dictum augue massa et lorem.
[/div][div class=fyuri07infohover5][div class=fyuri07header]Header Five[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam ipsum, fringilla vel sollicitudin eget, tincidunt in lacus. Sed gravida eros vel bibendum scelerisque. Proin nec viverra tortor, sed pellentesque elit. In in tortor at ligula tristique euismod. Curabitur suscipit, est non pretium dictum, mi metus dapibus lorem, in fermentum odio urna ac nibh. Aenean vehicula erat eget enim mattis tempor. Vestibulum tempor justo velit, ac dignissim neque pellentesque at. Morbi in condimentum est, quis ultrices metus. Quisque ornare feugiat nibh, quis hendrerit arcu finibus ac. Maecenas sagittis, libero ac consectetur pretium, ligula velit aliquam nibh, vel dictum augue massa et lorem.[/div][div=fyuri07imagebox][img]http://via.placeholder.com/300x150[/img][/div][/div][div class=fyuri07credit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-8656755]code[/url] by [USER=39545]@Fyuri[/USER][/div][comment]please do not remove/alter credit.  code by @fyuri[/comment]
 

Fyuri

積ん読
Administrator
Supporter
#5
More experimenting! Remember when we were all amazed with invisible accordions and those cool hacked accordions used to hide and reveal content? Well, here's my hover experiment for hiding/showing content. ;3 The raw code has a place holder image which you can replace with an image of your choice. The "Header" is shown as "Hover" because it's not really meant for a very long header. Long headers mess up the positioning of the text. Thanks to @Alteras the header issue has been fixed! Don't get too crazy with any massive headers though!
Mobile Friendly: Yes.
Note: Hover (browser) or click (mobile) for content.
Free To Use? Yes

.

Header
-hover-


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra urna non tristique semper. In luctus ante eros. Curabitur iaculis sed augue eget vestibulum. In a bibendum nulla. Vestibulum et erat rutrum neque vulputate tempus. Praesent aliquam volutpat luctus. Nam consequat egestas rhoncus. Duis eleifend massa orci, id efficitur justo aliquet quis. Proin id iaculis est, quis maximus velit. Vestibulum id orci vitae velit tincidunt ultricies. Donec fermentum elit et luctus tempus. Mauris varius finibus mi, vel luctus leo.

Vestibulum non arcu risus. Ut id urna orci. Cras non imperdiet nisl. Vestibulum ultricies cursus ipsum a varius. Nulla aliquam lorem ut placerat tristique. Vestibulum massa tellus, semper a lacus in, dignissim convallis lectus. Integer egestas ex sapien, ut mollis lorem faucibus ut. Fusce in varius massa. Phasellus sed purus quis nisl vehicula faucibus tristique sit amet lorem. Aenean vel nunc laoreet, dignissim nisi vel, fringilla nisl. Suspendisse iaculis, lacus nec pulvinar volutpat, est velit suscipit enim, sed interdum felis nisl non metus. Duis et nunc quam. Vivamus quam eros, ornare non auctor quis, varius quis ligula. Proin condimentum eros vel nulla posuere, eu maximus tortor luctus. Nullam rhoncus risus et risus ornare pretium.


Code:
[nobr]
[font=Sigmar One][div=display:none;].[/div][/font][div=display:none;][/div]
[class=fyuri11wrapper]
max-width:400px;
height:500px;
margin:auto;
[/class]

[class=fyuri11imagebox]
width:100%;
height:500px;
background:url('http://via.placeholder.com/400x500') no-repeat;
[/class]

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

[class=fyuri11overlay]
display: flex;
width:200px;
height:200px;
margin:auto;
background-color:rgba(0,0,0, 0.8);
color:#fff;
[/class]

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

[class=fyuri11parent]
opacity:0.0;
position:relative;
margin-top:-500px;
width:100%;
height:500px;
background:#000;
transition: all 0.5s ease;
[/class]

[class name=fyuri11parent state=hover]
opacity:1.0;
width:calc(100% - 20px);
height:480px;
background:rgba(218,20,69, 0.8);
padding:10px;
[/class]

[class=fyuri11content]
width:calc (100% - 20px);
height:460px;
background-color:#fff;
overflow:auto;
padding:10px;
text-align:justify;
color:#313131;
[/class]

[class=fyuri11credit]
max-width:400px;
margin:auto;
opacity:0.3;
font-size:10px;
[/class]

[/nobr]
[div class=fyuri11wrapper][div class=fyuri11imagebox][div class=fyuri11overlayparent][div class=fyuri11overlay][div class=fyuri11header]Header
[div=font-size:10px;]-hover-[/div][/div]

[/div][/div][/div][div class=fyuri11parent][div class=fyuri11content]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra urna non tristique semper. In luctus ante eros. Curabitur iaculis sed augue eget vestibulum. In a bibendum nulla. Vestibulum et erat rutrum neque vulputate tempus. Praesent aliquam volutpat luctus. Nam consequat egestas rhoncus. Duis eleifend massa orci, id efficitur justo aliquet quis. Proin id iaculis est, quis maximus velit. Vestibulum id orci vitae velit tincidunt ultricies. Donec fermentum elit et luctus tempus. Mauris varius finibus mi, vel luctus leo.

Vestibulum non arcu risus. Ut id urna orci. Cras non imperdiet nisl. Vestibulum ultricies cursus ipsum a varius. Nulla aliquam lorem ut placerat tristique. Vestibulum massa tellus, semper a lacus in, dignissim convallis lectus. Integer egestas ex sapien, ut mollis lorem faucibus ut. Fusce in varius massa. Phasellus sed purus quis nisl vehicula faucibus tristique sit amet lorem. Aenean vel nunc laoreet, dignissim nisi vel, fringilla nisl. Suspendisse iaculis, lacus nec pulvinar volutpat, est velit suscipit enim, sed interdum felis nisl non metus. Duis et nunc quam. Vivamus quam eros, ornare non auctor quis, varius quis ligula. Proin condimentum eros vel nulla posuere, eu maximus tortor luctus. Nullam rhoncus risus et risus ornare pretium.
[/div][/div][/div][div class=fyuri11credit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-8660926]code[/url] by [USER=39545]@Fyuri[/USER][/div][comment]do not alter/remove credit. code by @fyuri[/comment]
 
Last edited:

Fyuri

積ん読
Administrator
Supporter
#6
I decided to re-do one of my first attempts with BBCode when the site returned to xF. You can find the original here.
Mobile Friendly: Yes.
Note: Theme friendly!
Free To Use? Yes
Div Classes:
  • [div class=fyuriheader]Header[div] - Header with dark grey background.
  • [div class=fyuriheader2]Header[div] - Header for 'Character Name'.
.
.


Identification
Name:
Rank:
Stats

Attribute:
Attribute:
Attribute:
Attribute:
Attribute:
Attribute:

Skills

Skill:
Skill:
Skill:
Skill:
Skill:
Skill:

Character Name
General

Age:

Gender:

Race:

Sexual Orientation:

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie, justo at ultrices finibus, nulla enim lacinia dui, at finibus mi erat eu nulla. Nullam sagittis aliquam diam at condimentum. Quisque interdum dolor semper metus porttitor, dapibus viverra tellus cursus. Sed pulvinar urna in metus pharetra finibus. Nulla facilisi. Suspendisse sed magna et leo fringilla commodo. Etiam convallis magna id ante faucibus, vitae posuere ligula fringilla. Vestibulum ornare finibus finibus.

Header

Sed aliquet venenatis pharetra. Mauris sodales dignissim purus, et hendrerit odio rutrum eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac justo arcu. Morbi at dapibus metus. Ut at facilisis orci. Pellentesque ut pulvinar dui. Aliquam consequat dapibus laoreet. Integer porta venenatis cursus. Nunc cursus quis ante at sagittis. Quisque non tincidunt elit, non efficitur odio.

Header

Aliquam velit nisl, iaculis sit amet dolor in, dictum viverra purus. Quisque quis dapibus tortor, et imperdiet tellus. In nec dapibus metus, vel varius erat. Ut in nisi turpis. Sed in porta arcu. Donec venenatis eu lectus non congue. Nunc at cursus dolor. Nulla pretium velit id enim condimentum elementum. Vivamus pulvinar orci at magna posuere faucibus a vel velit.

Header

Sed sit amet pharetra eros. Etiam erat turpis, pulvinar et dictum quis, vehicula elementum nibh. Aliquam quis vestibulum sapien. Duis ac eros ipsum. Nullam tristique nisi nec tortor efficitur molestie. Pellentesque odio lectus, facilisis id quam quis, eleifend bibendum erat. Cras pharetra turpis eget odio imperdiet lobortis. Aenean at lorem magna. Integer quis auctor mauris, non elementum lectus. Duis facilisis aliquet turpis, id tincidunt urna rhoncus id. Aliquam quis tellus purus.


Code:
[nobr]
[font=Rubik Mono One][div=display:none;].[/div][/font]
[font=Oswald][div=display:none;].[/div][/font]
[class=fyuriwrapper]
display: flex;
flex-wrap: wrap;
align-items: flex-start;
max-width:850px;
margin:auto;
border:1px solid rgba(0,0,0, 0.1);
[/class]

[class=fyuribox1]
 width: 300px;
 margin: 10px 5px 10px 10px;
border:1px solid black;
[/class]

[class=fyuribox2]
flex: 1;
margin: 10px 10px 10px 5px;
border:1px solid black;
[/class]

[class=fyuriimagebox]
width:100%;
pointer-events:none;
padding-bottom:5px;
[/class]

[class=fyuriheader]
width:calc(100% - 20px);
height:35px;
background:#313131;
padding:10px;
font-family: 'Oswald', Impact, Verdana;
font-size:25px;
color:#fff
[/class]

[class=fyuriheader2]
width:calc(100% - 20px);
height:35px;
padding:0px 10px 10px 0px;
font-family: 'Oswald', Impact, Verdana;
font-size:30px;
[/class]

[class=fyuricredit]
max-width:850px;
margin:auto;
opacity:0.3;
font-size:10px;
[/class]

[/nobr]

[div class=fyuriwrapper][div class=fyuribox1][div class=fyuriimagebox][img]http://via.placeholder.com/300x300[/img][/div][div class=fyuriheader][fa]fa-id-card-o[/fa] Identification[/div][div=padding:5px;][b]Name[/b]:
[b]Rank[/b]: [/div][div class=fyuriheader][fa]fa-tasks[/fa] Stats[/div]
[div=padding:5px;][row][column=span2]Attribute:[/column][column=span3][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][/column][/row]
[row][column=span2]Attribute:[/column][column=span3][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][/column][/row]
[row][column=span2]Attribute:[/column][column=span3][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][/column][/row]
[row][column=span2]Attribute:[/column][column=span3][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][/column][/row]
[row][column=span2]Attribute:[/column][column=span3][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][/column][/row]
[row][column=span2]Attribute:[/column][column=span3][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][/column][/row][/div]

[div class=fyuriheader][fa]fa-tasks[/fa] Skills[/div]
[div=padding:5px;][row][column=span2]Skill:[/column][column=span3][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][/column][/row]
[row][column=span2]Skill:[/column][column=span3][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][/column][/row]
[row][column=span2]Skill:[/column][column=span3][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][/column][/row]
[row][column=span2]Skill:[/column][column=span3][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][/column][/row]
[row][column=span2]Skill:[/column][column=span3][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][/column][/row]
[row][column=span2]Skill:[/column][column=span3][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][fa]fa-circle-thin[/fa][/column][/row][/div]

[/div][div class=fyuribox2][div=padding:5px;][div class=fyuriheader2][fa]fa-user-circle[/fa] Character Name[/div][/div][div class=fyuriheader][fa]fa-info-circle[/fa] General[/div]
[div=padding:5px;][b]Age[/b]: 

[b]Gender[/b]:

[b]Race[/b]: 

[b]Sexual Orientation[/b]:
[/div]
[div class=fyuriheader][fa]fa-info-circle[/fa] Header[/div]
[div=padding:5px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie, justo at ultrices finibus, nulla enim lacinia dui, at finibus mi erat eu nulla. Nullam sagittis aliquam diam at condimentum. Quisque interdum dolor semper metus porttitor, dapibus viverra tellus cursus. Sed pulvinar urna in metus pharetra finibus. Nulla facilisi. Suspendisse sed magna et leo fringilla commodo. Etiam convallis magna id ante faucibus, vitae posuere ligula fringilla. Vestibulum ornare finibus finibus.[/div]
[div class=fyuriheader][fa]fa-info-circle[/fa] Header[/div]
[div=padding:5px;]Sed aliquet venenatis pharetra. Mauris sodales dignissim purus, et hendrerit odio rutrum eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac justo arcu. Morbi at dapibus metus. Ut at facilisis orci. Pellentesque ut pulvinar dui. Aliquam consequat dapibus laoreet. Integer porta venenatis cursus. Nunc cursus quis ante at sagittis. Quisque non tincidunt elit, non efficitur odio.[/div]
[div class=fyuriheader][fa]fa-info-circle[/fa] Header[/div]
[div=padding:5px;]Aliquam velit nisl, iaculis sit amet dolor in, dictum viverra purus. Quisque quis dapibus tortor, et imperdiet tellus. In nec dapibus metus, vel varius erat. Ut in nisi turpis. Sed in porta arcu. Donec venenatis eu lectus non congue. Nunc at cursus dolor. Nulla pretium velit id enim condimentum elementum. Vivamus pulvinar orci at magna posuere faucibus a vel velit.[/div]
[div class=fyuriheader][fa]fa-info-circle[/fa] Header[/div]
[div=padding:5px;]Sed sit amet pharetra eros. Etiam erat turpis, pulvinar et dictum quis, vehicula elementum nibh. Aliquam quis vestibulum sapien. Duis ac eros ipsum. Nullam tristique nisi nec tortor efficitur molestie. Pellentesque odio lectus, facilisis id quam quis, eleifend bibendum erat. Cras pharetra turpis eget odio imperdiet lobortis. Aenean at lorem magna. Integer quis auctor mauris, non elementum lectus. Duis facilisis aliquet turpis, id tincidunt urna rhoncus id. Aliquam quis tellus purus.[/div]
[/div][/div][div class=fyuricredit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-8665183]code[/url] by [USER=39545]@Fyuri[/USER][/div][comment]do not remove/alter credit. code by @fyuri[/comment]
 
Last edited:

Fyuri

積ん読
Administrator
Supporter
#7
Another fun experiment using hovers to create faux affects, this time, faux tabs! Hover over an icon on the left and see 'tabbed' content. Thanks to @Alteras for assistance~
Mobile Friendly: No
Note(s): Visible Scrollbars, be careful when you edit!
Free To Use? Yes
Div Classes:
  • [div class=main]Main Content[div] - Default text that is visible.
  • [div class=tab1]Content[div] - Tab 1 content
  • [div class=tab2]Content[div] - Tab 2 content
  • [div class=tab3]Content[div] - Tab 3 content
  • [div=color:#313131!important;text-align:center;line-height:5px;font-size:35px!important;]FA ICON[/div] - Icon for Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu felis ut mi sagittis accumsan id ut tellus. Donec dapibus fringilla consectetur. Nunc eu eros ut turpis aliquam commodo. Duis scelerisque quam et enim efficitur porttitor. Nunc consequat ligula eu hendrerit feugiat. Aliquam erat volutpat. Etiam venenatis orci enim, sed molestie ipsum fermentum at. Sed elementum erat non purus mollis ultrices a eu est. Phasellus euismod enim urna, eu interdum ligula aliquet a. Integer vehicula, tortor quis laoreet efficitur, magna dui efficitur sem, ut efficitur nibh mi fermentum magna. Vestibulum nibh libero, lacinia vel ipsum vitae, condimentum aliquet nisl.

Etiam suscipit commodo nulla non consequat. Nullam at urna eu lacus scelerisque pellentesque at eget eros. Vestibulum eu lectus iaculis, consequat leo et, sollicitudin velit. Pellentesque in turpis posuere, vehicula orci blandit, condimentum neque. Donec euismod elit sit amet diam ultricies, id convallis ligula facilisis. Praesent pellentesque ante leo, vitae porta lectus maximus nec. Nulla sed nibh vitae est convallis viverra. Ut malesuada vehicula hendrerit. Vivamus sit amet sem sagittis, finibus ligula eu, ornare massa. Vestibulum pharetra viverra semper. Quisque euismod, est vel convallis efficitur, lacus massa ornare leo, id viverra leo metus eu est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Phasellus fringilla lectus nec libero fermentum vestibulum. Donec blandit eget velit in blandit. Praesent imperdiet nisi sit amet orci luctus tempus. Maecenas porta elit et tellus volutpat, eget pretium diam commodo. Proin a cursus massa, ut varius risus. Nam placerat vulputate elementum. Donec gravida egestas mauris eu luctus. Curabitur non faucibus tellus, non laoreet velit. Suspendisse accumsan ipsum ut arcu sagittis facilisis. Aenean ornare risus vitae orci tincidunt, id imperdiet orci efficitur. Fusce sed interdum tellus, sed tincidunt lacus.

Nulla dictum a nulla viverra aliquet. Mauris tristique nisl sed ex pharetra rhoncus. Pellentesque facilisis pretium risus ut rhoncus. Nunc condimentum, velit nec pretium volutpat, sapien lorem faucibus mi, nec viverra neque dui quis enim. In feugiat neque id odio aliquet condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus luctus sit amet quam non commodo. Curabitur nec commodo nulla. Sed interdum lacinia augue, eu mattis justo fringilla at.

Fusce risus odio, imperdiet vel lacus a, lobortis ultrices ipsum. Nulla neque nibh, hendrerit quis nulla nec, ultrices faucibus neque. Suspendisse blandit lorem leo, a euismod enim tristique nec. Nunc enim nunc, sollicitudin et semper et, lobortis non purus. Praesent finibus nulla eu magna semper semper. Maecenas vitae ligula tellus. Phasellus vel maximus justo, bibendum bibendum orci. Aliquam libero mi, ullamcorper nec arcu eu, scelerisque elementum lacus. Phasellus pulvinar laoreet sagittis. Maecenas eu nulla interdum, suscipit lorem eget, feugiat nibh. Duis eu malesuada arcu. Integer dolor ante, lobortis eget sapien at, gravida pulvinar diam. Morbi a accumsan tortor. Sed eget sagittis nibh. Aenean vitae varius nisl. Vestibulum ac nibh at enim dignissim interdum at quis est.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu felis ut mi sagittis accumsan id ut tellus. Donec dapibus fringilla consectetur. Nunc eu eros ut turpis aliquam commodo. Duis scelerisque quam et enim efficitur porttitor. Nunc consequat ligula eu hendrerit feugiat. Aliquam erat volutpat. Etiam venenatis orci enim, sed molestie ipsum fermentum at. Sed elementum erat non purus mollis ultrices a eu est. Phasellus euismod enim urna, eu interdum ligula aliquet a. Integer vehicula, tortor quis laoreet efficitur, magna dui efficitur sem, ut efficitur nibh mi fermentum magna. Vestibulum nibh libero, lacinia vel ipsum vitae, condimentum aliquet nisl.

Etiam suscipit commodo nulla non consequat. Nullam at urna eu lacus scelerisque pellentesque at eget eros. Vestibulum eu lectus iaculis, consequat leo et, sollicitudin velit. Pellentesque in turpis posuere, vehicula orci blandit, condimentum neque. Donec euismod elit sit amet diam ultricies, id convallis ligula facilisis. Praesent pellentesque ante leo, vitae porta lectus maximus nec. Nulla sed nibh vitae est convallis viverra. Ut malesuada vehicula hendrerit. Vivamus sit amet sem sagittis, finibus ligula eu, ornare massa. Vestibulum pharetra viverra semper. Quisque euismod, est vel convallis efficitur, lacus massa ornare leo, id viverra leo metus eu est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Phasellus fringilla lectus nec libero fermentum vestibulum. Donec blandit eget velit in blandit. Praesent imperdiet nisi sit amet orci luctus tempus. Maecenas porta elit et tellus volutpat, eget pretium diam commodo. Proin a cursus massa, ut varius risus. Nam placerat vulputate elementum. Donec gravida egestas mauris eu luctus. Curabitur non faucibus tellus, non laoreet velit. Suspendisse accumsan ipsum ut arcu sagittis facilisis. Aenean ornare risus vitae orci tincidunt, id imperdiet orci efficitur. Fusce sed interdum tellus, sed tincidunt lacus.

Nulla dictum a nulla viverra aliquet. Mauris tristique nisl sed ex pharetra rhoncus. Pellentesque facilisis pretium risus ut rhoncus. Nunc condimentum, velit nec pretium volutpat, sapien lorem faucibus mi, nec viverra neque dui quis enim. In feugiat neque id odio aliquet condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus luctus sit amet quam non commodo. Curabitur nec commodo nulla. Sed interdum lacinia augue, eu mattis justo fringilla at.

Fusce risus odio, imperdiet vel lacus a, lobortis ultrices ipsum. Nulla neque nibh, hendrerit quis nulla nec, ultrices faucibus neque. Suspendisse blandit lorem leo, a euismod enim tristique nec. Nunc enim nunc, sollicitudin et semper et, lobortis non purus. Praesent finibus nulla eu magna semper semper. Maecenas vitae ligula tellus. Phasellus vel maximus justo, bibendum bibendum orci. Aliquam libero mi, ullamcorper nec arcu eu, scelerisque elementum lacus. Phasellus pulvinar laoreet sagittis. Maecenas eu nulla interdum, suscipit lorem eget, feugiat nibh. Duis eu malesuada arcu. Integer dolor ante, lobortis eget sapien at, gravida pulvinar diam. Morbi a accumsan tortor. Sed eget sagittis nibh. Aenean vitae varius nisl. Vestibulum ac nibh at enim dignissim interdum at quis est.

Donec convallis rutrum ultrices. Nam blandit augue eget aliquam varius. Aliquam varius pellentesque nisl ut auctor. Cras quam lacus, feugiat et sapien a, iaculis cursus ligula. Curabitur sollicitudin congue ultricies. Nulla viverra efficitur leo, sit amet convallis nunc iaculis ut. Proin vel dui commodo, ornare sapien eget, luctus arcu. Sed interdum pretium urna et bibendum. Donec placerat porttitor molestie. Nunc est velit, aliquet et fringilla eget, luctus eget quam. Ut vel erat a elit varius eleifend. Vivamus eget velit in magna vulputate scelerisque. Maecenas aliquet turpis risus, vitae finibus lorem lacinia non. In a erat mollis, finibus odio et, dapibus urna. Quisque quis tincidunt nibh.

Nunc ut felis tellus. Fusce non diam faucibus, congue enim tincidunt, tincidunt mauris. Nulla dignissim nec ipsum at sagittis. Sed auctor ornare erat ac tristique. Pellentesque sagittis congue urna et iaculis. Aliquam nisi quam, luctus vitae neque id, tempus gravida ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam leo turpis, tempus ac viverra vel, cursus in nunc. Aliquam est magna, consectetur vitae lectus sit amet, ultricies sodales augue. Nam mattis massa vel urna blandit faucibus. Sed bibendum lacus vel faucibus venenatis. Maecenas at rhoncus sapien, eu venenatis ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus tempus pulvinar nibh, ac pretium justo vehicula non. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis condimentum arcu. Vivamus congue, felis eget fringilla cursus, justo erat posuere augue, vel egestas lorem lacus non est. Donec accumsan neque leo, in pharetra turpis aliquet in. Mauris sed laoreet arcu. Sed odio quam, semper a aliquam ac, pulvinar vel felis. Vestibulum eros odio, accumsan vel tellus vel, dignissim commodo velit. Nullam fermentum odio quis ipsum fermentum dignissim. Aenean sit amet dolor mollis, posuere metus in, hendrerit est. Aenean ac ultrices neque. Suspendisse eget molestie urna, nec pretium libero. Donec purus magna, porttitor lobortis suscipit sit amet, tincidunt vitae velit. Praesent metus libero, pellentesque ac pretium nec, ornare sed eros. Nulla dui massa, dapibus quis urna ac, mattis sodales ante. Quisque eu sem eu est molestie porta.

Aenean ullamcorper consectetur elit, at dignissim turpis ornare ac. Sed lorem libero, volutpat non ex eu, porttitor finibus risus. Duis lorem leo, porta at lorem molestie, feugiat consectetur quam. Nullam molestie dui ut sapien rhoncus egestas. Etiam non ornare lacus. Nam sollicitudin orci vitae pellentesque laoreet. Cras id congue orci. Sed eu eleifend turpis. Vestibulum mauris quam, vehicula non vulputate ac, aliquam sit amet libero. Cras nec dapibus lacus, nec aliquet lacus. Curabitur ac neque nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur id tristique eros, at egestas magna. Vestibulum ante magna, lacinia sit amet nibh sit amet, pretium varius nibh.

Aliquam finibus ante cursus, suscipit eros in, tincidunt mauris. Sed lacinia, diam ac interdum ornare, est nulla lacinia arcu, ut commodo erat libero aliquam nulla. Mauris at sem dui. Phasellus viverra urna vestibulum purus vehicula ultrices. Sed ut nulla consectetur, bibendum dolor eget, cursus est. Nunc porta fringilla volutpat. Nullam eu arcu erat. Mauris posuere nunc fringilla lacus vehicula aliquet. Nulla rhoncus condimentum arcu. Aenean auctor neque vel diam feugiat, ac semper mi porta. Sed dictum felis non odio dignissim suscipit. Donec dignissim nulla ante, ac pulvinar est finibus vel.

Ut id felis arcu. Etiam eu mattis elit. Aenean suscipit lectus sit amet commodo vehicula. Aenean ultricies orci id nisi tincidunt, sodales pretium sem interdum. Morbi vulputate tellus mi. Quisque nec placerat magna, ut tincidunt diam. Quisque dapibus lectus sapien, eget condimentum velit consectetur eget. Ut vulputate arcu ac lorem sodales scelerisque. Duis imperdiet velit quis lacinia feugiat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta euismod mauris et lacinia. Nunc finibus sed lectus non mattis. Donec id justo vitae turpis viverra auctor id at sem. Curabitur rhoncus neque vitae ligula dictum hendrerit. Praesent scelerisque interdum orci, eu sodales massa elementum non. Sed ac metus a lectus lobortis imperdiet convallis vel enim.

Code:
[nobr]
[class=fyuriwrapper]
position:relative;
z-index:0;
display: flex;
flex-wrap: wrap;
max-width:600px;
height:600px;
margin:10px auto;
background:transparent;
overflow:hidden;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
[/class]

[class=tabs]
position:absolute;
z-index:2;
width:75px;
height:600px;
background: #4dfff3; 
background: -moz-linear-gradient(top, #4dfff3 56%, #52ffb8 100%); 
background: -webkit-linear-gradient(top, #4dfff3 56%,#52ffb8 100%);
background: linear-gradient(to bottom, #4dfff3 56%,#52ffb8 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dfff3', endColorstr='#52ffb8',GradientType=0 ); 
[/class]

[class=tab1]
position:absolute;
z-index:3;
width:calc(100% - 20px);
height:33px;
background:rgba(255,255,255, 0.8);
color:transparent;
transition:  width 1.5s, height 1.5s 1s, color 0s 0s, background 0.5s 0.5s;
text-align:justify;
padding:10px;
overflow:hidden;
[/class]

[class name=tab1 state=hover]
position:absolute;
z-index:50;
width:580px;
height:580px;
background:#fff;
color:#313131;
transition:  width 1s, height 1.5s 1s, color 1.5s 1.5s, top 1s 1s linear, background 0.5s 0.5s;
overflow:auto;
text-align:justify;
padding:10px;
[/class]

[class=tab2]
position:absolute;
top:54px;
z-index:3;
width:calc(100% - 20px);
height:33px;
background:rgba(255,255,255, 0.8);
color:transparent;
transition:  width 1s, height 1.5s 1s, color 0s 0s, top 1.5s 1s linear;
padding:10px;
overflow:hidden;
[/class]

[class name=tab2 state=hover]
position:absolute;
top:0px;
z-index:50;
width:580px;
height:580px;
background:#fff;
color:#000;
transition:  width 1s, height 1.5s 1s, color 1.5s 1.5s, top 1s 1s linear;
overflow:auto;
text-align:justify;
padding:10px;
[/class]

[class=tab3]
position:absolute;
top:108px;
z-index:3;
width:calc(100% - 20px);
height:33px;
background:rgba(255,255,255, 0.8);
color:transparent;
transition:  width 1s, height 1.5s 1s, color 0s 0s, top 1.5s 1s linear;
padding:10px;
overflow:hidden;
[/class]

[class name=tab3 state=hover]
position:absolute;
top:0px;
z-index:50;
width:580px;
height:580px;
background:#fff;
color:#000;
transition:  width 1s, height 1.5s 1s, color 1.5s 1.5s, top 1s 1s linear;
overflow:auto;
text-align:justify;
padding:10px;
[/class]

[class=main]
position:relative;
height:580px;
margin-left:75px;
z-index:1;
flex: 1;
background:#fff;
padding:10px;
overflow:auto;
text-align:justify;
color:#313131;
[/class]

[class=fyuricredit]
max-width:600px;
margin:auto;
opacity:0.3;
font-size:10px;
[/class]
[/nobr]
[div class=fyuriwrapper][div class=tabs][div class=tab1][div=color:#313131!important;text-align:center;line-height:5px;font-size:35px!important;][fa]fa-user-circle[/fa][/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu felis ut mi sagittis accumsan id ut tellus. Donec dapibus fringilla consectetur. Nunc eu eros ut turpis aliquam commodo. Duis scelerisque quam et enim efficitur porttitor. Nunc consequat ligula eu hendrerit feugiat. Aliquam erat volutpat. Etiam venenatis orci enim, sed molestie ipsum fermentum at. Sed elementum erat non purus mollis ultrices a eu est. Phasellus euismod enim urna, eu interdum ligula aliquet a. Integer vehicula, tortor quis laoreet efficitur, magna dui efficitur sem, ut efficitur nibh mi fermentum magna. Vestibulum nibh libero, lacinia vel ipsum vitae, condimentum aliquet nisl.

Etiam suscipit commodo nulla non consequat. Nullam at urna eu lacus scelerisque pellentesque at eget eros. Vestibulum eu lectus iaculis, consequat leo et, sollicitudin velit. Pellentesque in turpis posuere, vehicula orci blandit, condimentum neque. Donec euismod elit sit amet diam ultricies, id convallis ligula facilisis. Praesent pellentesque ante leo, vitae porta lectus maximus nec. Nulla sed nibh vitae est convallis viverra. Ut malesuada vehicula hendrerit. Vivamus sit amet sem sagittis, finibus ligula eu, ornare massa. Vestibulum pharetra viverra semper. Quisque euismod, est vel convallis efficitur, lacus massa ornare leo, id viverra leo metus eu est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Phasellus fringilla lectus nec libero fermentum vestibulum. Donec blandit eget velit in blandit. Praesent imperdiet nisi sit amet orci luctus tempus. Maecenas porta elit et tellus volutpat, eget pretium diam commodo. Proin a cursus massa, ut varius risus. Nam placerat vulputate elementum. Donec gravida egestas mauris eu luctus. Curabitur non faucibus tellus, non laoreet velit. Suspendisse accumsan ipsum ut arcu sagittis facilisis. Aenean ornare risus vitae orci tincidunt, id imperdiet orci efficitur. Fusce sed interdum tellus, sed tincidunt lacus.

Nulla dictum a nulla viverra aliquet. Mauris tristique nisl sed ex pharetra rhoncus. Pellentesque facilisis pretium risus ut rhoncus. Nunc condimentum, velit nec pretium volutpat, sapien lorem faucibus mi, nec viverra neque dui quis enim. In feugiat neque id odio aliquet condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus luctus sit amet quam non commodo. Curabitur nec commodo nulla. Sed interdum lacinia augue, eu mattis justo fringilla at.

Fusce risus odio, imperdiet vel lacus a, lobortis ultrices ipsum. Nulla neque nibh, hendrerit quis nulla nec, ultrices faucibus neque. Suspendisse blandit lorem leo, a euismod enim tristique nec. Nunc enim nunc, sollicitudin et semper et, lobortis non purus. Praesent finibus nulla eu magna semper semper. Maecenas vitae ligula tellus. Phasellus vel maximus justo, bibendum bibendum orci. Aliquam libero mi, ullamcorper nec arcu eu, scelerisque elementum lacus. Phasellus pulvinar laoreet sagittis. Maecenas eu nulla interdum, suscipit lorem eget, feugiat nibh. Duis eu malesuada arcu. Integer dolor ante, lobortis eget sapien at, gravida pulvinar diam. Morbi a accumsan tortor. Sed eget sagittis nibh. Aenean vitae varius nisl. Vestibulum ac nibh at enim dignissim interdum at quis est.[/div]
[div class=tab2][div=color:#313131!important;text-align:center;line-height:5px;font-size:35px!important;][fa]fa-info-circle[/fa][/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu felis ut mi sagittis accumsan id ut tellus. Donec dapibus fringilla consectetur. Nunc eu eros ut turpis aliquam commodo. Duis scelerisque quam et enim efficitur porttitor. Nunc consequat ligula eu hendrerit feugiat. Aliquam erat volutpat. Etiam venenatis orci enim, sed molestie ipsum fermentum at. Sed elementum erat non purus mollis ultrices a eu est. Phasellus euismod enim urna, eu interdum ligula aliquet a. Integer vehicula, tortor quis laoreet efficitur, magna dui efficitur sem, ut efficitur nibh mi fermentum magna. Vestibulum nibh libero, lacinia vel ipsum vitae, condimentum aliquet nisl.

Etiam suscipit commodo nulla non consequat. Nullam at urna eu lacus scelerisque pellentesque at eget eros. Vestibulum eu lectus iaculis, consequat leo et, sollicitudin velit. Pellentesque in turpis posuere, vehicula orci blandit, condimentum neque. Donec euismod elit sit amet diam ultricies, id convallis ligula facilisis. Praesent pellentesque ante leo, vitae porta lectus maximus nec. Nulla sed nibh vitae est convallis viverra. Ut malesuada vehicula hendrerit. Vivamus sit amet sem sagittis, finibus ligula eu, ornare massa. Vestibulum pharetra viverra semper. Quisque euismod, est vel convallis efficitur, lacus massa ornare leo, id viverra leo metus eu est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Phasellus fringilla lectus nec libero fermentum vestibulum. Donec blandit eget velit in blandit. Praesent imperdiet nisi sit amet orci luctus tempus. Maecenas porta elit et tellus volutpat, eget pretium diam commodo. Proin a cursus massa, ut varius risus. Nam placerat vulputate elementum. Donec gravida egestas mauris eu luctus. Curabitur non faucibus tellus, non laoreet velit. Suspendisse accumsan ipsum ut arcu sagittis facilisis. Aenean ornare risus vitae orci tincidunt, id imperdiet orci efficitur. Fusce sed interdum tellus, sed tincidunt lacus.

Nulla dictum a nulla viverra aliquet. Mauris tristique nisl sed ex pharetra rhoncus. Pellentesque facilisis pretium risus ut rhoncus. Nunc condimentum, velit nec pretium volutpat, sapien lorem faucibus mi, nec viverra neque dui quis enim. In feugiat neque id odio aliquet condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus luctus sit amet quam non commodo. Curabitur nec commodo nulla. Sed interdum lacinia augue, eu mattis justo fringilla at.

Fusce risus odio, imperdiet vel lacus a, lobortis ultrices ipsum. Nulla neque nibh, hendrerit quis nulla nec, ultrices faucibus neque. Suspendisse blandit lorem leo, a euismod enim tristique nec. Nunc enim nunc, sollicitudin et semper et, lobortis non purus. Praesent finibus nulla eu magna semper semper. Maecenas vitae ligula tellus. Phasellus vel maximus justo, bibendum bibendum orci. Aliquam libero mi, ullamcorper nec arcu eu, scelerisque elementum lacus. Phasellus pulvinar laoreet sagittis. Maecenas eu nulla interdum, suscipit lorem eget, feugiat nibh. Duis eu malesuada arcu. Integer dolor ante, lobortis eget sapien at, gravida pulvinar diam. Morbi a accumsan tortor. Sed eget sagittis nibh. Aenean vitae varius nisl. Vestibulum ac nibh at enim dignissim interdum at quis est.[/div]
[div class=tab3][div=color:#313131!important;text-align:center;line-height:5px;font-size:35px!important;][fa]fa-telegram[/fa][/div]Donec convallis rutrum ultrices. Nam blandit augue eget aliquam varius. Aliquam varius pellentesque nisl ut auctor. Cras quam lacus, feugiat et sapien a, iaculis cursus ligula. Curabitur sollicitudin congue ultricies. Nulla viverra efficitur leo, sit amet convallis nunc iaculis ut. Proin vel dui commodo, ornare sapien eget, luctus arcu. Sed interdum pretium urna et bibendum. Donec placerat porttitor molestie. Nunc est velit, aliquet et fringilla eget, luctus eget quam. Ut vel erat a elit varius eleifend. Vivamus eget velit in magna vulputate scelerisque. Maecenas aliquet turpis risus, vitae finibus lorem lacinia non. In a erat mollis, finibus odio et, dapibus urna. Quisque quis tincidunt nibh.

Nunc ut felis tellus. Fusce non diam faucibus, congue enim tincidunt, tincidunt mauris. Nulla dignissim nec ipsum at sagittis. Sed auctor ornare erat ac tristique. Pellentesque sagittis congue urna et iaculis. Aliquam nisi quam, luctus vitae neque id, tempus gravida ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam leo turpis, tempus ac viverra vel, cursus in nunc. Aliquam est magna, consectetur vitae lectus sit amet, ultricies sodales augue. Nam mattis massa vel urna blandit faucibus. Sed bibendum lacus vel faucibus venenatis. Maecenas at rhoncus sapien, eu venenatis ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus tempus pulvinar nibh, ac pretium justo vehicula non. Interdum et malesuada fames ac ante ipsum primis in faucibus.[/div][/div]
[div class=main]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis condimentum arcu. Vivamus congue, felis eget fringilla cursus, justo erat posuere augue, vel egestas lorem lacus non est. Donec accumsan neque leo, in pharetra turpis aliquet in. Mauris sed laoreet arcu. Sed odio quam, semper a aliquam ac, pulvinar vel felis. Vestibulum eros odio, accumsan vel tellus vel, dignissim commodo velit. Nullam fermentum odio quis ipsum fermentum dignissim. Aenean sit amet dolor mollis, posuere metus in, hendrerit est. Aenean ac ultrices neque. Suspendisse eget molestie urna, nec pretium libero. Donec purus magna, porttitor lobortis suscipit sit amet, tincidunt vitae velit. Praesent metus libero, pellentesque ac pretium nec, ornare sed eros. Nulla dui massa, dapibus quis urna ac, mattis sodales ante. Quisque eu sem eu est molestie porta.

Aenean ullamcorper consectetur elit, at dignissim turpis ornare ac. Sed lorem libero, volutpat non ex eu, porttitor finibus risus. Duis lorem leo, porta at lorem molestie, feugiat consectetur quam. Nullam molestie dui ut sapien rhoncus egestas. Etiam non ornare lacus. Nam sollicitudin orci vitae pellentesque laoreet. Cras id congue orci. Sed eu eleifend turpis. Vestibulum mauris quam, vehicula non vulputate ac, aliquam sit amet libero. Cras nec dapibus lacus, nec aliquet lacus. Curabitur ac neque nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur id tristique eros, at egestas magna. Vestibulum ante magna, lacinia sit amet nibh sit amet, pretium varius nibh.

Aliquam finibus ante cursus, suscipit eros in, tincidunt mauris. Sed lacinia, diam ac interdum ornare, est nulla lacinia arcu, ut commodo erat libero aliquam nulla. Mauris at sem dui. Phasellus viverra urna vestibulum purus vehicula ultrices. Sed ut nulla consectetur, bibendum dolor eget, cursus est. Nunc porta fringilla volutpat. Nullam eu arcu erat. Mauris posuere nunc fringilla lacus vehicula aliquet. Nulla rhoncus condimentum arcu. Aenean auctor neque vel diam feugiat, ac semper mi porta. Sed dictum felis non odio dignissim suscipit. Donec dignissim nulla ante, ac pulvinar est finibus vel.

Ut id felis arcu. Etiam eu mattis elit. Aenean suscipit lectus sit amet commodo vehicula. Aenean ultricies orci id nisi tincidunt, sodales pretium sem interdum. Morbi vulputate tellus mi. Quisque nec placerat magna, ut tincidunt diam. Quisque dapibus lectus sapien, eget condimentum velit consectetur eget. Ut vulputate arcu ac lorem sodales scelerisque. Duis imperdiet velit quis lacinia feugiat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta euismod mauris et lacinia. Nunc finibus sed lectus non mattis. Donec id justo vitae turpis viverra auctor id at sem. Curabitur rhoncus neque vitae ligula dictum hendrerit. Praesent scelerisque interdum orci, eu sodales massa elementum non. Sed ac metus a lectus lobortis imperdiet convallis vel enim.[/div][/div][div class=fyuricredit]https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-8668997 by [USER=39545]@Fyuri[/USER][/div][comment]do not remove/alter credit. code by @fyuri[/comment]
 
Last edited:

Fyuri

積ん読
Administrator
Supporter
#8
Here is the faux tab sister to my previous version; horizontal faux tabs. Of course, @Alteras helped me with my overthinking again. X3
Mobile Friendly: No
Note(s): Visible Scrollbars, be careful when you edit.
Free To Use? Yes
Div Classes:
  • [div class=main]Main Content[div] - Default text that is visible.
  • [div class=tab1]Content[div] - Tab 1 content
  • [div class=tab2]Content[div] - Tab 2 content
  • [div class=tab3]Content[div] - Tab 3 content
  • [div=color:#313131!important;text-align:center;line-height:5px;font-size:35px!important;]FA ICON[/div] - Icon for Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu felis ut mi sagittis accumsan id ut tellus. Donec dapibus fringilla consectetur. Nunc eu eros ut turpis aliquam commodo. Duis scelerisque quam et enim efficitur porttitor. Nunc consequat ligula eu hendrerit feugiat. Aliquam erat volutpat. Etiam venenatis orci enim, sed molestie ipsum fermentum at. Sed elementum erat non purus mollis ultrices a eu est. Phasellus euismod enim urna, eu interdum ligula aliquet a. Integer vehicula, tortor quis laoreet efficitur, magna dui efficitur sem, ut efficitur nibh mi fermentum magna. Vestibulum nibh libero, lacinia vel ipsum vitae, condimentum aliquet nisl.

Etiam suscipit commodo nulla non consequat. Nullam at urna eu lacus scelerisque pellentesque at eget eros. Vestibulum eu lectus iaculis, consequat leo et, sollicitudin velit. Pellentesque in turpis posuere, vehicula orci blandit, condimentum neque. Donec euismod elit sit amet diam ultricies, id convallis ligula facilisis. Praesent pellentesque ante leo, vitae porta lectus maximus nec. Nulla sed nibh vitae est convallis viverra. Ut malesuada vehicula hendrerit. Vivamus sit amet sem sagittis, finibus ligula eu, ornare massa. Vestibulum pharetra viverra semper. Quisque euismod, est vel convallis efficitur, lacus massa ornare leo, id viverra leo metus eu est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Phasellus fringilla lectus nec libero fermentum vestibulum. Donec blandit eget velit in blandit. Praesent imperdiet nisi sit amet orci luctus tempus. Maecenas porta elit et tellus volutpat, eget pretium diam commodo. Proin a cursus massa, ut varius risus. Nam placerat vulputate elementum. Donec gravida egestas mauris eu luctus. Curabitur non faucibus tellus, non laoreet velit. Suspendisse accumsan ipsum ut arcu sagittis facilisis. Aenean ornare risus vitae orci tincidunt, id imperdiet orci efficitur. Fusce sed interdum tellus, sed tincidunt lacus.

Nulla dictum a nulla viverra aliquet. Mauris tristique nisl sed ex pharetra rhoncus. Pellentesque facilisis pretium risus ut rhoncus. Nunc condimentum, velit nec pretium volutpat, sapien lorem faucibus mi, nec viverra neque dui quis enim. In feugiat neque id odio aliquet condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus luctus sit amet quam non commodo. Curabitur nec commodo nulla. Sed interdum lacinia augue, eu mattis justo fringilla at.

Fusce risus odio, imperdiet vel lacus a, lobortis ultrices ipsum. Nulla neque nibh, hendrerit quis nulla nec, ultrices faucibus neque. Suspendisse blandit lorem leo, a euismod enim tristique nec. Nunc enim nunc, sollicitudin et semper et, lobortis non purus. Praesent finibus nulla eu magna semper semper. Maecenas vitae ligula tellus. Phasellus vel maximus justo, bibendum bibendum orci. Aliquam libero mi, ullamcorper nec arcu eu, scelerisque elementum lacus. Phasellus pulvinar laoreet sagittis. Maecenas eu nulla interdum, suscipit lorem eget, feugiat nibh. Duis eu malesuada arcu. Integer dolor ante, lobortis eget sapien at, gravida pulvinar diam. Morbi a accumsan tortor. Sed eget sagittis nibh. Aenean vitae varius nisl. Vestibulum ac nibh at enim dignissim interdum at quis est.
Sed a ex eu lorem mattis consequat at eget felis. Sed a tempor enim, sit amet volutpat arcu. Aenean iaculis est sit amet diam lacinia, sit amet ullamcorper sem tristique. Cras vestibulum lorem lacinia dictum sagittis. Phasellus id nunc ipsum. Mauris non felis suscipit metus pellentesque luctus. In ultricies quam libero, sit amet commodo nisi fringilla pulvinar. Curabitur feugiat, diam sed faucibus facilisis, odio justo rutrum diam, et maximus erat sem sed nunc. Aenean lobortis tellus id hendrerit tincidunt. Curabitur eget turpis congue, pharetra velit vel, faucibus leo. Ut at erat non magna sodales sollicitudin. Morbi blandit odio a turpis congue aliquam. Nullam interdum erat quis libero sagittis, id vestibulum justo ultricies. Sed ligula velit, tincidunt vel augue vitae, auctor tristique purus. Proin pretium tincidunt dolor. Nunc lobortis porttitor turpis quis posuere.

Aliquam volutpat pellentesque efficitur. Morbi imperdiet ante non felis accumsan pulvinar. Suspendisse massa erat, sodales malesuada lorem non, congue accumsan lacus. In ac lorem sapien. Curabitur rhoncus ipsum nec scelerisque tempor. Etiam quis magna quis augue semper placerat. Pellentesque malesuada condimentum elit, ac vulputate erat. Etiam quis dignissim risus. Quisque dictum pharetra lorem ut elementum. Vivamus posuere ligula a malesuada convallis. Donec lacinia mi eros, sed tincidunt mauris lobortis vel. Morbi dapibus, tellus at luctus sodales, massa odio eleifend nulla, vehicula venenatis leo nibh ut mi. Quisque porta augue magna, ac consectetur nibh dapibus sagittis. Integer sed est ligula.

Praesent vestibulum risus ut lobortis semper. In consequat ante in neque blandit tempor. Phasellus sodales ante vel consectetur hendrerit. Suspendisse sed erat quis mauris scelerisque porttitor nec quis lacus. Integer in ligula urna. Ut sodales tempor nisi ullamcorper feugiat. In eget nibh pharetra, sagittis neque eu, porttitor felis. Nullam pellentesque viverra risus sit amet mollis. Duis commodo ac velit nec efficitur. Curabitur sed condimentum ipsum. Donec ac justo at dolor condimentum convallis sit amet eu mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam mauris odio, sollicitudin ut orci sed, ultricies bibendum velit.
Donec convallis rutrum ultrices. Nam blandit augue eget aliquam varius. Aliquam varius pellentesque nisl ut auctor. Cras quam lacus, feugiat et sapien a, iaculis cursus ligula. Curabitur sollicitudin congue ultricies. Nulla viverra efficitur leo, sit amet convallis nunc iaculis ut. Proin vel dui commodo, ornare sapien eget, luctus arcu. Sed interdum pretium urna et bibendum. Donec placerat porttitor molestie. Nunc est velit, aliquet et fringilla eget, luctus eget quam. Ut vel erat a elit varius eleifend. Vivamus eget velit in magna vulputate scelerisque. Maecenas aliquet turpis risus, vitae finibus lorem lacinia non. In a erat mollis, finibus odio et, dapibus urna. Quisque quis tincidunt nibh.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia ante sit amet posuere iaculis. Phasellus viverra id nisi in pellentesque. Vestibulum leo eros, elementum a dolor vel, bibendum fermentum justo. Aliquam ullamcorper feugiat tristique. Quisque aliquam nisl non ligula rhoncus pulvinar. Sed ullamcorper, nulla in congue egestas, ex odio venenatis orci, finibus sagittis sapien quam in tortor. Curabitur vel magna elementum nisl interdum lobortis. Donec a vulputate nibh. Integer rhoncus commodo ante quis iaculis.

Praesent vestibulum vehicula ipsum id molestie. Nulla suscipit diam dapibus viverra dapibus. Morbi at facilisis dolor. Nullam vitae lacinia erat. Integer sed ex sem. Mauris convallis a ligula sed maximus. Duis faucibus leo id metus tincidunt fringilla. Nullam eget libero tincidunt sem sagittis malesuada non eget mi. Phasellus sit amet diam sodales, scelerisque arcu et, interdum est. Curabitur venenatis lacus a vestibulum lacinia. Sed ac consectetur orci. Praesent scelerisque pharetra facilisis. Vestibulum interdum blandit ultricies. Nunc ornare risus sodales, hendrerit dui vitae, consectetur mi.

Sed finibus vitae risus ut placerat. Sed nec quam sit amet nisl eleifend luctus et in lectus. Mauris posuere ligula ac metus iaculis commodo. Aenean faucibus, eros ac vulputate pharetra, neque massa ultricies ex, quis vestibulum magna magna posuere sem. Fusce a nisi vulputate, sollicitudin sem at, scelerisque turpis. Donec et suscipit erat. Curabitur ante turpis, elementum et ligula ac, accumsan finibus purus. Cras sit amet mi id nisi pharetra imperdiet. Etiam quam magna, volutpat quis ex non, semper rhoncus dui. Fusce eget consequat metus. Morbi elementum erat nunc, at condimentum risus blandit maximus. Nunc erat felis, porta a fermentum id, porttitor nec ex. Sed consequat massa id massa finibus, a vulputate magna pellentesque. Nullam vehicula vulputate lacus, ac facilisis mi tincidunt in.

Nam egestas eget lacus at lacinia. Pellentesque at nunc a velit laoreet varius. In hac habitasse platea dictumst. Proin condimentum orci accumsan nibh tristique lacinia. Quisque non aliquet odio. Duis blandit purus sagittis vulputate sollicitudin. Proin id ornare mi, vel pellentesque dolor.

Vivamus blandit orci sem. Cras scelerisque lectus placerat lacinia ullamcorper. Quisque viverra ligula id enim egestas imperdiet. Nulla ac tellus nec nibh aliquet commodo et vel ex. Sed pharetra id libero id rhoncus. Cras vel purus nec neque gravida lobortis. Nullam odio nisi, sodales in nibh eu, egestas tincidunt lorem. Mauris vitae cursus erat, et sodales purus. Aliquam porttitor nibh vitae velit euismod interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Code:
[nobr]
[class=fyuriwrapper]
position:relative;
z-index:0;
display: flex;
flex-wrap: wrap;
max-width:600px;
height:600px;
margin:10px auto;
background:transparent;
overflow:hidden;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
background:#fff;
[/class]

[class=tabscontainer]
position:absolute;
z-index:1;
width:100%;
height:50px;
background: #494949; 
background: -moz-linear-gradient(left, #494949 0%, #7c7a7a 100%); 
background: -webkit-linear-gradient(left, #494949 0%,#7c7a7a 100%);
background: linear-gradient(to right, #494949 0%,#7c7a7a 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#7c7a7a',GradientType=1 ); 
[/class]

[class=tab1]
position:absolute;
z-index:2;
box-sizing: border-box;
width:55px;
height:50px;
background:rgba(255,255,255, 0.8);
color:transparent;
transition:  width 1.5s, height 1.5s 1s, color 0s 0s, background 0.5s 0.5s, z-index 1.5s;
text-align:justify;
padding:10px;
overflow:hidden;
[/class]

[class name=tab1 state=hover]
position:absolute;
z-index:50;
box-sizing: border-box;
width:600px;
height:600px;
background:#fff;
color:#313131;
transition:  width 1s, height 1.5s 1s, color 1.5s 1.5s, top 1s 1s linear, background 0.5s 0.5s, z-index 0.5s;
overflow:auto;
text-align:justify;
padding:10px;
[/class]

[class=tab2]
position:absolute;
margin-left:56px;
z-index:2;
box-sizing: border-box;
width:55px;
height:50px;
background:rgba(255,255,255, 0.8);
color:transparent;
transition:  width 1.5s, height 1.5s 1s, color 0s 0s, background 0.5s 0.5s, margin-left 0.5s linear, z-index 1.5s;
text-align:justify;
padding:10px;
overflow:hidden;
[/class]

[class name=tab2 state=hover]
position:absolute;
margin-left:0px;
z-index:50;
box-sizing: border-box;
width:600px;
height:600px;
background:#fff;
color:#313131;
transition:  width 1s, height 1.5s 1s, color 1.5s 1.5s, top 1s 1s linear, background 0.5s 0.5s, margin-left 0.5s linear, z-index 0.5s;
overflow:auto;
text-align:justify;
padding:10px;
[/class]

[class=tab3]
position:absolute;
margin-left:112px;
z-index:2;
box-sizing: border-box;
width:55px;
height:50px;
background:rgba(255,255,255, 0.8);
color:transparent;
transition:  width 1.5s, height 1.5s 1s, color 0s 0s, background 0.5s 0.5s, margin-left 0.5s linear;
text-align:justify;
padding:10px;
overflow:hidden;
[/class]

[class name=tab3 state=hover]
position:absolute;
margin-left:0px;
z-index:50;
box-sizing: border-box;
width:600px;
height:600px;
background:#fff;
color:#313131;
transition:  width 1s, height 1.5s 1s, color 1.5s 1.5s, top 1s 1s linear, background 0.5s 0.5s, margin-left 0.5s linear;
overflow:auto;
text-align:justify;
padding:10px;
[/class]

[class=main]
position:relative;
z-index:0;
margin-top:50px;
width:100%;
height:550px;
box-sizing: border-box;
padding:10px;
overflow:auto;
text-align:justify;
color:#313131;
[/class]

[class=fyuricredit]
max-width:600px;
margin:auto;
opacity:0.3;
font-size:10px;
[/class]

[/nobr]
[div class=fyuriwrapper][div class=tabscontainer][div class=tab1][div=color:#313131!important;text-align:center;line-height:5px;font-size:35px!important;][fa]fa-user-circle[/fa][/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu felis ut mi sagittis accumsan id ut tellus. Donec dapibus fringilla consectetur. Nunc eu eros ut turpis aliquam commodo. Duis scelerisque quam et enim efficitur porttitor. Nunc consequat ligula eu hendrerit feugiat. Aliquam erat volutpat. Etiam venenatis orci enim, sed molestie ipsum fermentum at. Sed elementum erat non purus mollis ultrices a eu est. Phasellus euismod enim urna, eu interdum ligula aliquet a. Integer vehicula, tortor quis laoreet efficitur, magna dui efficitur sem, ut efficitur nibh mi fermentum magna. Vestibulum nibh libero, lacinia vel ipsum vitae, condimentum aliquet nisl.

Etiam suscipit commodo nulla non consequat. Nullam at urna eu lacus scelerisque pellentesque at eget eros. Vestibulum eu lectus iaculis, consequat leo et, sollicitudin velit. Pellentesque in turpis posuere, vehicula orci blandit, condimentum neque. Donec euismod elit sit amet diam ultricies, id convallis ligula facilisis. Praesent pellentesque ante leo, vitae porta lectus maximus nec. Nulla sed nibh vitae est convallis viverra. Ut malesuada vehicula hendrerit. Vivamus sit amet sem sagittis, finibus ligula eu, ornare massa. Vestibulum pharetra viverra semper. Quisque euismod, est vel convallis efficitur, lacus massa ornare leo, id viverra leo metus eu est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Phasellus fringilla lectus nec libero fermentum vestibulum. Donec blandit eget velit in blandit. Praesent imperdiet nisi sit amet orci luctus tempus. Maecenas porta elit et tellus volutpat, eget pretium diam commodo. Proin a cursus massa, ut varius risus. Nam placerat vulputate elementum. Donec gravida egestas mauris eu luctus. Curabitur non faucibus tellus, non laoreet velit. Suspendisse accumsan ipsum ut arcu sagittis facilisis. Aenean ornare risus vitae orci tincidunt, id imperdiet orci efficitur. Fusce sed interdum tellus, sed tincidunt lacus.

Nulla dictum a nulla viverra aliquet. Mauris tristique nisl sed ex pharetra rhoncus. Pellentesque facilisis pretium risus ut rhoncus. Nunc condimentum, velit nec pretium volutpat, sapien lorem faucibus mi, nec viverra neque dui quis enim. In feugiat neque id odio aliquet condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus luctus sit amet quam non commodo. Curabitur nec commodo nulla. Sed interdum lacinia augue, eu mattis justo fringilla at.

Fusce risus odio, imperdiet vel lacus a, lobortis ultrices ipsum. Nulla neque nibh, hendrerit quis nulla nec, ultrices faucibus neque. Suspendisse blandit lorem leo, a euismod enim tristique nec. Nunc enim nunc, sollicitudin et semper et, lobortis non purus. Praesent finibus nulla eu magna semper semper. Maecenas vitae ligula tellus. Phasellus vel maximus justo, bibendum bibendum orci. Aliquam libero mi, ullamcorper nec arcu eu, scelerisque elementum lacus. Phasellus pulvinar laoreet sagittis. Maecenas eu nulla interdum, suscipit lorem eget, feugiat nibh. Duis eu malesuada arcu. Integer dolor ante, lobortis eget sapien at, gravida pulvinar diam. Morbi a accumsan tortor. Sed eget sagittis nibh. Aenean vitae varius nisl. Vestibulum ac nibh at enim dignissim interdum at quis est.[/div][div class=tab2][div=color:#313131!important;text-align:center;line-height:5px;font-size:35px!important;][fa]fa-info-circle[/fa][/div]Sed a ex eu lorem mattis consequat at eget felis. Sed a tempor enim, sit amet volutpat arcu. Aenean iaculis est sit amet diam lacinia, sit amet ullamcorper sem tristique. Cras vestibulum lorem lacinia dictum sagittis. Phasellus id nunc ipsum. Mauris non felis suscipit metus pellentesque luctus. In ultricies quam libero, sit amet commodo nisi fringilla pulvinar. Curabitur feugiat, diam sed faucibus facilisis, odio justo rutrum diam, et maximus erat sem sed nunc. Aenean lobortis tellus id hendrerit tincidunt. Curabitur eget turpis congue, pharetra velit vel, faucibus leo. Ut at erat non magna sodales sollicitudin. Morbi blandit odio a turpis congue aliquam. Nullam interdum erat quis libero sagittis, id vestibulum justo ultricies. Sed ligula velit, tincidunt vel augue vitae, auctor tristique purus. Proin pretium tincidunt dolor. Nunc lobortis porttitor turpis quis posuere.

Aliquam volutpat pellentesque efficitur. Morbi imperdiet ante non felis accumsan pulvinar. Suspendisse massa erat, sodales malesuada lorem non, congue accumsan lacus. In ac lorem sapien. Curabitur rhoncus ipsum nec scelerisque tempor. Etiam quis magna quis augue semper placerat. Pellentesque malesuada condimentum elit, ac vulputate erat. Etiam quis dignissim risus. Quisque dictum pharetra lorem ut elementum. Vivamus posuere ligula a malesuada convallis. Donec lacinia mi eros, sed tincidunt mauris lobortis vel. Morbi dapibus, tellus at luctus sodales, massa odio eleifend nulla, vehicula venenatis leo nibh ut mi. Quisque porta augue magna, ac consectetur nibh dapibus sagittis. Integer sed est ligula.

Praesent vestibulum risus ut lobortis semper. In consequat ante in neque blandit tempor. Phasellus sodales ante vel consectetur hendrerit. Suspendisse sed erat quis mauris scelerisque porttitor nec quis lacus. Integer in ligula urna. Ut sodales tempor nisi ullamcorper feugiat. In eget nibh pharetra, sagittis neque eu, porttitor felis. Nullam pellentesque viverra risus sit amet mollis. Duis commodo ac velit nec efficitur. Curabitur sed condimentum ipsum. Donec ac justo at dolor condimentum convallis sit amet eu mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam mauris odio, sollicitudin ut orci sed, ultricies bibendum velit.[/div][div class=tab3][div=color:#313131!important;text-align:center;line-height:5px;font-size:35px!important;][fa]fa-telegram[/fa][/div]Donec convallis rutrum ultrices. Nam blandit augue eget aliquam varius. Aliquam varius pellentesque nisl ut auctor. Cras quam lacus, feugiat et sapien a, iaculis cursus ligula. Curabitur sollicitudin congue ultricies. Nulla viverra efficitur leo, sit amet convallis nunc iaculis ut. Proin vel dui commodo, ornare sapien eget, luctus arcu. Sed interdum pretium urna et bibendum. Donec placerat porttitor molestie. Nunc est velit, aliquet et fringilla eget, luctus eget quam. Ut vel erat a elit varius eleifend. Vivamus eget velit in magna vulputate scelerisque. Maecenas aliquet turpis risus, vitae finibus lorem lacinia non. In a erat mollis, finibus odio et, dapibus urna. Quisque quis tincidunt nibh.[/div][/div]
[div class=main]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia ante sit amet posuere iaculis. Phasellus viverra id nisi in pellentesque. Vestibulum leo eros, elementum a dolor vel, bibendum fermentum justo. Aliquam ullamcorper feugiat tristique. Quisque aliquam nisl non ligula rhoncus pulvinar. Sed ullamcorper, nulla in congue egestas, ex odio venenatis orci, finibus sagittis sapien quam in tortor. Curabitur vel magna elementum nisl interdum lobortis. Donec a vulputate nibh. Integer rhoncus commodo ante quis iaculis.

Praesent vestibulum vehicula ipsum id molestie. Nulla suscipit diam dapibus viverra dapibus. Morbi at facilisis dolor. Nullam vitae lacinia erat. Integer sed ex sem. Mauris convallis a ligula sed maximus. Duis faucibus leo id metus tincidunt fringilla. Nullam eget libero tincidunt sem sagittis malesuada non eget mi. Phasellus sit amet diam sodales, scelerisque arcu et, interdum est. Curabitur venenatis lacus a vestibulum lacinia. Sed ac consectetur orci. Praesent scelerisque pharetra facilisis. Vestibulum interdum blandit ultricies. Nunc ornare risus sodales, hendrerit dui vitae, consectetur mi.

Sed finibus vitae risus ut placerat. Sed nec quam sit amet nisl eleifend luctus et in lectus. Mauris posuere ligula ac metus iaculis commodo. Aenean faucibus, eros ac vulputate pharetra, neque massa ultricies ex, quis vestibulum magna magna posuere sem. Fusce a nisi vulputate, sollicitudin sem at, scelerisque turpis. Donec et suscipit erat. Curabitur ante turpis, elementum et ligula ac, accumsan finibus purus. Cras sit amet mi id nisi pharetra imperdiet. Etiam quam magna, volutpat quis ex non, semper rhoncus dui. Fusce eget consequat metus. Morbi elementum erat nunc, at condimentum risus blandit maximus. Nunc erat felis, porta a fermentum id, porttitor nec ex. Sed consequat massa id massa finibus, a vulputate magna pellentesque. Nullam vehicula vulputate lacus, ac facilisis mi tincidunt in.

Nam egestas eget lacus at lacinia. Pellentesque at nunc a velit laoreet varius. In hac habitasse platea dictumst. Proin condimentum orci accumsan nibh tristique lacinia. Quisque non aliquet odio. Duis blandit purus sagittis vulputate sollicitudin. Proin id ornare mi, vel pellentesque dolor.

Vivamus blandit orci sem. Cras scelerisque lectus placerat lacinia ullamcorper. Quisque viverra ligula id enim egestas imperdiet. Nulla ac tellus nec nibh aliquet commodo et vel ex. Sed pharetra id libero id rhoncus. Cras vel purus nec neque gravida lobortis. Nullam odio nisi, sodales in nibh eu, egestas tincidunt lorem. Mauris vitae cursus erat, et sodales purus. Aliquam porttitor nibh vitae velit euismod interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.[/div][/div][div class=fyuricredit]code/design by [USER=39545]@Fyuri[/USER][/div][comment]do not remove/alter credit[/comment]
 
Last edited:

Fyuri

積ん読
Administrator
Supporter
#9
Another simple design with a bit of experimentation of better overlays. Unfortunately, this isn't mobile friendly and it probably too minimal to interest others in using it. >_>;;
Mobile Friendly: No
Note: Hidden scoll.
Free To Use? Yes, with credit.
Div Classes & More
  • [div class=fyuri10textarea]Header[/div] - Header
  • [div class=fyuri10purplebox]Purple Box Content[/div] - Content inside purple box.
  • Replace 'http://via.placeholder.com/150x150' with the img URL you want to use. Keep in mind, it's small!
.

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis est quis leo euismod rutrum. Vivamus vitae sagittis turpis. Praesent tristique augue sit amet augue suscipit, id volutpat lectus tristique. Etiam nec ex lorem. Integer bibendum lacus ut lorem tempor, at viverra erat venenatis. Aenean ornare libero massa, sed commodo lorem blandit et. In hac habitasse platea dictumst. Vivamus scelerisque eros ac purus ornare interdum. Sed ut consectetur sem. Sed ac tincidunt quam. Proin felis massa, elementum et ligula eget, congue faucibus urna. Integer pellentesque malesuada leo dignissim pharetra. Fusce fringilla, nunc vel euismod vestibulum, ex quam vulputate mi, a venenatis mauris urna a purus. Pellentesque cursus tempor orci sed auctor. Donec viverra at ante vel dapibus.

Header

Pellentesque luctus dictum nisl, et vulputate lacus egestas vulputate. Suspendisse potenti. In consectetur suscipit turpis, nec fermentum augue pulvinar et. Sed tempor, massa et semper finibus, sapien lectus condimentum diam, sit amet commodo ligula arcu vel lacus. Proin in interdum magna, ac fermentum quam. Maecenas vel sagittis urna, id iaculis leo. Cras gravida interdum turpis. Donec arcu odio, feugiat sit amet tortor id, vehicula semper ex. Donec tincidunt metus id augue tempor, vel auctor ex tincidunt. Praesent tincidunt, nisi vitae interdum porta, velit ante facilisis urna, sit amet venenatis metus sem in lectus. Aenean ut ligula sit amet urna maximus hendrerit vel pulvinar mi. Vestibulum quis urna diam. Nulla nibh leo, lobortis at nisl et, mollis convallis nisi. Maecenas quis eleifend tellus.


Nulla eu interdum leo. Pellentesque venenatis ornare lacus, a tempor nisl eleifend non. Vestibulum sit amet porttitor massa. Donec eu aliquet lorem. Curabitur bibendum congue ultricies. Donec feugiat luctus lacus, a venenatis erat aliquet ac. Sed a auctor nisl. Phasellus venenatis eu nisi ac consectetur. Donec sed dolor nec mi aliquet faucibus sed at metus. Suspendisse potenti. Aenean quis fringilla odio. Pellentesque interdum diam vel neque vestibulum, vel dignissim eros rutrum.

Ut convallis fermentum accumsan. Integer tempor viverra massa, eget dapibus sapien pharetra in. Sed eu aliquet felis. Mauris mattis, felis et sodales blandit, arcu mauris vestibulum nibh, et lobortis metus lectus non enim. Mauris lorem orci, ornare consectetur leo sed, convallis malesuada metus. Donec ligula libero, vehicula id lacus a, tempor cursus ipsum. Praesent mattis turpis elit, elementum volutpat ante ornare sit amet. Suspendisse quam leo, egestas vitae luctus et, convallis sed risus. Integer et scelerisque est, vitae dignissim sapien. Vestibulum fringilla, mi et laoreet feugiat, nisl nunc tincidunt sem, sit amet dictum metus turpis venenatis purus. Nunc bibendum convallis odio sed tincidunt. Praesent nisi purus, tincidunt non metus non, dapibus sollicitudin turpis. Ut congue non ex a aliquam. Cras sit amet diam ut ante venenatis blandit suscipit sed tortor

Code:
[nobr]
[font=Archivo Black][div=display:none;].[/div][/font]
[class=fyuri10wrapper]
width:400px;
height:600px;
margin:auto;
background-color:#fff;
overflow:hidden;
-webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.37);
-moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.37);
box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.37);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
[/class]

[class=fyuri10whitecircle]
position:relative;
z-index:1;
width:550px;
height:550px;
top:-350px;
left:-75px;
background-color:#ad6af3;

border-radius:50%;
[/class]

[class=fyuri10purplecircle]
position:absolute;
z-index:2;
top:130px;
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
width:400px;
height:400px;
background-color:#fff;
border-radius:50%;
[/class]

[class=fyuri10imagecircle]
position:relative;
top:235px;
width:150px;
height:150px;
background: url('http://via.placeholder.com/150x150') no-repeat center center;
margin:auto;
border-radius:50%;
color:transparent;
-webkit-box-shadow: 0px 0px 10px 5px rgba(173,106,243,1);
-moz-box-shadow: 0px 0px 10px 5px rgba(173,106,243,1);
box-shadow: 0px 0px 10px 5px rgba(173,106,243,1);
[/class]

[class=fyuri10text]
position:relative;
z-index:0;
top:-435px;
width:400px;
height:485px;
margin:auto;
color:#313131;
[/class]

[class=fyuri10parent]
width:100%;
height:485px;

background-color:#ccc;
overflow:hidden;
[/class]

[class=fyuri10child]
width:100%;
height:390px;
padding:90px 17px 5px 5px;
background-color:#fff;
overflow:auto;
text-align:justify;
[/class]

[class=fyuri10header]
display:inline;
font-family:'Archivo Black', Verdana, Arial;
font-size:30px;
color:#ad6af3;
[/class]

[class=fyuri10textarea]
width:390px;
margin:auto;
color:#313131;
[/class]

[class=fyuri10purplebox]
width:380px;
margin:auto;
background-color:#ad6af3;
padding:5px;
color:#fff;
[/class]

[class=fyuricredit]
width:400px;
margin:auto;
opacity:0.3;
font-size:10px;
[/class]
[/nobr]
[div=padding:10px 0px 10px 0px;][div class=fyuri10wrapper][div class=fyuri10whitecircle][div class=fyuri10purplecircle][div class=fyuri10imagecircle][/div][/div][/div][div class=fyuri10text][div class=fyuri10parent][div class=fyuri10child][div class=fyuri10textarea][div class=fyuri10header]Header[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis est quis leo euismod rutrum. Vivamus vitae sagittis turpis. Praesent tristique augue sit amet augue suscipit, id volutpat lectus tristique. Etiam nec ex lorem. Integer bibendum lacus ut lorem tempor, at viverra erat venenatis. Aenean ornare libero massa, sed commodo lorem blandit et. In hac habitasse platea dictumst. Vivamus scelerisque eros ac purus ornare interdum. Sed ut consectetur sem. Sed ac tincidunt quam. Proin felis massa, elementum et ligula eget, congue faucibus urna. Integer pellentesque malesuada leo dignissim pharetra. Fusce fringilla, nunc vel euismod vestibulum, ex quam vulputate mi, a venenatis mauris urna a purus. Pellentesque cursus tempor orci sed auctor. Donec viverra at ante vel dapibus.

[div class=fyuri10header]Header[/div]
[div class=fyuri10purplebox]Pellentesque luctus dictum nisl, et vulputate lacus egestas vulputate. Suspendisse potenti. In consectetur suscipit turpis, nec fermentum augue pulvinar et. Sed tempor, massa et semper finibus, sapien lectus condimentum diam, sit amet commodo ligula arcu vel lacus. Proin in interdum magna, ac fermentum quam. Maecenas vel sagittis urna, id iaculis leo. Cras gravida interdum turpis. Donec arcu odio, feugiat sit amet tortor id, vehicula semper ex. Donec tincidunt metus id augue tempor, vel auctor ex tincidunt. Praesent tincidunt, nisi vitae interdum porta, velit ante facilisis urna, sit amet venenatis metus sem in lectus. Aenean ut ligula sit amet urna maximus hendrerit vel pulvinar mi. Vestibulum quis urna diam. Nulla nibh leo, lobortis at nisl et, mollis convallis nisi. Maecenas quis eleifend tellus.[/div]

Nulla eu interdum leo. Pellentesque venenatis ornare lacus, a tempor nisl eleifend non. Vestibulum sit amet porttitor massa. Donec eu aliquet lorem. Curabitur bibendum congue ultricies. Donec feugiat luctus lacus, a venenatis erat aliquet ac. Sed a auctor nisl. Phasellus venenatis eu nisi ac consectetur. Donec sed dolor nec mi aliquet faucibus sed at metus. Suspendisse potenti. Aenean quis fringilla odio. Pellentesque interdum diam vel neque vestibulum, vel dignissim eros rutrum.

Ut convallis fermentum accumsan. Integer tempor viverra massa, eget dapibus sapien pharetra in. Sed eu aliquet felis. Mauris mattis, felis et sodales blandit, arcu mauris vestibulum nibh, et lobortis metus lectus non enim. Mauris lorem orci, ornare consectetur leo sed, convallis malesuada metus. Donec ligula libero, vehicula id lacus a, tempor cursus ipsum. Praesent mattis turpis elit, elementum volutpat ante ornare sit amet. Suspendisse quam leo, egestas vitae luctus et, convallis sed risus. Integer et scelerisque est, vitae dignissim sapien. Vestibulum fringilla, mi et laoreet feugiat, nisl nunc tincidunt sem, sit amet dictum metus turpis venenatis purus. Nunc bibendum convallis odio sed tincidunt. Praesent nisi purus, tincidunt non metus non, dapibus sollicitudin turpis. Ut congue non ex a aliquam. Cras sit amet diam ut ante venenatis blandit suscipit sed tortor[/div][/div][/div][/div][/div][/div][div class=fyuricredit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-8684848]code[/url] by [USER=39545]@Fyuri[/USER][/div][comment]do not alter/remove credit. code by @fyuri[/comment]
 

Fyuri

積ん読
Administrator
Supporter
#10
I decided to make a more modern version of the Mail BBCode found in the BBCode Guide. You can easily change the colors of the code to what you want, just change the background, border, and font colors. :3 The send button has a simple hover effect.
Mobile Friendly: Yes
Note(s): Size will adjust to text.
Free To Use? Yes
Div Classes:
  • [div class=subject]Message Subject[/div] - Message subject
  • [div class=recipient]Recipient Name[/div] - Recipient Name
  • [div class=sender]Sender Name[/div] - Sender Name
  • [div class=message]Text[div] - Mail message
  • [div class=sendbutton]send[/div] - Send button, can easily change the text to reply

Message Subject
Recipient Name
Sender Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat ullamcorper metus vitae dapibus. Sed consectetur lectus posuere tellus aliquam dictum. Aenean id lorem at justo vehicula porttitor id a magna. Donec ornare lorem elit, quis vulputate elit mollis sed. Aenean accumsan mollis vehicula. Etiam ac ultrices libero. Donec consectetur nibh et ipsum dapibus, eu dapibus nisl imperdiet. Nulla in est nec massa mattis tristique. Suspendisse in interdum arcu. Nullam ipsum magna, pharetra ac leo malesuada, ultrices interdum felis.

Mauris sed placerat urna. Sed eget lectus quis turpis vehicula gravida. Suspendisse nec eros ac enim accumsan commodo sed quis orci. Phasellus posuere fringilla mauris. Nunc eu augue nec tellus vestibulum volutpat. Phasellus at varius velit. Pellentesque iaculis massa orci, ut ornare dolor posuere non. Donec condimentum, velit luctus lacinia aliquam, erat lectus viverra nulla, vitae elementum nisl odio vel ligula. Pellentesque sodales vitae purus at fringilla.

Fusce in urna elementum, pretium magna at, laoreet quam. Nam nec erat ultrices, vehicula magna eget, euismod nisi. Aliquam sit amet massa id lorem pharetra consectetur. Curabitur vulputate urna quam, eu laoreet purus fermentum nec. Etiam consequat feugiat sapien, nec interdum sem dignissim at. Suspendisse iaculis mollis est, porttitor malesuada felis. Donec posuere mauris at tortor congue varius. Proin imperdiet purus blandit erat lacinia molestie. Mauris sed enim non eros tempor pretium quis at dui.
send

Code:
[nobr]
[class=fyuriwrapper]
max-width:85%;
min-height:400px;
margin:10px auto;
background:#fff;
border:1px solid rgba(2,110,130, 0.4);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
overflow:hidden;
color:#313131;
[/class]

[class=windowtop]
width:100%;
height:35px;
box-sizing:border-box;
background:#026E82;
text-align:right;
color:#fff;
padding:5px;
font-size:18px;
[/class]

[class=subject]
width:100%;
box-sizing:border-box;
background:#36D1ED;
border-bottom:1px solid rgba(2,110,130, 0.4);
padding:5px;
color:#313131;
[/class]

[class=recipient]
width:100%;
box-sizing:border-box;
background:#51E5FF;
border-bottom:1px solid rgba(2,110,130, 0.4);
padding:5px;
color:#313131;
[/class]

[class=sender]
width:100%;
box-sizing:border-box;
background:#A5F1FF;
border-bottom:1px solid rgba(2,110,130, 0.4);
padding:5px;
color:#313131;
[/class]

[class=message]
width:100%;
box-sizing:border-box;
background:#fff;
border-bottom:1px solid rgba(2,110,130, 0.4);
padding:5px;
color:#313131;
[/class]

[class=bottom]
padding:15px 0px 15px 0px;
[/class]

[class name=sendbutton]
display:inline;
box-sizing:border-box;
background:#026E82;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
margin:5px;
padding:5px 7px 5px 7px;
color:#fff;
[/class]

[class name=sendbutton state=hover]
background:#36D1ED;
-webkit-box-shadow: 1px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 1px 2px 5px 0px rgba(0,0,0,0.5);
cursor: pointer;
[/class]

[class=fyuricredit]
max-width:85%;
margin:auto;
opacity:0.3;
font-size:10px;
[/class]
[/nobr]
[div class=fyuriwrapper][div class=windowtop][fa]fa-window-minimize[/fa] [fa]fa-window-maximize[/fa] [fa]fa-window-close-o[/fa][/div][div class=subject]Message Subject[/div][div class=recipient]Recipient Name[/div][div class=sender]Sender Name[/div][div class=message]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat ullamcorper metus vitae dapibus. Sed consectetur lectus posuere tellus aliquam dictum. Aenean id lorem at justo vehicula porttitor id a magna. Donec ornare lorem elit, quis vulputate elit mollis sed. Aenean accumsan mollis vehicula. Etiam ac ultrices libero. Donec consectetur nibh et ipsum dapibus, eu dapibus nisl imperdiet. Nulla in est nec massa mattis tristique. Suspendisse in interdum arcu. Nullam ipsum magna, pharetra ac leo malesuada, ultrices interdum felis.

Mauris sed placerat urna. Sed eget lectus quis turpis vehicula gravida. Suspendisse nec eros ac enim accumsan commodo sed quis orci. Phasellus posuere fringilla mauris. Nunc eu augue nec tellus vestibulum volutpat. Phasellus at varius velit. Pellentesque iaculis massa orci, ut ornare dolor posuere non. Donec condimentum, velit luctus lacinia aliquam, erat lectus viverra nulla, vitae elementum nisl odio vel ligula. Pellentesque sodales vitae purus at fringilla.

Fusce in urna elementum, pretium magna at, laoreet quam. Nam nec erat ultrices, vehicula magna eget, euismod nisi. Aliquam sit amet massa id lorem pharetra consectetur. Curabitur vulputate urna quam, eu laoreet purus fermentum nec. Etiam consequat feugiat sapien, nec interdum sem dignissim at. Suspendisse iaculis mollis est, porttitor malesuada felis. Donec posuere mauris at tortor congue varius. Proin imperdiet purus blandit erat lacinia molestie. Mauris sed enim non eros tempor pretium quis at dui.[/div][div class=bottom][div class=sendbutton]send[/div][/div][/div][div class=fyuricredit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-8721026]code[/url] by [USER=39545]@Fyuri[/USER][/div][comment]do not alter/remove credit. code by @fyuri[/div][/comment]
[./spoiler]
 

Fyuri

積ん読
Administrator
Supporter
#11
Another old code with small changes for a re-release. This was made to add a small menu bar at the top to be used for roleplay tabs before they returned; now it can be used in addition to give your RP a few more "tabs." Users can also use it as a spot for other things, like tagged players and such. The preview here doesn't do it justice, but the "banner menu" will rest right at the top of your post.
Mobile Friendly: Yes
Note(s): Dark themes will have a white line, light themes will have faint shadow.
Free To Use? Yes, with credit (which is hidden).
Div Classes & More
  • [div class=fyurifauxtabs]Header[/div] - Menu Area, put your links here.

Text | Menu | Text | Option | Text | Tagged | Text | Menu | Text | Option | Text | Tagged | Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare diam at vehicula tempus. Proin auctor est at metus ornare, eget varius felis viverra. Quisque leo lectus, iaculis nec libero vitae, consectetur mattis ipsum. Nulla maximus mauris lectus, ut rutrum magna ornare ac. Duis id imperdiet elit, sit amet scelerisque felis. Aenean lobortis pulvinar arcu quis pharetra. Donec suscipit tincidunt lobortis. Morbi interdum odio ac sem euismod, eu sodales velit tristique. Sed lacus ipsum, egestas eget tempus non, fringilla sed erat.

Morbi porta gravida aliquam. Morbi justo nisi, egestas ut semper congue, viverra a diam. Donec fringilla efficitur tristique. Suspendisse potenti. Etiam maximus erat nec lorem mattis, quis ornare ante condimentum. Duis metus ligula, iaculis eu mauris ultricies, mollis bibendum purus. In tempus turpis sit amet diam laoreet, nec tempus velit congue. Cras ut purus fringilla, dictum sem eget, porttitor magna. Nunc bibendum scelerisque malesuada. Curabitur eleifend feugiat posuere. Integer condimentum dolor at fermentum molestie.

In sed gravida augue. Praesent vel nunc vitae ipsum viverra faucibus. Praesent vel nisl id arcu dignissim condimentum et id nunc. Nulla non nisi vel odio luctus varius. Donec vulputate congue urna a ullamcorper. Sed vehicula arcu ut tristique rhoncus. Integer commodo libero vel elementum aliquam. In ut lacus ac ex blandit accumsan vel egestas mi. Nullam fermentum, mi non vehicula condimentum, arcu mauris semper augue, id semper nunc purus malesuada est. Nulla enim diam, venenatis nec tortor a, semper tempus ipsum. Vivamus aliquet volutpat massa nec ullamcorper. Ut et sem nec orci rutrum facilisis et vel eros. Nunc bibendum interdum quam eu gravida. Ut accumsan consequat lacus id tempor. Mauris interdum diam est, ut luctus nisi egestas id.

Aliquam erat volutpat. Ut ullamcorper rutrum tincidunt. Duis id purus luctus, aliquet lectus eget, placerat nulla. Donec eget scelerisque ex, a feugiat dui. Sed lorem metus, fringilla ac tempor non, fermentum ac orci. Suspendisse ut massa augue. Integer nec dolor condimentum, venenatis nunc et, faucibus mauris. Sed condimentum ultricies interdum. Phasellus turpis mi, congue non accumsan in, dapibus id dui. Phasellus et turpis vel felis rhoncus egestas ut eget sem. Proin auctor elementum nunc egestas iaculis. Fusce ornare a leo pulvinar vehicula.

Nunc ullamcorper nec turpis eget pretium. Cras ullamcorper rhoncus felis sit amet faucibus. Donec volutpat venenatis felis at elementum. Curabitur vitae auctor quam, quis pulvinar massa. Mauris in mollis magna. Nunc fermentum, ligula condimentum vulputate iaculis, augue ex feugiat est, ut mattis lectus odio ullamcorper augue. Sed sodales quam vitae maximus sollicitudin. Ut lacinia orci eros, in posuere nisl iaculis quis. Nam a quam auctor, dictum enim vitae, porttitor orci.


Code:
[div class=fyurifauxtabs][font=PT Sans]Text | Menu | Text | Option | Text | Tagged | Text | Menu | Text | Option | Text | Tagged | Text[/font][/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare diam at vehicula tempus. Proin auctor est at metus ornare, eget varius felis viverra. Quisque leo lectus, iaculis nec libero vitae, consectetur mattis ipsum. Nulla maximus mauris lectus, ut rutrum magna ornare ac. Duis id imperdiet elit, sit amet scelerisque felis. Aenean lobortis pulvinar arcu quis pharetra. Donec suscipit tincidunt lobortis. Morbi interdum odio ac sem euismod, eu sodales velit tristique. Sed lacus ipsum, egestas eget tempus non, fringilla sed erat.

Morbi porta gravida aliquam. Morbi justo nisi, egestas ut semper congue, viverra a diam. Donec fringilla efficitur tristique. Suspendisse potenti. Etiam maximus erat nec lorem mattis, quis ornare ante condimentum. Duis metus ligula, iaculis eu mauris ultricies, mollis bibendum purus. In tempus turpis sit amet diam laoreet, nec tempus velit congue. Cras ut purus fringilla, dictum sem eget, porttitor magna. Nunc bibendum scelerisque malesuada. Curabitur eleifend feugiat posuere. Integer condimentum dolor at fermentum molestie.

In sed gravida augue. Praesent vel nunc vitae ipsum viverra faucibus. Praesent vel nisl id arcu dignissim condimentum et id nunc. Nulla non nisi vel odio luctus varius. Donec vulputate congue urna a ullamcorper. Sed vehicula arcu ut tristique rhoncus. Integer commodo libero vel elementum aliquam. In ut lacus ac ex blandit accumsan vel egestas mi. Nullam fermentum, mi non vehicula condimentum, arcu mauris semper augue, id semper nunc purus malesuada est. Nulla enim diam, venenatis nec tortor a, semper tempus ipsum. Vivamus aliquet volutpat massa nec ullamcorper. Ut et sem nec orci rutrum facilisis et vel eros. Nunc bibendum interdum quam eu gravida. Ut accumsan consequat lacus id tempor. Mauris interdum diam est, ut luctus nisi egestas id.

Aliquam erat volutpat. Ut ullamcorper rutrum tincidunt. Duis id purus luctus, aliquet lectus eget, placerat nulla. Donec eget scelerisque ex, a feugiat dui. Sed lorem metus, fringilla ac tempor non, fermentum ac orci. Suspendisse ut massa augue. Integer nec dolor condimentum, venenatis nunc et, faucibus mauris. Sed condimentum ultricies interdum. Phasellus turpis mi, congue non accumsan in, dapibus id dui. Phasellus et turpis vel felis rhoncus egestas ut eget sem. Proin auctor elementum nunc egestas iaculis. Fusce ornare a leo pulvinar vehicula.

Nunc ullamcorper nec turpis eget pretium. Cras ullamcorper rhoncus felis sit amet faucibus. Donec volutpat venenatis felis at elementum. Curabitur vitae auctor quam, quis pulvinar massa. Mauris in mollis magna. Nunc fermentum, ligula condimentum vulputate iaculis, augue ex feugiat est, ut mattis lectus odio ullamcorper augue. Sed sodales quam vitae maximus sollicitudin. Ut lacinia orci eros, in posuere nisl iaculis quis. Nam a quam auctor, dictum enim vitae, porttitor orci.
[nobr]
[class=fyurifauxtabs]
width:100%;
text-align:center;
background:none;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
border-bottom:1px solid #fff;
[/class]
[/nobr]
[comment]code by [USER=39545]@Fyuri[/USER] .  Do not remove or alter this credit.[/comment]
 

Fyuri

積ん読
Administrator
Supporter
#12
A dark themed code based on a dark UI I found on Pinterest. You can look into changing the gradient color yourself if you want.
Mobile Friendly: Yes
Note(s): Looks best on normal browsers.
Free To Use? Yes.
Div Classes & More
  • [div class=headermain]Header Here[/div] - Main, central header.
    [div class=txtheader]Header[/div] - Sub header.
    [div class=text]Header Here[/div] - Text area.


Header Here

header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non nulla nisi. Donec gravida suscipit sapien vel ullamcorper. Nulla hendrerit lacus non pulvinar egestas. Phasellus porttitor massa sit amet erat semper, et molestie nisl rhoncus. Duis feugiat ullamcorper eros, eget molestie sem rhoncus id. Suspendisse lobortis eu urna sit amet mollis. Pellentesque placerat, ipsum lacinia venenatis laoreet, urna nulla volutpat justo, vel dignissim arcu elit id eros. Duis viverra ultrices ultricies. Nam ut auctor tellus. Cras id eros nec orci euismod tincidunt ornare a odio. Suspendisse imperdiet metus quis nulla gravida mollis. Mauris eget justo euismod, dapibus dui id, aliquam nulla. Etiam faucibus convallis turpis nec venenatis. Proin id sollicitudin nulla. Etiam urna ligula, commodo vitae dolor id, suscipit tempor urna.

Aliquam id gravida nisi. Ut in sem vitae sem fermentum consequat. Vestibulum id erat in ipsum feugiat faucibus ac quis magna. Vestibulum dignissim porttitor dui, id ultrices leo tempus a. Donec malesuada euismod sagittis. Aliquam ac faucibus ex, a mollis quam. Nullam ligula nisi, gravida a nisl non, imperdiet interdum metus.

Suspendisse et odio neque. Donec id ornare enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nec sem id est tristique lobortis. Donec lacus turpis, auctor non finibus in, finibus at augue. Aenean at lacinia ex. Nunc augue lectus, elementum vel laoreet ac, facilisis id eros.

Donec eu enim maximus, imperdiet purus non, congue purus. Aenean consequat, nisl eget suscipit pulvinar, lacus est dictum leo, eu facilisis neque felis ut tellus. Pellentesque non turpis non risus congue fringilla. Etiam iaculis, mauris eget ullamcorper tempor, lacus odio mollis dolor, non faucibus ligula velit quis arcu. Praesent fermentum blandit massa ac aliquam. Integer fringilla mauris arcu, in iaculis libero pretium vel. Fusce rutrum finibus erat, et efficitur ante lacinia vel. Etiam porttitor rutrum nisl. Vivamus vitae nunc in purus facilisis efficitur. Nulla nec varius lorem, eget cursus ante. Etiam hendrerit, orci ut auctor pulvinar, urna tortor aliquet tellus, quis molestie lectus nisl ac turpis. Suspendisse id gravida ipsum, in sollicitudin nibh.

Vivamus vel lobortis tellus. Sed porttitor at neque vitae consectetur. Morbi convallis maximus lorem, a placerat mi euismod quis. Proin ullamcorper dui ut lorem luctus, a auctor odio mattis. Morbi id condimentum ipsum, nec ultrices metus. Duis vestibulum elit eget faucibus sagittis. Aenean facilisis lorem leo, vel auctor sem aliquet at. Morbi vel tortor in justo sollicitudin dignissim. Sed libero velit, dignissim a feugiat quis, consequat non est. Suspendisse semper diam non est euismod ultricies.


.

Code:
[div class=fyurimain][div class=gradient][/div]
[div class=headermain]Header Here[/div]
[div class=text][div class=txtheader]header[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non nulla nisi. Donec gravida suscipit sapien vel ullamcorper. Nulla hendrerit lacus non pulvinar egestas. Phasellus porttitor massa sit amet erat semper, et molestie nisl rhoncus. Duis feugiat ullamcorper eros, eget molestie sem rhoncus id. Suspendisse lobortis eu urna sit amet mollis. Pellentesque placerat, ipsum lacinia venenatis laoreet, urna nulla volutpat justo, vel dignissim arcu elit id eros. Duis viverra ultrices ultricies. Nam ut auctor tellus. Cras id eros nec orci euismod tincidunt ornare a odio. Suspendisse imperdiet metus quis nulla gravida mollis. Mauris eget justo euismod, dapibus dui id, aliquam nulla. Etiam faucibus convallis turpis nec venenatis. Proin id sollicitudin nulla. Etiam urna ligula, commodo vitae dolor id, suscipit tempor urna.

Aliquam id gravida nisi. Ut in sem vitae sem fermentum consequat. Vestibulum id erat in ipsum feugiat faucibus ac quis magna. Vestibulum dignissim porttitor dui, id ultrices leo tempus a. Donec malesuada euismod sagittis. Aliquam ac faucibus ex, a mollis quam. Nullam ligula nisi, gravida a nisl non, imperdiet interdum metus.

Suspendisse et odio neque. Donec id ornare enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nec sem id est tristique lobortis. Donec lacus turpis, auctor non finibus in, finibus at augue. Aenean at lacinia ex. Nunc augue lectus, elementum vel laoreet ac, facilisis id eros.

Donec eu enim maximus, imperdiet purus non, congue purus. Aenean consequat, nisl eget suscipit pulvinar, lacus est dictum leo, eu facilisis neque felis ut tellus. Pellentesque non turpis non risus congue fringilla. Etiam iaculis, mauris eget ullamcorper tempor, lacus odio mollis dolor, non faucibus ligula velit quis arcu. Praesent fermentum blandit massa ac aliquam. Integer fringilla mauris arcu, in iaculis libero pretium vel. Fusce rutrum finibus erat, et efficitur ante lacinia vel. Etiam porttitor rutrum nisl. Vivamus vitae nunc in purus facilisis efficitur. Nulla nec varius lorem, eget cursus ante. Etiam hendrerit, orci ut auctor pulvinar, urna tortor aliquet tellus, quis molestie lectus nisl ac turpis. Suspendisse id gravida ipsum, in sollicitudin nibh.

Vivamus vel lobortis tellus. Sed porttitor at neque vitae consectetur. Morbi convallis maximus lorem, a placerat mi euismod quis. Proin ullamcorper dui ut lorem luctus, a auctor odio mattis. Morbi id condimentum ipsum, nec ultrices metus. Duis vestibulum elit eget faucibus sagittis. Aenean facilisis lorem leo, vel auctor sem aliquet at. Morbi vel tortor in justo sollicitudin dignissim. Sed libero velit, dignissim a feugiat quis, consequat non est. Suspendisse semper diam non est euismod ultricies.[/div]
[/div][div class=fyuricredit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-8866162]code[/url] by [USER=39545]@Fyuri[/USER][/div][comment]do not alter/remove credit. code by @fyuri[/comment]
[font=Bungee][div=display:none;].[/div][/font]
[nobr]
[class=fyurimain]
position: relative;
width:100%;
background:#252525;
box-sizing:border-box;
padding:0px 50px 0px 50px;
[/class]

[class=gradient]
position:absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
z-index:5;
height: auto;
min-height: 100% !important;
width:200px;
background: rgb(135,224,253); 
background: -moz-linear-gradient(top, rgba(135,224,253,1) 0%, rgba(81,186,172,1) 100%); 
background: -webkit-linear-gradient(top, rgba(135,224,253,1) 0%,rgba(81,186,172,1) 100%); 
background: linear-gradient(to bottom, rgba(135,224,253,1) 0%,rgba(81,186,172,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#51baac',GradientType=0 );
[/class]

[class=headermain]
position:relative;
z-index:10;
top:100px;
font-family:'Bungee', Impact;
text-align:center;
font-size: 2.5rem;
text-shadow: 2px 2px 5px #000000;
color:#fff;
[/class]

[class=text] 
position:relative;
z-index:10;
width:100%;
box-sizing:border-box;
margin-top:100px;
margin-bottom:100px;
background:rgba(0,0,0, 0.5);
color:#fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:justify;
padding:5px;
[/class]

[class=txtheader]
width: calc(100% + 10px);
margin:-5px;
box-sizing:border-box;
background:#000;
font-size:20px;
font-family:'Bungee', Impact;
padding:5px;
[/class]

[class=fyuricredit]
opacity:0.3;
font-size:11px;
[/class]
[/nobr]
 

Fyuri

積ん読
Administrator
Supporter
#13
Another character hover post. Remember to be careful with the dimensions of your image and you always can change the colors to fit your theme better.
Mobile Friendly: Yes
Note: Hidden scoll.
Free To Use? Yes, with credit.
Div Classes & More
  • [div class=name]Character Name[/div] - Character's Name
  • [div class=img][img]http://via.placeholder.com/330x500[/img] - Your Image, best dimensions 300x500.
  • background:#da1445; - color of the bg for character name/hover divs.
  • background:rgba(155,155,161, 1.0); - color for text area on hover
.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida, justo a blandit placerat, libero ligula laoreet nulla, vel laoreet elit dolor ac nibh. Donec vel justo eu ipsum porttitor faucibus sed at dolor. Integer congue cursus nulla, in convallis nisi tincidunt eget. Nullam hendrerit ornare nisi, id ultrices odio luctus ac. Ut varius sagittis magna, non tincidunt orci dignissim et. Integer malesuada libero et neque commodo commodo. Nam at urna quam. Nulla et volutpat nisl. Pellentesque sed fermentum massa. Quisque tempus maximus metus, vitae varius purus varius id. Vivamus et quam euismod, fermentum tellus a, pharetra lectus.

Nam egestas mi a quam varius fermentum. Fusce sit amet metus erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id orci nunc. Aliquam erat volutpat. Fusce consequat hendrerit mauris. In sem massa, suscipit eu ullamcorper ut, vehicula quis eros. Mauris quam tortor, elementum vitae lorem quis, aliquet cursus velit. Integer gravida quis nisi sit amet mattis. Fusce ex metus, pretium eget libero ut, vulputate lobortis augue.
Character Name
[/img]
HOVER FOR MORE

Code:
[div=display:none;][font=Roboto Condensed].[/font][/div]
[nobr]
[class=fyuriwrapper]
position:relative;
[/class]

[class=card]
position:relative;
z-index:0;
width:300px;
height:500px;
margin:auto;
background:#9b9ba1;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
text-align:center;
overflow:hidden;
[/class]

[class=img]
pointer-events:none;
[/class]

[class=name]
position:absolute;
top:20px;
left:0;
z-index:1;
width:100%;
box-sizing:border-box;
background:#da1445;
padding:5px;
color:#fff;
font-family:'Roboto Condensed';
[/class]

[class=hver]
position: absolute;
bottom: 20px;
left: 0;
z-index:1;
width:100%;
box-sizing:border-box;
background:#da1445;
padding:5px;
color:#fff;
font-family:'Roboto Condensed';
font-size:10px;
[/class]

[class name=cardinfo]
position:absolute;
top:0;
left:0;
z-index:2;
width:300px;
height:495px;
margin:auto;
box-sixing:border-box;
background:rgba(155,155,161, 0.0);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
overflow:auto;
text-align:justify;
transition: all 1s ease-out;
color:transparent;
padding:5px 10px; 5px 5px;
font-family:'Roboto Condensed';
[/class]

[class name=cardinfo state=hover]
position:absolute;
top:0;
left:0;
z-index:2;
width:300px;
height:495px;
margin:auto;
box-sixing:border-box;
background:rgba(155,155,161, 1.0);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
overflow:auto;
text-align:justify;
transition: all 1s ease-out;
color:#fff;
padding:5px 10px; 5px 5px;
font-family:'Roboto Condensed';
[/class]

[class=textparent]
width:280px;
height:495px;
[/class]

[class=textchild]
width:280px;
margin:auto;
padding-bottom:5px;
[/class]

[class=fyuricredit]
width:300px;
margin:auto;
opacity:0.3;
font-size:11px;
[/class]
[/nobr]
[div class=card][div class=cardinfo][div class=textparent][div class=textchild]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida, justo a blandit placerat, libero ligula laoreet nulla, vel laoreet elit dolor ac nibh. Donec vel justo eu ipsum porttitor faucibus sed at dolor. Integer congue cursus nulla, in convallis nisi tincidunt eget. Nullam hendrerit ornare nisi, id ultrices odio luctus ac. Ut varius sagittis magna, non tincidunt orci dignissim et. Integer malesuada libero et neque commodo commodo. Nam at urna quam. Nulla et volutpat nisl. Pellentesque sed fermentum massa. Quisque tempus maximus metus, vitae varius purus varius id. Vivamus et quam euismod, fermentum tellus a, pharetra lectus.

Nam egestas mi a quam varius fermentum. Fusce sit amet metus erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id orci nunc. Aliquam erat volutpat. Fusce consequat hendrerit mauris. In sem massa, suscipit eu ullamcorper ut, vehicula quis eros. Mauris quam tortor, elementum vitae lorem quis, aliquet cursus velit. Integer gravida quis nisi sit amet mattis. Fusce ex metus, pretium eget libero ut, vulputate lobortis augue.[/div][/div][/div][div class=name]Character Name[/div][div class=img][img]http://via.placeholder.com/330x500[/img][/img][/div][div class=hver]HOVER FOR MORE[/div][/div][div class=fyuricredit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-8899447]code[/url] by [USER=39545]@Fyuri[/USER][/div][comment]do not  alter/remove credit. code by @fyuri[/comment]
 

Fyuri

積ん読
Administrator
Supporter
#14
A simple cyberpunk-themed code. Nothing super special and it's just been sitting around in my PWS unused.
Mobile Friendly: Yes
Note: Auto Columns, best view on desktop
Free To Use? Yes, with credit.
Div Classes & More
  • [div class=header]Cyberpunk Title[/div] - Header
  • color:#ba1782; - Main header font colorr
.

.

Cyberpunk Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum tortor vitae tempus vestibulum. Aenean luctus est et arcu blandit condimentum. Curabitur blandit at quam ac consequat. Fusce ligula purus, dignissim vitae facilisis sit amet, volutpat rutrum nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed facilisis, quam ac cursus varius, ante lectus tempus nulla, fringilla lacinia quam nulla quis lacus. Integer aliquam ex nisl, eu maximus ex porta a. Proin egestas quam ut leo porta lobortis.

Curabitur a purus nisi. Etiam ullamcorper faucibus pellentesque. Etiam iaculis justo sem, a facilisis metus lacinia in. Praesent vulputate justo vel sapien mattis, imperdiet ornare urna iaculis. Sed lacinia magna massa. Fusce nec magna in urna tempor tristique. Mauris non risus eros. Nam tellus lacus, pretium eu placerat sed, rhoncus vitae libero. Cras tincidunt commodo elementum. Maecenas et felis id lacus efficitur euismod ut laoreet enim. In hac habitasse platea dictumst. Sed enim lacus, feugiat ut massa eget, sodales ultrices nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer dictum tellus eget nisi condimentum dignissim. Vivamus ac arcu ac velit volutpat commodo.
Sed suscipit sem nibh, et congue tellus accumsan quis. Nam egestas lectus in ex rhoncus sagittis. Nulla erat lorem, elementum eget neque dictum, aliquet accumsan nulla. Proin ante eros, euismod consectetur dapibus in, scelerisque sed metus. Sed vulputate metus eget tortor commodo volutpat at ut ligula. Morbi nec enim accumsan, finibus turpis feugiat, suscipit elit. Fusce ante lectus, pulvinar nec posuere ac, ultrices sit amet enim. Pellentesque tempor est sit amet libero luctus malesuada.

Phasellus tempor purus non ultricies lacinia. Integer ornare, nibh quis lobortis porttitor, massa quam eleifend dui, non euismod nisl mauris sit amet sapien. Nullam massa lacus, consectetur non sem nec, tincidunt egestas neque. Morbi a enim sem. Donec bibendum ac urna sit amet sollicitudin. Donec ultrices non nisi dapibus condimentum. Nunc varius a ex in convallis. Donec sit amet gravida tortor, non sodales nisl. Duis luctus vulputate lorem et fringilla. Duis at pulvinar massa. Nunc tincidunt pulvinar dolor, id placerat nulla posuere a. Cras orci augue, vehicula id erat ac, aliquam sagittis eros. Mauris vel tempus nulla. Maecenas ut nunc ipsum. Nam porta nulla vel mi mollis lobortis. In vel egestas nibh.


Code:
[nobr]
[font=Lilita One][div=display:none].[/div][/font]
[class=fyuriwrapper]
max-width:700px;
min-height:500px;
margin:auto;
background:transparent;
[/class]

[class=imageheader]
height:175px;
overflow:hidden;
background:url('https://i.imgur.com/SWccAsx.jpg') no-repeat center center;
background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
[/class]

[class=header]
font-family:'Lilita One', Impact, Verdana;
font-size:50px;
color:#ba1782;
text-shadow: 1px 1px 0px #FF55DD;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: rgba(255,255,255, 0.3);
[/class]

[class=box1]
display:inline-block;
vertical-align:top;
max-width:345px;
min-width:300px;
box-sizing: border-box;
margin-right:5px;
padding:5px;
text-align:justify;
font-size:13px;
[/class]

[class=box2]
display:inline-block;
vertical-align:top;
max-width:345px;
min-width:300px;
box-sizing: border-box;
margin-left:5px;
padding:5px;
text-align:justify;
font-size:13px;
[/class]

[class=fyuricredit]
max-width:700px;
margin:auto;
opacity:0.3;
font-size:10px;
[/class]
[/nobr]
[div class=fyuriwrapper][div class=imageheader][div class=header]Cyberpunk Title[/div][/div][div class=box1]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum tortor vitae tempus vestibulum. Aenean luctus est et arcu blandit condimentum. Curabitur blandit at quam ac consequat. Fusce ligula purus, dignissim vitae facilisis sit amet, volutpat rutrum nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed facilisis, quam ac cursus varius, ante lectus tempus nulla, fringilla lacinia quam nulla quis lacus. Integer aliquam ex nisl, eu maximus ex porta a. Proin egestas quam ut leo porta lobortis.

Curabitur a purus nisi. Etiam ullamcorper faucibus pellentesque. Etiam iaculis justo sem, a facilisis metus lacinia in. Praesent vulputate justo vel sapien mattis, imperdiet ornare urna iaculis. Sed lacinia magna massa. Fusce nec magna in urna tempor tristique. Mauris non risus eros. Nam tellus lacus, pretium eu placerat sed, rhoncus vitae libero. Cras tincidunt commodo elementum. Maecenas et felis id lacus efficitur euismod ut laoreet enim. In hac habitasse platea dictumst. Sed enim lacus, feugiat ut massa eget, sodales ultrices nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer dictum tellus eget nisi condimentum dignissim. Vivamus ac arcu ac velit volutpat commodo.[/div][div class=box2]Sed suscipit sem nibh, et congue tellus accumsan quis. Nam egestas lectus in ex rhoncus sagittis. Nulla erat lorem, elementum eget neque dictum, aliquet accumsan nulla. Proin ante eros, euismod consectetur dapibus in, scelerisque sed metus. Sed vulputate metus eget tortor commodo volutpat at ut ligula. Morbi nec enim accumsan, finibus turpis feugiat, suscipit elit. Fusce ante lectus, pulvinar nec posuere ac, ultrices sit amet enim. Pellentesque tempor est sit amet libero luctus malesuada.

Phasellus tempor purus non ultricies lacinia. Integer ornare, nibh quis lobortis porttitor, massa quam eleifend dui, non euismod nisl mauris sit amet sapien. Nullam massa lacus, consectetur non sem nec, tincidunt egestas neque. Morbi a enim sem. Donec bibendum ac urna sit amet sollicitudin. Donec ultrices non nisi dapibus condimentum. Nunc varius a ex in convallis. Donec sit amet gravida tortor, non sodales nisl. Duis luctus vulputate lorem et fringilla. Duis at pulvinar massa. Nunc tincidunt pulvinar dolor, id placerat nulla posuere a. Cras orci augue, vehicula id erat ac, aliquam sagittis eros. Mauris vel tempus nulla. Maecenas ut nunc ipsum. Nam porta nulla vel mi mollis lobortis. In vel egestas nibh.[/div][/div][div class=fyuricredit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-9236250]code/design[/url] by [USER=39545]@Fyuri[/USER][/div][comment]do not remove/alter credit[/comment]
 

Fyuri

積ん読
Administrator
Supporter
#15
This is just a fun generator I created based off @Lyro's name generator code, so most of the code was really his and I just had some fun. This is an O-mikuji Fortune Generator which will give you a random fortune. You also cannot spam click it. ;3

I'm not providing the code because you can get it here from the original source.



O-mikuji Fortune Lottery





.
 

Fyuri

積ん読
Administrator
Supporter
#16
Okay there is seriously nothing special about this code. I took the basic accordion bbcode and stylized it a bit and put in a YT in each accordion 'tab' for different songs. Currently this version of this faux playlist doesn't have a hidden scroll. I'll be working on that version on a later date.

Bonus; you can still listen to the music even if you close the accordion if the video is still playing. Best to not play all the songs at once though!
Sayuri - Mikazuki
ONE OK ROCK - The Beginning
Nothing More - Still in Love
code by @Fyuri
.


Code:
[div=visibility: hidden;max-width:600px;margin:auto;][border=0px][accordion=100%]
{slide=[div=font-family:'Karla';text-align:center;font-size:12px;visibility: visible;color:#000;font-variant:normal;background: rgba(134, 160, 212, 1.0);
background: -webkit-linear-gradient(top left, rgba(134, 160, 212, 1.0), rgba(197, 243, 187, 1.0));
background: -moz-linear-gradient(top left, rgba(134, 160, 212, 1.0), rgba(197, 243, 187, 1.0));
background: linear-gradient(top left, rgba(134, 160, 212, 1.0), rgba(197, 243, 187, 1.0));][bg=transparent][fa]fa-music[/fa] [fa]fa-play-circle[/fa] Sayuri - Mikazuki[/bg][/div]}[div=visibility: visible;margin:-3px 0px -2px 0px;][center][MEDIA=youtube]65BAeDpwzGY[/MEDIA][/center]
 [/div]{/slide}
{slide=[div=font-family:'Karla';text-align:center;font-size:12px;visibility: visible;color:#000;font-variant:normal;background: rgba(134, 160, 212, 1.0);
background: -webkit-linear-gradient(top left, rgba(134, 160, 212, 1.0), rgba(197, 243, 187, 1.0));
background: -moz-linear-gradient(top left, rgba(134, 160, 212, 1.0), rgba(197, 243, 187, 1.0));
background: linear-gradient(top left, rgba(134, 160, 212, 1.0), rgba(197, 243, 187, 1.0));][bg=transparent][fa]fa-music[/fa] [fa]fa-play-circle[/fa] ONE OK ROCK - The Beginning[/bg][/div]}[div=visibility: visible;margin:-3px 0px -2px 0px;][center]https://www.youtube.com/watch?v=Hh9yZWeTmVM[/center]
 [/div]{/slide}
{slide=[div=font-family:'Karla';text-align:center;font-size:12px;visibility: visible;color:#000;font-variant:normal;background: rgba(134, 160, 212, 1.0);
background: -webkit-linear-gradient(top left, rgba(134, 160, 212, 1.0), rgba(197, 243, 187, 1.0));
background: -moz-linear-gradient(top left, rgba(134, 160, 212, 1.0), rgba(197, 243, 187, 1.0));
background: linear-gradient(top left, rgba(134, 160, 212, 1.0), rgba(197, 243, 187, 1.0));][bg=transparent][fa]fa-music[/fa] [fa]fa-play-circle[/fa] Nothing More - Still in Love[/bg][/div]}[div=visibility: visible;margin:-3px 0px -2px 0px;][center]https://www.youtube.com/watch?v=CqbaKnUQvqA[/center]
 [/div]{/slide}[/accordion][/div][nobr]
[div=display:none;]code by @fyuri[/div]
[div=display:none;][font=Karla].[/font][/div]
[/nobr]
 

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

  • Top