Resource Dreamt up Codes.

[IdyllicDreamer]

I like coding, I like the way strings of words, letters, and characters can work together to make something visually appear on a screen, something which is either aesthetically pleasing, or functional. I like trying to combined it all to create things, and I love building little work spaces. I enjoy coding so much I built a personalized database of files on my computer which link between one another, that I open in my browser. Not that I can so easily share that here, outside of screenshots.

After talking to someone today I decided to share my current, and future, codes. Currently I only have something rather simple.

If you have something you would like coded, maybe I can help. I make no promises to get to it right away, or to do it at all. This is my time involved after all. But, asking never hurts.

 

[IdyllicDreamer]

[class=DCBox]width:80%;height:auto;min-height:350px;padding:10px;border:3px double #ffffff;margin:auto;border-radius:10px;position:relative;[/class] [class=DCName]height:26px;border-bottom:double 4px #ffffff;border-bottom-right-radius:90%;border-bottom-left-radius:90%;margin:auto;text-align:center;font-size:25px;margin-left:210px;margin-bottom:-10px;[/class] [class=DCImg]width:205px;height:320px;float:left;overflow:none;margin-right:10px;margin-top:-20px;[/class] [class=DreamerCredit]font-size:8px;position:absolute;bottom:0;right:1px;[/class] [class name=DCBox]border-color:#EE9FFC;background:#444444;color:#ffffff;font-size:15px;line-height:18px;[/class] [class name=DCName]border-color:#EE9FFC;[/class] [class name=DCImg]background:url('https://i.pinimg.com/564x/29/04/9f/29049f166c0e110a1e5cdd2bbc6e0b7b.jpg');background-size:cover;[/class]
[div class=DCBox][div class=DCName]CharacterName[/div][div class=DCImg][/div][div class=DreamerCredit]Created by @IdyllicDreamer[/div]
Post text goes here! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow!

When changing the colors/picture I created a 'Class Name' element, simply replace the code there for it. If you want to resize the picture space, well, the Height/Width in PostImg is what you want for that, not the Class Name, regular Class segment. In the current setup of this code the image will ALWAYS resize to either fill it vertically, or horizontally, cutting off whatever slips out. Keep this in mind and all will be fine~

Edit, came back and fixed some things up.
[/div]

Spoiler: Defiant Curve, Right Side

[nobr][class=DCBox]width:80%;height:auto;min-height:350px;padding:10px;border:3px double #ffffff;margin:auto;border-radius:10px;position:relative;[/class]
[class=DCName]height:26px;border-bottom:double 4px #ffffff;border-bottom-right-radius:90%;border-bottom-left-radius:90%;margin:auto;text-align:center;font-size:25px;margin-right:210px;margin-bottom:-10px;[/class]
[class=DCImg]width:205px;height:320px;float:right;overflow:none;margin-left:10px;margin-top:-20px;[/class]
[class=DreamerCredit]font-size:8px;position:absolute;bottom:0;right:1px;[/class]

[class name=DCBox]border-color:#EE9FFC;background:#444444;color:#ffffff;font-size:15px;line-height:18px;[/class]
[class name=DCName]border-color:#EE9FFC;[/class]
[class name=DCImg]background:url('https://i.pinimg.com/564x/29/04/9f/29049f166c0e110a1e5cdd2bbc6e0b7b.jpg');background-size:cover;[/class]
[/nobr]
[div class=DCBox][div class=DCName][font=Roboto]CharacterName[/font][/div][div class=DCImg][/div][div class=DreamerCredit]Created by @IdyllicDreamer[/div]
Post text goes here! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow!
[/div]

Spoiler: Defiant Curve, Left Side

[nobr][class=DCBox]width:80%;height:auto;min-height:350px;padding:10px;border:3px double #ffffff;margin:auto;border-radius:10px;position:relative;[/class]
[class=DCName]height:26px;border-bottom:double 4px #ffffff;border-bottom-right-radius:90%;border-bottom-left-radius:90%;margin:auto;text-align:center;font-size:25px;margin-left:210px;margin-bottom:-10px;[/class]
[class=DCImg]width:205px;height:320px;float:left;overflow:none;margin-right:10px;margin-top:-20px;[/class]
[class=DreamerCredit]font-size:8px;position:absolute;bottom:0;right:1px;[/class]

[class name=DCBox]border-color:#EE9FFC;background:#444444;color:#ffffff;font-size:15px;line-height:18px;[/class]
[class name=DCName]border-color:#EE9FFC;[/class]
[class name=DCImg]background:url('https://i.pinimg.com/564x/29/04/9f/29049f166c0e110a1e5cdd2bbc6e0b7b.jpg');background-size:cover;[/class]
[/nobr]
[div class=DCBox][div class=DCName][font=Roboto]CharacterName[/font][/div][div class=DCImg][/div][div class=DreamerCredit]Created by @IdyllicDreamer[/div]
Post text goes here! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow!
[/div]

 

[IdyllicDreamer]

[class=BBBox]width:75%;height:auto;min-height:250px;border: 5px solid #ffffff;margin:auto;margin-top:50px;position:relative;padding:5px;[/class] [class=BBBall]width:200px;height:270px;padding:5px;float:Left;border-radius:10%;margin-top:-50px;margin-left:-100px;margin-right:10px;[/class] [class=BBAvie]width:100%;height:100%;border-radius:10%;overflow:hidden;[/class] [class=BBName]height:40px;padding-top:5px;margin-top:20px;margin-right:-5px;text-align:center;[/class] [class=BBBar]width:98%;height:3px;margin:auto;[/class] [class=DreamerCredit]font-size:8px;position:absolute;bottom:0;right:1px;[/class] [class name=BBBox]background:#333333;border-color:#EDD100;color:#ffffff;font-size:15px;line-height:18px;[/class] [class name=BBBall]background:#EDD100;[/class] [class name=BBAvie]background:url('https://i.pinimg.com/564x/10/1d/a4/101da48a905e1831c2aba7bf31d131ea.jpg');background-size:cover;background-position:-20px 0px;[/class] [class name=BBName]background:#EDD100;color:#990000;font-size:25px;line-height:35px;[/class]
[div class=BBBox][div class=BBBall][div class=BBAvie][/div][/div][div class=BBName]CharacterName[/div][div class=DreamerCredit]Created by @IdyllicDreamer[/div]
Post goes here! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow!

Edit, came back and modified a few segments that could use it.[/div]

Spoiler: Beyond Bubble, Left Side

[nobr][class=BBBox]width:75%;height:auto;min-height:250px;border: 5px solid #ffffff;margin:auto;margin-top:50px;position:relative;padding:5px;[/class]
[class=BBBall]width:200px;height:270px;padding:5px;float:Left;border-radius:10%;margin-top:-50px;margin-left:-100px;margin-right:10px;[/class]
[class=BBAvie]width:100%;height:100%;border-radius:10%;overflow:hidden;[/class]
[class=BBName]height:40px;padding-top:5px;margin-top:20px;margin-left:-5px;text-align:center;[/class]
[class=BBBar]width:98%;height:3px;margin:auto;[/class]
[class=DreamerCredit]font-size:8px;position:absolute;bottom:0;right:1px;[/class]

[class name=BBBox]background:#333333;border-color:#EDD100;color:#ffffff;font-size:15px;line-height:18px;[/class]
[class name=BBBall]background:#EDD100;[/class]
[class name=BBAvie]background:url('https://i.pinimg.com/564x/10/1d/a4/101da48a905e1831c2aba7bf31d131ea.jpg');background-size:cover;[/class]
[class name=BBName]background:#EDD100;color:#990000;font-size:25px;line-height:35px;[/class]

[/nobr]
[div class=BBBox][div class=BBBall][div class=BBAvie][/div][/div][div class=BBName][font=Roboto]CharacterName[/font][/div][div class=DreamerCredit]Created by @IdyllicDreamer[/div]
Post goes here! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow!

Edit, came back and modified a few segments that could use it.[/div]

Spoiler: Beyond Bubble, Right Side

[nobr][class=BBBox]width:75%;height:auto;min-height:250px;border: 5px solid #ffffff;margin:auto;margin-top:50px;position:relative;padding:5px;[/class]
[class=BBBall]width:200px;height:270px;padding:5px;float:right;border-radius:10%;margin-top:-50px;margin-right:-100px;margin-left:10px;[/class]
[class=BBAvie]width:100%;height:100%;border-radius:10%;overflow:hidden;[/class]
[class=BBName]height:40px;padding-top:5px;margin-top:20px;margin-left:-5px;text-align:center;[/class]
[class=BBBar]width:98%;height:3px;margin:auto;[/class]
[class=DreamerCredit]font-size:8px;position:absolute;bottom:0;right:1px;[/class]

[class name=BBBox]background:#333333;border-color:#EDD100;color:#ffffff;font-size:15px;line-height:18px;[/class]
[class name=BBBall]background:#EDD100;[/class]
[class name=BBAvie]background:url('https://i.pinimg.com/564x/10/1d/a4/101da48a905e1831c2aba7bf31d131ea.jpg');background-size:cover;[/class]
[class name=BBName]background:#EDD100;color:#990000;font-size:25px;line-height:35px;[/class]

[/nobr]
[div class=BBBox][div class=BBBall][div class=BBAvie][/div][/div][div class=BBName][font=Roboto]CharacterName[/font][/div][div class=DreamerCredit]Created by @IdyllicDreamer[/div]
Post goes here! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow!

Edit, came back and modified a few segments that could use it.[/div]

 

[IdyllicDreamer]

[class=SEBox]width:75%;height:auto;min-height:250px;border: 5px solid #ffffff;margin:auto;margin-top:80px;position:relative;padding:5px;padding-top:25px;padding-bottom:10px;[/class] [class=SETri]width:0;height:0;border-style:solid;border-width: 0 0 255px 255px;position:relative;margin-top:-94px;margin-left:-85px;float:left;margin-right:5px;[/class] [class=SETri2]height:348px;width:348px;position:relative;overflow:hidden;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);top:80px;margin-left:-175px;[/class] [class=SEAvi]height:100%;width:100%;position:relative;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);display:block;position:absolute;left:-72%;[/class] [class=SEAvi2]height:100%;width:100%;-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);transform: rotate(-90deg);[/class] [class=SEName]width:auto;height:26px;position:absolute;top:-3px;right:0px;text-align:right;border-bottom:solid 3px;padding:5px;margin-right:-5px;[/class] [class=Credit]font-size:8px;position:absolute;bottom:0;right:1px;[/class] [class name=SEBox]background:#333333;border-color:#ffa0c4;color:#ffffff;font-size:15px;line-height:18px;[/class] [class name=SETri]border-color:transparent transparent #ffa0c4 transparent;pointer-events:none;[/class] [class name=SEAvi2]background:url(https://i.postimg.cc/W4y0z7RZ/Sylveon.png);background-size:cover;[/class] [class name=SEName]color:#22c0f9;border-bottom-color:#ffa0c4;font-size:30px;line-height:43px;[/class] [div class=SEBox][div class=SEName]CharacterName[/div][div class=SETri][div class=SETri2][div class=SEAvi][div class=SEAvi2][/div][/div][/div][/div][div class=Credit]Created by IdyllicDreamer [/div]
It has been awhile since I have posted one of these up, and while mine a hardly the flashiest of post-codes, I enjoy the simplicity of them. This one is a little more odd than the others, and the space for the picture requires some photo manipulation skills, because a great majority of the image will simply be cut out. I'll provide a link to the picture I used in this example to show you how much is empty space. Sylveon

Post goes here! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow!

Note, some segment of this code overlaps the text, resulting in unselectable portions, such as much of the Sylveon Link provided. Since I would not say this code is designed for that on a general basis, I have no intention of trying to fix it.
Edit, I fixed it. It was an easy fix, oops. As well as modified a couple sections, and added a flipped picture version. I'm not including a flipped Sylveon picture for it, but it all lines up the same just... reversed.
[/div]

Spoiler: Shattered Edge Code, Left Picture

[nobr][class=SEBox]width:75%;height:auto;min-height:250px;border: 5px solid #ffffff;margin:auto;margin-top:80px;position:relative;padding:5px;padding-top:25px;padding-bottom:10px;[/class]
[class=SETri]width:0;height:0;border-style:solid;border-width: 0 0 255px 255px;position:relative;margin-top:-94px;margin-left:-85px;float:left;margin-right:5px;[/class]
[class=SETri2]height:348px;width:348px;position:relative;overflow:hidden;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);top:80px;margin-left:-175px;[/class]
[class=SEAvi]height:100%;width:100%;position:relative;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);display:block;position:absolute;left:-72%;[/class]
[class=SEAvi2]height:100%;width:100%;-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);transform: rotate(-90deg);[/class]
[class=SEName]width:auto;height:26px;position:absolute;top:-3px;right:0px;text-align:right;border-bottom:solid 3px;padding:5px;margin-right:-5px;[/class]
[class=Credit]font-size:8px;position:absolute;bottom:0;right:1px;[/class]

[class name=SEBox]background:#333333;border-color:#ffa0c4;color:#ffffff;font-size:15px;line-height:18px;[/class]
[class name=SETri]border-color:transparent transparent #ffa0c4 transparent;pointer-events:none;[/class]
[class name=SEAvi2]background:url(https://i.postimg.cc/W4y0z7RZ/Sylveon.png);background-size:cover;[/class]
[class name=SEName]color:#22c0f9;border-bottom-color:#ffa0c4;font-size:30px;line-height:43px;[/class]

[/nobr][div class=SEBox][div class=SEName][font=Roboto]CharacterName[/font][/div][div class=SETri][div class=SETri2][div class=SEAvi][div class=SEAvi2][/div][/div][/div][/div][div class=Credit]Created by @IdyllicDreamer[/div]
Post goes here! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow!
[/div]

Spoiler: Shattered Edge Code, Right Picture

[nobr][class=SEBox]width:75%;height:auto;min-height:250px;border: 5px solid #ffffff;margin:auto;margin-top:80px;position:relative;padding:5px;padding-top:25px;padding-bottom:10px;[/class]
[class=SETri]width:0;height:0;border-style:solid;border-width:255px 0 0 255px;position:relative;margin-top:-94px;margin-right:-85px;float:right;margin-left:5px;[/class]
[class=SETri2]height:348px;width:348px;position:absolute;overflow:hidden;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);top:0px;right:0px;margin-top:-175px;margin-right:80px;[/class]
[class=SEAvi]height:100%;width:100%;position:relative;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);transform: rotate(-45deg);display:block;position:absolute;right:-72%;[/class]
[class=SEAvi2]height:100%;width:100%;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);transform: rotate(90deg);[/class]
[class=SEName]width:auto;height:26px;position:absolute;top:-3px;left:0px;text-align:left;border-bottom:solid 3px;padding:5px;margin-left:-5px;[/class]
[class=Credit]font-size:8px;position:absolute;bottom:0;right:1px;[/class]

[class name=SEBox]background:#333333;border-color:#ffa0c4;color:#ffffff;font-size:15px;line-height:18px;[/class]
[class name=SETri]border-color:transparent transparent transparent #ffa0c4;pointer-events:none;[/class]
[class name=SEAvi2]background:url(https://i.postimg.cc/W4y0z7RZ/Sylveon.png);background-size:cover;[/class]
[class name=SEName]color:#22c0f9;border-bottom-color:#ffa0c4;font-size:30px;line-height:43px;[/class]

[/nobr][div class=SEBox][div class=SEName][font=Roboto]CharacterName[/font][/div][div class=SETri][div class=SETri2][div class=SEAvi][div class=SEAvi2][/div][/div][/div][/div][div class=Credit]Created by @IdyllicDreamer[/div]
It has been awhile since I have posted one of these up, and while mine a hardly the flashiest of post-codes, I enjoy the simplicity of them. This one is a little more odd than the others, and the space for the picture requires some photo manipulation skills, because a great majority of the image will simply be cut out. I'll provide a link to the picture I used in this example to show you how much is empty space. Sylveon

Post goes here! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow!

Note, some segment of this code overlaps the text, resulting in unselectable portions, such as much of the Sylveon Link provided. Since I would not say this code is designed for that on a general basis, I have no intention of trying to fix it.
Edit, I fixed it. As well as modified a couple sections. It was an easy fix, oops.
[/div]

 

[IdyllicDreamer]

[class=DualBox]width:80%;min-height:305px;margin:auto;border:3px double;padding:5px;position:relative;[/class] [class=DualName]width:50%;height:32px;margin-top:-6px;text-align:center;border-bottom:solid 1px #ffffff;margin:auto;margin-left:50px;[/class] [class=DualAvie]width:215px;height:300px;float:right;overflow:hidden;border:3px double;margin-top:-41px;margin-left:5px;margin-right:-8px;[/class] [class=DualAvie2]width:100%;height:100%;[/class] [class=DreamerCredit]font-size:8px;position:absolute;bottom:-2px;right:2px;[/class] [class name=DualBox]background:#333333;color:#ffffff;border-color:#33c3f7 #85e853 #85e853 #33c3f7;font-size:15px;line-height:18px;[/class] [class name=DualName]font-size:25px;line-height:33px;border-image:linear-gradient(to right, #33c3f7 25%, #85e853 25%, #85e853 50%,#33c3f7 50%, #33c3f7 75%, #85e853 75%) 1;[/class] [class name=DualAvie]background:#333333;border-color:#85e853 #33c3f7 #33c3f7 #85e853;[/class] [class name=DualAvie2]background:url('https://i.pinimg.com/564x/a8/39/ae/a839aee7add48c568aa65c4092a038f5.jpg');background-size:cover;background-position:-10px 0px;[/class]
[div class=DualBox][div class=DualName]Character Name[/div][div class=DualAvie][div class=DualAvie2][/div][/div][div class=DreamerCredit]Created by @IdyllicDreamer[/div]
Post goes here! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow!

Not a lot to say on this one, I made it simple to fit into the idea of someone can see it easily on a phone, and I thought it looked nice.
[/div]

Spoiler: Duality, Right Picture

[nobr]
[class=DualBox]width:80%;min-height:305px;margin:auto;border:3px double;padding:5px;position:relative;[/class]
[class=DualName]width:50%;height:32px;margin-top:-6px;text-align:center;border-bottom:solid 1px #ffffff;margin:auto;margin-left:50px;[/class]
[class=DualAvie]width:215px;height:300px;float:right;overflow:hidden;border:3px double;margin-top:-35px;margin-left:5px;margin-right:-8px;[/class]
[class=DualAvie2]width:100%;height:100%;[/class]
[class=DreamerCredit]font-size:8px;position:absolute;bottom:-2px;right:2px;[/class]

[class name=DualBox]background:#333333;color:#ffffff;border-color:#33c3f7 #85e853 #85e853 #33c3f7;font-size:15px;line-height:18px;[/class]
[class name=DualName]font-size:25px;line-height:33px;border-image:linear-gradient(to right, #33c3f7 25%, #85e853 25%, #85e853 50%,#33c3f7 50%, #33c3f7 75%, #85e853 75%) 1;[/class]
[class name=DualAvie]background:#333333;border-color:#85e853 #33c3f7 #33c3f7 #85e853;[/class]
[class name=DualAvie2]background:url('https://i.pinimg.com/564x/a8/39/ae/a839aee7add48c568aa65c4092a038f5.jpg');background-size:cover;background-position:-10px 0px;[/class]
[/nobr]
[div class=DualBox][div class=DualName][font=Roboto]Character Name[/font][/div][div class=DualAvie][div class=DualAvie2][/div][/div][div class=DreamerCredit]Created by @IdyllicDreamer[/div]
Post goes here! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow!
[/div]

Spoiler: Duality, Left Picture

[nobr]
[class=DualBox]width:80%;min-height:305px;margin:auto;border:3px double;padding:5px;position:relative;[/class]
[class=DualName]width:50%;height:32px;margin-top:-6px;text-align:center;border-bottom:solid 1px #ffffff;margin:auto;margin-right:50px;[/class]
[class=DualAvie]width:215px;height:300px;float:left;overflow:hidden;border:3px double;margin-top:-41px;margin-right:5px;margin-left:-8px;[/class]
[class=DualAvie2]width:100%;height:100%;[/class]
[class=DreamerCredit]font-size:8px;position:absolute;bottom:-2px;right:2px;[/class]

[class name=DualBox]background:#333333;color:#ffffff;border-color:#85e853 #33c3f7 #33c3f7 #85e853;font-size:15px;line-height:18px;[/class]
[class name=DualName]font-size:25px;line-height:33px;border-image:linear-gradient(to right, #85e853 25%, #33c3f7 25%, #33c3f7 50%,#85e853 50%, #85e853 75%, #33c3f7 75%) 1;[/class]
[class name=DualAvie]background:#333333;border-color:#33c3f7#85e853 #85e853 #33c3f7;[/class]
[class name=DualAvie2]background:url('https://i.pinimg.com/564x/a8/39/ae/a839aee7add48c568aa65c4092a038f5.jpg');background-size:cover;background-position:-10px 0px;[/class]
[/nobr]
[div class=DualBox][div class=DualName][font=Roboto]Character Name[/font][/div][div class=DualAvie][div class=DualAvie2][/div][/div][div class=DreamerCredit]Created by @IdyllicDreamer[/div]
Post goes here! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow!
[/div]

 

[IdyllicDreamer]

[class=RRBox]width:85%;height:auto;min-height:200px;border:1px solid transparent;margin:auto;padding:1px;position:relative;[/class] [class=RRMiniBox]display:inline-block;min-width:98%;border:1px solid transparent;[/class] [class=RRPsuedoBox]display:inline-block;min-width:98%;padding:5px;margin-top:40px;[/class] [class=RRAvie]width:220px;height:295px;float:right;margin-top:-45px;margin-right:-5px;margin-left:5px;border-bottom:1px solid transparent;border-left:1px solid transparent;[/class] [class=RRName]position:absolute;top:5px;left:10px;width:auto;font-size:50px;line-height:40px;margin:10px 5px 15px 10px;[/class] [class=DreamerCredit]font-size:8px;position:absolute;bottom:-2px;right:2px;[/class] [class name=RRBox]background-color: #333333;color:#ffffff;border-image:linear-gradient(to bottom right, rgba(187,127,255,1) 0%, rgba(61,64,255,1) 25%, rgba(99,255,140,1) 50%, rgba(252,255,117,1) 75%, rgba(255,102,102,1) 100% ) 1;[/class] [class name=RRMiniBox]background-color: #333333;border-image:linear-gradient(to bottom right, rgba(187,127,255,1) 0%, rgba(61,64,255,1) 25%, rgba(99,255,140,1) 50%, rgba(252,255,117,1) 75%, rgba(255,102,102,1) 100% ) 1;[/class] [class name=RRAvie]background:url('https://i.pinimg.com/564x/20/51/96/20519657bc01bec61aa1f9f9799dcea2.jpg');background-size:cover;border-image:linear-gradient(to bottom right, rgba(187,127,255,1) 0%, rgba(61,64,255,1) 25%, rgba(99,255,140,1) 50%, rgba(252,255,117,1) 75%, rgba(255,102,102,1) 100% ) 1;border-top-color:transparent;border-right-color:transparent;[/class] [class name=RRName]text-shadow: -4px 4px rgba(179,179,179,.4), -3px 3px rgba(153,153,153,.2), -2px 2px rgba(179,179,179,.2), -1px 1px rgba(179,179,179,.2), 0px 0px rgba(128,128,128,.5), 1px -1px rgba(77,77,77,.6), 2px -2px rgba(77,77,77,.7), 3px -3px rgba(82,82,82,.8), 4px -4px rgba(77,77,77,.9), 5px -5px rgba(77,77,77,1);[/class] [class name=RRName]background:linear-gradient(to left, #9f05ff, #ff0505, #ffe105, #05ff22, #0515ff);-webkit-background-clip: text;-webkit-text-fill-color: transparent;[/class] [class name=RRPsuedoBox]font-size:15px;line-height:18px;[/class]
[div class=RRBox][div class=RRMiniBox][div class=RRPsuedoBox][div class=RRAvie][/div][div class=RRName]Character Name[/div][div class=DreamerCredit]Created by @IdyllicDreamer[/div]
This is the first of my codes that I build for a specific character of mine, an aerie character that is a bit flighty. Most of the time I try to make these codes are visually simplistic as possible, simple boxes, no real tabs, a little picture somewhere. It's easier to see for people on a phone, no hidden scrolls because they can be easy to miss, no hovers because half the time you're not going to expect them. I'm not saying they're bad, I'm just saying I won't usually put them in my codes. Much as I actually love using them.

I usually want them to be as easy to read, and see, as possible, even if this one and the one before it are a bit heavy on lines of code. Most of that creates small details. Where I'll step away from this though, for my posting, is the character name. I'll use a fancy font, a simple font, or whatever. Something that fits the character, and normally in here I'll just use 'Roboto' as the default for all of my codes, because that just leaves a space to change it. While I was fiddling with this one I came to deeply enjoy the effect left behind by the one I set up for this, specific, character. So I'm leaving it in. It's suppose to be hard to read, but it fits her.

I'll include a version for the picture being on the other side and a snippet to modify the name.

And as a note, if you don't have enough text with this code to fill in one line, IE go across the entire box, the positioning will become weird. As, like all of my codes, the width if % based meaning it will always be certain size relative to the posting area. This makes the inner areas a bit... weird.

Filling one line should be easy enough though!

Post goes here! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow!
[/div][/div][/div]

Spoiler: Rainbow Road, Pic Right

[nobr][class=RRBox]width:85%;height:auto;min-height:200px;border:1px solid transparent;margin:auto;padding:1px;position:relative;[/class]
[class=RRMiniBox]display:inline-block;min-width:98%;border:1px solid transparent;[/class]
[class=RRPsuedoBox]display:inline-block;min-width:98%;padding:5px;margin-top:40px;[/class]
[class=RRAvie]width:220px;height:295px;float:right;margin-top:-45px;margin-right:-5px;margin-left:5px;border-bottom:1px solid transparent;border-left:1px solid transparent;[/class]
[class=RRName]position:absolute;top:5px;left:10px;width:auto;font-size:50px;line-height:40px;margin:10px 5px 15px 10px;[/class]
[class=DreamerCredit]font-size:8px;position:absolute;bottom:-2px;right:2px;[/class]

     [class name=RRBox]background-color: #333333;color:#ffffff;border-image:linear-gradient(to bottom right, rgba(187,127,255,1) 0%, rgba(61,64,255,1) 25%, rgba(99,255,140,1) 50%, rgba(252,255,117,1) 75%, rgba(255,102,102,1) 100% ) 1;[/class]
     [class name=RRMiniBox]background-color: #333333;border-image:linear-gradient(to bottom right, rgba(187,127,255,1) 0%, rgba(61,64,255,1) 25%, rgba(99,255,140,1) 50%, rgba(252,255,117,1) 75%, rgba(255,102,102,1) 100% ) 1;[/class]
     [class name=RRAvie]background:url('https://i.pinimg.com/564x/20/51/96/20519657bc01bec61aa1f9f9799dcea2.jpg');background-size:cover;border-image:linear-gradient(to bottom right, rgba(187,127,255,1) 0%, rgba(61,64,255,1) 25%, rgba(99,255,140,1) 50%, rgba(252,255,117,1) 75%, rgba(255,102,102,1) 100% ) 1;border-top-color:transparent;border-right-color:transparent;[/class]
     [class name=RRName]text-shadow: -4px 4px rgba(179,179,179,.4), -3px 3px rgba(153,153,153,.2), -2px 2px rgba(179,179,179,.2), -1px 1px rgba(179,179,179,.2), 0px 0px rgba(128,128,128,.5), 1px -1px rgba(77,77,77,.6), 2px -2px rgba(77,77,77,.7), 3px -3px rgba(82,82,82,.8), 4px -4px rgba(77,77,77,.9), 5px -5px rgba(77,77,77,1);[/class]
     [class name=RRName]background:linear-gradient(to left, #9f05ff, #ff0505, #ffe105, #05ff22, #0515ff);-webkit-background-clip: text;-webkit-text-fill-color: transparent;[/class]
     [class name=RRPsuedoBox]font-size:15px;line-height:18px;[/class]
[/nobr]
[div class=RRBox][div class=RRMiniBox][div class=RRPsuedoBox][div class=RRAvie][/div][div class=RRName][font=Ruge Boogie]Character Name[/font][/div][div class=DreamerCredit]Created by [url=https://www.rpnation.com/threads/dreamt-up-codes.426510/]@IdyllicDreamer[/url][/div]
Post goes here! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow!
[/div][/div][/div]

Spoiler: Rainbow Road, Pic Left

[nobr][class=RRBox]width:85%;height:auto;min-height:200px;border:1px solid transparent;margin:auto;padding:1px;position:relative;[/class]
[class=RRMiniBox]display:inline-block;min-width:98%;border:1px solid transparent;[/class]
[class=RRPsuedoBox]display:inline-block;min-width:98%;padding:5px;margin-top:40px;[/class]
[class=RRAvie]width:220px;height:295px;float:left;margin-top:-45px;margin-left:-5px;margin-right:5px;border-bottom:1px solid transparent;border-right:1px solid transparent;[/class]
[class=RRName]position:absolute;top:5px;right:10px;width:auto;font-size:50px;line-height:40px;margin:10px 5px 15px 10px;[/class]
[class=DreamerCredit]font-size:8px;position:absolute;bottom:-2px;right:2px;[/class]

     [class name=RRBox]background-color: #333333;color:#ffffff;border-image:linear-gradient(to bottom right, rgba(187,127,255,1) 0%, rgba(61,64,255,1) 25%, rgba(99,255,140,1) 50%, rgba(252,255,117,1) 75%, rgba(255,102,102,1) 100% ) 1;[/class]
     [class name=RRMiniBox]background-color: #333333;border-image:linear-gradient(to bottom right, rgba(187,127,255,1) 0%, rgba(61,64,255,1) 25%, rgba(99,255,140,1) 50%, rgba(252,255,117,1) 75%, rgba(255,102,102,1) 100% ) 1;[/class]
     [class name=RRAvie]background:url('https://i.pinimg.com/564x/20/51/96/20519657bc01bec61aa1f9f9799dcea2.jpg');background-size:cover;border-image:linear-gradient(to bottom right, rgba(187,127,255,1) 0%, rgba(61,64,255,1) 25%, rgba(99,255,140,1) 50%, rgba(252,255,117,1) 75%, rgba(255,102,102,1) 100% ) 1;border-top-color:transparent;border-right-color:transparent;[/class]
     [class name=RRName]text-shadow: -4px 4px rgba(179,179,179,.4), -3px 3px rgba(153,153,153,.2), -2px 2px rgba(179,179,179,.2), -1px 1px rgba(179,179,179,.2), 0px 0px rgba(128,128,128,.5), 1px -1px rgba(77,77,77,.6), 2px -2px rgba(77,77,77,.7), 3px -3px rgba(82,82,82,.8), 4px -4px rgba(77,77,77,.9), 5px -5px rgba(77,77,77,1);[/class]
     [class name=RRName]background:linear-gradient(to left, #9f05ff, #ff0505, #ffe105, #05ff22, #0515ff);-webkit-background-clip: text;-webkit-text-fill-color: transparent;[/class]
     [class name=RRPsuedoBox]font-size:15px;line-height:18px;[/class]
[/nobr]
[div class=RRBox][div class=RRMiniBox][div class=RRPsuedoBox][div class=RRAvie][/div][div class=RRName][font=Ruge Boogie]Character Name[/font][/div][div class=DreamerCredit]Created by [url=https://www.rpnation.com/threads/dreamt-up-codes.426510/]@IdyllicDreamer[/url][/div]
Post goes here! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow!
[/div][/div][/div]

Spoiler: Name Snippet

There are two [class name=RRName][/class] segments, the first one controls the text effect, the second one creates the gradient. To disable the gradient and the text effect, you can remove one or both of them! I separated them to make it simpler to modify, at least I think so anyways.

 

[IdyllicDreamer]

[class=SFBox]width:80%;height:auto;min-height:200px;border:5px dotted transparent;position:relative;margin:auto;margin-top:150px;padding:5px;border-top-right-radius:200px;border-top-left-radius:200px;[/class] [class=SFAvie]width:210px;height:250px;border:5px dotted transparent;margin:auto;position:relative;overflow:hidden;border-top-right-radius:50%;border-top-left-radius:50%;margin-top:-150px[/class] [class=SFPic]width:100%;height:100%;[/class] [class=SFName]width:210px;height:20px;border:5px dotted transparent;text-align:center;margin:auto;margin-top:-5px;[/class] [class=DreamerCredit]font-size:8px;position:absolute;bottom:-2px;right:2px;[/class] [class name=SFBox]background:#333333;border-color:#42aaf4;color:#ffffff;font-size:12px;line-height:18px;[/class] [class name=SFAvie]background:#333333;border-color:#42aaf4;[/class] [class name=SFPic]background:url('https://i.pinimg.com/564x/bd/6b/4f/bd6b4fa7de053fb4fa39a87073326440.jpg');background-size:cover;[/class] [class name=SFName]font-size:22px;line-height:18px;color:#ffffff;border-color:#42aaf4;[/class]
[div class=SFBox][div class=SFAvie][div class=SFPic][/div][/div][div class=SFName]Character Name[/div][div class=DreamerCredit]Created by @IdyllicDreamer[/div]
I had some fun with this one though I wonder if I may have made too much 'blank' space here on it, with the open spaces between the edges and the center picture, where it all curves. I like it, regardless... and maybe someone else out there will like it too.

Post goes here! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow!
[/div]

Spoiler: SpottedFlow

[nobr]
[class=SFBox]width:80%;height:auto;min-height:200px;border:5px dotted transparent;position:relative;margin:auto;margin-top:150px;padding:5px;border-top-right-radius:200px;border-top-left-radius:200px;[/class]
[class=SFAvie]width:210px;height:250px;border:5px dotted transparent;margin:auto;position:relative;overflow:hidden;border-top-right-radius:50%;border-top-left-radius:50%;margin-top:-150px[/class]
[class=SFPic]width:100%;height:100%;[/class]
[class=SFName]width:210px;height:20px;border:5px dotted transparent;text-align:center;margin:auto;margin-top:-5px;[/class]
[class=DreamerCredit]font-size:8px;position:absolute;bottom:-2px;right:2px;[/class]

[class name=SFBox]background:#333333;border-color:#42aaf4;color:#ffffff;font-size:12px;line-height:18px;[/class]
[class name=SFAvie]background:#333333;border-color:#42aaf4;[/class]
[class name=SFPic]background:url('https://i.pinimg.com/564x/bd/6b/4f/bd6b4fa7de053fb4fa39a87073326440.jpg');background-size:cover;[/class]
[class name=SFName]font-size:22px;line-height:18px;color:#ffffff;border-color:#42aaf4;[/class]
[/nobr]
[div class=SFBox][div class=SFAvie][div class=SFPic][/div][/div][div class=SFName][font=Roboto]Character Name[/font][/div][div class=DreamerCredit]Created by @IdyllicDreamer[/div]
Post goes here! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow! Sphinx of black quartz, judge my vow!
[/div]