Nornslayer
sugar is my wife and morg is the other mistress
INFO: only post here if you have been approved in the discord
Code:
[comment]
[font=Oswald]title[/font]
[font=Montserrat]subtitles & headings[/font]
[font=Roboto]body[/font]
[/comment][border=none; padding: 0px;
--accent: #d13f3f;
--bg: #111;
--header: #000;
--color: #ddd;
--unselected: #444;
--credit: #fff;
--title: Oswald;
--heading: Montserrat;
--body: Roboto;
--img1: url(https://i.stack.imgur.com/y9DpT.jpg);
--img2: url(https://i.stack.imgur.com/y9DpT.jpg);
--img3: url(https://i.stack.imgur.com/y9DpT.jpg);
--img4: url(https://i.stack.imgur.com/y9DpT.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; position: relative; background: var(--bg);][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; padding: 10px;][comment]
------character name and role ------[/comment][border=none; padding: 0px; margin: 10px; width: 500px; height: 100px; background: var(--bg); flex-grow: 1; line-height: 20px; box-sizing: border-box;][border=none; padding: 0px; font-size: 40px; font-family: var(--title); text-transform: uppercase; color: var(--accent); margin-top: 25px;]character name[/border][border=none; padding: 0px; text-transform: uppercase; font-family: var(--heading); font-size: 13px; letter-spacing: 3px; font-weight: bold; margin-top: 20px; padding-left: 5px;]the role name[/border][/border][comment]
------tabs start here------[/comment][border=none; padding: 0px; margin: 10px; width: 140px; flex-grow: 1;][border=none; padding: 0px; height: 70px; max-width: 255px; overflow: hidden; margin: auto; margin-top: 15px;][border=none; padding: 0px; margin: auto; margin: -7px 0px 0px 0px; letter-spacing: -10px; line-height: 40px;][tabs][comment]
-----first tab------[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0px; line-height: 20px; pointer-events: none;][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; padding: 10px;][comment]
-----filler (ignore)-----[/comment][border=none; padding: 0px; margin: 10px; width: 500px; height: 100px; flex-grow: 1;][/border][comment]
-------tab buttons-----[/comment][border=none; padding: 0px; margin: 10px; width: 140px; flex-grow: 1; background: var(--bg);][border=none; padding: 0px; height: 90px; margin-top: -5px;box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;][comment]
-------button one------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--accent); border: 1px solid var(--accent); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]i[/border][comment]
-------button two------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--unselected); border: 1px solid var(--unselected); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]ii[/border][comment]
-------button three------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--unselected); border: 1px solid var(--unselected); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]iii[/border][comment]
-------button four------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--unselected); border: 1px solid var(--unselected); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]iv[/border][comment]
-----end of buttons------[/comment][/border][/border][comment]
---------end of the header-------[/comment][/border][comment]
------beginning of main content area------[/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; background: var(--bg); padding: 10px; box-sizing: border-box; border-top: 1px solid #333;][comment]
-------first image-------[/comment][border=none; padding: 0px; margin: 10px; width: 230px; height: 399px; background: var(--img1); background-size: cover; background-position: 50% 0%; flex-grow: 1;][/border][comment]
-------right side-------[/comment][border=none; padding: 0px; width: 430px; height: 419px; background: var(--bg); flex-grow: 1; pointer-events: auto;][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 419px; 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]
-----------full name------[/comment][border=none; padding: 0px; margin: 10px; height: 63.8px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; border: 1px solid var(--unselected); padding: 15px;][border=none; padding: 0px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; font-size: 13px;]full name[/border] full name comes here[/border][comment]
-----------nicknames------[/comment][border=none; padding: 0px; margin: 10px; margin-top: 20px; height: 63.8px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; border: 1px solid var(--unselected); padding: 15px;][border=none; padding: 0px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; font-size: 13px;]nicknames[/border] nicknames come here[/border][comment]
--------age--------[/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap;][border=none; padding: 0px; width: 195px; margin: 10px; height: 63.8px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; border: 1px solid var(--unselected); padding: 15px; flex-grow: 1;][border=none; padding: 0px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; font-size: 13px;]age[/border] age comes here[/border][comment]
--------date of birth--------[/comment][border=none; padding: 0px; width: 195px; margin: 10px; height: 63.8px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; border: 1px solid var(--unselected); padding: 15px; flex-grow: 1;][border=none; padding: 0px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; font-size: 13px;]date of birth[/border] date of birth comes here[/border][/border][comment]
--------gender--------[/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap;][border=none; padding: 0px; width: 195px; margin: 10px; height: 63.8px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; border: 1px solid var(--unselected); padding: 15px; flex-grow: 1;][border=none; padding: 0px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; font-size: 13px;]gender[/border] gender comes here[/border][comment]
--------sexuality--------[/comment][border=none; padding: 0px; width: 195px; margin: 10px; height: 63.8px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; border: 1px solid var(--unselected); padding: 15px; flex-grow: 1;][border=none; padding: 0px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; font-size: 13px;]sexuality[/border] sexuality comes here[/border][/border][comment]
-----------ethnicity------[/comment][border=none; padding: 0px; margin: 10px; height: 63.8px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; border: 1px solid var(--unselected); padding: 15px;][border=none; padding: 0px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; font-size: 13px;]blood status[/border] blood status comes here[/border][comment]
-----------occupation (copy this entire thing and paste below this if you'd like another piece of info in this section!)------[/comment][border=none; padding: 0px; margin: 10px; margin-top: 20px; height: 63.8px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; border: 1px solid var(--unselected); padding: 15px;][border=none; padding: 0px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; font-size: 13px;]occupation[/border] occupation comes here[/border][comment]
-----------occupation (copy this entire thing and paste below this if you'd like another piece of info in this section!)------[/comment][border=none; padding: 0px; margin: 10px; margin-top: 20px; height: 63.8px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; border: 1px solid var(--unselected); padding: 15px;][border=none; padding: 0px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; font-size: 13px;]magic speciality[/border] speciality comes here[/border][comment]
-----------occupation (copy this entire thing and paste below this if you'd like another piece of info in this section!)------[/comment][border=none; padding: 0px; margin: 10px; margin-top: 20px; height: 63.8px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; border: 1px solid var(--unselected); padding: 15px;][border=none; padding: 0px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; font-size: 13px;]unique ability[/border] unique ability goes here[/border][comment]
-------end of general details------[/comment][/border][/border][/border][/border][comment]
-------end of main content area-------[/comment][/border][comment]
-------end of tab one-------[/comment][/border][/tab][comment]
-----second tab------[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0px; line-height: 20px; pointer-events: none;][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; padding: 10px;][comment]
-----filler (ignore)-----[/comment][border=none; padding: 0px; margin: 10px; width: 500px; height: 100px; flex-grow: 1;][/border][comment]
-------tab buttons-----[/comment][border=none; padding: 0px; margin: 10px; width: 140px; flex-grow: 1; background: var(--bg);][border=none; padding: 0px; height: 90px; margin-top: -5px;box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;][comment]
-------button one------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--unselected); border: 1px solid var(--unselected); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]i[/border][comment]
-------button two------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--accent); border: 1px solid var(--accent); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]ii[/border][comment]
-------button three------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--unselected); border: 1px solid var(--unselected); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]iii[/border][comment]
-------button four------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--unselected); border: 1px solid var(--unselected); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]iv[/border][comment]
-----end of buttons------[/comment][/border][/border][comment]
---------end of the header-------[/comment][/border][comment]
------beginning of main content area------[/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px; box-sizing: border-box; border-top: 1px solid #333;][comment]
-------appearance info-------[/comment][border=none; padding: 0px; margin: 10px; width: 400px; height: 399px; background: var(--bg); flex-grow: 1; pointer-events: auto;][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 399px; 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]
----------height & weight------[/comment][border=none; padding: 0px; font-size: 13px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold;]height[/border][border=none; padding: 0px; border-left: 1px dashed var(--unselected); padding-left: 10px; margin-top: 5px;]height"[/border][comment]
----------hair------[/comment][border=none; padding: 0px; font-size: 13px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; margin-top: 20px;]hair[/border][border=none; padding: 0px; border-left: 1px dashed var(--unselected); padding-left: 10px; margin-top: 5px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet, ipsum nec rutrum luctus, metus est euismod justo, elementum mollis turpis ipsum ac diam.[/border][comment]
----------eyes------[/comment][border=none; padding: 0px; font-size: 13px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; margin-top: 20px;]eyes[/border][border=none; padding: 0px; border-left: 1px dashed var(--unselected); padding-left: 10px; margin-top: 5px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet, ipsum nec rutrum luctus, metus est euismod justo, elementum mollis turpis ipsum ac diam.[/border][comment]
----------physique------[/comment][border=none; padding: 0px; font-size: 13px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; margin-top: 20px;]physique[/border][border=none; padding: 0px; border-left: 1px dashed var(--unselected); padding-left: 10px; margin-top: 5px;]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.[/border][comment]
----------style------[/comment][border=none; padding: 0px; font-size: 13px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; margin-top: 20px;]style[/border][border=none; padding: 0px; border-left: 1px dashed var(--unselected); padding-left: 10px; margin-top: 5px;]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. [/border][comment]
----------modifications------[/comment][border=none; padding: 0px; font-size: 13px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; margin-top: 20px;]modifications[/border][border=none; padding: 0px; border-left: 1px dashed var(--unselected); padding-left: 10px; margin-top: 5px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet, ipsum nec rutrum luctus, metus est euismod justo.[/border][comment]
----------face claim (copy this whole thing and paste it below this to get another info section!------[/comment][border=none; padding: 0px; font-size: 13px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; margin-top: 20px;]face claim[/border][border=none; padding: 0px; border-left: 1px dashed var(--unselected); padding-left: 10px; margin-top: 5px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/border][comment]
--------end of appearance info------[/comment][/border][/border][/border][/border][comment]
-------right side-------[/comment][border=none; padding: 0px; margin: 10px; width: 240px; height: 399px; flex-grow: 1; pointer-events: auto;][comment]
-------second image------[/comment][border=none; padding: 0px; height: 259px; background: var(--img2); background-size: cover; background-position: 50% 50%;][/border][comment]
--------music player--------[/comment][border=none; padding: 0px; margin-top: 20px; height: 120px; box-sizing: border-box; background: linear-gradient(to right, var(--accent) 1px, transparent 1px) 0 0, linear-gradient(to right, var(--accent) 1px, transparent 1px) 0 100%, linear-gradient(to left, var(--accent) 1px, transparent 1px) 100% 0, linear-gradient(to left, var(--accent) 1px, transparent 1px) 100% 100%, linear-gradient(to bottom, var(--accent) 1px, transparent 1px) 0 0, linear-gradient(to bottom, var(--accent) 1px, transparent 1px) 100% 0, linear-gradient(to top, var(--accent) 1px, transparent 1px) 0 100%, linear-gradient(to top, var(--accent) 1px, transparent 1px) 100% 100%; background-repeat: no-repeat; background-size: 15px 15px; text-align: center; padding: 10px;][comment]
-------song title & artist------[/comment][border=none; padding: 0px; font-family: var(--title); font-size: 20px; text-transform: uppercase; padding-top: 10px; color: var(--accent);]paradise[/border][border=none; padding: 0px; font-size: 10px; font-family: var(--heading); letter-spacing: 1px; text-transform: uppercase; font-weight: bold;]bazzi[/border][comment]
-------media player buttons------[/comment][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: space-evenly; margin-top: 10px;][border=none; padding: 0px; font-size: 16px; padding-top: 5px; margin-right: 5px;][fa]fas fa-backward[/fa][/border][border=none; padding: 0px; width: 30px; height: 30px; overflow: hidden; position: relative;][border=none; padding: 0px; height: 100px; width: 100px; padding: 0; margin-top: -15px; margin-left:-15px;][comment]
--------put your soundcloud link here!------[/comment][media=soundcloud]https://soundcloud.com/bazziworldwide/paradise[/media][comment]
---------[/comment][/border][border=none; padding: 0px; height: 30px; width: 30px; background: var(--bg); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 20px; position: absolute; top: 0; left: 0; pointer-events: none; color: var(--accent);][fa]fas fa-play[/fa][/border][/border][comment]-------additional button (ignore)-----[/comment][border=none; padding: 0px; font-size: 16px; padding-top: 5px;][fa]fas fa-forward[/fa][/border][comment]
---------end of media player-----[/comment][/border][/border][comment]
--------end of right side------[/comment][/border][comment]
-------end of main content area-------[/comment][/border][comment]
-------end of tab two-------[/comment][/border][/tab][comment]
-----third tab------[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0px; line-height: 20px; pointer-events: none;][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; padding: 10px;][comment]
-----filler (ignore)-----[/comment][border=none; padding: 0px; margin: 10px; width: 500px; height: 100px; flex-grow: 1;][/border][comment]
-------tab buttons-----[/comment][border=none; padding: 0px; margin: 10px; width: 140px; flex-grow: 1; background: var(--bg);][border=none; padding: 0px; height: 90px; margin-top: -5px;box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;][comment]
-------button one------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--unselected); border: 1px solid var(--unselected); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]i[/border][comment]
-------button two------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--unselected); border: 1px solid var(--unselected); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]ii[/border][comment]
-------button three------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--accent); border: 1px solid var(--accent); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]iii[/border][comment]
-------button four------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--unselected); border: 1px solid var(--unselected); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]iv[/border][comment]
-----end of buttons------[/comment][/border][/border][comment]
---------end of the header-------[/comment][/border][comment]
------beginning of main content area------[/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px; box-sizing: border-box; border-top: 1px solid #333;][comment]
-------third image-------[/comment][border=none; padding: 0px; margin: 10px; width: 240px; height: 399px; background: var(--bg); flex-grow: 1;][border=none; padding: 0px; height: 140px; background: var(--img3); background-size: cover; background-position: 50% 50%;][/border][comment]
--------personality misc------[/comment][border=none; padding: 0px; margin-top: 20px; height: 239px; pointer-events: auto;][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 239px; 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]
-------likes-------[/comment][border=none; padding: 0px; height: 40px; background: var(--bg); position: sticky; top: 0px;][border=none; padding: 0px; text-align: center; background: var(--accent); font-size: 13px; font-family: Montserrat; padding: 5px; text-transform: uppercase; font-weight: bold;]likes[/border][/border]3 likes here, no more no less
[comment]-------dislikes-------[/comment][border=none; padding: 0px; height: 40px; background: var(--bg); position: sticky; top: 0px;][border=none; padding: 0px; text-align: center; background: var(--accent); font-size: 13px; font-family: Montserrat; padding: 5px; text-transform: uppercase; font-weight: bold;]dislikes[/border][/border]3 dislikes here, no more no less
[comment]-------misc info (copy this whole thing and paste it below for another section of info!)-------[/comment][border=none; padding: 0px; height: 40px; background: var(--bg); position: sticky; top: 0px;][border=none; padding: 0px; text-align: center; background: var(--accent); font-size: 13px; font-family: Montserrat; padding: 5px; text-transform: uppercase; font-weight: bold;]persona[/border][/border]briefly describe their personality
[/border][/border][/border][/border][/border][comment]
-------personality comes here-------[/comment][border=none; padding: 0px; margin: 10px; width: 400px; height: 399px; background: var(--bg); flex-grow: 1; pointer-events: auto;][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 399px; 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;][border=none; padding: 0px; width: 150px; text-align: center; background: var(--accent); font-size: 17px; font-family: Montserrat; padding: 7px; margin-right: 10px; text-transform: uppercase; float: left; font-weight: bold; margin-top: 3px;]hcs.[/border]have at least 15 hcs please
[/border][/border][/border][/border][comment]
-------end of main content area-------[/comment][/border][comment]
-------end of tab three-------[/comment][/border][/tab][comment]
-----fourth tab------[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0px; line-height: 20px; pointer-events: none;][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; padding: 10px;][comment]
-----filler (ignore)-----[/comment][border=none; padding: 0px; margin: 10px; width: 500px; height: 100px; flex-grow: 1;][/border][comment]
-------tab buttons-----[/comment][border=none; padding: 0px; margin: 10px; width: 140px; flex-grow: 1; background: var(--bg);][border=none; padding: 0px; height: 90px; margin-top: -5px;box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;][comment]
-------button one------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--unselected); border: 1px solid var(--unselected); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]i[/border][comment]
-------button two------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--unselected); border: 1px solid var(--unselected); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]ii[/border][comment]
-------button three------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--unselected); border: 1px solid var(--unselected); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]iii[/border][comment]
-------button four------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--accent); border: 1px solid var(--accent); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]iv[/border][comment]
-----end of buttons------[/comment][/border][/border][comment]
---------end of the header-------[/comment][/border][comment]
------beginning of main content area------[/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px; box-sizing: border-box; border-top: 1px solid #333;][comment]
-------background info starts here-------[/comment][border=none; padding: 0px; margin: 10px; width: 440px; height: 399px; background: var(--bg); flex-grow: 1; pointer-events: auto;][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 399px; 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]
--------first main event (you can change the heart icon next to the title to anything you want by looking up font awesome icons on google!)-------[/comment][border=none; padding: 0px; height: 40px; background: var(--bg); display: flex; flex-direction: row; position: sticky; top: 0px;][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: center; font-size: 14px; font-family: var(--heading); display: flex; flex-direction: column; justify-content: space-evenly; text-transform: uppercase;]before hogwarts[/border][/border]briefly explain their early childhood years
[comment]--------second main event-------[/comment][border=none; padding: 0px; height: 40px; background: var(--bg); display: flex; flex-direction: row; position: sticky; top: 0px;][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: center; font-size: 14px; font-family: var(--heading); display: flex; flex-direction: column; justify-content: space-evenly; text-transform: uppercase;]hogwarts years[/border][/border]briefly explain what their life was like at hogwarts
[comment]--------third main event-------[/comment][border=none; padding: 0px; height: 40px; background: var(--bg); display: flex; flex-direction: row; position: sticky; top: 0px;][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: center; font-size: 14px; font-family: var(--heading); display: flex; flex-direction: column; justify-content: space-evenly; text-transform: uppercase;]order life[/border][/border]why did they join the order and what have they been doing the two months before the thread starts
[/border][/border][/border][/border][comment]
-------fourth image-------[/comment][border=none; padding: 0px; margin: 10px; width: 200px; height: 399px; background: var(--img4); background-size: cover; background-position: 50% 0%; flex-grow: 1;][/border][comment]
-------end of main content area-------[/comment][/border][comment]
-------end of tab four-------[/comment][/border][/tab][comment]
--------end of tabs-----[/comment][/tabs][/border][/border][/border][comment]
-------end of header-------[/comment][/border][comment]
------filler tabs (ignore)------[/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px;][border=none; padding: 0px; margin: 10px; width: 320px; height: 400px; flex-grow: 1;][/border][border=none; padding: 0px; margin: 10px; width: 320px; height: 400px; flex-grow: 1;][/border][/border][comment]
------end of filler tabs-----[/comment][comment]
-------end of code-----[/comment][/border][comment]
------credit (don't remove!)-----[/comment][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]