• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Resource Some Random Stuff


.

.

.

.

.

.




.

.

.

.


.

.

.


.

.

.

.

.

.

.



Code: 
[div=height: 600px; position: relative; color: transparent;][div=position: absolute; top: 50%; left: 50%;]
[div=position: absolute; top: 0; left: 0; animation: fa-spin 3s linear infinite; width: 50px; height: 50px; background: grey; border-radius: 100%; box-shadow: 60px 0 0 0 green, -60px 0 0 0 green, 0 60px 0 0 green, 0 -60px 0 0 green;][div=position: absolute; top: 50px; left: 10px; animation: fa-spin 2s linear infinite reverse; width: 20px; height: 20px; border-radius: 100%; box-shadow: 150px 0 0 100px yellow, -150px 0 0 10px yellow, 0 150px 5px 0 yellow, 0 -150px 5px 0 yellow;].[/div][/div]
[div=position: absolute; top: 0; left: 0; animation: fa-spin 7s linear infinite; width: 50px; height: 50px; border-radius: 100%; box-shadow: 220px 0 0 0 orange, -220px 0 0 0 orange;].[/div]
[div=position: absolute; top: 0; left: 0; animation: fa-spin 7s linear infinite; width: 50px; height: 50px; border-radius: 100%; box-shadow: 220px 0 10px 0 orange, -220px 0 10px 0 orange;].[/div]
[div=position: absolute; top: 0; left: 0; animation: fa-spin 7s linear infinite; width: 50px; height: 50px; box-shadow: 0 220px 0 0 red, 0 -220px 0 0 red;].[/div]
[div=position: absolute; top: 0; left: 180px; transform-origin: -180px; animation: fa-spin 11s linear infinite reverse; width: 50px; height: 50px; border-radius: 100%;][div=position: absolute; top: 0; left: 0; animation: fa-spin 7s linear infinite reverse; width: 50px; height: 50px; border-radius: 100%; box-shadow: 0 10px 0 40px violet;].[/div][/div]
[div=animation: fa-spin 27s linear infinite; width: 20px; height: 20px; position: absolute; top: 200px; left: -10px; transform-origin: 50% -200px; background-color: blue; border-radius: 100%;][div=animation: fa-spin 17s linear infinite reverse; width: 20px; height: 20px; position: absolute; top: 50px; left: -10px; transform-origin: 50% -60px; border-radius: 100%;][div=animation: fa-spin 10s linear infinite reverse; width: 20px; height: 20px; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; border: 3px dashed cyan; border-radius: 100%;][div=animation: fa-spin 19s linear infinite reverse; width: 20px; height: 20px; position: absolute; top: 0; left: 0; border-radius: 100%; box-shadow: 0 -20px 0 -5px cyan, 20px 0 0 -5px cyan, 0 20px 0 -5px cyan, -20px 0 0 -5px cyan;].[/div][/div][/div][/div]
[/div][/div]

Code: 
[div=height: 800px; position: relative; background-color: black; color: transparent;][div=position: absolute; top: 50%; left: 50%;]
[div=animation: fa-spin 60s linear infinite; width: 70px; height: 70px; position: absolute; left: 0; top: 0; margin: -35px 0 0 -35px; background-color: #86deff; border-radius: 100%;
box-shadow:
0 -260px 0 -10px #e20508,
260px 0 0 -10px #4ac925,
0 260px 0 -10px #0714cd,
-260px 0 0 -10px #b535da,
0 -210px 0 -28px black,
0 -210px 0 -25px #e20508,
0 -185px 0 -28px black,
0 -185px 0 -25px #e20508,
0 -160px 0 -28px black,
0 -160px 0 -25px #e20508,
0 -135px 0 -28px black,
0 -135px 0 -25px #e20508,
0 -110px 0 -28px black,
0 -110px 0 -25px #e20508,
0 -85px 0 -28px black,
0 -85px 0 -25px #e20508,
0 -60px 0 -28px black,
0 -60px 0 -25px #e20508,
210px 0 0 -28px black,
210px 0 0 -25px #4ac925,
185px 0 0 -28px black,
185px 0 0 -25px #4ac925,
160px 0 0 -28px black,
160px 0 0 -25px #4ac925,
135px 0 0 -28px black,
135px 0 0 -25px #4ac925,
110px 0 0 -28px black,
110px 0 0 -25px #4ac925,
85px 0 0 -28px black,
85px 0 0 -25px #4ac925,
60px 0 0 -28px black,
60px 0 0 -25px #4ac925,
0 210px 0 -28px black,
0 210px 0 -25px #0714cd,
0 185px 0 -28px black,
0 185px 0 -25px #0714cd,
0 160px 0 -28px black,
0 160px 0 -25px #0714cd,
0 135px 0 -28px black,
0 135px 0 -25px #0714cd,
0 110px 0 -28px black,
0 110px 0 -25px #0714cd,
0 85px 0 -28px black,
0 85px 0 -25px #0714cd,
0 60px 0 -28px black,
0 60px 0 -25px #0714cd,
-210px 0 0 -28px black,
-210px 0 0 -25px #b535da,
-185px 0 0 -28px black,
-185px 0 0 -25px #b535da,
-160px 0 0 -28px black,
-160px 0 0 -25px #b535da,
-135px 0 0 -28px black,
-135px 0 0 -25px #b535da,
-110px 0 0 -28px black,
-110px 0 0 -25px #b535da,
-85px 0 0 -28px black,
-85px 0 0 -25px #b535da,
-60px 0 0 -28px black,
-60px 0 0 -25px #b535da;].[/div]
[div=animation: fa-spin 23s linear infinite; width: 20px; height: 20px; position: absolute; top: -65px; left: -10px; transform-origin: 50% 65px; background-color: gold; border-radius: 100%;][div=animation: fa-spin 13s linear infinite; width: 20px; height: 20px; position: absolute; top: 0; left: 0; border-radius: 100%; box-shadow: 0 17px 0 -5px gold;].[/div][/div]
[div=width: 620px; height: 620px; position: absolute; top: -320px; left: -320px; border: 10px double white; border-radius: 100%;].[/div]
[div=animation: fa-spin 117s linear infinite reverse; width: 20px; height: 20px; position: absolute; top: 345px; left: -10px; transform-origin: 50% -345px; background-color: purple; border-radius: 100%;][div=animation: fa-spin 19s linear infinite reverse; width: 20px; height: 20px; position: absolute; top: 0; left: 0; border-radius: 100%; box-shadow: 0 -17px 0 -5px purple;].[/div][/div]
[/div][/div]

Code: 
[div=height: 800px; position: relative; background-color: black; color: transparent;][div=position: absolute; top: 50%; left: 50%;]
[div=width: 72px; height: 72px; position: absolute; top: -36px; left: -36px; background: #ffc23c; border-radius: 100%;].[/div]
[div=animation: fa-spin 3s linear infinite; width: 6px; height: 6px; position: absolute; top: -3px; left: 45px; background: #5f5f5f; transform-origin: -45px 50%; border-radius: 100%;].[/div]
[div=animation: fa-spin 8s linear -2s infinite; width: 12px; height: 12px; position: absolute; top: -6px; left: 54px; background: #b06718; transform-origin: -54px 50%; border-radius: 100%;].[/div]
[div=animation: fa-spin 13s linear -10s infinite; width: 12px; height: 12px; position: absolute; top: -6px; left: 78px; background: #424980; transform-origin: -78px 50%; border-radius: 100%;]
[div=animation: fa-spin 0.9s linear infinite; width: 2px; height: 2px; position: absolute; top: 5px; left: 15px; background: white; transform-origin: -9px 50%; border-radius: 100%;].[/div][/div]
[div=animation: fa-spin 24s linear -8s infinite; width: 8px; height: 8px; position: absolute; top: -4px; left: 104px; background: #a86751; transform-origin: -104px 50%; border-radius: 100%;].[/div]
[div=animation: fa-spin 148s linear -100s infinite; width: 36px; height: 36px; position: absolute; top: -18px; left: 132px; background: #b5a38d; transform-origin: -132px 50%; border-radius: 100%;].[/div]
[div=animation: fa-spin 368s linear -60s infinite; width: 36px; height: 36px; position: absolute; top: -18px; left: 207px; background: #dca447; transform-origin: -207px 50%; border-radius: 100%; box-shadow: 0 0 0 6px black, 0 0 0 15px #84644b, 0 0 0 16px black, 0 0 0 18px #6f6259;].[/div]
[div=animation: fa-spin 1050s linear -700s infinite; width: 14px; height: 14px; position: absolute; top: -7px; left: 272px; background: #cff5f8; transform-origin: -272px 50%; border-radius: 100%;].[/div]
[div=animation: fa-spin 2060s linear infinite; width: 14px; height: 14px; position: absolute; top: -7px; left: 308px; background: #466fff; transform-origin: -308px 50%; border-radius: 100%;].[/div]
[div=animation: fa-spin 3107s linear -1000s infinite; width: 2px; height: 2px; position: absolute; top: -1px; left: 334px; background: grey; transform-origin: -334px 50%; border-radius: 100%;].[/div]
[/div][/div]
 
IctoraPost said:

.

.

.

.

.

.




.

.

.

.


.

.

.


.

.

.

.

.

.

.



Code: 
[div=height: 600px; position: relative; color: transparent;][div=position: absolute; top: 50%; left: 50%;]
[div=position: absolute; top: 0; left: 0; animation: fa-spin 3s linear infinite; width: 50px; height: 50px; background: grey; border-radius: 100%; box-shadow: 60px 0 0 0 green, -60px 0 0 0 green, 0 60px 0 0 green, 0 -60px 0 0 green;][div=position: absolute; top: 50px; left: 10px; animation: fa-spin 2s linear infinite reverse; width: 20px; height: 20px; border-radius: 100%; box-shadow: 150px 0 0 100px yellow, -150px 0 0 10px yellow, 0 150px 5px 0 yellow, 0 -150px 5px 0 yellow;].[/div][/div]
[div=position: absolute; top: 0; left: 0; animation: fa-spin 7s linear infinite; width: 50px; height: 50px; border-radius: 100%; box-shadow: 220px 0 0 0 orange, -220px 0 0 0 orange;].[/div]
[div=position: absolute; top: 0; left: 0; animation: fa-spin 7s linear infinite; width: 50px; height: 50px; border-radius: 100%; box-shadow: 220px 0 10px 0 orange, -220px 0 10px 0 orange;].[/div]
[div=position: absolute; top: 0; left: 0; animation: fa-spin 7s linear infinite; width: 50px; height: 50px; box-shadow: 0 220px 0 0 red, 0 -220px 0 0 red;].[/div]
[div=position: absolute; top: 0; left: 180px; transform-origin: -180px; animation: fa-spin 11s linear infinite reverse; width: 50px; height: 50px; border-radius: 100%;][div=position: absolute; top: 0; left: 0; animation: fa-spin 7s linear infinite reverse; width: 50px; height: 50px; border-radius: 100%; box-shadow: 0 10px 0 40px violet;].[/div][/div]
[div=animation: fa-spin 27s linear infinite; width: 20px; height: 20px; position: absolute; top: 200px; left: -10px; transform-origin: 50% -200px; background-color: blue; border-radius: 100%;][div=animation: fa-spin 17s linear infinite reverse; width: 20px; height: 20px; position: absolute; top: 50px; left: -10px; transform-origin: 50% -60px; border-radius: 100%;][div=animation: fa-spin 10s linear infinite reverse; width: 20px; height: 20px; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; border: 3px dashed cyan; border-radius: 100%;][div=animation: fa-spin 19s linear infinite reverse; width: 20px; height: 20px; position: absolute; top: 0; left: 0; border-radius: 100%; box-shadow: 0 -20px 0 -5px cyan, 20px 0 0 -5px cyan, 0 20px 0 -5px cyan, -20px 0 0 -5px cyan;].[/div][/div][/div][/div]
[/div][/div]

Code: 
[div=height: 800px; position: relative; background-color: black; color: transparent;][div=position: absolute; top: 50%; left: 50%;]
[div=animation: fa-spin 60s linear infinite; width: 70px; height: 70px; position: absolute; left: 0; top: 0; margin: -35px 0 0 -35px; background-color: #86deff; border-radius: 100%;
box-shadow:
0 -260px 0 -10px #e20508,
260px 0 0 -10px #4ac925,
0 260px 0 -10px #0714cd,
-260px 0 0 -10px #b535da,
0 -210px 0 -28px black,
0 -210px 0 -25px #e20508,
0 -185px 0 -28px black,
0 -185px 0 -25px #e20508,
0 -160px 0 -28px black,
0 -160px 0 -25px #e20508,
0 -135px 0 -28px black,
0 -135px 0 -25px #e20508,
0 -110px 0 -28px black,
0 -110px 0 -25px #e20508,
0 -85px 0 -28px black,
0 -85px 0 -25px #e20508,
0 -60px 0 -28px black,
0 -60px 0 -25px #e20508,
210px 0 0 -28px black,
210px 0 0 -25px #4ac925,
185px 0 0 -28px black,
185px 0 0 -25px #4ac925,
160px 0 0 -28px black,
160px 0 0 -25px #4ac925,
135px 0 0 -28px black,
135px 0 0 -25px #4ac925,
110px 0 0 -28px black,
110px 0 0 -25px #4ac925,
85px 0 0 -28px black,
85px 0 0 -25px #4ac925,
60px 0 0 -28px black,
60px 0 0 -25px #4ac925,
0 210px 0 -28px black,
0 210px 0 -25px #0714cd,
0 185px 0 -28px black,
0 185px 0 -25px #0714cd,
0 160px 0 -28px black,
0 160px 0 -25px #0714cd,
0 135px 0 -28px black,
0 135px 0 -25px #0714cd,
0 110px 0 -28px black,
0 110px 0 -25px #0714cd,
0 85px 0 -28px black,
0 85px 0 -25px #0714cd,
0 60px 0 -28px black,
0 60px 0 -25px #0714cd,
-210px 0 0 -28px black,
-210px 0 0 -25px #b535da,
-185px 0 0 -28px black,
-185px 0 0 -25px #b535da,
-160px 0 0 -28px black,
-160px 0 0 -25px #b535da,
-135px 0 0 -28px black,
-135px 0 0 -25px #b535da,
-110px 0 0 -28px black,
-110px 0 0 -25px #b535da,
-85px 0 0 -28px black,
-85px 0 0 -25px #b535da,
-60px 0 0 -28px black,
-60px 0 0 -25px #b535da;].[/div]
[div=animation: fa-spin 23s linear infinite; width: 20px; height: 20px; position: absolute; top: -65px; left: -10px; transform-origin: 50% 65px; background-color: gold; border-radius: 100%;][div=animation: fa-spin 13s linear infinite; width: 20px; height: 20px; position: absolute; top: 0; left: 0; border-radius: 100%; box-shadow: 0 17px 0 -5px gold;].[/div][/div]
[div=width: 620px; height: 620px; position: absolute; top: -320px; left: -320px; border: 10px double white; border-radius: 100%;].[/div]
[div=animation: fa-spin 117s linear infinite reverse; width: 20px; height: 20px; position: absolute; top: 345px; left: -10px; transform-origin: 50% -345px; background-color: purple; border-radius: 100%;][div=animation: fa-spin 19s linear infinite reverse; width: 20px; height: 20px; position: absolute; top: 0; left: 0; border-radius: 100%; box-shadow: 0 -17px 0 -5px purple;].[/div][/div]
[/div][/div]

Code: 
[div=height: 800px; position: relative; background-color: black; color: transparent;][div=position: absolute; top: 50%; left: 50%;]
[div=width: 72px; height: 72px; position: absolute; top: -36px; left: -36px; background: #ffc23c; border-radius: 100%;].[/div]
[div=animation: fa-spin 3s linear infinite; width: 6px; height: 6px; position: absolute; top: -3px; left: 45px; background: #5f5f5f; transform-origin: -45px 50%; border-radius: 100%;].[/div]
[div=animation: fa-spin 8s linear -2s infinite; width: 12px; height: 12px; position: absolute; top: -6px; left: 54px; background: #b06718; transform-origin: -54px 50%; border-radius: 100%;].[/div]
[div=animation: fa-spin 13s linear -10s infinite; width: 12px; height: 12px; position: absolute; top: -6px; left: 78px; background: #424980; transform-origin: -78px 50%; border-radius: 100%;]
[div=animation: fa-spin 0.9s linear infinite; width: 2px; height: 2px; position: absolute; top: 5px; left: 15px; background: white; transform-origin: -9px 50%; border-radius: 100%;].[/div][/div]
[div=animation: fa-spin 24s linear -8s infinite; width: 8px; height: 8px; position: absolute; top: -4px; left: 104px; background: #a86751; transform-origin: -104px 50%; border-radius: 100%;].[/div]
[div=animation: fa-spin 148s linear -100s infinite; width: 36px; height: 36px; position: absolute; top: -18px; left: 132px; background: #b5a38d; transform-origin: -132px 50%; border-radius: 100%;].[/div]
[div=animation: fa-spin 368s linear -60s infinite; width: 36px; height: 36px; position: absolute; top: -18px; left: 207px; background: #dca447; transform-origin: -207px 50%; border-radius: 100%; box-shadow: 0 0 0 6px black, 0 0 0 15px #84644b, 0 0 0 16px black, 0 0 0 18px #6f6259;].[/div]
[div=animation: fa-spin 1050s linear -700s infinite; width: 14px; height: 14px; position: absolute; top: -7px; left: 272px; background: #cff5f8; transform-origin: -272px 50%; border-radius: 100%;].[/div]
[div=animation: fa-spin 2060s linear infinite; width: 14px; height: 14px; position: absolute; top: -7px; left: 308px; background: #466fff; transform-origin: -308px 50%; border-radius: 100%;].[/div]
[div=animation: fa-spin 3107s linear -1000s infinite; width: 2px; height: 2px; position: absolute; top: -1px; left: 334px; background: grey; transform-origin: -334px 50%; border-radius: 100%;].[/div]
[/div][/div]
Click to expand...
You never cease to amaze me.
 




















Code: 
[div=height: 600px; position: relative; color: transparent;][div=position: absolute; top: 50%; left: 50%;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;].
[/div][/div][/div][/div][/div][/div][/div][/div][/div][/div][/div][/div][/div][/div][/div][/div]
[/div][/div]
 
IctoraPost said:




















Code: 
[div=height: 600px; position: relative; color: transparent;][div=position: absolute; top: 50%; left: 50%;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;]
[div=animation: fa-spin 27s linear infinite; position: absolute; top: 20px; left: -10px; transform-origin: 50% -20px; width: 20px; height: 20px; background: blue;].
[/div][/div][/div][/div][/div][/div][/div][/div][/div][/div][/div][/div][/div][/div][/div][/div]
[/div][/div]
Click to expand...
this is even better.
 
Heyo
Mayo
Rayo
Feyo
Bayo
Jayo
ewaf


[DIV=height: 1000px; position: relative;][DIV=border-radius: 50%; height: 300px; width: 300px; margin: -300px auto 0 auto; position: relative; top: 50%; background: url(https://www.rpnation.com/attachments/anime-landscape-wallpaper-hd-free-download-jpg.307720/) fixed; background-size: auto 100vh;][DIV=border-radius: 50%; height: 150px; width: 150px; position: absolute; left: 50%; margin-left: -75px; top: -170px; transform-origin: 50% 320px; text-align: center; line-height: 150px; font-size: 32px; background-color: #ebebeb;]Heyo[/DIV][DIV=border-radius: 50%; height: 150px; width: 150px; position: absolute; left: 50%; margin-left: -75px; top: -170px; transform-origin: 50% 320px; text-align: center; line-height: 150px; font-size: 32px; background-color: #d50c17; color: #F5F5F5; transform: rotate(45deg);][DIV=width: 100%; height: 100%; transform: rotate(-45deg);]Mayo[/DIV][/DIV][DIV=border-radius: 50%; height: 150px; width: 150px; position: absolute; left: 50%; margin-left: -75px; top: -170px; transform-origin: 50% 320px; text-align: center; line-height: 150px; font-size: 32px; background-color: #ebebeb; transform: rotate(90deg);][DIV=width: 100%; height: 100%; transform: rotate(-90deg);]Rayo[/DIV][/DIV][DIV=border-radius: 50%; height: 150px; width: 150px; position: absolute; left: 50%; margin-left: -75px; top: -170px; transform-origin: 50% 320px; text-align: center; line-height: 150px; font-size: 32px; background-color: #0c7cd5; color: #F5F5F5; transform: rotate(135deg);][DIV=width: 100%; height: 100%; transform: rotate(-135deg);][USER=24510][COLOR=#F5F5F5]Ration[/COLOR][/USER][/DIV][/DIV][DIV=border-radius: 50%; height: 150px; width: 150px; position: absolute; left: 50%; margin-left: -75px; top: -170px; transform-origin: 50% 320px; text-align: center; line-height: 150px; font-size: 32px; background-color: #ebebeb; transform: rotate(180deg);][DIV=width: 100%; height: 100%; transform: rotate(-180deg);]Feyo[/DIV][/DIV][DIV=border-radius: 50%; height: 150px; width: 150px; position: absolute; left: 50%; margin-left: -75px; top: -170px; transform-origin: 50% 320px; text-align: center; line-height: 150px; font-size: 32px; background-color: #0c7cd5; transform: rotate(225deg);][DIV=width: 100%; height: 100%; transform: rotate(-225deg);][URL='https://www.rpnation.com/threads/%E2%97%84-thoughtless-%E2%8C%A9-workshop-%E2%8C%AA.318227/page-3#post-7835436'][COLOR=#F5F5F5]Inspi[/COLOR][/URL][/DIV][/DIV][DIV=border-radius: 50%; height: 150px; width: 150px; position: absolute; left: 50%; margin-left: -75px; top: -170px; transform-origin: 50% 320px; text-align: center; line-height: 150px; font-size: 32px; background-color: #ebebeb; transform: rotate(270deg);][DIV=width: 100%; height: 100%; transform: rotate(-270deg);]Bayo[/DIV][/DIV][DIV=border-radius: 50%; height: 150px; width: 150px; position: absolute; left: 50%; margin-left: -75px; top: -170px; transform-origin: 50% 320px; text-align: center; line-height: 150px; font-size: 32px; background-color: #d50c17; color: #F5F5F5; transform: rotate(315deg);][DIV=width: 100%; height: 100%; transform: rotate(-315deg);]Jayo[/DIV][/DIV][DIV=width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); border-radius: 50%; color: #F5F5F5; line-height: 300px; text-align: center; font-size: 70px;][FONT=Pacifico]ewaf[/FONT][/DIV][/DIV][/DIV]
 
IctoraPost said:
That's what I was going for. It does have its fair share of problems, though, so it can't really replace it.
Click to expand...

What are the fair share of problems you have with that code?

Also, for the posts you made with images floating around in them, is there any practical use you can think of? Or that's purely experimentation?
 
White Masquerade said:
What are the fair share of problems you have with that code?

Also, for the posts you made with images floating around in them, is there any practical use you can think of? Or that's purely experimentation?
Click to expand...

Major problems include nothing under it being pushed down when the accordion extends, making it cover any content below it, and having a mildly confusing opening-and-closing system where you have to click on the same tab once to open it, and again to close it.

If you mean the rotating stuff at the top of this page, then that was mostly experimental. However, the animations that power it do have a good number of uses. You could use them to have something happen when the page loads like here, or adding embellishments to your post like here, or to map out solar systems like I did. You could have a blinking text cursor (subtle advertising right here, folks), fake gifs, animated sequences, loading bars, on-click actions, etc. etc. etc. Most of these are just extra stuff to add to a post to make them look fancier, but they do have a use in that aspect. I'll post something if I think of a more practical use.
 
IctoraPost said:
Major problems include nothing under it being pushed down when the accordion extends, making it cover any content below it, and having a mildly confusing opening-and-closing system where you have to click on the same tab once to open it, and again to close it.

If you mean the rotating stuff at the top of this page, then that was mostly experimental. However, the animations that power it do have a good number of uses. You could use them to have something happen when the page loads like here, or adding embellishments to your post like here, or to map out solar systems like I did. You could have a blinking text cursor (subtle advertising right here, folks), fake gifs, animated sequences, loading bars, on-click actions, etc. etc. etc. Most of these are just extra stuff to add to a post to make them look fancier, but they do have a use in that aspect. I'll post something if I think of a more practical use.
Click to expand...

As for nothing under it being pushed down when the accordion extends, I don't think that's an issue. I'm using a slightly modified version of your code right now. There is a BIG gap following the code, so unless you have a lot of content within an accordion, it will just cover the gap. It's a fair amount of blank, open space. The way it opens and closes is mainly why I was attracted to it. Sure it was trippy the first time handling it, but I've come to be comfortable with it. Like a buying a phone with no back button (Android to Iphone, smh). Yes it's a little more work than regular tabs, but the effect counteracts that. When you use it, you really feel like a businessman/woman. You click the tab of the content you want, and if you want to look at something else, you click that next tab. Once you're done with the new tab, click it again and BOOM, you're back at what you were looking through previously. The layering aspect becomes very good when you want to reference something as well. Say Tab 1 has a long box of content. Tab 2 can contains a short list of definitions. So when the definitions layer on top of the content, it creates a beautiful/useful effect.

Lol. Nice quest btw. Very cool idea and presentation. Haven't seen that before. As far as the animations, do they all come out looking good in mobile, or it's mainly hit/miss? I get the sense a good amount of users check RPN on mobile so a wonky mobile presentation could kill the worth. At least if it's something to come back and reference to a lot.
 
White Masquerade said:
As for nothing under it being pushed down when the accordion extends, I don't think that's an issue. I'm using a slightly modified version of your code right now. There is a BIG gap following the code, so unless you have a lot of content within an accordion, it will just cover the gap. It's a fair amount of blank, open space. The way it opens and closes is mainly why I was attracted to it. Sure it was trippy the first time handling it, but I've come to be comfortable with it. Like a buying a phone with no back button (Android to Iphone, smh). Yes it's a little more work than regular tabs, but the effect counteracts that. When you use it, you really feel like a businessman/woman. You click the tab of the content you want, and if you want to look at something else, you click that next tab. Once you're done with the new tab, click it again and BOOM, you're back at what you were looking through previously. The layering aspect becomes very good when you want to reference something as well. Say Tab 1 has a long box of content. Tab 2 can contains a short list of definitions. So when the definitions layer on top of the content, it creates a beautiful/useful effect.

Lol. Nice quest btw. Very cool idea and presentation. Haven't seen that before. As far as the animations, do they all come out looking good in mobile, or it's mainly hit/miss? I get the sense a good amount of users check RPN on mobile so a wonky mobile presentation could kill the worth. At least if it's something to come back and reference to a lot.
Click to expand...

If it works for you, then that's good. It's nice to know that that system actually has a good use.

If you like the style of the quest, you should check out MS Paint Adventures. You won't regret it. Or maybe you will. Try it anyway.

The animations should work on mobile the same way they work on PC. You just have to make sure nothing is too wide and goes outside the screen, like always.
 
.

Try refreshing the page.
I dare you.

Unsplash



UPDATE
This still works on both images and background images, but the image will change every few days instead of at every refresh.
 
Last edited:
...
DEFAULT
.
.
Sometimes, being normal is cool. It's your own fault for thinking otherwise.
Anonymous
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
COLOR ME!
“'Tis a singing note;
An explosion of color,
Oh so bittersweet.”
~ Anonymous
.
The Nite Lyfe

“Ah, the beautiful, exquisite darkness of the night. What a life to live.”
~ Anonymous

Try observing this on the other themes. You may be surprised.
[DIV=font-size:0;][FONT=Rochester].[/FONT][FONT=Gloria Hallelujah].[/FONT][FONT=Cabin].[/FONT][/DIV][DIV=height: 430px; overflow: hidden;][COLUMN=a uix_breadcrumb__home__title][DIV=margin-bottom: 80px;][DIV=text-align: center; max-width: 400px; height: 400px; margin: 0 auto;][COLUMN=a button primary breadcrumb showAll bbcode-row][DIV=margin: 0 -12px; padding: 20px; font-size: 50px; font-family: Cabin; cursor: default;]DEFAULT[/DIV][/COLUMN][DIV=font-size: 1.5em; position: relative; margin-top: 20px;][DIV=height: 100%; width: 3px; position: absolute; background-color: #ffffff; color: transparent; z-index: 2; left: 72px;].[/DIV][DIV=height: 100%; width: 3px; position: absolute; background-color: #ffffff; color: transparent; z-index: 2; right: 72px;].[/DIV][BLOCKQUOTE=Anonymous][DIV=text-align: left; font-style: italic;]Sometimes, being normal is cool. It's your own fault for thinking otherwise.[/DIV][/BLOCKQUOTE][/DIV][DIV=border-top: 1px solid rgb(96, 125, 139); padding: 10px; margin-top: 10px;][URL=https://www.rpnation.com/threads/some-random-stuff.322381/page-2#uix_stickyFooterSpacer]Now, go check this out on the other themes! It'll be fun.[/URL][/DIV][/DIV][/DIV][/COLUMN][DIV=visibility: hidden;][COLUMN=a sidePanel__textHeading][DIV=font-size:0;].[/DIV][/COLUMN][COLUMN=a sidePanel__textHeading][DIV=font-size:0;].[/DIV][/COLUMN][COLUMN=a sidePanel__textHeading][DIV=font-size:0;].[/DIV][/COLUMN][COLUMN=a sidePanel__textHeading][DIV=font-size:0;].[/DIV][/COLUMN][COLUMN=a sidePanel__textHeading][DIV=font-size:0;].[/DIV][/COLUMN][COLUMN=a sidePanel__textHeading][DIV=font-size:0;].[/DIV][/COLUMN][COLUMN=a sidePanel__textHeading][DIV=font-size:0;].[/DIV][/COLUMN][COLUMN=a sidePanel__textHeading][DIV=font-size:0;].[/DIV][/COLUMN][COLUMN=a sidePanel__textHeading][DIV=font-size:0;].[/DIV][/COLUMN][COLUMN=a sidePanel__textHeading][DIV=font-size:0;].[/DIV][/COLUMN][COLUMN=a sidePanel__textHeading][DIV=font-size:0;].[/DIV][/COLUMN][COLUMN=a sidePanel__textHeading][DIV=font-size:0;].[/DIV][/COLUMN][COLUMN=a sidePanel__textHeading][DIV=font-size:0;].[/DIV][/COLUMN][COLUMN=a sidePanel__textHeading][DIV=font-size:0;].[/DIV][/COLUMN][COLUMN=a sidePanel__textHeading][DIV=font-size:0;].[/DIV][/COLUMN][COLUMN=a sidePanel__textHeading][DIV=font-size:0;].[/DIV][/COLUMN][COLUMN=a sidePanel__textHeading][DIV=font-size:0;].[/DIV][/COLUMN][COLUMN=a sidePanel__textHeading][DIV=font-size:0;].[/DIV][/COLUMN][COLUMN=a sidePanel__textHeading][DIV=font-size:0;].[/DIV][/COLUMN][/DIV][DIV=margin-top: calc(-10px - (10px + 23px) * 19);][DIV=height: 400px; max-width: 650px; position: relative; margin: 0 auto; border-radius: 50px; overflow: hidden;][DIV=position: absolute; width: 100%; height: 100%; background: url(https://i.imgur.com/kh9Y1vj.jpg) 50% 50%; filter: blur(5px); -webkit-filter: blur(5px); color: transparent;].[/DIV][DIV=text-align: center; position: relative; display: table; height: 100%; width: 100%;][DIV=background-color: rgba(0,115,255,0.8); display: table-row; height: 0;][DIV=font-family: Gloria Hallelujah; font-size: 50px; color: #FF0D84; text-shadow: 1px 1px 3px black; padding: 15px; box-sizing: border-box;]COLOR ME![/DIV][/DIV][DIV=width: 100%; height: 100%; display: table; font-size: 1.8em;][DIV=display: table-cell; font-style: italic; text-align: right; background-color: rgba(232,164,12,.8); width: 50%; color: #19389D; text-shadow: -1px 1px 3px white; padding: 15px; box-sizing: border-box;]“'Tis a singing note;
An explosion of color,
Oh so bittersweet.”[/DIV][DIV=display: table-cell; text-align: left; background-color: rgba(255,34,0,.8); width: 50%; vertical-align: bottom; color: #FFF700; text-shadow: 1px 1px 3px black; padding: 15px; box-sizing: border-box;]~ Anonymous[/DIV][/DIV][DIV=background-color: rgba(163,255,13,.8); display: table-row; height: 0;][URL=https://www.rpnation.com/threads/some-random-stuff.322381/page-2#uix_stickyFooterSpacer][DIV=word-break: normal; word-wrap: normal; display: inline-block; text-shadow: -1px 1px 0 black; padding: 15px; box-sizing: border-box;]Go on the other themes as well! You won't regret it.[/DIV][/URL][/DIV][/DIV][DIV=box-shadow: inset 15px 15px 20px rgba(255, 255, 255, .2), inset -15px -15px 20px rgba(0, 0, 0, .2); color: transparent; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50px; pointer-events: none;].[/DIV][/DIV][/DIV][DIV=margin-top: 50px;][DIV=height: 400px; background: url(https://i.imgur.com/AqbfDrw.png) 50% 50%; background-size: 1100px; overflow: auto;][DIV=width: 300px; height: 300px; margin: 0 auto; margin-top: 50px; background-color: #323232; padding: 15px; box-sizing: border-box; text-align: center;][DIV=font-family: Rochester; font-size: 50px;]The Nite Lyfe[/DIV]
[DIV=font-size: 1.5em; font-style: italic; text-align: left;]“Ah, the beautiful, exquisite darkness of the night. What a life to live.”[/DIV][DIV=font-size: 1.5em; text-align: right;]~ Anonymous[/DIV]
[URL=https://www.rpnation.com/threads/some-random-stuff.322381/page-2#uix_stickyFooterSpacer][DIV=word-break: normal; word-wrap: normal; display: inline-block;]Try observing this on the other themes. You may be surprised.[/DIV][/URL][/DIV][/DIV][/DIV][/DIV]
[
DIV
=
font-size
:
0
;]
[
FONT
=
Rochester
].[/
FONT
]
[
FONT
=
Gloria Hallelujah
].[/
FONT
]
[
FONT
=
Cabin
].[/
FONT
]
[/
DIV
]
[
DIV
=
height
:
430
px
;
overflow
:
hidden
;]
[
COLUMN
=a
uix_breadcrumb__home__title
]
[
DIV
=
margin-bottom
:
80
px
;]
[
DIV
=
text-align
:
center
;
max-width
:
400
px
;
height
:
400
px
;
margin
:
0
auto
;]
[
COLUMN
=a
button
primary
breadcrumb
showAll
bbcode-row
]
[
DIV
=
margin
:
0
-
12
px
;
padding
:
20
px
;
font-size
:
50
px
;
font-family
:
Cabin
;
cursor
:
default
;]DEFAULT[/
DIV
]
[/
COLUMN
]
[
DIV
=
font-size
:
1
.
5
em
;
position
:
relative
;
margin-top
:
20
px
;]
[
DIV
=
height
:
100
%
;
width
:
3
px
;
position
:
absolute
;
background-color
:
#ffffff
;
color
:
transparent
;
z-index
:
2
;
left
:
72
px
;].[/
DIV
]
[
DIV
=
height
:
100
%
;
width
:
3
px
;
position
:
absolute
;
background-color
:
#ffffff
;
color
:
transparent
;
z-index
:
2
;
right
:
72
px
;].[/
DIV
]
[
BLOCKQUOTE
=
Anonymous
]
[
DIV
=
text-align
:
left
;
font-o
:
italic
;]Sometimes, being normal is cool. It's your own fault fot thinking otherwise.[/
DIV
]
[/
BLOCKQUOTE
]
[/
DIV
]
[
DIV
=
border-top
:
1
px
solid
rgb
(
96
,
125
,
139
);
padding
:
10
px
;
margin-top
:
10
px
;]
[
URL
=]Now, go check this out on the themes! It'll be fun.[/
URL
]
[/
DIV
]
[/
DIV
]
[/
DIV
]
[/
COLUMN
]
[
DIV
=
visibility
:
hidden
;]
[
COLUMN
=a
sidePanel__textHeading
][
DIV
=
font-size
:
0
;].[/
DIV
][/
COLUMN
]
[
COLUMN
=a
sidePanel__textHeading
][
DIV
=
font-size
:
0
;].[/
DIV
][/
COLUMN
]
[
COLUMN
=a
sidePanel__textHeading
][
DIV
=
font-size
:
0
;].[/
DIV
][/
COLUMN
]
[
COLUMN
=a
sidePanel__textHeading
][
DIV
=
font-size
:
0
;].[/
DIV
][/
COLUMN
]
[
COLUMN
=a
sidePanel__textHeading
][
DIV
=
font-size
:
0
;].[/
DIV
][/
COLUMN
]
[
COLUMN
=a
sidePanel__textHeading
][
DIV
=
font-size
:
0
;].[/
DIV
][/
COLUMN
]
[
COLUMN
=a
sidePanel__textHeading
][
DIV
=
font-size
:
0
;].[/
DIV
][/
COLUMN
]
[
COLUMN
=a
sidePanel__textHeading
][
DIV
=
font-size
:
0
;].[/
DIV
][/
COLUMN
]
[
COLUMN
=a
sidePanel__textHeading
][
DIV
=
font-size
:
0
;].[/
DIV
][/
COLUMN
]
[
COLUMN
=a
sidePanel__textHeading
][
DIV
=
font-size
:
0
;].[/
DIV
][/
COLUMN
]
[
COLUMN
=a
sidePanel__textHeading
][
DIV
=
font-size
:
0
;].[/
DIV
][/
COLUMN
]
[
COLUMN
=a
sidePanel__textHeading
][
DIV
=
font-size
:
0
;].[/
DIV
][/
COLUMN
]
[
COLUMN
=a
sidePanel__textHeading
][
DIV
=
font-size
:
0
;].[/
DIV
][/
COLUMN
]
[
COLUMN
=a
sidePanel__textHeading
][
DIV
=
font-size
:
0
;].[/
DIV
][/
COLUMN
]
[
COLUMN
=a
sidePanel__textHeading
][
DIV
=
font-size
:
0
;].[/
DIV
][/
COLUMN
]
[
COLUMN
=a
sidePanel__textHeading
][
DIV
=
font-size
:
0
;].[/
DIV
][/
COLUMN
]
[
COLUMN
=a
sidePanel__textHeading
][
DIV
=
font-size
:
0
;].[/
DIV
][/
COLUMN
]
[
COLUMN
=a
sidePanel__textHeading
][
DIV
=
font-size
:
0
;].[/
DIV
][/
COLUMN
]
[
COLUMN
=a
sidePanel__textHeading
][
DIV
=
font-size
:
0
;].[/
DIV
][/
COLUMN
]
[/
DIV
]
[
DIV
=
margin-top
:
calc
(
-
10
px
- (
10
px
+
23
px
) *
19
);]
[
DIV
=
height
:
400
px
;
max-width
:
650
px
;
position
:
relative
;
margin
:
0
auto
;
border-radius
:
50
px
;
overflow
:
hidden
;]
[
DIV
=
position
:
absolute
;
width
:
100
%
;
height
:
100
%
;
background
:
url
()
50
%
50
%
;
filter
:
blur
(
5
px
);
-webkit-filter
:
blur
(
5
px
);
color
:
transparent
;].[/
DIV
]
[
DIV
=
text-align
:
center
;
position
:
relative
;
display
:
table
;
height
:
100
%
;
width
:
100
%
;]
[
DIV
=
background-color
:
rgba
(
0
,
115
,
255
,
0
.
8
);
display
:
table-row
;
height
:
0
;]
[
DIV
=
font-family
:
Gloria
Hallelujah
;
font-size
:
50
px
;
color
:
#FF
0
D
84
;
text-shadow
:
1
px
1
px
3
px
black
;
padding
:
15
px
;
box-sizing
:
border-box
;]COLOR ME![/
DIV
]
[/
DIV
]
[
DIV
=
width
:
100
%
;
height
:
100
%
;
display
:
table
;
font-size
:
1
.
8
em
;]
[
DIV
=
display
:
table-cell
;
font-o
:
italic
;
text-align
:
right
;
background-color
:
rgba
(
232
,
164
,
12
,.
8
);
width
:
50
%
;
color
:
#
19389
D
;
text-shadow
:
-
1
px
1
px
3
px
white
;
padding
:
15
px
;
box-sizing
:
border-box
;]“'Tis a singing note; An explosion of color, Oh so bittersweet.”[/
DIV
]
[
DIV
=
display
:
table-cell
;
text-align
:
left
;
background-color
:
rgba
(
255
,
34
,
0
,.
8
);
width
:
50
%
;
vertical-align
:
bottom
;
color
:
#FFF
700
;
text-shadow
:
1
px
1
px
3
px
black
;
padding
:
15
px
;
box-sizing
:
border-box
;]~ Anonymous[/
DIV
]
[/
DIV
]
[
DIV
=
background-color
:
rgba
(
163
,
255
,
13
,.
8
);
display
:
table-row
;
height
:
0
;]
[
URL
=]
[
DIV
=
word-break
:
normal
;
word-wrap
:
normal
;
display
:
inline-block
;
text-shadow
:
-
1
px
1
px
0
black
;
padding
:
15
px
;
box-sizing
:
border-box
;]Go on the other themes as well! You won't regret it.[/
DIV
]
[/
URL
]
[/
DIV
]
[/
DIV
]
[
DIV
=
box-shadow
:
inset
15
px
15
px
20
px
rgba
(
255
,
255
,
255
, .
2
),
inset
-
15
px
-
15
px
20
px
rgba
(
0
,
0
,
0
, .
2
);
color
:
transparent
;
position
:
absolute
;
width
:
100
%
;
height
:
100
%
;
top
:
0
;
left
:
0
;
border-radius
:
50
px
;
pointer-events
:
none
;].[/
DIV
]
[/
DIV
]
[/
DIV
]
[
DIV
=
margin-top
:
50
px
;]
[
DIV
=
height
:
400
px
;
background
:
url
()
50
%
50
%
;
background-size
:
1100
px
;
overflow
:
auto
;]
[
DIV
=
width
:
300
px
;
height
:
300
px
;
margin
:
0
auto
;
margin-top
:
50
px
;
background-color
:
#
323232
;
padding
:
15
px
;
box-sizing
:
border-box
;
text-align
:
center
;]
[
DIV
=
font-family
:
Rochester
;
font-size
:
50
px
;]The Nite Lyfe[/
DIV
]
[
DIV
=
font-size
:
1
.
5
em
;
font-o
:
italic
;
text-align
:
left
;]“Ah, the beautiful, exquisite darkness of the night. What a life to live.”[/
DIV
]
[
DIV
=
font-size
:
1
.
5
em
;
text-align
:
right
;]~ Anonymous[/
DIV
]
[
URL
=]
[
DIV
=
word-break
:
normal
;
word-wrap
:
normal
;
display
:
inline-block
;]Try observing this on the other themes. You may be surprised. [/
DIV
]
[/
URL
]
[/
DIV
]
[/
DIV
]
[/
DIV
]
[/
DIV
]
Code: 
<bbxml>
  <classes>
    <class name="df-main">
      text-align: center; 
      max-width: 400px; 
      height: 400px; 
      margin: 0 auto;
    </class>
    <class name="df-title">
      margin: 0 -12px; 
      padding: 20px; 
      font-size: 50px; 
      font-family: Cabin; 
      cursor: default;
    </class>
    <class name="df-content">
      font-size: 1.5em; 
      position: relative; 
      margin-top: 20px;
    </class>
    <class name="df-cover">
      height: 100%; 
      width: 3px; 
      position: absolute; 
      background-color: #ffffff; 
      color: transparent; 
      z-index: 2;
    </class>
    <class name="df-cover-left">
      left: 72px;
    </class>
    <class name="df-cover-right">
      right: 72px;
    </class>
    <class name="df-quote">
      text-align: left; 
      font-style: italic; 
    </class>
    <class name="df-footer">
      border-top: 1px solid rgb(96, 125, 139); 
      padding: 10px; 
      margin-top: 10px;
    </class>

    <class name="cm-main">
      height: 400px; 
      max-width: 650px; 
      position: relative; 
      margin: 0 auto;
      border-radius: 50px; 
      overflow: hidden; 
    </class>
    <class name="cm-background">
      position: absolute; 
      width: 100%; 
      height: 100%; 
      background: url(https://i.imgur.com/kh9Y1vj.jpg) 50% 50%; 
      filter: blur(5px); 
      -webkit-filter: blur(5px);
      color: transparent;
    </class>
    <class name="cm-content">
      text-align: center; 
      position: relative;
      display: table;
      height: 100%;
      width: 100%;
    </class>
    <class name="cm-row">       
      display: table-row;
      height: 0;
    </class>
    <class name="cm-title-row">       
      background-color: rgba(0,115,255,0.8);
    </class>
    <class name="cm-title">
      font-family: Gloria Hallelujah; 
      font-size: 50px;
      color: #FF0D84;
      text-shadow: 1px 1px 3px black;
    </class>
    <class name="cm-queaker">     
      width: 100%;
      height: 100%;  
      display: table;
      font-size: 1.8em; 
    </class>
    <class name="cm-quote">
      display: table-cell;
      font-style: italic; 
      text-align: right;
      background-color: rgba(232,164,12,.8);
      width: 50%;
      color: #19389D;
      text-shadow: -1px 1px 3px white;
    </class>
    <class name="cm-speaker">
      display: table-cell;
      text-align: left;
      background-color: rgba(255,34,0,.8);
      width: 50%;
      vertical-align: bottom;
      color: #FFF700;
      text-shadow: 1px 1px 3px black;
    </class>
    <class name="cm-footer-row">       
      background-color: rgba(163,255,13,.8);
    </class>
    <class name="cm-footer">
      word-break: normal; 
      word-wrap: normal; 
      display: inline-block;
      text-shadow: -1px 1px 0 black;
    </class>
    <class name="cm-box">
      padding: 15px;
      box-sizing: border-box;
    </class>
    <class name="cm-shadow">
      box-shadow: inset 15px 15px 20px rgba(255, 255, 255, .2), inset -15px -15px 20px rgba(0, 0, 0, .2);
      color: transparent;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border-radius: 50px;
      pointer-events: none;
    </class>

    <class name="nl-main">
      height: 400px; 
      background: url(https://i.imgur.com/AqbfDrw.png) 50% 50%; 
      background-size: 1100px; 
      overflow: auto;
    </class>
    <class name="nl-content">
      width: 300px; 
      height: 300px; 
      margin: 0 auto; 
      margin-top: 50px; 
      background-color: #323232; 
      padding: 15px; 
      box-sizing: border-box; 
      text-align: center;
    </class>
    <class name="nl-title">
      font-family: Rochester; 
      font-size: 50px;
    </class>
    <class name="nl-quote">
      font-size: 1.5em; 
      font-style: italic; 
      text-align: left;
    </class>
    <class name="nl-speaker">
      font-size: 1.5em; 
      text-align: right;
    </class>
    <class name="nl-footer">
      word-break: normal; 
      word-wrap: normal; 
      display: inline-block;
    </class>

    <class name="url">
      https://www.rpnation.com/threads/cpy-pst.274762/page-22#uix_stickyFooterSpacer
    </class>
  </classes>
  
  
  <templates>
    <template name="f"><!--Each of these is 23px taller in CM than in NL, with 10px at the start-->
        <column o="a sidePanel__textHeading"><d o="font-size:0;">.</d></column>
    </template>

    <template name="framework">
      <d o="height: 430px; overflow: hidden;">
        <column o="a uix_breadcrumb__home__title"><!--Shown in DF, hidden in CM and NL-->
          <d o="margin-bottom: 80px;">{default}</d>
        </column>
        <d o="visibility: hidden;">
          <in t="f" />
          <in t="f" />
          <in t="f" />
          <in t="f" />
          <in t="f" />
          <in t="f" />
          <in t="f" />
          <in t="f" />
          <in t="f" />
          <in t="f" />
          <in t="f" />
          <in t="f" />
          <in t="f" />
          <in t="f" />
          <in t="f" />
          <in t="f" />
          <in t="f" />
          <in t="f" />
          <in t="f" />
        </d>
        <d o="margin-top: calc(-10px - (10px + 23px) * 19);">{colorme}</d>
        <d o="margin-top: 50px;">{nightlife}</d>
      </d>
    </template>
  </templates>


  <body>
  	<d o="font-size:0;"><font o="Rochester">.</font><font o="Gloria Hallelujah">.</font><font o="Cabin">.</font></d>
    <in t="framework">
      <p name="default">
        <d c="df-main">
          <column o="a button primary breadcrumb showAll bbcode-row">
            <d c="df-title">DEFAULT</d>
          </column>
          <d c="df-content">
            <d c="df-cover df-cover-left">.</d>
            <d c="df-cover df-cover-right">.</d>
            <blockquote o="Anonymous">
              <d c="df-quote">Sometimes, being normal is cool. It's your own fault for thinking otherwise.</d>
            </blockquote>
          </d>
          <d c="df-footer">
            <url c="url">Now, go check this out on the other themes! It'll be fun.</url>
          </d>
        </d>
      </p>

      <p name="colorme">
        <d c="cm-main">
          <d c="cm-background">.</d>
          <d c="cm-content">
            <d c="cm-title-row cm-row">
              <d c="cm-title cm-box">COLOR ME!</d>
            </d>
            <d c="cm-queaker">
              <d c="cm-quote cm-box">“'Tis a singing note;<br/>An explosion of color,<br/>Oh so bittersweet.”</d>
              <d c="cm-speaker cm-box">~ Anonymous</d>
            </d>
            <d c="cm-footer-row cm-row">
              <url c="url">
                <d c="cm-footer cm-box">Go on the other themes as well! You won't regret it.</d>
              </url>
            </d>
          </d>
          <d c="cm-shadow">.</d>
        </d>
      </p>

      <p name="nightlife">
        <d c="nl-main">
          <d c="nl-content">
            <d c="nl-title">The Nite Lyfe</d>
            <br />
            <d c="nl-quote">
              “Ah, the beautiful, exquisite darkness of the night. What a life to live.”
            </d>
            <d c="nl-speaker">~ Anonymous</d>
            <br />
            <url c="url">
              <d c="nl-footer">
                Try observing this on the other themes. You may be surprised.
              </d>
            </url>
          </d>
        </d>
      </p>
    </in>
  </body>
</bbxml>
 
Last edited by a moderator:
HTEW
MJTJ
EWAF
HTEW
MJTJ
EWAF

[DIV=width: 100px; height: 40px; background: lightgrey; border: 2px solid grey; border-radius: 10px; color: black; position: relative; overflow: hidden; margin: 0 auto; z-index: 1;][DIV=font-size: 30px; transform-origin: 50% -200px; text-align: center; position: absolute; top: 0; left: 0; width: 100%; animation: fa-spin 3s ease-in-out infinite;]HTEW[/DIV][DIV=font-size: 30px; transform-origin: 50% -200px; text-align: center; position: absolute; top: 0; left: 0; width: 100%; animation: fa-spin 3s ease-in-out infinite; animation-delay: -1s;]MJTJ[/DIV][DIV=font-size: 30px; transform-origin: 50% -200px; text-align: center; position: absolute; top: 0; left: 0; width: 100%; animation: fa-spin 3s ease-in-out infinite; animation-delay: -2s;]EWAF[/DIV][DIV=font-size: 30px; transform-origin: 50% -200px; text-align: center; position: absolute; top: 0; left: 0; width: 100%; animation: fa-spin 12s steps(4) infinite; background: lightgrey;]HTEW[/DIV][DIV=font-size: 30px; transform-origin: 50% -200px; text-align: center; position: absolute; top: 0; left: 0; width: 100%; animation: fa-spin 12s steps(4) infinite; background: lightgrey; animation-delay: -4s;]MJTJ[/DIV][DIV=font-size: 30px; transform-origin: 50% -200px; text-align: center; position: absolute; top: 0; left: 0; width: 100%; animation: fa-spin 12s steps(4) infinite; background: lightgrey; animation-delay: -8s;]EWAF[/DIV][/DIV]
[
DIV
=
width
:
100
px
;
height
:
40
px
;
background
:
lightgrey
;
border
:
2
px
solid
grey
;
border-radius
:
10
px
;
color
:
black
;
position
:
relative
;
overflow
:
hidden
;
margin
:
0
auto
;
z-index
:
1
;]
[
DIV
=
font-size
:
30
px
;
transform-origin
:
50
%
-
200
px
;
text-align
:
center
;
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100
%
;
animation
:
fa-spin
3
s
ease-in-out
infinite
;]HTEW[/
DIV
]
[
DIV
=
font-size
:
30
px
;
transform-origin
:
50
%
-
200
px
;
text-align
:
center
;
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100
%
;
animation
:
fa-spin
3
s
ease-in-out
infinite
;
animation-delay
:
-
1
s
;]MJTJ[/
DIV
]
[
DIV
=
font-size
:
30
px
;
transform-origin
:
50
%
-
200
px
;
text-align
:
center
;
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100
%
;
animation
:
fa-spin
3
s
ease-in-out
infinite
;
animation-delay
:
-
2
s
;]EWAF[/
DIV
]
[
DIV
=
font-size
:
30
px
;
transform-origin
:
50
%
-
200
px
;
text-align
:
center
;
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100
%
;
animation
:
fa-spin
12
s
steps
(
4
)
infinite
;
background
:
lightgrey
;]HTEW[/
DIV
]
[
DIV
=
font-size
:
30
px
;
transform-origin
:
50
%
-
200
px
;
text-align
:
center
;
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100
%
;
animation
:
fa-spin
12
s
steps
(
4
)
infinite
;
background
:
lightgrey
;
animation-delay
:
-
4
s
;]MJTJ[/
DIV
]
[
DIV
=
font-size
:
30
px
;
transform-origin
:
50
%
-
200
px
;
text-align
:
center
;
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100
%
;
animation
:
fa-spin
12
s
steps
(
4
)
infinite
;
background
:
lightgrey
;
animation-delay
:
-
8
s
;]EWAF[/
DIV
]
[/
DIV
]
Code: 
<bbxml>
  <templates>
  </templates>

  <classes>
    <class name="main">
      width: 100px; 
      height: 40px; 
      background: lightgrey;
      border: 2px solid grey;
      border-radius: 10px;
      color: black;
      position: relative;
      overflow: hidden;
      margin: 0 auto;
      z-index: 1;
    </class>
    <class name="word">
      font-size: 30px; 
      transform-origin: 50% -200px; 
      text-align: center; 
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 100%;
    </class>
    <class name="spinner">
      animation: fa-spin 3s ease-in-out infinite; 
    </class>
    <class name="stayer">
      animation: fa-spin 12s steps(4) infinite; 
      background: lightgrey;
    </class>
  </classes>

  <body>
    <d c="main">
      <d c="word spinner">HTEW</d>
      <d c="word spinner" o="animation-delay: -1s;">MJTJ</d>
      <d c="word spinner" o="animation-delay: -2s;">EWAF</d>
      
      <d c="word stayer">HTEW</d>
      <d c="word stayer" o="animation-delay: -4s;">MJTJ</d>
      <d c="word stayer" o="animation-delay: -8s;">EWAF</d>
    </d>
  </body>
</bbxml>
 
150x150
150x150
150x150

Based on Nano Nano 's image slideshow here, an actual practical application of the thing from the previous post. Pretty cool. She mentioned something about fading, so here we are. This uses the panelFadeIn animation, which unfortunately only fades up to 60% opacity leaving it slightly transparent. I've tried to fix it by having a grey background and putting in a filter, which isn't fully supported on all browsers and may or may not work. If you want to add more pictures, you'll have to adjust the timings a bit.

[DIV=width: 150px; height: 150px; background-color: grey; border: 2px solid black; border-radius: 15px; position: relative; overflow: hidden; pointer-events: none; margin: 0 auto; z-index: 1; -webkit-filter: contrast(2); filter: contrast(2);][DIV=transform-origin: -200px; position: absolute; top: 0; left: 0; animation: fa-spin 12s steps(2) infinite, panelMaskIn 3s infinite alternate; animation-delay: 8s;][IMG]https://source.unsplash.com/random/150x150?nature[/IMG][/DIV][DIV=transform-origin: -200px; position: absolute; top: 0; left: 0; animation: fa-spin 12s steps(2) infinite, panelMaskIn 3s infinite alternate; animation-delay: 4s;][IMG]https://source.unsplash.com/random/150x150?animal[/IMG][/DIV][DIV=transform-origin: -200px; position: absolute; top: 0; left: 0; animation: fa-spin 12s steps(2) infinite, panelMaskIn 3s infinite alternate;][IMG]https://source.unsplash.com/random/150x150?city[/IMG][/DIV][/DIV]​
[
DIV
=
width
:
150
px
;
height
:
150
px
;
background-color
:
grey
;
border
:
2
px
solid
black
;
border-radius
:
15
px
;
position
:
relative
;
overflow
:
hidden
;
pointer-events
:
none
;
margin
:
0
auto
;
z-index
:
1
;
-webkit-filter
:
contrast
(
2
);
filter
:
contrast
(
2
);]
[
DIV
=
transform-origin
:
-
200
px
;
position
:
absolute
;
top
:
0
;
left
:
0
;
animation
:
fa-spin
12
s
steps
(
2
)
infinite
,
panelMaskIn
3
s
infinite
alternate
;
animation-delay
:
8
s
;][/
DIV
]
[
DIV
=
transform-origin
:
-
200
px
;
position
:
absolute
;
top
:
0
;
left
:
0
;
animation
:
fa-spin
12
s
steps
(
2
)
infinite
,
panelMaskIn
3
s
infinite
alternate
;
animation-delay
:
4
s
;][/
DIV
]
[
DIV
=
transform-origin
:
-
200
px
;
position
:
absolute
;
top
:
0
;
left
:
0
;
animation
:
fa-spin
12
s
steps
(
2
)
infinite
,
panelMaskIn
3
s
infinite
alternate
;][/
DIV
]
[/
DIV
]
Code: 
<bbxml>
  <templates>
  </templates>

  <classes>
    <class name="main">
      width: 150px; 
      height: 150px; 
      background-color: grey;
      border: 2px solid black;
      border-radius: 15px;
      position: relative;
      overflow: hidden;
      pointer-events: none;
      margin: 0 auto;
      z-index: 1;
      -webkit-filter: contrast(2);
      filter: contrast(2);
    </class>
    <class name="pic">
      transform-origin: -200px; 
      position: absolute; 
      top: 0; 
      left: 0; 
      animation: fa-spin 12s steps(2) infinite, panelMaskIn 3s infinite alternate; 
    </class>
  </classes>

  <body>
    <d c="main">
      <d c="pic" o="animation-delay: 8s;"><img>https://source.unsplash.com/random/150x150?nature</img></d>
      <d c="pic" o="animation-delay: 4s;"><img>https://source.unsplash.com/random/150x150?animal</img></d>
      <d c="pic"><img>https://source.unsplash.com/random/150x150?city</img></d>
    </d>
  </body>
</bbxml>
 
IctoraPost said:
150x150
150x150
150x150

Based on Nano Nano 's image slideshow here, an actual practical application of the thing from the previous post. Pretty cool. She mentioned something about fading, so here we are. This uses the panelFadeIn animation, which unfortunately only fades up to 60% opacity leaving it slightly transparent. I've tried to fix it by having a grey background and putting in a filter, which isn't fully supported on all browsers and may or may not work. If you want to add more pictures, you'll have to adjust the timings a bit.

​
[DIV=width: 150px; height: 150px; background-color: grey; border: 2px solid black; border-radius: 15px; position: relative; overflow: hidden; pointer-events: none; margin: 0 auto; z-index: 1; -webkit-filter: contrast(2); filter: contrast(2);][DIV=transform-origin: -200px; position: absolute; top: 0; left: 0; animation: fa-spin 12s steps(2) infinite, panelMaskIn 3s infinite alternate; animation-delay: 8s;][IMG]https://source.unsplash.com/random/150x150?nature[/IMG][/DIV][DIV=transform-origin: -200px; position: absolute; top: 0; left: 0; animation: fa-spin 12s steps(2) infinite, panelMaskIn 3s infinite alternate; animation-delay: 4s;][IMG]https://source.unsplash.com/random/150x150?animal[/IMG][/DIV][DIV=transform-origin: -200px; position: absolute; top: 0; left: 0; animation: fa-spin 12s steps(2) infinite, panelMaskIn 3s infinite alternate;][IMG]https://source.unsplash.com/random/150x150?city[/IMG][/DIV][/DIV]​
​

[
DIV
=
width
:
150
px
;
height
:
150
px
;
background-color
:
grey
;
border
:
2
px
solid
black
;
border-radius
:
15
px
;
position
:
relative
;
overflow
:
hidden
;
pointer-events
:
none
;
margin
:
0
auto
;
z-index
:
1
;
-webkit-filter
:
contrast
(
2
);
filter
:
contrast
(
2
);]
[
DIV
=
transform-origin
:
-
200
px
;
position
:
absolute
;
top
:
0
;
left
:
0
;
animation
:
fa-spin
12
s
steps
(
2
)
infinite
,
panelMaskIn
3
s
infinite
alternate
;
animation-delay
:
8
s
;][/
DIV
]
[
DIV
=
transform-origin
:
-
200
px
;
position
:
absolute
;
top
:
0
;
left
:
0
;
animation
:
fa-spin
12
s
steps
(
2
)
infinite
,
panelMaskIn
3
s
infinite
alternate
;
animation-delay
:
4
s
;][/
DIV
]
[
DIV
=
transform-origin
:
-
200
px
;
position
:
absolute
;
top
:
0
;
left
:
0
;
animation
:
fa-spin
12
s
steps
(
2
)
infinite
,
panelMaskIn
3
s
infinite
alternate
;][/
DIV
]
[/
DIV
]
Code: 
<bbxml>
  <templates>
  </templates>

  <classes>
    <class name="main">
      width: 150px;
      height: 150px;
      background-color: grey;
      border: 2px solid black;
      border-radius: 15px;
      position: relative;
      overflow: hidden;
      pointer-events: none;
      margin: 0 auto;
      z-index: 1;
      -webkit-filter: contrast(2);
      filter: contrast(2);
    </class>
    <class name="pic">
      transform-origin: -200px;
      position: absolute;
      top: 0;
      left: 0;
      animation: fa-spin 12s steps(2) infinite, panelMaskIn 3s infinite alternate;
    </class>
  </classes>

  <body>
    <d c="main">
      <d c="pic" o="animation-delay: 8s;"><img>https://source.unsplash.com/random/150x150?nature</img></d>
      <d c="pic" o="animation-delay: 4s;"><img>https://source.unsplash.com/random/150x150?animal</img></d>
      <d c="pic"><img>https://source.unsplash.com/random/150x150?city</img></d>
    </d>
  </body>
</bbxml>
​
​
Click to expand...

Interesting! Though I'm more used to gif-makers (>^^)> I guess this one is more customizable (in the sense of just a change of code instead of going to the gif-generator again).
 
IctoraPost said:
150x150
150x150
150x150

Based on Nano Nano 's image slideshow here, an actual practical application of the thing from the previous post. Pretty cool. She mentioned something about fading, so here we are. This uses the panelFadeIn animation, which unfortunately only fades up to 60% opacity leaving it slightly transparent. I've tried to fix it by having a grey background and putting in a filter, which isn't fully supported on all browsers and may or may not work. If you want to add more pictures, you'll have to adjust the timings a bit.

[DIV=width: 150px; height: 150px; background-color: grey; border: 2px solid black; border-radius: 15px; position: relative; overflow: hidden; pointer-events: none; margin: 0 auto; z-index: 1; -webkit-filter: contrast(2); filter: contrast(2);][DIV=transform-origin: -200px; position: absolute; top: 0; left: 0; animation: fa-spin 12s steps(2) infinite, panelMaskIn 3s infinite alternate; animation-delay: 8s;][IMG]https://source.unsplash.com/random/150x150?nature[/IMG][/DIV][DIV=transform-origin: -200px; position: absolute; top: 0; left: 0; animation: fa-spin 12s steps(2) infinite, panelMaskIn 3s infinite alternate; animation-delay: 4s;][IMG]https://source.unsplash.com/random/150x150?animal[/IMG][/DIV][DIV=transform-origin: -200px; position: absolute; top: 0; left: 0; animation: fa-spin 12s steps(2) infinite, panelMaskIn 3s infinite alternate;][IMG]https://source.unsplash.com/random/150x150?city[/IMG][/DIV][/DIV]​
[
DIV
=
width
:
150
px
;
height
:
150
px
;
background-color
:
grey
;
border
:
2
px
solid
black
;
border-radius
:
15
px
;
position
:
relative
;
overflow
:
hidden
;
pointer-events
:
none
;
margin
:
0
auto
;
z-index
:
1
;
-webkit-filter
:
contrast
(
2
);
filter
:
contrast
(
2
);]
[
DIV
=
transform-origin
:
-
200
px
;
position
:
absolute
;
top
:
0
;
left
:
0
;
animation
:
fa-spin
12
s
steps
(
2
)
infinite
,
panelMaskIn
3
s
infinite
alternate
;
animation-delay
:
8
s
;][/
DIV
]
[
DIV
=
transform-origin
:
-
200
px
;
position
:
absolute
;
top
:
0
;
left
:
0
;
animation
:
fa-spin
12
s
steps
(
2
)
infinite
,
panelMaskIn
3
s
infinite
alternate
;
animation-delay
:
4
s
;][/
DIV
]
[
DIV
=
transform-origin
:
-
200
px
;
position
:
absolute
;
top
:
0
;
left
:
0
;
animation
:
fa-spin
12
s
steps
(
2
)
infinite
,
panelMaskIn
3
s
infinite
alternate
;][/
DIV
]
[/
DIV
]
Code: 
<bbxml>
  <templates>
  </templates>

  <classes>
    <class name="main">
      width: 150px; 
      height: 150px; 
      background-color: grey;
      border: 2px solid black;
      border-radius: 15px;
      position: relative;
      overflow: hidden;
      pointer-events: none;
      margin: 0 auto;
      z-index: 1;
      -webkit-filter: contrast(2);
      filter: contrast(2);
    </class>
    <class name="pic">
      transform-origin: -200px; 
      position: absolute; 
      top: 0; 
      left: 0; 
      animation: fa-spin 12s steps(2) infinite, panelMaskIn 3s infinite alternate; 
    </class>
  </classes>

  <body>
    <d c="main">
      <d c="pic" o="animation-delay: 8s;"><img>https://source.unsplash.com/random/150x150?nature</img></d>
      <d c="pic" o="animation-delay: 4s;"><img>https://source.unsplash.com/random/150x150?animal</img></d>
      <d c="pic"><img>https://source.unsplash.com/random/150x150?city</img></d>
    </d>
  </body>
</bbxml>
Click to expand...
Ooooh the opacity only going up to 0.6 was the main issue with the fade version, but I didn't think of trying to fix that with a filter. Might make use of this sometime.
Ty so much for you and your genius! oAo
 


[DIV=position: relative; width: 500px; height: 500px; border-radius: 50%; margin: 0 auto; overflow: hidden;][DIV=transform: rotateY(-90deg); transform-style: preserve-3d; position: absolute;][DIV=animation: fa-spin 4s linear infinite; transform-style: preserve-3d;][DIV=transform: rotateY(90deg); width: 500px; height: 500px; border-radius: 50%; background: goldenrod;][/DIV][/DIV][/DIV][DIV=transform: rotateY(-90deg); transform-style: preserve-3d; position: absolute;][DIV=animation: fa-spin 4s linear infinite; transform-style: preserve-3d; animation-delay: -3.75s][DIV=transform: rotateY(90deg); width: 500px; height: 500px; border-radius: 50%; background: chocolate;][/DIV][/DIV][/DIV][DIV=transform: rotateY(-90deg); transform-style: preserve-3d; position: absolute;][DIV=animation: fa-spin 4s linear infinite; transform-style: preserve-3d; animation-delay: -3.5s][DIV=transform: rotateY(90deg); width: 500px; height: 500px; border-radius: 50%; background: brown;][/DIV][/DIV][/DIV][DIV=transform: rotateY(-90deg); transform-style: preserve-3d; position: absolute;][DIV=animation: fa-spin 4s linear infinite; transform-style: preserve-3d; animation-delay: -3.25s][DIV=transform: rotateY(90deg); width: 500px; height: 500px; border-radius: 50%; background: maroon;][/DIV][/DIV][/DIV][DIV=transform: rotateY(-90deg); transform-style: preserve-3d; position: absolute;][DIV=animation: fa-spin 4s linear infinite; transform-style: preserve-3d; animation-delay: -3s][DIV=transform: rotateY(90deg); width: 500px; height: 500px; border-radius: 50%; background: red;][/DIV][/DIV][/DIV][DIV=transform: rotateY(-90deg); transform-style: preserve-3d; position: absolute;][DIV=animation: fa-spin 4s linear infinite; transform-style: preserve-3d; animation-delay: -2.75s][DIV=transform: rotateY(90deg); width: 500px; height: 500px; border-radius: 50%; background: orange;][/DIV][/DIV][/DIV][DIV=transform: rotateY(-90deg); transform-style: preserve-3d; position: absolute;][DIV=animation: fa-spin 4s linear infinite; transform-style: preserve-3d; animation-delay: -2.5s][DIV=transform: rotateY(90deg); width: 500px; height: 500px; border-radius: 50%; background: gold;][/DIV][/DIV][/DIV][DIV=transform: rotateY(-90deg); transform-style: preserve-3d; position: absolute;][DIV=animation: fa-spin 4s linear infinite; transform-style: preserve-3d; animation-delay: -2.25s][DIV=transform: rotateY(90deg); width: 500px; height: 500px; border-radius: 50%; background: yellow;][/DIV][/DIV][/DIV][/DIV]
[DIV=position: relative; width: 500px; height: 500px; border-radius: 50%; margin: 0 auto; overflow: hidden;]
[DIV=transform: rotateY(-90deg); transform-style: preserve-3d; position: absolute;]
[DIV=animation: fa-spin 4s linear infinite; transform-style: preserve-3d;]
[DIV=transform: rotateY(90deg); width: 500px; height: 500px; border-radius: 50%; background: goldenrod;][/DIV]
[/DIV]
[/DIV]
[DIV=transform: rotateY(-90deg); transform-style: preserve-3d; position: absolute;]
[DIV=animation: fa-spin 4s linear infinite; transform-style: preserve-3d; animation-delay: -3.75s]
[DIV=transform: rotateY(90deg); width: 500px; height: 500px; border-radius: 50%; background: chocolate;][/DIV]
[/DIV]
[/DIV]
[DIV=transform: rotateY(-90deg); transform-style: preserve-3d; position: absolute;]
[DIV=animation: fa-spin 4s linear infinite; transform-style: preserve-3d; animation-delay: -3.5s]
[DIV=transform: rotateY(90deg); width: 500px; height: 500px; border-radius: 50%; background: brown;][/DIV]
[/DIV]
[/DIV]
[DIV=transform: rotateY(-90deg); transform-style: preserve-3d; position: absolute;]
[DIV=animation: fa-spin 4s linear infinite; transform-style: preserve-3d; animation-delay: -3.25s]
[DIV=transform: rotateY(90deg); width: 500px; height: 500px; border-radius: 50%; background: maroon;][/DIV]
[/DIV]
[/DIV]
[DIV=transform: rotateY(-90deg); transform-style: preserve-3d; position: absolute;]
[DIV=animation: fa-spin 4s linear infinite; transform-style: preserve-3d; animation-delay: -3s]
[DIV=transform: rotateY(90deg); width: 500px; height: 500px; border-radius: 50%; background: red;][/DIV]
[/DIV]
[/DIV]
[DIV=transform: rotateY(-90deg); transform-style: preserve-3d; position: absolute;]
[DIV=animation: fa-spin 4s linear infinite; transform-style: preserve-3d; animation-delay: -2.75s]
[DIV=transform: rotateY(90deg); width: 500px; height: 500px; border-radius: 50%; background: orange;][/DIV]
[/DIV]
[/DIV]
[DIV=transform: rotateY(-90deg); transform-style: preserve-3d; position: absolute;]
[DIV=animation: fa-spin 4s linear infinite; transform-style: preserve-3d; animation-delay: -2.5s]
[DIV=transform: rotateY(90deg); width: 500px; height: 500px; border-radius: 50%; background: gold;][/DIV]
[/DIV]
[/DIV]
[DIV=transform: rotateY(-90deg); transform-style: preserve-3d; position: absolute;]
[DIV=animation: fa-spin 4s linear infinite; transform-style: preserve-3d; animation-delay: -2.25s]
[DIV=transform: rotateY(90deg); width: 500px; height: 500px; border-radius: 50%; background: yellow;][/DIV]
[/DIV]
[/DIV]
[/DIV]
Code: 
<bbxml>
  <classes>
    <class name="main">
      position: relative;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      margin: 0 auto;
      overflow: hidden;
    </class>
    <class name="spn-1">
      transform: rotateY(-90deg);
      transform-style: preserve-3d;
      position: absolute;
    </class>
    <class name="spn-2">
      animation: fa-spin 4s linear infinite;
      transform-style: preserve-3d;
    </class>
    <class name="spn-3">
      transform: rotateY(90deg);
      width: 500px;
      height: 500px;
      border-radius: 50%;
    </class>
  </classes>

  <body>
    <d c="main">
      <d c="spn-1"><d c="spn-2"><d c="spn-3" o="background: goldenrod;"></d></d></d>
      <d c="spn-1"><d c="spn-2" o="animation-delay: -3.75s"><d c="spn-3" o="background: chocolate;"></d></d></d>
      <d c="spn-1"><d c="spn-2" o="animation-delay: -3.5s"><d c="spn-3" o="background: brown;"></d></d></d>
      <d c="spn-1"><d c="spn-2" o="animation-delay: -3.25s"><d c="spn-3" o="background: maroon;"></d></d></d>
      <d c="spn-1"><d c="spn-2" o="animation-delay: -3s"><d c="spn-3" o="background: red;"></d></d></d>
      <d c="spn-1"><d c="spn-2" o="animation-delay: -2.75s"><d c="spn-3" o="background: orange;"></d></d></d>
      <d c="spn-1"><d c="spn-2" o="animation-delay: -2.5s"><d c="spn-3" o="background: gold;"></d></d></d>
      <d c="spn-1"><d c="spn-2" o="animation-delay: -2.25s"><d c="spn-3" o="background: yellow;"></d></d></d>
    </d>
  </body>
</bbxml>
 
Hi.
This isn't a BBCode creation or anything, obviously.
I just wanted to post about this thing:
[div=whatever: something;][/div]
You don't need any content anymore.
You used to have to do [div=color: transparent;].[/div] or something similar in order to have a div on its own.
Now you don't need to do that.
Been like that since the beginning of July (thanks to Lyro).
Some of you may have noticed.
Some of you may not have.
Just wanted to say that.
Yep.
Bye.​
 
IctoraPost said:
Actually tell us when you implement stuff, Lyro!
Click to expand...

I was waiting for the official BBCode thread to be updated with the new codes before revealing anything. The backing implementation might still change too, though both codes' syntax should remain unaffected.
 
Hmm. I haven't redone my anchor tabs yet, so I might as well do that now.

TABS! MADE USING THE NEW [A] AND [GOTO] TAGS! And also using some padding and margins to make sure the site's sticky navbar is avoided. Yeah.

EWAF
Sit that, body, so brewed barista lungo cup trifecta cream blue mountain single shot spoon lungo. Whipped, flavour body, lungo carajillo, robust flavour barista iced cappuccino, grinder galão turkish, plunger pot cup viennese, cream brewed, est aged affogato cup galão. Et instant frappuccino body, cortado, milk doppio, frappuccino lungo beans plunger pot, whipped aftertaste aromatic eu beans. Turkish acerbic, froth ristretto, in dark aftertaste white aroma organic cortado extraction cappuccino aroma kopi-luwak filter plunger pot. Instant caramelization, strong, single origin, barista as robusta wings, est variety, ut redeye, aroma, arabica mocha eu lungo cream acerbic. Cortado caramelization cappuccino crema half and half macchiato as et eu spoon black fair trade, a, foam pumpkin spice shop robust lungo qui pumpkin spice body. Roast milk, café au lait flavour viennese coffee, caffeine, coffee instant, mocha lungo spoon siphon, filter grounds french press viennese plunger pot half and half.Trifecta coffee ut dark aged cup redeye java beans rich trifecta cup shop qui sit single origin breve, half and half, con panna, seasonal cream crema barista to go. Kopi-luwak cappuccino id, chicory lungo trifecta redeye that, aftertaste doppio plunger pot sit aromatic. Kopi-luwak strong kopi-luwak, ristretto dark siphon kopi-luwak, eu latte rich java, cinnamon, trifecta, a, sugar, brewed rich acerbic crema mazagran. Saucer, lungo latte et aroma spoon java, mocha viennese, lungo body rich spoon single shot beans galão.
Eat grass, throw it back up tuxedo cats always looking dapper. Sleep on dog bed, force dog to sleep on floor hopped up on catnip meow all night or lie in the sink all day eat grass, throw it back up. Hate dog with tail in the air annoy kitten brother with poking kitty kitty but jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed but spread kitty litter all over house so mark territory. Instantly break out into full speed gallop across the house for no reason chase ball of string so scream for no reason at 4 am and run in circles, so purr when being pet. Has closed eyes but still sees you fall asleep on the washing machine for adventure always. Chase laser steal the warm chair right after you get up for chew on cable sleep on dog bed, force dog to sleep on floor thug cat . Slap kitten brother with paw cat fur is the new black . Cat snacks. Lick the other cats go into a room to decide you didn't want to be in there anyway, so nap all day catch mouse and gave it as a present so knock dish off table head butt cant eat out of my own dish use lap as chair. Present belly, scratch hand when stroked. With tail in the air play riveting piece on synthesizer keyboard, i like big cats and i can not lie fooled again thinking the dog likes me for mew. Sit and stare purr while eating meow all night having their mate disturbing sleeping humans munch on tasty moths. Fooled again thinking the dog likes me going to catch the red dot today going to catch the red dot today chase ball of string scratch me there, elevator butt fall asleep on the washing machine yet stick butt in face. Eat owner's food. Soft kitty warm kitty little ball of furr intently sniff hand mew.
So get a witch's shawl on a broomstick you can crawl on. Were gonna pay a call on the Addams Family. The year is 1987 and NASA launches the last of Americas deep space probes.Its mission - to explore strange new worlds to seek out new life and new civilizations to boldly go where no man has gone before. Well we're movin' on up to the east side. To a deluxe apartment in the sky. Doin' it our way. There's nothing we wont try. Never heard the word impossible. This time there's no stopping us. So get a witch's shawl on a broomstick you can crawl on. Were gonna pay a call on the Addams Family. The Love Boat soon will be making another run. The Love Boat promises something for everyone. Said Californ'y is the place you ought to be So they loaded up the truck and moved to Beverly. Hills that is. Swimmin' pools movie stars. Boy the way Glen Miller played. Songs that made the hit parade. Guys like us we had it made. Those were the days. Fish don't fry in the kitchen and beans don't burn on the grill. Took a whole lotta tryin' just to get up that hill." Here's the story of a man named Brady who was busy with three boys of his own. Its mission - to explore strange new worlds to seek out new life and new civilizations to boldly go where no man has gone before. Goodbye gray sky hello blue. There's nothing can hold me when I hold you. Feels so right it cant be wrong. Rockin' and rollin' all week long. It's a beautiful day in this neighborhood a beautiful day for a neighbor. Would you be mine? Could you be mine? Its a neighborly day in this beautywood a neighborly day for a beauty. Would you be mine? Could you be mine. Believe it or not I'm walking on air. I never thought I could feel so free. Flying away on a wing and a prayer. Who could it be? Believe it or not its just me!
Icing pie cupcake muffin. Tootsie roll bear claw sesame snaps brownie. Muffin chocolate bear claw dessert. Lollipop gummi bears sweet chupa chups. Bonbon chocolate gummies. Icing dragée wafer donut muffin. Sweet muffin wafer macaroon jelly-o gummies chocolate bar. Candy lemon drops oat cake chocolate cupcake lollipop. Chupa chups icing macaroon wafer sweet icing carrot cake jelly croissant. Pudding donut croissant fruitcake soufflé liquorice tootsie roll oat cake. Marzipan cupcake cotton candy soufflé chocolate cake sesame snaps chocolate cake. Tart gingerbread oat cake pie biscuit donut jujubes fruitcake.Macaroon croissant tiramisu icing muffin sweet roll cheesecake. Icing chocolate bar ice cream ice cream sweet bonbon oat cake jelly-o. Bear claw lemon drops lollipop soufflé. Oat cake lemon drops muffin dessert. Sesame snaps bear claw chocolate fruitcake chupa chups pastry marzipan liquorice. Cake toffee cake muffin icing wafer candy canes. Apple pie chocolate cake apple pie candy canes. Candy chupa chups soufflé candy canes. Dragée cheesecake soufflé gummi bears chocolate powder jujubes donut dessert. Wafer candy canes sugar plum bonbon. Cheesecake cheesecake sugar plum. Fruitcake cake pastry brownie icing. Chupa chups gummies carrot cake topping pudding marshmallow liquorice sugar plum. Gingerbread chocolate cake bear claw jelly beans lollipop macaroon. Muffin cake caramels apple pie gummies tart. Cotton candy muffin bear claw lollipop topping brownie jelly macaroon. Candy canes chocolate bar biscuit gummi bears pudding cupcake candy canes. Muffin jujubes brownie jelly-o cake pastry. Icing pie toffee icing chupa chups pastry jelly-o bonbon. Marshmallow donut carrot cake powder cookie gummi bears tart. Liquorice chupa chups jelly jelly-o. Oat cake carrot cake oat cake macaroon.


[div=max-width: 600px; margin: 0 auto; color: black; text-align: justify;][div=float: left; padding: 5px 10px; background: lightgrey; margin-right: 10px; margin-bottom: 10px;][goto=firstestfirst]First[/goto][/div][div=float: left; padding: 5px 10px; background: lightgrey; margin-right: 10px; margin-bottom: 10px;][goto=secondestsecond]Second[/goto][/div][div=float: left; padding: 5px 10px; background: lightgrey; margin-right: 10px; margin-bottom: 10px;][goto=thirdestthird]Third[/goto][/div][div=float: left; padding: 5px 10px; background: lightgrey; margin-right: 10px; margin-bottom: 10px;][goto=fourthestfourth]Fourth[/goto][/div][div=clear:both][/div][div=overflow: hidden; background: lightgrey; height: 270px; padding: 20px; box-sizing: border-box;][div=overflow: hidden; height: 100%; padding-top: 170px; margin-top: -170px;][div=text-align: center; height: 100%; font-size: 80px; transform: rotate(180deg); position: relative][div=position: absolute; bottom: 0; width: 100%;]EWAF[/div][/div][a=firstestfirst][/a][div=margin-bottom: 170px;][/div][div=height: 100%; overflow-y: scroll; padding-right: 9999px; width: 100%;]Sit that, body, so brewed barista lungo cup trifecta cream blue mountain single shot spoon lungo. Whipped, flavour body, lungo carajillo, robust flavour barista iced cappuccino, grinder galão turkish, plunger pot cup viennese, cream brewed, est aged affogato cup galão. Et instant frappuccino body, cortado, milk doppio, frappuccino lungo beans plunger pot, whipped aftertaste aromatic eu beans. Turkish acerbic, froth ristretto, in dark aftertaste white aroma organic cortado extraction cappuccino aroma kopi-luwak filter plunger pot. Instant caramelization, strong, single origin, barista as robusta wings, est variety, ut redeye, aroma, arabica mocha eu lungo cream acerbic. Cortado caramelization cappuccino crema half and half macchiato as et eu spoon black fair trade, a, foam pumpkin spice shop robust lungo qui pumpkin spice body. Roast milk, café au lait flavour viennese coffee, caffeine, coffee instant, mocha lungo spoon siphon, filter grounds french press viennese plunger pot half and half.Trifecta coffee ut dark aged cup redeye java beans rich trifecta cup shop qui sit single origin breve, half and half, con panna, seasonal cream crema barista to go. Kopi-luwak cappuccino id, chicory lungo trifecta redeye that, aftertaste doppio plunger pot sit aromatic. Kopi-luwak strong kopi-luwak, ristretto dark siphon kopi-luwak, eu latte rich java, cinnamon, trifecta, a, sugar, brewed rich acerbic crema mazagran. Saucer, lungo latte et aroma spoon java, mocha viennese, lungo body rich spoon single shot beans galão.[/div][a=secondestsecond][/a][div=margin-bottom: 170px;][/div][div=height: 100%; overflow-y: scroll; padding-right: 9999px; width: 100%;]Eat grass, throw it back up tuxedo cats always looking dapper. Sleep on dog bed, force dog to sleep on floor hopped up on catnip meow all night or lie in the sink all day eat grass, throw it back up. Hate dog with tail in the air annoy kitten brother with poking kitty kitty but jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed but spread kitty litter all over house so mark territory. Instantly break out into full speed gallop across the house for no reason chase ball of string so scream for no reason at 4 am and run in circles, so purr when being pet. Has closed eyes but still sees you fall asleep on the washing machine for adventure always. Chase laser steal the warm chair right after you get up for chew on cable sleep on dog bed, force dog to sleep on floor thug cat . Slap kitten brother with paw cat fur is the new black . Cat snacks. Lick the other cats go into a room to decide you didn't want to be in there anyway, so nap all day catch mouse and gave it as a present so knock dish off table head butt cant eat out of my own dish use lap as chair. Present belly, scratch hand when stroked. With tail in the air play riveting piece on synthesizer keyboard, i like big cats and i can not lie fooled again thinking the dog likes me for mew. Sit and stare purr while eating meow all night having their mate disturbing sleeping humans munch on tasty moths. Fooled again thinking the dog likes me going to catch the red dot today going to catch the red dot today chase ball of string scratch me there, elevator butt fall asleep on the washing machine yet stick butt in face. Eat owner's food. Soft kitty warm kitty little ball of furr intently sniff hand mew.[/div][a=thirdestthird][/a][div=margin-bottom: 170px;][/div][div=height: 100%; overflow-y: scroll; padding-right: 9999px; width: 100%;]So get a witch's shawl on a broomstick you can crawl on. Were gonna pay a call on the Addams Family. The year is 1987 and NASA launches the last of Americas deep space probes.Its mission - to explore strange new worlds to seek out new life and new civilizations to boldly go where no man has gone before. Well we're movin' on up to the east side. To a deluxe apartment in the sky. Doin' it our way. There's nothing we wont try. Never heard the word impossible. This time there's no stopping us. So get a witch's shawl on a broomstick you can crawl on. Were gonna pay a call on the Addams Family. The Love Boat soon will be making another run. The Love Boat promises something for everyone. Said Californ'y is the place you ought to be So they loaded up the truck and moved to Beverly. Hills that is. Swimmin' pools movie stars. Boy the way Glen Miller played. Songs that made the hit parade. Guys like us we had it made. Those were the days. Fish don't fry in the kitchen and beans don't burn on the grill. Took a whole lotta tryin' just to get up that hill." Here's the story of a man named Brady who was busy with three boys of his own. Its mission - to explore strange new worlds to seek out new life and new civilizations to boldly go where no man has gone before. Goodbye gray sky hello blue. There's nothing can hold me when I hold you. Feels so right it cant be wrong. Rockin' and rollin' all week long. It's a beautiful day in this neighborhood a beautiful day for a neighbor. Would you be mine? Could you be mine? Its a neighborly day in this beautywood a neighborly day for a beauty. Would you be mine? Could you be mine. Believe it or not I'm walking on air. I never thought I could feel so free. Flying away on a wing and a prayer. Who could it be? Believe it or not its just me![/div][a=fourthestfourth][/a][div=margin-bottom: 170px;][/div][div=height: 100%; overflow-y: scroll; padding-right: 9999px; width: 100%;]Icing pie cupcake muffin. Tootsie roll bear claw sesame snaps brownie. Muffin chocolate bear claw dessert. Lollipop gummi bears sweet chupa chups. Bonbon chocolate gummies. Icing dragée wafer donut muffin. Sweet muffin wafer macaroon jelly-o gummies chocolate bar. Candy lemon drops oat cake chocolate cupcake lollipop. Chupa chups icing macaroon wafer sweet icing carrot cake jelly croissant. Pudding donut croissant fruitcake soufflé liquorice tootsie roll oat cake. Marzipan cupcake cotton candy soufflé chocolate cake sesame snaps chocolate cake. Tart gingerbread oat cake pie biscuit donut jujubes fruitcake.Macaroon croissant tiramisu icing muffin sweet roll cheesecake. Icing chocolate bar ice cream ice cream sweet bonbon oat cake jelly-o. Bear claw lemon drops lollipop soufflé. Oat cake lemon drops muffin dessert. Sesame snaps bear claw chocolate fruitcake chupa chups pastry marzipan liquorice. Cake toffee cake muffin icing wafer candy canes. Apple pie chocolate cake apple pie candy canes. Candy chupa chups soufflé candy canes. Dragée cheesecake soufflé gummi bears chocolate powder jujubes donut dessert. Wafer candy canes sugar plum bonbon. Cheesecake cheesecake sugar plum. Fruitcake cake pastry brownie icing. Chupa chups gummies carrot cake topping pudding marshmallow liquorice sugar plum. Gingerbread chocolate cake bear claw jelly beans lollipop macaroon. Muffin cake caramels apple pie gummies tart. Cotton candy muffin bear claw lollipop topping brownie jelly macaroon. Candy canes chocolate bar biscuit gummi bears pudding cupcake candy canes. Muffin jujubes brownie jelly-o cake pastry. Icing pie toffee icing chupa chups pastry jelly-o bonbon. Marshmallow donut carrot cake powder cookie gummi bears tart. Liquorice chupa chups jelly jelly-o. Oat cake carrot cake oat cake macaroon.[/div][/div][/div][/div]
[div=max-width: 600px; margin: 0 auto; color: black; text-align: justify;]

[div=float: left; padding: 5px 10px; background: lightgrey; margin-right: 10px; margin-bottom: 10px;]
[goto=firstestfirst]First[/goto]
[/div]
[div=float: left; padding: 5px 10px; background: lightgrey; margin-right: 10px; margin-bottom: 10px;]
[goto=secondestsecond]Second[/goto]
[/div]
[div=float: left; padding: 5px 10px; background: lightgrey; margin-right: 10px; margin-bottom: 10px;]
[goto=thirdestthird]Third[/goto]
[/div]
[div=float: left; padding: 5px 10px; background: lightgrey; margin-right: 10px; margin-bottom: 10px;]
[goto=fourthestfourth]Fourth[/goto]
[/div]
[div=clear: both;][/div]

[div=overflow: hidden; background: lightgrey; height: 270px; padding: 20px; box-sizing: border-box;]
[div=overflow: hidden; height: 100%; padding-top: 170px; margin-top: -170px;]

[div=text-align: center; height: 100%; font-size: 80px; transform: rotate(180deg); position: relative]
[div=position: absolute; bottom: 0; width: 100%;]EWAF[/div]
[/div]

[a=firstestfirst][/a]
[div=margin-bottom: 170px;][/div]
[div=height: 100%; overflow-y: scroll; padding-right: 9999px; width: 100%;]Sit that, body, so brewed barista lungo cup trifecta cream blue mountain single shot spoon lungo. Whipped, flavour body, lungo carajillo, robust flavour barista iced cappuccino, grinder galão turkish, plunger pot cup viennese, cream brewed, est aged affogato cup galão. Et instant frappuccino body, cortado, milk doppio, frappuccino lungo beans plunger pot, whipped aftertaste aromatic eu beans. Turkish acerbic, froth ristretto, in dark aftertaste white aroma organic cortado extraction cappuccino aroma kopi-luwak filter plunger pot. Instant caramelization, strong, single origin, barista as robusta wings, est variety, ut redeye, aroma, arabica mocha eu lungo cream acerbic. Cortado caramelization cappuccino crema half and half macchiato as et eu spoon black fair trade, a, foam pumpkin spice shop robust lungo qui pumpkin spice body. Roast milk, café au lait flavour viennese coffee, caffeine, coffee instant, mocha lungo spoon siphon, filter grounds french press viennese plunger pot half and half.Trifecta coffee ut dark aged cup redeye java beans rich trifecta cup shop qui sit single origin breve, half and half, con panna, seasonal cream crema barista to go. Kopi-luwak cappuccino id, chicory lungo trifecta redeye that, aftertaste doppio plunger pot sit aromatic. Kopi-luwak strong kopi-luwak, ristretto dark siphon kopi-luwak, eu latte rich java, cinnamon, trifecta, a, sugar, brewed rich acerbic crema mazagran. Saucer, lungo latte et aroma spoon java, mocha viennese, lungo body rich spoon single shot beans galão.[/div]

[a=secondestsecond][/a]
[div=margin-bottom: 170px;][/div]
[div=height: 100%; overflow-y: scroll; padding-right: 9999px; width: 100%;]Sit that, body, so brewed barista lungo cup trifecta cream blue mountain single shot spoon lungo. Whipped, flavour body, lungo carajillo, robust flavour barista iced cappuccino, grinder galão turkish, plunger pot cup viennese, cream brewed, est aged affogato cup galão. Et instant frappuccino body, cortado, milk doppio, frappuccino lungo beans plunger pot, whipped aftertaste aromatic eu beans. Turkish acerbic, froth ristretto, in dark aftertaste white aroma organic cortado extraction cappuccino aroma kopi-luwak filter plunger pot. Instant caramelization, strong, single origin, barista as robusta wings, est variety, ut redeye, aroma, arabica mocha eu lungo cream acerbic. Cortado caramelization cappuccino crema half and half macchiato as et eu spoon black fair trade, a, foam pumpkin spice shop robust lungo qui pumpkin spice body. Roast milk, café au lait flavour viennese coffee, caffeine, coffee instant, mocha lungo spoon siphon, filter grounds french press viennese plunger pot half and half.Trifecta coffee ut dark aged cup redeye java beans rich trifecta cup shop qui sit single origin breve, half and half, con panna, seasonal cream crema barista to go. Kopi-luwak cappuccino id, chicory lungo trifecta redeye that, aftertaste doppio plunger pot sit aromatic. Kopi-luwak strong kopi-luwak, ristretto dark siphon kopi-luwak, eu latte rich java, cinnamon, trifecta, a, sugar, brewed rich acerbic crema mazagran. Saucer, lungo latte et aroma spoon java, mocha viennese, lungo body rich spoon single shot beans galão.[/div]

[a=thirdestthird][/a]
[div=margin-bottom: 170px;][/div]
[div=height: 100%; overflow-y: scroll; padding-right: 9999px; width: 100%;]Sit that, body, so brewed barista lungo cup trifecta cream blue mountain single shot spoon lungo. Whipped, flavour body, lungo carajillo, robust flavour barista iced cappuccino, grinder galão turkish, plunger pot cup viennese, cream brewed, est aged affogato cup galão. Et instant frappuccino body, cortado, milk doppio, frappuccino lungo beans plunger pot, whipped aftertaste aromatic eu beans. Turkish acerbic, froth ristretto, in dark aftertaste white aroma organic cortado extraction cappuccino aroma kopi-luwak filter plunger pot. Instant caramelization, strong, single origin, barista as robusta wings, est variety, ut redeye, aroma, arabica mocha eu lungo cream acerbic. Cortado caramelization cappuccino crema half and half macchiato as et eu spoon black fair trade, a, foam pumpkin spice shop robust lungo qui pumpkin spice body. Roast milk, café au lait flavour viennese coffee, caffeine, coffee instant, mocha lungo spoon siphon, filter grounds french press viennese plunger pot half and half.Trifecta coffee ut dark aged cup redeye java beans rich trifecta cup shop qui sit single origin breve, half and half, con panna, seasonal cream crema barista to go. Kopi-luwak cappuccino id, chicory lungo trifecta redeye that, aftertaste doppio plunger pot sit aromatic. Kopi-luwak strong kopi-luwak, ristretto dark siphon kopi-luwak, eu latte rich java, cinnamon, trifecta, a, sugar, brewed rich acerbic crema mazagran. Saucer, lungo latte et aroma spoon java, mocha viennese, lungo body rich spoon single shot beans galão.[/div]

[a=fourthestfourth][/a]
[div=margin-bottom: 170px;][/div]
[div=height: 100%; overflow-y: scroll; padding-right: 9999px; width: 100%;]Sit that, body, so brewed barista lungo cup trifecta cream blue mountain single shot spoon lungo. Whipped, flavour body, lungo carajillo, robust flavour barista iced cappuccino, grinder galão turkish, plunger pot cup viennese, cream brewed, est aged affogato cup galão. Et instant frappuccino body, cortado, milk doppio, frappuccino lungo beans plunger pot, whipped aftertaste aromatic eu beans. Turkish acerbic, froth ristretto, in dark aftertaste white aroma organic cortado extraction cappuccino aroma kopi-luwak filter plunger pot. Instant caramelization, strong, single origin, barista as robusta wings, est variety, ut redeye, aroma, arabica mocha eu lungo cream acerbic. Cortado caramelization cappuccino crema half and half macchiato as et eu spoon black fair trade, a, foam pumpkin spice shop robust lungo qui pumpkin spice body. Roast milk, café au lait flavour viennese coffee, caffeine, coffee instant, mocha lungo spoon siphon, filter grounds french press viennese plunger pot half and half.Trifecta coffee ut dark aged cup redeye java beans rich trifecta cup shop qui sit single origin breve, half and half, con panna, seasonal cream crema barista to go. Kopi-luwak cappuccino id, chicory lungo trifecta redeye that, aftertaste doppio plunger pot sit aromatic. Kopi-luwak strong kopi-luwak, ristretto dark siphon kopi-luwak, eu latte rich java, cinnamon, trifecta, a, sugar, brewed rich acerbic crema mazagran. Saucer, lungo latte et aroma spoon java, mocha viennese, lungo body rich spoon single shot beans galão.[/div]

[/div]
[/div]
[/div]
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)

Similar threads

arsensonfire
Help Anyone's shop still open?
Replies
1
Views
237
The Dark Wizard
The Dark Wizard
roxybirdie
Closed music player button [resolved]
Replies
2
Views
409
roxybirdie
roxybirdie
Back
Top