Nornslayer
sugar is my wife and morg is the other mistress
THIS IS APPLY NOT FIRST COME FIRST SERVE! Multiple people may apply for one role! forms will be due by weds! If you need more time let me or a mod know and we can extend if necessary! Roles that are not open for applications are; Cleric, Paladin, Rouge, and Mage!
Code:
[comment]
Designed and coded by Nano.
Please do not remove the credits or claim the code as your own work.
[font=Changa One].[/font]
[font=Abel].[/font][/comment][comment]
// accents
[/comment][border=0; padding: 0;
--bgcolor: #111111;
--accent: #a9000d;
--grey: #666666;
--text: #fefefe;
--mainimg: url('https://i.imgur.com/G5eIzVj.jpg') center/cover no-repeat;
--profileicon: url('https://i.imgur.com/ePTJWE9.jpg') center/cover no-repeat;
width: 100%;
font-size: initial;
][border=0px; margin: 0 auto; padding: 20px; width: calc(100% - 40px); max-width: 700px; background: var(--bgcolor); font-size: initial; position: relative; overflow: hidden;][comment]
// [triangle] red border + bg image //
[/comment][border=0px; top: -1px; left: -1px; padding: 0; width: 400px; height: 400px; clip-path: polygon(0 0, 0% 100%, 100% 0); background: var(--accent); position: absolute; z-index: 1; pointer-events: none;][border=0px; padding: 0; width: 380px; height: 380px; clip-path: polygon(0 0, 0% 100%, 100% 0); background: var(--mainimg);][/border][/border][comment]
// start of content //
[/comment][border=0px; display: flex; flex-flow: row wrap; margin-left: -5px; padding: 0; width: calc(100% + 5px); position: relative;][comment]
// start of left side (quote) //
[/comment][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 150px; min-height: 450px; position: relative; overflow: hidden; z-index: 2;][border=0px; bottom: 20px; padding: 0; width: 100%; position: absolute;][border=0px; margin: 0 auto 10px; padding: 0; width: 50px; height: 5px; background: var(--accent);][/border][comment]
// quote //
[/comment][border=0px; padding: 0; width: 100%; font-family: 'Changa One', cursive; font-size: 1.8em; line-height: 115%; color: var(--text); text-align: center;]some kind of quote or blurb goes here, but try to keep it relatively short[/border][border=0px; margin: 12px auto 0; padding: 0; width: 50px; height: 5px; background: var(--accent);][/border][/border][/border][comment]
// start of right side //
[/comment][border=0px; margin-left: 5px; padding: 0; flex: 2; width: 100%; min-width: 250px;][border=0px; border-right: 5px solid var(--accent); padding: 2px 5px 5px 0; width: calc(100% - 10px); position: relative; z-index: 2;][comment]
// name + title //
[/comment][border=0px; padding: 0; font-family: 'Changa One', cursive; font-size: 2.2em; line-height: 100%; color: var(--text); text-align: right; text-transform: capitalize;]Name Here[/border][border=0px; margin-top: -3px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 100%; color: var(--accent); font-weight: 700; text-align: right; text-transform: lowercase;]title/role here[/border][/border][comment]
// start of tabs + CS details //
[/comment][border=0px; margin-top: 10px; margin-left: -10px; padding: 0; width: calc(100% + 10px); height: 70vh; min-height: 450px; max-height: 500px; position: relative;][border=0px; display: flex; flex-flow: row wrap; left: 20px; margin-left: -10px; padding: 0; width: 240px; height: 24px; position: absolute; z-index: 2; pointer-events: none;][border=0px; margin-left: 10px; padding: 0; flex: 1; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--text); text-align: center;]001[/border][border=0px; margin-left: 10px; padding: 0; flex: 1; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--text); text-align: center;]002[/border][border=0px; margin-left: 10px; padding: 0; flex: 1; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--text); text-align: center;]003[/border][border=0px; margin-left: 10px; padding: 0; flex: 1; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--text); text-align: center;]004[/border][/border][border=0px; padding: 0; width: 100%; height: 70vh; min-height: 450px; max-height: 500px; background: var(--bgcolor); position: absolute; pointer-events: none; ][/border][tabs]
[comment]tab one[/comment]
[tab=.][border=0px; left: 20px; top: 0; padding: 0; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--accent); text-align: center; position: absolute; z-index: 3; cursor: default;]001[/border][border=0px; left: 15px; top: 20px; padding: 0; width: calc(100% + 2px); height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow: hidden; position: absolute; z-index: 2;][border=0px; padding: 0; padding-right: 18px; width: 100%; height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow-y: scroll;][comment]
// content box 1 - basic information //
[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 9px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border=1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;]basics[/border][border=0px; display: flex; flex-flow: row-reverse wrap; margin-left: -15px; padding: 0; width: calc(100% + 15px);][border=0px; margin-left: 15px; padding: 0; flex: 1; width: 100%; min-width: 100px;][comment]
// profile image //
[/comment][border=0px; border-radius: 3px; margin-bottom: 15px; padding: 0; width: 100%; padding-top: 100%; background: var(--profileicon);][/border][/border][comment]
// stat bars //
[/comment][border=0px; margin-left: 15px; margin-bottom: 15px; padding: 0; flex: 2; width: 100%; min-width: 150px;][comment]
// stat one //
[/comment][border=0px; padding: 0; padding-right: 5px; font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-align: right; text-transform: uppercase;]attack[/border][border=0px; margin-top: -1px; padding: 0; width: 100%; height: 7px; background: var(--grey);][border=0px; padding: 0; width: 80%; height: 7px; background: var(--accent);][/border][/border][comment]
// stat two //
[/comment][border=0px; margin-top: 10px; padding: 0; padding-right: 5px; font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-align: right; text-transform: uppercase;]defense[/border][border=0px; margin-top: -1px; padding: 0; width: 100%; height: 7px; background: var(--grey);][border=0px; padding: 0; width: 60%; height: 7px; background: var(--accent);][/border][/border][comment]
// stat three //
[/comment][border=0px; margin-top: 10px; padding: 0; padding-right: 5px; font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-align: right; text-transform: uppercase;]health[/border][border=0px; margin-top: -1px; padding: 0; width: 100%; height: 7px; background: var(--grey);][border=0px; padding: 0; width: 50%; height: 7px; background: var(--accent);][/border][/border][comment]
// stat four //
[/comment][border=0px; margin-top: 10px; padding: 0; padding-right: 5px; font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-align: right; text-transform: uppercase;]stamina[/border][border=0px; margin-top: -1px; padding: 0; width: 100%; height: 7px; background: var(--grey);][border=0px; padding: 0; width: 65%; height: 7px; background: var(--accent);][/border][/border][comment]
// stat five //
[/comment][border=0px; margin-top: 10px; padding: 0; padding-right: 5px; font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-align: right; text-transform: uppercase;]mp[/border][border=0px; margin-top: -1px; padding: 0; width: 100%; height: 7px; background: var(--grey);][border=0px; padding: 0; width: 35%; height: 7px; background: var(--accent);][/border][/border][comment]
// end of stats //
[/comment][/border][/border][comment]
// basic profile //
[/comment][comment]
// question one //
[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]name[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;]Firstname Surname[/border][/border][comment]
// question two //
[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]gender[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text);]Gender Here[/border][/border][comment]
// question three //
[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]nickname[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text);]Nickname/Alias[/border][/border][comment]
// question four //
[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]age[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;]Number (##)[/border][/border][comment]
// question five //
[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]role[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;]Whatever Else[/border][/border][comment]
// question six //
[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]major & minor[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;]Something[/border][/border][/border][comment]
// content box 2 - appearance //
[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border=1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;]appearance[/border][comment]
// appearance basics //
[/comment][comment]
// question one //
[/comment][border=0px; display: flex; flex-flow: row wrap; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]height[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text); text-align: left;]#'##" (###cm)[/border][/border][comment]
// question two //
[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 5px; padding: 0; width: 100%;][border=0px; display: flex; align-items: center; justify-content: center; padding: 7px 10px; flex: 1; width: 100%; min-width: 60px; background: var(--accent); font-family: 'Changa One', cursive; font-size: .8em; line-height: 100%; color: var(--text); text-transform: lowercase;]build[/border][border=0px; display: flex; align-items: center; padding: 5px 10px; flex: 9; width: 100%; min-width: 100px; background: var(--grey); font-family: 'Abel', sans-serif; font-size: .9em; line-height: 100%; color: var(--text);]here[/border][/border][comment]
// appearance description //
[/comment][border=0px; margin-top: 15px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;]short appearance blurb here[/border][/border][comment]
// content box 3 - personality //
[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border=1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;]personality[/border][comment]
// personality description //
[/comment][border=0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;]at least 25 headcanons here, this refers to short sentences that give insight into your character, such as;
— growing up he had to be pretty self reliant as his parents were absent much of his life
— struggles with forming attachments to others but once he’s does he goes all in
— hates the taste of lemon cupcakes
[/border][/border][comment]//extra content boxes here//[/comment][/border][/border][/tab]
[comment]tab two[/comment]
[tab=.][border=0px; left: 80px; top: 0; padding: 0; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--accent); text-align: center; position: absolute; z-index: 3; cursor: default;]002[/border][border=0px; left: 15px; top: 20px; padding: 0; width: calc(100% + 2px); height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow: hidden; position: absolute; z-index: 2;][border=0px; padding: 0; padding-right: 18px; width: 100%; height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow-y: scroll;][comment]
// content box 4 - history //
[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 9px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border=1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;]background[/border][comment]
// backstory //
[/comment][border=0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.
Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.[/border][/border][comment]//extra content boxes here//[/comment][/border][/border][/tab]
[comment]tab three[/comment]
[tab=.][border=0px; left: 140px; top: 0; padding: 0; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--accent); text-align: center; position: absolute; z-index: 3; cursor: default;]003[/border][border=0px; left: 15px; top: 20px; padding: 0; width: calc(100% + 2px); height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow: hidden; position: absolute; z-index: 2;][border=0px; padding: 0; padding-right: 18px; width: 100%; height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow-y: scroll;][comment]
// content box 5 - powers/abilities //
[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 9px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border=1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;]skills[/border][comment]
// power descriptions //
[/comment][border=0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;][comment]
// ability 1 //
[/comment][border=0px; display: flex; flex-flow: row wrap; margin-left: -15px; padding: 0; width: calc(100% + 15px);][border=0px; margin-left: 15px; padding: 0; flex: 1; width: 100%; min-width: 75px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Class Skills/Spells[/border][border=0px; margin-left: 15px; padding: 0; flex: 5; width: 100%; min-width: 150px;]Name and describe your three class skills. An example for cleric would be; "Healing Touch; when they put their hands upon a wound and concentrate they can fully heal one injury. does not work on internal issues. Takes 50 mp on each cast."[/border][/border][comment]
// ability 2 //
[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 25px; margin-left: -15px; padding: 0; width: calc(100% + 15px);][border=0px; margin-left: 15px; padding: 0; flex: 1; width: 100%; min-width: 75px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]General Abilities[/border][border=0px; margin-left: 15px; padding: 0; flex: 5; width: 100%; min-width: 150px;]Please describe two general abilities that your character has, must relate to a skill they have in real life. state how they know that skill. examples for skill names would be horseback riding or fencing[/border][/border][comment]//extra abilities here//[/comment][/border][/border][comment]
// content box 5 - powers/abilities //
[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 29px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border=1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;]weapons[/border][comment]
// equipment descriptions //
[/comment][border=0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;][comment]
// equip 1 //
[/comment][border=0px; display: flex; flex-flow: row wrap; margin-left: -15px; padding: 0; width: calc(100% + 15px);][border=0px; margin-left: 15px; padding: 0; flex: 1; width: 100%; min-width: 75px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Equip 1[/border][border=0px; margin-left: 15px; padding: 0; flex: 5; width: 100%; min-width: 150px;]Please describe what weapon they use and the specifics of it as well as what other gear they use such as shield or secondary weapon.[/border][/border][comment]//extra weapons/equips here//[/comment][/border][/border][comment]//extra content boxes here//[/comment][/border][/border][/tab]
[comment]tab four[/comment]
[tab=.][border=0px; left: 200px; top: 0; padding: 0; width: 50px; height: 24px; font-family: 'Changa One', cursive; font-size: 18px; line-height: 23px; color: var(--accent); text-align: center; position: absolute; z-index: 3; cursor: default;]004[/border][border=0px; left: 15px; top: 20px; padding: 0; width: calc(100% + 2px); height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow: hidden; position: absolute; z-index: 2;][border=0px; padding: 0; padding-right: 18px; width: 100%; height: calc(70vh - 20px); min-height: 420px; max-height: 470px; overflow-y: scroll;][comment]
// content box 7 - extras/notes //
[/comment][border=1px solid var(--grey); border-radius: 4px; margin-top: 9px; padding: 15px; width: calc(100% - 32px); background: var(--bgcolor); position: relative;][border=1px solid var(--grey); border-radius: 4px; display: inline-block; right: 20px; top: -10px; padding: 3px 10px 2px; background: var(--bgcolor); font-family: 'Abel', sans-serif; font-size: .8em; line-height: 100%; color: var(--accent); font-weight: 700; text-transform: uppercase; position: absolute;]extra[/border][comment]
// extras //
[/comment][border=0px; padding: 0; font-family: 'Abel', sans-serif; font-size: 1.0em; line-height: 125%; color: var(--text); text-align: justify;][comment]
// likes //
[/comment][border=0px; display: flex; flex-flow: row wrap; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 60px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Likes[/border][border=0px; margin-left: 5px; padding: 0; flex: 9; width: 100%; min-width: 150px;]Item one, Item two, Item three, Item four, Etc[/border][/border][comment]
// dislikes //
[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 20px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 60px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]Dislikes[/border][border=0px; margin-left: 5px; padding: 0; flex: 9; width: 100%; min-width: 150px;]Item one, Item two, Item three, Item four, Etc[/border][/border][comment]
// note 1 //
[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 20px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 40px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]friends.[/border][border=0px; margin-left: 5px; padding: 0; flex: 10; width: 100%; min-width: 150px;]list friends.[/border][/border][comment]
// note 2 //
[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 20px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 40px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]rivals.[/border][border=0px; margin-left: 5px; padding: 0; flex: 10; width: 100%; min-width: 150px;]List rivals.[/border][/border][comment]
// note 3 //
[/comment][border=0px; display: flex; flex-flow: row wrap; margin-top: 20px; margin-left: -5px; padding: 0; width: calc(100% + 5px);][border=0px; margin-left: 5px; padding: 0; flex: 1; width: 100%; min-width: 40px; color: var(--accent); font-weight: 700; text-align: left; text-transform: uppercase;]relationships.[/border][border=0px; margin-left: 5px; padding: 0; flex: 10; width: 100%; min-width: 150px;]if any, list crushes.[/border][/border][comment] // extra notes here //[/comment][/border][/border][comment]//extra content boxes here//[/comment][/border][/border][/tab]
[/tabs][/border][/border][/border][border=0px; right: -1px; bottom: -1px; padding: 0; width: 150px; height: 150px; clip-path: polygon(100% 0, 0% 100%, 100% 100%); background: var(--accent); position: absolute; z-index: 1; pointer-events: none;][/border][/border][comment]//end of code//[/comment][border=0px; margin: 5px auto 0; padding: 0; width: 100%; max-width: 700px; font-size: .6em; text-align: center; text-transform: uppercase; opacity: .7;]code by [USER=20950]@Nano[/USER][/border][/border]