API tools faq
paste
Advertisement
onethird

favorite html

onethird
Jan 25th, 2022 (edited)
1,175
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.05 KB | None | 0 0
raw download clone embed print report
  1. <!--- favorite by onethhird
  2. thank you for using! rules are here: https://toyhou.se/~forums/16.htmlcss-graphics/241166.-onethird-s-f2u-codes-
  3.  
  4. text: #d3cac7
  5. accent: #84BFFA
  6. background: ##16181a
  7.  
  8. if you need help with the music section (everyone say thank you bakucodes): https://toyhou.se/8682081.all-music-players-wip/8682087.tutorial#SS
  9. --->
  10. <div class="container card border-0 p-3 mt-2" style="max-width:500px; font-size:12px; font-family:helvetica; color:#d3cac7;">
  11. <div class="row no-gutters mx-n2">
  12. <div class="col-md-4">
  13.  
  14. <!--- icon img --->
  15. <div class="card rounded-circle border-0 mx-auto" style="width:150px; height:150px; background:url(IMGURL); background-size:cover; background-position:center;"></div>
  16.  
  17. <div class="card float-center border-0 my-2 p-1 text-center mx-auto" style="max-width:150px; background:#16181a;">
  18. <p class="m-0">name . age . pro/nouns</p>
  19. <p style="font-size:15px;">
  20. <a href="URLLINKHERE" data-toggle="tooltip" title="website name here" class="text-reset"><i class="fa-brands fa-instagram"></i></a> .
  21. <a href="URLLINKHERE" data-toggle="tooltip" title="website name here" class="text-reset"><i class="fa-brands fa-twitter"></i></a> .
  22. <a href="URLLINKHERE" data-toggle="tooltip" title="website name here" class="text-reset"><i class="fa-brands fa-tumblr"></i></a> .
  23. <a href="URLLINKHERE" data-toggle="tooltip" title="website name here" class="text-reset"><i class="fa-brands fa-youtube"></i></a> .
  24. <a href="URLLINKHERE" data-toggle="tooltip" title="website name here" class="text-reset"><i class="fa-brands fa-discord"></i></a>
  25. </p>
  26. </div>
  27. </div>
  28.  
  29.  
  30. <div class="col-md-8">
  31. <div class="card rounded-0 border-0" style="height:150px; border-top-right-radius:15px; border-top-left-radius:15px; background:#16181a">
  32. <div class="row no-gutters">
  33.  
  34. <!--- main text --->
  35. <div class="col-7">
  36. <div class="card rounded-0 border-0 p-1 overflow-auto" style="height:150px; background:transparent;">
  37. <p class="text-center my-auto pl-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
  38. </div>
  39. </div>
  40.  
  41. <!--- art info --->
  42. <div class="col-5">
  43. <div class="card rounded-0 border-0 p-1 text-center" style="height:150px; background:transparent;">
  44. <p class="font-weight-bold" style="margin:1px; color:#d3cac7;">COMMISSIONS</p>
  45. <p class="font-italic" style="margin:1px; color:#84BFFA;"><a href="URLLINKHERE" class="text-reset" data-toggle="tooltip" title="website name here">open</a></p>
  46. <p class="font-weight-bold" style="margin:1px; color:#d3cac7;">ART TRADES</p>
  47. <p class="font-italic" style="margin:1px">closed</p>
  48. <p class="font-weight-bold" style="margin:1px; color:#d3cac7;">REQUESTS</p>
  49. <p class="font-italic" style="margin:1px">closed</p>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54.  
  55.  
  56. <div class="card mt-2 rounded-0 border-0" style="height:150px; border-bottom-right-radius:15px; border-bottom-left-radius:15px; background:#16181a">
  57. <div class="card rounded-0 border-0 p-1" style="height:152px; background:transparent;">
  58.  
  59. <p class="text-center font-weight-bold" style="color:#d3cac7;">
  60. <i class="fa-solid fa-star" style="color:#84BFFA;"></i> PLAYLIST NAME <i class="fa-solid fa-star" style="color:#84BFFA;"></i>
  61. </p>
  62. <div class="card rounded-0 border-0 overflow-auto p-1" style="height:150px; background:transparent;">
  63.  
  64. <!--- song 1 --->
  65. <div class="row no-gutters" style="padding-bottom:2px;">
  66. <div class="col-1">
  67. <a class="btn p-0"><iframe style="opacity:.01; position:absolute; left:0; right:0; top:0; bottom:0;" class="h-100 w-100" src="https://www.youtube.com/embed/[pastehere]?controls=0" frameborder="0"></iframe><i class="fa-solid fa-play fa-fw"></i></a>
  68. </div>
  69. <div class="col-11">
  70. <p>artist name - song title</p>
  71. </div>
  72. </div>
  73.  
  74. <!--- song 2 --->
  75. <div class="row no-gutters" style="padding-top:2px; padding-bottom:2px;">
  76. <div class="col-1">
  77. <a class="btn p-0"><iframe style="opacity:.01; position:absolute; left:0; right:0; top:0; bottom:0;" class="h-100 w-100" src="https://www.youtube.com/embed/[pastehere]?controls=0" frameborder="0"></iframe><i class="fa-solid fa-play fa-fw"></i></a>
  78. </div>
  79. <div class="col-11">
  80. <p>artist name - song title</p>
  81. </div>
  82. </div>
  83.  
  84. <!--- song 3 --->
  85. <div class="row no-gutters" style="padding-top:2px; padding-bottom:2px;">
  86. <div class="col-1">
  87. <a class="btn p-0"><iframe style="opacity:.01; position:absolute; left:0; right:0; top:0; bottom:0;" class="h-100 w-100" src="https://www.youtube.com/embed/[pastehere]?controls=0" frameborder="0"></iframe><i class="fa-solid fa-play fa-fw"></i></a>
  88. </div>
  89. <div class="col-11">
  90. <p>artist name - song title</p>
  91. </div>
  92. </div>
  93.  
  94. <!--- song 4 --->
  95. <div class="row no-gutters" style="padding-top:2px; padding-bottom:2px;">
  96. <div class="col-1">
  97. <a class="btn p-0"><iframe style="opacity:.01; position:absolute; left:0; right:0; top:0; bottom:0;" class="h-100 w-100" src="https://www.youtube.com/embed/[pastehere]?controls=0" frameborder="0"></iframe><i class="fa-solid fa-play fa-fw"></i></a>
  98. </div>
  99. <div class="col-11">
  100. <p>artist name - song title</p>
  101. </div>
  102. </div>
  103.  
  104. <!--- song 5 --->
  105. <div class="row no-gutters" style="padding-top:2px; padding-bottom:2px;">
  106. <div class="col-1">
  107. <a class="btn p-0"><iframe style="opacity:.01; position:absolute; left:0; right:0; top:0; bottom:0;" class="h-100 w-100" src="https://www.youtube.com/embed/[pastehere]?controls=0" frameborder="0"></iframe><i class="fa-solid fa-play fa-fw"></i></a>
  108. </div>
  109. <div class="col-11">
  110. <p>artist name - song title</p>
  111. </div>
  112. </div>
  113.  
  114.  
  115. </div>
  116. </div>
  117. </div>
  118. </div>
  119. </div>
  120. <div class="col-12 p-0 text-right">
  121. <!--- credit, do not remove --->
  122. <a href="https://toyhou.se/onethird" data-toggle="tooltip" title="code by onethird"><i class="fas fa-code" style="color:#84BFFA"></i></a>
  123. </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!