Allen Walker (
showmystar
) wrote
2018-11-04 09:07 pm (UTC)
no subject
full ver.:
<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;"> CHARACTER</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>
round ver. 1:
<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>
round ver. 2:
<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>
how to make round ones right next to each other:
<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>
(
2 comments
)
Post a comment in response:
From:
Anonymous
(will be screened)
OpenID
(will be screened if not validated)
Identity URL:
Log in?
Dreamwidth account
Account name
Password
Log in?
If you don't have an account you can
create one now
.
Subject
HTML doesn't work in the subject.
Formatting type
Casual HTML
Markdown
Raw HTML
Rich Text Editor
Message
[
Home
|
Post Entry
|
Log in
|
Search
|
Browse Options
|
Site Map
]
no subject
round ver. 1:
round ver. 2:
how to make round ones right next to each other: