✱⁞ I-NO.BBXML

<bbxml>


  <classes>

    <class name="body">
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 0px;
    background: url('https://i.imgur.com/NKB814E.jpg');
    position: relative;
    z-index: 1;
    </class>

    <class name="main-image">
    flex: 1 1 200px;
    box-sizing: border-box;
    min-height: 350px;
    background-image: url('https://i.imgur.com/m1jcx9c.jpg') /*MAIN IMAGE MINIMUM OF 400x850px*/, url('https://i.imgur.com/z7KToCA.jpg');
    background-position: center center;
    background-size: cover, auto;
    background-blend-mode: screen;
    </class>

    <class name="tab-area">
    flex: 4 1 300px;
    box-sizing: border-box;
    height: 85vh;
    max-height: 850px;
    position: relative;
    z-index: 2;
    </class>

    <class name="tab-container">
    display: inline-block;
    width: 30px;
    height: 100%;
    font-family: 'Courier New', monospace;
    background: #000 url('https://i.imgur.com/z7KToCA.jpg');
    box-sizing: border-box;
    overflow: hidden;
    </class>

    <class name="tab-adjust">
    width: calc(100% + 120px);
    margin: 20vh 0px 0px -60px;
    </class>

    <class name="tab-content">
    display: block;
    position: absolute;
    z-index: 3;
    top: 0px;
    left: 0px;
    height: 100%;
    width: calc(100% - 30px);
    margin-left: 30px;
    box-sizing: border-box;
    overflow: hidden;
    </class>

    <class name="scrollarea">
    display: inline-block;
    height: 100%;
    width: calc(100% - 6px);
    vertical-align: top;
    box-sizing: border-box;
    padding: 10%;
    </class>

    <class name="scrollbox">
    display: inline-block;
    height: 100%;
    width: 100%;
    padding-right: 150px;
    font-size: initial;
    overflow-y: scroll;
    overflow-x: hidden;
    </class>

    <class name="tab-buttons">
    display: block;
    height: 29px;
    width: 100%;
    font-size: 11px;
    color: #FFF;
    position: relative;
    font-weight: bold;
    z-index: 5;
    </class>

    <class name="center">
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    </class>

    <class name="pointer-column">
    display: inline-block;
    vertical-align: top;
    height: 100%;
    width: 6px;
    overflow: hidden;
    pointer-events: none;
    box-sizing: border-box;
    </class>

    <class name="bbox-image">
    display: inline-block;
    font-size: 0px;
    height: 225px;
    width: 225px;
    box-sizing: border-box;
    padding: 20px;
    pointer-events: none;
    background: url('https://i.imgur.com/z7KToCA.jpg');
    margin-bottom: 20px;
    </class>

    <class name="bbox-img-slot">
    display: block;
    height: 100%;
    width: 100%;
    position: relative;
    background-image: url('https://i.imgur.com/JzixwgZ.jpg') /*MINIMUM 195x195px*/, url('https://i.imgur.com/z7KToCA.jpg');
    background-size: cover, auto;
    background-blend-mode: screen;
    font-size: initial;
    </class>

    <class name="blacktext">
    display: block;
    font-size: 2.5em;
    color: #000;
    font-family: 'Raleway', sanserif;
    font-weight: bold;
    text-shadow: 2px -2px 0px #FFF;
    box-sizing: border-box;
    </class>

    <class name="column1">
    flex: 1 1 225px;
    width: 225px;
    font-size: initial;
    </class>

    <class name="smolquote">
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 20px;
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: .6em;
    line-height: .85em;
    </class>

    <class name="column2">
    flex: 3 1 225px;
    margin-top: 30px;
    width: calc(100% - 245px);
    </class>

    <class name="flex">
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    </class>

    <class name="blackbgarea">
    box-sizing: border-box;
    padding: 15px;
    background: #000 url('https://i.imgur.com/z7KToCA.jpg');
    color: #FFF;
    font-family: 'Courier New', monospace;
    font-size: .75em;
    </class>

    <class name="statbar">
    display: block;
    height: 10px;
    background: #FFF;
    margin-left: -10px;
    font-size: 0px;
    margin-top: -5px;
    margin-bottom: 5px;
    </class>

    <class name="whitebgarea">
    background: #FFF;
    box-sizing: border-box;
    padding: 15px;
    border: 1px solid #d4d4d4;
    </class>

    <class name="bodytext">
    font-size: .75em;
    line-height: 1.5em;
    font-family: 'Raleway', sanserif;
    text-align: justify; color: #393939;
    </class>

  </classes>


  <templates>

    <template name="tabs-box">
      <d c="tab-container">
        <d c="tab-adjust">
          <tabs>
            <tab o="XXXBASICINFORMATIONHEREINTAB01">
              <d c="tab-content">
                <d c="pointer-column" o="padding-top: calc(20vh + 6px);">
                  <img>https://i.imgur.com/w1oGu38.gif</img>
                </d>
                <d c="scrollarea">
                  <d c="scrollbox">
                    {tab1}
                  </d>
                </d>
              </d>
            </tab>
            <tab o="PERSONALINFORMATIONHEREINTAB02">
              <d c="tab-content">
                <d c="pointer-column" o="padding-top: calc(20vh + 35px);">
                  <img>https://i.imgur.com/w1oGu38.gif</img>
                </d>
                <d c="scrollarea">
                  <d c="scrollbox">
                    {tab2}
                  </d>
                </d>
              </d>
            </tab>
            <tab o="XHISTORYINFORMATIONHEREINTAB03">
              <d c="tab-content">
                <d c="pointer-column" o="padding-top: calc(20vh + 64px);">
                  <img>https://i.imgur.com/w1oGu38.gif</img>
                </d>
                <d c="scrollarea">
                  <d c="scrollbox">
                    {tab3}
                  </d>
                </d>
              </d>
            </tab>
            <tab o="XXRANDOMINFORMATIONHEREINTAB04">
              <d c="tab-content">
                <d c="pointer-column" o="padding-top: calc(20vh + 93px);">
                  <img>https://i.imgur.com/w1oGu38.gif</img>
                </d>
                <d c="scrollarea">
                  <d c="scrollbox">
                    {tab4}
                  </d>
                </d>
              </d>
            </tab>
          </tabs>
        </d>
      </d>
    </template>

    <template name="tabone">
      <d c="flex" o="align-items: flex-start;">
        <d c="column1">
          <d c="bbox-image">
            <d c="bbox-img-slot">
              <d o="position: absolute; bottom: -15px; right: 0px;">
                <d c="blacktext">
                  {title1}
                </d>
              </d>
            </d>
          </d>
          <d c="smolquote">
            {quote1}
          </d>
        </d>
        <d o="font-size: 0px; flex: .25 0 15px; height: 2px; width: 15px;">@sugarvine</d>
        <d c="column2">
          <d c="blacktext" o="text-align: right; padding-right: 20px;">
            {name1}
          </d>
          <d c="blackbgarea" o="display: block; margin-top: -15px;">
            <d o="display: block; margin-left: 10px;">
              {stat1}
              <d c="statbar" o="width: 30%;">/*strength*/</d>
            </d>
            <d o="display: block; margin-left: 10px;">
              {stat2}
              <d c="statbar" o="width: 30%;">/*defense*/</d>
            </d>
            <d o="display: block; margin-left: 10px;">
              {stat3}
              <d c="statbar" o="width: 30%;">/*magic*/</d>
            </d>
            <d o="display: block; margin-left: 10px;">
              {stat4}
              <d c="statbar" o="width: 30%;">/*resistance*/</d>
            </d>
            <d o="display: block; margin-left: 10px;">
              {stat5}
              <d c="statbar" o="width: 30%;">/*agility*/</d>
            </d>
            <d o="display: block; margin-left: 10px;">
              {stat6}
              <d c="statbar" o="width: 30%;">/*dexterity*/</d>
            </d>
            <d o="display: block; margin-left: 10px;">
              {stat7}
              <d c="statbar" o="margin-bottom: 0px; width: 30%;">/*luck*/</d>
            </d>
          </d>
        </d>
      </d>
      <d c="whitebgarea" o="display: block; width: 100%; overflow: hidden; margin-top: 25px;">
        <d c="flex" o="align-items: stretch;">
          <d o="flex: 3 1 225px; overflow: hidden; box-sizing: border-box; padding: 10px;">
            <d c="bodytext">{bodytext1}</d>
          </d>
          <d o="font-size: 0px; flex: .25 0 20px; height: 10px; width: 20px;">
            @sugarvine
          </d>
          <d c="blackbgarea" o="flex: 1 1 175px; position: relative; overflow: hidden; min-height: 200px;">
            <d c="center" o="pointer-events: none; text-align: center; left: 50%;">
              <img>https://i.imgur.com/QFeRXw8.png</img>
              <d c="blacktext" o="display: block; text-shadow: none;">
                <color o="#FFF">{title2}</color>
              </d>
            </d>
          </d>
        </d>
      </d>
    </template>

    <template name="tabtwo">
      <d c="whitebgarea" o="display: block;">
        <d c="blackbgarea" o="text-align: center; color: #FFF; padding: 30px 20px;">
          <d c="blacktext" o="display: block; text-shadow: none; margin-bottom: -5px;">
            <color o="#FFF">{title3}</color>
          </d>
          <d o="font-size: .65em; line-height: .85em; margin-bottom: 5px;">
            {quote2}
          </d>
        </d>
        <d c="bodytext" o="display: block; padding: 20px 10px 10px 10px;">
          {bodytext2}
        </d>
      </d>
      <d o="position: relative; width: 80%; margin: auto; margin-top: 25px;">
        <d c="blacktext" o="position: relative; letter-spacing: -1px; line-height: .8em; text-transform: lowercase; font-size: 3em; position: relative; z-index: 3; width: 70%;">
          {quote3}
        </d>
        <d c="center" o="z-index: 1; transform: translate(0%, -50%); right: 0px;">
          <d c="whitebgarea" o="font-size: 0px; height: 175px; width: 175px;">
            <d o="background-image: url('https://i.imgur.com/fdYzspt.jpg'), url('https://i.imgur.com/z7KToCA.jpg'); background-position: left center; background-blend-mode: screen; width: 100%; height: 100%;">
              @sugarvine
            </d>
          </d>
        </d>
      </d>
      <d c="flex" o="align-items: stretch; margin-top: 35px;">
        <d c="blackbgarea" o="flex: 3 1 225px; padding: 20px;">
          <d c="blacktext" o="display: block; text-shadow: none; margin-bottom: -5px;">
            <color o="#FFF">{subheader1}</color>
          </d>
          {bodytext3}
        </d>
        <d o="flex: 1 1 10px; height: 10px; font-size: 0px;">@sugarvine</d>
        <d c="blackbgarea" o="flex: 3 1 225px; padding: 20px;">
          <d c="blacktext" o="display: block; text-shadow: none; margin-bottom: -5px;">
            <color o="#FFF">{subheader2}</color>
          </d>
          {bodytext4}
        </d>
      </d>
    </template>

    <template name="tabthree">
      <d c="blackbgarea" o="display: block; padding: 10% 10% 10% 20%;">
        <d c="blacktext" o="display: block; text-shadow: none; margin-bottom: -5px; line-height: 1em; margin-bottom: 10px;">
          <color o="#FFF">{title4}</color>
        </d>
        {bodytext5}
      </d>
      <d o="margin: auto; margin-top: 20px; margin-bottom: 20px; width: 80%; position: relative;">
        <d c="flex" o="align-items: center; justify-content: center;">
          <d c="blacktext" o="flex: none; letter-spacing: -1px; line-height: .8em; text-transform: lowercase; font-size: 3em; text-align: right; box-sizing: border-box; padding: 10px 10px 10px 0px; width: calc(100% - 175px); min-width: 175px;">
            {quote4}
          </d>
          <d c="whitebgarea" o="flex: none; display: inline-block; font-size: 0px; height: 175px; width: 175px;">
            <d o="background-image: url('https://i.imgur.com/y6DQ69K.jpg'), url('https://i.imgur.com/z7KToCA.jpg'); background-position: left center; background-blend-mode: screen; width: 100%; height: 100%;">
              @sugarvine
            </d>
          </d>
        </d>
      </d>
      <d c="whitebgarea" o="display: block;">
        <d c="blackbgarea" o="text-align: center; color: #FFF; padding: 30px 20px;">
          <d c="blacktext" o="display: block; text-shadow: none; margin-bottom: -5px;">
            <color o="#FFF">{title5}</color>
          </d>
          <d o="font-size: .65em; line-height: .85em; margin-bottom: 5px;">
            {quote5}
          </d>
        </d>
        <d c="bodytext" o="display: block; padding: 20px 10px 10px 10px;">
          {bodytext6}
        </d>
      </d>
    </template>

    <template name="slotform">
      <d o="text-align: center; display: block; margin-bottom: 25px;">
        <d c="whitebgarea" o="font-size: 0px; height: 200px; width: 200px; display: inline-block; vertical-align: top; pointer-events: none;">
          {img}
        </d>
        <d o="font-size: 0px; height: 10px; width: 10px; display: inline-block;">@sugarvine</d>
        <d c="blackbgarea" o="display: inline-block; width: calc(100% - 210px); vertical-align: top; min-width: 200px; min-height: 200px; text-align: left; padding: 20px;">
          <d c="blacktext" o="display: block; text-shadow: none; line-height: 1em; margin-bottom: 5px;">
            <color o="#FFF">{label}</color>
          </d>
          {description}
        </d>
      </d>
    </template>

  </templates>


  <body>
    <d c="body">
      <d c="main-image">
        xxxx
      </d>
      <d c="tab-area">
        <include template="tabs-box">
          <p name="tab1">
            <include template="tabone">
              <p name="title1">TITLE1</p>
              <p name="quote1">quote1</p>
              <p name="name1">NAME1</p>
              <p name="stat1">STAT1</p>
              <p name="stat2">STAT2</p>
              <p name="stat3">STAT3</p>
              <p name="stat4">STAT4</p>
              <p name="stat5">STAT5</p>
              <p name="stat6">STAT6</p>
              <p name="stat7">STAT7</p>
              <p name="title2">TITLE2</p>
              <p name="bodytext1">
                bodytext1
              </p>
            </include>
          </p>
          <p name="tab2">
            <include template="tabtwo">
              <p name="title3">TITLE3</p>
              <p name="quote2">QUOTE2</p>
              <p name="bodytext2">
                bodytext2
              </p>
              <p name="quote3">
                quote3
              </p>
              <p name="subheader1">subheader1</p>
              <p name="bodytext3">
                bodytext3
              </p>
              <p name="subheader2">subheader2</p>
              <p name="bodytext4">
                bodytext4
              </p>
            </include>
          </p>
          <p name="tab3">
            <include template="tabthree">
              <p name="title4">TITLE3</p>
              <p name="bodytext5">
                bodytext5
              </p>
              <p name="quote4">
                quote4
              </p>
              <p name="title5">TITLE5</p>
              <p name="quote5">
                quote5
              </p>
              <p name="bodytext6">
                bodytext6
              </p>
            </include>
          </p>
          <p name="tab4">
            <include template="slotform">
              <p name="img">
                <img>https://i.imgur.com/ieuOU5V.jpg</img>
              </p>
              <p name="label">label</p>
              <p name="description">description</p>
            </include>
            <include template="slotform">
              <p name="img">
                <img>https://i.imgur.com/2Mk4fjB.jpg</img>
              </p>
              <p name="label">label</p>
              <p name="description">description</p>
            </include>
            <include template="slotform">
              <p name="img">
                <img>https://i.imgur.com/Joeiw4T.jpg</img>
              </p>
              <p name="label">label</p>
              <p name="description">description</p>
            </include>
          </p>
        </include>
        <d c="tab-container" o="margin-left: -30px; pointer-events: none; padding-top: calc(20vh - 2px); position: relative; z-index: 2; ">
          <d c="tab-buttons">
            <d c="center" o="left: 50%;">01</d>
          </d>
          <d c="tab-buttons">
            <d c="center" o="left: 50%;">02</d>
          </d>
          <d c="tab-buttons">
            <d c="center" o="left: 50%;">03</d>
          </d>
          <d c="tab-buttons">
            <d c="center" o="left: 50%;">04</d>
          </d>
        </d>
      </d>
    </d>
  </body>


</bbxml>