API tools faq
paste
vladimirpinarum

F2U OnlyFriends

vladimirpinarum
May 15th, 2021 (edited)
412
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.22 KB | None | 0 0
raw download clone embed print report
  1. <!----------------------------------------------------------------
  2. ONLYFRIENDS - User/Character Profile
  3. Profile by HTMLobster (noll)
  4.  
  5. Search for "placeholder" to find & replace images.
  6.  
  7. TOS:
  8. Do not remove my credit. You may edit it, however.
  9. You may edit code/frankenstein with others as long as their TOS allows!
  10. Turn off WYSIWYG and turn on Code Editor.
  11. Ask me if you want to redistribute edits. Must be F2U.
  12. ------------------------------------------------------------------>
  13. <div class="container" style="max-width:375px; height:600px;">
  14. <div class="p-4 h-100" style="border-radius:25px; background:#111;">
  15. <!--- Camera/speaker --->
  16. <div class="justify-content-center align-items-center">
  17. <div class="p-1 mr-2 mb-4 rounded-circle" style="width:2%; background:#444444;"></div> <div class="p-1 mb-4 rounded" style="width:25%; background:#444444;"></div>
  18. </div>
  19. <!--- Main Content --->
  20. <div class="text-dark bg-white" style="border-radius:5px; height:485px;">
  21. <div style="height:485px;">
  22. <!--- Phone heading info --->
  23. <div class="row no-gutters px-1 text-dark bf-white">
  24. <!--- Signal --->
  25. <div class="col">
  26. <i class="fad fa-signal-alt-3"></i> <i class="fas fa-wifi"></i>
  27. </div>
  28. <!--- Time --->
  29. <div class="col text-center">
  30. 6:00 AM
  31. </div>
  32. <!--- Battery --->
  33. <div class="col text-right">
  34. 75% <i class="fas fa-battery-three-quarters"></i>
  35. </div>
  36. </div>
  37.  
  38. <div style="height:464px; overflow-y:auto;">
  39. <!--- Header Image --->
  40. <div class="p-2 text-white" style="background:url(https://via.placeholder.com/300x160.png) center; background-size:cover; height:160px;">
  41. <!--- Header Stats --->
  42. <h1 class="font-weight-light mb-1" style="font-size:1.5em;">Name <i class="far fa-badge-check" style="font-size:.8em;"></i></h1>
  43. <span>0 Posts • 0k Likes • 0k Friends</span>
  44. </div>
  45.  
  46. <div class="row no-gutters px-2">
  47. <!--- Character Icon --->
  48. <div class="col-auto rounded-circle mr-2 text-white" style="width:96px; height:96px; background:url(https://via.placeholder.com/100.png) center; background-size:cover; border:2px solid; margin-top:-40px;"></div>
  49. <!--- Character name & username --->
  50. <div class="col">
  51. <h2 class="mt-1 mb-0">Name</h2>
  52. <span class="text-secondary">&#64;username</span>
  53. </div>
  54. </div>
  55.  
  56. <!--- Description --->
  57. <div class="p-2">
  58. <p>Description text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis, sapien sed ultricies mollis, tellus purus rutrum arcu, ut aliquet.</p>
  59. <div class="mt-2">
  60. <a href="#readmore" data-toggle="collapse">Read more.</a>
  61. <div id="readmore" class="collapse">
  62. <!--- Read more text --->
  63. <p>More detailed information.</p>
  64. <p>Curabitur id volutpat nulla. Integer cursus mi quis risus porttitor, at interdum est placerat. Nullam vitae congue metus. Cras molestie ex non odio lobortis, at tincidunt sem vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in urna porttitor, consectetur justo eu, ornare quam. Etiam imperdiet dolor eu aliquam porttitor. Aenean lacinia id tellus at rhoncus.</p>
  65. </div>
  66. </div>
  67. <table class="border-0 mt-3">
  68. <!--- Location --->
  69. <tr>
  70. <td class="text-center p-0"><i class="far fa-map-marker-alt"></i></td>
  71. <td class="py-0">Location</td>
  72. </tr>
  73. <!--- Website --->
  74. <tr>
  75. <td class="text-center p-0"><i class="far fa-link mr-1"></i></td>
  76. <td class="py-0">Website</td>
  77. </tr>
  78. </table>
  79. </div>
  80. <!--- Tab buttons --->
  81. <div class="mt-3">
  82. <ul class="nav nav-tabs row no-gutters text-primary" style="border-bottom:1px solid;">
  83. <li class="col nav-item ml-2" style=""><a class="btn btn-outline-primary active w-100" style="border-bottom:0; border-radius: 5px 5px 0px 0px;" data-toggle="tab" href="#Posts"><i class="fas fa-bars"></i></a></li>
  84. <li class="col nav-item mx-2"><a class="btn btn-outline-primary w-100" style="border-bottom:0; border-radius: 5px 5px 0px 0px;" data-toggle="tab" href="#Images"><i class="far fa-image"></i></a></li>
  85. <li class="col nav-item rounded-top mr-2"><a class="btn btn-outline-primary w-100" style="border-bottom:0; border-radius: 5px 5px 0px 0px;" data-toggle="tab" href="#Videos"><i class="far fa-video"></i></a></li>
  86. </ul>
  87. </div>
  88.  
  89. <!--- Tab content --->
  90. <div class="tab-content">
  91. <!--- Tab 1 --->
  92. <div class="tab-pane fade active show" id="Posts">
  93. <h2 class="p-2">Posts</h2>
  94. <!--- Post 1 --->
  95. <div class="mb-2">
  96. <div class="row no-gutters px-2">
  97. <!--- Character Icon --->
  98. <div class="col-auto rounded-circle mr-2" style="width:50px; height:50px; background:url(https://via.placeholder.com/100.png) center; background-size:cover;"></div>
  99. <!--- Character name & username --->
  100. <div class="col">
  101. <h4 class="mt-1 mb-0">Name</h4>
  102. <span class="text-secondary">&#64;username</span>
  103. </div>
  104. <!--- Post date --->
  105. <div class="col-auto ml-2 text-secondary">
  106. May 5
  107. </div>
  108. </div>
  109. <!--- Post description --->
  110. <div class="my-2 px-2">
  111. <p>Post description.</p>
  112. </div>
  113. <!--- Post Image - landscape or square works best! --->
  114. <div class="mb-2">
  115. <img src="https://via.placeholder.com/300x185.png">
  116. </div>
  117. <!--- Post likes and comments --->
  118. <div class="px-2">
  119. <span class="mr-2"><i class="text-secondary far fa-heart"></i> 1.5K</span> <span><i class="text-secondary far fa-comment"></i> 20</span>
  120. </div>
  121. </div>
  122. <!--- Post 1 end --->
  123.  
  124. <!--- Post divider --->
  125. <hr class="mx-0" style="border-top:1px solid #ccc;">
  126.  
  127. <!--- Post 2 --->
  128. <div class="mb-2">
  129. <div class="row no-gutters px-2">
  130. <!--- Character Icon --->
  131. <div class="col-auto rounded-circle mr-2" style="width:50px; height:50px; background:url(https://via.placeholder.com/100.png) center; background-size:cover;"></div>
  132. <!--- Character name & username --->
  133. <div class="col">
  134. <h4 class="mt-1 mb-0">Name</h4>
  135. <span class="text-secondary">&#64;username</span>
  136. </div>
  137. <!--- Post date --->
  138. <div class="col-auto ml-2 text-secondary">
  139. May 1
  140. </div>
  141. </div>
  142. <!--- Post description --->
  143. <div class="my-2 px-2">
  144. <p>Post description.</p>
  145. </div>
  146. <!--- Post Image - landscape or square works best! --->
  147. <div class="mb-2">
  148. <img src="https://via.placeholder.com/300.png">
  149. </div>
  150. <!--- Post likes and comments --->
  151. <div class="px-2">
  152. <span class="mr-2"><i class="text-secondary far fa-heart"></i> 1.8K</span> <span><i class="text-secondary far fa-comment"></i> 42</span>
  153. </div>
  154. </div>
  155. <!--- Post 2 end --->
  156. <!--- To add more posts, copy the post divider and copy from the post start to end and paste below. --->
  157. </div>
  158. <!--- Tab 1 end --->
  159.  
  160. <!--- Tab 2 --->
  161. <div class="tab-pane fade" id="Images">
  162. <h2 class="p-2">Photos</h2>
  163. <!--- Row 1 --->
  164. <div class="row no-gutters mb-2">
  165. <!--- Image 1 --->
  166. <div class="col pl-1 mr-2 align-items-end" style="background:url(https://via.placeholder.com/100.png) center; background-size:cover; height:95px;">
  167. <!--- Image credit --->
  168. <a href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
  169. </div>
  170. <!--- Image 2 --->
  171. <div class="col pl-1 mr-2 align-items-end" style="background:url(https://via.placeholder.com/100.png) center; background-size:cover; height:95px;">
  172. <!--- Image credit --->
  173. <a href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
  174. </div>
  175. <!--- Image 3 --->
  176. <div class="col pl-1 align-items-end" style="background:url(https://via.placeholder.com/100.png) center; background-size:cover; height:95px;">
  177. <!--- Image credit --->
  178. <a href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
  179. </div>
  180. </div>
  181. <!--- Row 2 --->
  182. <div class="row no-gutters mb-2">
  183. <!--- Image 4 --->
  184. <div class="col pl-1 mr-2 align-items-end" style="background:url(https://via.placeholder.com/100.png) center; background-size:cover; height:95px;">
  185. <!--- Image credit --->
  186. <a href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
  187. </div>
  188. <!--- Image 5 --->
  189. <div class="col pl-1 mr-2 align-items-end" style="background:url(https://via.placeholder.com/100.png) center; background-size:cover; height:95px;">
  190. <!--- Image credit --->
  191. <a href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
  192. </div>
  193. <!--- Image 6 --->
  194. <div class="col pl-1 align-items-end" style="background:url(https://via.placeholder.com/100.png) center; background-size:cover; height:95px;">
  195. <!--- Image credit --->
  196. <a href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
  197. </div>
  198. </div>
  199. <!--- Row 3 --->
  200. <div class="row no-gutters mb-2">
  201. <!--- Image 7 --->
  202. <div class="col pl-1 mr-2 align-items-end" style="background:url(https://via.placeholder.com/100.png) center; background-size:cover; height:95px;">
  203. <!--- Image credit --->
  204. <a href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
  205. </div>
  206. <!--- Image 8 --->
  207. <div class="col pl-1 mr-2 align-items-end" style="background:url(https://via.placeholder.com/100.png) center; background-size:cover; height:95px;">
  208. <a href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
  209. </div>
  210. <!--- Image 9 --->
  211. <div class="col pl-1 align-items-end" style="background:url(https://via.placeholder.com/100.png) center; background-size:cover; height:95px;">
  212. <!--- Image credit --->
  213. <a href="IMG_SRC"><i class="fas fa-info-circle"></i></a>
  214. </div>
  215. </div>
  216. </div>
  217. <!--- Tab 2 end --->
  218.  
  219. <!--- Tab 3 --->
  220. <div class="tab-pane fade" id="Videos">
  221. <h2 class="p-2">Videos</h2>
  222. <!--- Video 1 --->
  223. <div class="mb-2">
  224. <div class="row no-gutters px-2">
  225. <!--- Character Icon --->
  226. <div class="col-auto rounded-circle mr-2" style="width:50px; height:50px; background:url(https://via.placeholder.com/100.png) center; background-size:cover;"></div>
  227. <!--- Character name & username --->
  228. <div class="col">
  229. <h4 class="mt-1 mb-0">Name</h4>
  230. <span class="text-secondary">&#64;username</span>
  231. </div>
  232. <!--- Video date --->
  233. <div class="col-auto ml-2 text-secondary">
  234. May 2
  235. </div>
  236. </div>
  237. <!--- Video description --->
  238. <div class="my-2 px-2">
  239. <p>Video description.</p>
  240. </div>
  241.  
  242. <!----------
  243.  
  244. music player 3 by Bakuqou
  245.  
  246. how to use this code:
  247. https://toyhou.se/8682081.all-music-players-wip/8682087.tutorial
  248.  
  249. ------------>
  250. <div class="card border-0 rounded-0">
  251. <!----- video ----->
  252. <div class="mb-2">
  253. <!----- YOUTUBE LINK // CHANGE THE ID_HERE, LEAVE ?controls=0------>
  254. <div class="card border-0 rounded-0" style="overflow:hidden; width:297px; height:200px">
  255. <div style="position: relative; left: 0px; top: 0px">
  256. <!-------- CHANGE ID_HERE ---------->
  257. <iframe
  258. width="300"
  259. height="200"
  260. src="
  261.  
  262. https://www.youtube-nocookie.com/embed/ID_HERE?controls=0
  263.  
  264. "
  265. frameborder="0"
  266. ></iframe>
  267. </div>
  268. </div>
  269. <!--------->
  270. </div>
  271. </div>
  272.  
  273. <!--- Video likes and comments --->
  274. <div class="px-2">
  275. <span class="mr-2"><i class="text-secondary far fa-heart"></i> 500</span> <span><i class="text-secondary far fa-comment"></i> 10</span>
  276. </div>
  277. </div>
  278. <!--- Video 1 end --->
  279. <!--- To add another video or playlsit copy from video 1 to video 1 end and paste below. You can also copy the "post divider" to add a divider between them. --->
  280. </div>
  281. <!--- Tab 3 end --->
  282. </div>
  283. <!--- Tab content end --->
  284. </div>
  285. </div>
  286. </div>
  287. <!--- Home button --->
  288. <div class="justify-content-center align-items-center">
  289. <i class="fas fa-circle mt-2" style="font-size:3em; color:#444444;"></i>
  290. </div>
  291. </div>
  292. </div>
  293. <div class="container text-center mt-2">
  294. <a data-toggle="tooltip" title="theme by noll" href="https://toyhou.se/HTMLobster" style="color:#333;"><i class="fas fa-code"></i></a>
  295. </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!