Realistic or Modern 𝘁𝗵𝗲 𝗻𝗲𝘅𝘁 𝗴𝗲𝗻𝗲𝗿𝗮𝘁𝗶𝗼𝗻 — 𝗰𝗮𝘀𝘁 ⋆ °

[ylivea]

[class=container] width: 500px; height: 400px; margin: auto; display: flex; [/class] [class=img] background-image: url('https://66.media.tumblr.com/1bf80feb18b67135a9b3edca42367c72/tumblr_of2u7cKfrE1s5sbtqo1_1280.jpg'); background-size: cover; height: 400px; width: 200px; padding-top: 40px; box-sizing: border-box; [/class] [class name=img maxWidth=450px] width: 150px; [/class] [class=title] color: white; border-bottom: 2px solid white; border-top: 2px solid white; font-size: 16px; width: 70%; margin: auto; text-transform: uppercase; font-weight: 900; [/class] [class=content] width: 300px; height: 400px; padding-left: 10px; box-sizing: border-box; font-size: 13px; overflow: hidden; [/class] [class name=content maxWidth=450px] width: 200px; [/class] [class=scroll] overflow-y: scroll; padding-right: 17px; width: 100%; height: 100%; [/class] [class=linkContainer] width: 100%; display: flex; flex-direction: column; [/class] [class=link] width: 100%; border-bottom: 1px solid #232323; [/class] [class name=link state=hover] cursor: pointer; [/class] [div class=container] [div class=img] [div class=title] the mystery gang.[/div] [/div] [div class=content] [div class=scroll] CHARACTER SHEET

THE BASICS.
★ name.
★ nicknames.
★ age/d.o.b.
★ sexuality.
★ ethnicity.
★ occupation.
★ known languages.

APPEARANCE.
★ eyes.
★ hair.
★ height.
★ body type.
★ distinguishing features.
★ attire/everyday wear.
★ face claim.

PYSCHE.
★ personality.
★ likes/dislikes.
★ habits/fears.
★ background.
★ quotes.

EXTRA.
★ what’s in my bag?
★ relationships.
★ alignment.
★ theme song.
★ etc, etc.!

[div class=linkContainer] [div class=link][/div] [/div] [/div] [/div] [/div]

coded by shady.

 

[ylivea]

[class=bkgd] --text-color: #fad9c1; --shift-color: #a34b45; position: relative; margin-left: auto; margin-right: auto; width: 20em; height: auto; padding-top: 2em; [/class] [class=pic] position: relative; width: 8em; height: 8em; border-radius: 10em; background: url(https://66.media.tumblr.com/84f00ae7083a8a52af4e230923e45b02/tumblr_pkx3ag9qUX1txpbhu_250.png); background-size: 100%; background-position: 50% 50%; margin-left: auto; margin-right: auto; box-shadow: 3px 3px 0px #000; animation: {post_id}hover 2s linear infinite; [/class] [class=shadow] position: relative; overflow: visible; margin-right: auto; margin-bottom: 1.5em; margin-left: auto; width: 6em; height: .5em; top: 1em; background: #000; border-radius: 100%; animation: {post_id}resize 2s linear infinite; [/class] [class=content] position: relative; width: 100%; height: auto; color: var(--text-color); animation: {post_id}textresize 2s linear infinite; [/class] [class=credit] position: relative; overflow: hidden; width: 100%; height: 10px; text-align: center; font-style: normal; font-weight: normal; font-size: 5px; color: #dedede; opacity: 0.1; [/class] [animation=hover] [keyframe=0]transform: translateY(0.3em);[/keyframe] [keyframe=50]transform: translateY(-0.3em);[/keyframe] [keyframe=100]transform: translateY(0.3em);[/keyframe] [/animation] [animation=resize] [keyframe=0]transform: scale(1.1);[/keyframe] [keyframe=50]transform: scale(0.9);[/keyframe] [keyframe=100]transform: scale(1.1);[/keyframe] [/animation] [animation=textresize] [keyframe=0]transform: scale(1.01);[/keyframe] [keyframe=50]transform: scale(0.99);[/keyframe] [keyframe=100]transform: scale(1.01);[/keyframe] [/animation] [class=name] position: relative; width: 100%; height: auto; text-align: center; font-size: 35px; text-transform: uppercase; line-height: 30px; margin-top: 10px; text-shadow: 3px 3px 0px #000; [/class] [class=role] position: relative; width: 100%; height: auto; text-align: center; font-size: 20px; text-transform: uppercase; line-height: 22px; margin-top: 2px; [/class] [class=fc] position: relative; width: 100%; height: auto; text-align: center; font-size: 12px; text-transform: uppercase; line-height: 12px; margin-top: 2px; [/class] [div class=bkgd] [div class=pic][/div] [div class=shadow][/div] [div class=content] [div class=name]the genius[/div] [div class=role]vivienne dinkley[/div] [div class=fc]fc: bae joo hyun[/div] [/div] [/div] [div class=credit]code by sox[/div]