aphrodite - in character

[comment]code by opaline. please don't remove this or other credit! loading fonts![font=Bodoni Moda]..[/font][font=Roboto Condensed]..[/font][/comment][div=

//--- variable: change these!  ---//

!!--- colours ---!!;
--bg1: #f0ebe1;
--accent1: #242424;
--accent2: #cf9f91;
--textColor: #242424;

!!--- images ---!!;
--img1: url(https://64.media.tumblr.com/7f383fab2fd8a87405bb6caa241aadfc/6cb5f1f691cc7f7e-21/s640x960/c14adb1abb7dd955eabdef2b0347412e5e61276b.jpg);
--imgPosition1: 50% 50%;

!!--- fonts ---!!;
--title: Bodoni Moda;
--text: Roboto Condensed;
][comment]

//--- top container start ---//

[/comment][div=min-height: 490px; max-width: 490px; margin: auto; position: relative; overflow: hidden; display: flex; flex-flow: column nowrap; background: var(--bg1); box-sizing: border-box; padding: 10px;][div=height: 80px; max-width: 100%; display: flex; flex-flow: row wrap; justify-content: center; align-items: center;][div=width: fit-content; opacity: 0.5; font-size: 10px; position: absolute; color: var(--accent2); top: 0; right: 0;]code by opaline[/div][div=width: 100%; height: 70px;][div=font-family: var(--title); font-size: 30px; color: var(--accent2); font-weight: 900;

!!--- name section: type it here! ---!!]character name[/div][div=width: 100%; display: flex; flex-flow: row wrap;][div=width: 100%; height: 1px; background: var(--accent1); position: relative; top: 10px;][div=font-family: var(--text); text-transform: uppercase; background: var(--bg1); width: fit-content; padding: 0px 10px; position: absolute; right: 50px; top: -9px; color: var(--accent1);

!!--- role section: type it here! ---!!]daughter of aphrodite[/div][/div][/div][/div][/div][comment]

//--- bottom section: image ---//

[/comment][div=width: 100%; min-height: 400px; display: flex; flex-wrap: wrap; gap: 10px 10px;][div=width: 150px; height: 400px; flex-grow: 1; background: var(--img1); background-position: var(--imgPosition1); background-size: cover; display: flex; align-items: flex-end;][/div][div=width: 310px; height: 400px; flex-grow: 1; color: var(--textColor); font-size: 12px; pointer-events: auto; overflow: hidden; position: relative;][div=height:100%; width: 200%; overflow-y:scroll; text-align: justify;][div=width: 50%;][div=width: 100%; border-bottom: 1px solid var(--accent1); box-sizing: border-box; padding: 5px; margin-bottom: 5px;][comment]

//--- bottom section (text): post info. super simple, just add or delete bold tags and info as you please. if you don't want this at all, just delete the whole div this comment is in ---//

[/comment][b]mood:[/b] vibes
[b]outfit:[/b] describe or link
[b]location:[/b] self explanatory
[b]tags:[/b] alert your fellow writers  [/div][comment]

//--- bottom section (text): actual post goes here! ---//

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim dictum elementum. Morbi maximus mauris id convallis varius. Sed cursus ullamcorper volutpat. Nam at faucibus est, nec lacinia lacus. Vestibulum consectetur malesuada felis at tristique. Sed nec semper nisl. Fusce faucibus tortor ac metus imperdiet, molestie blandit magna dapibus. Quisque ut leo eget metus tincidunt convallis ut non tellus.

Morbi ultrices nibh sed sem congue, vitae commodo massa egestas. In tempus lacus a erat sodales, vehicula tristique erat sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur non viverra mauris, vitae dapibus felis. In cursus tincidunt magna vel suscipit. In tempor sit amet purus in placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Morbi orci neque, pharetra ut purus sed, posuere ullamcorper mi. Etiam eu eros consequat, placerat risus ac, posuere nisi. Donec consectetur eu tortor sit amet facilisis. Curabitur dignissim id sem accumsan sagittis. Mauris eget tortor non orci luctus hendrerit quis eget est. Vivamus vitae tempor lacus. Quisque risus est, consequat vel elit id, hendrerit scelerisque lectus. Fusce interdum faucibus lobortis. Nunc lorem sem, tincidunt sed ultrices sed, dignissim nec lorem. Aliquam sit amet tempor nisi, at maximus risus. Nam pulvinar interdum ullamcorper. Quisque nec aliquet felis. Proin quis rhoncus diam.[/div][/div][/div][/div][/div][/div]