API tools faq
paste
Advertisement
LeafJelly

Simple Sky Code: Blue Day, Short

LeafJelly
Oct 26th, 2022 (edited)
764
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.88 KB | None | 0 0
raw download clone embed print report
  1. <!------------------------
  2. Free to Use Simple Sky Code: Blue Day
  3. SHORT VERSION
  4. by LeafJelly
  5.  
  6. Stars & sun: #F5FEFF #C0E8FF
  7. Font: #EBF8FF
  8. Font Accent: #C7ECFF
  9. Sky Gradient (top down): #595EDB, #6B90F9, #7FC6FF, #A9E2FF
  10. Clouds: #A9E2FF
  11. Content Box: #B82A35
  12. ------------------------>
  13.  
  14. <div class="col-12 col-lg-4 mb-5" style="margin:auto;max-width:500px;">
  15. <div class="col-12 pt-3" style="border-radius: 5px 5px 0px 0px;height:90px;background-image: linear-gradient(180deg, #595EDB,#595EDB, #6B90F9, #7FC6FF, #A9E2FF); color:#F5FEFF">
  16. <!--------Decorations on Top ------>
  17. <i class="fa-solid fa-sun fa-3x" style="position:absolute; margin:10px;"></i>
  18. <i class="fa-solid fa-cloud fa-lg" style="position:absolute; margin:10px 60px"></i>
  19. <i class="fa-solid fa-cloud fa-2x" style="position:absolute; margin:40px -10px; color:#C0E8FF"></i>
  20. <i class="fa-solid fa-cloud fa-2x" style="position:absolute;margin:35px 116px"></i>
  21. <i class="fa-solid fa-cloud fa-lg" style="position:absolute; margin:10px 170px; color:#C0E8FF"></i>
  22. <i class="fa-solid fa-cloud" style="position:absolute; margin:40px 220px"></i>
  23. <div class="col-12 bg-transparent text-right">
  24. <i class="fa-solid fa-cloud fa-2x" style="position:absolute;margin:35px -170px"></i>
  25. <i class="fa-solid fa-cloud fa-2x" style="position:absolute;margin:17px -147px; color:#C0E8FF"></i>
  26. <i class="fa-solid fa-cloud fa-lg" style="position:absolute; ; margin:20px -50px"></i>
  27. <i class="fa-solid fa-cloud" style="position:absolute;margin:10px 0px; color:#C0E8FF"></i>
  28. </div>
  29. </div>
  30.  
  31. <!------------- Content Box ---------------->
  32.  
  33. <div class="col-12 p-2" style="height:300px; overflow:hidden; background:#A9E2FF; color:#EBF8FF;">
  34. <div class="card col-12 pt-1" style="background:#6B90F9; min-height:280px">
  35. <div class="row no-gutters">
  36. <!-----Left------->
  37. <div class="col-12 col-md-6 col-lg-6 pr-2 align-items-center " style="font-variant:small-caps; margin:auto; font-weight:200; word-break:none">
  38. <div class="row no-gutters">
  39. <div class="col-4 align-items-center" style="font-weight:400; color:#C7ECFF"><p>
  40. Name</p></div>
  41. <div class="col-8 text-right mb-1"><p>
  42. First Name Last Name</p></div>
  43.  
  44. <div class="col-4 align-items-center" style="font-weight:400; color:#C7ECFF"><p>
  45. Gender</p></div>
  46. <div class="col-8 text-right mb-1"><p>
  47. Content</p></div>
  48.  
  49. <div class="col-4 align-items-center" style="font-weight:400; color:#C7ECFF"><p>
  50. Height</p></div>
  51. <div class="col-8 text-right mb-1"><p>
  52. 6' 0" (182.88cm)</p></div>
  53.  
  54. <div class="col-5 align-items-center" style="font-weight:400; color:#C7ECFF"><p>
  55. Occupation</p></div>
  56. <div class="col-7 text-right mb-1"><p>
  57. Content Content</p></div>
  58. </div>
  59.  
  60. <!------Copy and Paste above here for extra rows------->
  61. </div>
  62.  
  63. <!-----Right------>
  64. <div class="col-12 col-md-6 col-lg-6 pl-2" style="font-variant:small-caps; margin:auto; font-weight:200; word-break:none">
  65. <div class="row no-gutters">
  66. <div class="col-4 align-items-center" style="font-weight:400; color:#C7ECFF"><p>
  67. Age</p></div>
  68. <div class="col-8 text-right mb-1"><p>
  69. # years</p></div>
  70.  
  71. <div class="col-5 align-items-center" style="font-weight:400; color:#C7ECFF"><p>
  72. Pronouns</p></div>
  73. <div class="col-7 text-right mb-1"><p>
  74. They/Them It/It's</p></div>
  75.  
  76. <div class="col-3 align-items-center" style="font-weight:400; color:#C7ECFF"><p>
  77. Species</p></div>
  78. <div class="col-9 text-right mb-1"><p>
  79. Or Race, Content</p></div>
  80.  
  81. <div class="col-4 align-items-center" style="font-weight:400; color:#C7ECFF"><p>
  82. Worth</p></div>
  83. <div class="col-8 text-right mb-1"><p>
  84. $$$</p></div>
  85.  
  86. <!------Copy and Paste above here for extra rows------->
  87. </div>
  88. </div>
  89.  
  90. <!--------Mood Board Replace the URLS ------------>
  91. <div class="col-12 my-2">
  92. <div class="row no-gutters">
  93. <div class="col-4 pr-1 border-0" style="height:140px">
  94. <div class="h-100" style="background-position:center;background-size:cover;
  95. background-image:url(
  96.  
  97. https://animesher.com/orig/0/51/519/5190/animesher.com_gif-anime-scenery-sky-519088.gif
  98.  
  99. )"></div>
  100. </div>
  101.  
  102. <div class="col-4 pr-1 border-0" style="height:140px">
  103. <div class="h-100" style="background-position:center;background-size:cover;
  104. background-image:url(
  105.  
  106. https://media.tenor.com/p9rM1YuNFkMAAAAC/anime-sky.gif
  107.  
  108. )"></div>
  109. </div>
  110.  
  111. <div class="col-4 pr-1 border-0" style="height:140px">
  112. <div class="h-100" style="background-position:center;background-size:cover;
  113. background-image:url(
  114.  
  115. https://i.gifer.com/HVDs.gif
  116.  
  117. )"></div>
  118. </div>
  119. </div>
  120. </div>
  121.  
  122.  
  123. </div>
  124. </div>
  125. </div>
  126.  
  127.  
  128.  
  129. <div class="col-12 text-center" style="color:#A9E2FF">
  130. <!------Clouds------->
  131. <i class="fa-solid fa-cloud" style="font-size:100px;position:absolute; margin:-60px -260px;"></i>
  132. <i class="fa-solid fa-cloud" style="font-size:80px;position:absolute; margin:-60px -300px;"></i>
  133. <i class="fa-solid fa-cloud" style="font-size:80px;position:absolute; margin:-42px -160px;"></i>
  134.  
  135. <i class="fa-solid fa-cloud" style="font-size:80px;position:absolute; margin:-40px 130px;"></i>
  136. <i class="fa-solid fa-cloud" style="font-size:100px;position:absolute; margin:-80px 180px;"></i>
  137.  
  138. <!--------Pagedoll must be a transparent png, your image can be square or vertical.
  139. Change the min-height if you have a very long image
  140.  
  141. You can remove this section if you don't want it cuz it does cover some of the content box
  142. ---------->
  143. <div class="col-7 col-lg-12" style="position:absolute;margin:-320px 350px; background-position:bottom right; background-size:contain; background-repeat:no-repeat;height:350px; width:300px;
  144. background-image:url(
  145.  
  146. https://static.tvtropes.org/pmwiki/pub/images/hatsune_miku_full.png
  147.  
  148. )"> </div>
  149.  
  150. <!----Credit do not remove---->
  151. <a href="https://toyhou.se/LeafJelly" title="HTML by LeafJelly"><i class="fa-solid fa-sun" style="color:#A9E2FF"></i></a>
  152. </div>
  153.  
  154. </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!