boxed out

[comment]

fonts used:
[font=Raleway]name, additional details[/font]
[font=Karla]role[/font]

to replace fonts, add/replace them here, and then in the variables below under *fonts; check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )

[/comment][border=transparent;
*background colour;
--bg: #F9F9F9;

*first accent colour (lighter -- border + name);
--color-1: #C08458;
*second accent colour (darker -- role border);
--color-2: #875030;
*role/additional details colour;
--txt: #472c1d;

*fonts;
--name: 'Raleway', sans-serif;
--detail: 'Raleway', sans-serif;
--role: 'Karla', sans-serif;

*big image;
--img-1: url('https://pbs.twimg.com/media/EkNiTnOUwAAu9TV?format=jpg&name=large');

height:fit-content; min-height:270px; width:340px; margin:auto; padding:0; padding-bottom:20px; position:relative;][border=transparent; height:fit-content; min-height:273px; width:100%; background-color: var(--bg); padding:0 0 10px 32px; box-sizing:border-box; line-height:0; position:relative; display:flex; align-items:flex-end;]
   [comment]----image----[/comment]
   [border=transparent; height:210px; width:280px; background: var(--img-1); background-size:cover; background-position: 50% 50%; padding:0; position:absolute; top:10px; left:10px; z-inedx:1;][/border]

   [comment]----border----[/comment]
   [border=transparent; height:fit-content; min-height:235px; width:280px; margin-top:22px; border:1px solid var(--color-1); position:relative; z-index:2; display:flex; box-sizing:border-box; padding:3px 20px 3px 8px; flex-flow: column nowrap; justify-content: flex-end; align-items: flex-start;]
       [border=transparent; height:193px; width:100%; padding:0;][/border]

       [comment]----role---[/comment]
       [border=transparent; min-height:30px; height:fit-content; width:fit-content; min-width:60px; max-width:125px; border:1px solid var(--color-2); position:absolute; right:-20px; top:20px; padding:4px 5px 4px 8px; box-sizing:border-box; display:flex; justify-content:center; align-items:center;]
          [border=transparent; height:calc(100% + 0.2px); width:40px; position:absolute; background-color: var(--bg); top:-0.1px; right:0; padding:0;][/border]
          [border=transparent; height:fit-content; width:fit-content; font-weight:bold; text-transform: uppercase; color: var(--txt); z-index:8; font-family: var(--role); font-size:12px; letter-spacing:1px; text-align:right; position:relative; padding:0; line-height:120%;][comment]

----* * * role here -----

[/comment]the survivor[/border]
       [/border]

       [comment]----additional details----[/comment]
       [border=transparent; width:100%; height:fit-content; font-size:9px; font-family: var(--detail); color: var(--txt); text-align:right; letter-spacing:.5px; line-height:100%; padding:0;][comment]

----* * * extra detail (keep it short)----

[/comment]fc: chae soo-bin[/border]

       [comment]----name----[/comment]
       [border=transparent; height:fit-content; width:fit-content; max-width:90%; line-height:100%; font-size:25px; letter-spacing:1px; color: var(--color-1); font-family: var(--name); font-weight:700; padding:0; margin:-1.5px 0 3px 0;][comment]

----* * * name here----

[/comment]im seyoung[/border]

    [/border]
    [comment]----border end----[/comment]
[/border][comment]----signature! do not remove----
[/comment][bg=transparent; height:10px;width:100%;z-index:6;opacity:0.7;color: var(--color-1);font-size:10px;text-align:center; position:absolute; bottom:15px; left:0; padding:0;][font=Open Sans]♡coded by uxie♡[/font][/bg][/border]