✱⁞ SHIORI.BBXML

<bbxml>

  <classes>

    <class name="warning">
      display: block;
      padding: 8px 0px;
      width: 100%;
      background-color: #575757;
      font-family: 'Share Tech Mono', Courier;
      color: #FFF;
      font-size: 10px;
      font-smoothing: antialiased;
      -webkit-font-smoothing: antialiased;
      text-align: center;
    </class>

    <class name="container">
      background: url('https://i.imgur.com/4AuCZVe.jpg');
      width: 100%;
      padding: 120px 0px;
      text-align: center;
      display: block;
    </class>

    <class name="left-column">
      width: 180px;
      margin: 0px 10px;
      display: inline-block;
      position: relative;
    </class>

    <class name="image-box">
      display: block;
      width: 180px;
      height: 180px;
      padding: 20px;
      box-sizing: border-box;
      background: #FFF;
      border-bottom: 1px solid #e8e8e8;
      border-right: 1px solid #e8e8e8;
      margin: 20px 0px;
    </class>

    <class name="image">
      background: url('https://placehold.it/140/e8e8e8') center center;
      height: 100%;
      width: 100%;
    </class>

    <class name="nav">
      display: block;
      width: 100%;
      padding: 20px 20px;
      box-sizing: border-box;
      border-bottom: 1px solid #e8e8e8;
      border-right: 1px solid #e8e8e8;
      background: #FFF;
      height: 185px;
      overflow: hidden;
    </class>

    <class name="tabs">
      width: 100%;
      overflow-x: hidden;
      pointer-events: none;
    </class>

    <class name="tab-container">
      width: calc(100% + 60px);
      font-family: 'Share Tech Mono', Courier;
      font-smoothing: antialiased;
      -webkit-font-smoothing: antialiased;
      margin-left: -60px;
      line-height: 0px;
      pointer-events: auto;
    </class>

    <class name="tab-buttons">
      background: red;
      opacity: .3;
      height: 100%;
    </class>

    <class name="contents-bg">
      display: inline-block;
      width: 385px;
      height: 385px;
      padding: 20px;
      box-sizing: border-box;
      margin: 20px 10px;
      vertical-align: top;
      background: #FFF;
      border-bottom: 1px solid #e8e8e8;
      border-right: 1px solid #e8e8e8;
      overflow: hidden;
    </class>

    <class name="tab-contents">
      position: absolute;
      top: 40px;
      left: 220px;
      line-height: normal;
      width: 344px;
      height: 344px;
      box-sizing: border-box;
      text-align: justify;
      overflow: hidden;
    </class>

    <class name="scrollbox">
      width: 100%;
      height: 100%;
      padding-right: 150px;
      overflow-y: scroll;
      pointer-events: auto;
      font-family: 'Hind Siliguri', sans-serif;
      font-size: 14px;
    </class>

    <class name="full-image">
      width: 100%;
      height: 100%;
      pointer-events: none;
      line-height: 0px;
    </class>

    <class name="textblocks">
      color: #6b6b6b;
    </class>

    <class name="cover-up">
      display: block;
      width: 100%;
      padding: 20px 20px;
      box-sizing: border-box;
      border-bottom: 1px solid #e8e8e8;
      border-right: 1px solid #e8e8e8;
      background: #FFF;
      height: 185px;
      margin-top: -185px;
      overflow: hidden;
      position: relative;
      z-index: 4;
      pointer-events: none;
    </class>

    <class name="button">
      display: block;
      margin-bottom: 5px;
      height: 24px;
      box-sizing: border-box;
      padding: 5px 0px 0px;
      width: 100%;
      background-color: #EFEFEF;
      font-family: 'Share Tech Mono', Courier;
      color: #6b6b6b;
      font-size: 10px;
      font-smoothing: antialiased;
      -webkit-font-smoothing: antialiased;
    </class>

    <class name="relationships">
      width: 100%
      height: 86px;
      display: block;
      padding: 5px 0px;
      box-sizing: border-box;
    </class>

    <class name="r-image">
      display: inline-block;
      pointer-events: none;
      height: 76px;
      width: 76px;
      line-height: 0px;
      margin-right: 5px;
      overflow: hidden;
    </class>

    <class name="r-details">
      width: calc(100% - 81px);
      display: inline-block;
      font-size: 10px;
      font-smoothing: antialiased;
      -webkit-font-smoothing: antialiased;
      vertical-align: top;
    </class>

    <class name="r-name">
      display: block;
      background-color: #EFEFEF;
      font-family: 'Share Tech Mono', Courier;
      height: 11px;
      padding: 0px 0px 0px 10px;
      margin-bottom: 5px;
    </class>

    <class name="r-scrollbox">
      width: calc(100% - 5px);
      height: 60px;
      padding: 0px 150px 0px 5px;
      overflow-y: scroll;
      pointer-events: auto;
      font-family: 'Hind Siliguri', sans-serif;
      font-size: 11px;
      line-height: 15px;
    </class>

    <class name="m-title">
      display: block;
      background-color: #EFEFEF;
      font-family: 'Share Tech Mono', Courier;
      padding: 3px 10px;
      margin-bottom: 5px;
      color: #6b6b6b;
      font-size: 10px;
      font-smoothing: antialiased;
      -webkit-font-smoothing: antialiased;
      margin-top: 10px;
    </class>

    <class name="m-info">
      margin-left: 10px;
      width: calc(100% - 10px);
      font-size: 11px;
      line-height: 16px;
    </class>

  </classes>

  <templates>

    <template name="nothing">
      <div option="display: none;">sugarvine</div>
    </template>

    <template name="button-covers">
      <d c="button">{tab1-title}</d>
      <d c="button">{tab2-title}</d>
      <d c="button">{tab3-title}</d>
      <d c="button">{tab4-title}</d>
      <d c="button">{tab5-title}</d>
    </template>

    <template name="info-bars">
      <div option=" background: #D4D4D4;
                    font-family: 'Share Tech Mono', Courier;
                    margin: 10px 0px 2px 0px;
                    padding: 0px 0px 0px 20px;
                    box-sizing: border-box;
                    display: block;
                    color: #6b6b6b;
                    font-size: 10px;
                    font-smoothing: antialiased;
                    -webkit-font-smoothing: antialiased;">
        <div option="background-color: white; display: inline-block; padding: 4px 10px;">{info1}</div></div>
      <div option=" background: #D8D8D8;
                    font-family: 'Share Tech Mono', Courier;
                    margin: 0px 0px 2px 0px;
                    padding: 0px 0px 0px 20px;
                    box-sizing: border-box;
                    display: block;
                    color: #6b6b6b;
                    font-size: 10px;
                    font-smoothing: antialiased;
                    -webkit-font-smoothing: antialiased;">
        <div option="background-color: white; display: inline-block; padding: 4px 10px;">{info2}</div></div>
      <div option=" background: #DDDDDD;
                    font-family: 'Share Tech Mono', Courier;
                    margin: 0px 0px 2px 0px;
                    padding: 0px 0px 0px 20px;
                    box-sizing: border-box;
                    display: block;
                    color: #6b6b6b;
                    font-size: 10px;
                    font-smoothing: antialiased;
                    -webkit-font-smoothing: antialiased;">
        <div option="background-color: white; display: inline-block; padding: 4px 10px;">{info3}</div></div>
      <div option=" background: #E1E1E1;
                    font-family: 'Share Tech Mono', Courier;
                    margin: 0px 0px 2px 0px;
                    padding: 0px 0px 0px 20px;
                    box-sizing: border-box;
                    display: block;
                    color: #6b6b6b;
                    font-size: 10px;
                    font-smoothing: antialiased;
                    -webkit-font-smoothing: antialiased;">
        <div option="background-color: white; display: inline-block; padding: 4px 10px;">{info4}</div></div>
      <div option=" background: #E6E6E6;
                    font-family: 'Share Tech Mono', Courier;
                    margin: 0px 0px 2px 0px;
                    padding: 0px 0px 0px 20px;
                    box-sizing: border-box;
                    display: block;
                    color: #6b6b6b;
                    font-size: 10px;
                    font-smoothing: antialiased;
                    -webkit-font-smoothing: antialiased;">
        <div option="background-color: white; display: inline-block; padding: 4px 10px;">{info5}</div></div>
      <div option=" background: #EAEAEA;
                    font-family: 'Share Tech Mono', Courier;
                    margin: 0px 0px 2px 0px;
                    padding: 0px 0px 0px 20px;
                    box-sizing: border-box;
                    display: block;
                    color: #6b6b6b;
                    font-size: 10px;
                    font-smoothing: antialiased;
                    -webkit-font-smoothing: antialiased;">
        <div option="background-color: white; display: inline-block; padding: 4px 10px;">{info6}</div></div>
      <div option=" background: #EFEFEF;
                    font-family: 'Share Tech Mono', Courier;
                    margin: 0px 0px 0px 0px;
                    padding: 0px 0px 0px 20px;
                    box-sizing: border-box;
                    display: block;
                    color: #6b6b6b;
                    font-size: 10px;
                    font-smoothing: antialiased;
                    -webkit-font-smoothing: antialiased;">
        <div option="background-color: white; display: inline-block; padding: 4px 10px;">{info7}</div></div>
    </template>

    <template name="tab-part">
      <tabs>
        <tab option="BASICXXXXXINFORMATIONXXXX">
          <d c="tab-contents">
            <d c="scrollbox">
              <d c="full-image">{tab1-image}</d>
              <include template="info-bars" />
              <d c="textblocks">{tab1}</d>
            </d>
          </d>
        </tab>
        <tab option="PERSONALITYPARTGDFI!XXXXX">
          <d c="tab-contents">
            <d c="scrollbox">
              <d c="full-image">{tab2-image}</d>
              <d c="textblocks">{tab2}</d>
            </d>
          </d>
        </tab>
        <tab option="SHIORIHISTORYPLSHELPXXXXX">
          <d c="tab-contents">
            <d c="scrollbox">
              <d c="full-image">{tab3-image}</d>
              <d c="textblocks">{tab3}</d>
            </d>
          </d>
        </tab>
        <tab option="RELATIONSHIPSAREFORLXXXXX">
          <d c="tab-contents">
            <d c="scrollbox">
              <d c="full-image">{tab4-image}</d>
              <d c="textblocks">{tab4}</d>
            </d>
          </d>
        </tab>
        <tab option="MISCINFORMATIONFORSOXXXXX">
          <d c="tab-contents">
            <d c="scrollbox">
              <d c="full-image">{tab5-image}</d>
              <d c="textblocks">{tab5}</d>
            </d>
          </d>
        </tab>
      </tabs>
    </template>

  </templates>

  <body>
    <font option="Hind Siliguri"><include template="nothing" /></font>
    <font option="Share Tech Mono"><include template="nothing" /></font>
    <d c="warning">THIS FORMAT IS NOT MOBILE COMPATIBLE</d>
    <d c="container">
      <d c="left-column">
        <d c="image-box">
          <d c="image"><include template="nothing" />
          </d>
        </d>
        <d c="nav">
          <d c="tabs">
            <d c="tab-container">
              <include template="tab-part">
                <p name="tab1-image">[img]https://placehold.it/344/e8e8e8[/img]</p>
                <p name="tab2-image">[img]https://placehold.it/344/e8e8e8[/img]</p>
                <p name="tab3-image">[img]https://placehold.it/344/e8e8e8[/img]</p>
                <p name="tab4-image">[img]https://placehold.it/344/e8e8e8[/img]</p>
                <p name="tab5-image">[img]https://placehold.it/344/e8e8e8[/img]</p>
                <p name="info1">INFO1[color=transparent]x[/color] ??</p>
                <p name="info2">INFO2[color=transparent]x[/color] ????</p>
                <p name="info3">INFO3[color=transparent]x[/color] pls</p>
                <p name="info4">INFO4[color=transparent]x[/color] just</p>
                <p name="info5">INFO5[color=transparent]x[/color] let</p>
                <p name="info6">INFO6[color=transparent]x[/color] me</p>
                <p name="info7">INFO7[color=transparent]x[/color] live</p>
                <p name="tab1"><br />
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra tortor nec erat pharetra laoreet. Integer in eros id erat ultricies iaculis quis sed erat. Vestibulum quis viverra orci. Nam fringilla laoreet purus, eget ullamcorper nisl sagittis nec. Praesent vitae massa felis. Etiam ut enim ex. Quisque a lacus nulla. Pellentesque porttitor varius libero nec gravida. Proin eu eleifend urna. Nam ornare elit vitae dolor imperdiet malesuada. Maecenas ut neque sit amet erat pulvinar rutrum. Donec tristique urna ut dui hendrerit, sit amet pellentesque risus ultrices. Donec pretium pellentesque nunc, ac gravida urna placerat ut. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam sollicitudin pulvinar metus, quis tempor nisi congue in.
                </p>
                <p name="tab2"><br />
                  Nunc volutpat rhoncus velit, at iaculis tortor. Praesent laoreet tortor eros, at ultricies dolor blandit in. Pellentesque tempor ligula dui, et venenatis magna facilisis et. Nam neque neque, fermentum eget ligula nec, malesuada ultricies risus. Phasellus vitae nibh sed ex auctor vestibulum. Proin bibendum massa orci, cursus scelerisque enim dictum nec. Morbi velit lectus, viverra sit amet dolor quis, hendrerit ultricies leo. Ut felis arcu, auctor quis enim sit amet, posuere convallis metus. Curabitur a semper risus. Sed sed magna non nisl faucibus porta. Cras dictum eros vel interdum dignissim. Mauris pretium felis eget varius lacinia. Donec dui elit, tempus vitae lacinia id, fringilla ac arcu.
                </p>
                <p name="tab3"><br />
                  Sed tincidunt, lacus feugiat laoreet feugiat, dolor nisl varius arcu, vel dignissim sem ipsum ac sem. Maecenas ultrices volutpat pellentesque. Curabitur sodales lacus arcu, sed convallis libero ornare malesuada. Mauris ultricies purus sit amet elit porttitor, id venenatis erat interdum. Vestibulum porttitor ac libero quis varius. Phasellus malesuada metus at est laoreet, egestas feugiat purus scelerisque. Integer elementum, elit sed efficitur ullamcorper, purus augue placerat nulla, vel maximus orci nisi in sapien. Integer lobortis lorem et tellus porta, ac sodales orci mattis. Donec laoreet orci eu cursus sagittis. Maecenas ac tempor arcu. Mauris egestas ullamcorper leo non auctor. Curabitur tristique vel nisi a placerat.
                </p>
                <p name="tab4"><br/>
                  <d c="relationships">
                    <d c="r-image">[img]https://placehold.it/76/e8e8e8[/img]</d>
                    <d c="r-details">
                      <d c="r-name">NAME HERE</d>
                      <d c="r-scrollbox">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor eleifend ligula a sagittis. Cras hendrerit neque ultrices ante gravida, ut aliquet diam facilisis. Maecenas malesuada mattis leo, id maximus lacus ultrices in. Nulla facilisi. Nullam ornare facilisis porta. Quisque vehicula mattis urna, eget dapibus ipsum volutpat non.
                      </d>
                    </d>
                  </d>
                  <d c="relationships">
                    <d c="r-image">[img]https://placehold.it/76/e8e8e8[/img]</d>
                    <d c="r-details">
                      <d c="r-name">NAME HERE</d>
                      <d c="r-scrollbox">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor eleifend ligula a sagittis. Cras hendrerit neque ultrices ante gravida, ut aliquet diam facilisis. Maecenas malesuada mattis leo, id maximus lacus ultrices in. Nulla facilisi. Nullam ornare facilisis porta. Quisque vehicula mattis urna, eget dapibus ipsum volutpat non.
                      </d>
                    </d>
                  </d>
                </p>
                <p name="tab5"><br />
                  <d c="m-title">01 IDK</d>
                  <d c="m-info">
                    ▸ feel free to delete this format if you like<br />
                    ▸ it was originally designed to be a misc facts section
                  </d>
                  <d c="m-title">02 IDK</d>
                  <d c="m-info">
                    ▸ feel free to delete this format if you like<br />
                    ▸ it was originally designed to be a misc facts section
                  </d>
                </p>
              </include>
             </d>
          </d>
        </d>
        <d c="cover-up">
          <include template="button-covers">
            <p name="tab1-title">TAB1</p>
            <p name="tab2-title">TAB2</p>
            <p name="tab3-title">TAB3</p>
            <p name="tab4-title">TAB4</p>
            <p name="tab5-title">TAB5</p>
          </include>
        </d>
      </d>
      <d c="contents-bg"><include template="nothing" />
      </d>
    </d>

  </body>
</bbxml>