API tools faq
paste
rosiuel

doggy love

rosiuel
Jun 19th, 2021 (edited)
615
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.64 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. doggy love by cherubix
  4.  
  5. background : #000
  6. text : #fff
  7. accent : #F77B34
  8.  
  9. do not remove credit
  10.  
  11. -->
  12.  
  13. <div class="container" style="max-width:700px">
  14. <div style="font-family:courier">
  15. <div class="row no-gutters">
  16.  
  17. <!-- quote 1 -->
  18. <div class="col-6 p-3 container text-uppercase font-weight-bold" style="background-color:#000;height:50px;color:#fff;font-size:15px;">
  19. <div class="text-center">
  20. " Don't touch my hot dog! "
  21. </div>
  22. </div>
  23.  
  24. <!-- buttons 1 -->
  25. <div class="col-6 container align-items-center">
  26. <div class="row no-gutters">
  27. <ul class="nav text-center row no-gutters justify-content-center">
  28. <li class="p-2 ml-5" style="background-color:#000;height:50px;border: 3px solid #F77B34">
  29. <a class="active px-1 py-0" style="color:#fff" data-toggle="tab" href="#thoughts1"><i class="far fa-comment-dots fa-fw fa-2x"></i></a>
  30. </li>
  31. <li class="p-2 ml-4" style="background-color:#000;height:50px;border: 3px solid #F77B34">
  32. <a class="px-1 py-0" style="color:#fff" data-toggle="tab" href="#trivia1"><i class="far fa-star fa-fw fa-2x"></i></a>
  33. </li>
  34. <li class="p-2 ml-4" style="background-color:#000;height:50px;border: 3px solid #F77B34">
  35. <a class="px-1 py-0" style="color:#fff" data-toggle="tab" href="#stats1"><i class="far fa-chart-bar fa-fw fa-2x"></i></a>
  36. </li>
  37. </ul>
  38. </div>
  39. </div>
  40.  
  41. </div>
  42.  
  43. <div class="row no-gutters">
  44. <!-- image 1 -->
  45. <div class="col-sm-6 my-2 container align-items-center" style="background:url(https://pbs.twimg.com/media/CjUcaGfWUAA0_Qr.jpg) no-repeat center;background-size:cover;height:300px;"></div>
  46.  
  47. <!-- content box 1 -->
  48. <div class="col-sm-6 my-2 container p-3" style="background-color:#000;height:300px;">
  49. <div class="tab-content">
  50.  
  51. <!-- tab one : thoughts -->
  52. <div class="tab-pane fade active show" id="thoughts1">
  53. <div class="col-12 container mb-2 text-uppercase font-weight-bold" style="color:#fff;font-size:20px">
  54. <div class="text-center">Dogamy's Thoughts</div></div>
  55. <div class="p-3 overflow-auto text-justify" style="color:#fff;height:230px">
  56. <p>"put your character's thoughts here! this box scrolls. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."</p>
  57. </div>
  58. </div>
  59. <!-- end tab one -->
  60.  
  61. <!-- tab two : trivia -->
  62. <div class="tab-pane fade" id="trivia1">
  63. <div class="col-12 container mb-2 text-uppercase font-weight-bold" style="color:#fff;font-size:20px">
  64. <div class="text-center">Trivia</div></div>
  65. <div class="p-3 overflow-auto" style="color:#fff;height:230px">
  66. <ul class="fa-ul">
  67. <li><i class="fas fa-caret-right"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</li>
  68. <li><i class="fas fa-caret-right"></i> Tempor incididunt ut labore et dolore magna aliqua.</li>
  69. <li><i class="fas fa-caret-right"></i> Ut enim ad minim veniam, quis nostrud exercitation ullamco.</li>
  70. <li><i class="fas fa-caret-right"></i> Laboris nisi ut aliquip ex ea commodo consequat.</li>
  71. </ul>
  72. </div>
  73. </div>
  74. <!-- end tab two -->
  75.  
  76. <!-- tab three : stats -->
  77. <div class="tab-pane fade" id="stats1">
  78. <div class="col-12 container mb-2 text-uppercase font-weight-bold" style="color:#fff;font-size:20px">
  79. <div class="text-center">Stats</div></div>
  80. <div class="p-3 overflow-auto" style="color:#fff;height:230px">
  81.  
  82. <!-- stat two -->
  83. <p class="text-center" style="margin:15px; margin-top:0px; margin-bottom:0px;">
  84. Pys. Intimacy
  85. </p>
  86. <div class="progress" style="margin-left:15px; margin-right:15px; height:5px;background-color:#222"><div class="progress-bar" style="background-color:#F77B34;width:
  87. 50%;">
  88. </div></div>
  89. <div class="my-2"></div>
  90.  
  91. <!-- stat two -->
  92. <p class="text-center" style="margin:15px; margin-top:0px; margin-bottom:0px;">
  93. Emo. Intimacy
  94. </p>
  95. <div class="progress" style="margin-left:15px; margin-right:15px; height:5px;background-color:#222"><div class="progress-bar" style="background-color:#F77B34;width:
  96. 50%;">
  97. </div></div>
  98. <div class="my-2"></div>
  99.  
  100. <!-- stat three -->
  101. <p class="text-center" style="margin:15px; margin-top:0px; margin-bottom:0px;">
  102. Honesty
  103. </p>
  104. <div class="progress" style="margin-left:15px; margin-right:15px; height:5px;background-color:#222"><div class="progress-bar" style="background-color:#F77B34;width:
  105. 50%;">
  106. </div></div>
  107. <div class="my-2"></div>
  108.  
  109. <!-- stat four -->
  110. <p class="text-center" style="margin:15px; margin-top:0px; margin-bottom:0px;">
  111. Communication
  112. </p>
  113. <div class="progress" style="margin-left:15px; margin-right:15px; height:5px;background-color:#222"><div class="progress-bar" style="background-color:#F77B34;width:
  114. 50%;">
  115. </div></div>
  116. <div class="my-2"></div>
  117.  
  118. <!-- stat five -->
  119. <p class="text-center" style="margin:15px; margin-top:0px; margin-bottom:0px;">
  120. Trust
  121. </p>
  122. <div class="progress" style="margin-left:15px; margin-right:15px; height:5px;background-color:#222"><div class="progress-bar" style="background-color:#F77B34;width:
  123. 50%;">
  124. </div></div>
  125. <div class="my-2"></div>
  126.  
  127.  
  128. </div>
  129. </div>
  130. <!-- end tab three -->
  131. </div>
  132. </div>
  133. <!-- end content box 1 -->
  134.  
  135. <!-- content box 2 -->
  136. <div class="col-sm-12 my-2 container p-3" style="background-color:#000;height:300px;">
  137. <div class="row no-gutters">
  138.  
  139. <!-- timeline -->
  140. <div class="col-6 container">
  141. <div class="col-12 container mb-2 text-uppercase font-weight-bold" style="color:#fff;font-size:20px">
  142. <div class="text-center">Timeline</div></div>
  143. <div class="container p-2 overflow-auto" style="height:230px;color:#fff">
  144.  
  145. <table class="m-1" style="border:none;">
  146.  
  147. <!-- event 1 -->
  148. <tr>
  149. <td class="pt-3 pr-4 text-right" style="border-right:2px solid; vertical-align:top; width:20%;"><h4>Jan 00, 0000</h4></td>
  150. <td> <ul class="fa-ul ml-2">
  151. <li class="rounded p-2 mb-3 ml-2"><i class="fa-li fas fa-circle ml-20" style="margin-left:-10.5px;color:#F77B34"></i>
  152. <h4>Event</h4>
  153. <p>Event description. Can be as long or as short as you want. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at tellus id dui rutrum vehicula.</p>
  154. </li>
  155. </ul>
  156. </td>
  157. </tr>
  158.  
  159. <!-- event 2 -->
  160. <tr>
  161. <td class="pt-3 pr-4 text-right" style="border-right:2px solid; vertical-align:top; width:20%;"><h4>Jan 00, 0000</h4></td>
  162. <td> <ul class="fa-ul ml-2">
  163. <li class="rounded p-2 mb-3 ml-2"><i class="fa-li fas fa-circle ml-20" style="margin-left:-10.5px;color:#F77B34"></i>
  164. <h4>Event</h4>
  165. <p>Event description. Can be as long or as short as you want. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at tellus id dui rutrum vehicula.</p>
  166. </li>
  167. </ul>
  168. </td>
  169. </tr>
  170.  
  171. <!-- event 3 -->
  172. <tr>
  173. <td class="pt-3 pr-4 text-right" style="border-right:2px solid; vertical-align:top; width:20%;"><h4>Jan 00, 0000</h4></td>
  174. <td> <ul class="fa-ul ml-2">
  175. <li class="rounded p-2 mb-3 ml-2"><i class="fa-li fas fa-circle ml-20" style="margin-left:-10.5px;color:#F77B34"></i>
  176. <h4>Event</h4>
  177. <p>Event description. Can be as long or as short as you want. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at tellus id dui rutrum vehicula.</p>
  178. </li>
  179. </ul>
  180. </td>
  181. </tr>
  182.  
  183. <!-- add more events above here! -->
  184.  
  185. </table>
  186. </div>
  187. </div>
  188.  
  189. <!-- playlist -->
  190. <div class="col-6 container">
  191. <div class="col-12 container mb-2 text-uppercase font-weight-bold" style="color:#fff;font-size:20px">
  192. <div class="text-center">Playlist</div></div>
  193. <div class="container p-3 overflow-auto" style="height:230px;color:#fff">
  194.  
  195. <!-- songs
  196. find 'g6aia0GQMRw' and replace it with the stream of numbers n letters in the url of ur desired song! keep the /embed/! -->
  197. <span class="pull-left">enemy approching - toby fox</span>
  198. <span class="pull-right"><iframe allowfullscreen class="m-auto" frameborder="0" style="height:45px;width:10px;opacity:0.001;position:absolute;z-index:1000;" src="
  199. https://www.youtube.com/embed/g6aia0GQMRw
  200. "></iframe>
  201.  
  202. <i class="fas fa-play" style="color: #F77B34;"></i></span>
  203.  
  204. <br><br>
  205.  
  206. <span class="pull-left">song - artist</span>
  207. <span class="pull-right"><iframe allowfullscreen class="m-auto" frameborder="0" style="height:45px;width:10px;opacity:0.001;position:absolute;z-index:1000;" src="
  208. https://www.youtube.com/embed/g6aia0GQMRw
  209. "></iframe>
  210.  
  211. <i class="fas fa-play" style="color: #F77B34;"></i></span>
  212.  
  213. <br><br>
  214.  
  215. <span class="pull-left">song - artist</span>
  216. <span class="pull-right"><iframe allowfullscreen class="m-auto" frameborder="0" style="height:45px;width:10px;opacity:0.001;position:absolute;z-index:1000;" src="
  217. https://www.youtube.com/embed/g6aia0GQMRw
  218. "></iframe>
  219.  
  220. <i class="fas fa-play" style="color: #F77B34;"></i></span>
  221.  
  222. <br><br>
  223.  
  224. <span class="pull-left">song - artist</span>
  225. <span class="pull-right"><iframe allowfullscreen class="m-auto" frameborder="0" style="height:45px;width:10px;opacity:0.001;position:absolute;z-index:1000;" src="
  226. https://www.youtube.com/embed/g6aia0GQMRw
  227. "></iframe>
  228.  
  229. <i class="fas fa-play" style="color: #F77B34;"></i></span>
  230.  
  231. <br><br>
  232.  
  233. <span class="pull-left">song - artist</span>
  234. <span class="pull-right"><iframe allowfullscreen class="m-auto" frameborder="0" style="height:45px;width:10px;opacity:0.001;position:absolute;z-index:1000;" src="
  235. https://www.youtube.com/embed/g6aia0GQMRw
  236. "></iframe>
  237.  
  238. <i class="fas fa-play" style="color: #F77B34;"></i></span>
  239.  
  240. </div>
  241.  
  242. </div>
  243.  
  244. </div>
  245. </div>
  246. <!-- end content 2 -->
  247.  
  248. <!-- content box 3 -->
  249. <div class="col-sm-6 my-2 container p-3" style="background-color:#000;height:300px;">
  250. <div class="tab-content">
  251.  
  252. <!-- tab one : thoughts -->
  253. <div class="tab-pane fade active show" id="thoughts2">
  254. <div class="col-12 container mb-2 text-uppercase font-weight-bold" style="color:#fff;font-size:20px">
  255. <div class="text-center">Dogaressa's Thoughts</div></div>
  256. <div class="p-3 overflow-auto text-justify" style="color:#fff;height:230px">
  257. <p>"put your character's thoughts here! this box scrolls. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."</p>
  258. </div>
  259. </div>
  260. <!-- end tab one -->
  261.  
  262. <!-- tab two : trivia -->
  263. <div class="tab-pane fade" id="trivia2">
  264. <div class="col-12 container mb-2 text-uppercase font-weight-bold" style="color:#fff;font-size:20px">
  265. <div class="text-center">Trivia</div></div>
  266. <div class="p-3 overflow-auto" style="color:#fff;height:230px">
  267. <ul class="fa-ul">
  268. <li><i class="fas fa-caret-right"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</li>
  269. <li><i class="fas fa-caret-right"></i> Tempor incididunt ut labore et dolore magna aliqua.</li>
  270. <li><i class="fas fa-caret-right"></i> Ut enim ad minim veniam, quis nostrud exercitation ullamco.</li>
  271. <li><i class="fas fa-caret-right"></i> Laboris nisi ut aliquip ex ea commodo consequat.</li>
  272. </ul>
  273. </div>
  274. </div>
  275. <!-- end tab two -->
  276.  
  277. <!-- tab three : stats -->
  278. <div class="tab-pane fade" id="stats2">
  279. <div class="col-12 container mb-2 text-uppercase font-weight-bold" style="color:#fff;font-size:20px">
  280. <div class="text-center">Stats</div></div>
  281. <div class="p-3 overflow-auto" style="color:#fff;height:230px">
  282.  
  283. <!-- stat two -->
  284. <p class="text-center" style="margin:15px; margin-top:0px; margin-bottom:0px;">
  285. Pys. Intimacy
  286. </p>
  287. <div class="progress" style="margin-left:15px; margin-right:15px; height:5px;background-color:#222"><div class="progress-bar" style="background-color:#F77B34;width:
  288. 50%;">
  289. </div></div>
  290. <div class="my-2"></div>
  291.  
  292. <!-- stat two -->
  293. <p class="text-center" style="margin:15px; margin-top:0px; margin-bottom:0px;">
  294. Emo. Intimacy
  295. </p>
  296. <div class="progress" style="margin-left:15px; margin-right:15px; height:5px;background-color:#222"><div class="progress-bar" style="background-color:#F77B34;width:
  297. 50%;">
  298. </div></div>
  299. <div class="my-2"></div>
  300.  
  301. <!-- stat three -->
  302. <p class="text-center" style="margin:15px; margin-top:0px; margin-bottom:0px;">
  303. Honesty
  304. </p>
  305. <div class="progress" style="margin-left:15px; margin-right:15px; height:5px;background-color:#222"><div class="progress-bar" style="background-color:#F77B34;width:
  306. 50%;">
  307. </div></div>
  308. <div class="my-2"></div>
  309.  
  310. <!-- stat four -->
  311. <p class="text-center" style="margin:15px; margin-top:0px; margin-bottom:0px;">
  312. Communication
  313. </p>
  314. <div class="progress" style="margin-left:15px; margin-right:15px; height:5px;background-color:#222"><div class="progress-bar" style="background-color:#F77B34;width:
  315. 50%;">
  316. </div></div>
  317. <div class="my-2"></div>
  318.  
  319. <!-- stat five -->
  320. <p class="text-center" style="margin:15px; margin-top:0px; margin-bottom:0px;">
  321. Trust
  322. </p>
  323. <div class="progress" style="margin-left:15px; margin-right:15px; height:5px;background-color:#222"><div class="progress-bar" style="background-color:#F77B34;width:
  324. 50%;">
  325. </div></div>
  326. <div class="my-2"></div>
  327.  
  328.  
  329. </div>
  330. </div>
  331. <!-- end tab three -->
  332. </div>
  333. </div>
  334. <!-- end content box 3 -->
  335.  
  336. <!-- image 2 -->
  337. <div class="col-sm-6 my-2 container align-items-center" style="background:url(https://pbs.twimg.com/media/CjUcadpWsAIFgvz.jpg) no-repeat center;background-size:cover;height:300px;"></div>
  338.  
  339. <!-- buttons 2 -->
  340. <div class="col-6 container align-items-center">
  341. <div class="row no-gutters">
  342. <ul class="nav text-center row no-gutters justify-content-center">
  343. <li class="p-2 ml-3" style="background-color:#000;height:50px;border: 3px solid #F77B34">
  344. <a class="active px-1 py-0" style="color:#fff" data-toggle="tab" href="#thoughts2"><i class="far fa-comment-dots fa-fw fa-2x"></i></a>
  345. </li>
  346. <li class="p-2 ml-4" style="background-color:#000;height:50px;border: 3px solid #F77B34">
  347. <a class="px-1 py-0" style="color:#fff" data-toggle="tab" href="#trivia2"><i class="far fa-star fa-fw fa-2x"></i></a>
  348. </li>
  349. <li class="p-2 ml-4" style="background-color:#000;height:50px;border: 3px solid #F77B34">
  350. <a class="px-1 py-0" style="color:#fff" data-toggle="tab" href="#stats2"><i class="far fa-chart-bar fa-fw fa-2x"></i></a>
  351. </li>
  352. </ul>
  353. </div>
  354. </div>
  355.  
  356. <!-- quote 2 -->
  357. <div class="col-6 p-3 container text-uppercase font-weight-bold" style="background-color:#000;height:50px;color:#fff;font-size:15px;">
  358. <div class="text-center">
  359. " He means me. "
  360. </div>
  361. </div>
  362.  
  363. </div>
  364. </div>
  365. <!-- credit / DO NOT REMOVE -->
  366.  
  367. <h3 class="text-uppercase my-1" style="color:#F77B34;font-size:12px;letter-spacing:3px;" align="right">
  368. <a href="/HTMLobster"><span data-toggle="tooltip" title="timeline code by HTMLobster"><i class="far fa-heart fa-sm" style="color:#F77B34;"></i></span></a> |
  369. <a href="/cherubix"><span data-toggle="tooltip" title="code by cherubix"><i class="fas fa-heart fa-sm" style="color:#F77B34;"></i></span></a>
  370.  
  371. </h3>
  372. </div>
Add Comment
Please, Sign In to add comment
Public Pastes
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!