API tools faq
paste
MCDogWarrior

Concise User [Custom]

MCDogWarrior
Dec 16th, 2021 (edited)
328
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.19 KB | None | 0 0
raw download clone embed print report
  1. <div class="container-fluid" style="color:#ffffff;width:900px;">
  2. <!-- bg image box -->
  3. <div class="card rounded-0 border-0" style="background-image:url( imglink ); background-size:cover; background-position: center; height:450px;">
  4. <!-- translucent filter over image -->
  5. <div class="card bg-faded rounded-0 border-0 p-3" style="background-color:rgba(0,0,0,0.25); height:450px">
  6. <!-- main box (translucent) -->
  7. <div class="card bg-faded rounded-0 border-0" style="background-color:rgba(0,0,0,0.65); height:430px">
  8. <div class="row no-gutters">
  9. <!-- static section -->
  10. <div class="col-4 p-1">
  11. <!-- icon image -->
  12. <div class="card rounded-0 border-0 mt-3 ml-3" style="background-image:url( imglink ); background-size:cover; background-position: center; height:238px; width:238px; border-top-left-radius:20px; border-top-right-radius:20px; border-bottom-left-radius:20px; border-bottom-right-radius:20px;">
  13. </div>
  14. <!-- username header -->
  15. <p class="mt-1" style="font-size: 25px; text-align:center; color:#EA3351">USERNAME HERE</p>
  16. <!-- seperator -->
  17. <div class="mx-auto" style="border-top:1px solid #EA3351; opacity:0.3; width:235px; margin-top:-15px;">
  18. </div>
  19. <!-- gender/age -->
  20. <p class="mt-1 text-white" style="font-size: 18px; text-align:center">GENDER • AGE</p>
  21. <!-- small tagline -->
  22. <p class="text-white" style="font-size: 16px; text-align:center;">small tagline or quote here. or just a small description idk</p>
  23. </div>
  24. <!-- tabbed section -->
  25. <div class="col-8 p-1">
  26. <div class="tab-content">
  27. <!-- tab 1 - basics -->
  28. <div class="tab-pane fade active show" id="tab1">
  29. <div class="card bg-faded rounded-0 border-0" style="background-color:rgba(0,0,0,0); height:340px; ">
  30. <!-- header -->
  31. <p class="mt-4" style="font-size: 23px; color:#EA3351">About Me</p>
  32. <!-- seperator -->
  33. <div style="border-top:1px solid #EA3351; opacity:0.3; width:400px; margin-top:-5px;">
  34. </div>
  35. <!-- text box + text -->
  36. <div class="card bg-faded rounded-0 border-0" style="background-color:rgba(0,0,0,0); height:250px; overflow:auto">
  37. <p class="text-white mt-2 mr-3" style="font-size: 15px; text-align:justify;">longer description here. type. type. type words. filler wording. wordingationings. words. filler.</p>
  38. <a class="text-white mr-3" style="font-size: 15px; text-align:justify;">hey what if there was another paragraph added. I mean like sure the section is small and all but like- what if another paragraph. actually yknow what, this paragraph could actually come in handy. ysee, it turns out only 20% of my boxes are actually scrollable, so if you like this code consider scrolling, it's free and you can always unscroll later (but don't)</p>
  39. </div>
  40. <!-- media links (auto-centers) -->
  41. <ul class="nav card-header-tabs row mt-1 mx-auto" style="font-size:25px; text-align:center; width:400px">
  42. <li class="col"><a href="social link"><i class="fab fa-twitter-square" style="color:#EA3351"></i></a>
  43. <li class="col"><a href="social link"><i class="fab fa-youtube-square" style="color:#EA3351"></i></a>
  44. <li class="col"><a href="social link"><i class="fab fa-reddit-square" style="color:#EA3351"></i></a>
  45. <li class="col"><a href="social link"><i class="fab fa-tumblr-square" style="color:#EA3351"></i></a>
  46. <li class="col"><a href="social link"><i class="fas fa-pen-square" style="color:#EA3351"></i></a>
  47. </ul>
  48. </div>
  49. </div>
  50. <!-- tab 2 - featured (you can use this for characters or for friends, or even remove it altogether, you can decide) -->
  51. <div class="tab-pane fade" id="tab2">
  52. <div class="card bg-faded rounded-0 border-0" style="background-color:rgba(0,0,0,0); height:340px; ">
  53. <!-- header -->
  54. <p class="mt-4" style="font-size: 23px; color:#EA3351">Featured</p>
  55. <!-- seperator -->
  56. <div style="border-top:1px solid #EA3351; opacity:0.3; width:400px; margin-top:-5px;">
  57. </div>
  58. <div class="card bg-faded rounded-0 border-0 p-2" style="background-color:rgba(0,0,0,0);">
  59. <!-- top row -->
  60. <div class="row justify-content-center">
  61. <!-- character 1 -->
  62. <div class="col-sm text-center mb-2">
  63. <a href=" linkhere ">
  64. <img src=" imglink " class="d-block mx-auto rounded-circle" style="height:120px; width:120px;"></a>
  65. Name
  66. </div>
  67. <!-- character 2 -->
  68. <div class="col-sm text-center mb-2">
  69. <a href=" linkhere ">
  70. <img src=" imglink " class="d-block mx-auto rounded-circle" style="height:120px; width:120px;" ></a>
  71. Name
  72. </div>
  73. <!-- character 3 -->
  74. <div class="col-sm text-center mb-2">
  75. <a href=" linkhere ">
  76. <img src=" imglink " class="d-block mx-auto rounded-circle" style="height:120px; width:120px;"></a>
  77. Name
  78. </div>
  79. </div>
  80. <!-- bottom row -->
  81. <div class="row justify-content-center">
  82. <!-- character 4 -->
  83. <div class="col-sm text-center mb-2">
  84. <a href=" linkhere ">
  85. <img src=" imglink " class="d-block mx-auto rounded-circle" style="height:120px; width:120px;"></a>
  86. Name
  87. </div>
  88. <!-- character 5 -->
  89. <div class="col-sm text-center mb-2">
  90. <a href=" linkhere ">
  91. <img src=" imglink " class="d-block mx-auto rounded-circle" style="height:120px; width:120px;"></a>
  92. Name
  93. </div>
  94. <!-- character 6 -->
  95. <div class="col-sm text-center mb-2">
  96. <a href=" linkhere ">
  97. <img src=" imglink " class="d-block mx-auto rounded-circle" style="height:120px; width:120px;"></a>
  98. Name
  99. </div>
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. <!-- tab 3 - services (alternatively can be used to link projects or primary worlds) -->
  105. <div class="tab-pane fade" id="tab3">
  106. <div class="card bg-faded rounded-0 border-0" style="background-color:rgba(0,0,0,0); height:340px; ">
  107. <!-- header -->
  108. <p class="mt-4" style="font-size: 23px; color:#EA3351">Services</p>
  109. <!-- seperator -->
  110. <div style="border-top:1px solid #EA3351; opacity:0.3; width:400px; margin-top:-5px;">
  111. </div>
  112. <div class="row no-gutters">
  113. <!-- service 1 -->
  114. <div class="col-6 p-1">
  115. <!-- header/status -->
  116. <div class="col-12 justify-content-between text-white mt-2" style="text-align: center; font-size: 20px;">Commissions <span class="text-success pr-2">OPEN</span></div>
  117. <!-- linked image -->
  118. <a class="card rounded-0 border-0" style="background-image:url( imglink ); background-size:cover; background-position: center; height:120px; width:250px; border-top-left-radius:20px; border-bottom-left-radius:20px;" href=" linkhere "></a>
  119. <!-- text -->
  120. <div class="card bg-faded rounded-0 border-0 mx-1" style="background-color:rgba(0,0,0,0); height:135px; overflow:auto">
  121. <p class="text-white mt-2 mr-3" style="font-size: 15px; text-align:justify;">Small description here. Uh idk maybe do like a brief explanation of it and then link the full page on the image above this.</p>
  122. </div>
  123. </div>
  124. <!-- service 2 -->
  125. <div class="col-6 p-1">
  126. <!-- header/status -->
  127. <div class="col-12 justify-content-between text-white mt-2" style="text-align: center; font-size: 20px;">Customs <span class="text-danger pr-2">CLOSED</span></div>
  128. <!-- linked image -->
  129. <a class="card rounded-0 border-0" style="background-image:url( imglink ); background-size:cover; background-position: center; height:120px; width:250px; border-top-right-radius:20px; border-bottom-right-radius:20px;" href=" linkhere "></a>
  130. <!-- text -->
  131. <div class="card bg-faded rounded-0 border-0 mx-1" style="background-color:rgba(0,0,0,0); height:135px; overflow:auto">
  132. <p class="text-white mt-2 mr-3" style="font-size: 15px; text-align:justify;">Oh right I might as well use this box to say that both of these boxes scroll if you fill them up</p>
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  137. </div>
  138. <!-- end of tabs -->
  139. </div>
  140. <div class="card border-0" style="background-color:#2b389e; margin-top:25px; background-color:rgba(0,0,0,0);">
  141. <!-- tab buttons -->
  142. <ul class="nav nav-tabs card-header-tabs row no-gutters">
  143. <li class="col"><a class="btn bg-info btn-block rounded-0 text-white active" data-toggle="tab" href="#tab1" style="border-top-left-radius:20px; border-bottom-left-radius:20px;">BASICS</a></li>
  144. <li class="col"><a class="btn bg-info btn-block rounded-0 text-white" data-toggle="tab" href="#tab2">FEATURED</a></li>
  145. <li class="col"><a class="btn bg-info btn-block rounded-0 text-white" data-toggle="tab" href="#tab3" style="border-top-right-radius:20px; border-bottom-right-radius:20px;">SERVICES</a></li>
  146. </ul>
  147. </div>
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. <!-- Code credit (do not remove/alter) -->
  154. <a style="color:#9dc7b9; font-size:13px" href="https://toyhou.se/MCDogResource">Code by MCDogWarrior</a></span>
  155. </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!