010.5 - picture

[comment]code by sox

[font=Poppins]titles[/font]
[font=Karla]body[/font]

[/comment][div=height:auto; width:100%; overflow-x:auto; overflow-y:hidden;

/*colors*/
--bkgd: rgba(255, 0, 162, 0.03);    /*first 3 values = rgb of --accent1; 4th value = opacity*/
--textcolor: ;    /*all text not colored by the accent colors, purposely not specified by default ---- BE CAREFUL when setting this to a specific color as it might not be properly visible on certain themes (e.g. white, dark gray, etc.)*/

--accent0: #ffa8cb;   /*light pink*/
--accent1: #ff00a2;   /*pink*/
--accent2: #8ba5ad;   /*gray blue*/


/*values*/
--border0: 1px solid var(--accent0);   /*main border color + style*/

--playcolor: var(--accent2);   /*play button color*/
--playsize: 10px;   /*play button size*/
--playlineheight: 20px;   /*play button line height*/

--rolecolor: var(--accent1);   /*role color*/
--rolesize: 10px;   /*role text font size*/
--rolelineheight: 20px;   /*title text line height*/

--titlesize: 12px;   /*title text font size*/
--titlelineheight: 30px;   /*title text line height*/

--outfitcolor: var(--accent0);   /*outfit link color*/
--outfitsize: 9px;   /*outfit icon font size*/

--detailscolor1: var(--accent2);   /*location color*/
--detailscolor2: var(--accent0);   /*mood color*/
--detailssize: 10px;   /*details text font size*/
--detailslineheight: 20px;   /*details text line height*/

--dropcapcolor: var(--accent2);   /*initial letter color*/

--d1: var(--accent1);   /*dialogue color 1*/
--d2: var(--accent2);   /*dialogue color 2*/
--d3: var(--accent0);   /*dialogue color 3*/

--bodysize: 10px;   /*body text font size*/
--bodylineheight: 12px;   /*body text line height*/


/*fonts*/
--font1: 'Poppins', sans-serif;
--font2: 'Karla', sans-serif;


/*pics*/
--mainpic: url('https://i.pinimg.com/736x/41/a3/72/41a372d35bcf6b946efff0f99f9e2cc5.jpg');


][div=margin:auto; position:relative; width:340px; height:500px; margin-top:10px; margin-bottom:10px; background:var(--bkgd); border:var(--border0); box-sizing:border-box; overflow:hidden; cursor: url(https://imgur.com/5ex8RXq.png), auto; font-family:var(--font1); color:var(--textcolor);][nobr]
[comment]---- content start ----[/comment]

[comment]---- top section start----[/comment]
[div=position:absolute; width:320px; height:480px; left:9px; top:9px; border:var(--border0); box-sizing:border-box; overflow:hidden;]


[comment]---- name box start ----[/comment]
[div=position:absolute; left:90px; top:0px; width:100%; height:30px; border-bottom:var(--border0); box-sizing:border-box; overflow:hidden;]


[comment]---- name ----[/comment]
[div=position:relative; display:inline-block; margin-left:0px; width:auto; height:30px; box-sizing:border-box; padding: 0 10px 0 9px; overflow:hidden; text-transform:uppercase; font-size:var(--titlesize); line-height:var(--titlelineheight); font-weight:400;][comment]


---- NAME HERE ----
[/comment]유지민 — [B]jimin yoo.[/B][/div]

[/div][comment]---- name box end ----[/comment]


[comment]---- role box start ----[/comment]
[div=position:absolute; left:90px; top:30px; width:100%; height:20px; border-bottom:var(--border0); box-sizing:border-box; overflow:hidden;]

[comment]---- music button start ----
---- graciously granted to me by uxie ty queen ily [/comment]
[div=position:relative; display:inline-block; width:20px; height:20px; border-right:var(--border0); box-sizing:border-box; color:var(--playcolor); padding: 0 15px 0 10px; overflow:hidden;]
[div=height:20px; width:100%; flex-shrink:0; display:flex; flex-flow:row nowrap; align-items:center;]

[comment] ---- play button ---- [/comment]
[div=height:20px; width:20px; border-radius:100%; border:var(--playborder);position:relative; flex-shrink:0;][div=height:100%; width:100%; background-size:cover; position:relative; z-index:2; pointer-events:none; text-transform:uppercase; font-size:var(--playsize); line-height:var(--playlineheight);][fa]fas fa-play[/fa][/div]

[comment] ---- media files ---- [/comment]
[border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center; justify-content:center; overflow:hidden; opacity:0.01%;][border=transparent; height:32px; width:32px; padding:0; position:relative; pointer-events:auto;]

[comment]---- SOUNDCLOUD ---- (replace the soundcloud link within media tag with your own) ---- [/comment]
[border=transparent; height:80px; width:180px; padding:0; margin-top:-16px; margin-left:-14px; position:absolute; top:0; left:0;]
[media=soundcloud]https://soundcloud.com/user-180672370/karina-up[/media][/border]

[comment]---- GOOGLE DRIVE ---- (replace the google file code within media tag with your own) ---- [/comment]
[border=transparent; height:500px; width:500px; margin-top:-170px; margin-left:-93px; padding:0px;/*remove this to use me, and add it to the other*/ display:none;]
[media=googledrive]1EwyiuGOGDy8NrbyIm2mfdHc7szRnCMBC[/MEDIA]

[/border][/border][/border]
[/div][/div][/div][comment]---- music button end ----[/comment]


[comment]---- outfit box ----[/comment]
[div=position:relative; display:inline-block; width:auto; height:20px; border-right:var(--border0); box-sizing:border-box; padding: 0 8px 0 5px; overflow:hidden; text-transform:uppercase; font-size:var(--outfitsize); line-height:var(--detailslineheight); font-weight:700;][comment]


---- OUTFIT HERE ----
[/comment][URL='https://i.pinimg.com/474x/f9/1a/6e/f91a6e7639be7ae0dfc0095142b7691a.jpg'][div=display:inline; color:var(--outfitcolor);][fa]far fa-shirt[/fa][/div][/URL][/div]


[comment]---- role ----[/comment]
[div=position:relative; display:inline-block; width:auto; height:20px; box-sizing:border-box; color:var(--rolecolor); padding: 0 10px 0 5px; overflow:hidden; text-transform:uppercase; font-size:var(--rolesize); line-height:var(--rolelineheight); font-style:italic;][comment]


---- ROLE HERE ----
[/comment]the black mamba.[/div]

[/div][comment]---- role box end ----[/comment]


[comment]---- location box start ----[/comment]
[div=position:absolute; left:90px; top:50px; width:100%; height:20px; border-bottom:var(--border0); box-sizing:border-box; overflow:hidden;]

[comment]---- location tag ----[/comment]
[div=position:relative; display:inline-block; width:auto; height:20px; border-right:var(--border0); box-sizing:border-box; padding: 0 10px 0 10px; overflow:hidden; text-transform:uppercase; font-size:var(--detailssize); line-height:var(--detailslineheight); font-weight:700;][comment]


---- LOCATION TAG HERE ----
[/comment]location.[/div]


[comment]---- location ----[/comment]
[div=position:relative; display:inline-block; margin-left:0px; width:143px; height:20px; box-sizing:border-box; color:var(--detailscolor1); padding: 0 10px 0 5px; overflow:hidden;][div=position:relative; width:138px; height:20px; overflow-y:scroll; text-transform:uppercase; font-size:var(--detailssize); line-height:var(--detailslineheight); padding: 0 20px 10px 0;][div=display:inline; font-size:9px; margin-right:5px;][fa]far fa-location-dot[/fa][/div][comment]


---- LOCATION HERE ----
[/comment]kwangya[/div][/div]

[/div][comment]---- location box end ----[/comment]



[comment]---- mood box start ----[/comment]
[div=position:absolute; left:90px; top:70px; width:100%; height:20px; border-bottom:var(--border0); box-sizing:border-box; overflow:hidden;]

[comment]---- mood ----[/comment]
[div=position:relative; display:inline-block; margin-left:0px; width:220px; height:20px; box-sizing:border-box; color:var(--detailscolor2); padding: 0 10px 0 8px; overflow:hidden;][div=position:relative; width:212px; height:20px; overflow-y:scroll; text-transform:uppercase; font-size:var(--detailssize); line-height:var(--detailslineheight); font-style:italic; padding: 0 20px 10px 0;][comment]


---- MOOD HERE ----
[/comment]"aw, they're already dead? that's no fun at all..."[/div][/div]

[/div][comment]---- mood box end ----[/comment]



[comment]---- interactions box start ----[/comment]
[div=position:absolute; left:0px; bottom:0px; width:100%; height:20px; border-top:var(--border0); box-sizing:border-box; overflow:hidden;]

[comment]---- interactions tag ----[/comment]
[div=position:relative; display:inline-block; width:auto; height:20px; border-right:var(--border0); box-sizing:border-box; padding: 0 10px 0 10px; overflow:hidden; text-transform:uppercase; font-size:var(--detailssize); line-height:var(--detailslineheight); font-weight:700;][comment]


---- INTERACTIONS TAG HERE ----
[/comment]interactions.[/div]


[comment]---- interactions ----[/comment]
[div=position:relative; display:inline-block; margin-left:0px; width:205px; height:20px; box-sizing:border-box; padding: 0 10px 0 5px; overflow:hidden;][div=position:relative; width:200px; height:20px; overflow-y:scroll; text-transform:uppercase; font-size:var(--detailssize); line-height:var(--detailslineheight); color:var(--detailscolor1); padding:0 20px 0 0;][comment]


---- INTERACTIONS HERE ----
[/comment]this scrolls! user 1, user 2, user 3, user 4, user 5, user 6[/div][/div]

[/div][comment]---- interactions box end ----[/comment]

[comment]---- picture ----[/comment]
[div=position:absolute; left:0px; top:0px; width:90px; height:90px; border-right:var(--border0); border-bottom:var(--border0); box-sizing:border-box;][div=position:absolute; left:9px; top:9px;  width:72px; height:70px; border:var(--border0); box-sizing:border-box; background:var(--mainpic); background-size:cover; background-position:50% 50%;][/div][/div]
[/div][comment]---- top section end ----[/comment]






[comment]---- body section start ----[/comment]
[/nobr][div=position:absolute; width:320px; height:353px; left:0px; top:100px; box-sizing:border-box; overflow:hidden;][comment]

---- body ----[/comment][div=position:absolute; left:5px; top:0px; width:319px; height:353px; box-sizing:border-box; padding: 15px 10px 10px 20px; overflow:hidden; font-size:var(--bodysize); line-height:var(--bodylineheight); font-family:var(--font2);][div=position:relative; width:282px; height:340px; overflow-y:scroll; padding:0 30px 0 10px; text-align:justify;][comment]

---- BODY HERE ----
[/comment][div=display:inline; color: var(--dropcapcolor); float: left; font-family: var(--font1); font-weight:700; font-size: 40px; line-height: 30px; text-transform:uppercase; padding: 3px 5px 0 0;][comment]

---- BODY TEXT HERE ----
------ DROP CAP LETTER: 1st letter of 1st word goes between the /comment and /div tags
[/comment]S[/div]urely even the most devout of saints would recognize the catharsis in kicking a wicked, spiteful man while he was down. urna nunc suspendisse massa facilisi facilisi vitae cubilia etiam. tempor ullamcorper efficitur id eleifend ut. tristique vehicula tellus felis tempus, elementum ligula semper. ridiculus nunc sit lectus diam dignissim suscipit. tempor volutpat finibus laoreet etiam posuere. lectus auctor bibendum iaculis dictumst praesent adipiscing. quisque porta blandit mollis magnis odio. aliquam varius condimentum scelerisque proin facilisis arcu.

[div=display:inline; color:var(--d1); font-weight:700;]"ugh, this place reeks..."[/div] she muttered under her breath, facilisi vitae lectus auctor cubilia etiam. [div=display:inline; color:var(--d1); font-weight:700;]"i should up my commission rate next time we swing by headquarters."[/div]

ridiculus nunc sit lectus diam dignissim suscipit. tempor volutpat finibus laoreet etiam posuere. lectus auctor bibendum iaculis dictumst praesent adipiscing. urna nunc suspendisse massa facilisi facilisi vitae cubilia etiam. tempor ullamcorper efficitur id eleifend ut. tristique vehicula tellus felis tempus, elementum ligula semper. ridiculus nunc sit lectus diam dignissim suscipit. tempor volutpat finibus laoreet etiam posuere. suspendisse massa facilisi facilisi vitae cubilia etiam. tempor ullamcorper efficitur id eleifend ut. tristique vehicula tellus felis tempus, elementum ligula semper. ridiculus nunc sit lectus diam dignissim suscipit. tempor volutpat finibus laoreet etiam posuere. lectus auctor bibendum iaculis dictumst praesent adipiscing. quisque porta blandit mollis magnis odio. aliquam varius condimentum scelerisque proin facilisis arcu.

[div=display:inline; color:var(--d2); font-weight:700;]"hey, jimin!"[/div] he called from across the room. [div=display:inline; color:var(--d2); font-weight:700;]"your scary robot hands still got any juice? looks like we got a few stragglers."[/div]

lectus diam dignissim suscipit. tempor volutpat finibus laoreet etiam posuere. lectus auctor bibendum iaculis dictumst praesent adipiscing. bibendum iaculis dictumst praesent adipiscing. quisque porta blandit mollis magnis odio. aliquam varius condimentum scelerisque proin facilisis arcu. ridiculus nunc sit lectus diam dignissim suscipit. tempor volutpat finibus laoreet etiam posuere. lectus auctor bibendum iaculis dictumst praesent adipiscing.

tempor ullamcorper efficitur id eleifend ut. tristique vehicula tellus felis tempus, elementum ligula semper. ridiculus nunc sit lectus diam dignissim suscipit. tempor volutpat finibus laoreet etiam posuere. lectus auctor bibendum iaculis dictumst praesent adipiscing. quisque porta blandit mollis magnis odio. aliquam varius condimentum scelerisque proin facilisis arcu.
[/div][/div][comment]---- BODY END ----[/comment]
[/div][comment]---- body section end ----[/comment]
[nobr][comment]---- content end ----[/comment]
[/nobr][/div][/div]