API tools faq
paste
Advertisement
caticooties

be around me (cc) code

caticooties
Jan 6th, 2021
54
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.02 KB | None | 0 0
raw download clone embed print report
  1. <!---
  2.  
  3. BE AROUND ME (CC) / by cati/dogboy
  4.  
  5. NOTES
  6. duo color: #AA7CB2
  7. character 1 color: #B27C84
  8. character 2 color: #7CB2AA
  9. mobile friendly + custom colors! ✔✔✔
  10.  
  11. RULES & DISCLAIMERS
  12. - fav/comment if using pls!
  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="background:none;max-width:900px;padding:10px 40px 0px;margin:30px auto 5px;">
  19. <div class="row">
  20. <!--- first column --->
  21. <div class="col-lg-4 p-2">
  22. <!--- main image --->
  23. <div class="card p-3" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/28851169_oW6DqT0NfDvCNXz.png');background-size:cover;background-position:center;border-radius:25px;border:0px;box-shadow:1px 1px 6px #000000;height:455px;">
  24. </div>
  25. <!--- title card --->
  26. <div class="card py-2 px-4 mt-3" style="background-color:#AA7CB2;border-radius:0px;border:0px;border-radius:15px;box-shadow:1px 1px 6px #000000;">
  27. <a href="URLHERE" class="text-uppercase" style="color:#FFF;"><h3 style="font-weight:300;">TITLE</h3></a>
  28. <span class="font-italic text-center p-2" style="color:#FFF;letter-spacing:10px;">and</span>
  29. <a href="URLHERE" class="text-uppercase" style="color:#FFF;"><h3 style="font-weight:300;" align="right">TITLE</h3></a>
  30. </div>
  31. <!--- hearts --->
  32. <p class="mt-3 justify-content-center">
  33. <i class="far fa-heart" style="font-size:40px;color:#7CB2AA"></i><i class="fas fa-heart mx-1" style="font-size:40px;color:#B27C84"></i><i class="far fa-heart" style="font-size:40px;color:#7CB2AA"></i><i class="fas fa-heart mx-1" style="font-size:40px;color:#B27C84"></i><i class="far fa-heart" style="font-size:40px;color:#7CB2AA"></i>
  34. </p>
  35. </div>
  36. <!--- second column --->
  37. <div class="col-lg-8 p-2">
  38. <!--- quote box --->
  39. <div class="card py-3 px-5" style="background-color:#AA7CB2;border-radius:0px;border:0px;border-radius:25px;box-shadow:1px 1px 6px #000000;">
  40. <span class="font-italic" style="color:#FFFFFF;font-size:20px;letter-spacing:2px;font-weight:300;"><i class="fas fa-quote-left" style="color:#FFFFFF" />short quote from character 1</span>
  41. <span class="font-italic text-right" style="color:#FFFFFF;font-size:20px;letter-spacing:2px;font-weight:300;">response quote from character 2 <i class="fas fa-quote-right" style="color:#FFFFFF" /></span>
  42. </div>
  43. <!--- character 1 --->
  44. <div class="row no-gutters mt-3">
  45. <div class="col-lg-3">
  46. <!--- icon --->
  47. <img class="fr-rounded mx-auto d-flex" style="border:solid 5px #B27C84;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/28269824_lZt.png">
  48. </div>
  49. <div class="col-lg-9 my-auto p-3">
  50. <!--- character 1 thoughts --->
  51. <div class="card p-2" style="background-color:#B27C84;border-radius:0px;border:0px;border-radius:25px;box-shadow:1px 1px 6px #000000;">
  52. <p class="m-2 text-center" style="color:#FFF;font-size:12px;"><i class="m-1 fa-lg fas fa-quote-left float-left" style="color:#FFF" />This box doesn't scroll, so keep it to 4-5 lines at maximum/ideal. It's supposed to be an anecdotal from the character, when you ask them about the other character!<i class="m-1 fa-lg fas fa-quote-right float-right" style="color:#FFF" /></p>
  53. </div>
  54. </div>
  55. </div>
  56. <div class="row no-gutters mt-3">
  57. <div class="col-lg-9 my-auto p-3">
  58. <!--- character 2 thoughts --->
  59. <div class="card p-2" style="background-color:#7CB2AA;border-radius:0px;border:0px;border-radius:25px;box-shadow:1px 1px 6px #000000;">
  60. <p class="m-2 text-center" style="color:#FFF;font-size:12px;"><i class="m-1 fa-lg fas fa-quote-left float-left" style="color:#FFF" />This box doesn't scroll, so keep it to 4-5 lines at maximum/ideal. It's supposed to be an anecdotal from the character, when you ask them about the other character! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. <i class="m-1 fa-lg fas fa-quote-right float-right" style="color:#FFF" /></p>
  61. </div>
  62. </div>
  63. <div class="col-lg-3">
  64. <!--- icon --->
  65. <img class="fr-rounded mx-auto d-flex" style="border:solid 5px #7CB2AA;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/28836368_UC5.png">
  66. </div>
  67. </div>
  68. <div class="row no-gutters mt-2">
  69. <div class="col-lg-6 p-2">
  70. <!--- relationship description --->
  71. <div class="card p-3" style="background-color:#AA7CB2;border-radius:0px;border:0px;border-radius:25px;box-shadow:1px 1px 6px #000000;">
  72. <p class="text-center" style="color:#FFF;height:158px;overflow:auto;font-size:12px;">A short description about their relationship. Can be about how they met, why they love each other so much, etc. This box scrolls, so you can go ham. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vie. Lorem ipsum dolor sit.</p>
  73. </div>
  74. </div>
  75. <div class="col-lg-6 p-2 my-auto">
  76. <div class="card p-3 text-center" style="background-color:#AA7CB2;border-radius:0px;border:0px;border-radius:25px;box-shadow:1px 1px 6px #000000;">
  77. <!--- music player and playlist, paste the end of a yt link after the "youtube.com/embed/" / credit to Strabi + phasmology for music code ! --->
  78. <span><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-spin fa-3x" style="animation-duration:10s;color:#FFF;"></i></span>
  80. <div class="row mt-2">
  81. <div class="col-12">
  82. <span class="text-uppercase" style="color:#FFFFFF;font-weight:300;letter-spacing:0.05em;font-size:12px;">song name / <i>artist</i></span>
  83. </div>
  84. <div class="col-12">
  85. <span class="text-uppercase" style="color:#FFFFFF;font-weight:300;letter-spacing:0.05em;font-size:12px;">song name / <i>artist</i></span>
  86. </div>
  87. <div class="col-12">
  88. <span class="text-uppercase" style="color:#FFFFFF;font-weight:300;letter-spacing:0.05em;font-size:12px;">song name / <i>artist</i></span>
  89. </div>
  90. <div class="col-12">
  91. <span class="text-uppercase" style="color:#FFFFFF;font-weight:300;letter-spacing:0.05em;font-size:12px;">song name / <i>artist</i></span>
  92. </div>
  93. <div class="col-12">
  94. <span class="text-uppercase" style="color:#FFFFFF;font-weight:300;letter-spacing:0.05em;font-size:12px;">song name / <i>artist</i></span>
  95. </div>
  96. </div>
  97. </div>
  98. </div>
  99. </div>
  100. </div>
  101. </div>
  102. </div>
  103. <!--- credit, dont remove pls! --->
  104. <a class="d-block text-muted text-center" href="9449443" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
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!