API tools faq
paste
Advertisement
ChainOfRain

KnB Wikia Inspired Layout

ChainOfRain
Sep 11th, 2018
439
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.69 KB | None | 0 0
raw download clone embed print report
  1. <div class="background" style="border:none;width:1100px;margin-top:0px;margin-bottom:15px;float:left;height:auto;background:#FFFFFF url('https://orig00.deviantart.net/3c5e/f/2018/254/0/5/knb_bg_by_chainofrain-dcmkvnc.png');background-attachment:fixed;">
  2. <div class="transbox" style=" background-color:rgba(255,255,255,0.7);border:1px solid #AAAAAA;padding:10px 15px;text-align:left;background-repeat:repeat;margin:20px 20px 20px 20px;">
  3. <p><h3 style="color:#3A3A3A;font-size:26pt; margin-left:10px; margin-top:10px">Surname Name</h3><div class="card bg-faded mb-1 border-top-0" style="height:1px;"> </div>
  4. <br>
  5.  
  6. <!------------------------------------------------ SIDEBAR ------------------------------------------------>
  7. <div style="font-size:13px"><div class="pull-right col-xl-4 col-lg-5 col-md-6 ml-md-3 mb-3 p-0">
  8. <div class="card" style="border: 2px solid #AAAAAA; background-color:#F9F9F9;">
  9. <div class="badge" style="background-color:#FF9934; font-size: 12px; color: #3A3A3A; margin:5px; border:1px solid:#E9CB83; height:50px">
  10. <!------------------------------------------------ NAME ------------------------------------------------>
  11. <h3 class="text-center font-weight-bold mb-0" style="color: #fff; margin:15px">Surname Name</h3>
  12. </div>
  13. <img src="https://78.media.tumblr.com/19bb8767653625c09216b6d0b907c97a/tumblr_oucer1CK3u1t7r0yto5_500.gif" style="margin:5px">
  14. <!------------------------------------------------ INFO ------------------------------------------------>
  15. <table class="w-auto" style="border:1px solid:#E9CB83">
  16. <tr>
  17. <td style="width:120px;"><b> Name </b></td>
  18. <td> -- </td>
  19. </tr>
  20. </table>
  21. <table class="w-auto" style="border:1px solid:#FF993">
  22. <tr>
  23. <td style="width:120px;"><b> Kanji </b></td>
  24. <td> -- </td>
  25. </tr>
  26. </table>
  27. <!------------------------------------------------ VITAL STATISTICS ------------------------------------------------>
  28. <div class="badge text-center font-weight-bold p-2" style="background: #FF9934; color: #fff; margin:5px; font-size:13px">
  29. Vital Statistics
  30. </div><table class="w-auto" style="border:1px solid:#FF993">
  31. <tr>
  32. <td style="width:120px;"><b> Gender </b></td>
  33. <td> -- </td>
  34. </tr>
  35. </table>
  36. <table class="w-auto" style="border:1px solid:#FF993">
  37. <tr>
  38. <td style="width:120px;"><b> Age </b></td>
  39. <td> -- </td>
  40. </tr>
  41. </table>
  42. <table class="w-auto" style="border:1px solid:#E9CB83">
  43. <tr>
  44. <td style="width:120px;"><b> Height </b></td>
  45. <td> -- </td>
  46. </tr>
  47. </table>
  48. <table class="w-auto" style="border:1px solid:#FF993">
  49. <tr>
  50. <td style="width:120px;"><b> Weight </b></td>
  51. <td> -- </td>
  52. </tr>
  53. </table>
  54. <table class="w-auto" style="border:1px solid:#E9CB83">
  55. <tr>
  56. <td style="width:120px;"><b> Birthday </b></td>
  57. <td> Date, Sign </td>
  58. </tr>
  59. </table>
  60. <table class="w-auto" style="border:1px solid:#E9CB83">
  61. <tr>
  62. <td style="width:120px;"><b> Blood type </b></td>
  63. <td> -- </td>
  64. </tr>
  65. </table>
  66. <!------------------------------------------------ PROFESSIONAL STATISTICS ------------------------------------------------>
  67. <div class="badge text-center font-weight-bold p-2" style="background: #FF9934; color: #fff; margin:5px; font-size:13px">
  68. Professional Statistics
  69. </div><table class="w-auto" style="border:1px solid:#E9CB83">
  70. <tr>
  71. <td style="width:120px;"><b> Team </b></td>
  72. <td> -- </td>
  73. </tr>
  74. </table>
  75. <table class="w-auto" style="border:1px solid:#FF993">
  76. <tr>
  77. <td style="width:120px;"><b> Position</b></td>
  78. <td> -- </td>
  79. </tr>
  80. </table>
  81. <table class="w-auto" style="border:1px solid:#E9CB83">
  82. <tr>
  83. <td style="width:120px;"><b> Talent </b></td>
  84. <td> -- </td>
  85. </tr>
  86. </table>
  87. <!------------------------------------------------ SEIYU ----------------------------------------------->
  88. <div class="badge text-center font-weight-bold p-2" style="background: #FF9934; color: #fff; margin:5px; font-size:13px">
  89. Seiyū
  90. </div><table class="w-auto" style="border:1px solid:#E9CB83">
  91. <tr>
  92. <td style="width:120px;"><b> Anime </b></td>
  93. <td> -- </td>
  94. </tr>
  95. </table>
  96. </div>
  97. </div>
  98. </div>
  99. <!------------------------------------------------ SIDEBAR END ------------------------------------------------>
  100.  
  101.  
  102. <div style="font-size:13px; margin-left: 10px; color:#3A3A3A">Brief description here.</div>
  103. <br>
  104. <!------------------------------------------------ CONTENTS START ------------------------------------------------>
  105. <div class="row"><a id="toc"></a>
  106. <div class="col-md-5 mb-2">
  107. <div class="card bg-faded card-outline-default" style="background-color:rgba(255,255,255,0); width:250px; margin-left: 10px; font-size:13px">
  108. <h6 class="p-2 mb-0 text-center" style="font-size:14px; font-family:arial; color:color:#3A3A3A">Contents <small>[<a data-toggle="collapse" href="#tocshow" style="color:#526CB7">show</a>]</small></h6>
  109. <div class="collapse p-2 pt-0 rounded-bottom" id="tocshow" style="color:#3A3A3A">
  110. 1 <a href="#app">Appearance</a><br />
  111. 2 <a href="#pers">Personality</a><br />
  112. 3 <a href="#history">History</a><br />
  113. 4 <a href="#story">Story</a><br />
  114. <span class="pl-3" >4.1 <a href="#IP">Interhigh preliminaries</a></span><br />
  115. <span class="pl-3" >4.2 <a href="#PWC">Pre-Winter Cup</a></span><br />
  116. <span class="pl-3" >4.3 <a href="#WC">Winter Cup</a></span><br />
  117. <span class="pl-3" >4.4 <a href="#SF">Semi-finals</a></span><br />
  118. 5 <a href="#skill">Skill</a><br>
  119. 6 <a href="#trivia">Trivia</a><br>
  120. </div></div></div></div>
  121. <!------------------------------------------------ CONTENTS END ------------------------------------------------>
  122.  
  123. <br><div style="font-size:13px; margin:10px; color:#3A3A3A">
  124.  
  125. <!---------------------------------------------- APPEARANCE ------------------------------------------->
  126. <div class="profile-fields-title" style="margin-bottom:-5px;color:#3A3A3A"><a id="app" /><h2>Appearance</h2></div>
  127. <div class="card bg-faded mb-1 border-top-0" style="height:1px;"> </div><div style="color:#3A3A3A">
  128. <p>[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porta purus sed tristique efficitur. Fusce commodo leo vitae rhoncus faucibus. Nulla facilisi. Aenean semper velit at diam porttitor, vitae iaculis nunc fringilla. Nam tristique consectetur elit, tempor porttitor nunc venenatis sed. Quisque cursus tortor ac eros aliquam consectetur. Vivamus non sollicitudin lorem. Duis dignissim, urna ac malesuada consequat, dolor ante placerat tortor, nec luctus velit nisl sed dui. Proin sit amet risus in nunc ullamcorper luctus. Quisque nisl leo, blandit sit amet varius eu, elementum eu tortor. Vestibulum sodales lacinia nisl, et viverra ipsum tincidunt tincidunt. Cras lectus libero, porta sed porttitor vitae, iaculis ut odio.]</p></div>
  129.  
  130. <!--------------------------------- PERSONALITY -------------------------------------------------------->
  131. <br><div class="profile-fields-title" style="margin-bottom:-5px;color:#3A3A3A"><a id="pers" /><h2>Personality</h2></div>
  132. <div class="card bg-faded mb-1 border-top-0" style="height:1px; color:#3A3A3A"> </div><div style="color:#3A3A3A">
  133. <p>[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porta purus sed tristique efficitur. Fusce commodo leo vitae rhoncus faucibus. Nulla facilisi. Aenean semper velit at diam porttitor, vitae iaculis nunc fringilla. Nam tristique consectetur elit, tempor porttitor nunc venenatis sed. Quisque cursus tortor ac eros aliquam consectetur. Vivamus non sollicitudin lorem. Duis dignissim, urna ac malesuada consequat, dolor ante placerat tortor, nec luctus velit nisl sed dui. Proin sit amet risus in nunc ullamcorper luctus. Quisque nisl leo, blandit sit amet varius eu, elementum eu tortor. Vestibulum sodales lacinia nisl, et viverra ipsum tincidunt tincidunt. Cras lectus libero, porta sed porttitor vitae, iaculis ut odio.]</p><br><br></div>
  134.  
  135. <!--------------------------------------- HISTORY ------------------------------------------------>
  136. <div class="profile-fields-title" style="margin-bottom:-5px;color:#3A3A3A"><a id="history" /><h2>History</h2></div>
  137. <div class="card bg-faded mb-1 border-top-0" style="height:1px;"> </div><div style="color:#3A3A3A">
  138. <p>[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porta purus sed tristique efficitur. Fusce commodo leo vitae rhoncus faucibus. Nulla facilisi. Aenean semper velit at diam porttitor, vitae iaculis nunc fringilla. Nam tristique consectetur elit, tempor porttitor nunc venenatis sed. Quisque cursus tortor ac eros aliquam consectetur. Vivamus non sollicitudin lorem. Duis dignissim, urna ac malesuada consequat, dolor ante placerat tortor, nec luctus velit nisl sed dui. Proin sit amet risus in nunc ullamcorper luctus. Quisque nisl leo, blandit sit amet varius eu, elementum eu tortor. Vestibulum sodales lacinia nisl, et viverra ipsum tincidunt tincidunt. Cras lectus libero, porta sed porttitor vitae, iaculis ut odio.]</p><br><br>
  139.  
  140. <!----------------------------------------- STORY ----------------------------------->
  141. <div class="profile-fields-title" style="margin-bottom:-5px;color:#3A3A3A"><a id="story" /><h2>Story</h2></div>
  142. <div class="card bg-faded mb-1 border-top-0" style="height:1px;"> </div>
  143. <p><div style="font-size:16px"><b>Interhigh preliminaries</b></div>
  144. [Text]
  145. <br><br>
  146. <div style="font-size:16px"><b>Pre-Winter Cup</b></div>
  147. [Text]
  148. <br><br>
  149. <div style="font-size:16px"><b>Winter Cup</b></div>
  150. [Text]
  151. <br><br>
  152. <div style="font-size:16px"><b>Semi-finals</b></div>
  153. [Text]
  154. </p><br><br><br>
  155.  
  156. <!----------------------------------------- SKILL ----------------------------------->
  157. <div class="profile-fields-title" style="margin-bottom:-5px;color:#3A3A3A"><h2>Skill</h2></div>
  158. <div class="card bg-faded mb-1 border-top-0" style="height:1px;"> </div>
  159. <p><br><div align="center">
  160. <!------------------------------------------------ STAT BARS ------------------------------------------------>
  161. <div class="card" id="skill" style="background-color:rgba(255,255,255,0); border: 2px solid #40E0D0; width:700px">
  162. <div class="card-block p-3"><img src="https://vignette.wikia.nocookie.net/kurokonobasuke/images/6/60/Miyaji_chart.png/revision/latest/scale-to-width-down/135?cb=20141222161459" align="right">
  163. <div class="row no-gutters">
  164. <div class="col-md-3 text-md-left text-left pr-md-0">
  165. <b>Physical Ability</b>
  166. </div>
  167. <div class="col-md-7 px-2">
  168. <div class="progress">
  169. <div class="progress-bar" style="background: #18E618; width: 100%;"></div>
  170. </div>
  171. </div>
  172. <div class="col-md-2 text-md-left text-left pl-md-0">
  173. 10/10
  174. </div>
  175. </div>
  176. <div class="row no-gutters">
  177. <div class="col-md-3 text-md-left text-left pr-md-0">
  178. <b>Technique</b>
  179. </div>
  180. <div class="col-md-7 px-2">
  181. <div class="progress">
  182. <div class="progress-bar" style="background: #18E618; width: 100%"></div>
  183. </div>
  184. </div>
  185. <div class="col-md-2 text-md-left text-left pl-md-0">
  186. 10/10
  187. </div>
  188. </div>
  189. <div class="row no-gutters">
  190. <div class="col-md-3 text-md-left text-left pr-md-0">
  191. <b>Stamina</b>
  192. </div>
  193. <div class="col-md-7 px-2">
  194. <div class="progress">
  195. <div class="progress-bar" style="background: #18E618; width: 100%"></div>
  196. </div>
  197. </div>
  198. <div class="col-md-2 text-md-left text-left pl-md-0">
  199. 10/10
  200. </div>
  201. </div>
  202. <div class="row no-gutters">
  203. <div class="col-md-3 text-md-left text-left pr-md-0">
  204. <b>Mental Strength </b>
  205. </div>
  206. <div class="col-md-7 px-2">
  207. <div class="progress">
  208. <div class="progress-bar" style="background: #18E618; width: 100%"></div>
  209. </div>
  210. </div>
  211. <div class="col-md-2 text-md-left text-center pl-md-0">
  212. 10/10
  213. </div>
  214. </div>
  215. <div class="row no-gutters">
  216. <div class="col-md-3 text-md-left text-left pr-md-0">
  217. <b>Special Ability</b>
  218. </div>
  219. <div class="col-md-7 px-2">
  220. <div class="progress">
  221. <div class="progress-bar" style="background: #18E618; width: 100%"></div>
  222. </div>
  223. </div>
  224. <div class="col-md-2 text-md-left text-center pl-md-0">
  225. 10/10
  226. </div>
  227. </div>
  228. </div>
  229. </div>
  230. </p><br><br></div>
  231. <!-------------------------------------- TRIVIA ---------------------------------------->
  232. <div class="profile-fields-title" style="margin-bottom:-5px;color:#3A3A3A"><a id="trivia" /><h2>Trivia</h2></div>
  233. <div class="card bg-faded mb-1 border-top-0" style="height:1px;"> </div><div style="color:#3A3A3A">
  234. <p><ul style="list-style-type:square;">
  235. <li style="color:#3A3A3A;">Trivia 1.</li>
  236. <li style="color:#3A3A3A;">Trivia 2.</li>
  237. <li style="color:#3A3A3A;">Trivia 3.</li>
  238. </ul>
  239. </p>
  240. <br><br></div>
  241. </div></div>
  242. </div></div><div align="right"><!-----DON'T REMOVE THE CREDIT, PLEASE-----><sub><small>LAYOUT BY <a href="https://toyhou.se/ChainOfRain">CHAINOFRAIN</a></small></sub><!----></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!