IC Post Generator
Lexielai
Cal Bear
[class name=aspectRatio]
display: block;
position: relative;
width: 100%;
padding-top: 60%;
[/class]
[class name=aspectRatio maxWidth=1200px]
display: block;
width: 100%;
padding-top: 0px;
[/class]
[class name=root]
display: block;
position: absolute;
height: 100%;
width: 100%;
margin: auto;
overflow: hidden;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
top: 0px;
left: 0px;
right: 0px;
bottom 0px;
[/class]
[class name=root maxWidth=1200px]
display: block;
position: relative;
height: auto;
min-height: 100%;
[/class]
[class name=mainFlexContainer]
display: flex;
position: relative;
height: var(--mainFlexContainerHeight);
width: var(--mainflexContainerWidth);
flex-flow: column wrap;
justify-content: center;
align-items: center;
align-content: center;
box-sizing: border-box;
overflow: visible;
z-index: 2;
[/class]
[class name=primaryBox]
display: block;
position: relative;
height: var(--primaryBoxHeight);
width: var(--primaryBoxWidth);
box-sizing: border-box;
margin: 30px;
background-color: var(--primaryBoxColor);
box-shadow: var(--primaryBoxShadow);
overflow: hidden;
flex: 0 1 auto;
z-index: 3;
[/class]
[class name=primaryBox maxWidth=1200px]
display: block;
width: 90%;
height: auto;
margin: 5%;
[/class]
[class name=diagonal]
position: absolute;
height: 100%;
width: 150%;
background-color: var(--diagonalColor);
color: var(--transparent);
transform: var(--diagonalAngle);
transform-origin: 130% 150%;
overflow: hidden;
z-index: 4;
[/class]
[class name=noOverflow]
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
overflow: hidden;
[/class]
[class name=characterName maxWidth=1200px]
width: 100%;
[/class]
[class name=infoFlexContainer]
display: flex;
position: relative;
height: 100%;
width: 100%;
box-sizing: border-box;
flex-flow: column wrap;
justify-content: flex-start;
align-items: center;
align-content: flex-start;
flex: 1 1 auto;
overflow: visible;
z-index: 6;
border: 2px solid var(--primaryBoxBorderColor);
[/class]
[class name=infoFlexContainer maxWidth=1200px]
width: 100%;
[/class]
[class name=infoContainer]
position: relative;
width: 100%;
box-sizing: border-box;
flex: 0 1 auto;
[/class]
[class name=infoContainer maxWidth=1200px]
width: 100%;
[/class]
[class name=divider]
width: 90%;
min-height: 3px;
margin: auto;
background: linear-gradient(to right, var(--transparent), var(--diagonalColor), var(--transparent));
flex: 3 0 auto;
color: var(--transparent);
[/class]
[class name=coverContainer]
display: flex;
position: relative;
box-sizing: border-box;
height: var(--contentHeight);
width: 100%;
box-sizing: border-box;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
align-content: space-between;
flex: 0 1 auto;
max-height: 500vh;
overflow: visible;
z-index: 6;
[/class]
[class name=coverContainer maxWidth=1200px]
width: 100%;
height: auto;
max-height: 500vh;
flex-flow: column wrap;
justify-content: space-between;
align-items: center;
align-content: space-between;
[/class]
[class name=profileContainer]
display: flex;
position: relative;
width: var(--columnOneWidth);
height: 100%;
box-sizing: border-box;
margin: 0px;
background: var(--profileContainerColor);
border-right: 2px solid var(--profileContainerBorderColor);
flex-flow: column wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
flex: 1 1 auto;
overflow: hidden;
[/class]
[class name=profileContainer maxWidth=1200px]
width: 100%;
margin-bottom: 5px;
padding-bottom: 5px;
[/class]
[class name=contentContainer]
display: block;
position: relative;
box-sizing: border-box;
width: var(--columnTwoWidth);
height: 100%;
box-sizing: border-box;
padding: 0px;
flex: 1 1 auto;
[/class]
[class name=contentContainer maxWidth=1200px]
position: relative;
width: 100%;
box-sizing: border-box;
padding: 0px;
flex: 1 1 auto;
order: 1;
[/class]
[class name=characterNameContainer]
display: flex;
position: relative;
width: 100%;
height: var(--characterNameContainerHeight);
box-sizing: border-box;
flex-flow: column wrap;
justify-content: center;
align-items: center;
align-content: center;
z-index: 6;
[/class]
[class name=contentContainer maxWidth=1200px]
justify-content: flex-end;
[/class]
[class name=contentBox]
display: flex;
position: relative;
width: 100%;
height: var(--contentHeight);
box-sizing: border-box;
flex-flow: column wrap;
justify-content: flex-start;
align-items: center;
align-content: center;
background: var(--infoBoxColor);
z-index: 6;
[/class]
[class name=contentBox maxWidth=1200px]
justify-content: center;
[/class]
[class name=mainText]
display: block;
position: relative;
box-sizing: border-box;
text-align: justify;
font-family: var(--mainFont);
font-size: var(--mainTextSize);
letter-spacing: 1px;
padding-left: 10px;
padding-bottom: 10px;
color: var(--mainTextColor);
white-space: pre-wrap;
[/class]
[class name=noPadding]
padding: 0px;
[/class]
[class name=mainHeader]
display: block;
position: relative;
box-sizing: border-box;
padding: 5px;
margin-bottom: 10px;
background: var(--headerColor);
font-family: var(--headerFont);
font-size: var(--headerFontSize);
letter-spacing: 3px;
text-transform: uppercase;
color: var(--headerTextColor);
[/class]
[class name=mainSubheader]
display: block;
position: relative;
width: 50%;
box-sizing: border-box;
margin-left: 10px;
margin-bottom: 10px;
border-bottom: 2px solid var(--mainAccent);
font-family: var(--mainFont);
font-size: 1.1em;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--mainTextColor);
[/class]
[class name=indent]
text-indent: 0px;
[/class]
[class name=characterNameText]
font-family: var(--characterNameFont);
font-size: 4em;
text-transform: uppercase;
text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
text-align: left;
letter-spacing: 4px;
color: var(--characterNameColor);
flex: 0 1 auto;
[/class]
[class name=characterNameText maxWidth=1200px]
color: var(--characterInfoColor);
transform: rotate(0deg);
text-align: center;
[/class]
[class name=characterProfileText]
display: block;
width: 100%;
box-sizing: border-box;
font-family: var(--characterNameFont);
font-size: 2em;
text-transform: uppercase;
text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
text-align: center;
letter-spacing: 2px;
flex: 0 1 auto;
[/class]
[class name=profileColor]
color: var(--characterInfoColor);
[/class]
[class name=characterInfoText]
display: block;
width: 100%;
box-sizing: border-box;
font-family: var(--characterNameFont);
font-size: 2em;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
color: var(--characterProfileColor);
flex: 0 1 auto;
[/class]
[class name=characterInfoText maxWidth=1200px]
text-align: center;
[/class]
[class name=image]
position: relative;
display: block;
box-sizing: border-box;
width: 100%;
max-height: 70%;
overflow: hidden;
[/class]
[class name=image maxWidth=1200px]
padding: 0px;
float: none;
[/class]
[class name=scrollBox]
display: block;
position: relative;
width: 100%;
height: 100%;
max-height: 500vh;
overflow-x: hidden;
overflow-y: scroll;
padding-right: 300%;
flex: 1 1 auto;
[/class]
[class name=scrollBox maxWidth=1200px]
width: 100%;
height: auto;
max-height: 150vmax;
overflow-x: hidden;
overflow-y: auto;
[/class]
[class name=instructionsContainer]
position: relative;
width: 100%;
box-sizing: border-box;
margin-bottom: var(--instructionsBoxMargin);
background: var(--instructionsBoxColor);
overflow: hidden;
border: 2px solid var(--primaryBoxBorderColor);
[/class]
[class name=instructionsContainer maxWidth=1200px]
margin-bottom: 0px;
[/class]
[class name=inputBox]
display: block;
position: relative;
box-sizing: border-box;
width: 96%;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 1%;
padding: 10px;
border-radius: 5px;
background-color: var(--inputBoxBgColor);
color: var(--inputBoxTextColor);
font-family: var(--inputFont);
font-size: var(--inputTextSize);
white-space: pre-wrap;
text-align: justify;
flex: 1 0 auto;
[/class]
[class name=headerInput]
font-family: var(--headerInputFont);
[/class]
[class name=inputBox state=focus]
background-color: var(--inputBoxFocusBgColor);
transition: background var(--transitionFunction), color var(--transitionFunction);
color: var(--inputBoxFocusTextColor);
[/class]
[class name=inputValue]
display: inline;
white-space: pre-wrap;
[/class]
[class name=smallBox]
box-sizing: border-box;
height: 2em;
flex: 1 1 auto;
[/class]
[class name=medBox]
box-sizing: border-box;
height: 5em;
flex: 2 0 auto;
[/class]
[class name=largeBox]
box-sizing: border-box;
height: 500px;
[/class]
[class name=margin]
margin-top: 5px;
[/class]
[class name=preserve]
white-space: pre-wrap;
[/class]
[class name=codeSheet]
display: none;
position: relative;
width: auto;
height: 50vh;
background-color: var(--codeSheetBgColor);
box-sizing: border-box;
border: 1px solid var(--codeSheetBorderColor);
padding: 15px;
margin-bottom: 20px;
margin-right: 20px;
margin-left: 20px;
font-family: var(--codeSheetFont);
color: var(--codeSheetColor);
overflow-y: scroll;
white-space: pre-wrap;
[/class]
[class name=generateContainer]
width: 100%;
height: 150px;
box-sizing: border-box;
padding: 10px;
[/class]
[class name=generate]
width: 50%;
box-sizing: border-box;
padding: 10px;
margin: auto;
border: 1px solid var(--mainAccent);
border-radius: 5px;
background-color: var(--diagonalColor);
font-family: var(--headerFont);
font-size: 3em;
text-align: center;
[/class]
[class name=generate state=hover]
background-color: rgba(255, 255, 255, 1);
[/class]
[script class="generate" on=click]
// Hide the current code if it was displayed
hide codeSheet
// Get the values and store them in variables
set headerOne (getVal headerOneInput)
set imgLink (getVal imgLinkInput)
set sidebar (getVal sidebarInput)
set tag (getVal tagInput)
set headerTwo (getVal headerTwoInput)
set post (getVal postInput)
// Fill in the user values
setText ${headerOne} headerOneValue
setText ${imgLink} imgLinkValue
setText ${sidebar} sidebarValue
setText ${tag} tagValue
setText ${headerTwo} headerTwoValue
setText ${post} postValue
// Show the generated BBCode
slideDown 1000 codeSheet
[/script]
[class=variables]
--mainFont: 'Source Sans Pro', sansserif;
--mainTextSize: 1em;
--mainTextColor: #EFEFE7;
--headerFont: 'Staatliches', sansserif;
--headerColor: #EFEFE7;
--headerFontSize: 3.2em;
--headerTextColor: #182121;
--characterNameFont: 'Staatliches', 'sansserif';
--characterNameColor: #EFEFE7;
--characterInfoColor: #182121;
--nameHeight: 10%;
--contentBoxHeight: 100%;
--characterInfoBackground: var(--diagonalColor);
--characterProfileColor: #EFEFE7;
--profileFont: 'Text Me One', sansserif;
--profileTextSize: 0.8em;
--profileImageHeight: 100%;
--profileImageSize: auto 95%;
--profileImageContainerWidth: 100%;
--profileImageOffset: 0%;
--profileHeight: 90%;
--profileContainerColor: #EFEFE7;
--profileContainerBorderColor: #EFEFE7;
--infoBoxColor: var(--transparent);
--infoBoxBorderColor: rgba(120, 120, 120, 0.5);
--infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor);
--infoHeight: 90%;
--charInfoHeight: 10%;
--transparent: rgba(0, 0, 0, 0);
--primaryBoxColor: #182121;
--diagonalColor: #EFEFE7;
--primaryBoxBorderColor: rgba(24, 33, 33, 0.5);
--primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0);
--transitionFunction: 0.3s ease-in-out 0s;
--textTransitionFunction: 0.8s ease-in-out 0s;
--instructionsBoxMargin: -5%;
--instructionsBoxColor: rgba(24, 33, 33, 1);
--codeSheetBgColor: #EFEFE7;
--codeSheetFont: 'Courier New', sansserif;
--codeSheetColor: rgba(20, 20, 20, 1);
--codeSheetBorderColor: rgba(24, 33, 33, 0.5);
--inputBoxBgColor: #333338;
--inputBoxTextColor: #EFEFE7;
--inputBoxFocusTextColor: #182121;
--inputBoxFocusBgColor: #f8f8f7;
--inputTextSize: 1em;
--inputFont: 'Source Sans Pro', sansserif;
--headerInputFont: var(--headerFont);
--columnOneWidth: 30%;
--columnTwoWidth: 70%;
--primaryBoxWidth: 85%;
--primaryBoxHeight: 75%;
--mainFlexContainerWidth: 100%;
--mainFlexContainerHeight: 100%;
--contentHeight: 100%;
--diagonalAngle: rotate(-12deg);
[/class]
[div class="variables"]
[div class="instructionsContainer"]
[div class=mainHeader]
Instructions
[/div]
[div class=mainSubheader][/div]
[div class=mainText]
This is the IC Post Generator v.1. It may have some unforeseen bugs, so please report any that you find.
You may use any template for the IC posts, but this generator is one easy option. Please fill out the text boxes in the correct regions BEFORE you generate the code!
[/div]
[div class="generateContainer"]
[div class="generate"]Generate Code[/div]
[/div]
[div class="codeSheet"]
[nobr] [comment] Author: [USER=7055]@Lexielai[/USER] [/comment] [comment][font=Roboto]font reference[/font][font="Source Sans Pro"]font reference[/font][font="Roboto Condensed"]font reference[/font][font=Share]font reference[/font][font="Anton"]font reference[/font][font=Open Sans]font reference[/font][font="Text Me One"]font reference[/font][font=Staatliches]font reference[/font][/comment] [comment]<--------------SETUP-------------->[/comment] [comment]maintains width and height ratio through different resolutions[/comment] [class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; [/class] [class name=aspectRatio maxWidth=1200px] display: block; width: 100%; padding-top: 0px; [/class] [comment]establishes design space and primary background[/comment] [class name=root] display: block; position: absolute; height: 100%; width: 100%; margin: auto; overflow: hidden; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1200px] display: block; position: relative; height: auto; min-height: 100%; [/class] [comment]<--------------LAYOUT-------------->[/comment] [comment]contains all primary flex objects[/comment] [class name=mainFlexContainer] display: flex; position: relative; height: var(--mainFlexContainerHeight); width: var(--mainflexContainerWidth); flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; box-sizing: border-box; overflow: visible; z-index: 2; [/class] [comment]establishes space for the information you want this design to show[/comment] [class name=primaryBox] display: block; position: relative; height: var(--primaryBoxHeight); width: var(--primaryBoxWidth); box-sizing: border-box; margin: 30px; background-color: var(--primaryBoxColor); box-shadow: var(--primaryBoxShadow); overflow: hidden; flex: 0 1 auto; z-index: 3; [/class] [class name=primaryBox maxWidth=1200px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=diagonal] position: absolute; height: 100%; width: 150%; background-color: var(--diagonalColor); color: var(--transparent); transform: var(--diagonalAngle); transform-origin: 130% 150%; overflow: hidden; z-index: 4; [/class] [class name=noOverflow] position: absolute; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; [/class] [class name=characterName maxWidth=1200px] width: 100%; [/class] [comment]<--------------LARGE-INFO-BOX-DIVS-------------->[/comment] [class name=infoFlexContainer] display: flex; position: relative; height: 100%; width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: flex-start; flex: 1 1 auto; overflow: visible; z-index: 6; border: 2px solid var(--primaryBoxBorderColor); [/class] [class name=infoFlexContainer maxWidth=1200px] width: 100%; [/class] [class name=infoContainer] position: relative; width: 100%; box-sizing: border-box; flex: 0 1 auto; [/class] [comment]gradient divider between text[/comment] [class name=divider] width: 100%; min-height: 3px; margin: auto; background: linear-gradient(to right, var(--transparent), var(--diagonalColor), var(--transparent)); flex: 3 0 auto; color: var(--transparent); [/class] [comment]<--------------COVER-------------->[/comment] [class name=coverContainer] display: flex; position: relative; box-sizing: border-box; height: var(--contentHeight); width: 100%; box-sizing: border-box; flex-flow: column wrap; justify-content: space-between; align-items: center; align-content: space-between; flex: 0 1 auto; overflow: invisible; z-index: 6; [/class] [class name=coverContainer maxWidth=1200px] width: 100%; height: auto; max-height: 500vh; flex-flow: column wrap; justify-content: space-between; align-items: center; align-content: space-between; [/class] [class name=profileContainer] display: flex; position: relative; width: var(--columnOneWidth); height: 100%; box-sizing: border-box; background: var(--profileContainerColor); border-right: 2px solid var(--profileContainerColor); flex-flow: column wrap; justify-content: flex-start; align-items: flex-start; align-content: flex-start; flex: 1 1 auto; overflow: hidden; [/class] [class name=profileContainer maxWidth=1200px] width: 100%; margin-bottom: 5px; padding-bottom: 5px; [/class] [class name=characterNameContainer] display: flex; position: relative; width: 100%; height: var(--characterNameContainerHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; z-index: 6; [/class] [class name=contentBox] display: flex; position: relative; width: 100%; height: var(--contentHeight); box-sizing: border-box; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: center; background: var(--infoBoxColor); z-index: 6; [/class] [class name=contentBox maxWidth=1200px] justify-content: flex-start; height: 100%; [/class] [comment]<--------------TEXT-FORMATTING-------------->[/comment] [class name=mainText] display: block; position: relative; box-sizing: border-box; padding-left: 20px; padding-bottom: 10px; text-align: justify; font-family: var(--mainFont); font-size: var(--mainTextSize); letter-spacing: 1px; color: var(--mainTextColor); white-space: pre-wrap; [/class] [class name=noPadding] padding: 0px; [/class] [class name=mainHeader] display: block; position: relative; box-sizing: border-box; padding: 5px; margin-bottom: 10px; background: var(--headerColor); font-family: var(--headerFont); font-size: var(--headerFontSize); letter-spacing: 3px; text-transform: uppercase; color: var(--infoBoxColor); [/class] [class name=mainSubheader] display: block; position: relative; width: 50%; box-sizing: border-box; margin-left: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--mainAccent); font-family: var(--mainFont); font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; color: var(--mainTextColor); [/class] [class name=indent] text-indent: 0px; [/class] [class name=characterNameText] font-family: var(--characterNameFont); font-size: 4em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: left; letter-spacing: 4px; color: var(--characterNameColor); flex: 0 1 auto; [/class] [class name=characterNameText maxWidth=1200px] color: var(--characterInfoColor); transform: rotate(0deg); text-align: center; [/class] [class name=characterProfileText] display: block; width: 100%; box-sizing: border-box; font-family: var(--characterNameFont); font-size: 2em; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); text-align: center; letter-spacing: 2px; color: var(--characterProfileColor); flex: 0 1 auto; [/class] [class name=tagsBox] box-sizing: border-box; width: 97%; margin: 1.5%; padding: 5px; background-color: var(--primaryBoxColor); border-radius: 5px; flex: 2 0 auto; [/class] [class name=characterInfoText] display: block; width: 100%; box-sizing: border-box; font-family: var(--characterNameFont); font-size: 2em; text-transform: uppercase; text-align: center; letter-spacing: 2px; color: var(--characterInfoColor); flex: 0 1 auto; [/class] [class name=characterInfoText maxWidth=1200px] text-align: center; [/class] [class name=image] position: relative; display: block; box-sizing: border-box; width: 100%; padding: 0px; max-height: 70%; border-bottom: 2px solid var(--profileContainerBorderColor); border-top: 2px solid var(--profileContainerBorderColor); background: var(--imageBackground); overflow: hidden; [/class] [class name=image maxWidth=1200px] float: none; [/class] [comment]invisible scrollbox[/comment] [class name=scrollBox] display: block; position: relative; width: var(--columnTwoWidth); height: 100%; max-height: 500vh; overflow-x: hidden; overflow-y: scroll; padding-right: 300%; flex: 1 1 auto; [/class] [class name=scrollBox maxWidth=1200px] width: 100%; height: 100%; max-height: 150vmax; padding-right: 15px; overflow-x: hidden; overflow-y: auto; [/class] [comment]<--------------VARIABLES-------------->[/comment] [comment]variables[/comment] [class=variables] --mainFont: 'Source Sans Pro', sansserif; --mainTextSize: 1em; --mainTextColor: #EFEFE7; --characterNameFont: 'Staatliches', 'sansserif'; --characterNameColor: #EFEFE7; --characterInfoColor: #EFEFE7; --nameHeight: 10%; --contentBoxHeight: 100%; --characterInfoBackground: var(--diagonalColor); --characterProfileColor: #EFEFE7; --profileFont: 'Text Me One', sansserif; --profileTextSize: 0.8em; --profileImageHeight: 100%; --profileImageSize: auto 95%; --profileImageContainerWidth: 100%; --profileImageOffset: 0%; --profileHeight: 90%; --profileContainerColor: [div class="inputValue sidebarValue"][/div]; --profileContainerBorderColor: #182121; --imageBackground: white; --infoBoxColor: var(--transparent); --infoBoxBorderColor: rgba(120, 120, 120, 0.5); --infoBoxBorderStyle: 10px solid var(--infoBoxBorderColor); --infoHeight: 90%; --charInfoHeight: 10%; --transparent: rgba(0, 0, 0, 0); --primaryBoxColor: #182121; --diagonalColor: #EFEFE7; --primaryBoxBorderColor: rgba(24, 33, 33, 0.5); --primaryBoxShadow: -2px 2px 40px 3px rgba(0, 0, 0, 0); --transitionFunction: 0.3s ease-in-out 0s; --textTransitionFunction: 0.8s ease-in-out 0s; --columnOneWidth: 30%; --columnTwoWidth: 70%; --primaryBoxWidth: 85%; --primaryBoxHeight: 75%; --mainFlexContainerWidth: 100%; --mainFlexContainerHeight: 100%; --contentHeight: 100%; --diagonalAngle: rotate(-12deg); [/class] [comment]<--------------CONTENT-------------->[/comment] [div class="variables"] [div class="aspectRatio"] [div class="root"] [div class="mainFlexContainer"] [div class="primaryBox"] [div class=infoFlexContainer] [div class="coverContainer one"] [div class=profileContainer] [div class="characterProfileText"] [div class="inputValue headerOneValue"][/div] [/div] [div class=image][img][div class="inputValue imgLinkValue"][/div][/img][/div] [div class="mainText tagsBox" style="margin-top: 5px;""] [div class="inputValue tagValue"][/div] [/div][comment]*mainText*[/comment] [/div][comment]*profileContainer*[/comment] [div class="scrollBox" style="margin-bottom: 15px;"] [div class="infoContainer"] [div class=characterInfoText] [div class="inputValue headerTwoValue"][/div] [/div] [div class=divider][/div] [div class=mainText style="margin-top: 20px;""] [div class="inputValue postValue"][/div] [/div][comment]*mainText*[/comment] [/div][comment]*infoContainer*[/comment] [/div][comment]*contentContainer*[/comment] [/div][comment]*coverContainer*[/comment] [/div][comment]*infoFlexContainer*[/comment] [/div][/div][comment]*primaryBox, mainFlexContainer*[/comment] [/div][/div][/div] [comment]*root, aspectRatio, variables*[/comment] [/nobr]
[/div]
[/div]
[div class="aspectRatio"]
[div class="root"]
[div class="mainFlexContainer"]
[div class="primaryBox"]
[div class=infoFlexContainer]
[div class="coverContainer one"]
[div class=profileContainer]
[div class="characterProfileText profileColor"]
[input class="inputBox smallBox headerOneInput headerInput" type=text placeholder="Input Header One"][/input]
[/div]
[div class=image]
[/div]
[input class="inputBox smallBox imgLinkInput margin" type=text placeholder="Input your image link."][/input]
[input class="inputBox smallBox sidebarInput margin" type=text placeholder="Input the color for this sidebar (EX: #EFEFE7, White)."][/input]
[input class="inputBox medBox tagInput margin" type=textarea placeholder="Input your tags and extra information."][/input]
[/div]
[div class=contentContainer]
[div class="infoContainer"]
[div class=characterInfoText]
[input class="inputBox smallBox headerTwoInput headerInput" type=text placeholder="Input Header Two"][/input]
[/div]
[div class=divider][/div]
[div class=mainSubheader][/div]
[input class="inputBox largeBox postInput" type=textarea placeholder="Write your post."][/input]
[/div]
[/div]
[/div]
[/div]
[/div][/div]
[/div][/div][/div]
Last edited:
