API tools faq
paste
MCDogWarrior

Detailed profile code (custom)

MCDogWarrior
Jun 28th, 2021 (edited)
984
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.68 KB | None | 0 0
raw download clone embed print report
  1. <div class="container-fluid my-1" style="color:#ffffff;width:1200px;">
  2. <!--BG image-->
  3. <div class="card rounded-0 border-0 p-2 mt-3" style="background-image:url( https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2de243d6-ec05-4a84-9349-779a25b48c92/deixvjm-eb7ff3c6-b999-4d07-804a-88ebfa8968aa.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzJkZTI0M2Q2LWVjMDUtNGE4NC05MzQ5LTc3OWEyNWI0OGM5MlwvZGVpeHZqbS1lYjdmZjNjNi1iOTk5LTRkMDctODA0YS04OGViZmE4OTY4YWEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.gRI7aYrRyU4W_LNe3NTLpGQHH9ZH5NFyBCySQbj_Itk ); background-attachment:fixed; background-size:cover; background-position: top; border-top-right-radius:10px; border-top-left-radius:10px; border-bottom-right-radius:10px; border-bottom-left-radius:10px;">
  4. <div class="row no-gutters p-1">
  5. <!--Username banner-->
  6. <div class="col-8">
  7. <div class="card bg-faded p-2 my-2" style="background-color:#02031f; border-top-left-radius:10px;">
  8. <div class="card bg-faded p-1 my-2" style="background-color:#2b389e;">
  9. <p style="font-size: 27px; text-align: center; letter-spacing: 2px"><strong> YOUR USERNAME HERE </strong></p>
  10. </div>
  11. <!--Stars over username banner (https://fontawesome.com/v5.15/icons?d=gallery)-->
  12. <a class="text-white" style="position:absolute; top:-15px; left:0px; font-size:50px;"> <i class="fas fa-stars"></i> </a>
  13. <a class="text-white" style="position:absolute; top:35px; right:0px; font-size:25px;"> <i class="fas fa-star"></i> </a>
  14. <div class="tab-content">
  15. <!-- TAB 1 (About me) -->
  16. <div class="tab-pane fade active show" id="tab1">
  17. <div class="card bg-faded p-2 my-1" style="background-color:#031564; height:320px;">
  18. <div class="row p-1">
  19. <!--Name label-->
  20. <div class="col-3">
  21. <div class="card bg-faded p-2 my-1" style="background-color:#e041d7;">
  22. <p style="font-size: 20px; text-align: center; letter-spacing: 2px"><strong> Name </strong></p>
  23. </div>
  24. </div>
  25. <!--Age label-->
  26. <div class="col-3">
  27. <div class="card bg-faded p-2 my-1" style="background-color:#e041d7;">
  28. <p style="font-size: 20px; text-align: center; letter-spacing: 2px"><strong> Age </strong></p>
  29. </div>
  30. </div>
  31. <!--Gender/pronouns label-->
  32. <div class="col-3">
  33. <div class="card bg-faded p-2 my-1" style="background-color:#e041d7;">
  34. <p style="font-size: 20px; text-align: center; letter-spacing: 2px"><strong> Gender </strong></p>
  35. </div>
  36. </div>
  37. <!--Profession label-->
  38. <div class="col-3">
  39. <div class="card bg-faded p-2 my-1" style="background-color:#e041d7;">
  40. <p style="font-size: 20px; text-align: center; letter-spacing: 2px"><strong> Profession </strong></p>
  41. </div>
  42. </div>
  43. </div>
  44. <div class="progress rounded-0" style="height:1px;"><div class="progress-bar " style="width:0%;background-color:#B993FF;"><br></div><div class="progress-bar"style="width: 100%; background-color: #160829;"></div></div>
  45. <br>
  46. <!--Description-->
  47. <div class="card bg-transparent p-2 my-1" style="height:200px; overflow:auto; border:0px">
  48. <p style="font-size: 15px;"><span style="margin-left: 20px;">Describe</span> a bit about yourself here. idk maybe like a bunch of descriptive stuff about you. Adjectives you hear next to your name in sentences. Anything you can think of (unless you can't think of anything). I'd try to put a bunch of stuff just cus it looks better than a bunch of blank space. Box scrolls btw</p>
  49. <a style="font-size: 15px;"><span style="margin-left: 20px;">Words</span> words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words </p>
  50. </div>
  51. </div>
  52. </div>
  53. <!-- TAB 2 (Interests) -->
  54. <div class="tab-pane fade" id="tab2">
  55. <div class="card bg-faded p-2 my-1" style="background-color:#031564; height:320px;">
  56. <div class="row p-1">
  57. <!--Likes-->
  58. <div class="col-6">
  59. <div class="card bg-faded" style="background-color:#362267; height:140px;">
  60. <div class="card bg-success" style="background-color:#362267; height:35px; border-bottom-right-radius:0px; border-bottom-left-radius:0px;">
  61. <p style="font-size: 20px; text-align: center; letter-spacing: 2px"><strong> LIKES </strong></p>
  62. </div>
  63. <div class="card bg-faded" style="background-color:#273398; height:105px; overflow:auto; border:0px">
  64. <!--Likes list-->
  65. <ul class="my-1" style="list-style-type: circle">
  66. <li style="font-size: 15px;">a like</li>
  67. <li style="font-size: 15px;">another like</li>
  68. <li style="font-size: 15px;">another another like</li>
  69. <li style="font-size: 15px;">when the box scrolls if it gets full</li>
  70. </div>
  71. </div>
  72. </div>
  73. <!--Dislikes-->
  74. <div class="col-6">
  75. <div class="card bg-faded" style="background-color:#362267; height:140px;">
  76. <div class="card bg-danger" style="background-color:#362267; height:35px; border-bottom-right-radius:0px; border-bottom-left-radius:0px;">
  77. <p style="font-size: 20px; text-align: center; letter-spacing: 2px"><strong> DISLIKES </strong></p>
  78. </div>
  79. <div class="card bg-faded" style="background-color:#273398; height:105px; overflow:auto; border:0px">
  80. <!--Dislikes list-->
  81. <ul class="my-1" style="list-style-type: circle">
  82. <li style="font-size: 15px;">a dislike</li>
  83. <li style="font-size: 15px;">another dislike</li>
  84. <li style="font-size: 15px;">another another dislike</li>
  85. <li style="font-size: 15px;">yeah you get the point</li>
  86. </div>
  87. </div>
  88. </div>
  89. </div>
  90. <!--Hobbies-->
  91. <div class="card bg-faded my-1" style="background-color:#362267; height:140px;">
  92. <div class="card bg-info" style="background-color:#362267; height:35px; border-bottom-right-radius:0px; border-bottom-left-radius:0px;">
  93. <p style="font-size: 20px; text-align: center; letter-spacing: 2px"><strong> HOBBIES </strong></p>
  94. </div>
  95. <div class="card bg-faded" style="background-color:#273398; height:115px; overflow:auto; border:0px">
  96. <!--Hobbies list-->
  97. <ul class="my-1" style="list-style-type: circle">
  98. <li style="font-size: 15px;">something you enjoy doing in your spare time</li>
  99. <li style="font-size: 15px;">or your in your free time</li>
  100. <li style="font-size: 15px;">or as your pastime</li>
  101. <li style="font-size: 15px;">or uh</li>
  102. </div>
  103. </div>
  104. </div>
  105. </div>
  106. <!-- TAB 3 (Friends) -->
  107. <div class="tab-pane fade" id="tab3">
  108. <div class="card bg-faded p-2 my-1" style="background-color:#031564; height:320px;">
  109. <div class="row justify-content-center mb-sm-1">
  110. <!--Friend 1-->
  111. <div class="col-sm-3 col-6 text-center mb-2">
  112. <a href="USER LINK/NAME HERE">
  113. <img src="ICONLINK" class="d-block mx-auto mb-2 rounded-circle" style="max-height:115px;"></a>
  114. Username
  115. </div>
  116. <!--Friend 2-->
  117. <div class="col-sm-3 col-6 text-center mb-2">
  118. <a href="USER LINK/NAME HERE">
  119. <img src="ICONLINK" class="d-block mx-auto mb-2 rounded-circle" style="max-height:115px;"></a>
  120. Username
  121. </div>
  122. <!--Friend 3-->
  123. <div class="col-sm-3 col-6 text-center mb-2">
  124. <a href="USER LINK/NAME HERE">
  125. <img src="ICONLINK" class="d-block mx-auto mb-2 rounded-circle" style="max-height:115px;"></a>
  126. Username
  127. </div>
  128. </div>
  129. <div class="row justify-content-center mb-sm-1 my-1">
  130. <!--Friend 4-->
  131. <div class="col-sm-3 col-6 text-center mb-2">
  132. <a href="USER LINK/NAME HERE">
  133. <img src="ICONLINK" class="d-block mx-auto mb-2 rounded-circle" style="max-height:115px;"></a>
  134. Username
  135. </div>
  136. <!--Friend 5-->
  137. <div class="col-sm-3 col-6 text-center mb-2">
  138. <a href="USER LINK/NAME HERE">
  139. <img src="ICONLINK" class="d-block mx-auto mb-2 rounded-circle" style="max-height:115px;"></a>
  140. Username
  141. </div>
  142. </div>
  143. </div>
  144. </div>
  145. <!--Tab interface-->
  146. <div class="card card-block bg-faded p-1" style="background-color:#2b389e;">
  147. <ul class="nav nav-tabs card-header-tabs row mb-1">
  148. <li class="col-md-4 mt-1"><a class="btn bg-dark btn-block btn-outline-primary active" data-toggle="tab" href="#tab1">ABOUT ME</a></li>
  149. <li class="col-md-4 mt-1"><a class="btn bg-dark btn-block btn-outline-primary" data-toggle="tab" href="#tab2">INTERESTS</a></li>
  150. <li class="col-md-4 mt-1"><a class="btn bg-dark btn-block btn-outline-primary" data-toggle="tab" href="#tab3">FRIENDS</a></li>
  151. </div>
  152. </div>
  153. </div>
  154. </div>
  155. <!--Right section-->
  156. <div class="col-4">
  157. <!--PFP image-->
  158. <img src="IMGLINK" class="d-block mx-auto mb-2 rounded-circle my-1" style="height:250px; " alt="6748679?1588208130"></a>
  159. <!--Stars over pfp-->
  160. <a class="text-white" style="position:absolute; top:150px; left:50px; font-size:80px;"> <i class="fas fa-star"></i> </a>
  161. <a class="text-white" style="position:absolute; top:35px; right:50px; font-size:35px;"> <i class="fas fa-star"></i> </a>
  162. <a class="text-white" style="position:absolute; top:15px; right:90px; font-size:25px;"> <i class="fas fa-star"></i> </a>
  163. <br>
  164. <!--Music player-->
  165. <div class="card bg-transparent my-2" style="border:0px">
  166. <i class="fad fa-circle" style="font-size: 170px; text-align: center; letter-spacing: 2px; color:#0cf3fd"></i>
  167. <!--Video (plays audio)-->
  168. <iframe src="https://www.youtube-nocookie.com/embed/ VIDEOID ?modestbranding=0" class="border-0" style="position: absolute; top:30px; right:135px; height: 7rem; width: 7rem; z-index: 9; opacity: 0;"></iframe>
  169. <!--Spinning play button-->
  170. <a class="text-white" style="position:absolute; top:37px; right:160px; font-size:60px;"> <i class="far fa-play-circle fa-spin"></i> </a>
  171. </span>
  172. </div>
  173. </div>
  174. </div>
  175. <div class="row p-1 no-gutters">
  176. <div class="col-5">
  177. <div class="progress mt-4" style="height:5px;"><div class="progress-bar " style="width:0%;background-color:#B993FF;"><br></div><div class="progress-bar bg-primary"style="width: 100%;"></div></div>
  178. </div>
  179. <div class="col-2">
  180. <!--Collapse-->
  181. <a data-toggle="collapse" href="#collapse1" class="col-12 btn btn-lg text-center p-1"><i class="far fa-caret-down" style="font-size: 50px;"></a>
  182. </div>
  183. <div class="col-5">
  184. <div class="progress mt-4" style="height:5px;"><div class="progress-bar " style="width:0%;background-color:#B993FF;"><br></div><div class="progress-bar bg-primary"style="width: 100%;"></div></div>
  185. </div>
  186. <div id="collapse1" class="w-100 panel-collpase collapse p-2">
  187. <div class="row">
  188. <!--Sonas section-->
  189. <div class="col-6">
  190. <!--Background banner-->
  191. <div style="background: url( BGLINK ); background-repeat: no-repeat; background-size:cover; background-position: center; height:250px; border-top-right-radius:0px; border-top-left-radius:15px; border-bottom-right-radius:0px; border-bottom-left-radius:0px;" class="card-block h-0 my-1">
  192. <div class="card bg-faded p-2" style="background-color:#362267; height:210px;">
  193. <!--Label & description-->
  194. <p style="font-size: 27px; letter-spacing: 2px"><strong> SONAS </strong></p>
  195. <div class="card bg-faded p-2 my-1" style="background-color:#362267; height:107px; overflow:auto; border:0px;">
  196. <p style="font-size: 15px;"><span style="margin-left: 20px;">Small</span> description of your sonas and what they symbolize to you. idk find some way to explain why your sonas exist n stuff. Box scrolls</p>
  197. </div>
  198. <!--Button to sonas folder-->
  199. <a style="text-align: center;"><a class="btn btn-info" href="LINKTOSONAS">Check them out here!</a></a>
  200. <!--Star-->
  201. <a class="text-white" style="position:absolute; top:-15px; right:0px; font-size:50px;"> <i class="fas fa-stars"></i> </a>
  202. </div>
  203. </div>
  204. </div>
  205. <!--Story/Resources section-->
  206. <div class="col-6">
  207. <!--Bg banner-->
  208. <div style="background: url( BGLINK ); background-repeat: no-repeat; background-size:cover; background-position: center; height:250px; border-top-right-radius:15px; border-top-left-radius:0px; border-bottom-right-radius:0px; border-bottom-left-radius:0px;" class="card-block h-0 my-1">
  209. <div class="card bg-faded p-2" style="background-color:#d06135; height:210px;">
  210. <!--Label & desc-->
  211. <p style="font-size: 27px; letter-spacing: 2px; text-align:right"><strong> STORY NAME/RESOURCES </strong></p>
  212. <div class="card bg-faded p-2 my-1" style="background-color:#d06135; height:107px; overflow:auto; border:0px;">
  213. <p style="font-size: 15px;"><span style="margin-left: 20px;">Small</span> description of a story you've created or resources that you're offering, such as bases or codes. Box scrolls</p>
  214. </div>
  215. <!--Button to resources folder/story page-->
  216. <a style="text-align: center;"><a class="btn btn-info" href="LINKTOSTORY">Check them out here!</a></a>
  217. <!--Star-->
  218. <a class="text-white" style="position:absolute; bottom:-15px; right:-10px; font-size:35px;"> <i class="fas fa-star"></i> </a>
  219. </div>
  220. </div>
  221. </div>
  222. </div>
  223. <div class="row">
  224. <!--Services section-->
  225. <div class="col-6">
  226. <!--Bg banner-->
  227. <div style="background: url( BGLINK ); background-repeat: no-repeat; background-size:cover; background-position: center; height:250px; border-top-right-radius:0px; border-top-left-radius:0px; border-bottom-right-radius:0px; border-bottom-left-radius:15px;" class="card-block h-0 my-1">
  228. <div class="card bg-faded p-2" style="background-color:#449986; height:210px;">
  229. <!--Label & desc-->
  230. <p style="font-size: 27px; letter-spacing: 2px"><strong> SERVICES </strong></p>
  231. <div class="card bg-faded p-2 my-1" style="background-color:#449986; height:107px; overflow:auto; border:0px;">
  232. <p style="font-size: 15px;"><span style="margin-left: 20px;">Small</span> description of commissions/requests/adopts/trades/etc that you're offering. Box scrolls</p>
  233. </div>
  234. <!--Button to services folder/page-->
  235. <a style="text-align: center;"><a class="btn btn-info" href="LINKTOSERVICES">Check them out here!</a></a>
  236. <a class="text-white" style="position:absolute; bottom:-10px; left:-10px; font-size:25px;"> <i class="fas fa-star"></i> </a>
  237. </div>
  238. </div>
  239. </div>
  240. <!--Socials section-->
  241. <div class="col-6">
  242. <!--Bg banner-->
  243. <div style="background: url( BGLINK ); background-repeat: no-repeat; background-size:cover; background-position: center; height:250px; border-top-right-radius:0px; border-top-left-radius:0px; border-bottom-right-radius:15px; border-bottom-left-radius:0px;" class="card-block h-0 my-1">
  244. <div class="card bg-faded p-2" style="background-color:#1d1536; height:210px;">
  245. <!--Label & desc-->
  246. <p style="font-size: 27px; letter-spacing: 2px; text-align:right"><strong> SOCIALS </strong></p>
  247. <div class="card bg-faded p-2 my-1" style="background-color:#1d1536; height:107px; border:0px;">
  248. <div class="row">
  249. <!--Link 1 (YT) can be changed-->
  250. <a href="LINKHERE1">
  251. <div class="col-3">
  252. <i class="fab fa-youtube" style="font-size: 75px;"></i>
  253. </div>
  254. <!--Link 2 (Twitter)-->
  255. <a href="LINKHERE2">
  256. <div class="col-3">
  257. <i class="fab fa-twitter" style="font-size: 75px;"></i>
  258. </div>
  259. <!--Link 3 (Twitch)-->
  260. <a href="LINKHERE3">
  261. <div class="col-3">
  262. <i class="fab fa-twitch" style="font-size: 75px;"></i>
  263. </div>
  264. <!--Link 4 (Art Fight)-->
  265. <a href="LINKHERE4">
  266. <div class="col-3">
  267. <i class="fas fa-splotch" style="font-size: 75px;"></i>
  268. </div>
  269. </div>
  270. </div>
  271. <!--Carrd button-->
  272. <a style="text-align: center;"><a class="btn btn-warning" href="LINKTOCARRD">Carrd link</a></a>
  273. <a class="text-white" style="position:absolute; top:-20px; left:0px; font-size:30px;"> <i class="fas fa-star"></i> </a>
  274. <a class="text-white" style="position:absolute; top:15px; left:-10px; font-size:20px;"> <i class="fas fa-star"></i> </a>
  275. </div>
  276. </div>
  277. </div>
  278. </div>
  279. <!--Code credit (pls don't remove)-->
  280. <p style="text-align: right;"><span style="font-size: 9px;">Code by <a href="https://toyhou.se/MCDogResource" id="">MCDogWarrior</a></span></p>
  281. </div>
  282. </div>
  283. </div>
  284. </div>
  285. </div>
  286. </div>
  287. </div>
  288. </div>
  289. </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!