API tools faq
paste
Advertisement
vladimirpinarum

F2U Dating App

vladimirpinarum
May 2nd, 2021 (edited)
1,111
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.32 KB | None | 0 0
raw download clone embed print report
  1. <!----------------------------------------------------------------
  2. DATING APP PROFILE
  3. Profile by HTMLobster (noll)
  4.  
  5.  
  6. Music player from BakuCodes: https://toyhou.se/8682081.all-music-players
  7.  
  8.  
  9. TOS:
  10. Do not remove my credit. You may edit it, however.
  11. You may edit code/frankenstein with others as long as their TOS allows!
  12. Turn off WYSIWYG and turn on Code Editor.
  13. Ask me if you want to redistribute edits. Must be F2U.
  14. ------------------------------------------------------------------>
  15. <div class="container" style="max-width:375px; height:600px;">
  16. <div class="p-4 h-100" style="border-radius:25px; background:#111;">
  17. <!--- Camera/speaker --->
  18. <div class="justify-content-center align-items-center">
  19. <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>
  20. </div>
  21. <!--- Main Content --->
  22. <div class="text-dark" style="border-radius:5px; height:485px; background:#f9f9f9;">
  23. <div style="height:420px;">
  24. <!--- Phone heading info --->
  25. <div class="row no-gutters px-1" style="color:#000;">
  26. <!--- Signal --->
  27. <div class="col">
  28. <i class="fad fa-signal-alt-3"></i> <i class="fas fa-wifi"></i>
  29. </div>
  30. <!--- Time --->
  31. <div class="col text-center">
  32. 4:20 AM
  33. </div>
  34. <!--- Battery --->
  35. <div class="col text-right">
  36. 69% <i class="fas fa-battery-three-quarters"></i>
  37. </div>
  38. </div>
  39. <!--- Tab content --->
  40. <div class="tab-content px-1 pt-0">
  41. <!--- tab 1 --->
  42. <div class="tab-pane fade active show" id="Char">
  43. <!--- Character image --->
  44. <div class="rounded align-items-end p-3" style="height:390px; background:url(https://via.placeholder.com/290x390.png) center; background-size:cover;">
  45. <!--- Character basics --->
  46. <div class="row no-gutters w-100">
  47. <div class="col text-left mr-2" style="color:#fff;">
  48. <!--- Name, age --->
  49. <h1 class="mb-1">Name, Age</h1>
  50. <!--- Occupation --->
  51. <p class="m-0 font-weight-light">Occupation at Company</p>
  52. <!--- Mutual friends --->
  53. <p class="m-0 font-weight-light">0 Mutual Friends</p>
  54. </div>
  55. <div class="col-auto justify-content-center align-items-center">
  56. <!--- Info button --->
  57. <ul class="nav nav-tabs border-0 w-100 p-0 m-0">
  58. <li>
  59. <a class="btn btn-block p-0" data-toggle="tab" href="#Profile" style="color:#fff;">
  60. <i class="fas fa-info-circle" style="font-size:1.8em;"></i>
  61. </a>
  62. </li>
  63. </ul>
  64. </div>
  65. </div>
  66.  
  67. </div>
  68.  
  69. </div>
  70. <!--- tab 1 end --->
  71.  
  72. <!--- tab 2 --->
  73. <div class="tab-pane fade" id="Profile" style="height:390px; overflow-y:auto;">
  74. <!--- Gallery start --->
  75. <div id="gallery" class="carousel slide mx-auto" data-ride="carousel" data-interval="4000">
  76. <!--- Top nav buttons --->
  77. <ol class="carousel-indicators" style="position:absolute; top:10px;">
  78. <li data-target="#gallery" data-slide-to="0" class="active"></li>
  79. <li data-target="#gallery" data-slide-to="1"></li>
  80. <li data-target="#gallery" data-slide-to="2"></li>
  81. <!--- To add more, copy & paste the line above and add below—make sure to increase the data-slide-to number. 3-5 images is a good number. --->
  82. </ol>
  83. <!--- Gallery images --->
  84. <div class="carousel-inner">
  85. <!--- Image 1 --->
  86. <div class="carousel-item active">
  87. <div style="background-image:url(https://via.placeholder.com/290x240.png); height:240px; background-position:center center; background-size:cover"></div>
  88. </div>
  89. <!--- Image 2 --->
  90. <div class="carousel-item">
  91. <div style="background-image:url(https://via.placeholder.com/290x240.png); height:240px; background-position:center center; background-size:cover"></div>
  92. </div>
  93. <!--- Image 3 --->
  94. <div class="carousel-item">
  95. <div style="background-image:url(https://via.placeholder.com/290x240.png); height:240px; background-position:center center; background-size:cover"></div>
  96. </div>
  97. <!--- To add more, copy & paste entire image 3 section and add below. 3-5 images is a good number. --->
  98. </div>
  99. <!--- Side nav buttons. Don't touch. --->
  100. <a class="carousel-control-prev" href="#gallery" role="button" data-slide="prev">
  101. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  102. <span class="sr-only">Previous</span>
  103. </a>
  104. <a class="carousel-control-next" href="#gallery" role="button" data-slide="next">
  105. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  106. <span class="sr-only">Next</span>
  107. </a>
  108. </div>
  109. <!--- Gallery end --->
  110. <!--- Info below gallery --->
  111. <div class="p-2" style="color:#808080;">
  112. <!--- Name, age --->
  113. <h1 class="mb-1" style="color:#333;">Name, Age</h1>
  114. <!--- Basics --->
  115. <table class="border-0 m-0">
  116. <tr class="m-0 p-0">
  117. <td class="pr-1 p-0 text-center">
  118. <i class="far fa-briefcase"></i>
  119. </td>
  120. <!--- Occupation --->
  121. <td class="p-0">
  122. Occupation at Company
  123. </td>
  124. </tr>
  125. <tr class="m-0 p-0">
  126. <td class="pr-1 p-0 text-center">
  127. <i class="far fa-graduation-cap"></i>
  128. </td>
  129. <!--- Education --->
  130. <td class="p-0">
  131. University '00
  132. </td>
  133. </tr>
  134. <tr class="m-0 p-0">
  135. <td class="pr-1 p-0 text-center">
  136. <i class="far fa-map-marker-alt"></i>
  137. </td>
  138. <!--- Distance --->
  139. <td class="p-0">
  140. 0 miles away
  141. </td>
  142. </tr>
  143. <!--- Feel free to add another row or two. Sometimes dating profiles will also display Location (e.g. city). --->
  144. </table>
  145. <!--- Interests/tags --->
  146. <div class="mt-2">
  147. <!--- Interest 1 - Red --->
  148. <span class="badge badge-pill mr-1 mb-2" style="background:none; color:#e04467; border:1px solid #e04467; font-size:1em; font-weight:normal;">Fashion</span>
  149. <!--- Interest 2 - Red --->
  150. <span class="badge badge-pill mr-1 mb-2" style="background:none; color:#e04467; border:1px solid #e04467; font-size:1em; font-weight:normal;">Business</span>
  151. <!--- Interest 3 - Gray --->
  152. <span class="badge badge-pill mr-1 mb-2" style="background:none; color:#a2a2a2; border:1px solid #a2a2a2; font-size:1em; font-weight:normal;">Pineapples</span>
  153. <!--- Interest 4 - Gray --->
  154. <span class="badge badge-pill mr-1" style="background:none; color:#a2a2a2; border:1px solid #a2a2a2; font-size:1em; font-weight:normal;">Interest</span>
  155. <!--- Interest 5 - Gray --->
  156. <span class="badge badge-pill" style="background:none; color:#a2a2a2; border:1px solid #a2a2a2; font-size:1em; font-weight:normal;">Interest</span>
  157. <!--- For interests/tags that are in the first row when viewing the page, make sure that they have "mb-2" in their span class so there is proper spacing. All span classes should have a "mr-1" as well, except the final one. --->
  158. </div>
  159. </div>
  160. <!--- Line --->
  161. <hr class="my-1">
  162. <!--- Profile description --->
  163. <div class="p-2" style="color:#808080;">
  164. <p>Text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin libero turpis, mattis sed lectus id, euismod dapibus ex. Nullam hendrerit magna at nisl venenatis porttitor.</p>
  165. </div>
  166.  
  167. <!----------
  168.  
  169. music player 3 by Bakuqou
  170.  
  171. how to use this code:
  172. https://toyhou.se/8682081.all-music-players-wip/8682087.tutorial
  173.  
  174. ------------>
  175. <div class="border-0 rounded-0">
  176. <div class="mt-2 row no-gutters px-2" style="color:#808080;">
  177. <!----- song info ----->
  178. <div class="col align-items-center">
  179. <div>
  180. <div>
  181. <!----- song name ----->
  182. <span>Song Name</span>
  183. <!----- artist ----->
  184. <p style="font-size:.9em;"><i class="fab fa-youtube" style="color:#ff0000;"></i> Band Name</p>
  185. </div>
  186. </div>
  187. </div>
  188. <!----- video ----->
  189. <div class="col-auto pl-2">
  190. <!----- YOUTUBE LINK // CHANGE THE ID_HERE, LEAVE ?controls=0------>
  191. <div class="card rounded border-0 rounded-0" style="overflow: hidden; width: 75px; height: 75px">
  192. <div style="position: relative; left: -98px; top: -60px">
  193. <!-------- CHANGE ID_HERE ---------->
  194. <iframe
  195. width="270"
  196. height="200"
  197. src="
  198.  
  199.  
  200. https://www.youtube-nocookie.com/embed/ID_HERE?controls=0
  201.  
  202.  
  203. "
  204. frameborder="0"
  205. ></iframe>
  206. </div>
  207. </div>
  208. </div>
  209. <!-------->
  210. </div>
  211. </div>
  212. <!--- Music player end --->
  213.  
  214. </div>
  215. <!--- tab 2 end --->
  216.  
  217. <!--- tab 3 --->
  218. <div class="tab-pane fade px-2" id="About" style="color:#808080; height:390px; overflow-y:auto;">
  219. <!--- Deatiled about section. This does not have to be "in character" for a dating profile but it can be. --->
  220. <h1 class="text-center" style="color:#333;">About</h1>
  221. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin libero turpis, mattis sed lectus id, euismod dapibus ex. Nullam hendrerit magna at nisl venenatis porttitor.</p>
  222. <P>Suspendisse ligula lacus, lobortis a ullamcorper a, semper et neque. Praesent lacinia placerat augue, vitae tempus nunc blandit nec. Nunc neque sapien, feugiat non nulla ut, mattis bibendum libero.</P>
  223. <h1 class="text-center" style="color:#333;">Personality</h1>
  224. <p>Integer egestas magna vel nisl congue varius. Pellentesque vulputate vitae orci ut blandit. Quisque rutrum, odio non luctus consectetur, nunc urna tempus est, non fringilla nulla mauris quis ante. Mauris auctor varius rhoncus. Suspendisse egestas semper risus eget placerat.</p>
  225. <p>Praesent a ex sagittis, pulvinar augue id, dapibus nisi. Morbi in tortor ut augue dictum rhoncus eu in elit. Cras ut massa ac lacus cursus consequat. Nunc luctus dolor nec ultricies fermentum. Cras vestibulum, lectus ac vestibulum volutpat, massa turpis suscipit diam, at lacinia quam elit in nunc.</p>
  226. <h1 class="text-center" style="color:#333;">Appearance</h1>
  227. <p>Praesent in erat augue. Aenean sed velit nunc. Sed et ligula pellentesque, luctus erat non, ornare velit. Phasellus rhoncus leo id sem tincidunt accumsan. Suspendisse aliquam turpis sapien, in ullamcorper velit ultrices in. In magna dolor, congue in congue nec, cursus vel odio. Phasellus diam felis, tempor ac ultrices nec, semper ullamcorper eros. Ut nibh massa, iaculis eget aliquam sed, pulvinar ac lectus. Nullam mollis ultrices fermentum.</p>
  228. </div>
  229. <!--- tab 3 end --->
  230.  
  231. <!--- tab 5 --->
  232. <div class="tab-pane fade" id="Relationships" style="color:#808080; height:390px; overflow-y:auto;">
  233. <!--- Relationships --->
  234. <h1 class="text-center" style="color:#333;">Relationships</h1>
  235. <!--- Row 1 --->
  236. <div class="row no-gutters mb-1">
  237. <!--- Relation 1 --->
  238. <div class="col mr-1 rounded">
  239. <!--- Character image --->
  240. <div class="rounded align-items-end p-1" style="height:200px; background:url(https://via.placeholder.com/145x200.png) center; background-size:cover;">
  241. <!--- Character basics --->
  242. <div class="row no-gutters w-100">
  243. <div class="col text-left mr-2" style="color:#fff;">
  244. <!--- Name --->
  245. <h3 class="mb-0"><a style="color:#fff;" href="CHAR_URL">Name</a></h3>
  246. <!--- Relation type --->
  247. <p class="m-0 font-weight-light">Relationship</p>
  248. </div>
  249. <div class="col-auto justify-content-center align-items-center">
  250. <div class="rounded-circle align-items-center justify-content-center" style="height:30px; width:30px; background:#fff; color:#3d9dec;">
  251. <i class="fas fa-star" style="font-size:1em;"></i>
  252. </div>
  253. </div>
  254. </div>
  255. </div>
  256. </div>
  257.  
  258. <!--- Relation 2 --->
  259. <div class="col rounded">
  260. <!--- Character image --->
  261. <div class="rounded align-items-end p-1" style="height:200px; background:url(https://via.placeholder.com/145x200.png) center; background-size:cover;">
  262. <!--- Character basics --->
  263. <div class="row no-gutters w-100">
  264. <div class="col text-left mr-2" style="color:#fff;">
  265. <!--- Name --->
  266. <h3 class="mb-0"><a style="color:#fff;" href="CHAR_URL">Name</a></h3>
  267. <!--- Relation type --->
  268. <p class="m-0 font-weight-light">Relationship</p>
  269. </div>
  270. <div class="col-auto justify-content-center align-items-center">
  271. <div class="rounded-circle align-items-center justify-content-center" style="height:30px; width:30px; background:#fff; color:#3d9dec;">
  272. <i class="fas fa-star" style="font-size:1em;"></i>
  273. </div>
  274. </div>
  275. </div>
  276. </div>
  277. </div>
  278. </div>
  279. <!--- Row 1 end --->
  280.  
  281. <!--- Row 2 --->
  282. <div class="row no-gutters mb-1">
  283. <!--- Relation 1 --->
  284. <div class="col mr-1 rounded">
  285. <!--- Character image --->
  286. <div class="rounded align-items-end p-1" style="height:200px; background:url(https://via.placeholder.com/145x200.png) center; background-size:cover;">
  287. <!--- Character basics --->
  288. <div class="row no-gutters w-100">
  289. <div class="col text-left mr-2" style="color:#fff;">
  290. <!--- Name --->
  291. <h3 class="mb-0"><a style="color:#fff;" href="CHAR_URL">Name</a></h3>
  292. <!--- Relation type --->
  293. <p class="m-0 font-weight-light">Relationship</p>
  294. </div>
  295. <div class="col-auto justify-content-center align-items-center">
  296. <div class="rounded-circle align-items-center justify-content-center" style="height:30px; width:30px; background:#fff; color:#3d9dec;">
  297. <i class="fas fa-star" style="font-size:1em;"></i>
  298. </div>
  299. </div>
  300. </div>
  301. </div>
  302. </div>
  303.  
  304. <!--- Relation 2 --->
  305. <div class="col rounded">
  306. <!--- Character image --->
  307. <div class="rounded align-items-end p-1" style="height:200px; background:url(https://via.placeholder.com/145x200.png) center; background-size:cover;">
  308. <!--- Character basics --->
  309. <div class="row no-gutters w-100">
  310. <div class="col text-left mr-2" style="color:#fff;">
  311. <!--- Name --->
  312. <h3 class="mb-0"><a style="color:#fff;" href="CHAR_URL">Name</a></h3>
  313. <!--- Relation type --->
  314. <p class="m-0 font-weight-light">Relationship</p>
  315. </div>
  316. <div class="col-auto justify-content-center align-items-center">
  317. <div class="rounded-circle align-items-center justify-content-center" style="height:30px; width:30px; background:#fff; color:#3d9dec;">
  318. <i class="fas fa-star" style="font-size:1em;"></i>
  319. </div>
  320. </div>
  321. </div>
  322. </div>
  323. </div>
  324. </div>
  325. <!--- Row 2 end --->
  326. <!--- Copy & paste from Row start to finish to add more relationships. --->
  327. </div>
  328. <!--- tab 5 end --->
  329.  
  330. <!--- tab 6 --->
  331. <div class="tab-pane fade p-2" id="Prompts" style="color:#333; height:390px; overflow-y:auto;">
  332. <!--- Interest/dating prompts --->
  333. <!--- Interest prompt 1 --->
  334. <div class="p-3 rounded mb-2" style="background:#fff;">
  335. <!--- Prompt --->
  336. <p>I am looking for</p>
  337. <!--- Answer --->
  338. <h1 class="mt-2">Answer</h1>
  339. </div>
  340. <!--- Interest prompt 2 --->
  341. <div class="p-3 rounded mb-2" style="background:#fff;">
  342. <!--- Prompt --->
  343. <p>Believe it or not I</p>
  344. <!--- Answer --->
  345. <h1 class="mt-2">Answer</h1>
  346. </div>
  347. <!--- Interest prompt 3 --->
  348. <div class="p-3 rounded mb-2" style="background:#fff;">
  349. <!--- Prompt --->
  350. <p>Never have I ever</p>
  351. <!--- Answer --->
  352. <h1 class="mt-2">Answer</h1>
  353. </div>
  354. <!--- Interest prompt 4 --->
  355. <div class="p-3 rounded mb-2" style="background:#fff;">
  356. <!--- Prompt --->
  357. <p>I won't shut up about</p>
  358. <!--- Answer --->
  359. <h1 class="mt-2">Answer</h1>
  360. </div>
  361. <!--- Interest prompt 5 --->
  362. <div class="p-3 rounded" style="background:#fff;">
  363. <!--- Prompt --->
  364. <p>We'll get along if</p>
  365. <!--- Answer --->
  366. <h1 class="mt-2">Answer</h1>
  367. </div>
  368. <!--- Copy & paste a section in order to add more prompts. They should have a div class with "mb-2" except for the final prompt. --->
  369. </div>
  370. <!--- tab 6 end --->
  371.  
  372. </div>
  373. <!--- Tab content end --->
  374. </div>
  375. <!--- Buttons --->
  376. <div>
  377. <ul class="nav nav-tabs border-0 row no-gutters justify-content-around align-items-center px-2">
  378. <!--- Main image --->
  379. <li class="col-auto nav-item"><a class="border-0 rounded-circle btn btn-block btn-outline-secondary align-items-center justify-content-center active" style="background:#fff; color:#ffa500; height:45px; width:45px; font-size:1.4em; box-shadow:0px 0px 7px 1px rgba(0,0,0,0.1);" data-toggle="tab" href="#Char"><i class="fas fa-redo-alt fa-flip-horizontal"></i></a></li>
  380. <!--- Detailed about --->
  381. <li class="col-auto nav-item"><a class="border-0 rounded-circle btn btn-block btn-outline-secondary align-items-center justify-content-center" style="background:#fff; color:#e04467; height:55px; width:55px; font-size:2em; box-shadow:0px 0px 7px 1px rgba(0,0,0,0.1);" data-toggle="tab" href="#About"><i class="fas fa-times"></i></a></li>
  382. <!--- Profile --->
  383. <li class="col-auto nav-item"><a <a class="border-0 rounded-circle btn btn-block btn-outline-secondary align-items-center justify-content-center" style="background:#fff; color:#3d9dec; height:45px; width:45px; font-size:1.4em; box-shadow:0px 0px 7px 1px rgba(0,0,0,0.1);" data-toggle="tab" href="#Profile"><i class="fas fa-star"></i></a></li>
  384. <!--- Relationships --->
  385. <li class="col-auto nav-item"><a <a class="border-0 rounded-circle btn btn-block btn-outline-secondary align-items-center justify-content-center" style="background:#fff; color:#3bcd96; height:55px; width:55px; font-size:1.8em; box-shadow:0px 0px 7px 1px rgba(0,0,0,0.1);" data-toggle="tab" href="#Relationships"><i class="fas fa-heart"></i></a></li>
  386. <!--- Prompts --->
  387. <li class="col-auto nav-item"><a <a class="border-0 rounded-circle btn btn-block btn-outline-secondary align-items-center justify-content-center" style="background:#fff; color:#9451c7; height:45px; width:45px; font-size:1.4em; box-shadow:0px 0px 7px 1px rgba(0,0,0,0.1);" data-toggle="tab" href="#Prompts"><i class="fas fa-bolt"></i></a></li>
  388. </ul>
  389. </div>
  390. </div>
  391. <!--- Home button --->
  392. <div class="justify-content-center align-items-center">
  393. <i class="fas fa-circle mt-2" style="font-size:3em; color:#444444;"></i>
  394. </div>
  395. </div>
  396. <div class="text-center mt-2">
  397. <a data-toggle="tooltip" title="theme by noll" href="https://toyhou.se/HTMLobster" style="color:#333;"><i class="fas fa-code"></i></a>
  398. </div>
  399. </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!