code

[bread]

Midoriya Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae consequat. username <raw-code><div style="vertical-align:top;display:inline-block;margin:10px 2px;"><div style="background:url('http://i.imgur.com/1bvmU2L.png');margin-bottom:-50px;border-radius:100%;padding:0px;"> <img src="https://i.imgur.com/GhhaUxm.png" style="width: 100px; height: 100px; border-radius:50%;margin:10px;"></div><div style="width:120px; background:url('http://i.imgur.com/lbTan1V.png'); border:1px #CCC solid;border-radius: 25px; padding:50px 0 0 0;"><div style="color:white;font:25px impact;line-height:-10px;margin:-30px 0 -20px 0;text-align:center;text-shadow:0 0 5px gray;"> Midoriya</div> <div style="height:10px;"></div> <div style="height:10px;width:100%;background:url('http://i.imgur.com/1bvmU2L.png');border-bottom:2px #F0F0F0 solid;"> <!-- red bar --> <div style="height:100%;width:50%;background-color:#c97a89;float:left;"></div></div><div style="height:10px;width:100%;background:url('http://i.imgur.com/1bvmU2L.png') 90%;border-bottom:2px #F0F0F0 solid;"> <!-- blue bar --> <div style="height:100%;width:50%;background-color:#7ac9bf;float:left;"></div></div><div style="height:10px;width:100%;background:url('http://i.imgur.com/1bvmU2L.png') 35%;border-bottom:2px #F0F0F0 solid;"> <!-- green bar --> <div style="height:100%;width:50%;background-color:#ABC97A;float:left;"></div></div><div style="color:gray;font:10px times;text-align:left;margin:3px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae consequat. <center><a href="username" style="color:#111;text-decoration:none;">username</a></center></div></div></div></div></raw-code>

Izuku <raw-code><div style="vertical-align:top;display:inline-block;margin:10px 2px;"><div style="background:url('http://i.imgur.com/lbTan1V.png');border-radius:100%;padding:0px;border:1px #CCC solid;"> <img src="https://i.imgur.com/utWBoNS.png" style="width: 100px; height: 100px; border-radius:50%;margin:10px 10px 8px 10px ;"></div> <div style="background:url('http://i.imgur.com/1bvmU2L.png');color:#ABC97A;font:10px courier;text-align:left;border-radius:10px;float:right;margin:-50px -5px 0 0;padding:3px;position:relative;z-index:100;"> Izuku<br /> <div style="width:50px;height:2px;float:right;margin:0px 5px;"><div style="height:100%; width:70%;background-color:#ABC97A;float:right;"></div></div></div> </div></div></div></raw-code> Midoriya Izuku username <raw-code><div style="vertical-align:top;display:inline-block;margin:10px 2px;"><div style="background:url('http://i.imgur.com/lbTan1V.png');border-radius:100%;padding:0px;border:1px #CCC solid;"> <img src="https://i.imgur.com/0q6v4SI.png" style="width: 100px; height: 100px; border-radius:50%;margin:10px 10px 8px 10px ;"></div> <div style="background:url('http://i.imgur.com/1bvmU2L.png');color:#ABC97A;font:10px courier;text-align:center;border-radius:10px;display:inline;float:right;margin:-50px -5px 0 0;padding:3px;position:relative;z-index:100;"> Midoriya Izuku<br /> <small><a href="url" style="color:lightgray;">username</a></small><br /> <div style="width:50px;height:2px;float:right;margin:0px 5px;"><div style="height:100%; <!-- BAR --> width:90%;background-color:#ABC97A;float:right;"></div></div></div> </div></div></div></raw-code>

Comments

[potofgreed]

I'm sure this is a dumb question, but how do you get two of the circular ones side by side?

[bread]

not dumb at all, friend! basically, you need to keep the <raw-code> tag at the start and end of the entry to make the whole rig work, and only repeat the stuff between those tags. since i personally think im bad at explaining things, here's an example. this should produce two codes side-by-side

<raw-code> <!-- code makes it so line breaks aren't read by dreamwidth's HTML/CSS processor; line breaks need to be manually added using <br > --> <!-- START of code that's meant to be repeated --> <div style="vertical-align:top;display:inline-block;margin:10px 2px;"><div style="background:url('http://i.imgur.com/lbTan1V.png');border-radius:100%;padding:0px;border:1px #CCC solid;"> <img src="https://i.imgur.com/0q6v4SI.png" style="width: 100px; height: 100px; border-radius:50%;margin:10px 10px 8px 10px ;"></div> <div style="background:url('http://i.imgur.com/1bvmU2L.png');color:#ABC97A;font:10px courier;text-align:center;border-radius:10px;display:inline;float:right;margin:-50px -5px 0 0;padding:3px;position:relative;z-index:100;"> Midoriya Izuku<br /> <small><a href="url" style="color:lightgray;">username</a></small><br /> <div style="width:50px;height:2px;float:right;margin:0px 5px;"><div style="height:100%; <!-- BAR --> width:90%;background-color:#ABC97A;float:right;"></div></div></div> </div></div></div> <!-- END of the code that's meant to be repeated --> <!-- START of code that's meant to be repeated --> <div style="vertical-align:top;display:inline-block;margin:10px 2px;"><div style="background:url('http://i.imgur.com/lbTan1V.png');border-radius:100%;padding:0px;border:1px #CCC solid;"> <img src="https://i.imgur.com/0q6v4SI.png" style="width: 100px; height: 100px; border-radius:50%;margin:10px 10px 8px 10px ;"></div> <div style="background:url('http://i.imgur.com/1bvmU2L.png');color:#ABC97A;font:10px courier;text-align:center;border-radius:10px;display:inline;float:right;margin:-50px -5px 0 0;padding:3px;position:relative;z-index:100;"> Midoriya Izuku<br /> <small><a href="url" style="color:lightgray;">username</a></small><br /> <div style="width:50px;height:2px;float:right;margin:0px 5px;"><div style="height:100%; <!-- BAR --> width:90%;background-color:#ABC97A;float:right;"></div></div></div> </div></div></div> <!-- END of the code that's meant to be repeated --> </raw-code>

anything between <!-- these tags --> doesn't need to be in the code, they don't get processed

[potofgreed]

omg, thanks a TON. i tried messing around with it and broke it, haha. but you're a lifesaver, so, seriously, THANK YOU ♥!

[bread]

any time! code is a cruel mistress