lowkeywicked

Freebie User Space

Aug 22nd, 2019 (edited)
16,463
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div class="container px-0">
  2. <div class="card border-0">
  3. <!---------- CARD HEAER --------- SET TOP PATTERN HERE -------------------------->
  4. <div class="card-header py-5" style="background: url(https://s3.pixers.pics/pixers/700/FO/12/62/11/84/4/700_FO126211844_eb541531c72c1833cce5a390e80927b0.jpg) fixed;">
  5.  
  6. <!---------- TITLE BLOCK ----------------------------------->
  7. <div class="col-md-8 col-9 d-block mx-auto text-center p-1" style="border: 2px solid #fff; color: #fff; background: rgba(255,255,255,.5);">
  8. <h1 style="font-size:3em; letter-spacing:1px;">Title Here</h1>
  9. </div> <!------- END TITLE BLOCK ---------->
  10. </div>
  11.  
  12. <!------------ MAIN CARD BODY -- SET BG & FONT COLOR HERE ------------------------------->
  13. <div class="card-block rounded-bottom" style="background: #222; color: #fff;">
  14. <div class="row">
  15. <div class="col-12 mb-2">
  16.  
  17. <!---------- LEFT FOCAL BLOCK -------- SET BG COLOR HERE ------------------------>
  18. <div class="card-block rounded col-lg-4 col-md-5 float-md-left mr-md-4 mb-2" style="background: #444;">
  19.  
  20. <h1 class="display-4"><i class="fas fa-user-astronaut mr-1" /> Name Here</h1>
  21. <!--------------- 200 x 200 AVATAR IMAGE ---- SET BORDER COLOR HERE-------------------------------------->
  22. <img src="IMG URL" class="d-block mx-auto my-3 rounded-circle img-thumbnail" style="background:none; border-color: #fff;">
  23. <!--------- ADJECTIVEs -------------------------------->
  24. <p style="letter-spacing:1px;" class="text-center">age . gender . adj</p>
  25. </div>
  26.  
  27. <!------------------ ABOUT ME SECTION -------------------------------------->
  28. <h1><i class="fas fa-rocket pull-right" />About Me</h1>
  29. <p>I really just wanted to make a template that used the little astronaut user icon cuz I love it. You can fiddle with the colors if you want.</p>
  30. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare interdum massa, dignissim commodo ipsum dapibus et. Nullam venenatis nunc a tortor consequat, sed efficitur risus bibendum. Integer rhoncus cursus interdum. Duis tincidunt urna at elit mattis condimentum. Vivamus nec interdum tortor, eget fermentum diam. Nunc aliquam pulvinar quam vitae ullamcorper. Aliquam eu arcu at justo rutrum accumsan. Nullam eget felis sit amet eros convallis tincidunt dapibus non orci. Duis quis velit venenatis odio malesuada gravida non nec tellus. Nulla eget turpis quis nulla suscipit malesuada.</p>
  31.  
  32. <!------------------ LINKS SECTION -------- USE FONT AESOME ICONS -- DONT FORGET TO UPDATE LINKS ---------------------->
  33. <h1 class="mt-3"><i class="far fa-space-shuttle pull-right" />Links</h1>
  34. <div class="row justify-content-between text-center">
  35. <!---------- LINK BLOCK ----------------->
  36. <div class="col-sm-2 col-6 mb-2">
  37. <a href="LINK" style="color: #999;"><i class="fab fa-deviantart fa-3x m-1"></i></a>
  38. <br><small>Deviantart</small>
  39. </div>
  40. <!---------- LINK BLOCK ----------------->
  41. <div class="col-sm-2 col-6 mb-2">
  42. <a href="LINK" style="color: #999;"><i class="fa fa-paw fa-3x m-1"></i></a>
  43. <br><small>Furaffinity</small>
  44. </div>
  45. <!---------- LINK BLOCK ----------------->
  46. <div class="col-sm-2 col-6 mb-2">
  47. <a href="LINK" style="color: #999;"><i class="fab fa-twitter fa-3x m-1"></i></a>
  48. <br><small>Twitter</small>
  49. </div>
  50. <!---------- LINK BLOCK ----------------->
  51. <div class="col-sm-2 col-6 mb-2">
  52. <a href="LINK" style="color: #999;"><i class="fab fa-tumblr fa-3x m-1"></i></a>
  53. <br><small>Tumblr</small>
  54. </div>
  55. <!---------- LINK BLOCK ----------------->
  56. <div class="col-sm-2 col-6 mb-2">
  57. <i class="fab fa-discord fa-3x m-1" style="color: #999;"></i>
  58. <br><small>####name</small>
  59. </div>
  60. <!---------- LINK BLOCK ----- CREDIT DO NOT ERASE------------>
  61. <div class="col-sm-2 col-6 mb-2">
  62. <a href="/Pinky" style="color: #999;"><i class="fas fa-code fa-3x m-1"></i></a>
  63. <br><small>Credit</small>
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68.  
  69. <!------------------ FEATURED SECTION -------------------------------------->
  70. <h1><i class="fas fa-star pull-right" />Featured Characters</h1>
  71. <div class="row text-center">
  72. <!---------- CHARACTER BLOCK ----------------->
  73. <div class="col-sm-3 mb-2">
  74. <a href="LINK 1">
  75. <img src="IMG URL" class="img-thumbnail" style="background:none; border-color: #999;">
  76. </a>
  77. </div>
  78. <!---------- CHARACTER BLOCK ----------------->
  79. <div class="col-sm-3 mb-2">
  80. <a href="LINK 2">
  81. <img src="IMG URL" class="img-thumbnail" style="background:none; border-color: #999;">
  82. </a>
  83. </div>
  84. <!---------- CHARACTER BLOCK ----------------->
  85. <div class="col-sm-3 mb-2">
  86. <a href="LINK 3">
  87. <img src="IMG URL" class="img-thumbnail" style="background:none; border-color: #999;">
  88. </a>
  89. </div>
  90. <!---------- CHARACTER BLOCK ----------------->
  91. <div class="col-sm-3 mb-2">
  92. <a href="LINK 4">
  93. <img src="IMG URL" class="img-thumbnail" style="background:none; border-color: #999;">
  94. </a>
  95. </div>
  96. </div>
  97. </div>
  98. </div>
  99. </div>
RAW Paste Data Copied