API tools faq
paste
Advertisement
caticooties

pounce (imgs) code

caticooties
Jun 25th, 2021
43
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.29 KB | None | 0 0
raw download clone embed print report
  1. <!---
  2.  
  3. POUNCE (IMGS) / by cati/dogboy
  4.  
  5. NOTES
  6. accent: #FFF
  7. (use ctrl+f + replace for accent replacement)
  8. mobile friendly! ✔✔✔
  9.  
  10. RULES & DISCLAIMERS
  11. - fav/comment if using pls!
  12. - not wysiwyg friendly so please turn that off!
  13. - feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
  14. - have a nice day!!
  15.  
  16. --->
  17.  
  18. <div class="container" style="max-width:800px;background:none;">
  19. <div class="row">
  20. <div class="col-lg-3">
  21. <!--- focus image --->
  22. <div class="card my-2" style="background:url('https://pbs.twimg.com/media/Etw8FLDVIAIu_qu?format=jpg&name=small');height:380px;background-size:cover;background-position:center;border-radius:20px;"></div>
  23. <!--- info --->
  24. <div class="row no-gutters">
  25. <div class="col-6">
  26. <div class="card" style="background:url('https://images.unsplash.com/photo-1524678714210-9917a6c619c2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1049&q=80');background-position:center;background-size:cover;height:100px;border:0px;border-radius:20px 0px 0px 0px;">
  27. <span data-toggle="tooltip" title="AGE/BIRTHDAY" class="mx-auto my-auto"><i class="far fa-calendar-alt" style="font-size:35px;color:#FFF;"></i></span>
  28. </div>
  29. </div>
  30. <div class="col-6">
  31. <div class="card" style="background:url('https://images.unsplash.com/photo-1542662565-7e4b66bae529?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=282&q=80');background-position:center;background-size:cover;height:100px;border:0px;border-radius:0px 20px 0px 0px;">
  32. <span data-toggle="tooltip" title="HEIGHT" class="mx-auto my-auto"><i class="far fa-ruler" style="font-size:35px;color:#FFF;"></i></span>
  33. </div>
  34. </div>
  35. </div>
  36. <div class="row no-gutters">
  37. <div class="col-6">
  38. <div class="card" style="background:url('https://images.unsplash.com/photo-1556905055-8f358a7a47b2?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80');background-position:center;background-size:cover;height:100px;border:0px;border-radius:0px 0px 0px 20px;">
  39. <span data-toggle="tooltip" title="GENDER/PROUNOUNS" class="mx-auto my-auto"><i class="far fa-venus-mars" style="font-size:35px;color:#FFF;"></i></span>
  40. </div>
  41. </div>
  42. <div class="col-6">
  43. <div class="card" style="background:url('https://images.unsplash.com/photo-1561414927-6d86591d0c4f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=966&q=80');background-position:center;background-size:cover;height:100px;border:0px;border-radius:0px 0px 20px 0px;">
  44. <span data-toggle="tooltip" title="VALUE" class="mx-auto my-auto"><i class="far fa-dollar-sign" style="font-size:35px;color:#FFF;"></i></span>
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. <div class="col-lg-9">
  50. <!--- intro --->
  51. <div class="card m-2" style="background:url('https://images.unsplash.com/photo-1610135206707-0f03e4800631?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80');background-size:cover;background-position:center;border-radius:20px;">
  52. <div class="card m-2 p-4 text-center" style="height:220px;font-size:12px;border-radius:20px;letter-spacing:0.06em;opacity:90%;overflow:auto;">
  53. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate est ex, et ullamcorper lectus facilisis ac. Nam posuere dapibus leo, ac dignissim arcu sodales eu. Nunc maximus aliquet ipsum, in blandit turpis consectetur eget. Nam non ante eu lacus luctus vestibulum ut vel lorem.
  54. <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate est ex, et ullamcorper lectus facilisis ac. Nam posuere dapibus leo, ac dignissim arcu sodales eu. Nunc maximus aliquet ipsum, in blandit turpis consectetur eget. Nam non ante eu lacus luctus vestibulum ut vel lorem. Donec ac scelerisque arcu, et dictum felis.
  55. </div>
  56. </div>
  57. <!--- quote --->
  58. <div class="card mx-2" style="background:url('https://images.unsplash.com/photo-1513151233558-d860c5398176?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80');background-size:cover;background-position:center;border-radius:20px;height:60px;">
  59. <p class="text-center font-italic my-auto" style="letter-spacing:1px;color:#FFF;font-size:21px;font-weight:300;">
  60. <i class="fas fa-quote-left" style="color:#FFF" />
  61. Quote here!
  62. <i class="fas fa-quote-right" style="color:#FFF" /></p>
  63. </div>
  64. <div class="row no-gutters">
  65. <div class="col-lg-9">
  66. <div class="card m-2" style="background:url('https://images.unsplash.com/photo-1610135206707-0f03e4800631?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80');background-size:cover;background-position:center;border-radius:20px;">
  67. <!--- history/personality/etc --->
  68. <div class="card m-2 py-3 px-2 p-3" style="height:255px;font-size:12px;border-radius:20px;letter-spacing:0.06em;opacity:90%;overflow:auto;">
  69. <b class="text-center" style="font-size:14px;">BACKSTORY</b>
  70. <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate est ex, et ullamcorper lectus facilisis ac. Nam posuere dapibus leo, ac dignissim arcu sodales eu. Nunc maximus aliquet ipsum, in blandit turpis consectetur eget. Nam non ante eu lacus luctus vestibulum ut vel lorem. Donec ac scelerisque arcu, et dictum felis. Morbi imperdiet justo vitae purus lacinia, vitae gravida risus sodales. Nullam mollis sem justo, in commodo lectus mollis et. Nullam tincidunt rutrum varius. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec placerat dui a volutpat vestibulum.
  71. <br><br>Sed porta quis lacus et sodales. Vestibulum vehicula tortor ex, vitae convallis diam luctus sed. Suspendisse risus diam, lobortis ut malesuada non, gravida quis orci. Nulla interdum ipsum eu fringilla feugiat. Nullam accumsan feugiat mi ac tincidunt. Etiam accumsan enim erat, nec gravida turpis venenatis sit amet.</p>
  72. </div>
  73. </div>
  74. </div>
  75. <div class="col-lg-3">
  76. <div class="card m-2" style="background:url('https://images.unsplash.com/photo-1513151233558-d860c5398176?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80');height:125px;background-size:cover;background-position:center;border-radius:20px;">
  77. <!--- music player, replace the "URLHERE" with the ending code of any youtube video you'd like --->
  78. <span class="mx-auto my-auto"><iframe class="flex-fill" style="height:3em;width:3em;opacity:0;position:absolute;z-index:1;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
  79. src="https://www.youtube.com/embed/URLHERE"></iframe><i class="far fa-play-circle fa-4x" style="color:#FFF;"></i></span>
  80. </div>
  81. <!--- stamps --->
  82. <img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2497c61b-f0f3-4c79-9511-4f94b4fb8ff1/dd0e67b-c41175d2-ce7e-4020-a119-115e91a7a526.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvMjQ5N2M2MWItZjBmMy00Yzc5LTk1MTEtNGY5NGI0ZmI4ZmYxXC9kZDBlNjdiLWM0MTE3NWQyLWNlN2UtNDAyMC1hMTE5LTExNWU5MWE3YTUyNi5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.frude1I5ufVdT4P_ZE2rBSNJdW4GoBIVHRNltL-OYp0" class="mx-auto d-flex hidden-sm-down">
  83. <img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2497c61b-f0f3-4c79-9511-4f94b4fb8ff1/dd0e67b-c41175d2-ce7e-4020-a119-115e91a7a526.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvMjQ5N2M2MWItZjBmMy00Yzc5LTk1MTEtNGY5NGI0ZmI4ZmYxXC9kZDBlNjdiLWM0MTE3NWQyLWNlN2UtNDAyMC1hMTE5LTExNWU5MWE3YTUyNi5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.frude1I5ufVdT4P_ZE2rBSNJdW4GoBIVHRNltL-OYp0" class="mx-auto d-flex mt-2 hidden-sm-down">
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. <!--- credits, dont remove pls! --->
  89. <div class="text-center text-muted" style="font-size:0.7em;letter-spacing:10px;">
  90. <a href="URLHERE" class="text-muted"><span data-toggle="tooltip" title="background images by [ARTIST]"><i class="fas fa-image"></i></span></a> /
  91. <a href="9939051" class="text-muted"><span data-toggle="tooltip" title="code by cati"><i class="fad fa-rainbow"></i></span></a>
  92. </div>
  93. </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!