003 - light

[comment]code by sox

[font=DM Serif Display]title name[/font]
[font=DM Mono]accents[/font]
[font=Source Serif Pro]body[/font]

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

/*colors*/
--bkgd: #E5E5E5; /*off white*/
--text: #000; /*black*/
--accent1: #FFF;  /*white*/
--accent2: #9C544D;  /*muted red*/
--accent3: #385169;  /*dark blue*/

/*fonts*/
--font1: 'DM Serif Display', serif;
--font2: 'DM Mono', sans-serif;
--font3: 'Source Serif Pro', serif;

/*pics*/
--mainpic: url('https://i.imgur.com/EqB6rsi.jpeg');

][div=margin:auto; position:relative; width:700px; height:500px; margin-top:10px; margin-bottom:10px; background: var(--bkgd); overflow:hidden; cursor: url(https://imgur.com/5ex8RXq.png), auto;][div=position:absolute; left:300px; width:400px; height:500px; background:var(--mainpic); background-size:cover; background-position:50% 50%;][/div][comment]

----  lines ----
[/comment][div=position:absolute; top:15px; width:100%; height:1px; background:var(--accent1);][/div][div=position:absolute; top:484px; width:100%; height:1px; background:var(--accent1);][/div][div=position:absolute; left:15px; width:1px; height:100%; background:var(--accent1);][/div][div=position:absolute; left:315px; width:1px; height:100%; background:var(--accent1);][/div][div=position:absolute; left:684px; width:1px; height:100%; background:var(--accent1);][/div][comment]

---- squares ----
[/comment][div=position:absolute; top:0px; left:0px; width:15px; height:15px; background:var(--accent2);][div=position:absolute; top:485px; left:0px; width:15px; height:15px; background:var(--accent2);][/div][div=position:absolute; top:0px; left:300px; width:15px; height:15px; background:var(--accent3);][/div][div=position:absolute; top:485px; left:300px; width:15px; height:15px; background:var(--accent3);][/div][div=position:absolute; top:0px; left:685px; width:15px; height:15px; background:var(--accent3);][/div][div=position:absolute; top:485px; left:685px; width:15px; height:15px; background:var(--accent3);][/div][comment]

---- heading ----
[/comment][nobr][div=position:absolute; top:55px; left:53px; width:209px; height:1px; background:var(--accent1);][/div]
[div=position:absolute; top:105px; left:53px; width:209px; height:1px; background:var(--accent1);][/div]
[div=position:absolute; top:63px; left:53px; width:209px; height:0.5px; background:var(--accent2);][/div]
[div=position:absolute; top:98px; left:53px; width:209px; height:0.5px; background:var(--accent2);][/div][/nobr][div=position:absolute; top:63px; left:15px; width:285px; height:36px; text-align:center; font-family:var(--font1); font-size:25px; line-height:36px; text-transform:uppercase; color:var(--accent3);][comment]

---- NAME HERE ----
[/comment]park wonbin[/div][comment]

---- role ----
[/comment]
[div=position:absolute; top:52px; left:15px; width:285px; height:8px; text-align:center; font-family:var(--font2); font-size:8px; line-height:8px; letter-spacing:3px; text-transform:uppercase; color:var(--accent2); font-weight:bold;][comment]

---- ROLE HERE ----
[/comment]the axis[/div][comment]

---- body ----
[/comment][div=position:absolute; top:117px; left:49px; width:200px; height:309px; padding:10px; overflow-y:scroll; overflow-x:hidden; scrollbar-width:none; font-size:10px; line-height:11px; text-align:justify; color:var(--text); font-family:var(--font3);][div=display:inline; color: var(--accent2); float: left; font-family: var(--font1); font-size: 58px; line-height: 40px; text-transform:uppercase; padding: 1px 3px 3px 0;][comment]

---- TEXT HERE ----
------ DROP CAP LETTER: 1st letter of 1st word goes between the /comment and /div tags
[/comment]S[/div]abotaging one's long-forgotten nemesis, forgotten amidst the sands of time, for whose sake? Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

[div=display:inline; color:var(--accent2); font-weight:bold;]"Dictum libero ad leo orci semper, gravida mollis pretium proin."[/div] Lacus sollicitudin curabitur tincidunt at auctor leo imperdiet. Euismod taciti nulla laoreet himenaeos hac neque quis dui. Pretium posuere penatibus tristique aenean varius vel fames.

Vel penatibus eget neque bibendum torquent libero torquent cubilia. Metus fames viverra dis etiam natoque suspendisse porta hac. Nibh lorem sodales natoque imperdiet nostra nulla. Nostra sociosqu etiam eros hac; natoque sed nam suscipit. Interdum hendrerit urna molestie magnis finibus consequat nam interdum. Vivamus lorem nec class sapien risus inceptos tortor laoreet mattis. Per dui senectus, nostra duis dis imperdiet pulvinar.
[/div][comment]

---- details ----
[/comment]
[div=position:absolute; top:458px; left:53px; width:209px; height:1px; background:var(--accent1);][/div][div=position:absolute; top:467px; left:15px; width:285px; height:8px; text-align:center; font-family:var(--font2); font-size:8px; line-height:8px; letter-spacing:0px; text-transform:uppercase; color:var(--accent2);][comment]

---- OUTFIT HERE ----
[/comment][b]outfit:[/b] [url='https://i.pinimg.com/564x/fc/b2/97/fcb2971bf71c436afa5a06c18405e169.jpg'][div=display:inline; color:var(--accent3); padding-right:20px;][fa]fas fa-person[/fa][/div][/url][comment]

---- LOCATION HERE ----
[/comment][b]location:[/b] [div=display:inline; color:var(--accent3);]practice room[/div][/div][comment]

---- tags  ----
[/comment]
[div=position:absolute; top:461px; left:325px; width:350px; height:12px;][div=position:absolute; right:0px; padding:2px 5px 2px 5px; background:var(--bkgd); text-align:right; font-family:var(--font2); font-size:8px; line-height:12px; letter-spacing:0px; text-transform:uppercase; color:var(--accent2);][b]tags:[/b] [div=display:inline; color:var(--accent3);][comment]

---- TAGS HERE ----
[/comment]user 1, user 2, user 3[/div][/div][/div][/div][/div][/div]