API tools faq
paste
PandoraLights

Relationships tab

PandoraLights
Jun 15th, 2022 (edited)
781
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 34.26 KB | None | 0 0
raw download clone embed print report
  1. <!---
  2. COLOUR CODES:
  3.  
  4. Blue: #02A9C2
  5. Red: #c20222
  6. Purple: #BD94EF
  7.  
  8. --->
  9.  
  10. <div class="mx-auto" style="max-width: 800px; font-size: 12px; letter-spacing: .6px;">
  11.  
  12. <!--- NOTE --->
  13.  
  14. <!---
  15. Change the "Color: #fff" to change the colour of the text on each tab navigator if you change what colour they are for text visibility
  16. --->
  17.  
  18. <ul class="nav nav-tabs card-header-tabs row mb-1">
  19.   <li class="col-md-3 mb-1"><a class="btn bg-faded btn-block btn-outline active" style="background: #BD94EF; color: #fff" data-toggle="tab" href="#reg1">Basics</a></li>
  20.   <li class="col-md-3 mb-1"><a class="btn bg-faded btn-block btn-outline" style="background: #BD94EF; color: #fff" data-toggle="tab" href="#reg2">Stats</a></li>  
  21.   <li class="col-md-3 mb-1"><a class="btn bg-faded btn-block btn-outline" style="background: #BD94EF; color: #fff" data-toggle="tab" href="#reg3">Story</a></li>
  22.   <li class="col-md-3 mb-1"><a class="btn bg-faded btn-block btn-outline" style="background: #BD94EF; color: #fff" data-toggle="tab" href="#reg4">Themes</i></a></li>
  23. </ul>
  24. <hr class="mx-1 mt-2">
  25. </div>
  26.  
  27. <div class="tab-content">
  28.   <div class="tab-pane fade active show" id="reg1">
  29.       <div class="p-3">
  30.          
  31. <!-- Tab one -->
  32.          
  33.           <div class="mx-auto" style="max-width: 800px; font-size: 12px; letter-spacing: .6px;">
  34.  
  35. <div class="row no-gutters">
  36.  
  37. <!-- PERSON 1 ------------------------------------------------->
  38. <div class="col-md-4 order-1 order-md-1 p-1">
  39.    
  40.   <!-- P1 | Name and Link -->
  41.   <div class="card rounded border-0 mb-2" style="background: #02A9C2;">
  42.     <a class="btn btn-block btn-outline-secondary text-center rounded border-0 p-2" style="font-size: 1.2rem; letter-spacing: 2px; color: #fff;"
  43.    
  44.    href="#">
  45.       Name</a>
  46.  
  47.   </div>
  48.  
  49.   <!-- P1 | Image - Replace the URL in brackets -->
  50.   <div class="card rounded border-0 mb-2" style="height: 250px;
  51.  
  52.    background: url(https://images.unsplash.com/photo-1489183988443-b37b7e119ba6?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80) center no-repeat; background-size: cover;">
  53.  
  54.   </div>
  55.  
  56.   <!-- P1 | Gender -->
  57.   <div class="card bg-faded rounded border-0 p-1 mb-2"><div class="d-flex justify-content-between">
  58.     <span class="faded">Gender</span>
  59.     <span>Info</span>
  60.   </div></div>
  61.  
  62.   <!-- P1 | Orientation -->
  63.   <div class="card bg-faded rounded border-0 p-1 mb-2"><div class="d-flex justify-content-between">
  64.     <span class="faded">Orientation</span>
  65.     <span>Info</span>
  66.   </div></div>
  67.  
  68.   <!-- P1 | Birthday -->
  69.   <div class="card bg-faded rounded border-0 p-1 mb-2"><div class="d-flex justify-content-between">
  70.     <span class="faded">Birthday</span>
  71.     <span>Info</span>
  72.   </div></div>
  73.  
  74.   <!-- P1 | Star Sign -->
  75.   <div class="card bg-faded rounded border-0 p-1 mb-2"><div class="d-flex justify-content-between">
  76.     <span class="faded">Star Sign</span>
  77.     <span>Info</span>
  78.   </div></div>
  79.  
  80.   <!-- Tip: Change width's % to adjust the progress bars -->
  81.  
  82.   <!-- P1 | Lust -->
  83.   <div class="card bg-faded rounded border-0 p-1 mb-2"><div class="d-flex justify-content-between">
  84.     <span class="faded">Lust</span>
  85.       <div class="w-50 card progress my-auto" style="height: 8px">
  86.       <div class="progress-bar" style="
  87.        width: 50%; background: #02A9C2;"></div></div>
  88.   </div></div>
  89.  
  90.   <!-- P1 | Awkwardness -->
  91.   <div class="card bg-faded rounded border-0 p-1 mb-2"><div class="d-flex justify-content-between">
  92.     <span class="faded">Awkwardness</span>
  93.       <div class="w-50 card progress my-auto" style="height: 8px">
  94.       <div class="progress-bar" style="
  95.        width: 50%; background: #02A9C2;"></div></div>
  96.   </div></div>
  97.  
  98.   <!-- P1 | Jealousy -->
  99.   <div class="card bg-faded rounded border-0 p-1 mb-2"><div class="d-flex justify-content-between">
  100.     <span class="faded">Jealousy</span>
  101.       <div class="w-50 card progress my-auto" style="height: 8px">
  102.       <div class="progress-bar" style="
  103.        width: 50%; background: #02A9C2;"></div></div>
  104.   </div></div>
  105.  
  106. </div>
  107. <!-- /PERSON 1 ------------------------------------------------>
  108.  
  109. <!-- PERSON 2 ------------------------------------------------->
  110. <div class="col-md-4 order-2 order-md-3 p-1">
  111.  
  112.   <!-- P2 | Name and Link -->
  113.   <div class="card rounded border-0 mb-2" style="background: #c20222;">
  114.     <a class="btn btn-block btn-outline-secondary text-center rounded border-0 p-2" style="font-size: 1.2rem; letter-spacing: 2px; color: #fff;"
  115.    
  116.    href="#">
  117.       Name</a>
  118.  
  119.   </div>
  120.  
  121.   <!-- P2 | Image - Replace the URL in brackets -->
  122.   <div class="card rounded border-0 mb-2" style="height: 250px;
  123.  
  124.    background: url(https://images.unsplash.com/photo-1433259651738-0e74537aa8b5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80) center no-repeat; background-size: cover;">
  125.    
  126.   </div>
  127.  
  128.   <!-- P2 | Gender -->
  129.   <div class="card bg-faded rounded border-0 p-1 mb-2"><div class="d-flex justify-content-between">
  130.     <span class="faded">Gender</span>
  131.     <span>Info</span>
  132.   </div></div>
  133.  
  134.   <!-- P2 | Orientation -->
  135.   <div class="card bg-faded rounded border-0 p-1 mb-2"><div class="d-flex justify-content-between">
  136.     <span class="faded">Orientation</span>
  137.     <span>Info</span>
  138.   </div></div>
  139.  
  140.   <!-- P2 | Birthday -->
  141.   <div class="card bg-faded rounded border-0 p-1 mb-2"><div class="d-flex justify-content-between">
  142.     <span class="faded">Birthday</span>
  143.     <span>Info</span>
  144.   </div></div>
  145.  
  146.   <!-- P2 | Star Sign -->
  147.   <div class="card bg-faded rounded border-0 p-1 mb-2"><div class="d-flex justify-content-between">
  148.     <span class="faded">Star Sign</span>
  149.     <span>Info</span>
  150.   </div></div>
  151.  
  152.   <!-- Tip: Change width's % to adjust the progress bars -->
  153.  
  154.   <!-- P2 | Lust -->
  155.   <div class="card bg-faded rounded border-0 p-1 mb-2"><div class="d-flex justify-content-between">
  156.     <span class="faded">Lust</span>
  157.       <div class="w-50 card progress my-auto" style="height: 8px">
  158.       <div class="progress-bar" style="
  159.        width: 50%; background: #c20222;"></div></div>
  160.   </div></div>
  161.  
  162.   <!-- P2 | Awkwardness -->
  163.   <div class="card bg-faded rounded border-0 p-1 mb-2"><div class="d-flex justify-content-between">
  164.     <span class="faded">Awkwardness</span>
  165.       <div class="w-50 card progress my-auto" style="height: 8px">
  166.       <div class="progress-bar" style="
  167.        width: 50%; background: #c20222;"></div></div>
  168.   </div></div>
  169.  
  170.   <!-- P2 | Jealousy -->
  171.   <div class="card bg-faded rounded border-0 p-1 mb-2"><div class="d-flex justify-content-between">
  172.     <span class="faded">Jealousy</span>
  173.       <div class="w-50 card progress my-auto" style="height: 8px">
  174.       <div class="progress-bar" style="
  175.        width: 50%; background: #c20222;"></div></div>
  176.   </div></div>
  177.  
  178. </div>
  179. <!-- /PERSON 2 ------------------------------------------------>
  180.  
  181. <!-- HEIGHT/AGE DIFFERENCE ------------------------------------>
  182. <div class="col-md-4 my-auto text-center order-3 order-md-2 mb-1" align="center">
  183. <div class="row no-gutters">
  184.    
  185. <div class="col-lg-12 p-0">
  186. <div class="p-2 h-100 modal-open" style="border-radius: 1em;">
  187. <!---- focal image -- focus will be in the top center -- will scale and crop with screen -->
  188. <div style="background-image: url(
  189. https://i.pinimg.com/originals/58/29/bb/5829bbc8b8f372df2643f969e4acc1db.jpg
  191. );
  192. background-size: cover; background-position: center; min-height: 290px; border-radius: .40em; background-color: #fff;" class="card-block p-2 d-flex h-100">
  193. </div>
  194. </div>
  195. </div>
  196.  
  197.   <!-- Height Difference ------------------->
  198.   <div class="col-6 col-md-12 row no-gutters mb-1">
  199.     <div class="col-12 p-1">
  200.       <div class="faded mb-2">Height Difference</div>
  201.       <div class="card bg-faded rounded border-0 p-1">
  202.         x
  203.       </div>
  204.     </div>
  205.  
  206.     <!-- P1 | Height -->
  207.     <div class="col-6 p-1">
  208.       <div class="card bg-faded rounded border-0 p-1" style="color: #02A9C2;">
  209.         xx
  210.       </div>
  211.     </div>
  212.     <!-- P2 | Height -->
  213.     <div class="col-6 p-1">
  214.       <div class="card bg-faded rounded border-0 p-1" style="color: #c20222;">
  215.         xx
  216.       </div>
  217.     </div>
  218.    
  219.   </div>
  220.   <!-- /Height Difference ------------------>
  221.  
  222.   <div class="col-12 p-1 hidden-xs-down"><hr></div>
  223.  
  224.   <!-- Age Difference ---------------------->
  225.   <div class="col-6 col-md-12 row no-gutters mb-1">
  226.     <div class="col-12 p-1">
  227.       <div class="faded mb-2">Age Difference</div>
  228.       <div class="card bg-faded rounded border-0 p-1">
  229.         x
  230.       </div>
  231.     </div>
  232.  
  233.     <!-- P1 | Age -->
  234.     <div class="col-6 p-1">
  235.       <div class="card bg-faded rounded border-0 p-1" style="color: #02A9C2;">
  236.         xx
  237.       </div>
  238.     </div>
  239.     <!-- P2 | Age -->
  240.     <div class="col-6 p-1">
  241.       <div class="card bg-faded rounded border-0 p-1" style="color: #c20222;">
  242.         xx
  243.       </div>
  244.     </div>
  245.    
  246.   </div>
  247.   <!-- /Age Difference --------------------->
  248.  
  249. </div>
  250. </div>
  251. <!-- /HEIGHT/AGE DIFFERENCE ----------------------------------->
  252.  
  253. </div>
  254.          
  255. <!-- End Tab one -->
  256.           </div>
  257.     </div>
  258.   </div>
  259.  
  260.   <div class="tab-pane fade" id="reg2">
  261.       <div class="p-3">
  262. <!-- Tab two -->
  263.  
  264. <div class="mx-auto" style="max-width: 800px; font-size: 12px; letter-spacing: .6px;">
  265.          
  266. <div class="p-0 m-0">
  267. <div class="row no-gutters">
  268.  
  269.   <!-- Character1 Name + Colour Guide -->
  270.   <div class="col-md-6 p-1">
  271.  
  272. <div class="card rounded border-0 mb-1" style="background: #02A9C2;">
  273.     <a class="text-center rounded border-0 p-1" style="font-size: 1.2rem; letter-spacing: 2px; color: #fff;">
  274.    
  275.     <i class="fa-regular fa-sparkles"></i>
  276.      Name</a>
  277.  
  278.   </div>
  279.  
  280.   </div>
  281.  
  282.   <!-- Character2 Name + Colour Guide -->
  283.   <div class="col-md-6 p-1">
  284.  
  285. <div class="card rounded border-0 mb-1" style="background: #c20222;">
  286.     <a class="text-center rounded border-0 p-1" style="font-size: 1.2rem; letter-spacing: 2px; color: #fff;">
  287.       Name
  288.       <i class="fa-regular fa-clouds-moon"></i>
  289.       </a>
  290.  
  291.   </div>
  292.  
  293.   </div>
  294.  
  295.  
  296.   </div>
  297.   </div>
  298.          
  299.           <!-- STATS ---------------------------------------------------->
  300.  
  301.   <!-- Tip: Change width's % to adjust the progress bars -->
  302.    
  303.   <!-- Big Spoon | Little spoon -------------------------------------------------------------------------------------->
  304.   <div class="row no-gutters mb-2">
  305.     <div class="col-4 my-auto p-1"><div class="card bg-faded rounded border-0 p-1 text-right">Big spoon</div></div>
  306.     <div class="col-4 my-auto">
  307.      
  308.       <!-- P1 -->
  309.       <div class="card progress bg-faded border-0 my-1" style="height: 8px;">
  310.         <div class="progress-bar" style="border-right: 6px solid #02A9C2; background: none;
  311.          width: 50%;"></div>
  312.       </div>
  313.       <!-- P2 -->
  314.       <div class="card progress bg-faded border-0 my-1" style="height: 8px;">
  315.         <div class="progress-bar" style="border-right: 6px solid #c20222; background: none;
  316.          width: 50%;"></div>
  317.       </div>
  318.      
  319.     </div>
  320.     <div class="col-4 my-auto p-1"><div class="card bg-faded rounded border-0 p-1 text-left">Little spoon</div></div>
  321.   </div>
  322.  
  323.   <!-- Lends clothes | Borrows clothes ------------------------------------------------------------------------------->
  324.   <div class="row no-gutters mb-2">
  325.     <div class="col-4 my-auto p-1"><div class="card bg-faded rounded border-0 p-1 text-right">Lends clothes</div></div>
  326.     <div class="col-4 my-auto">
  327.      
  328.       <!-- P1 -->
  329.       <div class="card progress bg-faded border-0 my-1" style="height: 8px;">
  330.         <div class="progress-bar" style="border-right: 6px solid #02A9C2; background: none;
  331.          width: 50%;"></div>
  332.       </div>
  333.       <!-- P2 -->
  334.       <div class="card progress bg-faded border-0 my-1" style="height: 8px;">
  335.         <div class="progress-bar" style="border-right: 6px solid #c20222; background: none;
  336.          width: 50%;"></div>
  337.       </div>
  338.      
  339.     </div>
  340.     <div class="col-4 my-auto p-1"><div class="card bg-faded rounded border-0 p-1 text-left">Borrows clothes</div></div>
  341.   </div>
  342.  
  343.   <!-- Doesn't use pet names | Uses pet names ------------------------------------------------------------------------>
  344.   <div class="row no-gutters mb-2">
  345.     <div class="col-4 my-auto p-1"><div class="card bg-faded rounded border-0 p-1 text-right">Doesn't use pet names</div></div>
  346.     <div class="col-4 my-auto">
  347.        
  348.       <!-- P1 -->
  349.       <div class="card progress bg-faded border-0 my-1" style="height: 8px;">
  350.         <div class="progress-bar" style="border-right: 6px solid #02A9C2; background: none;
  351.          width: 50%;"></div>
  352.       </div>
  353.       <!-- P2 -->
  354.       <div class="card progress bg-faded border-0 my-1" style="height: 8px;">
  355.         <div class="progress-bar" style="border-right: 6px solid #c20222; background: none;
  356.          width: 50%;"></div>
  357.       </div>
  358.      
  359.     </div>
  360.     <div class="col-4 my-auto p-1"><div class="card bg-faded rounded border-0 p-1 text-left">Uses pet names</div></div>
  361.   </div>
  362.  
  363.   <!-- Introvert | Extrovert ----------------------------------------------------------------------------------------->
  364.   <div class="row no-gutters mb-2">
  365.     <div class="col-4 my-auto p-1"><div class="card bg-faded rounded border-0 p-1 text-right">Introvert</div></div>
  366.     <div class="col-4 my-auto">
  367.        
  368.       <!-- P1 -->
  369.       <div class="card progress bg-faded border-0 my-1" style="height: 8px;">
  370.         <div class="progress-bar" style="border-right: 6px solid #02A9C2; background: none;
  371.          width: 50%;"></div>
  372.       </div>
  373.       <!-- P2 -->
  374.       <div class="card progress bg-faded border-0 my-1" style="height: 8px;">
  375.         <div class="progress-bar" style="border-right: 6px solid #c20222; background: none;
  376.          width: 50%;"></div>
  377.       </div>
  378.      
  379.     </div>
  380.     <div class="col-4 my-auto p-1"><div class="card bg-faded rounded border-0 p-1 text-left">Extrovert</div></div>
  381.   </div>
  382.  
  383.   <!-- Affection through words | Affection through actions ----------------------------------------------------------->
  384.   <div class="row no-gutters mb-2">
  385.     <div class="col-4 my-auto p-1"><div class="card bg-faded rounded border-0 p-1 text-right">Affection through words</div></div>
  386.     <div class="col-4 my-auto">
  387.        
  388.       <!-- P1 -->
  389.       <div class="card progress bg-faded border-0 my-1" style="height: 8px;">
  390.         <div class="progress-bar" style="border-right: 6px solid #02A9C2; background: none;
  391.          width: 50%;"></div>
  392.       </div>
  393.       <!-- P2 -->
  394.       <div class="card progress bg-faded border-0 my-1" style="height: 8px;">
  395.         <div class="progress-bar" style="border-right: 6px solid #c20222; background: none;
  396.          width: 50%;"></div>
  397.       </div>
  398.      
  399.     </div>
  400.     <div class="col-4 my-auto p-1"><div class="card bg-faded rounded border-0 p-1 text-left">Affection through actions</div></div>
  401.   </div>
  402.  
  403.   <!-- Confesses first | Waits for confession ------------------------------------------------------------------------>
  404.   <div class="row no-gutters mb-2">
  405.     <div class="col-4 my-auto p-1"><div class="card bg-faded rounded border-0 p-1 text-right">Confesses first</div></div>
  406.     <div class="col-4 my-auto">
  407.        
  408.       <!-- P1 -->
  409.       <div class="card progress bg-faded border-0 my-1" style="height: 8px;">
  410.         <div class="progress-bar" style="border-right: 6px solid #02A9C2; background: none;
  411.          width: 50%;"></div>
  412.       </div>
  413.       <!-- P2 -->
  414.       <div class="card progress bg-faded border-0 my-1" style="height: 8px;">
  415.         <div class="progress-bar" style="border-right: 6px solid #c20222; background: none;
  416.          width: 50%;"></div>
  417.       </div>
  418.      
  419.     </div>
  420.     <div class="col-4 my-auto p-1"><div class="card bg-faded rounded border-0 p-1 text-left">Waits for confession</div></div>
  421.   </div>
  422.  
  423.   <!-- Screams about the bugs | Squashes bugs with a shoe ------------------------------------------------------------>
  424.   <div class="row no-gutters mb-2">
  425.     <div class="col-4 my-auto p-1"><div class="card bg-faded rounded border-0 p-1 text-right">Screams about the bugs</div></div>
  426.     <div class="col-4 my-auto">
  427.        
  428.       <!-- P1 -->
  429.       <div class="card progress bg-faded border-0 my-1" style="height: 8px;">
  430.         <div class="progress-bar" style="border-right: 6px solid #02A9C2; background: none;
  431.          width: 50%;"></div>
  432.       </div>
  433.       <!-- P2 -->
  434.       <div class="card progress bg-faded border-0 my-1" style="height: 8px;">
  435.         <div class="progress-bar" style="border-right: 6px solid #c20222; background: none;
  436.          width: 50%;"></div>
  437.       </div>
  438.      
  439.     </div>
  440.     <div class="col-4 my-auto p-1"><div class="card bg-faded rounded border-0 p-1 text-left">Squashes bugs with a shoe</div></div>
  441.   </div>
  442.  
  443.   <!-- Drives the car | Can't drive ---------------------------------------------------------------------------------->
  444.   <div class="row no-gutters mb-2">
  445.     <div class="col-4 my-auto p-1"><div class="card bg-faded rounded border-0 p-1 text-right">Drives the car</div></div>
  446.     <div class="col-4 my-auto">
  447.        
  448.       <!-- P1 -->
  449.       <div class="card progress bg-faded border-0 my-1" style="height: 8px;">
  450.         <div class="progress-bar" style="border-right: 6px solid #02A9C2; background: none;
  451.          width: 50%;"></div>
  452.       </div>
  453.       <!-- P2 -->
  454.       <div class="card progress bg-faded border-0 my-1" style="height: 8px;">
  455.         <div class="progress-bar" style="border-right: 6px solid #c20222; background: none;
  456.          width: 50%;"></div>
  457.       </div>
  458.      
  459.     </div>
  460.     <div class="col-4 my-auto p-1"><div class="card bg-faded rounded border-0 p-1 text-left">Can't drive</div></div>
  461.   </div>
  462.  
  463.   <!-- Can't cook | Makes dinner ------------------------------------------------------------------------------------->
  464.   <div class="row no-gutters mb-2">
  465.     <div class="col-4 my-auto p-1"><div class="card bg-faded rounded border-0 p-1 text-right">Can't cook</div></div>
  466.     <div class="col-4 my-auto">
  467.        
  468.       <!-- P1 -->
  469.       <div class="card progress bg-faded border-0 my-1" style="height: 8px;">
  470.         <div class="progress-bar" style="border-right: 6px solid #02A9C2; background: none;
  471.          width: 50%;"></div>
  472.       </div>
  473.       <!-- P2 -->
  474.       <div class="card progress bg-faded border-0 my-1" style="height: 8px;">
  475.         <div class="progress-bar" style="border-right: 6px solid #c20222; background: none;
  476.          width: 50%;"></div>
  477.       </div>
  478.      
  479.     </div>
  480.     <div class="col-4 my-auto p-1"><div class="card bg-faded rounded border-0 p-1 text-left">Makes dinner</div></div>
  481.   </div>
  482.  
  483.   <!-- Dislikes PDA | Loves PDA -------------------------------------------------------------------------------------->
  484.   <div class="row no-gutters mb-2">
  485.     <div class="col-4 my-auto p-1"><div class="card bg-faded rounded border-0 p-1 text-right">Dislikes PDA</div></div>
  486.     <div class="col-4 my-auto">
  487.        
  488.       <!-- P1 -->
  489.       <div class="card progress bg-faded border-0 my-1" style="height: 8px;">
  490.         <div class="progress-bar" style="border-right: 6px solid #02A9C2; background: none;
  491.          width: 50%;"></div>
  492.       </div>
  493.       <!-- P2 -->
  494.       <div class="card progress bg-faded border-0 my-1" style="height: 8px;">
  495.         <div class="progress-bar" style="border-right: 6px solid #c20222; background: none;
  496.          width: 50%;"></div>
  497.       </div>
  498.      
  499.     </div>
  500.     <div class="col-4 my-auto p-1"><div class="card bg-faded rounded border-0 p-1 text-left">Loves PDA</div></div>
  501.   </div>
  502.  
  503.   <!-- Overprotective | Chill ---------------------------------------------------------------------------------------->
  504.   <div class="row no-gutters mb-2">
  505.     <div class="col-4 my-auto p-1"><div class="card bg-faded rounded border-0 p-1 text-right">Overprotective</div></div>
  506.     <div class="col-4 my-auto">
  507.        
  508.       <!-- P1 -->
  509.       <div class="card progress bg-faded border-0 my-1" style="height: 8px;">
  510.         <div class="progress-bar" style="border-right: 6px solid #02A9C2; background: none;
  511.          width: 50%;"></div>
  512.       </div>
  513.       <!-- P2 -->
  514.       <div class="card progress bg-faded border-0 my-1" style="height: 8px;">
  515.         <div class="progress-bar" style="border-right: 6px solid #c20222; background: none;
  516.          width: 50%;"></div>
  517.       </div>
  518.      
  519.     </div>
  520.     <div class="col-4 my-auto p-1"><div class="card bg-faded rounded border-0 p-1 text-left">Chill</div></div>
  521.   </div>
  522.  
  523.   <!-- Has more relationship experience | Has no relationship experience --------------------------------------------->
  524.   <div class="row no-gutters mb-2">
  525.     <div class="col-4 my-auto p-1"><div class="card bg-faded rounded border-0 p-1 text-right">Has more relationship experience</div></div>
  526.     <div class="col-4 my-auto">
  527.        
  528.       <!-- P1 -->
  529.       <div class="card progress bg-faded border-0 my-1" style="height: 8px;">
  530.         <div class="progress-bar" style="border-right: 6px solid #02A9C2; background: none;
  531.          width: 50%;"></div>
  532.       </div>
  533.       <!-- P2 -->
  534.       <div class="card progress bg-faded border-0 my-1" style="height: 8px;">
  535.         <div class="progress-bar" style="border-right: 6px solid #c20222; background: none;
  536.          width: 50%;"></div>
  537.       </div>
  538.      
  539.     </div>
  540.     <div class="col-4 my-auto p-1"><div class="card bg-faded rounded border-0 p-1 text-left">Has no relationship experience</div></div>
  541.   </div>
  542.  
  543.  
  544. </div>
  545. <!-- /STATS --------------------------------------------------->
  546.          
  547. <!-- End Tab two -->
  548. </div>
  549.   </div>
  550.  
  551.   <div class="tab-pane fade" id="reg3">
  552.       <div class="p-3">
  553. <!-- Tab three -->
  554.  
  555.           <div class="mx-auto" style="max-width: 800px; font-size: 12px; letter-spacing: .6px;">
  556.        <div style="height: 540px; overflow: auto;">
  557.        <div class="row no-gutters">
  558. <!-- HOW THEY MET --------------------------------------------->
  559. <div class="col-md-12">
  560. <div class="card bg-faded rounded border-0 p-3 m-1 mb-1">
  561.   <div class="display-3 faded" style="font-size: 1.6rem;">How they met</div>
  562.   <div><hr></div>
  563.  
  564.   <div style="max-height: 207px; overflow: auto;">
  565.   <!-- Writing area -->
  566.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat elit et sapien varius, ut facilisis mi porta. Mauris ligula tellus, lacinia ac interdum ut, consequat id odio. In in semper elit, sed iaculis ligula. Nulla id dapibus felis. Praesent eget commodo dui. Vivamus nec lobortis odio. Mauris eu euismod odio, quis tincidunt mauris. Nunc in semper ipsum, id feugiat augue. Ut tincidunt, enim non auctor lacinia, lorem ex posuere mi, eget euismod nibh sem vel velit. Pellentesque sed arcu magna.</p>
  567.   <!-- --------------->
  568.   </div>
  569.  
  570. </div>
  571. </div>
  572. <!-- /HOW THEY MET -------------------------------------------->
  573.  
  574. <!-- THEIR RELATIONSHIP --------------------------------------->
  575. <div class="col-md-8">
  576. <div class="card bg-faded rounded border-0 p-3 m-1 mb-1">
  577.   <div class="display-3 faded" style="font-size: 1.6rem;">Their Relationship</div>
  578.   <div><hr></div>
  579.  
  580.   <div style="height: 207px; overflow: auto;">
  581.   <!-- Writing area -->
  582.   <p>Sed non orci vestibulum, dapibus tortor sit amet, tempor lectus. Duis tempus augue nec nibh ultrices dignissim. Aliquam eget urna nec lorem pretium mattis non nec odio. Praesent id auctor nulla. Integer lectus odio, ultrices non mauris nec, cursus lobortis justo. Phasellus quis tincidunt velit, sed placerat ipsum. Aliquam erat volutpat. Cras non orci elit.</p>
  583.   <p>Donec et bibendum arcu. Duis in volutpat tellus, eu tincidunt lectus. Proin tempor enim sed porttitor maximus. Praesent sodales in sapien id vestibulum. Proin vitae nibh consequat, hendrerit purus sit amet, ultricies odio. Ut sit amet quam ut eros facilisis tincidunt. Donec a lacinia mauris. Ut vitae placerat risus.</p>
  584.   <!-- --------------->
  585.   </div>
  586.  
  587. </div>
  588. </div>
  589. <!-- /THEIR RELATIONSHIP -------------------------------------->
  590.  
  591. <!-- SIDE IMAGE - Replace the URL in brackets ----------------->
  592. <div class="col-md-4">
  593.   <div class="card rounded border-0 m-1" style="height: 300px;
  594.  
  595.    background: url(https://images.unsplash.com/photo-1532932515846-90a0bf67e88a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80) center no-repeat; background-size: cover;">
  596.  
  597.   </div>
  598. </div>
  599. <!-- /SIDE IMAGE ---------------------------------------------->
  600.  
  601. <!-- HOW THEY FEEL -------------------------------------------->
  602.  
  603.   <!-- P1 | Change [Person A] to your characters's name -->
  604.   <div class="col-md-6">
  605.     <div class="card bg-faded rounded border-0 p-3 m-1 mb-1">
  606.   <div class="display-3 faded text-left" style="font-size: 1.6rem;">How Person A feels</div>
  607.   <div><hr></div>
  608.  
  609.     <div style="height: 166px; overflow: auto;">
  610.     <!-- Writing area -->
  611.     <p>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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  612.     <!-- --------------->
  613.     </div>
  614.     </div>
  615.   </div>
  616.  
  617.   <!-- P2 | Change [Person B] to your characters's name -->
  618.   <div class="col-md-6">
  619.     <div class="card bg-faded rounded border-0 p-3 m-1 mb-1">
  620.   <div class="display-3 faded text-right" style="font-size: 1.6rem;">How Person B feels</div>
  621.   <div><hr></div>
  622.  
  623.     <div style="height: 166px; overflow: auto;">
  624.     <!-- Writing area -->
  625.     <p>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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  626.     <!-- --------------->
  627.     </div>
  628.     </div>
  629.   </div>
  630.  
  631. <!-- /HOW THEY FEEL ------------------------------------------->
  632.  
  633. <!-- TRIVIA --------------------------------------------------->
  634. <div class="col-md-12">
  635. <div class="card bg-faded rounded border-0 p-3 m-1 mb-1">
  636.   <div class="display-3 faded" style="font-size: 1.6rem;">Trivia</div>
  637.   <div><hr></div>
  638.  
  639.   <div style="max-height: 166px; overflow: auto;">
  640.   <ul class="m-0">
  641.  
  642.     <li class="mb-1">Nunc dignissim risus id metus.</li>
  643.     <li class="mb-1">Aliquam tincidunt mauris eu risus.</li>
  644.     <li class="mb-1">Vivamus vestibulum ntulla nec ante.</li>
  645.     <li class="mb-1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  646.    
  647.   <!-- Add more above this line -->
  648.   </ul>
  649.   </div>
  650.  
  651. </div>
  652. </div>
  653. <!-- /TRIVIA -------------------------------------------------->
  654. <div class="col-md-12">
  655. <div class="card bg-faded rounded border-0 p-3 m-1 mb-1">
  656.   <div class="display-3 faded" style="font-size: 1.6rem; text-align:center;">Nicknames</div>
  657.   </div>
  658.   </div>
  659. <!-- NICKNAMES -------------------------------------------->
  660.  
  661.   <!-- P1 | Change [Person A] to your characters's name -->
  662.   <div class="col-md-6">
  663.     <div class="card bg-faded rounded border-0 p-3 m-1 mb-1">
  664.   <div class="display-3 faded text-left" style="font-size: 1.6rem;">For Person A</div>
  665.   <div><hr></div>
  666.  
  667.     <div style="height: 166px; overflow: auto;">
  668.     <!-- Writing area -->
  669.     <ul>
  670.         <li>Nicknames Person B uses for Person A</li>
  671.     </ul>
  672.     <!-- --------------->
  673.     </div>
  674.     </div>
  675.   </div>
  676.  
  677.   <!-- P2 | Change [Person B] to your characters's name -->
  678.   <div class="col-md-6">
  679.     <div class="card bg-faded rounded border-0 p-3 m-1 mb-1">
  680.   <div class="display-3 faded text-right" style="font-size: 1.6rem;">For Person B</div>
  681.   <div><hr></div>
  682.  
  683.     <div style="height: 166px; overflow: auto;">
  684.     <!-- Writing area -->
  685.        <ul>
  686.         <li>Nicknames Person A uses for Person B</li>
  687.     </ul>
  688.     <!-- --------------->
  689.     </div>
  690.     </div>
  691.   </div>
  692.  
  693. <!-- /NICKNAMES ------------------------------------------->
  694.  
  695. </div>
  696. </div>
  697. </div>
  698.          
  699. <!-- End Tab three -->
  700.       </div>
  701.     </div>
  702.    
  703.      <div class="tab-pane fade" id="reg4">
  704.       <div class="p-3">
  705.      
  706.       <!-- Tab four -->
  707.                 <div class="mx-auto" style="max-width: 800px; font-size: 12px; letter-spacing: .6px;">
  708.        <div style="height: 540px; overflow: auto;">
  709.            
  710.            <!-------
  711.    
  712.     PLAYLIST: Using Youtube Embeds (With Icon)
  713.     > Snippet by Strabi
  714.    
  715.     [ Rules ]
  716.     > Feel free to rip this snippet to use in your own codes, playlists, code templates etc.
  717.     > No credit necessary.
  718.     > If ripping this code to use in code templates you will be redistributing, I would appreciate if at least a link to this is given in the live preview version! No need to leave credit in the actual code itself ^o^
  719.    
  720.     FOR YOUTUBE EMBEDS:
  721.     > Replace [ ID_HERE ] with the youtube id (found after https://www.youtube.com/watch?v=)
  722.     > Keep the [ ?controls=0 ] at the end of the url to remove extra buttons that could get in the way of clicking the music player.
  723.    
  724. ------->
  725. <div class="bg-faded tem-2 p-2" style="overflow:hidden;">
  726.  
  727. <!------- TITLE ------->
  728.      <h1 class="display-4 faded">PLAYLIST<a class="text-white" href="https://toyhou.se/4701769.-f2u-in-profile-playlist"><i class="fas fa-music pull-right m-1"></i></a></h1>
  729. <hr class="mx-1 mt-2">
  730. <!------- SONG 1 ------->
  731.      <div class="d-flex justify-content-between mx-1 px-2">
  732.  
  733.           <!------- SONG NAME ------->
  734.           <span>TITLE - AUTHOR</span>
  735.  
  736.           <!------- YOUTUBE EMBED ------->
  737.           <span class="text-center">
  738.               <iframe class="flex-fill" frameborder="0" style="width:100%;height:25px;width:25px;clip-path: polygon(25% 20%, 25% 100%, 80% 60%);"
  739.  
  740.                src="https://www.youtube.com/embed/ID_HERE?controls=0">
  741.  
  742.               </iframe>
  743.           </span>
  744.      </div>
  745.  
  746. <!------- SONG 2 ------->
  747.      <div class="d-flex justify-content-between mx-1 px-2">
  748.  
  749.           <!------- SONG NAME ------->
  750.           <span>TITLE - AUTHOR</span>
  751.  
  752.           <!------- YOUTUBE EMBED ------->
  753.           <span class="text-center">
  754.               <iframe class="flex-fill" frameborder="0" style="width:100%;height:25px;width:25px;clip-path: polygon(25% 20%, 25% 100%, 80% 60%);"
  755.  
  756.                src="https://www.youtube.com/embed/ID_HERE?controls=0">
  757.  
  758.               </iframe>
  759.           </span>
  760.      </div>
  761.  
  762. <!------- SONG 3 ------->
  763.      <div class="d-flex justify-content-between mx-1 px-2">
  764.  
  765.           <!------- SONG NAME ------->
  766.           <span>TITLE - AUTHOR</span>
  767.  
  768.           <!------- YOUTUBE EMBED ------->
  769.           <span class="text-center">
  770.               <iframe class="flex-fill" frameborder="0" style="width:100%;height:25px;width:25px;clip-path: polygon(25% 20%, 25% 100%, 80% 60%);"
  771.  
  772.                src="https://www.youtube.com/embed/ID_HERE?controls=0">
  773.  
  774.               </iframe>
  775.           </span>
  776.      </div>
  777. <hr class="mx-1 mt-2">
  778. <!-- Lil funky icons -->
  779. <div class="d-flex justify-content-around" style="text-align:center; font-size:2rem">
  780.     <span></span>
  781.   <span><i class="fa-regular fa-sparkles"></i></span>
  782.   <span><i class="fa-regular fa-clouds-moon"></i></span>
  783.   <span></span>
  784. </div>
  785. <hr class="mx-1 mt-2">
  786. </div>
  787.            
  788.                          <!-- MOODBOARD THING ------------------------------------>
  789.               <div class="mt-md-1" style="border-radius:2.3rem">
  790.  
  791.                 <!-- first row -->
  792.                 <div class="row no-gutters">
  793.                   <div class="col-md-4 pr-md-1 mb-2">
  794.                     <div style="background-image:url(https://images.unsplash.com/photo-1534400984015-ec242122bc65?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80);background-size:cover;background-position:center;min-height:190px;"></div>
  795.                   </div>
  796.                   <div class="col-md-4 px-md-1 mb-2">
  797.                     <div style="background-image:url(https://images.unsplash.com/photo-1493243350443-9e3048ce7288?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1340&q=80);background-size:cover;background-position:center;min-height:190px;"></div>
  798.                   </div>
  799.                   <div class="col-md-4 pl-md-1 mb-2">
  800.                     <div style="background-image:url(https://images.unsplash.com/photo-1504608524841-42fe6f032b4b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80);background-size:cover;background-position:center;min-height:190px;"></div>
  801.                   </div>
  802.                 </div>
  803.  
  804.                 <!-- second row -->
  805.                 <div class="row no-gutters">
  806.                   <div class="col-md-6 pr-md-1 mb-2">
  807.                     <div style="background-image:url(https://images.unsplash.com/photo-1534274988757-a28bf1a57c17?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=435&q=80);background-size:cover;background-position:center;min-height:190px;"></div>
  808.                   </div>
  809.                   <div class="col-md-6 pl-md-1 mb-2">
  810.                     <div style="background-image:url(https://images.unsplash.com/photo-1501186758051-167ca3c0fde8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=387&q=80);background-size:cover;background-position:center;min-height:190px;"></div>
  811.                   </div>
  812.                 </div>
  813.  
  814.               </div>
  815.               <!-- /MOODBOARD ----------------------------------------->
  816.            
  817.       </div>
  818.       </div>
  819.       <!-- End Tab four -->
  820.       </div>
  821.   </div>
  822.  
  823. </div>
  824. <div class="mx-auto" style="max-width: 800px;">
  825. <!-- CREDIT | Please do not remove! --------------------------->
  826. <div class="text-right mx-1" style="font-size: 10px;">
  827.   <a href="https://twitter.com/Gibb_Arts/status/1231018186255912961"><i class="far fa-pen text-muted tooltipster" title="Inspired by Gibbarts' ship meme"></i></a>
  828.   <a href="https://toyhou.se/9632987.-f2u-all-about-us"><i class="far fa-code text-muted tooltipster" title="Code by Sealkitty | Edited by PandoraLights"></i></a>
  829. </div>
  830. </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!