API tools faq
paste
DicedOnionsBalions

Scatter

DicedOnionsBalions
Nov 23rd, 2021
157
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.64 KB | None | 0 0
raw download clone embed print report
  1. <div class="container text-dark">
  2. <!--top-->
  3. <div class="row">
  4. <!--NAME/QUOTE-->
  5. <div class="col-12 offset-0 col-lg-6 mb-5">
  6. <!--NAME-->
  7. <div class=" container bg-light px-5 py-3 display-2 text-center mt-5 mr-lg-n5" style="z-index:3; transform:rotate(1deg);box-shadow: 20px 25px 19px -10px rgba(184, 185, 193, 0.30); border-style: outset;">Name Namerson</div>
  8. <!--QUOTE-->
  9. <h1 class="col-12 col-lg-7 bg-light p-3 mt-lg-n3 mt-0 offset" style="z-index:3; transform:rotate(-1deg); box-shadow: 20px 25px 19px -10px rgba(184, 185, 193, 0.30); border-style: outset;">"Quote Quoterson"</h1>
  10. <!--STARSHAPES (USELESS DECORATION, FEEL FREE TO DELETE)-->
  11. <div style="position:absolute; left:3rem; top:1rem; z-index:3;">
  12. <i class="fas fa-star" style="font-size:3.5rem;"></i>
  13. <i class="fas fa-star" style="font-size:1.9rem;"></i>
  14. </div>
  15.  
  16. </div>
  17. <!--IMAGES-->
  18. <div class="col-12 col-lg-6 offset-0 mb-5 mb-lg-0">
  19. <div class="row">
  20. <!--Beeg image-->
  21. <div class="container bg-light ml-lg-n5" style="padding-top:35px; padding-bottom:80px; width:350px; z-index:2; box-shadow: 20px 25px 19px -10px rgba(184, 185, 193, 0.30);border-style: outset;">
  22. <div style="background-image: url('https://cdn.discordapp.com/attachments/894684261171486731/912329179717046312/biggerhtml.png');background-repeat:no-repeat; width: 300px; height:300px;" class="mx-auto"></div>
  23. </div>
  24. <!--Small image-->
  25. <div class="container bg-light mt-auto" style="padding-top:35px; padding-bottom:80px; width:250px; height:300px; transform:rotate(20deg);z-index:-1; position:absolute; top:120px; right:50px; border-style: outset;">
  26. <div style="background-image: url('https://cdn.discordapp.com/attachments/894684261171486731/912329179989692457/smalle.png'); background-repeat:no-repeat; width: 200px; height:200px;" class="mx-auto"></div>
  27. </div>
  28. </div>
  29. </div>
  30. </div>
  31. <!--Bottom-->
  32. <div class="row" style="transform:rotate(-1deg); ">
  33. <div class="col-12 col-lg-7 mt-lg-n5 mt-2 ">
  34. <!--COLOR PALLETE-->
  35. <div>
  36. <!--Col 1-->
  37. <div class="px-4 py-3 mr-2 mb-n3" style="width:50px; z-index:5; position:absolute; top: -2.5rem; left: 1.4rem; ;background-color: #808080; ">&nbsp;</div>
  38. <!--Col 2-->
  39. <div class="px-4 py-3 mr-2 mb-n3" style="width:50px; z-index:5; position:absolute; top: -3rem; left: 5rem; background-color: #808080;">&nbsp;</div>
  40. <!--Col 3-->
  41. <div class="px-4 py-3 mr-2 mb-n3" style="width:50px; z-index:5; position:absolute; top: -2.4rem; left: 8.6rem; background-color: #808080">&nbsp;</div>
  42. <!--Col 4-->
  43. <div class="px-4 py-3 mr-2 mb-n3" style="width:50px; z-index:5; position:absolute; top: -3rem; left: 12rem; background-color: #808080;">&nbsp;</div>
  44.  
  45. </div>
  46. <!--Page-->
  47. <div class="bg-light p-5 container " style="height:400px; overflow: scroll; overflow-x: hidden; box-shadow: 20px 25px 19px -10px rgba(184, 185, 193, 0.30); border-style: outset;" >
  48.  
  49. <!--STATIC-->
  50. <div class="container bg-light p-3 pt-5 mt-n3 mb-4" style="transform:rotate(2deg); box-shadow: 20px 25px 19px -10px rgba(184, 185, 193, 0.30); ">
  51. <!--ROW 1-->
  52. <div class="row mb-3 pl-lg-5">
  53. <div class="col-3 col-lg-2 font-weight-bold">AKA</div>
  54. <!--AKA insert here-->
  55. <div class="col-9 col-lg-4">TBA</div>
  56. <div class="col-3 col-lg-2 font-weight-bold ">Gender</div>
  57. <!--Gender insert here-->
  58. <div class="col-9 col-lg-4">TBA</div>
  59. </div>
  60. <!--ROW 2-->
  61. <div class="row mb-3 pl-lg-5">
  62. <div class="col-3 col-lg-2 font-weight-bold">Age</div>
  63. <!--Age insert here-->
  64. <div class="col-9 col-lg-4">TBA</div>
  65. <div class="col-3 col-lg-2 font-weight-bold">D.O.B</div>
  66. <!--Date of Birth insert here-->
  67. <div class="col-9 col-lg-4">TBA</div>
  68. </div>
  69. <!--ROW 3-->
  70. <div class="row mb-3 pl-lg-5">
  71. <div class="col-3 col-lg-2 font-weight-bold">Career</div>
  72. <!--Career insert here-->
  73. <div class="col-9 col-lg-4">TBA</div>
  74. <div class="col-3 col-lg-2 font-weight-bold">Status</div>
  75. <!--Status (Alive or dead) insert here-->
  76. <div class="col-9 col-lg-4">TBA</div>
  77. </div>
  78. </div>
  79. <!--ABOUT SECTION-->
  80. <div>
  81. <!--ABOUT Header-->
  82. <h1 class="p-3 ml-n3" style=" width:140px;transform:rotate(-2deg); box-shadow: 20px 25px 19px -10px rgba(184, 185, 193, 0.30);">About</h1>
  83. <!--ABOUT Text-->
  84. <div class="p-4" style="box-shadow: 20px 25px 19px -10px rgba(184, 185, 193, 0.30);">
  85. <!--ABOUT Paragraph(s)-->
  86. <p class="py-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  87. <br>
  88. <br>
  89. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  90. </p>
  91. <!--Likes and Dislikes-->
  92. <div class="row">
  93. <!--Likes-->
  94. <div class="col">
  95. <p class="font-weight-bold text-center">Likes <span style="font-size:25px;"><i class="fas fa-thumbs-up"></i></span></p>
  96. <ul>
  97. <li>Like 1</li>
  98. <li>Like 2</li>
  99. <li>Like 3</li>
  100. </ul>
  101. </div>
  102. <!--Dislikes-->
  103. <div class="col">
  104. <p class="font-weight-bold text-center">Disikes <span style="font-size:25px;"><i class="fas fa-thumbs-down" style="vertical-align: text-bottom;"></i></span></p>
  105. <ul>
  106. <li>Dislike 1</li>
  107. <li>Dislike 2</li>
  108. <li>Dislike 3</li>
  109. </ul>
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. </div>
  116. </div>
  117. <p class="text-right pr-3">Code by <a href="https://toyhou.se/chopedonions">ChopedOnions <i class="fas fa-code"></i></a></p>
  118. </div>
Add Comment
Please, Sign In to add comment
Public Pastes
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!