caticooties

junky night code

Oct 13th, 2020 (edited)
190
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.18 KB | None | 0 0
  1. <!---
  2.  
  3. JUNKY NIGHT / by cati/dogboy
  4.  
  5. NOTES
  6. accent: #9437CE
  7. fontawesome icon: fas fa-capsules
  8. (use ctrl+f + replace for accent/icon replacement)
  9. mobile friendly + custom colors! ✔✔✔
  10.  
  11. RULES & DISCLAIMERS
  12. - fav/comment if using pls!
  13. - not wysiwyg friendly so please turn that off!
  14. - feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
  15. - have a nice day!!
  16.  
  17. --->
  18.  
  19. <div class="container-fluid shadow-sm" style="background:url(https://64.media.tumblr.com/e405e647203d9a98a59aea9935515f65/tumblr_inline_ml2ghv3pVP1rfdbtm.gif) repeat fixed;padding:20px;border-radius:10px;max-width:800px;margin:30px auto 5px;">
  20. <div class="row no-gutters">
  21. <div class="col-md-3 p-2">
  22. <div class="my-2 collapse" id="more">
  23. <div class="card my-2 shadow-sm" style="height:250px;border-radius:20px;border:2px solid #9437CE;overflow:auto;">
  24. <!--- first toggle image --->
  25. <center><div class="card rounded-circle" style="background: url(https://64.media.tumblr.com/4827c8bef7cd692416fc6ca2f0837600/e068d9475c3cba32-d1/s250x400/58b89cc7f282fd4e7b431248a2156ecb94a67b54.png); background-size:cover;background-position:center;height:110px;width:110px;border:4px double #9437CE;margin-top:10px;"></div></center>
  26. <div class="p-2 my-1">
  27. <div class="accordion" id="accordionExample">
  28. <!--- first toggle information --->
  29. <div class="card mt-1 px-3" style="border-radius:20px;background-color:#9437CE;" id="name">
  30. <a data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" style="color:#FFFFFF;">
  31. <h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:13px;letter-spacing:2px;" align="center">name</h3>
  32. </a></div>
  33. </div>
  34. <div id="collapseOne" class="collapse" aria-labelledby="name" data-parent="#accordionExample">
  35. <div align="center"><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
  36. </div>
  37.  
  38. <div class="card mt-1 px-3" style="border-radius:20px;background-color:#9437CE;" id="gender">
  39. <a data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="color:#FFFFFF;">
  40. <h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:13px;letter-spacing:2px;" align="center">gender</h3>
  41. </a></div>
  42.  
  43. <div id="collapseTwo" class="collapse" aria-labelledby="gender" data-parent="#accordionExample">
  44. <div align="center"><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
  45. </div>
  46.  
  47. <div class="card mt-1 px-3" style="border-radius:20px;background-color:#9437CE;" id="height">
  48. <a data-toggle="collapse" data-target="#collapseThree" aria-expanded="all" aria-controls="collapseThree" style="color:#FFFFFF;">
  49. <h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:13px;letter-spacing:2px;" align="center">height</h3>
  50. </a></div>
  51.  
  52. <div id="collapseThree" class="collapse" aria-labelledby="height" data-parent="#accordionExample">
  53. <div align="center"><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
  54. </div>
  55.  
  56. <div class="card mt-1 px-3" style="border-radius:20px;background-color:#9437CE;" id="specie">
  57. <a data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour" style="color:#FFFFFF;">
  58. <h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:13px;letter-spacing:2px;" align="center">specie</h3>
  59. </a></div>
  60.  
  61. <div id="collapseFour" class="collapse" aria-labelledby="specie" data-parent="#accordionExample">
  62. <div align="center"><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
  63. </div>
  64.  
  65. <div class="card mt-1 px-3" style="border-radius:20px;background-color:#9437CE;" id="status">
  66. <a data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive" style="color:#FFFFFF;">
  67. <h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:13px;letter-spacing:2px;" align="center">status</h3>
  68. </a></div>
  69.  
  70. <div id="collapseFive" class="collapse" aria-labelledby="status" data-parent="#accordionExample">
  71. <div align="center"><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
  72. </div>
  73.  
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. <div class="col-md-6 p-2">
  79. <div class="justify-content-center">
  80. <!--- main image --->
  81. <div class="card my-2" style="background: url(https://originalnews.nico/wp-content/uploads/2020/08/07233759/985e4076cb66dda5bc290ca460cc3365.gif); background-size:cover;background-position:center;width:362px;height:155px;border-radius:10px;border:0px;border:2px solid #9437CE;">
  82. </div>
  83. </div>
  84. <div class="justify-content-center">
  85. <div class="card mt-1 px-3" style="border-radius:30px;background-color:#9437CE;height:40px;color:#FFFFFF;">
  86. <!--- first button --->
  87. <a data-toggle="collapse" href="#more" style="color:#FFFFFF;"><h3 class="text-uppercase p-1 mt-2" style="font-size:15px;letter-spacing:3px;" align="center">are you ready?</h3> </a></div>
  88. </div>
  89. <div class="justify-content-center">
  90. <div class="card mt-2 p-2" style="border-radius:30px;background-color:#9437CE;height:40px;color:#FFFFFF;">
  91. <!--- second button --->
  92. <a data-toggle="collapse" href="#more2" style="color:#FFFFFF;"><h3 class="text-uppercase p-1" style="font-size:15px;letter-spacing:3px;" align="center">junky night!</h3> </a></div>
  93. </div>
  94. </div>
  95. <div class="col-md-3 p-2">
  96. <div class="my-2 collapse" id="more2">
  97. <div class="card my-2 shadow-sm" style="height:250px;border-radius:20px;border:2px solid #9437CE;overflow:auto;">
  98. <!--- second toggle icon --->
  99. <center><div class="card rounded-circle" style="background: url(https://pbs.twimg.com/media/EZcokk7WkAEE519.png); background-size:cover;background-position:center;height:110px;width:110px;border:4px double #9437CE;margin-top:10px;"></div></center>
  100. <!--- excerpt --->
  101. <p class="text-center p-3 font-italic" style="color:#9437CE;font-size:0.8em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. </p>
  102. <!--- color palette --->
  103. <div class="justify-content-center" style="font-size:20px;padding-bottom:10%;">
  104. <i class="fas fa-capsules" style="color: #B93A5A;"></i>
  105. <i class="fas fa-capsules ml-2" style="color: #D7A6AD;"></i>
  106. <i class="fas fa-capsules ml-2" style="color: #9437CE;"></i>
  107. <i class="fas fa-capsules ml-2" style="color: #FF64B3;"></i>
  108. <i class="fas fa-capsules ml-2" style="color: #4C8696;"></i></div>
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. <!--- credit, dont remove pls! --->
  115. <a class="d-block text-muted text-center" href="https://toyhou.se/8511837.junky-night-f2u-html" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
Add Comment
Please, Sign In to add comment