SHARE
TWEET

✱⁞ I-NO.BBXML

sugarvine Jan 10th, 2018 (edited) 79 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <bbxml>
  2.  
  3.  
  4.   <classes>
  5.    
  6.     <class name="body">
  7.     width: 100%;
  8.     display: flex;
  9.     flex-flow: row wrap;
  10.     justify-content: center;
  11.     font-smoothing: antialiased;
  12.     -webkit-font-smoothing: antialiased;
  13.     -moz-osx-font-smoothing: grayscale;
  14.     font-size: 0px;
  15.     background: url('https://i.imgur.com/NKB814E.jpg');
  16.     position: relative;
  17.     z-index: 1;
  18.     </class>
  19.    
  20.     <class name="main-image">
  21.     flex: 1 1 200px;
  22.     box-sizing: border-box;
  23.     min-height: 350px;
  24.     background-image: url('https://i.imgur.com/m1jcx9c.jpg') /*MAIN IMAGE MINIMUM OF 400x850px*/, url('https://i.imgur.com/z7KToCA.jpg');
  25.     background-position: center center;
  26.     background-size: cover, auto;
  27.     background-blend-mode: screen;
  28.     </class>
  29.    
  30.     <class name="tab-area">
  31.     flex: 4 1 300px;
  32.     box-sizing: border-box;
  33.     height: 85vh;
  34.     max-height: 850px;
  35.     position: relative;
  36.     z-index: 2;
  37.     </class>
  38.    
  39.     <class name="tab-container">
  40.     display: inline-block;
  41.     width: 30px;
  42.     height: 100%;
  43.     font-family: 'Courier New', monospace;
  44.     background: #000 url('https://i.imgur.com/z7KToCA.jpg');
  45.     box-sizing: border-box;
  46.     overflow: hidden;
  47.     </class>
  48.    
  49.     <class name="tab-adjust">
  50.     width: calc(100% + 120px);
  51.     margin: 20vh 0px 0px -60px;
  52.     </class>
  53.    
  54.     <class name="tab-content">
  55.     display: block;
  56.     position: absolute;
  57.     z-index: 3;
  58.     top: 0px;
  59.     left: 0px;
  60.     height: 100%;
  61.     width: calc(100% - 30px);
  62.     margin-left: 30px;
  63.     box-sizing: border-box;
  64.     overflow: hidden;
  65.     </class>
  66.    
  67.     <class name="scrollarea">
  68.     display: inline-block;
  69.     height: 100%;
  70.     width: calc(100% - 6px);
  71.     vertical-align: top;
  72.     box-sizing: border-box;
  73.     padding: 10%;
  74.     </class>
  75.    
  76.     <class name="scrollbox">
  77.     display: inline-block;
  78.     height: 100%;
  79.     width: 100%;
  80.     padding-right: 150px;
  81.     font-size: initial;
  82.     overflow-y: scroll;
  83.     overflow-x: hidden;
  84.     </class>
  85.    
  86.     <class name="tab-buttons">
  87.     display: block;
  88.     height: 29px;
  89.     width: 100%;
  90.     font-size: 11px;
  91.     color: #FFF;
  92.     position: relative;
  93.     font-weight: bold;
  94.     z-index: 5;
  95.     </class>
  96.    
  97.     <class name="center">
  98.     position: absolute;
  99.     top: 50%;
  100.     transform: translate(-50%, -50%);
  101.     </class>
  102.    
  103.     <class name="pointer-column">
  104.     display: inline-block;
  105.     vertical-align: top;
  106.     height: 100%;
  107.     width: 6px;
  108.     overflow: hidden;
  109.     pointer-events: none;
  110.     box-sizing: border-box;
  111.     </class>
  112.    
  113.     <class name="bbox-image">
  114.     display: inline-block;
  115.     font-size: 0px;
  116.     height: 225px;
  117.     width: 225px;
  118.     box-sizing: border-box;
  119.     padding: 20px;
  120.     pointer-events: none;
  121.     background: url('https://i.imgur.com/z7KToCA.jpg');
  122.     margin-bottom: 20px;
  123.     </class>
  124.    
  125.     <class name="bbox-img-slot">
  126.     display: block;
  127.     height: 100%;
  128.     width: 100%;
  129.     position: relative;
  130.     background-image: url('https://i.imgur.com/JzixwgZ.jpg') /*MINIMUM 195x195px*/, url('https://i.imgur.com/z7KToCA.jpg');
  131.     background-size: cover, auto;
  132.     background-blend-mode: screen;
  133.     font-size: initial;
  134.     </class>
  135.    
  136.     <class name="blacktext">
  137.     display: block;
  138.     font-size: 2.5em;
  139.     color: #000;
  140.     font-family: 'Raleway', sanserif;
  141.     font-weight: bold;
  142.     text-shadow: 2px -2px 0px #FFF;
  143.     box-sizing: border-box;
  144.     </class>
  145.    
  146.     <class name="column1">
  147.     flex: 1 1 225px;
  148.     width: 225px;
  149.     font-size: initial;
  150.     </class>
  151.    
  152.     <class name="smolquote">
  153.     display: block;
  154.     width: 100%;
  155.     box-sizing: border-box;
  156.     padding: 0px 20px;
  157.     color: #000;
  158.     font-family: 'Courier New', monospace;
  159.     font-size: .6em;
  160.     line-height: .85em;
  161.     </class>
  162.    
  163.     <class name="column2">
  164.     flex: 3 1 225px;
  165.     margin-top: 30px;
  166.     width: calc(100% - 245px);
  167.     </class>
  168.    
  169.     <class name="flex">
  170.     display: flex;
  171.     flex-flow: row wrap;
  172.     justify-content: space-between;
  173.     </class>
  174.    
  175.     <class name="blackbgarea">
  176.     box-sizing: border-box;
  177.     padding: 15px;
  178.     background: #000 url('https://i.imgur.com/z7KToCA.jpg');
  179.     color: #FFF;
  180.     font-family: 'Courier New', monospace;
  181.     font-size: .75em;
  182.     </class>
  183.    
  184.     <class name="statbar">
  185.     display: block;
  186.     height: 10px;
  187.     background: #FFF;
  188.     margin-left: -10px;
  189.     font-size: 0px;
  190.     margin-top: -5px;
  191.     margin-bottom: 5px;
  192.     </class>
  193.    
  194.     <class name="whitebgarea">
  195.     background: #FFF;
  196.     box-sizing: border-box;
  197.     padding: 15px;
  198.     border: 1px solid #d4d4d4;
  199.     </class>
  200.    
  201.     <class name="bodytext">
  202.     font-size: .75em;
  203.     line-height: 1.5em;
  204.     font-family: 'Raleway', sanserif;
  205.     text-align: justify; color: #393939;
  206.     </class>
  207.    
  208.   </classes>
  209.  
  210.  
  211.   <templates>
  212.    
  213.     <template name="tabs-box">
  214.       <d c="tab-container">
  215.         <d c="tab-adjust">
  216.           <tabs>
  217.             <tab o="XXXBASICINFORMATIONHEREINTAB01">
  218.               <d c="tab-content">
  219.                 <d c="pointer-column" o="padding-top: calc(20vh + 6px);">
  220.                   <img>https://i.imgur.com/w1oGu38.gif</img>
  221.                 </d>
  222.                 <d c="scrollarea">
  223.                   <d c="scrollbox">
  224.                     {tab1}
  225.                   </d>
  226.                 </d>
  227.               </d>
  228.             </tab>
  229.             <tab o="PERSONALINFORMATIONHEREINTAB02">
  230.               <d c="tab-content">
  231.                 <d c="pointer-column" o="padding-top: calc(20vh + 35px);">
  232.                   <img>https://i.imgur.com/w1oGu38.gif</img>
  233.                 </d>
  234.                 <d c="scrollarea">
  235.                   <d c="scrollbox">
  236.                     {tab2}
  237.                   </d>
  238.                 </d>
  239.               </d>
  240.             </tab>
  241.             <tab o="XHISTORYINFORMATIONHEREINTAB03">
  242.               <d c="tab-content">
  243.                 <d c="pointer-column" o="padding-top: calc(20vh + 64px);">
  244.                   <img>https://i.imgur.com/w1oGu38.gif</img>
  245.                 </d>
  246.                 <d c="scrollarea">
  247.                   <d c="scrollbox">
  248.                     {tab3}
  249.                   </d>
  250.                 </d>
  251.               </d>
  252.             </tab>
  253.             <tab o="XXRANDOMINFORMATIONHEREINTAB04">
  254.               <d c="tab-content">
  255.                 <d c="pointer-column" o="padding-top: calc(20vh + 93px);">
  256.                   <img>https://i.imgur.com/w1oGu38.gif</img>
  257.                 </d>
  258.                 <d c="scrollarea">
  259.                   <d c="scrollbox">
  260.                     {tab4}
  261.                   </d>
  262.                 </d>
  263.               </d>
  264.             </tab>
  265.           </tabs>
  266.         </d>
  267.       </d>
  268.     </template>
  269.    
  270.     <template name="tabone">
  271.       <d c="flex" o="align-items: flex-start;">
  272.         <d c="column1">
  273.           <d c="bbox-image">
  274.             <d c="bbox-img-slot">
  275.               <d o="position: absolute; bottom: -15px; right: 0px;">
  276.                 <d c="blacktext">
  277.                   {title1}
  278.                 </d>
  279.               </d>
  280.             </d>
  281.           </d>
  282.           <d c="smolquote">
  283.             {quote1}
  284.           </d>
  285.         </d>
  286.         <d o="font-size: 0px; flex: .25 0 15px; height: 2px; width: 15px;">@sugarvine</d>
  287.         <d c="column2">
  288.           <d c="blacktext" o="text-align: right; padding-right: 20px;">
  289.             {name1}
  290.           </d>
  291.           <d c="blackbgarea" o="display: block; margin-top: -15px;">
  292.             <d o="display: block; margin-left: 10px;">
  293.               {stat1}
  294.               <d c="statbar" o="width: 30%;">/*strength*/</d>
  295.             </d>
  296.             <d o="display: block; margin-left: 10px;">
  297.               {stat2}
  298.               <d c="statbar" o="width: 30%;">/*defense*/</d>
  299.             </d>
  300.             <d o="display: block; margin-left: 10px;">
  301.               {stat3}
  302.               <d c="statbar" o="width: 30%;">/*magic*/</d>
  303.             </d>
  304.             <d o="display: block; margin-left: 10px;">
  305.               {stat4}
  306.               <d c="statbar" o="width: 30%;">/*resistance*/</d>
  307.             </d>
  308.             <d o="display: block; margin-left: 10px;">
  309.               {stat5}
  310.               <d c="statbar" o="width: 30%;">/*agility*/</d>
  311.             </d>
  312.             <d o="display: block; margin-left: 10px;">
  313.               {stat6}
  314.               <d c="statbar" o="width: 30%;">/*dexterity*/</d>
  315.             </d>
  316.             <d o="display: block; margin-left: 10px;">
  317.               {stat7}
  318.               <d c="statbar" o="margin-bottom: 0px; width: 30%;">/*luck*/</d>
  319.             </d>
  320.           </d>
  321.         </d>
  322.       </d>
  323.       <d c="whitebgarea" o="display: block; width: 100%; overflow: hidden; margin-top: 25px;">
  324.         <d c="flex" o="align-items: stretch;">
  325.           <d o="flex: 3 1 225px; overflow: hidden; box-sizing: border-box; padding: 10px;">
  326.             <d c="bodytext">{bodytext1}</d>
  327.           </d>
  328.           <d o="font-size: 0px; flex: .25 0 20px; height: 10px; width: 20px;">
  329.             @sugarvine
  330.           </d>
  331.           <d c="blackbgarea" o="flex: 1 1 175px; position: relative; overflow: hidden; min-height: 200px;">
  332.             <d c="center" o="pointer-events: none; text-align: center; left: 50%;">
  333.               <img>https://i.imgur.com/QFeRXw8.png</img>
  334.               <d c="blacktext" o="display: block; text-shadow: none;">
  335.                 <color o="#FFF">{title2}</color>
  336.               </d>
  337.             </d>
  338.           </d>
  339.         </d>
  340.       </d>
  341.     </template>
  342.    
  343.     <template name="tabtwo">
  344.       <d c="whitebgarea" o="display: block;">
  345.         <d c="blackbgarea" o="text-align: center; color: #FFF; padding: 30px 20px;">
  346.           <d c="blacktext" o="display: block; text-shadow: none; margin-bottom: -5px;">
  347.             <color o="#FFF">{title3}</color>
  348.           </d>
  349.           <d o="font-size: .65em; line-height: .85em; margin-bottom: 5px;">
  350.             {quote2}
  351.           </d>
  352.         </d>
  353.         <d c="bodytext" o="display: block; padding: 20px 10px 10px 10px;">
  354.           {bodytext2}
  355.         </d>
  356.       </d>
  357.       <d o="position: relative; width: 80%; margin: auto; margin-top: 25px;">
  358.         <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%;">
  359.           {quote3}
  360.         </d>
  361.         <d c="center" o="z-index: 1; transform: translate(0%, -50%); right: 0px;">
  362.           <d c="whitebgarea" o="font-size: 0px; height: 175px; width: 175px;">
  363.             <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%;">
  364.               @sugarvine
  365.             </d>
  366.           </d>
  367.         </d>
  368.       </d>
  369.       <d c="flex" o="align-items: stretch; margin-top: 35px;">
  370.         <d c="blackbgarea" o="flex: 3 1 225px; padding: 20px;">
  371.           <d c="blacktext" o="display: block; text-shadow: none; margin-bottom: -5px;">
  372.             <color o="#FFF">{subheader1}</color>
  373.           </d>
  374.           {bodytext3}
  375.         </d>
  376.         <d o="flex: 1 1 10px; height: 10px; font-size: 0px;">@sugarvine</d>
  377.         <d c="blackbgarea" o="flex: 3 1 225px; padding: 20px;">
  378.           <d c="blacktext" o="display: block; text-shadow: none; margin-bottom: -5px;">
  379.             <color o="#FFF">{subheader2}</color>
  380.           </d>
  381.           {bodytext4}
  382.         </d>
  383.       </d>
  384.     </template>
  385.    
  386.     <template name="tabthree">
  387.       <d c="blackbgarea" o="display: block; padding: 10% 10% 10% 20%;">
  388.         <d c="blacktext" o="display: block; text-shadow: none; margin-bottom: -5px; line-height: 1em; margin-bottom: 10px;">
  389.           <color o="#FFF">{title4}</color>
  390.         </d>
  391.         {bodytext5}
  392.       </d>
  393.       <d o="margin: auto; margin-top: 20px; margin-bottom: 20px; width: 80%; position: relative;">
  394.         <d c="flex" o="align-items: center; justify-content: center;">
  395.           <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;">
  396.             {quote4}
  397.           </d>
  398.           <d c="whitebgarea" o="flex: none; display: inline-block; font-size: 0px; height: 175px; width: 175px;">
  399.             <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%;">
  400.               @sugarvine
  401.             </d>
  402.           </d>
  403.         </d>
  404.       </d>
  405.       <d c="whitebgarea" o="display: block;">
  406.         <d c="blackbgarea" o="text-align: center; color: #FFF; padding: 30px 20px;">
  407.           <d c="blacktext" o="display: block; text-shadow: none; margin-bottom: -5px;">
  408.             <color o="#FFF">{title5}</color>
  409.           </d>
  410.           <d o="font-size: .65em; line-height: .85em; margin-bottom: 5px;">
  411.             {quote5}
  412.           </d>
  413.         </d>
  414.         <d c="bodytext" o="display: block; padding: 20px 10px 10px 10px;">
  415.           {bodytext6}
  416.         </d>
  417.       </d>
  418.     </template>
  419.    
  420.     <template name="slotform">
  421.       <d o="text-align: center; display: block; margin-bottom: 25px;">
  422.         <d c="whitebgarea" o="font-size: 0px; height: 200px; width: 200px; display: inline-block; vertical-align: top; pointer-events: none;">
  423.           {img}
  424.         </d>
  425.         <d o="font-size: 0px; height: 10px; width: 10px; display: inline-block;">@sugarvine</d>
  426.         <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;">
  427.           <d c="blacktext" o="display: block; text-shadow: none; line-height: 1em; margin-bottom: 5px;">
  428.             <color o="#FFF">{label}</color>
  429.           </d>
  430.           {description}
  431.         </d>
  432.       </d>
  433.     </template>
  434.    
  435.   </templates>
  436.  
  437.  
  438.   <body>
  439.     <d c="body">
  440.       <d c="main-image">
  441.         xxxx
  442.       </d>
  443.       <d c="tab-area">
  444.         <include template="tabs-box">
  445.           <p name="tab1">
  446.             <include template="tabone">
  447.               <p name="title1">TITLE1</p>
  448.               <p name="quote1">quote1</p>
  449.               <p name="name1">NAME1</p>
  450.               <p name="stat1">STAT1</p>
  451.               <p name="stat2">STAT2</p>
  452.               <p name="stat3">STAT3</p>
  453.               <p name="stat4">STAT4</p>
  454.               <p name="stat5">STAT5</p>
  455.               <p name="stat6">STAT6</p>
  456.               <p name="stat7">STAT7</p>
  457.               <p name="title2">TITLE2</p>
  458.               <p name="bodytext1">
  459.                 bodytext1
  460.               </p>
  461.             </include>
  462.           </p>
  463.           <p name="tab2">
  464.             <include template="tabtwo">
  465.               <p name="title3">TITLE3</p>
  466.               <p name="quote2">QUOTE2</p>
  467.               <p name="bodytext2">
  468.                 bodytext2
  469.               </p>
  470.               <p name="quote3">
  471.                 quote3
  472.               </p>
  473.               <p name="subheader1">subheader1</p>
  474.               <p name="bodytext3">
  475.                 bodytext3
  476.               </p>
  477.               <p name="subheader2">subheader2</p>
  478.               <p name="bodytext4">
  479.                 bodytext4
  480.               </p>
  481.             </include>
  482.           </p>
  483.           <p name="tab3">
  484.             <include template="tabthree">
  485.               <p name="title4">TITLE3</p>
  486.               <p name="bodytext5">
  487.                 bodytext5
  488.               </p>
  489.               <p name="quote4">
  490.                 quote4
  491.               </p>
  492.               <p name="title5">TITLE5</p>
  493.               <p name="quote5">
  494.                 quote5
  495.               </p>
  496.               <p name="bodytext6">
  497.                 bodytext6
  498.               </p>
  499.             </include>
  500.           </p>
  501.           <p name="tab4">
  502.             <include template="slotform">
  503.               <p name="img">
  504.                 <img>https://i.imgur.com/ieuOU5V.jpg</img>
  505.               </p>
  506.               <p name="label">label</p>
  507.               <p name="description">description</p>
  508.             </include>
  509.             <include template="slotform">
  510.               <p name="img">
  511.                 <img>https://i.imgur.com/2Mk4fjB.jpg</img>
  512.               </p>
  513.               <p name="label">label</p>
  514.               <p name="description">description</p>
  515.             </include>
  516.             <include template="slotform">
  517.               <p name="img">
  518.                 <img>https://i.imgur.com/Joeiw4T.jpg</img>
  519.               </p>
  520.               <p name="label">label</p>
  521.               <p name="description">description</p>
  522.             </include>
  523.           </p>
  524.         </include>
  525.         <d c="tab-container" o="margin-left: -30px; pointer-events: none; padding-top: calc(20vh - 2px); position: relative; z-index: 2; ">
  526.           <d c="tab-buttons">
  527.             <d c="center" o="left: 50%;">01</d>
  528.           </d>
  529.           <d c="tab-buttons">
  530.             <d c="center" o="left: 50%;">02</d>
  531.           </d>
  532.           <d c="tab-buttons">
  533.             <d c="center" o="left: 50%;">03</d>
  534.           </d>
  535.           <d c="tab-buttons">
  536.             <d c="center" o="left: 50%;">04</d>
  537.           </d>
  538.         </d>
  539.       </d>
  540.     </d>
  541.   </body>
  542.  
  543.  
  544. </bbxml>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top