API tools faq
paste
Advertisement
lullahbye

shipping dynamics (tabs)

lullahbye
Nov 15th, 2020 (edited)
1,409
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.58 KB | None | 0 0
raw download clone embed print report
  1. <!---
  2.  
  3. ========================================================
  4.  
  5. code by Lullah
  6. colors used:
  7. > primary (bootstrap)
  8. > #fff (whites; box background)
  9. > #333 (very dark grey; text)
  10. accent colors:
  11. > character 1: #4C0020
  12. > character 2: #F7C39E
  13. > mixed (character 1 x character 2): #a1625f
  14.  
  15. You may...
  16. > Edit this code to oblivion!
  17. > Recycle parts for your own use!
  18.  
  19. You may not...
  20. > Remove my watermark!
  21.  
  22. ========================================================
  23.  
  24. --->
  25.  
  26. <div class="container" style="max-width:550px;">
  27.  
  28. <ul class="nav" style="font-size:12px;">
  29. <li class="nav-item" style="">
  30. <a class="nav-link active text-primary" style="color:;" data-toggle="tab" href="#stat"><i class="fas fa-heart fa-lg"></i></a>
  31. </li>
  32. <li class="nav-item" style="">
  33. <a class="nav-link text-primary" style="color:;" data-toggle="tab" href="#bio"><i class="fas fa-book fa-lg"></i></a>
  34. </li>
  35. </ul>
  36.  
  37. <div class="tab-content" style="color:#333">
  38. <!-------------- FIRST COLUMN ---------------->
  39. <div class="tab-pane fade show active" id="stat">
  40. <div class="">
  41. <div class="p-1 bg-primary rounded"
  42. style="background-color: ;
  43. background-image:url();
  44. background-size:cover;
  45. background-position:center;">
  46.  
  47. <!------------------------------------->
  48. <!------------------------------------->
  49. <!-------------- INTRO ---------------->
  50. <!------------------------------------->
  51. <!------------------------------------->
  52. <div class="card-block p-3 rounded-0 text-uppercase" style="background-color:#fff;">
  53.  
  54. <div style="font-size:1.1em;letter-spacing:1.5px;font-weight:bold;">
  55. <!-------------- names ---------------->
  56. <a href="" style="color:#4C0020;">
  57. Name</a> &
  58. <a href="" style="color:#F7C39E;">
  59. Name</a></div>
  60.  
  61. <!-------------- relationship status ---------------->
  62. <div style="font-size:0.9em;letter-spacing:1.5px;">
  63. Status
  64. </div>
  65.  
  66. <!-------------- closeness ---------------->
  67. <div style="font-size:1em;">
  68. <i class="fas fa-heart mr-1"></i>
  69. <i class="fas fa-heart mx-1"></i>
  70. <i class="fas fa-heart mx-1"></i>
  71. <i class="far fa-heart mx-1"></i>
  72. <i class="far fa-heart mx-1"></i>
  73. </div>
  74. </div>
  75.  
  76. <!------------------------------------------->
  77. <!------------------------------------------->
  78. <!-------------- DIFFERENCES ---------------->
  79. <!------------------------------------------->
  80. <!------------------------------------------->
  81. <div class="card-block p-3 mt-1 rounded-0 bg-white" style="">
  82. <div class="row no-gutters text-center" style="font-size:1em;letter-spacing:1.5px;">
  83. <div class="col-md-6">
  84. <!-------------- age ---------------->
  85. <span class="text-uppercase">Age Diff.</span><br>
  86. 0
  87. </div>
  88.  
  89. <div class="col-md-6">
  90. <!-------------- height ---------------->
  91. <span class="text-uppercase">Height Diff.</span><br>
  92. 0
  93. </div>
  94. </div>
  95. </div>
  96.  
  97. <!------------------------------------->
  98. <!------------------------------------->
  99. <!-------------- STATS ---------------->
  100. <!------------------------------------->
  101. <!------------------------------------->
  102. <div class="p-3 mt-1 rounded-0" style="background-color:#fff;">
  103. <div class="row no-gutters" style="font-size:1em;">
  104.  
  105. <!-------------- big spoon <=> lil spoon ---------------->
  106. <div class="col-md-3" style="text-align:left;">Big Spoon</div>
  107. <div class="col-md-6" style="text-align:center;">
  108. <i class="far fa-heart mx-1" style="color: #;"></i>
  109. <i class="fas fa-heart mx-1" style="color: #4C0020;"></i>
  110. <i class="far fa-heart mx-1" style="color: #;"></i>
  111. <i class="fas fa-heart mx-1" style="color: #F7C39E;"></i>
  112. <i class="far fa-heart mx-1" style="color: #;"></i>
  113. </div>
  114. <div class="col-md-3" style="text-align:right;">Lil' Spoon</div>
  115.  
  116. <!-------------- extroverted <=> introverted ---------------->
  117. <div class="col-md-3 mt-1" style="text-align:left;">Extroverted</div>
  118. <div class="col-md-6 mt-1" style="text-align:center;">
  119. <i class="far fa-heart mx-1" style="color: #;"></i>
  120. <i class="fas fa-heart mx-1" style="color: #4C0020;"></i>
  121. <i class="far fa-heart mx-1" style="color: #;"></i>
  122. <i class="fas fa-heart mx-1" style="color: #F7C39E;"></i>
  123. <i class="far fa-heart mx-1" style="color: #;"></i>
  124. </div>
  125. <div class="col-md-3 mt-1" style="text-align:right;">Introverted</div>
  126.  
  127. <!-------------- proactive <=> reactive ---------------->
  128. <div class="col-md-3 mt-1" style="text-align:left;">Proactive</div>
  129. <div class="col-md-6 mt-1" style="text-align:center;">
  130. <i class="fas fa-heart mx-1" style="color: #4C0020;"></i>
  131. <i class="far fa-heart mx-1" style="color: #;"></i>
  132. <i class="fas fa-heart mx-1" style="color: #F7C39E;"></i>
  133. <i class="far fa-heart mx-1" style="color: #;"></i>
  134. <i class="far fa-heart mx-1" style="color: #;"></i>
  135. </div>
  136. <div class="col-md-3 mt-1" style="text-align:right;">Reactive</div>
  137.  
  138. <!-------------- pet names <=> real name ---------------->
  139. <div class="col-md-3 mt-1" style="text-align:left;">Pet Names</div>
  140. <div class="col-md-6 mt-1" style="text-align:center;">
  141. <i class="far fa-heart mx-1" style="color: #;"></i>
  142. <i class="far fa-heart mx-1" style="color: #;"></i>
  143. <i class="far fa-heart mx-1" style="color: #;"></i>
  144. <i class="fas fa-heart mx-1" style="color: #a1625f;"></i>
  145. <i class="far fa-heart mx-1" style="color: #;"></i>
  146. </div>
  147. <div class="col-md-3 mt-1" style="text-align:right;">Real Name</div>
  148.  
  149. <!-------------- protective <=> chill ---------------->
  150. <div class="col-md-3 mt-1" style="text-align:left;">Protective</div>
  151. <div class="col-md-6 mt-1" style="text-align:center;">
  152. <i class="far fa-heart mx-1" style="color: #;"></i>
  153. <i class="fas fa-heart mx-1" style="color: #4C0020;"></i>
  154. <i class="far fa-heart mx-1" style="color: #;"></i>
  155. <i class="far fa-heart mx-1" style="color: #;"></i>
  156. <i class="fas fa-heart mx-1" style="color: #F7C39E;"></i>
  157. </div>
  158. <div class="col-md-3 mt-1" style="text-align:right;">Chill</div>
  159.  
  160. <!-------------- sensitive <=> dense ---------------->
  161. <div class="col-md-3 mt-1" style="text-align:left;">Sensitive</div>
  162. <div class="col-md-6 mt-1" style="text-align:center;">
  163. <i class="far fa-heart mx-1" style="color: #;"></i>
  164. <i class="far fa-heart mx-1" style="color: #;"></i>
  165. <i class="fas fa-heart mx-1" style="color: #4C0020;"></i>
  166. <i class="far fa-heart mx-1" style="color: #;"></i>
  167. <i class="fas fa-heart mx-1" style="color: #F7C39E;"></i>
  168. </div>
  169. <div class="col-md-3 mt-1" style="text-align:right;">Dense</div>
  170.  
  171. <!-------------- experienced <=> first-timer ---------------->
  172. <div class="col-md-3 mt-1" style="text-align:left;">Experienced</div>
  173. <div class="col-md-6 mt-1" style="text-align:center;">
  174. <i class="far fa-heart mx-1" style="color: #;"></i>
  175. <i class="far fa-heart mx-1" style="color: #;"></i>
  176. <i class="far fa-heart mx-1" style="color: #;"></i>
  177. <i class="far fa-heart mx-1" style="color: #;"></i>
  178. <i class="fas fa-heart mx-1" style="color: #a1625f;"></i>
  179. </div>
  180. <div class="col-md-3 mt-1" style="text-align:right;">First-Timer</div>
  181. </div>
  182. </div>
  183.  
  184. <!-------------------------------------->
  185. <!-------------------------------------->
  186. <!-------------- LEVELS ---------------->
  187. <!-------------------------------------->
  188. <!-------------------------------------->
  189. <div class="p-3 mt-1 rounded-0" style="background-color:#fff">
  190.  
  191. <!-------------- THIRST ---------------->
  192. <div class="text-uppercase" style="font-size:1em;font-weight:bold;letter-spacing:1px;">
  193. Thirst</div>
  194.  
  195. <div class="justify-content-between">
  196. <!-------------- thirst char #1 ---------------->
  197. <div class="">Name</div>
  198. <div class="w-75 my-auto progress" style="height:10px;">
  199. <!-------------- thirst char #1 percentage ---------------->
  200. <div class="progress-bar"
  201. style="width:50%;
  202. background-color:#4C0020;"></div>
  203. </div>
  204. </div>
  205. <div class="justify-content-between">
  206. <!-------------- thirst char #2 ---------------->
  207. <div class="">Name</div>
  208. <div class="w-75 my-auto progress" style="height:10px;">
  209. <!-------------- thirst char #2 percentage ---------------->
  210. <div class="progress-bar"
  211. style="width:50%;
  212. background-color:#F7C39E;"></div>
  213. </div>
  214. </div>
  215.  
  216. <!-------------- AWKWARDNESS ---------------->
  217. <div class="mt-1 text-uppercase" style="font-size:1em;font-weight:bold;letter-spacing:1px;">
  218. Awkwardness</div>
  219.  
  220. <div class="justify-content-between">
  221. <!-------------- awkwardness char #1 ---------------->
  222. <div class="">Name</div>
  223. <div class="w-75 my-auto progress" style="height:10px;">
  224. <!-------------- awkwardness char #1 percentage ---------------->
  225. <div class="progress-bar"
  226. style="width:50%;
  227. background-color:#4C0020;"></div>
  228. </div>
  229. </div>
  230. <div class="justify-content-between">
  231. <!-------------- awkwardness char #2 ---------------->
  232. <div class="">Name</div>
  233. <div class="w-75 my-auto progress" style="height:10px;">
  234. <!-------------- awkwardness char #2 ---------------->
  235. <div class="progress-bar"
  236. style="width:50%;
  237. background-color:#F7C39E;"></div>
  238. </div>
  239. </div>
  240.  
  241. <!-------------- TRUST ---------------->
  242. <div class="mt-1 text-uppercase" style="font-size:1em;font-weight:bold;letter-spacing:1px;">
  243. Trust</div>
  244.  
  245. <!-------------- trust char #1 ---------------->
  246. <div class="justify-content-between">
  247. <div class="">Name</div>
  248. <div class="w-75 my-auto progress" style="height:10px;">
  249. <!-------------- trust char #1 percentage ---------------->
  250. <div class="progress-bar"
  251. style="width:50%;
  252. background-color:#4C0020;"></div>
  253. </div>
  254. </div>
  255. <div class="justify-content-between">
  256. <!-------------- trust char #2 ---------------->
  257. <div class="">Name</div>
  258. <div class="w-75 my-auto progress" style="height:10px;">
  259. <!-------------- trust char #2 percentage ---------------->
  260. <div class="progress-bar"
  261. style="width:50%;
  262. background-color:#F7C39E;"></div>
  263. </div>
  264. </div>
  265. </div>
  266.  
  267. </div>
  268. </div>
  269. </div>
  270.  
  271.  
  272. <!-------------- SECOND COLUMN ---------------->
  273. <div class="tab-pane fade" id="bio">
  274. <div class="row no-gutters" style=";">
  275.  
  276. <div class="" style="">
  277. <div class="p-1 bg-primary rounded"
  278. style="background-color: ;
  279. background-image:url();
  280. background-size:cover;
  281. background-position:center;">
  282.  
  283. <!--------------------------------------->
  284. <!--------------------------------------->
  285. <!-------------- HISTORY ---------------->
  286. <!--------------------------------------->
  287. <!--------------------------------------->
  288. <div class="p-3"
  289. style="background-color:#fff;
  290. letter-spacing: 1px;
  291. height: 220px;
  292. overflow: auto;">
  293. <h5 class="text-uppercase" style="letter-spacing: 1px;">Background</h5>
  294. <p style="font-size:0.9em;">
  295. &nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br>
  296. &nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  297. </div>
  298.  
  299. <!--------------------------------------->
  300. <!--------------------------------------->
  301. <!-------------- PRESENT ---------------->
  302. <!--------------------------------------->
  303. <!--------------------------------------->
  304. <div class="p-3 mt-1"
  305. style="background-color:#fff;
  306. letter-spacing: 1px;
  307. height: 220px;
  308. overflow:auto;">
  309. <h5 class="text-uppercase" style="letter-spacing: 1px;">Present State</h5>
  310. <p style="font-size:0.9em;">
  311. &nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br>
  312. &nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  313. </div>
  314.  
  315. <!------------------------------------------>
  316. <!------------------------------------------>
  317. <!-------------- HEADCANONS ---------------->
  318. <!------------------------------------------>
  319. <!------------------------------------------>
  320. <div class="p-3 mt-1"
  321. style="background-color:#fff;
  322. letter-spacing: 1px;
  323. height: 177px;
  324. overflow:auto;">
  325. <h5 class="text-uppercase" style="letter-spacing: 1px;">Headcanons</h5>
  326. <ul class="my-0" style="font-size:0.9em;">
  327. <li>one</li>
  328. <li>two</li>
  329. <li>three</li>
  330. <li>four</li>
  331. <li>five</li>
  332. </ul>
  333. </div>
  334.  
  335. </div>
  336. </div>
  337. </div>
  338.  
  339. </div>
  340. </div>
  341.  
  342. <div class="text-right text-primary">
  343. <a class="fas fa-paw tooltipster" style="color;" title="code by Lullah" href="lullah"></i>
  344. </div>
  345. </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!