[comment]-------fonts---------- [font=Karla]font[/font] [font=Montserrat]font[/font] [/comment][border=none; padding: 100px 20px; /*colours*/ --accent: #d2dbc5; --secondary: rgb(210, 219, 197, 0.2); --mainbg: #f4f4f4; --altbg: #fff; /*fonts*/ --heading: Montserrat; --body: Karla; /*images*/ --mainimg: url(https://64.media.tumblr.com/15280b06de85880d81dc6bcf75adc9ca/ccde97459718b452-40/s500x750/88d691c32b2f20550b793990b644b0ecd84b0f38.png); --icon1: url(https://64.media.tumblr.com/4cd89533601251dbf1bbe9ab29d33cb2/tumblr_pz9y98qQRx1ywvj10o6_250.png); --icon2: url(https://64.media.tumblr.com/729db512ef59f000245e093fe0ab33c9/tumblr_pz9y98qQRx1ywvj10o8_250.png); background: var(--mainbg); cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important; color: #000;][comment] ---------code body begins--------- [/comment][border=none; padding: 0px; background: var(--altbg); border-radius: 15px; overflow: hidden; max-width: 800px; margin: auto;][comment] ------header[/comment][border=none; padding: 30px; background: #fff; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;][border=none; padding: 0px; height: 50px; width: 50px; border-radius: 100%; box-sizing: border-box; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; border: 1px solid var(--accent); color: var(--accent); font-size: 20px;][comment] ----------change this to any icon you want!----------- [/comment][fa]fal fa-leaf[/fa][comment] ----------character name to be changed here---------- [/comment][/border][border=none; padding: 0px; font-family: var(--heading); font-size: 30px; font-weight: bold; text-align: right; color: var(--accent);]character's name.[/border][/border][border=none; padding: 25px; background: var(--accent);][/border][comment] -----------main body----------- [/comment][border=none; padding: 0px 30px 30px 30px; display: flex; flex-direction: row; justify-content: space-evenly; flex-wrap: wrap; justify-content: space-between;][comment] ---------------left side--------------- [/comment][border=none; padding: 0px; width: 100%; max-width: 280px; background: #fff; margin-top: 30px;][comment] ---------main image--------- [/comment][border=none; padding: 0px; height: 260px; background: var(--mainimg); background-size: cover; background-position: 50% 75%; margin-bottom: 30px; box-sizing: border-box; padding: 20px;][/border][comment] ---------mood--------- [/comment][border=none; padding: 0px; font-size: 12px; padding: 10px; display: flex; flex-direction: row; justify-content: space-evenly; background: var(--secondary); box-sizing: border-box; border: 1px solid var(--accent); font-family: var(--body); color: #000; border-radius: 30px;][border=none; padding: 0px; width: 20px; padding-left: 5px; text-align: left; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-heart[/fa][/border][border=none; padding: 0px; text-align: right; display: flex; flex-direction: column; justify-content: space-evenly; width: 240px; margin-left: 20px; padding-right: 5px;]this is the mood right here[/border][/border][comment] ---------location--------- [/comment][border=none; padding: 0px; margin-top: 20px; font-size: 12px; padding: 10px; display: flex; flex-direction: row; justify-content: space-evenly; background: var(--secondary); box-sizing: border-box; border: 1px solid var(--accent); font-family: var(--body); color: #000; border-radius: 30px;][border=none; padding: 0px; text-align: left; display: flex; flex-direction: column; justify-content: space-evenly; width: 20px; padding-left: 5px;][fa]fal fa-map-marker-alt[/fa][/border][border=none; padding: 0px; text-align: right; display: flex; flex-direction: column; justify-content: space-evenly; width: 240px; margin-left: 20px; padding-right: 5px;]where they at?[/border][/border][comment] ---------interactions--------- [/comment][border=none; padding: 0px; margin-top: 20px; font-size: 12px; padding: 10px; display: flex; flex-direction: row; justify-content: space-evenly; background: var(--secondary); box-sizing: border-box; border: 1px solid var(--accent); font-family: var(--body); color: #000; border-radius: 30px;][border=none; padding: 0px; text-align: left; display: flex; flex-direction: column; justify-content: space-evenly; width: 20px; padding-left: 5px;][fa]fal fa-comment[/fa][/border][border=none; padding: 0px; text-align: right; display: flex; flex-direction: column; justify-content: space-evenly; width: 240px; margin-left: 20px; padding-right: 5px;]talking to blah and blah[/border][/border][comment] ---------outfit--------- [/comment][border=none; padding: 0px; margin-top: 20px; font-size: 12px; padding: 10px; display: flex; flex-direction: row; justify-content: space-evenly; background: var(--secondary); box-sizing: border-box; border: 1px solid var(--accent); font-family: var(--body); color: #000; border-radius: 30px;][border=none; padding: 0px; text-align: left; display: flex; flex-direction: column; justify-content: space-evenly; width: 20px; padding-left: 5px;][fa]fal fa-tshirt[/fa][/border][border=none; padding: 0px; text-align: right; display: flex; flex-direction: column; justify-content: space-evenly; width: 240px; margin-left: 20px; padding-right: 5px;]popped off with this outfit[/border][/border][comment] ---------icons---------- [/comment][border=none; padding: 0px; margin-top: 30px; display: flex; flex-direction: row; justify-content: space-evenly;][comment] -----first icon------ [/comment][border=none; padding: 0px; height: 130px; width: 130px; box-sizing: border-box; padding: 10px; border: 1px solid #ddd; margin-right: 10px;][border=none; padding: 0px; height: 100%; width: 100%; background: var(--icon1); background-size: cover; background-position: 50% 0%;][/border][/border][comment] -----third icon------ [/comment][border=none; padding: 0px; height: 130px; width: 130px; box-sizing: border-box; padding: 10px; border: 1px solid #ddd; margin-left: 10px;][border=none; padding: 0px; height: 100%; width: 100%; background: var(--icon2); background-size: cover; background-position: 50% 0%;][/border][/border][comment] [/comment][/border][/border][comment] ---------------end of left / start of right side--------------- [/comment][border=none; padding: 0px; width: 100%; max-width: 388px; background: linear-gradient(to right, #ccc 1px, transparent 1px) 0 0, linear-gradient(to right, #ccc 1px, transparent 1px) 0 100%, linear-gradient(to left, #ccc 1px, transparent 1px) 100% 0, linear-gradient(to left, #ccc 1px, transparent 1px) 100% 100%, linear-gradient(to bottom, #ccc 1px, transparent 1px) 0 0, linear-gradient(to bottom, #ccc 1px, transparent 1px) 100% 0, linear-gradient(to top, #ccc 1px, transparent 1px) 0 100%, linear-gradient(to top, #ccc 1px, transparent 1px) 100% 100%; background-repeat: no-repeat; background-size: 25px 25px; margin-top: 30px; padding: 20px;][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 640px; 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; font-size: 12px; text-align: justify; line-height: 20px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc euismod diam vitae justo ullamcorper, vel tempus lorem tempor. Mauris sollicitudin mi sit amet cursus rhoncus. In non quam eget ipsum consectetur malesuada. Quisque vitae malesuada nibh. Nunc dolor enim, congue dapibus leo ut, ultricies mollis elit. Nullam a velit ut lectus lobortis mollis quis sed erat. Etiam quis mauris orci. Donec efficitur mauris in lacinia egestas. Morbi cursus egestas tincidunt. Suspendisse ultrices urna convallis consequat placerat. Duis ullamcorper mollis erat quis rutrum. Cras vel elit sed enim imperdiet finibus at quis lorem. Mauris at congue est. Suspendisse et gravida justo, a dictum leo. Maecenas vitae massa eros. Ut auctor, magna non sollicitudin pellentesque, odio risus fringilla enim, ac feugiat massa eros in orci. Pellentesque quis ante quis orci consectetur gravida at ut urna. Donec convallis tristique sem in imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Nulla tempor posuere vulputate. Aliquam lobortis finibus mi, sed tincidunt urna congue at. Suspendisse sem lorem, volutpat at ornare nec, consequat nec lacus. Aliquam pulvinar metus ac pulvinar blandit. Phasellus a nisi lorem. In ut eros nec lorem placerat scelerisque vel porta enim. Pellentesque magna nunc, tempus non convallis in, rhoncus non purus. Nunc posuere lectus nisi, sed lacinia orci scelerisque ac. Suspendisse nec nisi et turpis fringilla faucibus sit amet quis risus. Nam fermentum nunc non sollicitudin sagittis. Cras sed fringilla enim. Nulla sed enim rhoncus, placerat magna molestie, mollis magna. Suspendisse lacinia nibh libero, finibus condimentum lectus porttitor eget. Duis arcu sem, cursus nec leo at, gravida cursus massa. Proin placerat tempor turpis efficitur elementum. Pellentesque sed auctor nisl. Nunc pretium sodales neque, vel vulputate mi viverra eget. Maecenas neque neque, sollicitudin at elit in, posuere ullamcorper magna. Curabitur vestibulum, ligula a interdum interdum, neque ex tincidunt mauris, ac egestas lectus neque posuere velit. Duis ac enim aliquam, lobortis ipsum eget, efficitur magna. Nam vitae massa at lorem volutpat porttitor. Morbi justo sem, mattis id nunc ac, consequat iaculis magna. Praesent venenatis diam non fringilla laoreet. Fusce mollis in arcu in rutrum. Vestibulum blandit consectetur urna, non ullamcorper ex varius non. Vestibulum vulputate condimentum auctor. Aliquam egestas enim non venenatis efficitur. Pellentesque varius diam eu sapien suscipit, ut elementum neque scelerisque. Pellentesque et tellus euismod, tempor est vel, gravida nisl. Etiam sollicitudin aliquet ultricies.[/border][/border][/border][/border][comment] ---------end of right-----------[/comment][/border][comment] -----------main body ends----------- [/comment][border=none; padding: 25px; background: var(--accent);][/border][/border][comment] ---------code body ends---------[/comment][border=none; padding: 0px; position: relative; margin-top: 30px; margin-bottom: -20px; font-size: 10px; text-align: center; color: #666; text-transform: uppercase; letter-spacing: 2px; font-family: Karla;]coded by natasha.[/border][/border]