API tools faq
paste
Advertisement
meromerc

Buttercup

meromerc
Feb 25th, 2023
87
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.51 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.    BUTTERCUP
  4.    
  5.    code by @meromercury
  6.    
  7.    originally made sometime in 2019 idk
  8.    
  9.    Use fontawesome to change the symbols <3
  10.    
  11.  
  12. -->
  13.  
  14.  
  15.  
  16. <div class="container">
  17. <div class="mx-auto" style="font-size:14px;max-width:850px;">
  18.  
  19. <div class="row no-gutters">
  20.  
  21. <div class="col-lg-8 no-gutters">
  22. <div class="col-lg-12 p-1">
  23.  
  24. <!----- TAB BUTTONS ----->
  25.  
  26. <ul class="nav nav-tabs card-header-tabs row mb-1">
  27.     <li class="col-4 mb-1"><a class="btn bg-faded btn-block btn-outline-success active" data-toggle="tab" href="#tab1">Introduction</a></li>
  28.     <li class="col-4 mb-1"><a class="btn bg-faded btn-block btn-outline-success" data-toggle="tab" href="#tab2">Details</a></li>  
  29.      <li class="col-4 mb-1"><a class="btn bg-faded btn-block btn-outline-success" data-toggle="tab" href="#tab3">Relationships</a></li>
  30. </ul>
  31.  
  32.  
  33.       <div class="card bg-faded p-3 mb-3 h-100" style="border-radius:10px;min-height:506px">
  34.  
  35. <!----- TAB 1 ----->
  36.  
  37.  
  38. <div class="tab-content">
  39.  
  40.  
  41. <div class="tab-pane fade active show" id="tab1">
  42.  
  43.  
  44. <div class="row no-gutters container-fluid table-responsive" style="height:470px">
  45.  
  46.  
  47. <!----- ABOUT ----->
  48.  
  49. <div class="col-lg-12 no-gutters mb-3">
  50. <div class="card p-2">
  51.      <div class="card-header pb-1">
  52.        <h2 class="text-success"><i class="fas fa-user fa-sm"></i> About</h2>
  53.      </div>
  54.      <p class="text-justify p-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae faucibus ipsum. Pellentesque placerat viverra dolor, a accumsan turpis porttitor ut. Morbi orci augue, lacinia ac arcu ultrices, pellentesque dignissim elit. Duis dictum scelerisque lobortis. Etiam suscipit et ante ut pretium. Vivamus ut porta libero, sed facilisis sapien. Curabitur facilisis lorem quis dui placerat, id elementum lacus hendrerit. Nullam finibus lacus sed turpis molestie, sed vulputate quam aliquam.</p>
  55.      
  56.      <p class="text-justify p-2">Sed bibendum aliquam velit, ut varius sem convallis a. Proin nec venenatis enim. Integer eget rhoncus neque. Nam interdum massa lorem, id suscipit mi tincidunt vel. In at pellentesque neque. Pellentesque ut magna ut lorem varius tincidunt at sit amet tortor.</p>
  57. </div>
  58. </div>
  59.  
  60.  
  61. <!----- BIOGRAPHY ----->
  62.  
  63. <div class="col-lg-12 no-gutters">
  64. <div class="card p-2">
  65.      <div class="card-header pb-1">
  66.        <h2 class="text-success"><i class="fas fa-book fa-sm"></i> Biography</h2>
  67.      </div>
  68.      <p class="text-justify p-2">Etiam dignissim scelerisque leo, id laoreet ex feugiat quis. Suspendisse magna purus, mollis ac tincidunt quis, viverra sit amet nisi. Curabitur vestibulum, ex eget congue vestibulum, ipsum lacus vulputate leo, sit amet suscipit turpis nisi eget nibh. Praesent rutrum quam vitae turpis eleifend posuere. Ut luctus sollicitudin massa, a ultrices nunc egestas in. Morbi semper in nunc in molestie. Nullam ultrices sem fermentum elit iaculis, at ultrices turpis luctus.</p>
  69.      
  70.      <p class="text-justify p-2">Suspendisse vitae leo eget elit rutrum egestas. Nam sed tempus sapien. Etiam a nisi commodo odio egestas vestibulum sit amet eget tortor. Duis pretium turpis vel felis viverra vehicula. Aliquam erat volutpat. Proin fringilla pulvinar ipsum, vitae porttitor ligula maximus id.</p>
  71.      
  72.      <p class="text-justify p-2">Integer dignissim mi ac velit mollis volutpat. Morbi accumsan enim sit amet lectus hendrerit, a ullamcorper ex convallis. Praesent at turpis risus. Integer ornare maximus neque id suscipit. Vivamus sodales convallis leo, sit amet convallis odio posuere sed. Proin non lectus diam. Fusce suscipit nulla turpis, in interdum ligula consequat eu. Suspendisse porttitor pulvinar vehicula. Quisque auctor lacus eu scelerisque accumsan.</p>
  73. </div>
  74. </div>
  75.  
  76. </div>
  77.  
  78. </div>
  79. <!--------- END TAB 1 --------->
  80.  
  81.  
  82. <!--------- TAB 2 --------->
  83. <div class="tab-pane fade" id="tab2">
  84.  
  85. <div class="row no-gutters container-fluid table-responsive" style="height:470px">
  86. <!--------- BASICS --------->
  87.  
  88.  
  89. <div class="col-lg-12 no-gutters mb-3 d-block">
  90.   <div class="card d-block p-2">
  91.      <div class="card-header pb-1">
  92.         <h2 class="text-success"><i class="fas fa-address-book fa-sm"></i> Basics</h2>
  93.      </div>
  94.    
  95.     <ul class="list-group list-group-flush">
  96.       <li class="list-group-item d-flex justify-content-between">
  97.         <i class="far fa-id-card"></i>
  98.         Name</li>
  99.       <li class="list-group-item d-flex justify-content-between">
  100.         <i class="far fa-transgender"></i>
  101.         Gender and/or Pronouns</li>
  102.       <li class="list-group-item d-flex justify-content-between">
  103.         <i class="far fa-clock"></i>
  104.         Age</li>
  105.       <li class="list-group-item d-flex justify-content-between">
  106.         <i class="far fa-heart"></i>
  107.         Sexuality</li>
  108.       <li class="list-group-item d-flex justify-content-between">
  109.         <i class="far fa-ruler"></i>
  110.         Height</li>
  111.       <li class="list-group-item d-flex justify-content-between">
  112.         <i class="far fa-weight"></i>
  113.         Weight/bodytype</li>
  114.     </ul>
  115.   </div>
  116. </div>
  117.  
  118. <!--------- STATS --------->
  119.  
  120. <div class="col-lg-12 no-gutters mb-3 d-block">
  121.   <div class="card d-block p-2">
  122.      <div class="card-header pb-1">
  123.         <h2 class="text-success"><i class="fas fa-poll fa-sm"></i> Stats</h2>
  124.      </div>
  125.      
  126.    <div class="col-lg-12 no-gutters pt-2">
  127.      <div class="col-lg-12 no-gutters mb-3">
  128.      <span class="mb-2">Introvert</span>
  129.      <span class="pull-right mb-2">Extrovert</span>
  130.     <div class="progress my-2">
  131.      <div class="progress-bar bg-primary" role="progressbar" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px"></div></div>
  132.       </div>
  133.       <div class="col-lg-12 no-gutters mb-3">
  134.      <span class="mb-2">Observant</span>
  135.      <span class="pull-right mb-2">Intuitive</span>
  136.     <div class="progress my-2">
  137.      <div class="progress-bar bg-primary" role="progressbar" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px"></div></div>
  138.       </div>
  139.       <div class="col-lg-12 no-gutters mb-3">
  140.      <span class="mb-2">Thinking</span>
  141.      <span class="pull-right mb-2">Feeling</span>
  142.     <div class="progress my-2">
  143.      <div class="progress-bar bg-primary" role="progressbar" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px"></div></div>
  144.       </div>
  145.       <div class="col-lg-12 no-gutters mb-3">
  146.      <span class="mb-2">Judging</span>
  147.      <span class="pull-right mb-2">Prospecting</span>
  148.     <div class="progress my-2">
  149.      <div class="progress-bar bg-primary" role="progressbar" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px"></div></div>
  150.       </div>
  151.    </div>
  152.   </div>
  153. </div>
  154.  
  155. <!--------- LIKES --------->
  156.  
  157. <div class="col-lg-12 row no-gutters container-fluid">
  158.   <div class="col-md-6 no-gutters mb-3 d-block pr-1 p-0 w-100">
  159.     <div class="card d-block p-2 h-100">
  160.      <div class="card-header pb-1">
  161.         <h2 class="text-success"><i class="far fa-check-square fa-sm"></i> Likes</h2>
  162.      </div>
  163.    
  164.     <ul class="list-group list-group-flush">
  165.       <li class="list-group-item d-flex justify-content-between">
  166.         <i class="far fa-check"></i>
  167.         Yes</li>
  168.       <li class="list-group-item d-flex justify-content-between">
  169.         <i class="far fa-check"></i>
  170.         Yes</li>
  171.       <li class="list-group-item d-flex justify-content-between">
  172.         <i class="far fa-check"></i>
  173.         Yes</li>
  174.       <li class="list-group-item d-flex justify-content-between">
  175.         <i class="far fa-check"></i>
  176.         Yes</li>
  177.       <li class="list-group-item d-flex justify-content-between">
  178.         <i class="far fa-check"></i>
  179.         Yes</li>
  180.     </ul>
  181.   </div>
  182.   </div>
  183.  
  184. <!--------- DISLIKES --------->
  185.  
  186.  <div class="col-md-6 no-gutters mb-3 d-block pl-1 p-0 w-100">
  187.    <div class="card d-block p-2 h-100">
  188.      <div class="card-header pb-1">
  189.         <h2 class="text-success"><i class="far fa-times-square fa-sm"></i> Dislikes</h2>
  190.      </div>
  191.    
  192.     <ul class="list-group list-group-flush">
  193.       <li class="list-group-item d-flex justify-content-between">
  194.         <i class="fas fa-times"></i>
  195.         No</li>
  196.       <li class="list-group-item d-flex justify-content-between">
  197.         <i class="fas fa-times"></i>
  198.         No</li>
  199.       <li class="list-group-item d-flex justify-content-between">
  200.         <i class="fas fa-times"></i>
  201.         No</li>
  202.       <li class="list-group-item d-flex justify-content-between">
  203.         <i class="fas fa-times"></i>
  204.         No</li>
  205.       <li class="list-group-item d-flex justify-content-between">
  206.         <i class="fas fa-times"></i>
  207.         No</li>
  208.     </ul>
  209.   </div>
  210. </div>
  211. </div>
  212.  
  213. <!--------- TRIVIA --------->
  214.  
  215. <div class="col-lg-12 no-gutters mb-3 d-block">
  216.   <div class="card d-block p-1">
  217.      <div class="card-header pb-1">
  218.         <h2 class="text-success"><i class="fas fa-edit fa-sm"></i> Trivia</h2>
  219.      </div>
  220.     <ul style="list-style-type: disc;" class="pt-3">
  221.       <li class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  222.       <li class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  223.       <li class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  224.       <li class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  225.       <li class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  226.     </ul>
  227.   </div>
  228. </div>
  229.  
  230. <!--------- PLAYLIST --------->
  231.  
  232. <div class="col-lg-12 no-gutters mb-3 d-block">
  233.   <div class="card d-block p-2">
  234.      <div class="card-header pb-1">
  235.         <h2 class="text-success"><i class="far fa-play-circle fa-sm"></i> Playlist</h2>
  236.      </div>
  237.     <iframe width="465" height="300" src="https://www.youtube.com/embed/YAtc0d4fORg" frameborder="0" class="p-2"></iframe>
  238.   </div>
  239. </div>
  240.  
  241. </div>
  242. </div>
  243. <!--------- END TAB 2 --------->
  244.  
  245.  
  246. <!--------- TAB 3 --------->
  247. <div class="tab-pane fade" id="tab3">
  248.  
  249. <div class="row no-gutters container-fluid table-responsive" style="height:470px">
  250.  
  251. <!--------- RELATIONSHIPS --------->
  252.  
  253. <div class="col-lg-12 no-gutters mb-3">
  254.  
  255.  
  256. <div class="row">
  257. <div class="col-md-4 text-center mb-3 h-100">
  258.      <img src="https://i.imgur.com/XNO9z5Q.png" class="img-rounded" style="max-height:133px;">
  259.  </div>
  260.  
  261. <div class="col-md-8">
  262.   <div class="card p-2 mb-3">
  263.     <div class="col-md-12 p-2 container-fluid table-responsive" style="max-height:118px;min-height:118px;font-size:11px;">
  264.           <h4 class="text-left text-primary"><a href="LINKHERE">Name</a></h4>
  265.         <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae faucibus ipsum. Pellentesque placerat viverra dolor, a accumsan turpis porttitor ut. This scrolls!</p>
  266.     </div>
  267.   </div>
  268. </div>
  269. </div>
  270.  
  271. <div class="row">
  272. <div class="col-md-4 text-center mb-3 h-100">
  273.      <img src="https://i.imgur.com/XNO9z5Q.png" class="img-rounded" style="max-height:133px;">
  274.  </div>
  275.  
  276. <div class="col-md-8">
  277.   <div class="card p-2 mb-3">
  278.     <div class="col-md-12 p-2 container-fluid table-responsive" style="max-height:118px;min-height:118px;font-size:11px;">
  279.           <h4 class="text-left text-primary"><a href="LINKHERE">Name</a></h4>
  280.         <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae faucibus ipsum. Pellentesque placerat viverra dolor, a accumsan turpis porttitor ut. This scrolls!</p>
  281.     </div>
  282.   </div>
  283. </div>
  284. </div>
  285.  
  286.  
  287. <div class="row">
  288. <div class="col-md-4 text-center mb-3 h-100">
  289.      <img src="https://i.imgur.com/XNO9z5Q.png" class="img-rounded" style="max-height:133px;">
  290.  </div>
  291.  
  292. <div class="col-md-8">
  293.   <div class="card p-2 mb-3">
  294.     <div class="col-md-12 p-2 container-fluid table-responsive" style="max-height:118px;min-height:118px;font-size:11px;">
  295.           <h4 class="text-left text-primary"><a href="LINKHERE">Name</a></h4>
  296.         <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae faucibus ipsum. Pellentesque placerat viverra dolor, a accumsan turpis porttitor ut. This scrolls!</p>
  297.     </div>
  298.   </div>
  299. </div>
  300. </div>
  301.  
  302.  
  303. <!--  copy from here to 'copy end'  and paste to add more relationships. add as many as you want; these tabs scroll! -->
  304. <div class="row">
  305. <div class="col-md-4 text-center mb-3 h-100">
  306.      <img src="https://i.imgur.com/XNO9z5Q.png" class="img-rounded" style="max-height:133px;">
  307.  </div>
  308.  
  309. <div class="col-md-8">
  310.   <div class="card p-2 mb-3">
  311.     <div class="col-md-12 p-2 container-fluid table-responsive" style="max-height:118px;min-height:118px;font-size:11px;">
  312.           <h4 class="text-left text-primary"><a href="LINKHERE">Name</a></h4>
  313.         <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae faucibus ipsum. Pellentesque placerat viverra dolor, a accumsan turpis porttitor ut. This scrolls!</p>
  314.     </div>
  315.   </div>
  316. </div>
  317. </div>
  318. <!-- copy end -->
  319.  
  320.  
  321. <!-- paste relationships above this line! -->
  322. </div>
  323. </div>
  324.  
  325. </div>
  326.  
  327. </div>
  328.  
  329. </div>
  330. </div>
  331. </div>
  332.  
  333. <!-- RIGHT IMAGE -->
  334.   <div class="col-md-4 no-gutters">
  335.     <div class="col-lg-12 p-1">
  336.      <div style="position:absolute;background: url(https://images.unsplash.com/photo-1489945781056-7f12e30f6c03) center;border-radius:10px;background-size:cover;min-height:550px;width:100%;z-index:-1;">
  337.      </div>
  338.     </div>
  339.   </div>
  340.  
  341. </div>
  342. </div>
  343.  
  344. <!----- my credit! please don't touch this ----->
  345. <div class="m-1 text-center text-primary" style="font-size:9px">
  346. <a target="_blank" href="https://toyhou.se/meromercury" class="tooltipster" title="made by cass"><i class="fal fa-code"></i></a></div>
  347.  
  348. </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!