API tools faq
paste
Advertisement
SeraphicSage

Silver Code: Shiroyabu

SeraphicSage
Feb 27th, 2021
26
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.11 KB | None | 0 0
raw download clone embed print report
  1. <!------The Silver Code by /SeraphicSage------>
  2. Thank you for using my code! The Silver Code is inspired by Suda51's Kill the Past series' aesthetic.
  3. You can mess around with and frankenstein this code as much as you'd like. Please just take care to not remove the credits in the main text box. You can move them, resize them, and recolor them, but don't erase the credits entirely. Also, be sure to credit any other code snippets and/or stock images and art you add onto your page. Please note that this html is not compatible with all Toyhou.se CSS and may require some tweaking to work with other formats/codes. The code is also not optimized for mobile devices, but it should be viewable on most setups. Thanks again, and remember: punk's not dead!
  4. <!------Intro End------>
  5.  
  6.  
  7.  
  8. <div class="container-fluid">
  9. <!--Profile-->
  10. <div class="row">
  11. <!---Profile Image-->
  12. <div class="col-lg-3 p-3">
  13. <div class="card bg-dark border-0 rounded-0 h-100 w-100" style="min-height:280px; background-size:cover; background-repeat:no-repeat; background-position:top center; background-image:url('URL HERE');"></div>
  14.  
  15. </div> <!--character image end-->
  16.  
  17.  
  18. <!--Profile text-->
  19. <div class="row mt-3" style="width:350px;">
  20.  
  21. <div class="col m-0" style="width:200px; padding-left:2.8rem">
  22.  
  23. <!---You may have to fiddle with the width styling here depending on the length of your OC's name--->
  24.  
  25. <div class="card card-outline-primary" style="border:10px solid #010101;background-color: #fff; width:200px; height:65px; border-radius: 0px">
  26. <h1 class="display-4 ml-2 mt-1 pl-4 font-weight-bold" style="color:#010101;">First</h1>
  27. </div></div>
  28. <div class="col m-0" style="width:20px;">
  29. <div class="card card-outline-primary" style="border:10px solid #010101; background-color: #fff; width:170px; height:65px; border-radius: 0px">
  30. <h1 class="display-4 ml-2 mt-1 pl-4 font-weight-bold" style="color:#010101;" align="left">Last</h1>
  31. </div></div>
  32. <br>
  33.  
  34. <h4 class="display-6 font-weight-bold" style="position:relative; margin-top:5rem; max-height:20px; background-color:#fff; color:#010101; font-family:Palatino Linotype; right:13rem">
  35. Affiliation:
  36.  
  37.  
  38.  
  39. </div>
  40. <!---profile end--->
  41.  
  42.  
  43.  
  44. <!--Main Body-->
  45. <p></p>
  46.  
  47. <div class="card p-2" style="border:5px solid #010101; width:74%; align:right; background-color:#f6f6f6; color:#010101; border-radius: 0px">
  48. <div class="container-fluid">
  49. <div class="row">
  50.  
  51. <!--Left column (Information/Summary)-->
  52. <div class="col-lg-6 p-3" style="height: 450px;overflow: auto;">
  53. <p>
  54. You can write a summary of the character here. Any information about there personality, likes/dislikes, occupation hobbies, etc. can be explained a bit within a few paragraphs under this section.</p>
  55. <p>Feel free to add more paragraph breaks, as this section will scroll after a certain point!</p>
  56. <p>Cupcake ipsum dolor sit amet soufflé cake jujubes chocolate cake. Pie chocolate pastry. Marzipan biscuit pastry tiramisu candy canes donut brownie. Cotton candy dessert cake ice cream. Chocolate pudding donut lemon drops donut chocolate bonbon cotton candy carrot cake. Bear claw brownie cake. Cupcake muffin candy fruitcake jujubes. Biscuit soufflé biscuit cookie lemon drops caramels tart jelly-o pudding.</p>
  57.  
  58. </div>
  59. <!--left column end-->
  60.  
  61.  
  62.  
  63.  
  64. <!--Right column (basics)-->
  65. <div class="col-lg-6 p-2"><div align="right">
  66. <h4 class="display-4 ml-2 mt-1 pl-4 font-weight-bold text-uppercase" style="font-family:Palatino Linotype;">
  67. Full name<i class="fas fa-caret-left"></i></div> <br>
  68.  
  69. <ul class="list-group list-group-flush">
  70. <li class="list-group-item d-flex justify-content-between align-items-center bg-transparent px-3 py-2" style="border-top:0;">
  71.  
  72.  
  73. <span class="text">Age</span> age
  74. </li>
  75. <li class="list-group-item d-flex justify-content-between align-items-center bg-transparent px-3 py-2">
  76. <span class="text">Gender</span> gender
  77. </li>
  78. <li class="list-group-item d-flex justify-content-between align-items-center bg-transparent px-3 py-2">
  79. <span class="text">Occupation</span> job title
  80. </li>
  81. <li class="list-group-item d-flex justify-content-between align-items-center bg-transparent px-3 py-2">
  82. <span class="text">Height</span> height
  83. </li>
  84. <li class="list-group-item d-flex justify-content-between align-items-center bg-transparent px-3 py-2">
  85. <span class="text">Weight</span> weight
  86. </li>
  87. <li class="list-group-item d-flex justify-content-between align-items-center bg-transparent px-3 py-2">
  88. <span class="text">Birthdate</span> date of birth
  89. </li>
  90. <li class="list-group-item d-flex justify-content-between align-items-center bg-transparent px-3 py-2">
  91. <span class="text">Alignment</span> alignment
  92. </li>
  93. <li class="list-group-item d-flex justify-content-between align-items-center bg-transparent px-3 py-2">
  94. <span class="text">Status</span> homing status
  95. </li>
  96. <li class="list-group-item d-flex justify-content-between align-items-center bg-transparent px-3 py-2">
  97. <span class="text">Theme</span> <a href="URL HERE"><u>Song Title and Artist</u></a>
  98.  
  99. </div> </div>
  100. <!---Right column (basics) end--->
  101.  
  102.  
  103. <!---Right Column Credits--->
  104. <p style="text-align: right; font-size:0.7rem;">
  105. <a href="https://toyhou.se/seraphicsage" data-toggle="tooltip" title="code by SeraphicSage" style="color: #010101;"><i class="fas fa-code"></i></a>
  106. <a href="/Avicode" data-toggle="tooltip" title="code snippets from Avicode"><i class="fad fa-file-code" style="color: #010101;"></i></a>
  107. <!--- You can add more citations here for CSS, design, background, aesthetic, etc. credits.--->
  108. </div></div>
  109. <!---Right Column Credits end--->
  110.  
  111.  
  112. <!---Right Column Image--->
  113. <div class="col-lg-3 p-0" align:"right" style="border:5px solid #010101; border-radius: 0px">
  114. <div class="card bg-dark border-0 rounded-0 h-100" style="min-height:300px; background-size:cover; background-position:center; background-image:url('URL HERE');"></div>
  115.  
  116. </div>
  117. <!--Right Image end-->
  118.  
  119.  
  120.  
  121.  
  122.  
  123.  
  124. <!--- EXTEND--->
  125.  
  126. <a data-toggle="collapse" href="#extend" class="col-12 btn btn-block btn-lg d-inline text-left display-1 rounded-0 p-3" style="letter-spacing:7px; background-color: #fff; border:10px solid #010101; border-radius: 0px; color:#000">
  127. <i class="fas fa-caret-right"></i> EXTEND
  128. </a>
  129. <div id="extend" class="w-100 panel-collpase collapse">
  130. <div class="card card-block rounded-0" style="border-width:5px; background-color:#f6f6f6">
  131. <div class="row justify-content-between">
  132.  
  133. <!---note: 'fas-fa-triangle' can be changed to any font-awesome icon to replace the spinning icon--->
  134.  
  135. <!--History-->
  136.  
  137. <div class="container">
  138. <div class="row" style="width:390px;">
  139.  
  140. <a href="#history" class="btn" data-toggle="collapse" style="height:40px">
  141. <i class="fas fa-triangle fa-2x d-lg-block fa-spin 9s" style="color:#010101; text-shadow: 5px 2px 0px rgba(0,0,0,.65); animation-duration:7s;"></i>
  142. </a>
  143.  
  144.  
  145. <div class="col-lg-3 p-1" style="width:310px">
  146.  
  147. <div class="card card-outline-primary" style="border:10px solid #010101;background-color: #fff; width:130px; height:65px; border-radius: 0px">
  148. <h1 class="display-4 ml-2 mt-1 pl-4 font-weight-bold justify-content-start" style="color:#010101;">"01</h1>
  149. </div></div>
  150. <div class="col-lg-3 p-1" style="width:20px">
  151.  
  152. <div class="card card-outline-primary" style="border:10px solid #010101; background-color: #fff; width:190px; height:65px; border-radius: 0px">
  153. <h1 class="display-4 ml-2 mt-1 pl-4 font-weight-bold justify-content-end" style="color:#010101;" align="left">history</h1>
  154. </div></div>
  155. </div>
  156.  
  157. <!--History Content-->
  158. <div id="history" class="collapse">
  159. <div class="card bg-faded p-3" style="border:2px solid red; font-family: monospace; background-color: #fff; border-radius: 0px">
  160. <p style="color:#010101">
  161. Fill this space up with all the fun information about your character's past (or anything, really). This won't scroll, but feel free to make it pretty large. It's meant to look like one of those long exposition boxes in the game, anyway.
  162. <br>
  163. Cupcake ipsum dolor. Sit amet cake tiramisu lollipop sesame snaps toffee chupa chups. Lemon drops chocolate carrot cake pastry fruitcake muffin oat cake. Lemon drops bear claw cake sweet toffee. Tart gummies candy jelly-o. Jelly bonbon biscuit halvah wafer cupcake danish. Ice cream dessert chupa chups. Gummies oat cake oat cake lollipop tiramisu danish chocolate cake pie. Jelly gingerbread cheesecake. Dragée candy croissant cupcake fruitcake chocolate cake sweet roll tootsie roll danish. Topping jelly beans lemon drops chupa chups cookie cheesecake caramels jujubes cheesec</p>
  164. </div>
  165. </div> </div>
  166.  
  167. <!--History end-->
  168.  
  169.  
  170. <!--Trivia-->
  171.  
  172. <div class="container">
  173. <div class="row" style="width:390px;">
  174.  
  175. <a href="#trivia" class="btn" data-toggle="collapse" style="height:40px">
  176. <i class="fas fa-triangle fa-2x d-lg-block fa-spin 9s" style="color:#010101; text-shadow: 5px 2px 0px rgba(0,0,0,.65); animation-duration:7s;"></i>
  177. </a>
  178.  
  179.  
  180. <div class="col-lg-3 p-1" style="width:310px">
  181.  
  182. <div class="card card-outline-primary" style="border:10px solid #010101;background-color: #fff; width:130px; height:65px; border-radius: 0px">
  183. <h1 class="display-4 ml-2 mt-1 pl-4 font-weight-bold justify-content-start" style="color:#010101;">"02</h1>
  184. </div></div>
  185. <div class="col-lg-3 p-1" style="width:20px">
  186.  
  187.  
  188. <div class="card card-outline-primary" style="border:10px solid #010101; background-color: #fff; width:190px; height:65px; border-radius: 0px">
  189. <h1 class="display-4 ml-2 mt-1 pl-4 font-weight-bold justify-content-end" style="color:#010101;" align="left">trivia</h1>
  190. </div></div>
  191. </div>
  192.  
  193. <!--Trivia Content-->
  194. <div id="trivia" class="collapse">
  195. <div class="card bg-faded p-3" style="border:2px solid blue; background-color: #fff; font-family: monospace; font-size:14px; border-radius: 0px">
  196. <ul class="fa-ul" style="color:#010101">
  197. <li><span class="fa-li"><span class="fas fa-angle-right"></span></span>Fill this section with helpful (or useless) trivia about your OC.</li>
  198. <li><span class="fa-li"><span class="fas fa-angle-right"></span></span>Stuff like "loves Mont Blanc!"</li>
  199. <li><span class="fa-li"><span class="fas fa-angle-right"></span></span>"Only slurps his soup"</li>
  200. <li><span class="fa-li"><span class="fas fa-angle-right"></span></span>or "is a Capricorn" will work perfectly.</li>
  201. <li><span class="fa-li"><span class="fas fa-angle-right"></span></span>You can add as many trivia points as you'd like, too.</li>
  202.  
  203. </ul>
  204. </div>
  205. </div></div>
  206. <!--Trivia end-->
  207.  
  208.  
  209.  
  210. <!--Chat-->
  211. <div class="container">
  212. <div class="row" style="width:390px;">
  213. <a href="#chat" class="btn" data-toggle="collapse" style="height:40px">
  214. <i class="fas fa-triangle fa-2x d-lg-block fa-spin 9s" style="color:#010101; text-shadow: 5px 2px 0px rgba(0,0,0,.65); animation-duration:7s;"></i>
  215. </a>
  216. <div class="col-lg-3 p-1" style="width:310px">
  217.  
  218. <div class="card card-outline-primary" style="border:10px solid #010101;background-color: #fff; width:130px; height:65px; border-radius: 0px">
  219. <h1 class="display-4 ml-2 mt-1 pl-4 font-weight-bold justify-content-start" style="color:#010101;">"03</h1>
  220. </div></div>
  221. <div class="col-lg-3 p-1" style="width:20px">
  222.  
  223.  
  224. <div class="card card-outline-primary" style="border:10px solid #010101; background-color: #fff; width:190px; height:65px; border-radius: 0px">
  225. <h1 class="display-4 ml-2 mt-1 pl-4 font-weight-bold justify-content-end" style="color:#010101;" align="left">chat</h1>
  226. </div></div>
  227. </div>
  228.  
  229.  
  230. <!--Chat Content-->
  231. <div id="chat" class="collapse">
  232. <div class="card p-3" style="border:2px solid green; font-family: monospace; background-color:#fff; border-radius: 0px">
  233. <ul class="m-0" style="list-style-type:none; color:#010101">
  234. <li class="mb-2"> <a style="color: red" data-toggle="tooltip" data-placement="top" title="RealName1"> Username1: </a> Use this section to simulate a conversation between characters </li>
  235. <li class="mb-2"> <a style="color: aqua" data-toggle="tooltip" data-placement="top" title="RealName2"> Username2: </a> Make sure to use the Username and RealName text alongside the color code to indicate the character speaking</li>
  236. <li class="mb-2"> <a style="color: purple" data-toggle="tooltip" data-placement="top" title="RealName3"> Username3: </a> You can change their username colors, too, of course</li>
  237. <li class="mb-2"> <a style="color: lime" data-toggle="tooltip" data-placement="top" title="RealName4"> Username4: </a> By the way, this section is meant to simulate the Kamuinet!
  238. <li class="mb-2"> <a style="color: gray" data-toggle="tooltip" data-placement="top" title="RealName5"> Username5: </a> write more dialogue here
  239. </p>
  240. </div>
  241. </div></div>
  242. <!--Chat end-->
  243.  
  244.  
  245. <!--Relationships-->
  246.  
  247. <div class="container">
  248. <div class="row" style="width:390px;">
  249.  
  250. <a href="#relationships" class="btn" data-toggle="collapse" style="height:40px">
  251. <i class="fas fa-triangle fa-2x d-lg-block fa-spin 9s" style="color:#010101; text-shadow: 5px 2px 0px rgba(0,0,0,.65); animation-duration:7s;"></i>
  252. </a>
  253.  
  254.  
  255. <div class="col-lg-3 p-1" style="width:310px">
  256.  
  257. <div class="card card-outline-primary" style="border:10px solid #010101;background-color: #fff; width:130px; height:65px; border-radius: 0px">
  258. <h1 class="display-4 ml-2 mt-1 pl-4 font-weight-bold justify-content-start" style="color:#010101;">"04</h1>
  259. </div></div>
  260. <div class="col-lg-3 p-1" style="width:20px">
  261.  
  262.  
  263. <div class="card card-outline-primary" style="border:10px solid #010101; background-color: #fff; width:190px; height:65px; border-radius: 0px">
  264. <h1 class="display-4 ml-2 mt-1 pl-4 font-weight-bold justify-content-end" style="color:#010101;" align="left">relations</h1>
  265. </div></div>
  266. </div>
  267.  
  268. <!--Relationships Content-->
  269. <div id="relationships" class="collapse">
  270. <div class="card p-3" style=" font-family: monospace; background-color:#f6f6f6">
  271.  
  272.  
  273. <!--1-->
  274. <div class="container">
  275.  
  276. <div class ="row" style="width: 20%; text-align: center;">
  277. <h3 style="color:#fff">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Name </h3>
  278. </div>
  279. <div class ="row">
  280.  
  281. <img src="https://via.placeholder.com/200" style="max-width:200px; background-size:cover;">
  282.  
  283.  
  284. <div class="card p-4" style="border:4px solid red; font-family: monospace; background-color: #fff; width: 80%; float:right; align-items-center; border-radius: 0px">
  285. <p style="color:#010101;"> These sections are self-explanatory. Just write in the character's relations and some info about them. This section is meant to mimic the in-game dialogue text.</p>
  286. </div> </p></div> </div>
  287.  
  288. <!--2-->
  289. <br><br>
  290.  
  291.  
  292. <div class="container" align="right">
  293. <div class ="row" style="width: 20%;">
  294. <h3 style="color:#fff">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Name </h3>
  295. </div>
  296. <div class ="row">
  297.  
  298. <div class="card p-4" style="border:4px solid red; font-family: monospace; background-color: #fff; width: 80%; float:right; align-items-center; border-radius: 0px">
  299. <p style="color:#010101"> Cupcake ipsum dolor sit amet. Sweet cotton candy topping dessert chupa chups tart icing gummi bears. Tart jujubes cotton candy soufflé jelly jelly tiramisu cotton candy topping. Gummies powder caramels jelly-o jujubes pie. Marshmallow marzipan icing. Wafer tart pudding caramels. Donut ice cream bonbon cupcake pudding. Tootsie roll macaroon chocolate cake. Icing halvah carrot cake cheesecake bear claw wafer. Marshmallow icing jelly-o marzipan toffee. Candy chocolate biscuit gummies powder. Caramels powder jelly marshmallow. Bonbon jelly-o tart sweet roll sugar plum danish soufflé candy canes. </p>
  300.  
  301. </div></p>
  302. <img src="https://via.placeholder.com/200" style="max-width:200px; background-size:cover;">
  303. </div> </div>
  304.  
  305.  
  306. <!--3-->
  307.  
  308. <br><br>
  309.  
  310. <div class="container">
  311.  
  312. <div class ="row" style="width: 20%; text-align: center;">
  313. <h3 style="color:#fff">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Name </h3>
  314. </div>
  315. <div class ="row">
  316.  
  317. <img src="https://via.placeholder.com/200" style="max-width:200px; background-size:cover;">
  318.  
  319.  
  320. <div class="card p-4" style="border:4px solid red; font-family: monospace; background-color: #fff; width: 80%; float:right; align-items-center; border-radius: 0px">
  321. <p style="color:#010101"> Cupcake ipsum dolor. Sit amet powder cupcake pudding. Dessert chupa chups caramels. Cupcake chocolate cake cookie marshmallow gummies. Brownie ice cream biscuit muffin bonbon biscuit. Carrot cake jelly dessert. Soufflé powder gummies caramels toffee candy canes muffin. Tart sesame snaps fruitcake dragée cupcake dessert cupcake. Pie jelly-o ice cream tiramisu jelly candy. Chocolate dragée pudding croissant pastry. Candy canes carrot cake wafer tiramisu danish chocolate bar pie pie brownie. Danish bonbon lemon drops. Cupcake halvah candy canes. Liquorice liquorice cake muffin topping.</p>
  322. </div> </p></div> </div></div></div></div>
  323.  
  324. <!--Relationships end-->
  325.  
  326.  
  327.  
  328. <!--Design-->
  329. <div class="container">
  330. <div class="row" style="width:390px;">
  331.  
  332. <a href="#design" class="btn" data-toggle="collapse" style="height:40px">
  333. <i class="fas fa-triangle fa-2x d-lg-block fa-spin 9s" style="color:#010101; text-shadow: 5px 2px 0px rgba(0,0,0,.65); animation-duration:7s;"></i>
  334. </a>
  335.  
  336.  
  337. <div class="col-lg-3 p-1" style="width:310px">
  338.  
  339. <div class="card card-outline-primary" style="border:10px solid #010101;background-color: #fff; width:130px; height:65px; border-radius: 0px">
  340. <h1 class="display-4 ml-2 mt-1 pl-4 font-weight-bold justify-content-start" style="color:#010101;">"05</h1>
  341. </div></div>
  342. <div class="col-lg-3 p-1" style="width:20px">
  343.  
  344. <div class="card card-outline-primary" style="border:10px solid #010101; width:190px; height:65px; background-color: #fff; border-radius: 0px">
  345. <h1 class="display-4 ml-2 mt-1 pl-4 font-weight-bold justify-content-end" style="color:#010101;" align="left">design</h1>
  346. </div></div>
  347. </div>
  348.  
  349. <!---Design Content--->
  350. <div id="design" class="collapse">
  351.  
  352.  
  353. <div class="container-fluid">
  354. <div class="row">
  355. <div class="col-lg-3">
  356. <img class="d-block mx-auto" src="https://via.placeholder.com/450x820.png" style="max-height:450px">
  357. </div>
  358. <div class="col-lg-7" style="border:2px solid blue;">
  359. <table class="table-bordered mx-auto w-100" style="color:#010101">
  360. <tbody>
  361. <tr>
  362. <td style="width:50%;"><b>OWNER:</b> <a href="/ ">Owner</a></td>
  363. <td style="width:50%;"><b>DESIGNER:</b> <a href="/ ">Designer</a></td>
  364. </tr>
  365. <tr>
  366. <td style="width:50%;"><b>AGE:</b> age</td>
  367. <td style="width:50%;"><b>GENDER:</b> gender</td>
  368. </tr>
  369. <tr>
  370. <td style="width:50%;"><b>HEIGHT:</b> height</td>
  371. <td style="width:50%;"><b>WEIGHT:</b> weight</td>
  372. </tr>
  373. <tr>
  374. <td style="width:50%;"><b>BUILD:</b> body type</td>
  375. <td style="width:50%;"><b>SKIN TONE:</b> skin color/descriptors</td>
  376. </tr>
  377. <tr>
  378. <td style="width:50%;"><b>EYE COLOUR:</b> eyes</td>
  379. <td style="width:50%;"><b>HAIR COLOUR:</b> hair</td>
  380. </tr>
  381.  
  382. <tr>
  383. <td style="width:50%;"><b>LIKES: </b>1 | 2 | 3 | 4 </td>
  384. <td style="width:50%;"><b>DISLIKES: </b>1 | 2 | 3 | 4</td>
  385. </tr>
  386. <tr>
  387.  
  388. <!-- Palette -->
  389.  
  390. <!---replace fff and 010101 with your OC's color palette. You can add as many colors as you want; it will fit the whole card--->
  391. <div class="col">
  392. <div class="row no-gutters modal-open" style="margin-left: -15px; margin-right: -15px; padding: 4px; height: 25px;">
  393. <div style="background-color: #010101;" class="col h-100"></div>
  394. <div style="background-color: #fff;" class="col h-100"></div>
  395. <div style="background-color: #010101;" class="col h-100"></div>
  396. <div style="background-color: #fff;" class="col h-100"></div>
  397. <div style="background-color: #010101;" class="col h-100"></div>
  398. </div>
  399. </div>
  400. </div>
  401. </div>
  402.  
  403. <td colspan="2">
  404. <div class="card border-0 p-1" style="font-family: monospace; height:160px; overflow:auto; background-color:#303030">
  405.  
  406. <u><h3 class="d-inline text-center" style="letter-spacing:5px; color:#010101;"> Important Design Notes</h3></u>
  407.  
  408. <ul class="fa-ul" style="font-family: monospace; color:#010101;">
  409. <li><span class="fa-li"><span class="fas fa-angle-right"></span></span>Write some important notes about your OC's design for artists here.</li>
  410. <li><span class="fa-li"><span class="fas fa-angle-right"></span></span>Stuff like "Usually seen carrying a convenience store bag"</li>
  411. <li><span class="fa-li"><span class="fas fa-angle-right"></span></span>"His eyes glow in the dark"</li>
  412. <li><span class="fa-li"><span class="fas fa-angle-right"></span></span> and "is ambidextrous" are good examples of what to include here.</li>
  413. </ul>
  414.  
  415. </p></div>
  416. </td>
  417. </tr>
  418. </tbody>
  419. </table>
  420.  
  421. </div> </div>
  422. </div> </div>
  423. </div>
  424.  
  425.  
  426.  
  427. <!--OST-->
  428.  
  429. <div class="container">
  430. <div class="row" style="width:390px;">
  431.  
  432. <a href="#ost" class="btn" data-toggle="collapse" style="height:40px">
  433. <i class="fas fa-triangle fa-2x d-lg-block fa-spin 9s" style="color:#010101; text-shadow: 5px 2px 0px rgba(0,0,0,.65); animation-duration:7s;"></i>
  434. </a>
  435.  
  436.  
  437. <div class="col-lg-3 p-1" style="width:310px">
  438.  
  439. <div class="card card-outline-primary" style="border:10px solid #010101;background-color: #fff; width:130px; height:65px; border-radius: 0px">
  440. <h1 class="display-4 ml-2 mt-1 pl-4 font-weight-bold justify-content-start" style="color:#010101;">"06</h1>
  441. </div></div>
  442. <div class="col-lg-3 p-1" style="width:20px">
  443.  
  444. <div class="card card-outline-primary" style="border:10px solid #010101; background-color: #fff; width:190px; height:65px; border-radius: 0px">
  445. <h1 class="display-4 ml-2 mt-1 pl-4 font-weight-bold justify-content-end" style="color:#010101;" align="left">soundtrack</h1>
  446. </div></div>
  447. </div>
  448.  
  449.  
  450.  
  451.  
  452. <!--OST Content-->
  453.  
  454. <!---IMPORTANT NOTE: Always use the embed code for YouTube links here. Copy-paste the embed code by right-clicking the video. Then, copy that URL into a program like Notepad to check it. The URL you want to use should look something like: 'https://www.youtube.com/embed/oT6vP39s0uU' Remove any other uneccessary information from the link if needed.
  455. You can add more songs if wanted.--->
  456.  
  457.  
  458. <div id="ost" class="collapse" style="border:2px solid green">
  459.  
  460.  
  461. <!---1--->
  462. <div class="row text-center p-4 m-0 bg-secondary"><div class="col-md-1 text-center">
  463.  
  464. <a class="p-0 mt-2 btn btn-outline-dark text-white melody-embed" style="border:0;position:relative;height:1.5rem;width:1.5rem;z-index:2;">
  465. <iframe style="opacity:.01;position:absolute;left:0;right:0;top:0;bottom:0;" class="h-100 w-100 mb-4"
  466. src="https://www.youtube.com/embed/..." frameborder="0"></iframe>
  467. <i class="fas fa-play fa-fw fa-2x" style="z-index:-1;position:absolute;left:0;top:0;font-size:1rem;text-align:center;height:100%;width:100%;"></i>
  468. </a>
  469.  
  470. </div>
  471.  
  472. <div class="col-md-11 text-left text-white">
  473. <h2 style="font-size: 0.9rem;">Song Title</h2>
  474. <h2 style="font-size: 0.75rem; font-weight: normal;">Artist Name</h2>
  475. </div>
  476.  
  477. </div>
  478.  
  479. <!---2--->
  480. <div class="row text-center p-4 m-0 bg-secondary"><div class="col-md-1 text-center">
  481.  
  482. <a class="p-0 mt-2 btn btn-outline-dark text-white melody-embed" style="border:0;position:relative;height:1.5rem;width:1.5rem;z-index:2;">
  483. <iframe style="opacity:.01;position:absolute;left:0;right:0;top:0;bottom:0;" class="h-100 w-100 mb-4"
  484. src="https://www.youtube.com/embed/..." frameborder="0"></iframe>
  485. <i class="fas fa-play fa-fw fa-2x" style="z-index:-1;position:absolute;left:0;top:0;font-size:1rem;text-align:center;height:100%;width:100%;"></i>
  486. </a>
  487.  
  488. </div>
  489.  
  490. <div class="col-md-11 text-left text-white">
  491. <h2 style="font-size: 0.9rem;">Song Title</h2>
  492. <h2 style="font-size: 0.75rem; font-weight: normal;">Artist Name</h2>
  493. </div>
  494.  
  495. </div>
  496.  
  497.  
  498. <!---3--->
  499. <div class="row text-center p-4 m-0 bg-secondary"><div class="col-md-1 text-center">
  500.  
  501. <a class="p-0 mt-2 btn btn-outline-dark text-white melody-embed" style="border:0;position:relative;height:1.5rem;width:1.5rem;z-index:2;">
  502. <iframe style="opacity:.01;position:absolute;left:0;right:0;top:0;bottom:0;" class="h-100 w-100 mb-4"
  503. src="https://www.youtube.com/embed/..." frameborder="0"></iframe>
  504. <i class="fas fa-play fa-fw fa-2x" style="z-index:-1;position:absolute;left:0;top:0;font-size:1rem;text-align:center;height:100%;width:100%;"></i>
  505. </a>
  506.  
  507. </div>
  508.  
  509. <div class="col-md-11 text-left text-white">
  510. <h2 style="font-size: 0.9rem;">Song Title</h2>
  511. <h2 style="font-size: 0.75rem; font-weight: normal;">Artist Name</h2>
  512. </div>
  513.  
  514. </div>
  515.  
  516.  
  517. <!---4--->
  518. <div class="row text-center p-4 m-0 bg-secondary"><div class="col-md-1 text-center">
  519.  
  520. <a class="p-0 mt-2 btn btn-outline-dark text-white melody-embed" style="border:0;position:relative;height:1.5rem;width:1.5rem;z-index:2;">
  521. <iframe style="opacity:.01;position:absolute;left:0;right:0;top:0;bottom:0;" class="h-100 w-100 mb-4"
  522. src="https://www.youtube.com/embed/..." frameborder="0"></iframe>
  523. <i class="fas fa-play fa-fw fa-2x" style="z-index:-1;position:absolute;left:0;top:0;font-size:1rem;text-align:center;height:100%;width:100%;"></i>
  524. </a>
  525.  
  526. </div>
  527.  
  528. <div class="col-md-11 text-left text-white">
  529. <h2 style="font-size: 0.9rem;">Song Title</h2>
  530. <h2 style="font-size: 0.75rem; font-weight: normal;">Artist Name</h2>
  531. </div>
  532.  
  533. </div>
  534.  
  535.  
  536. <!---5--->
  537. <div class="row text-center p-4 m-0 bg-secondary"><div class="col-md-1 text-center">
  538.  
  539. <a class="p-0 mt-2 btn btn-outline-dark text-white melody-embed" style="border:0;position:relative;height:1.5rem;width:1.5rem;z-index:2;">
  540. <iframe style="opacity:.01;position:absolute;left:0;right:0;top:0;bottom:0;" class="h-100 w-100 mb-4"
  541. src="https://www.youtube.com/embed/..." frameborder="0"></iframe>
  542. <i class="fas fa-play fa-fw fa-2x" style="z-index:-1;position:absolute;left:0;top:0;font-size:1rem;text-align:center;height:100%;width:100%;"></i>
  543. </a>
  544.  
  545. </div>
  546.  
  547. <div class="col-md-11 text-left text-white">
  548. <h2 style="font-size: 0.9rem;">Song Title</h2>
  549. <h2 style="font-size: 0.75rem; font-weight: normal;">Artist Name</h2>
  550. </div>
  551.  
  552. </div>
  553.  
  554.  
  555.  
  556.  
  557.  
  558. </div>
  559. </div>
  560.  
  561. <!--- OST end --->
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!