sugarvine

✱⁞ I-NO.BBXML

Jan 10th, 2018
106
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