[comment]
[font=Oswald]title[/font]
[font=Montserrat]subtitles & headings[/font]
[font=Roboto]body[/font]
[/comment][border=none; padding: 0px;

--accent: #e06746;
--bg: #111;
--color: #ddd;
--credit: #fff;

--title: Oswald;
--heading: Montserrat;
--body: Roboto;

--img: url(https://www.globalpharmatek.com/wp-content/uploads/2016/10/orionthemes-placeholder-image.jpg);

max-width: 700px; margin: auto; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-family: var(--body); color: var(--color); font-size: 12px;][border=none; padding: 0px; display: flex; flex-direction: row;  justify-content: center; flex-wrap: wrap; padding: 10px; background: var(--bg); border-bottom: 1px solid #444;][comment]


-----character name-----[/comment][border=none; padding: 0px; margin: 10px; height: 35px; flex-grow: 1; line-height: 30px; box-sizing: border-box;][border=none; padding: 0px; font-size: 40px; font-family: var(--title); text-transform: uppercase; color: var(--accent);]ginevra weasley[/border][/border][comment]

--------role name-----[/comment][border=none; padding: 0px; margin: 10px; text-transform: uppercase; font-family: var(--heading); font-size: 13px; letter-spacing: 3px; font-weight: bold; text-align: right; display: flex; flex-direction: column; justiy-content: space-evenly; flex-grow: 1; line-height: 34px;]the lioness[/border][comment]


-------end of header-----[/comment][/border][border=none; padding: 0px; display: flex; background: var(--bg);  flex-direction: row; padding: 10px; flex-wrap: wrap;][comment]
-------left side-------[/comment][border=none; padding: 0px; margin: 10px; width: 220px; flex-grow: 1; height: 400px;][comment]


--------image-----[/comment][border=none; padding: 0px; height: 250px; background: var(--img); background-size: cover; background-position: 50% 30%;][/border][comment]


---------character details---------[/comment][border=none; padding: 0px; margin-top: 20px; height: 130px;][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 130px; overflow: hidden;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify; line-height: 22px;][comment]


--------location------[/comment][border=none; padding: 0px; display: flex; flex-direction: row;][border=none; padding: 0px; min-width: 30px; height: 30px; box-sizing: border-box; border: 1px solid var(--accent); text-align: center; font-size: 15px; display: flex; flex-direction: column; justify-content: space-evenly; margin-right: 10px;][fa]far fa-map-marker-alt[/fa][/border][border=none; padding: 0px; width: 100%; height: 30px; box-sizing: border-box; border: 1px solid var(--accent); text-align: right; padding-right: 5px; display: flex; flex-direction: column; justify-content: space-evenly;]location here[/border][/border][comment]

--------mood------[/comment][border=none; padding: 0px; display: flex; flex-direction: row; margin-top: 20px;][border=none; padding: 0px; min-width: 30px; height: 30px; box-sizing: border-box; border: 1px solid var(--accent); text-align: center; font-size: 15px; display: flex; flex-direction: column; justify-content: space-evenly; margin-right: 10px;][fa]far fa-heart[/fa][/border][border=none; padding: 0px; width: 100%; height: 30px; box-sizing: border-box; border: 1px solid var(--accent); text-align: right; padding-right: 5px; display: flex; flex-direction: column; justify-content: space-evenly;]mood here[/border][/border][comment]

--------outfit------[/comment][border=none; padding: 0px; display: flex; flex-direction: row; margin-top: 20px;][border=none; padding: 0px; min-width: 30px; height: 30px; box-sizing: border-box; border: 1px solid var(--accent); text-align: center; font-size: 15px; display: flex; flex-direction: column; justify-content: space-evenly; margin-right: 10px;][fa]far fa-tshirt[/fa][/border][border=none; padding: 0px; width: 100%; height: 30px; box-sizing: border-box; border: 1px solid var(--accent); text-align: right; padding-right: 5px; display: flex; flex-direction: column; justify-content: space-evenly;]outfit here[/border][/border][comment]

--------interactions-------[/comment][border=none; padding: 0px; text-align: center;][border=none; padding: 0px; font-family: var(--heading); color: var(--accent); margin-top: 10px; margin-bottom: -25px; font-weight: bold;]interactions[/border]
interactions come here[/border][comment]

-------end of character details------[/comment][/border][/border][/border][/border][comment]


---------end of left side------[/comment][/border][comment]


-------main ic content comes here-------[/comment][border=none; padding: 0px; margin: 10px; width: 420px; flex-grow: 1; height: 400px;][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 400px; overflow: hidden;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify; line-height: 22px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet, ipsum nec rutrum luctus, metus est euismod justo, elementum mollis turpis ipsum ac diam. Nunc ac gravida dolor, non feugiat nunc. Morbi pellentesque et lorem ac sollicitudin. Curabitur euismod vehicula urna ut eleifend. Nunc feugiat accumsan blandit. Phasellus consectetur tortor quis neque maximus dapibus. Nunc aliquam volutpat risus eget tempus. Etiam placerat et odio et consequat. Pellentesque et urna ut quam dignissim dictum. Maecenas ultricies, felis eu iaculis tincidunt, odio lorem interdum neque, ut convallis urna velit a lacus. Proin consectetur eros est, sed pulvinar risus lacinia in.

In condimentum, mauris id blandit lobortis, tortor magna facilisis erat, id porttitor nulla lectus in lacus. Nullam ligula eros, ullamcorper eu neque non, dapibus mollis augue. Phasellus molestie malesuada sollicitudin. Fusce odio ante, laoreet in finibus et, fermentum sed ante. Duis a faucibus enim. Donec pharetra vitae lorem accumsan ultrices. Curabitur id venenatis dui. Quisque sit amet laoreet enim, facilisis faucibus metus. Sed diam tellus, accumsan eget ultricies in, laoreet vitae massa. Aenean bibendum, nisl nec tristique venenatis, libero sem malesuada diam, nec tempus metus mi a mauris. Cras ornare blandit lacus, et elementum arcu rutrum id. Etiam vel ultrices neque, sed rutrum lorem. Vestibulum et libero massa. Quisque ut enim nec neque eleifend molestie. Praesent feugiat interdum pretium. Aliquam turpis ex, tristique in mollis ut, lobortis ultrices enim.

Duis a faucibus enim. Donec pharetra vitae lorem accumsan ultrices. Curabitur id venenatis dui. Quisque sit amet laoreet enim, facilisis faucibus metus. Sed diam tellus, accumsan eget ultricies in, laoreet vitae massa. Aenean bibendum, nisl nec tristique venenatis, libero sem malesuada diam, nec tempus metus mi a mauris. Cras ornare blandit lacus, et elementum arcu rutrum id. Etiam vel ultrices neque, sed rutrum lorem. Vestibulum et libero massa. Quisque ut enim nec neque eleifend molestie. Praesent feugiat interdum pretium. Aliquam turpis ex, tristique in mollis ut, lobortis ultrices enim.
[/border][/border][/border][/border][comment]


--------end of code-------[/comment][/border][border=none; padding: 0px; margin-top: 10px; text-align: center;][border=none; padding: 0px; display: inline-block; background: var(--accent); text-transform: uppercase; font-size: 9px; letter-spacing: 1px; font-weight: bold; padding: 4px 7px; color: var(--credit);]coded by natasha.[/border][/border][/border]