API tools faq
paste
icecreampizzer

TH CODE 19 || TOP SECRET REMASTERED (Bootstrap Colors)

icecreampizzer
Sep 24th, 2021 (edited)
788
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 41.17 KB | None | 0 0
raw download clone embed print report
  1. <!-- 19 || TOP SECRET REMASTERED by icecreampizzeria (BOOTSTRAP)
  2.     CUSTOM COLOR VER can be found here: https://pastebin.com/meemhd8d
  3.    
  4.    RULES:
  5.        - Don't remove my credit please!
  6.        - Feel free to modify/frankenstein as much as you want!
  7.        - Don't redistribute my codes please!
  8.    
  9.    find (ctrl + f) URLHERE for links, IMGHERE for image addresses
  10.    
  11.     Please be careful with deleting sections! There's some parts that makes the navigation work, so avoid deleting parts where '<a id="number"></a>' is contained in. It's easy to avoid if you're using the code as is though!
  12.    
  13. -->
  14.  
  15. <!-- //////////////////// WHOLE THING //////////////////// -->
  16. <div class="container p-0" style="max-width: 1000px;">
  17.     <div class="bg-faded p-2">
  18.        
  19.        
  20.         <!-- //////////////////// TITLE //////////////////// -->
  21.         <div class="card border-0 rounded-0 p-3 text-center mb-2">
  22.             <p class="display-3 text-primary mb-1">CHARACTER NAME</p>
  23.             <hr class="w-75 my-1 bg-primary" style="opacity: 0.5; height: 1px;">
  24.             <p class="display-4 text-muted" style="font-size: 1.5rem;">subtitle</p>
  25.         </div>
  26.         <a id="one"></a>
  27.         <!-- //////////////////// END TITLE //////////////////// -->
  28.        
  29.         <!-- //////////////////// NAV //////////////////// -->
  30.         <div class="sticky-top" style="z-index: 999;">
  31.             <div class="p-lg-3 mb-2 text-center text-muted card border-0 rounded-0 px-lg-5 p-3">
  32.                 <span class="d-flex justify-content-between px-lg-5">
  33.                     <a href="#one"><i class="far fa-user fa-lg mx-1"></i></a>
  34.                     <a href="#two"><i class="far fa-pencil fa-lg mx-1"></i></a>
  35.                     <a href="#three"><i class="far fa-book fa-lg mx-1"></i></a>
  36.                     <a href="#four"><i class="far fa-thumbtack fa-lg mx-1"></i></a>
  37.                     <a href="#five"><i class="far fa-users fa-lg mx-1"></i></a>
  38.                     <a href="#" class="text-secondary"><i class="far fa-chevron-double-up fa-lg mx-1"></i></a>
  39.                 </span>
  40.             </div>
  41.         </div>
  42.         <!-- //////////////////// END NAV //////////////////// -->
  43.        
  44.        
  45.         <div class="row no-gutters">
  46.            
  47.             <!-- //////////////////// MAIN IMAGE //////////////////// -->
  48.             <div class="col-lg-4 mb-lg-2 push-lg-4" style="
  49.                background:url(IMGHERE) center no-repeat;
  50.                background-size: cover;
  51.                min-height: 400px;">
  52.             </div>
  53.            
  54.            
  55.             <!-- //////////////////// BASICS //////////////////// -->
  56.             <div class="col-lg-4 card border-0 rounded-0 p-3 mb-lg-2 pull-lg-4">
  57.                
  58.                 <div class="display-4 text-primary mb-2 d-flex justify-content-between" style="font-size: 1.7rem;">
  59.                     <p>BASICS</p>
  60.                     <i class="fal fa-user my-auto"></i>
  61.                 </div>
  62.                
  63.                 <hr class="w-100 my-1 bg-primary" style="opacity: 0.5; height: 1px;">
  64.                
  65.                 <div class="mt-2">
  66.                    
  67.                     <div class="d-flex justify-content-between">
  68.                         <p class="text-muted">NAME</p>
  69.                         <span class="text-right">content</span>
  70.                     </div>
  71.                    
  72.                     <hr class="my-2 w-100">
  73.                    
  74.                     <div class="d-flex justify-content-between">
  75.                         <p class="text-muted">AGE</p>
  76.                         <span class="text-right">content</span>
  77.                     </div>
  78.                    
  79.                     <hr class="my-2 w-100">
  80.                    
  81.                    
  82.                     <div class="d-flex justify-content-between">
  83.                         <p class="text-muted">BIRTHDAY</p>
  84.                         <span class="text-right">content</span>
  85.                     </div>
  86.                    
  87.                     <hr class="my-2 w-100">
  88.                    
  89.                     <div class="d-flex justify-content-between">
  90.                         <p class="text-muted">ETHNICITY</p>
  91.                         <span class="text-right">content</span>
  92.                     </div>
  93.                    
  94.                     <hr class="my-2 w-100">
  95.                    
  96.                     <div class="d-flex justify-content-between">
  97.                         <p class="text-muted">GENDER</p>
  98.                         <span class="text-right">content</span>
  99.                     </div>
  100.                    
  101.                     <hr class="my-2 w-100">
  102.                    
  103.                     <div class="d-flex justify-content-between">
  104.                         <p class="text-muted">ORIENTATION</p>
  105.                         <span class="text-right">content</span>
  106.                     </div>
  107.                    
  108.                     <hr class="my-2 w-100">
  109.                    
  110.                     <div class="d-flex justify-content-between">
  111.                         <p class="text-muted">OCCUPATION</p>
  112.                         <span class="text-right">content</span>
  113.                     </div>
  114.                    
  115.                     <hr class="my-2 w-100">
  116.                    
  117.                     <div class="d-flex justify-content-between">
  118.                         <p class="text-muted">ROLE</p>
  119.                         <span class="text-right">content</span>
  120.                     </div>
  121.                    
  122.                     <hr class="my-2 w-100">
  123.                    
  124.                     <div class="d-flex justify-content-between">
  125.                         <p class="text-muted">DESIGNER</p>
  126.                         <a href="https://toyhou.se/icecreampizzer" class="text-right">content</a>
  127.                     </div>
  128.        
  129.                 </div>
  130.             </div>
  131.             <!-- //////////////////// END BASICS //////////////////// -->
  132.            
  133.            
  134.             <!-- //////////////////// STATS - change 'text-primary' and 'text-dark' to adjust stats. //////////////////// -->
  135.             <div class="col-lg-4 card border-0 rounded-0 p-3 mb-2">
  136.                
  137.                 <div class="display-4 text-primary mb-2 d-flex justify-content-between" style="font-size: 1.7rem;">
  138.                     <p>STATS</p>
  139.                     <i class="fal fa-star my-auto"></i>
  140.                 </div>
  141.                
  142.                 <hr class="w-100 my-1 bg-primary" style="opacity: 0.5; height: 1px;">
  143.                
  144.                 <div class="mt-2">
  145.                    
  146.                     <div class="d-flex justify-content-between">
  147.                         <p class="text-muted">EXTRAVERSION</p>
  148.                         <span class="text-right">
  149.                             <i class="fas fa-star text-primary"></i>
  150.                             <i class="fas fa-star text-primary"></i>
  151.                             <i class="fas fa-star text-primary"></i>
  152.                             <i class="fas fa-star text-dark"></i>
  153.                             <i class="fas fa-star text-dark"></i>
  154.                         </span>
  155.                     </div>
  156.                    
  157.                     <hr class="my-2 w-100">
  158.                    
  159.                     <div class="d-flex justify-content-between">
  160.                         <p class="text-muted">CHARISMA</p>
  161.                         <span class="text-right">
  162.                             <i class="fas fa-star text-primary"></i>
  163.                             <i class="fas fa-star text-primary"></i>
  164.                             <i class="fas fa-star text-primary"></i>
  165.                             <i class="fas fa-star text-dark"></i>
  166.                             <i class="fas fa-star text-dark"></i>
  167.                         </span>
  168.                     </div>
  169.                    
  170.                     <hr class="my-2 w-100">
  171.                    
  172.                     <div class="d-flex justify-content-between">
  173.                         <p class="text-muted">HUMILITY</p>
  174.                         <span class="text-right">
  175.                             <i class="fas fa-star text-primary"></i>
  176.                             <i class="fas fa-star text-primary"></i>
  177.                             <i class="fas fa-star text-primary"></i>
  178.                             <i class="fas fa-star text-dark"></i>
  179.                             <i class="fas fa-star text-dark"></i>
  180.                         </span>
  181.                     </div>
  182.                    
  183.                     <hr class="my-2 w-100">
  184.                    
  185.                     <div class="d-flex justify-content-between">
  186.                         <p class="text-muted">EMPATHY</p>
  187.                         <span class="text-right">
  188.                             <i class="fas fa-star text-primary"></i>
  189.                             <i class="fas fa-star text-primary"></i>
  190.                             <i class="fas fa-star text-primary"></i>
  191.                             <i class="fas fa-star text-dark"></i>
  192.                             <i class="fas fa-star text-dark"></i>
  193.                         </span>
  194.                     </div>
  195.                    
  196.                     <hr class="my-2 w-100">
  197.                    
  198.                     <div class="d-flex justify-content-between">
  199.                         <p class="text-muted">PATIENCE</p>
  200.                         <span class="text-right">
  201.                             <i class="fas fa-star text-primary"></i>
  202.                             <i class="fas fa-star text-primary"></i>
  203.                             <i class="fas fa-star text-primary"></i>
  204.                             <i class="fas fa-star text-dark"></i>
  205.                             <i class="fas fa-star text-dark"></i>
  206.                         </span>
  207.                     </div>
  208.                    
  209.                     <hr class="my-2 w-100">
  210.                    
  211.                     <div class="d-flex justify-content-between">
  212.                         <p class="text-muted">DISCIPLINE</p>
  213.                         <span class="text-right">
  214.                             <i class="fas fa-star text-primary"></i>
  215.                             <i class="fas fa-star text-primary"></i>
  216.                             <i class="fas fa-star text-primary"></i>
  217.                             <i class="fas fa-star text-dark"></i>
  218.                             <i class="fas fa-star text-dark"></i>
  219.                         </span>
  220.                     </div>
  221.                    
  222.                     <hr class="my-2 w-100">
  223.                    
  224.                     <div class="d-flex justify-content-between">
  225.                         <p class="text-muted">HUMOR</p>
  226.                         <span class="text-right">
  227.                             <i class="fas fa-star text-primary"></i>
  228.                             <i class="fas fa-star text-primary"></i>
  229.                             <i class="fas fa-star text-primary"></i>
  230.                             <i class="fas fa-star text-dark"></i>
  231.                             <i class="fas fa-star text-dark"></i>
  232.                         </span>
  233.                     </div>
  234.                    
  235.                     <hr class="my-2 w-100">
  236.                    
  237.                     <div class="d-flex justify-content-between">
  238.                         <p class="text-muted">INTELLECT</p>
  239.                         <span class="text-right">
  240.                             <i class="fas fa-star text-primary"></i>
  241.                             <i class="fas fa-star text-primary"></i>
  242.                             <i class="fas fa-star text-primary"></i>
  243.                             <i class="fas fa-star text-dark"></i>
  244.                             <i class="fas fa-star text-dark"></i>
  245.                         </span>
  246.                     </div>
  247.                    
  248.                     <hr class="my-2 w-100">
  249.                    
  250.                    
  251.                     <div class="d-flex justify-content-between">
  252.                         <p class="text-muted">CREATIVITY</p>
  253.                         <span class="text-right">
  254.                             <i class="fas fa-star text-primary"></i>
  255.                             <i class="fas fa-star text-primary"></i>
  256.                             <i class="fas fa-star text-primary"></i>
  257.                             <i class="fas fa-star text-dark"></i>
  258.                             <i class="fas fa-star text-dark"></i>
  259.                         </span>
  260.                     </div>
  261.        
  262.                 </div>
  263.                
  264.             </div>
  265.             <!-- //////////////////// END STATS //////////////////// -->
  266.            
  267.            
  268.             <!-- //////////////////// COLORS - copy a line of <div></div> and paste it anywhere above the line indicated! Each color is one line each, so it should be easy to add/remove. //////////////////// -->
  269.             <div class="col-lg-12 card border-0 rounded-0 p-2 mb-2"> <a id="two"></a>
  270.                 <div class="row no-gutters">
  271.                     <div class="col py-3" style="background: #290A03;"></div>
  272.                     <div class="col py-3" style="background: #5D3323;"></div>
  273.                     <div class="col py-3" style="background: #865744;"></div>
  274.                     <div class="col py-3" style="background: #550602;"></div>
  275.                     <div class="col py-3" style="background: #8E2419;"></div>
  276.                     <div class="col py-3" style="background: #4F5064;"></div>
  277.                     <div class="col py-3" style="background: #F5B561;"></div>
  278.                     <div class="col py-3" style="background: #EECFCE;"></div>
  279.                    
  280.                    
  281.                     <!-- //////////////////// add more colors ABOVE this line! //////////////////// -->
  282.                 </div>
  283.             </div>
  284.            
  285.             <!-- //////////////////// IMAGE - ABOUT //////////////////// -->
  286.             <div class="col-lg-5 mb-lg-2" style="
  287.                background:url(IMGHERE) center no-repeat;
  288.                background-size: cover;
  289.                min-height: 200px;">
  290.             </div>
  291.            
  292.             <!-- //////////////////// ABOUT //////////////////// -->
  293.             <div class="col-lg-7 card border-0 rounded-0 p-3 mb-2">
  294.                 <div class="display-4 text-primary mb-2 d-flex justify-content-between" style="font-size: 1.7rem;">
  295.                     <p>ABOUT</p>
  296.                     <i class="fal fa-pencil-alt my-auto"></i>
  297.                 </div>
  298.                
  299.                 <hr class="w-100 my-1 bg-primary" style="opacity: 0.5; height: 1px;">
  300.                
  301.                 <!-- //////////////////// TEXT //////////////////// -->
  302.                 <div class="mt-2 text-justify">
  303.                     <p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish.</p>
  304.                    
  305.                     <p>In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.
  306.                     </p>
  307.                    
  308.                    
  309.                     <!-- //////////////////// add more paragraphs ABOVE this line! //////////////////// -->
  310.                 </div>
  311.                
  312.                 <div class="row mt-3">
  313.                    
  314.                     <!-- //////////////////// LIKES //////////////////// -->
  315.                     <div class="col-lg-6 mb-lg-0 mb-3">
  316.                         <div class="display-4 text-primary mb-2 d-flex justify-content-between" style="font-size: 1.7rem;">
  317.                             <p>LIKES</p>
  318.                             <i class="far fa-heart my-auto"></i>
  319.                         </div>
  320.                        
  321.                         <hr class="w-100 my-1 bg-primary" style="opacity: 0.5; height: 1px;">
  322.                    
  323.                         <ul class="mt-2" style="margin-left: -40px; margin-bottom: 0; list-style-type: none;">
  324.                            
  325.                             <li><i class="fas fa-heart fa-sm mr-2"></i>content</li>
  326.                             <li><i class="fas fa-heart fa-sm mr-2"></i>content</li>
  327.                             <li><i class="fas fa-heart fa-sm mr-2"></i>content</li>
  328.                             <li><i class="fas fa-heart fa-sm mr-2"></i>content</li>
  329.                             <li><i class="fas fa-heart fa-sm mr-2"></i>content</li>
  330.                            
  331.                            
  332.                             <!-- //////////////////// add more items ABOVE this line! //////////////////// -->
  333.                         </ul>
  334.                     </div>
  335.                     <!-- //////////////////// END LIKES //////////////////// -->
  336.                    
  337.                    
  338.                     <!-- //////////////////// DISLIKES //////////////////// -->
  339.                     <div class="col-lg-6">
  340.                         <div class="display-4 text-primary mb-2 d-flex justify-content-between" style="font-size: 1.7rem;">
  341.                             <p>DISLIKES</p>
  342.                             <i class="far fa-heart-broken my-auto"></i>
  343.                         </div>
  344.                        
  345.                         <hr class="w-100 my-1 bg-primary" style="opacity: 0.5; height: 1px">
  346.                        
  347.                         <ul class="mt-2" style="margin-left: -40px; margin-bottom: 0; list-style-type: none;">
  348.                            
  349.                             <li><i class="fas fa-heart-broken fa-sm mr-2"></i>content</li>
  350.                             <li><i class="fas fa-heart-broken fa-sm mr-2"></i>content</li>
  351.                             <li><i class="fas fa-heart-broken fa-sm mr-2"></i>content</li>
  352.                             <li><i class="fas fa-heart-broken fa-sm mr-2"></i>content</li>
  353.                             <li><i class="fas fa-heart-broken fa-sm mr-2"></i>content</li>
  354.                            
  355.                            
  356.                             <!-- //////////////////// add more items ABOVE this line! //////////////////// -->
  357.                         </ul>
  358.                     </div>
  359.                     <!-- //////////////////// END DISLIKES //////////////////// -->
  360.                 </div>
  361.             </div>
  362.             <!-- //////////////////// END ABOUT //////////////////// -->  
  363.            
  364.            
  365.             <!-- //////////////////// BACKGROUND HEADER //////////////////// -->
  366.             <div class="col-lg-12 card border-0 rounded-0" style="
  367.                background: url(IMGHERE) center no-repeat;
  368.                background-size: cover;
  369.                height: 150px;"><a id="three"></a>
  370.             </div>
  371.            
  372.            
  373.             <!-- //////////////////// BACKGROUND //////////////////// -->
  374.             <div class="col-lg-12 card border-0 rounded-0 p-3 mb-2">
  375.                 <div class="display-4 text-primary mb-2 d-flex justify-content-between" style="font-size: 1.7rem;">
  376.                     <p>BACKGROUND</p>
  377.                     <i class="far fa-book my-auto"></i>
  378.                 </div>
  379.                
  380.                 <hr class="w-100 my-1 bg-primary" style="opacity: 0.5; height: 1px">
  381.                 <div class="text-justify">
  382.                    
  383.                     <!-- //////////////////// HEADER //////////////////// -->
  384.                     <p class="text-muted display-4 mb-2 mt-3" style="font-size: 1.5rem;">
  385.                         HEADER ONE
  386.                     </p>
  387.                    
  388.                     <p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.
  389.                     </p>
  390.                    
  391.                     <hr class="w-100 my-1 bg-primary" style="opacity: 0.5">
  392.                    
  393.                     <!-- //////////////////// HEADER //////////////////// -->
  394.                     <p class="text-muted display-4 mb-2 mt-3" style="font-size: 1.5rem;">
  395.                         HEADER TWO
  396.                     </p>
  397.                    
  398.                     <p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.
  399.                     </p>
  400.                    
  401.                     <hr class="w-100 my-1 bg-primary" style="opacity: 0.5">
  402.                    
  403.                     <!-- //////////////////// HEADER //////////////////// -->
  404.                     <p class="text-muted display-4 mb-2 mt-3" style="font-size: 1.5rem;">
  405.                         HEADER THREE
  406.                     </p>
  407.                    
  408.                     <p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.
  409.                     </p>
  410.                    
  411.                    
  412.                     <!-- //////////////////// Add more sections ABOVE this line! //////////////////// -->
  413.                 </div>
  414.             </div>
  415.             <!-- //////////////////// END BACKGROUND //////////////////// -->
  416.            
  417.            
  418.             <!-- //////////////////// QUOTE //////////////////// -->
  419.             <div class="col-lg-12 card border-0 rounded-0 p-3 mb-2 display-4 text-primary text-center" style="font-size: 1.7rem;"><a id="four"></a>
  420.                 <span>
  421.                     <i class="fal fa-quote-left mr-1"></i>
  422.                     Quote Here. Hello!
  423.                     <i class="fal fa-quote-right ml-1"></i>
  424.                 </span>
  425.             </div>
  426.            
  427.            
  428.             <!-- //////////////////// IMAGE - TRIVIA //////////////////// -->
  429.             <div class="col-lg-5 push-lg-7 p-3 mb-lg-2" style="
  430.                background:url(IMGHERE) center no-repeat;
  431.                background-size: cover;
  432.                min-height: 200px;">
  433.             </div>
  434.            
  435.            
  436.             <!-- //////////////////// TRIVIA //////////////////// -->
  437.             <div class="col-lg-7 pull-lg-5 card border-0 rounded-0 p-3 mb-2">
  438.                
  439.                 <!-- //////////////////// TRIVIA //////////////////// -->
  440.                 <div class="display-4 text-primary mb-2 d-flex justify-content-between" style="font-size: 1.7rem;">
  441.                     <p>TRIVIA</p>
  442.                     <i class="far fa-thumbtack my-auto"></i>
  443.                 </div>
  444.                
  445.                 <hr class="w-100 my-1 bg-primary" style="opacity: 0.5; height: 1px;">
  446.                
  447.                 <ul class="mt-2" style="margin-left: -40px; margin-bottom: 0; list-style-type: none;">
  448.                    
  449.                     <li><i class="fas fa-thumbtack fa-sm mr-2"></i>These cases are perfectly simple and easy to distinguish.</li>
  450.                    
  451.                     <li><i class="fas fa-thumbtack fa-sm mr-2"></i>In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best.</li>
  452.                    
  453.                     <li><i class="fas fa-thumbtack fa-sm mr-2"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  454.                    
  455.                     <li><i class="fas fa-thumbtack fa-sm mr-2"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  456.                    
  457.                     <li><i class="fas fa-thumbtack fa-sm mr-2"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  458.                    
  459.                    
  460.                     <!-- //////////////////// add more items ABOVE this line! //////////////////// -->
  461.                 </ul>
  462.                 <!-- //////////////////// END TRIVIA //////////////////// -->
  463.                
  464.                 <!-- //////////////////// PLAYLIST - to add more songs, copy from '<div class="d-flex...">' to '<hr class="...">' and paste anywhere within this section. For the last song in the list, you can delete the <hr> //////////////////// -->
  465.                 <div class="display-4 text-primary mt-3 mb-2 d-flex justify-content-between" style="font-size: 1.7rem;">
  466.                     <p>PLAYLIST</p>
  467.                     <i class="far fa-music my-auto"></i>
  468.                 </div>
  469.                
  470.                 <hr class="w-100 mt-1 bg-primary" style="opacity: 0.5; height: 1px;">
  471.                
  472.                 <div class="d-flex justify-content-between">
  473.                     <p class="my-auto" style="text-transform: uppercase;">
  474.                         <a href="URLHERE">Music Title</a></p>
  475.                     <p class="my-auto">Artist</p>
  476.                 </div>
  477.                
  478.                 <hr class="my-2 w-100">
  479.                
  480.                 <div class="d-flex justify-content-between">
  481.                     <p class="my-auto" style="text-transform: uppercase;">
  482.                         <a href="URLHERE">Music Title</a></p>
  483.                     <p class="my-auto">Artist</p>
  484.                 </div>
  485.                
  486.                 <hr class="my-2 w-100">
  487.                
  488.                 <div class="d-flex justify-content-between">
  489.                     <p class="my-auto" style="text-transform: uppercase;">
  490.                         <a href="URLHERE">Music Title</a></p>
  491.                     <p class="my-auto">Artist</p>
  492.                 </div>
  493.                
  494.                 <hr class="my-2 w-100">
  495.                
  496.                 <div class="d-flex justify-content-between">
  497.                     <p class="my-auto" style="text-transform: uppercase;">
  498.                         <a href="URLHERE">Music Title</a></p>
  499.                     <p class="my-auto">Artist</p>
  500.                 </div>
  501.                
  502.                 <hr class="my-2 w-100">
  503.                
  504.                 <div class="d-flex justify-content-between">
  505.                     <p class="my-auto" style="text-transform: uppercase;">
  506.                         <a href="URLHERE">Music Title</a></p>
  507.                     <p class="my-auto">Artist</p>
  508.                 </div>
  509.                
  510.                
  511.             <!-- //////////////////// add more songs ABOVE this line! //////////////////// -->
  512.             </div>
  513.             <!-- //////////////////// END TRIVIA //////////////////// -->
  514.            
  515.            
  516.             <!-- //////////////////// RELATIONSHIPS HEADER //////////////////// -->
  517.             <div class="col-lg-12 card border-0 rounded-0" style="
  518.                background: url(IMGHERE) center no-repeat;
  519.                background-size: cover;
  520.                height: 150px;"><a id="five"></a>
  521.             </div>
  522.            
  523.            
  524.             <!-- //////////////////// RELATIONSHIPS //////////////////// -->
  525.             <div class="col-lg-12 card border-0 rounded-0 p-3">
  526.                 <div class="display-4 text-primary mb-2 d-flex justify-content-between" style="font-size: 1.7rem;">
  527.                     <p>RELATIONSHIPS</p>
  528.                     <i class="far fa-users my-auto"></i>
  529.                    
  530.                
  531.                 </div>
  532.                
  533.                 <hr class="w-100 my-1 bg-primary" style="opacity: 0.5; height: 1px;">
  534.                
  535.                 <div class="mt-2 row no-gutters d-flex justify-content-center">
  536.                    
  537.                     <!-- CHARACTER - to add more characters, copy from this line to END CHARACTER, and paste it anywhere above the line indicated! -->
  538.                     <div class="col-lg-6 row no-gutters mb-3">
  539.                         <div class="col-lg-4 d-flex">
  540.                             <div class="mx-auto my-2 text-primary card rounded-0" style="
  541.                            background: url(IMGHERE) center no-repeat;
  542.                            background-size: cover;
  543.                            height: 120px;
  544.                            width: 120px;">
  545.                                
  546.                                 <a href="URLHERE" class="flex-fill btn btn-outline-secondary rounded-0" style="
  547.                                    border: 4px double;
  548.                                    mix-blend-mode: screen"></a>
  549.                             </div>
  550.                         </div>
  551.                        
  552.                         <div class="col-lg p-2">
  553.                
  554.                             <div class="text-muted display-4 mb-1 d-flex justify-content-between">
  555.                                
  556.                                 <a href="URLHERE" style="font-size: 1.3rem; text-decoration: none;">NAME</a>
  557.                                
  558.                                 <span class="my-auto text-right" style="font-size: 0.9rem;">relationship</span>
  559.                                
  560.                             </div>
  561.                            
  562.                             <hr class="w-100 my-1 bg-primary" style="opacity: 0.5">
  563.                            
  564.                             <p class="mt-2 text-justify">
  565.                                 Describe their relationship here! This section will not scroll, the rest of the content will adjust to the longest description.
  566.                                
  567.                             </p>
  568.                            
  569.                         </div>
  570.                     </div>
  571.                     <!-- END CHARACTER-->
  572.                    
  573.                     <!-- CHARACTER - to add more characters, copy from this line to END CHARACTER, and paste it anywhere above the line indicated! -->
  574.                     <div class="col-lg-6 row no-gutters mb-3">
  575.                         <div class="col-lg-4 d-flex">
  576.                             <div class="mx-auto my-2 text-primary card rounded-0" style="
  577.                            background: url(IMGHERE) center no-repeat;
  578.                            background-size: cover;
  579.                            height: 120px;
  580.                            width: 120px;">
  581.                                
  582.                                 <a href="URLHERE" class="flex-fill btn btn-outline-secondary rounded-0" style="
  583.                                    border: 4px double;
  584.                                    mix-blend-mode: screen"></a>
  585.                             </div>
  586.                         </div>
  587.                        
  588.                         <div class="col-lg p-2">
  589.                
  590.                             <div class="text-muted display-4 mb-1 d-flex justify-content-between">
  591.                                
  592.                                 <a href="URLHERE" style="font-size: 1.3rem; text-decoration: none;">NAME</a>
  593.                                
  594.                                 <span class="my-auto text-right" style="font-size: 0.9rem;">relationship</span>
  595.                                
  596.                             </div>
  597.                            
  598.                             <hr class="w-100 my-1 bg-primary" style="opacity: 0.5">
  599.                            
  600.                             <p class="mt-2 text-justify">
  601.                                 Describe their relationship here! This section will not scroll, the rest of the content will adjust to the longest description.
  602.                                
  603.                             </p>
  604.                            
  605.                         </div>
  606.                     </div>
  607.                     <!-- END CHARACTER-->
  608.                    
  609.                     <!-- CHARACTER - to add more characters, copy from this line to END CHARACTER, and paste it anywhere above the line indicated! -->
  610.                     <div class="col-lg-6 row no-gutters mb-3">
  611.                         <div class="col-lg-4 d-flex">
  612.                             <div class="mx-auto my-2 text-primary card rounded-0" style="
  613.                            background: url(IMGHERE) center no-repeat;
  614.                            background-size: cover;
  615.                            height: 120px;
  616.                            width: 120px;">
  617.                                
  618.                                 <a href="URLHERE" class="flex-fill btn btn-outline-secondary rounded-0" style="
  619.                                    border: 4px double;
  620.                                    mix-blend-mode: screen"></a>
  621.                             </div>
  622.                         </div>
  623.                        
  624.                         <div class="col-lg p-2">
  625.                
  626.                             <div class="text-muted display-4 mb-1 d-flex justify-content-between">
  627.                                
  628.                                 <a href="URLHERE" style="font-size: 1.3rem; text-decoration: none;">NAME</a>
  629.                                
  630.                                 <span class="my-auto text-right" style="font-size: 0.9rem;">relationship</span>
  631.                                
  632.                             </div>
  633.                            
  634.                             <hr class="w-100 my-1 bg-primary" style="opacity: 0.5">
  635.                            
  636.                             <p class="mt-2 text-justify">
  637.                                 Describe their relationship here! This section will not scroll, the rest of the content will adjust to the longest description.
  638.                                
  639.                             </p>
  640.                            
  641.                         </div>
  642.                     </div>
  643.                     <!-- END CHARACTER-->
  644.                    
  645.                     <!-- CHARACTER - to add more characters, copy from this line to END CHARACTER, and paste it anywhere above the line indicated! -->
  646.                     <div class="col-lg-6 row no-gutters mb-3">
  647.                         <div class="col-lg-4 d-flex">
  648.                             <div class="mx-auto my-2 text-primary card rounded-0" style="
  649.                            background: url(IMGHERE) center no-repeat;
  650.                            background-size: cover;
  651.                            height: 120px;
  652.                            width: 120px;">
  653.                                
  654.                                 <a href="URLHERE" class="flex-fill btn btn-outline-secondary rounded-0" style="
  655.                                    border: 4px double;
  656.                                    mix-blend-mode: screen"></a>
  657.                             </div>
  658.                         </div>
  659.                        
  660.                         <div class="col-lg p-2">
  661.                
  662.                             <div class="text-muted display-4 mb-1 d-flex justify-content-between">
  663.                                
  664.                                 <a href="URLHERE" style="font-size: 1.3rem; text-decoration: none;">NAME</a>
  665.                                
  666.                                 <span class="my-auto text-right" style="font-size: 0.9rem;">relationship</span>
  667.                                
  668.                             </div>
  669.                            
  670.                             <hr class="w-100 my-1 bg-primary" style="opacity: 0.5">
  671.                            
  672.                             <p class="mt-2 text-justify">
  673.                                 Describe their relationship here! This section will not scroll, the rest of the content will adjust to the longest description. This is a longer relationship description! Beep boop. I don't know what's top secret about this either.
  674.                                
  675.                             </p>
  676.                            
  677.                         </div>
  678.                     </div>
  679.                     <!-- END CHARACTER-->
  680.                    
  681.                     <!-- CHARACTER - to add more characters, copy from this line to END CHARACTER, and paste it anywhere above the line indicated! -->
  682.                     <div class="col-lg-6 row no-gutters mb-3">
  683.                         <div class="col-lg-4 d-flex">
  684.                             <div class="mx-auto my-2 text-primary card rounded-0" style="
  685.                            background: url(IMGHERE) center no-repeat;
  686.                            background-size: cover;
  687.                            height: 120px;
  688.                            width: 120px;">
  689.                                
  690.                                 <a href="URLHERE" class="flex-fill btn btn-outline-secondary rounded-0" style="
  691.                                    border: 4px double;
  692.                                    mix-blend-mode: screen"></a>
  693.                             </div>
  694.                         </div>
  695.                        
  696.                         <div class="col-lg p-2">
  697.                
  698.                             <div class="text-muted display-4 mb-1 d-flex justify-content-between">
  699.                                
  700.                                 <a href="URLHERE" style="font-size: 1.3rem; text-decoration: none;">NAME</a>
  701.                                
  702.                                 <span class="my-auto text-right" style="font-size: 0.9rem;">relationship</span>
  703.                                
  704.                             </div>
  705.                            
  706.                             <hr class="w-100 my-1 bg-primary" style="opacity: 0.5">
  707.                            
  708.                             <p class="mt-2 text-justify">
  709.                                 Describe their relationship here! This section will not scroll, the rest of the content will adjust to the longest description. A lone character link will center like this one.
  710.                                
  711.                             </p>
  712.                            
  713.                         </div>
  714.                     </div>
  715.                     <!-- END CHARACTER-->
  716.                    
  717.                     <!-- add more characters ABOVE this line! -->
  718.                 </div>
  719.             </div>
  720.             <!-- //////////////////// END RELATIONSHIPS //////////////////// -->
  721.        
  722.         </div>
  723.        
  724.        
  725.     </div>
  726.    
  727.    
  728.     <!-- //////////////////// CREDITS - please don't remove! <3 //////////////////// -->
  729.     <div class="text-muted text-right mt-2" style="font-size: 0.7rem;">
  730.         <p class="m-0">code by @icecreampizzeria</p>
  731.         <p>art by @ user, <a href="URLHERE">user</a> | images from site, etc</p>
  732.     </div>
  733.     <!-- //////////////////// END CREDITS //////////////////// -->
  734.    
  735. </div>
  736. <!-- //////////////////// END WHOLE THING //////////////////// -->
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!