API tools faq
paste
Advertisement
meromerc

(Eat That Up) It's Good For You (Updated)

meromerc
May 17th, 2024 (edited)
639
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 28.52 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.    EAT THAT UP, IT'S GOOD FOR YOU
  4.    by meromercury
  5.    
  6.    created: 05/26/20 // last updated: 05/17/24
  7.    
  8.    accent color: #5FBBFB
  9.    highlight and ctrl+F to change
  10.    use fontawesome.com to change the symbols
  11.  
  12.  
  13. -->
  14.  
  15. <div class="container">
  16. <div class="mx-auto" style="font-size:14px;max-width:950px;">
  17.  
  18. <div class="row no-gutters">
  19.  
  20. <!------- LEFT IMAGE ------->
  21.   <div class="col-lg-4 col-sm-12 p-1">
  22.       <!----- image will automatically center & cover - dimensions 610 H x 317 W ----->
  23.       <!----- replace 'IMAGE URL' with your image url ----->
  24.       <div class="card w-100" style="position:absolute;
  25.          background-image:url(IMAGE URL);
  26.      border-radius:10px;background-size:cover;background-position:center;height:610px;z-index:-1;border: 2px dashed #5FBBFB">
  27.       </div>
  28.   </div>
  29.  
  30.  
  31. <div class="col-lg-8 col-sm-12 p-1 pl-3 pr-2">
  32.  
  33. <!-------- TAB BUTTONS -------->
  34.  
  35. <ul class="nav nav-tabs card-header-tabs row px-3 mb-2 align-items-center">
  36.     <li class="nav-item col mx-1 btn" style="background-color:#5FBBFB; padding:2px">
  37.         <a class="nav-link text-white btn h-100 border-0 active show" data-toggle="tab" href="#tab1" style="text-shadow:0px 0px 8px #5FBBFB">
  38.             <i class="fas fa-user fa-2x"></i>
  39.         </a>
  40.     </li>
  41.     <li class="nav-item col mx-1 btn" style="background-color:#5FBBFB; padding:2px">
  42.         <a class="nav-link text-white btn h-100 border-0" data-toggle="tab" href="#tab2" style="text-shadow:0px 0px 8px #5FBBFB">
  43.             <i class="fad fa-stars fa-2x"></i>
  44.         </a>
  45.     </li>
  46.     <li class="nav-item col mx-1 btn" style="background-color:#5FBBFB; padding:2px">
  47.         <a class="nav-link text-white btn h-100 border-0" data-toggle="tab" href="#tab3" style="text-shadow:0px 0px 8px #5FBBFB">
  48.             <i class="fad fa-books fa-2x"></i>
  49.         </a>
  50.     </li>
  51.     <li class="nav-item col mx-1 btn" style="background-color:#5FBBFB; padding:2px">
  52.         <a class="nav-link text-white btn h-100 border-0" data-toggle="tab" href="#tab4" style="text-shadow:0px 0px 8px #5FBBFB">
  53.             <i class="fad fa-user-friends fa-2x"></i>
  54.         </a>
  55.     </li>
  56. </ul>
  57.  
  58. <div class="bg-faded p-3 mb-2 h-100" style="border-radius:10px;max-height:555px; border:2px dashed #5FBBFB; z-index:1;">
  59. <div class="tab-content">
  60.  
  61. <!----------- TAB 1 ----------->
  62. <div class="tab-pane fade active show" id="tab1">
  63. <div class="row no-gutters container-fluid p-0" style="height:520px">
  64. <div id="accordion" class="w-100">
  65.  
  66.     <!------- ABOUT - ACCORDION 1 ------->
  67.     <div class="col-lg-12 container-fluid overflow-hidden p-0 mb-2 mx-0">
  68.     <div role="tab"><a class="btn btn-secondary btn-block border-0 mb-2 p-2" data-toggle="collapse" data-target="#accordion1" style="color:#5fbbfb; font-size:1.6rem; height:48px;">
  69.         <span class="pull-left ml-3">
  70.             About
  71.         </span>
  72.         <span class="pull-right mr-3"><i class="fa-regular fa-chevron-down fa-xs"></i></span>
  73.       </a></div>
  74.  
  75.     <div id="accordion1" class="collapse show" data-parent="#accordion">
  76.     <div class="card card-block border-0">
  77.     <div class="col-12 h-100 p-0 table-responsive container-fluid" style="max-height:300px;min-height:300px">
  78.    
  79.     <p>These sections scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus vehicula eros a rhoncus. Aenean auctor pallentesque elit, ut feugiat nibh molestie eu. Nunc sit amet lacus accumsan, tempus leo eu, condimentum mi. Morbi vitae ultrices sem. Aliquam euismod justo in nibh consectetur, id posuere eros viverra. In eu arcu semper, efficitur erat efficitur, faucibus mi. Duis varius rutrum arcu, eget blandit tortor convallis at. Etiam diam elit, mattis non leo eu, pharetra mattis urna.</p>
  80.    
  81.     <p>Nunc posuere lacus eget nisl faucibus venenatis. Donec lorem sapien, scelerisque in quam ac, condimentum mollis nisl. Donec pharetra tincidunt sem a dapibus. Mauris auctor, turpis id tristique rhoncus, metus diam vulputate ligula, eget elementum tellus neque ac metus. Donec ornare tellus interdum diam venenatis porta. Donec convallis ex in est luctus ornare. </p>
  82.    
  83.     <!------- add more paragraphs above this line! don't forget the <p> tags! ------->
  84.     </div></div>
  85.     </div>
  86.   </div>
  87.  
  88.     <!------- APPEARANCE - ACCORDION 2 ------->
  89.     <div class="col-lg-12 container-fluid overflow-hidden p-0 mb-2 mx-0">
  90.     <div role="tab"><a class="btn btn-secondary btn-block border-0 mb-2 p-2" data-toggle="collapse" data-target="#accordion2" style="color:#5FBBFB; font-size:1.6rem; height:48px">
  91.         <span class="pull-left ml-3">
  92.             Appearance
  93.         </span>
  94.         <span class="pull-right mr-3"><i class="fa-regular fa-chevron-down fa-xs"></i></span>
  95.       </a></div>
  96.  
  97.     <div id="accordion2" class="collapse" data-parent="#accordion">
  98.     <div class="card card-block border-0">
  99.     <div class="col-12 h-100 p-0 table-responsive container-fluid" style="max-height:300px;min-height:300px">
  100.     <p>Maecenas sit amet enim convallis, congue quam non, dapibus ante. Maecenas eleifend sapien at eros efficitur, et laoreet dolor mollis. Praesent aliquam, massa vitae posuere mattis, quam ligula pulvinar leo, vel porttitor ex leo sed erat. Aliquam nec purus vel enim tristique pharetra cursus nec ligula. Fusce ex erat, consequat at imperdiet sit amet, convallis eget quam. Ut finibus dolor dui, non condimentum quam tempor et.</p>
  101.    
  102.     <p>Proin dapibus, ligula id condimentum consequat, arcu lectus ultrices enim, nec ultricies felis augue quis orci. Ut eu neque a dolor posuere rhoncus. Donec nec ex nec risus tincidunt fringilla in vel nunc. Vivamus fermentum pharetra suscipit. Morbi sodales tortor sit amet convallis auctor. Aenean turpis metus, commodo vitae congue eget, rutrum vitae ipsum. Nam augue dolor, sollicitudin commodo tempor vel, tincidunt ut erat.</p>
  103.  
  104.     <p>Phasellus aliquam quam imperdiet, tempor erat in, pretium nisl. Praesent non magna et nisi dictum ultrices ac id ipsum. Pellentesque id eros sed enim dignissim maximus at non justo. Donec nec maximus mi, eu tincidunt sem. Aliquam turpis sem, efficitur hendrerit sem id, lacinia tempor dolor. Nunc convallis arcu odio, id rutrum leo pharetra a. Morbi dapibus ultrices dolor sed consequat. </p>
  105.    
  106.     <!------- add more paragraphs above this line! don't forget the <p> tags! ------->
  107.     </div></div>
  108.     </div></div>
  109.  
  110.     <!------- PERSONALITY - ACCORDION 3 ------->
  111.     <div class="col-lg-12 container-fluid overflow-hidden p-0 mb-2 mx-0">
  112.     <div role="tab"><a class="btn btn-secondary btn-block border-0 mb-2 p-2" data-toggle="collapse" data-target="#accordion3" style="color:#5FBBFB; font-size:1.6rem; height:48px">
  113.         <span class="pull-left ml-3">
  114.             Personality
  115.         </span>
  116.         <span class="pull-right mr-3"><i class="fa-regular fa-chevron-down fa-xs"></i></span>
  117.       </a></div>
  118.  
  119.     <div id="accordion3" class="collapse" data-parent="#accordion"><div class="card card-block border-0">
  120.     <div class="col-12 h-100 p-0 table-responsive container-fluid" style="max-height:295px;min-height:295px">
  121.    
  122.     <!----- TRAITS LIST ----->
  123.     <div class="row no-gutters text-center mb-0 font-italic" style="font-size:12px;">
  124.         <div class="col-lg-4 col-sm-12 text-success">
  125.             <i class="fa-solid fa-square-plus"></i>
  126.             positive, positive
  127.         </div>
  128.        
  129.         <div class="col-lg-4 col-sm-12 text-muted">
  130.             <i class="fa-solid fa-square-minus"></i>
  131.             maybe, maybe, maybe
  132.         </div>
  133.        
  134.         <div class="col-lg-4 col-sm-12 text-danger">
  135.             <i class="fa-solid fa-square-xmark"></i>
  136.             negative, negative
  137.         </div>
  138.     </div>
  139.     <hr>
  140.     <!----- end traits list ----->
  141.  
  142.     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus vehicula eros a rhoncus. Aenean auctor pellentesque elit, ut feugiat nibh molestie eu. Nunc sit amet lacus accumsan, tempus leo eu, condimentum mi. Morbi vitae ultrices sem. Aliquam euismod justo in nibh consectetur, id posuere eros viverra.</p>
  143.    
  144.     <p>Nunc posuere lacus eget nisl faucibus venenatis. Donec lorem sapien, scelerisque in quam ac, condimentum mollis nisl. Donec pharetra tincidunt sem a dapibus. Mauris auctor, turpis id tristique rhoncus, metus diam vulputate ligula, eget elementum tellus neque ac metus. Donec ornare tellus interdum diam venenatis porta. Donec convallis ex in est luctus ornare.</p>
  145.    
  146.    
  147.     <!------- add more paragraphs above this line! don't forget the <p> tags! ------->
  148.     </div></div>
  149.     </div></div>
  150.  
  151. </div>
  152.  
  153. </div>
  154. </div>
  155. <!--------- END TAB 1 --------->
  156.  
  157.  
  158. <!----------- TAB 2 ----------->
  159. <div class="tab-pane fade" id="tab2">
  160. <div class="no-gutters container-fluid table-responsive p-2" style="height:520px">
  161.  
  162.     <!------- BASICS ------->
  163.     <div class="card card-block border-0 p-2 mb-3">
  164.     <div class="row no-gutters">
  165.         <div class="col-sm">
  166.         <ul class="list-group list-group-flush">
  167.             <li class="list-group-item d-flex justify-content-between">
  168.               <i class="fas fa-user" style="color:#5FBBFB"></i>
  169.               Name
  170.               </li>
  171.             <li class="list-group-item d-flex justify-content-between">
  172.               <i class="fad fa-id-card" style="color:#5FBBFB"></i>
  173.               Pronouns
  174.               </li>
  175.             <li class="list-group-item d-flex justify-content-between">
  176.               <i class="far fa-person-half-dress" style="color:#5FBBFB"></i>
  177.               Gender
  178.               </li>
  179.             <li class="list-group-item d-flex justify-content-between">
  180.               <i class="fas fa-heart" style="color:#5FBBFB"></i>
  181.               Orientation
  182.               </li>
  183.           </ul>
  184.       </div>
  185.      
  186.       <div class="col-auto p-2 d-lg-block d-none">
  187.         <div class="card h-100" style="border-width:1px"></div>
  188.       </div>
  189.       <hr class="w-100 my-0 d-lg-none d-sm-block">
  190.      
  191.       <div class="col-sm">
  192.         <ul class="list-group list-group-flush">
  193.             <li class="list-group-item d-flex justify-content-between">
  194.               <i class="fad fa-clock" style="color:#5FBBFB"></i>
  195.               Age
  196.               </li>
  197.             <li class="list-group-item d-flex justify-content-between">
  198.               <i class="fad fa-ruler" style="color:#5FBBFB"></i>
  199.               Height
  200.               </li>
  201.             <li class="list-group-item d-flex justify-content-between">
  202.               <i class="fad fa-calendar" style="color:#5FBBFB"></i>
  203.               Birthday
  204.               </li>
  205.             <li class="list-group-item d-flex justify-content-between">
  206.               <i class="far fa-tint" style="color:#5FBBFB"></i>
  207.               Race / Species
  208.               </li>
  209.           </ul>
  210.       </div>
  211.       </div>
  212.     </div>
  213.  
  214.     <!------- STATS ------->
  215.     <div class="card card-block border-0 p-3 mb-3 text-center text-muted" style="font-size:12px;">
  216.      
  217.       <!------- you can change the text to whatever you like, by default it's MBTI types ------->
  218.      
  219.       <div class="row no-gutters align-items-center mb-1">
  220.           <div class="col order-lg-1 order-sm-1">
  221.               Introvert
  222.           </div>
  223.           <div class="col-lg-8 col order-lg-2 order-sm-3">
  224.             <!------- to change value, change "width:%" to whatever percentage you want. for example: width:25% ------->
  225.               <div class="progress"><div class="progress-bar-striped progress-bar-animated" role="progressbar" style="background-color:#5FBBFB;
  226.                    width:25%
  227.              ;height:10px"></div></div>
  228.           </div>
  229.           <div class="col order-lg-3 order-sm-2">
  230.               Extrovert
  231.           </div>
  232.       </div>
  233.       <div class="row no-gutters align-items-center mb-1">
  234.           <div class="col order-lg-1 order-sm-1">
  235.               Observant
  236.           </div>
  237.           <div class="col-lg-8 col order-lg-2 order-sm-3">
  238.             <!------- to change value, change "width:%" to whatever percentage you want. for example: width:25% ------->
  239.               <div class="progress"><div class="progress-bar-striped progress-bar-animated" role="progressbar" style="background-color:#5FBBFB;
  240.                    width:50%
  241.              ;height:10px"></div></div>
  242.           </div>
  243.           <div class="col order-lg-3 order-sm-2">
  244.               Intuitive
  245.           </div>
  246.       </div>
  247.       <div class="row no-gutters align-items-center mb-1">
  248.           <div class="col order-lg-1 order-sm-1">
  249.               Thinking
  250.           </div>
  251.           <div class="col-lg-8 col order-lg-2 order-sm-3">
  252.             <!------- to change value, change "width:%" to whatever percentage you want. for example: width:25% ------->
  253.               <div class="progress"><div class="progress-bar-striped progress-bar-animated" role="progressbar" style="background-color:#5FBBFB;
  254.                    width:75%
  255.              ;height:10px"></div></div>
  256.           </div>
  257.           <div class="col order-lg-3 order-sm-2">
  258.               Feeling
  259.           </div>
  260.       </div>
  261.       <div class="row no-gutters align-items-center">
  262.           <div class="col order-lg-1 order-sm-1">
  263.               Judging
  264.           </div>
  265.           <div class="col-lg-8 col order-lg-2 order-sm-3">
  266.             <!------- to change value, change "width:%" to whatever percentage you want. for example: width:25% ------->
  267.               <div class="progress"><div class="progress-bar-striped progress-bar-animated" role="progressbar" style="background-color:#5FBBFB;
  268.                    width:100%
  269.              ;height:10px"></div></div>
  270.           </div>
  271.           <div class="col order-lg-3 order-sm-2">
  272.               Prospecting
  273.           </div>
  274.       </div>
  275.     </div>
  276.  
  277.     <!------- LIKES / DISLIKES ------->
  278.     <div class="row m-0">
  279.  
  280.         <div class="col-lg-6 col-sm-12 mb-3 p-0 pr-sm-0 pr-lg-1">
  281.         <div class="card border-0 p-2" style="font-size:15px">
  282.             <div class="card-header bg-faded p-1 justify-content-around mb-1">
  283.                 <span style="color:#5FBBFB; font-size:1.6rem; font-variant:small-caps">
  284.                     Likes . . .
  285.                 </span></div>
  286.                
  287.           <ul class="list-group list-group-flush table-responsive" style="max-height:190px">
  288.               <li class="list-group-item justify-content-between border-0">
  289.                 <i class="fas fa-check fa-lg"></i>
  290.                 Yes
  291.               </li>
  292.               <li class="list-group-item justify-content-between">
  293.                 <i class="fas fa-check fa-lg"></i>
  294.                 Yes
  295.               </li>
  296.               <li class="list-group-item justify-content-between">
  297.                 <i class="fas fa-check fa-lg"></i>
  298.                 Yes
  299.               </li>
  300.               <li class="list-group-item justify-content-between">
  301.                 <i class="fas fa-check fa-lg"></i>
  302.                 Yes
  303.               </li>
  304.           </ul>
  305.         </div>
  306.         </div>
  307.  
  308.         <div class="col-lg-6 col-sm-12 mb-3 p-0 pl-sm-0 pl-lg-1">
  309.         <div class="card border-0 p-2" style="font-size:15px">
  310.            
  311.             <div class="card-header bg-faded p-1 justify-content-around mb-1">
  312.                 <span style="color:#5FBBFB; font-size:1.6rem; font-variant:small-caps">
  313.                     Dislikes . . .
  314.                 </span></div>
  315.            
  316.           <ul class="list-group list-group-flush table-responsive" style="max-height:190px">
  317.               <li class="list-group-item d-flex justify-content-between border-0">
  318.                 <i class="fas fa-times fa-lg"></i>
  319.                 No
  320.               </li>
  321.               <li class="list-group-item d-flex justify-content-between">
  322.                 <i class="fas fa-times fa-lg"></i>
  323.                 No
  324.               </li>
  325.               <li class="list-group-item d-flex justify-content-between">
  326.                 <i class="fas fa-times fa-lg"></i>
  327.                 No
  328.               </li>
  329.               <li class="list-group-item d-flex justify-content-between">
  330.                 <i class="fas fa-times fa-lg"></i>
  331.                 No
  332.               </li>
  333.           </ul>
  334.         </div>
  335.        </div>
  336.     </div>
  337.  
  338.  
  339.     <!------ PLAYLIST ------->
  340.     <div class="card card-block border-0 p-3" style="font-size:16px">
  341.         <div class="justify-content-between d-inline-block mx-1">
  342.            
  343.             <!----- replace "LINK" with the link to your song ----->
  344.            
  345.             <a href="https://www.youtube.com/watch?v=gcmlshqyQ_s" style="color:#5FBBFB" target=_blank><i class="fa-solid fa-play-pause"></i></a><p class="pull-right mb-0"><span class="font-weight-bold">
  346.                 Title
  347.                 </span><span class="font-italic">-
  348.                 Artist
  349.             </span><i class="fa-solid fa-music-note pl-2"></i></p>
  350.            
  351.             <hr class="my-2">
  352.            
  353.             <a href="https://www.youtube.com/watch?v=gcmlshqyQ_s" style="color:#5FBBFB" target=_blank><i class="fa-solid fa-play-pause"></i></a><p class="pull-right mb-0"><span class="font-weight-bold">
  354.                 Title
  355.                 </span><span class="font-italic">-
  356.                 Artist
  357.             </span><i class="fa-solid fa-music-note pl-2"></i></p>
  358.            
  359.             <hr class="my-2">
  360.            
  361.             <!---- SONG CODE - copy from here to end to duplicate ---->
  362.             <a href="https://www.youtube.com/watch?v=gcmlshqyQ_s" style="color:#5FBBFB" target=_blank><i class="fa-solid fa-play-pause"></i></a><p class="pull-right mb-0"><span class="font-weight-bold">
  363.                 Title
  364.                 </span><span class="font-italic">-
  365.                 Artist
  366.             </span><i class="fa-solid fa-music-note pl-2"></i></p>
  367.             <!---- end song code ---->
  368.            
  369.            
  370.             <!-----
  371.            you can add as many songs as you want above this line!
  372.            copy and paste the < hr > part to separate the songs, it goes between the song code
  373.            ----->
  374.         </div>
  375.     </div>
  376.  
  377. </div>
  378. </div>
  379. <!--------- END TAB 2 --------->
  380.  
  381.  
  382. <!----------- TAB 3 ----------->
  383. <div class="tab-pane fade" id="tab3">
  384.  
  385. <div class="row no-gutters container-fluid table-responsive p-2" style="height:520px">
  386.  
  387.     <!------- QUOTE ------->
  388.   <div class="row card card-block border-0 container-fluid table-responsive m-0 p-3 mb-3">
  389.       <div class="m-0 p-0 container-fluid mh-100">
  390.         <span class="pull-left pr-1"><i class="fas fa-quote-left fa-lg"></i></span>
  391.         <span class="pull-right pl-1"><i class="fas fa-quote-right fa-lg"></i></span>
  392.         <h2 style="color:#5FBBFB;" class="text-center font-italic">
  393.             It's too late, it's too late / You've got another one coming and it's gonna be the same
  394.         </h2>
  395.         </div>
  396.   </div>
  397.  
  398.     <!------- BIOGRAPHY ------->
  399.   <div class="card card-block border-0 container-fluid table-responsive m-0 p-3">
  400.       <h2 style="color:#5FBBFB;  font-size:24px" class="card-header bg-faded text-center px-1 py-2 mb-2 border-0">
  401.           Biography
  402.       </h2>
  403.    
  404.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus vehicula eros a rhoncus. Aenean auctor pallentesque elit, ut feugiat nibh molestie eu. Nunc sit amet lacus accumsan, tempus leo eu, condimentum mi. Morbi vitae ultrices sem. Aliquam euismod justo in nibh consectetur, id posuere eros viverra. In eu arcu semper, efficitur erat efficitur, faucibus mi. Duis varius rutrum arcu, eget blandit tortor convallis at. Etiam diam elit, mattis non leo eu, pharetra mattis urna.</p>
  405.        
  406.         <p>Nunc posuere lacus eget nisl faucibus venenatis. Donec lorem sapien, scelerisque in quam ac, condimentum mollis nisl. Donec pharetra tincidunt sem a dapibus. Mauris auctor, turpis id tristique rhoncus, metus diam vulputate ligula, eget elementum tellus neque ac metus. Donec ornare tellus interdum diam venenatis porta. Donec convallis ex in est luctus ornare.</p>
  407.        
  408.         <!-----
  409.        SUBHEADER START
  410.        copy to end and paste for more subheaders
  411.        You can change the fontawesome icons to whatever you'd like! (just leave the mx-3 part)
  412.        or remove them if you don't want them. that works too!
  413.        ----->
  414.         <div class="bg-faded rounded my-2 p-1 px-2 text-center" style="font-variant:small-caps; color:#5FBBFB; font-size:16px">
  415.             <i class="fa-duotone fa-bookmark mx-3"></i>
  416.             Subheader
  417.             <i class="fa-duotone fa-bookmark mx-3"></i>
  418.         </div>
  419.         <!----- SUBHEADER END ----->
  420.        
  421.         <p>Donec laoreet dui et massa sollicitudin ornare. Integer sed libero sit amet ipsum convallis suscipit. Nullam pretium porta nisi, eget euismod eros tempus et. Vivamus nulla arcu, mattis ac volutpat vel, scelerisque a neque. Sed tincidunt metus quis nunc egestas varius vel et arcu. Vivamus placerat est at efficitur vulputate. Curabitur cursus urna id semper sollicitudin. Maecenas pulvinar varius massa at sollicitudin.</p>
  422.        
  423.         <p>Vivamus pellentesque odio et massa pulvinar luctus. Curabitur ut velit luctus, condimentum dui blandit, efficitur libero. Donec eu nisi sit amet lorem rutrum facilisis ut eget odio. Phasellus tempus ornare eros iaculis sollicitudin. Pellentesque sed posuere magna.</p>
  424.        
  425.        
  426.         <!----- put your text or subheaders above this line! ----->
  427.   </div>
  428.  
  429.  
  430. </div>
  431. </div>
  432. <!--------- END TAB 3 --------->
  433.  
  434.  
  435. <!----------- TAB 4 ----------->
  436. <div class="tab-pane fade" id="tab4">
  437. <div class="container pr-1 pl-1 table-responsive" style="height:520px">
  438.  
  439.  
  440. <!------- RELATIONSHIP CODE ------->
  441. <!------- copy from here to end and paste below for more relationships ------->
  442. <div class="card border-0 mb-3"><div class="row no-gutters">
  443.     <div class="col-md-3 col-sm-12 mb-3">
  444.          <div class="card rounded-circle mx-auto mt-3" style="background-image:url(https://i.imgur.com/XNO9z5Q.png);background-position:center;background-size:cover;width:110px;height:110px; border:2px solid #5FBBFB"></div>
  445.          <div class="text-center mx-auto px-3 text-break" style="max-height:135px;overflow-y:auto;overflow-x:hidden">
  446.              
  447.              <!----- replace "CHARACTER LINK" with the link to your character - remember the "QUOTES" around the link ----->
  448.              <a href="CHARACTER LINK" style="color:#5FBBFB; font-size:1.1rem; font-variant:small-caps">
  449.                  Name
  450.              </a>
  451.             <p class="text-muted mb-0 text-lowercase" style="font-size:13px">
  452.                 Relationship
  453.             </p>
  454.            
  455.           <!----- you can replace these fontawesome icons with whatever you like! max of 5 icons at most----->
  456.           <span class="text-center text-muted" style="font-size:14px">
  457.             <i class="fas fa-heart"></i>
  458.             <i class="fas fa-heart"></i>
  459.             <i class="fas fa-heart"></i>
  460.             <i class="far fa-heart"></i>
  461.             <i class="far fa-heart"></i>
  462.           </span>
  463.          </div>
  464.      </div>
  465.     <div class="col-md-9 col-sm-12 pl-1 pr-3 pt-3 mb-2 h-100" style="max-height:260px;overflow-y:auto;overflow-x:hidden">
  466.         <div style="font-size:13px;">
  467.          
  468.             <p>This card will scroll, but I suggest you keep it short. Maybe a few sentences at most. No long names, either.</p>
  469.            
  470.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vehicula tortor ac urna fringilla eleifend. Ut pellentesque est vel tortor lobortis, quis aliquet eros lobortis. Nulla sit amet commodo velit. Praesent eget nibh diam. Ut a orci sed orci efficitur mollis. Ut lorem dui, tincidunt vitae ultrices eu, ultricies id mauris.</p>
  471.            
  472.             <!----- add more <p> text </p> above this line! ----->
  473.         </div>
  474.     </div>
  475.     </div>
  476. </div>
  477. <!------- END RELATIONSHIP CODE ------->
  478.  
  479. <!------- RELATIONSHIP CODE ------->
  480. <!------- copy from here to end and paste below for more relationships ------->
  481. <div class="card border-0 mb-3"><div class="row no-gutters">
  482.     <div class="col-md-3 col-sm-12 mb-3">
  483.          <div class="card rounded-circle mx-auto mt-3" style="background-image:url(https://i.imgur.com/XNO9z5Q.png);background-position:center;background-size:cover;width:110px;height:110px; border:2px solid #5FBBFB"></div>
  484.          <div class="text-center mx-auto px-3 text-break" style="max-height:135px;overflow-y:auto;overflow-x:hidden">
  485.              
  486.              <!----- replace "CHARACTER LINK" with the link to your character - remember the "QUOTES" around the link ----->
  487.              <a href="CHARACTER LINK" style="color:#5FBBFB; font-size:1.1rem; font-variant:small-caps">
  488.                  Name
  489.              </a>
  490.             <p class="text-muted mb-0 text-lowercase" style="font-size:13px">
  491.                 Relationship
  492.             </p>
  493.            
  494.           <!----- you can replace these fontawesome icons with whatever you like! max of 5 icons at most----->
  495.           <span class="text-center text-muted" style="font-size:14px">
  496.             <i class="fas fa-heart"></i>
  497.             <i class="fas fa-heart"></i>
  498.             <i class="fas fa-heart"></i>
  499.             <i class="far fa-heart"></i>
  500.             <i class="far fa-heart"></i>
  501.           </span>
  502.          </div>
  503.      </div>
  504.     <div class="col-md-9 col-sm-12 pl-1 pr-3 pt-3 mb-2 h-100" style="max-height:260px;overflow-y:auto;overflow-x:hidden">
  505.         <div style="font-size:13px;">
  506.          
  507.             <p>This card will scroll, but I suggest you keep it short. Maybe a few sentences at most. No long names, either.</p>
  508.            
  509.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vehicula tortor ac urna fringilla eleifend. Ut pellentesque est vel tortor lobortis, quis aliquet eros lobortis. Nulla sit amet commodo velit. Praesent eget nibh diam. Ut a orci sed orci efficitur mollis. Ut lorem dui, tincidunt vitae ultrices eu, ultricies id mauris.</p>
  510.            
  511.             <!----- add more <p> text </p> above this line! ----->
  512.         </div>
  513.     </div>
  514.     </div>
  515. </div>
  516. <!------- END RELATIONSHIP CODE ------->
  517.  
  518.  
  519. <!------- RELATIONSHIP CODE ------->
  520. <!------- copy from here to end and paste below for more relationships ------->
  521. <div class="card border-0 mb-3"><div class="row no-gutters">
  522.     <div class="col-md-3 col-sm-12 mb-3">
  523.          <div class="card rounded-circle mx-auto mt-3" style="background-image:url(https://i.imgur.com/XNO9z5Q.png);background-position:center;background-size:cover;width:110px;height:110px; border:2px solid #5FBBFB"></div>
  524.          <div class="text-center mx-auto px-3 text-break" style="max-height:135px;overflow-y:auto;overflow-x:hidden">
  525.              
  526.              <!----- replace "CHARACTER LINK" with the link to your character - remember the "QUOTES" around the link ----->
  527.              <a href="CHARACTER LINK" style="color:#5FBBFB; font-size:1.1rem; font-variant:small-caps">
  528.                  Name
  529.              </a>
  530.             <p class="text-muted mb-0 text-lowercase" style="font-size:13px">
  531.                 Relationship
  532.             </p>
  533.            
  534.           <!----- you can replace these fontawesome icons with whatever you like! max of 5 icons at most----->
  535.           <span class="text-center text-muted" style="font-size:14px">
  536.             <i class="fas fa-heart"></i>
  537.             <i class="fas fa-heart"></i>
  538.             <i class="fas fa-heart"></i>
  539.             <i class="far fa-heart"></i>
  540.             <i class="far fa-heart"></i>
  541.           </span>
  542.          </div>
  543.      </div>
  544.     <div class="col-md-9 col-sm-12 pl-1 pr-3 pt-3 mb-2 h-100" style="max-height:260px;overflow-y:auto;overflow-x:hidden">
  545.         <div style="font-size:13px;">
  546.          
  547.             <p>This card will scroll, but I suggest you keep it short. Maybe a few sentences at most. No long names, either.</p>
  548.            
  549.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vehicula tortor ac urna fringilla eleifend. Ut pellentesque est vel tortor lobortis, quis aliquet eros lobortis. Nulla sit amet commodo velit. Praesent eget nibh diam. Ut a orci sed orci efficitur mollis. Ut lorem dui, tincidunt vitae ultrices eu, ultricies id mauris.</p>
  550.            
  551.             <!----- add more <p> text </p> above this line! ----->
  552.         </div>
  553.     </div>
  554.     </div>
  555. </div>
  556. <!------- END RELATIONSHIP CODE ------->
  557.  
  558.  
  559.  
  560. <!------- PASTE RELATIONSHIPS ABOVE THIS LINE ------->
  561.  
  562. </div>
  563. </div>
  564. <!--------- END TAB 4 --------->
  565.  
  566. </div>
  567. </div>
  568.  
  569. </div>
  570. </div>
  571. </div>
  572.  
  573. <!----- my credit! please don't touch this ----->
  574. <div class="m-1 text-center text-primary" style="font-size:14px">
  575. <a target="_blank" href="https://toyhou.se/meromercury" data-toggle="tooltip" title="code" style="color:#A4A4A4;font-weight:600"><i class="fal fa-code"></i></a></div></div>
  576.  
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!