One x One Characters

[BDark]

Characters heeeeeere Katrina

 

[BDark]

[class=Notes] // Forward slashes are comments and do no show up in the final design, these are to help you find everything easily and explain some code as well. These comments must be with in a class or script tags in order to be hidden, from what I know// // Long URls are images # followed by letter and numbers are Hex codes or color codes orange is a named color in this code// // This code does not show breaks unless is shows the
code When typing responses to rps, be aware that when you press enter it will not show that you did. You'll have to use the
tags// [/class] [class=Background] background:url(https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/C2SkUEF/mg0007-night-sky-with-twinkling-stars-animated-background_ekioupkse__F0000.png); position:relative; padding:20px; height:200px; width:200px; background-position: 0% 00%; transition: width 3s, height 3s; // This is the background image as well as the backgrounds beginning size// [/class] [class=BackgroundFull] height:600px; width:99%; background-position: 0% 0%; transition: width 1s, height 1s; //the back ground at its full size// [/class] [class=Hide] display: none; //hides what needs to be hidden// [/class] [class=Image] float:left; margin-right:20px; border:2px SOLID #C0C0C0; line-height:0; width:200px; height:200px; border-radius:50%; overflow:hidden; background:url(https://i.pinimg.com/originals/5c/66/d9/5c66d971e0f25da3b0a4c3dd96df2019.jpg); background-position: 33% 33%; background-size:350% 550%; cursor:pointer; transition: width 3s, border-radius 3s, height 3s,background-position 3s,background-size 3s ease-in-out; //border around image and its starting size// [/class] [class=ImageFull] width:400px; height: 600px; border-radius:10px; overflow:hidden; background-position: 43% 8%; background-size:100% 100%; transition: width 3s , border-radius 3s, height 3s, background-position 3s,background-size 3s; //the image's full size// [/class] [class=Name] float:left; width:calc( 55% - 20px ); font-size:50px; text-align:center; color:#C0C0C0; //How the Name looks// [/class] [class=Text] float:left; background-color:rgba(77,77,76,0.7); width:calc( 55% - 20px ); height:500px; overflow:scroll; overflow-x:hidden; padding:10px; font-size:15px; color:#C0C0C0; box-shadow: 0px 0px 5px 10px rgba(77,77,76,0.6); //how the text looks// [/class] [Script class=Image] set addedClass 0 set fadedIn 0 //allows the script function below to work by setting variables// [/script] [Script class=Image on=click] if (eq ${addedClass} 0) (addClass ImageFull) (removeClass ImageFull) if (eq ${addedClass} 0) (addClass BackgroundFull Background) (removeClass BackgroundFull Background) if (eq ${addedClass} 0) (set addedClass 1) (set addedClass 0) if (eq ${fadedIn} 0) (fadeIn 1000 Name) (fadeOut 1000 Name) if (eq ${fadedIn} 0) (fadeIn 1000 Text) (fadeOut 1000 Text) if (eq ${fadedIn} 0) (set fadedIn 1) (set fadedIn 0) //makes it possible to click between the bigger and smaller sizes// [/script] [div class="Background"] [div class="Image"] [/div] [div class="Name Hide"] Caldr [/div] [div class="Text Hide"] Alias: The Silver Bullet

Race: Half-Blood

Gender: M

Height: 6'1

Weight: 65 kg

Age: 50 (human years)

Occupation: Mercenary

Hair Colour: Blonde-brown

Eye Colour: Blue

Facial Hair: N/A

Place of Birth: Cavan, Ulster; Ireland

Signature Weapon: the Hollow Blade

Markings: The Five-Fold symbol on his wrists, an Irish snake on the middle of his chest, and assymetrical Celtic patterns from his shoulders till the symbols on his wrists; the symbols on his right also cover the right half of his back and legs.

Accessories: A chain that holds little trophies from every region he visited and his greatest foes.

True Name: Setanta

[/div] [/div]

Code by @AgWordSmith