caticooties

pomf folder (bs) code

Jan 8th, 2021 (edited)
59
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.47 KB | None | 0 0
  1. <!---
  2.  
  3. POMF FOLDER (BS) / by cati/dogboy
  4.  
  5. NOTES
  6. mobile friendly + bootstrap colors! βœ”βœ”βœ”
  7.  
  8. RULES & DISCLAIMERS
  9. - fav/comment if using pls!
  10. - not wysiwyg friendly so please turn that off!
  11. - feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
  12. - have a nice day!!
  13.  
  14. --->
  15.  
  16. <div class="container" style="background:none;max-width:1030px;margin:70px auto;">
  17. <div class="row">
  18. <!--- info column --->
  19. <div class="col-lg-8 p-2">
  20. <div class="card h-100 bg-primary" style="border:0px;">
  21. <div class="card p-2" style="background:#FFF;margin:13px;border-radius:0px;">
  22. <div class="d-flex justify-content-between">
  23. <i class="fas fa-star fa-3x text-secondary"></i>
  24. <!--- name --->
  25. <h1 class="my-auto text-secondary" style="font-weight:500;letter-spacing:0.09em;font-size:25px;">
  26. FOLDER TITLE
  27. </h1>
  28. <i class="fas fa-star fa-3x text-secondary"></i>
  29. </div>
  30. </div>
  31. <div class="card p-3" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;height:200px;overflow:auto;">
  32. <!--- intro --->
  33. <p class="text-center text-secondary" style="font-weight:350;">
  34. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo.
  35. </p>
  36. </div>
  37. <div class="card p-2" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;height:200px;overflow:auto;">
  38. <!--- characters --->
  39. <div class="row no-gutters justify-content-center">
  40. <div class="col-3 text-center">
  41. <h3 class="font-italic" style="letter-spacing:1px;font-weight:400;"><a href="URLHERE">Name</a></h3>
  42. <img class="fr-rounded" style="width:130px;border:4px solid;" src="https://64.media.tumblr.com/381f7a94234b22369a52873047e8bf25/tumblr_ok5c98Ibxl1qjkre8o1_250.png">
  43. </div>
  44. <div class="col-3 text-center">
  45. <h3 class="font-italic" style="letter-spacing:1px;font-weight:400;"><a href="URLHERE">Name</a></h3>
  46. <img class="fr-rounded" style="width:130px;border:4px solid;" src="https://64.media.tumblr.com/381f7a94234b22369a52873047e8bf25/tumblr_ok5c98Ibxl1qjkre8o1_250.png">
  47. </div>
  48. <div class="col-3 text-center">
  49. <h3 class="font-italic" style="letter-spacing:1px;font-weight:400;"><a href="URLHERE">Name</a></h3>
  50. <img class="fr-rounded" style="width:130px;border:4px solid;" src="https://64.media.tumblr.com/381f7a94234b22369a52873047e8bf25/tumblr_ok5c98Ibxl1qjkre8o1_250.png">
  51. </div>
  52. <div class="col-3 text-center">
  53. <h3 class="font-italic" style="letter-spacing:1px;font-weight:400;"><a href="URLHERE">Name</a></h3>
  54. <img class="fr-rounded" style="width:130px;border:4px solid;" src="https://64.media.tumblr.com/381f7a94234b22369a52873047e8bf25/tumblr_ok5c98Ibxl1qjkre8o1_250.png">
  55. </div>
  56. </div>
  57. <div class="row no-gutters mt-2 justify-content-center">
  58. <div class="col-3 text-center">
  59. <h3 class="font-italic" style="letter-spacing:1px;font-weight:400;"><a href="URLHERE">Name</a></h3>
  60. <img class="fr-rounded" style="width:130px;border:4px solid;" src="https://64.media.tumblr.com/381f7a94234b22369a52873047e8bf25/tumblr_ok5c98Ibxl1qjkre8o1_250.png">
  61. </div>
  62. <div class="col-3 text-center">
  63. <h3 class="font-italic" style="letter-spacing:1px;font-weight:400;"><a href="URLHERE">Name</a></h3>
  64. <img class="fr-rounded" style="width:130px;border:4px solid;" src="https://64.media.tumblr.com/381f7a94234b22369a52873047e8bf25/tumblr_ok5c98Ibxl1qjkre8o1_250.png">
  65. </div>
  66. <div class="col-3 text-center">
  67. <h3 class="font-italic" style="letter-spacing:1px;font-weight:400;"><a href="URLHERE">Name</a></h3>
  68. <img class="fr-rounded" style="width:130px;border:4px solid;" src="https://64.media.tumblr.com/381f7a94234b22369a52873047e8bf25/tumblr_ok5c98Ibxl1qjkre8o1_250.png">
  69. </div>
  70. <div class="col-3 text-center">
  71. <h3 class="font-italic" style="letter-spacing:1px;font-weight:400;"><a href="URLHERE">Name</a></h3>
  72. <img class="fr-rounded" style="width:130px;border:4px solid;" src="https://64.media.tumblr.com/381f7a94234b22369a52873047e8bf25/tumblr_ok5c98Ibxl1qjkre8o1_250.png">
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. <div class="col-lg-4 p-2">
  79. <div class="card h-100 hidden-sm-down bg-primary" style="border:0px;">
  80. <!--- image --->
  81. <div class="card h-100 m-3" style="background:url('https://www.downvids.net/video/bestimages/img-denzerosubs-honeyworks-ft-narumi-sena-cv-amamiya-sora-310.jpg');background-size:cover;background-position:center;"></div>
  82. </div>
  83. </div>
  84. </div>
  85. <!--- credit, dont remove pls! --->
  86. <a class="d-block text-muted text-right mr-2" href="9474647" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
  87. </div>
  88.  
Add Comment
Please, Sign In to add comment