Nornslayer
sugar is my wife and morg is the other mistress
SIGN UP INFO
Please make sure to read the main thread and verify with me in discord that you can begin character creation before you post here! If you have multiple characters please use this code:
FORM
SIDE CHARACTER FORM
Please make sure to read the main thread and verify with me in discord that you can begin character creation before you post here! If you have multiple characters please use this code:
Code:
[tabs]
[tab=character name]
form code in here
[/tab]
[tab=character name]
form code in here
[/tab]
[comment]add for as many as you need[/comment]
[tabs]
FORM
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;]type of magic[/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 - change the 80% to whatever you want to change the stat bar //
[/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 - change the 60% to whatever you want to change the stat bar //
[/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 - changed the 50% to whatever you want to change the stat bar //
[/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;]speed[/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 - change the 65% to whatever you want to change the stat bar //
[/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 - change the 35% to whatever you want to change the stat bar //
[/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;]tactics[/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 here[/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;]sexuality[/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;]sexuality here[/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;]rank[/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;]rank here[/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;]outfit style[/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);]very short description[/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;]brief description[/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;]
✧ likes. —
✧ dislikes. —
✧ hobbies. —
✧ headcanons. —
✦ at least 20 please
[/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;]magic[/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;]magic description[/border][border=0px; margin-left: 15px; padding: 0; flex: 5; width: 100%; min-width: 150px;]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]
// 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;]spells[/border][border=0px; margin-left: 15px; padding: 0; flex: 5; width: 100%; min-width: 150px;]no more than six specific spells and their description. if the wiki page for their magic has more than six, pick and choose the six you want.
✧ spell name —
✧ spell name —
✧ spell name —
✧ spell name —
✧ spell name —
✧ spell name —[/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;]extra[/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;]Skills[/border][border=0px; margin-left: 15px; padding: 0; flex: 5; width: 100%; min-width: 150px;]4 skills unrelated to their magic, and explain how they learned it
✧ skill 1 —
✧ skill 2 —
✧ skill 3 —
✧ skill 4 —[/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;]weaknesses[/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]
// weakness 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;]001.[/border][border=0px; margin-left: 5px; padding: 0; flex: 10; width: 100%; min-width: 150px;]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.[/border][/border][comment]
// weakness 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;]002.[/border][border=0px; margin-left: 5px; padding: 0; flex: 10; width: 100%; min-width: 150px;]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.[/border][/border][comment]
// weakness 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;]003.[/border][border=0px; margin-left: 5px; padding: 0; flex: 10; width: 100%; min-width: 150px;]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.[/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]
SIDE CHARACTER FORM
Code:
[comment]
Designed and coded by Nano.
Please do not remove the credits or claim the code as your own work.
[font=Poppins].[/font]
[font=Roboto Slab].[/font]
[font=Roboto].[/font]
[/comment][comment]
// accents //
[/comment][border=0; padding: 0;
--black: #2a2a2a;
--white: #fefefe;
--accent: #3143b3;
--grey: #d4d4d4;
][border=0; margin: 50px auto; padding: 0; width: 100%; max-width: 600px; overflow: hidden; position: relative; font-size: initial;][comment]
// title + full name //
[/comment][border=0; padding: 25px 15px; width: calc(100% - 30px); background: var(--black);][border=0; padding: 0; font-family: 'Roboto Slab', serif; color: var(--white); line-height: 100%; font-size: 1.0em; text-align: right; text-transform: uppercase;]Role[/border][border=0; padding: 0; font-family: 'Poppins', sans-serif; color: var(--accent); line-height: 100%; font-size: 2.0em; font-weight: 700; text-align: right; text-transform: uppercase;]First Lastname[/border][/border][comment]
// main image //
[/comment][border=0; padding: 0; width: 100%; height: 300px; background: url('https://i.imgur.com/z4QsEgT.jpg') center/cover no-repeat;][/border][comment]
// black bar //
[/comment][border=0; padding: 0; width: 100%; height: 15px; background: var(--black);][/border][comment]
// start of content section //
[/comment][border=0; padding: 20px; width: calc(100% - 40px); background: var(--grey);][comment]
// proficon (emote/icon/w.e. you want) + quote box (try to keep it relatively short)
[/comment][border=0; display: flex; flex-flow: row wrap; margin-left: -20px; padding: 0; width: calc(100% + 20px);][border=0; margin-left: 20px; margin-bottom: 20px; padding: 15px; width: calc(100% - 30px); min-width: 100px; flex: 1; background: var(--white); pointer-events: none;][border=0; padding: 0; padding-top: 100%; width: 100%; background: url('https://i.imgur.com/n7OUpz4.jpg') center/cover no-repeat;][/border][/border][border=0; margin-left: 20px; margin-bottom: 20px; padding: 15px; width: calc(100% - 30px); min-width: 150px; height: 100px; flex: 4; background: var(--white);][border=0; display: flex; align-items: center; justify-content: center; padding: 0; width: 100%; height: 100px; overflow: hidden;][border=0; padding: 0; font-family: 'Roboto', sans-serif; color: var(--grey); line-height: 115%; font-size: 0.8em; text-align: justify; text-transform: uppercase;]very short quote.[/border][/border][/border][/border][comment]
// end of proficon // start of IC text //
[/comment][border=2px solid var(--white); box-sizing: border-box; padding: 10px; width: 100%; position: relative;][border=0; top: -3px; left: 25px; right: 25px; padding: 0; width: calc(100% - 50px); height: 4px; background: var(--grey); position: absolute;][/border][border=0; bottom: -3px; left: 25px; right: 25px; padding: 0; width: calc(100% - 50px); height: 4px; background: var(--grey); position: absolute;][/border][border=0; padding: 0; font-family: 'Roboto', sans-serif; color: var(--white); line-height: 125%; font-size: 0.9em; text-align: justify;]
name. —
age. —
magic. —
purpose. — why were they created as a side character??
relationship with the guild. — how do they feel about the guild?? please describe it
hcs. — at least 5
★
★
★
★
★
[comment]
[/comment][/border][/border][/border][comment]
// end of contents // black bar + visible credit (please don't remove)
[/comment][border=0; padding: 15px 0; width: 100%; background: var(--black); color: var(--white); font-size: 0.6em; text-align: center; text-transform: uppercase;]Code By Nano[comment][USER=20950]@Nano[/USER] [/comment][/border][/border][/border]
Last edited: