API tools faq
paste
icecreampizzer

TH CODE 12 || SHOOTING STARS

icecreampizzer
Apr 9th, 2021 (edited)
3,079
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 46.02 KB | None | 0 0
raw download clone embed print report
  1. <!-- 12 || SHOOTING STARS by icecreampizzer
  2.    
  3.    RULES:
  4.        - Don't remove my credit please!
  5.        - Feel free to modify/frankenstein as much as you want!
  6.        - Don't redistribute my codes please!
  7.  
  8.    COLOR GUIDE
  9.        #bd7ffa - accent color
  10.        rgba(189, 127, 250, 0.5) - 1st gradient color (this is also #bd7ffa but in rgba form)
  11.        rgba(189, 127, 250, 0) - 2nd gradient color (fade)
  12.        text-white - text in first letter box (change to text-dark if your accent color is light
  13.        
  14.    HOW TO EDIT GRADIENTS:
  15.        find 'background: linear-gradient(90deg, rgba(189, 127, 250, 0.5), rgba(189, 127, 250, 0));'
  16.        the legend goes: linear-gradient(degree, 1st color, 2nd color);, change the two rgbas (feel free to use hex colors, that also works!), do NOT delete commas in between
  17.        
  18.    WOULD YOU LIKE TO DELETE A CERTAIN ROW?
  19.        - BE CAREFUL !! This is basically one long row with breaks in between. Please delete all boxes in a certain row, because the next other boxes will want to move next to a single box if there's empty space, and it'll screw up the other boxes.
  20.        - for example: delete 'DESIGN' and 'REFERENCE IMG - DESIGN' because they're in one row.
  21.        
  22.    ctrl + f URLHERE for links, IMGHERE for image addresses
  23. -->
  24.  
  25. <!-- //////////////////// WHOLE THING //////////////////// -->
  26. <div class="container p-0" style="max-width: 1000px;">
  27.     <div class="row no-gutters">
  28.        
  29.         <!-- //////////////////// TITLE HEADER //////////////////// -->
  30.         <div class="col-lg-12 mb-3">
  31.             <div class="card border-0 rounded-0 py-3 px-4" style="background: url(IMGHERE) center; background-size: cover; background-repeat: no-repeat; height: 200px;">
  32.                 <div class="mt-auto display-1 text-white text-right" style="font-variant: small-caps;">Title
  33.                 </div>
  34.             </div>
  35.         </div>
  36.         <!-- //////////////////// END HEADER //////////////////// -->
  37.        
  38.        
  39.         <!-- //////////////////// SIDE IMG - ABOUT //////////////////// -->
  40.         <div class="col-lg-4 mb-3" style="background: url(IMGHERE) center; background-size: cover; background-repeat: no-repeat; min-height: 400px;"></div>
  41.         <!-- //////////////////// END SIDE IMG - ABOUT //////////////////// -->
  42.        
  43.        
  44.         <!-- //////////////////// ABOUT //////////////////// -->
  45.         <div class="col-lg-8 mb-3">
  46.             <div class="card bg-faded border-0 rounded-0 h-100 p-2 ml-lg-3 ml-0">
  47.                 <div class="d-flex display-3 my-2 pb-2" style="font-variant: small-caps;">
  48.                     <i class="fal fa-stars fa-lg ml-lg-2 ml-0" style="transform: rotate(-30deg);opacity: 0.3; color: #bd7ffa;"></i><span style="margin-left: -25px;">About</span>
  49.                     <hr class="w-100 mt-auto mb-0" style="border: 0; height: 2px; background: linear-gradient(90deg, rgba(189, 127, 250, 0.5), rgba(189, 127, 250, 0));">
  50.                 </div>
  51.                
  52.                 <!-- //////////////////// BASICS //////////////////// -->
  53.                 <div class="row no-gutters">
  54.                    
  55.                     <div class="col-lg px-lg-2">
  56.                        
  57.                         <div class="d-flex justify-content-between p-1">
  58.                             <p style="color: #bd7ffa;">NAME</p>
  59.                             <span class="text-right">content</span>
  60.                         </div>
  61.                        
  62.                         <div class="d-flex justify-content-between p-1">
  63.                             <p style="color: #bd7ffa;">GENDER</p>
  64.                             <span class="text-right">content</span>
  65.                         </div>
  66.                        
  67.                         <div class="d-flex justify-content-between p-1">
  68.                             <p style="color: #bd7ffa;">AGE</p>
  69.                             <span class="text-right">content</span>
  70.                         </div>
  71.                        
  72.                         <div class="d-flex justify-content-between p-1">
  73.                             <p style="color: #bd7ffa;">BIRTHDAY</p>
  74.                             <span class="text-right">content</span>
  75.                         </div>
  76.                        
  77.                         <div class="d-flex justify-content-between p-1">
  78.                             <p style="color: #bd7ffa;">SPECIES</p>
  79.                             <span class="text-right">content</span>
  80.                         </div>
  81.                        
  82.                         <div class="d-flex justify-content-between p-1">
  83.                             <p style="color: #bd7ffa;">ALIGNMENT</p>
  84.                             <span class="text-right">content</span>
  85.                         </div>
  86.                        
  87.                     </div>
  88.                    
  89.                     <div class="card hidden-lg-down border-0" style="width: 2px; background: linear-gradient(180deg, rgba(189, 127, 250, 0.5), rgba(189, 127, 250, 0));"></div>
  90.                    
  91.                     <div class="col-lg px-lg-2">
  92.                        
  93.                         <div class="d-flex justify-content-between p-1">
  94.                             <p style="color: #bd7ffa;">ORIENTATION</p>
  95.                             <span class="text-right">content</span>
  96.                         </div>
  97.                        
  98.                         <div class="d-flex justify-content-between p-1">
  99.                             <p style="color: #bd7ffa;">OCCUPATION</p>
  100.                             <span class="text-right">content</span>
  101.                         </div>
  102.                        
  103.                         <div class="d-flex justify-content-between p-1">
  104.                             <p style="color: #bd7ffa;">ROLE</p>
  105.                             <span class="text-right">content</span>
  106.                         </div>
  107.                        
  108.                         <div class="d-flex justify-content-between p-1">
  109.                             <p style="color: #bd7ffa;">STATUS</p>
  110.                             <span class="text-right">content</span>
  111.                         </div>
  112.                        
  113.                         <div class="d-flex justify-content-between p-1">
  114.                             <p style="color: #bd7ffa;">WORTH</p>
  115.                             <span class="text-right">content</span>
  116.                         </div>
  117.                        
  118.                         <div class="d-flex justify-content-between p-1">
  119.                             <p style="color: #bd7ffa;">DESIGNER</p>
  120.                             <a class="text-right" href="URLHERE">content</a>
  121.                         </div>
  122.                    
  123.                     </div>
  124.                
  125.                 </div>
  126.                
  127.                 <!-- //////////////////// QUOTE //////////////////// -->
  128.                 <span class="text-center mt-3 mb-2" style="font-size: 1.2rem; color: #bd7ffa"><i class="fal fa-quote-left mr-2"></i>Quote ooh...Can be however long you like it<i class="fal fa-quote-right ml-2"></i></span>
  129.                
  130.                 <div class="p-2 text-justify">
  131.                     <p><span class="px-2 ml-4 mr-1 text-white" style="font-weight: 100; background: #bd7ffa; font-size: 1.5rem; text-transform: uppercase;">P</span>rism trust fund craft beer deep v hexagon, butcher marfa vinyl keytar readymade literally normcore wayfarers. Literally disrupt schlitz biodiesel chicharrones XOXO, beard cold-pressed sartorial subway tile. Hot chicken single-origin coffee 90's butcher tbh. Small batch fingerstache cornhole everyday carry ramps hella pickled viral tumeric narwhal. Hammock live-edge kitsch, tbh narwhal PBRB iceland vinyl kale chips poutine celiac man bun gluten-free single-origin coffee keffiyeh.</p>
  132.                     <p><span class="ml-4"></span>Prism trust fund craft beer deep v hexagon, butcher marfa vinyl keytar readymade literally normcore wayfarers. Literally disrupt schlitz biodiesel chicharrones XOXO, beard cold-pressed sartorial subway tile.</p>
  133.                    
  134.                     <!-- //////////////////// ADD more paragraphs ABOVE this line! //////////////////// -->
  135.                 </div>
  136.             </div>
  137.         </div>
  138.         <!-- //////////////////// END ABOUT //////////////////// -->
  139.        
  140.        
  141.         <!-- //////////////////// DESIGN //////////////////// -->
  142.         <div class="col-lg-6 mb-3">
  143.             <div class="card bg-faded border-0 rounded-0 h-100 p-2 mr-lg-3 mr-0">
  144.                 <div class="d-flex display-3 my-2 pb-2" style="font-variant: small-caps;">
  145.                     <i class="fal fa-palette fa-lg ml-lg-2 ml-0 fa-rotate-90" style="opacity: 0.3; color: #bd7ffa;"></i><span style="margin-left: -20px;">Design</span>
  146.                     <hr class="w-100 mt-auto mb-0" style="border: 0; height: 2px; background: linear-gradient(90deg, rgba(189, 127, 250, 0.5), rgba(189, 127, 250, 0));">
  147.                 </div>
  148.                
  149.                 <!-- //////////////////// PHYSICAL LIST //////////////////// -->
  150.                 <div class="px-lg-2 mb-3">
  151.                        
  152.                     <div class="d-flex justify-content-between p-1">
  153.                         <p style="color: #bd7ffa;">HEIGHT</p>
  154.                         <span class="text-right">content</span>
  155.                     </div>
  156.                        
  157.                     <div class="d-flex justify-content-between p-1">
  158.                         <p style="color: #bd7ffa;">BUILD</p>
  159.                         <span class="text-right">content</span>
  160.                     </div>
  161.                        
  162.                     <div class="d-flex justify-content-between p-1">
  163.                         <p style="color: #bd7ffa;">OUTFIT STYLE</p>
  164.                         <span class="text-right">content</span>
  165.                     </div>
  166.                        
  167.                     <div class="d-flex justify-content-between p-1">
  168.                         <p style="color: #bd7ffa;">FULL REFERENCE</p>
  169.                         <a class="text-right" href="URLHERE">here!</a>
  170.                     </div>
  171.                
  172.                 </div>
  173.                
  174.                 <!-- //////////////////// DESIGN NOTES //////////////////// -->
  175.                 <ul class="fa-ul">
  176.                     <li><span class="fa-li"><i class="fal fa-pencil" style="color: #bd7ffa;"></i></span>Design note</li>
  177.                     <li><span class="fa-li"><i class="fal fa-pencil" style="color: #bd7ffa;"></i></span>Design note</li>
  178.                     <li><span class="fa-li"><i class="fal fa-pencil" style="color: #bd7ffa;"></i></span>Design note</li>
  179.                 </ul>
  180.                
  181.                 <!-- //////////////////// COLORS - will stick to the bottom of the box
  182.                - add/remove by selecting a div row and copy/paste or delete.
  183.                - Change title to your color parts (or not if you'd prefer that! Remove from data-toggle="tooltip" to title="" to remove that part  //////////////////// -->
  184.                 <div class="row no-gutters mt-auto p-2">
  185.                     <div class="col py-4" style="background: #3e225c;" data-toggle="tooltip" title="color 1"></div>
  186.                     <div class="col py-4" style="background: #74549f;" data-toggle="tooltip" title="color 2"></div>
  187.                     <div class="col py-4" style="background: #9978bf;" data-toggle="tooltip" title="color 3"></div>
  188.                     <div class="col py-4" style="background: #ffe38f;" data-toggle="tooltip" title="color 4"></div>
  189.                    
  190.                     <!-- //////////////////// ADD more colors ABOVE this line! //////////////////// -->
  191.                 </div>
  192.             </div>
  193.         </div>
  194.         <!-- //////////////////// END DESIGN //////////////////// -->
  195.        
  196.        
  197.         <!-- //////////////////// REFERENCE IMG - DESIGN //////////////////// -->
  198.         <div class="col-lg-6 mb-3" style="background: url(IMGHERE) center; background-size: contain; background-repeat: no-repeat; min-height: 400px;"></div>
  199.         <!-- //////////////////// END REF IMG - DESIGN //////////////////// -->
  200.        
  201.        
  202.         <!-- //////////////////// SIDE IMG - PERSONALITY //////////////////// -->
  203.         <div class="col-lg-3 mb-3" style="background: url(IMGHERE) top; background-size: cover; background-repeat: no-repeat; min-height: 400px;"></div>
  204.         <!-- //////////////////// END SIDE IMG - PERSONALITY //////////////////// -->
  205.        
  206.        
  207.         <!-- //////////////////// PERSONALITY //////////////////// -->
  208.         <div class="col-lg-9 mb-3">
  209.             <div class="card bg-faded border-0 rounded-0 h-100 p-2 ml-lg-3 ml-0">
  210.                 <div class="d-flex display-3 my-2 pb-2" style="font-variant: small-caps;">
  211.                     <i class="fal fa-thumbtack fa-lg ml-lg-2 ml-0" style="transform: rotate(-30deg); opacity: 0.3; color: #bd7ffa;"></i><span style="margin-left: -25px;">Personality</span>
  212.                     <hr class="w-100 mt-auto mb-0" style="border: 0; height: 2px; background: linear-gradient(90deg, rgba(189, 127, 250, 0.5), rgba(189, 127, 250, 0));">
  213.                 </div>
  214.                
  215.                 <!-- //////////////////// PERSONALITY BARS - to change the fullness of the progress bars, change '50%' in 'width:' to any number, as long as it's in percent //////////////////// -->
  216.                 <div class="row no-gutters">
  217.                    
  218.                     <div class="col-lg px-lg-2">
  219.                        
  220.                         <div class="d-flex justify-content-between p-1">
  221.                             <p style="color: #bd7ffa;">HUMILITY</p>
  222.                             <div class="progress w-50 my-auto rounded-0" style="height: 8px;">
  223.                                 <div class="progress-bar" role="progressbar" style="width: 50%; background: #bd7ffa;"></div>
  224.                             </div>
  225.                         </div>
  226.                        
  227.                         <div class="d-flex justify-content-between p-1">
  228.                             <p style="color: #bd7ffa;">PATIENCE</p>
  229.                             <div class="progress w-50 my-auto rounded-0" style="height: 8px;">
  230.                                 <div class="progress-bar" role="progressbar" style="width: 50%; background: #bd7ffa;"></div>
  231.                             </div>
  232.                         </div>
  233.                        
  234.                         <div class="d-flex justify-content-between p-1">
  235.                             <p style="color: #bd7ffa;">CHARISMA</p>
  236.                             <div class="progress w-50 my-auto rounded-0" style="height: 8px; border: #bd7ffa">
  237.                                 <div class="progress-bar" role="progressbar" style="width: 50%; background: #bd7ffa;"></div>
  238.                             </div>
  239.                         </div>
  240.                        
  241.                         <div class="d-flex justify-content-between p-1">
  242.                             <p style="color: #bd7ffa;">EMPATHY</p>
  243.                             <div class="progress w-50 my-auto rounded-0" style="height: 8px;">
  244.                                 <div class="progress-bar" role="progressbar" style="width: 50%; background: #bd7ffa;"></div>
  245.                             </div>
  246.                         </div>
  247.                    
  248.                     </div>
  249.                    
  250.                     <div class="card hidden-lg-down"></div>
  251.                    
  252.                     <div class="col-lg px-lg-2">
  253.                        
  254.                         <div class="d-flex justify-content-between p-1">
  255.                             <p style="color: #bd7ffa;">DISCIPLINE</p>
  256.                             <div class="progress w-50 my-auto rounded-0" style="height: 8px;">
  257.                                 <div class="progress-bar" role="progressbar" style="width: 50%; background: #bd7ffa;"></div>
  258.                             </div>
  259.                         </div>
  260.                        
  261.                         <div class="d-flex justify-content-between p-1">
  262.                             <p style="color: #bd7ffa;">HUMOR</p>
  263.                             <div class="progress w-50 my-auto rounded-0" style="height: 8px;">
  264.                                 <div class="progress-bar" role="progressbar" style="width: 50%; background: #bd7ffa;"></div>
  265.                             </div>
  266.                         </div>
  267.                        
  268.                         <div class="d-flex justify-content-between p-1">
  269.                             <p style="color: #bd7ffa;">INTELLECT</p>
  270.                             <div class="progress w-50 my-auto rounded-0" style="height: 8px;">
  271.                                 <div class="progress-bar" role="progressbar" style="width: 50%; background: #bd7ffa;"></div>
  272.                             </div>
  273.                         </div>
  274.                        
  275.                         <div class="d-flex justify-content-between p-1">
  276.                             <p style="color: #bd7ffa;">CREATIVITY</p>
  277.                             <div class="progress w-50 my-auto rounded-0" style="height: 8px;">
  278.                                 <div class="progress-bar" role="progressbar" style="width: 50%; background: #bd7ffa;"></div>
  279.                             </div>
  280.                         </div>
  281.                    
  282.                     </div>
  283.                
  284.                 </div>
  285.                
  286.                 <div class="p-2 text-justify">
  287.                     <p><span class="px-2 ml-4 mr-1 text-white" style="font-weight: 100; background: #bd7ffa; font-size: 1.5rem; text-transform: uppercase;">P</span>rism trust fund craft beer deep v hexagon, butcher marfa vinyl keytar readymade literally normcore wayfarers. Literally disrupt schlitz biodiesel chicharrones XOXO, beard cold-pressed sartorial subway tile. Hot chicken single-origin coffee 90's butcher tbh. Small batch fingerstache cornhole everyday carry ramps hella pickled viral tumeric narwhal. Hammock live-edge kitsch, tbh narwhal PBRB iceland vinyl kale chips poutine celiac man bun gluten-free single-origin coffee keffiyeh.</p>
  288.                     <p><span class="ml-4"></span>Prism trust fund craft beer deep v hexagon, butcher marfa vinyl keytar readymade literally normcore wayfarers. Literally disrupt schlitz biodiesel chicharrones XOXO, beard cold-pressed sartorial subway tile. Hot chicken single-origin coffee 90's butcher tbh. Small batch fingerstache cornhole everyday carry ramps hella pickled viral tumeric narwhal. Hammock live-edge kitsch, tbh narwhal PBRB iceland vinyl kale chips poutine celiac man bun gluten-free single-origin coffee keffiyeh.</p>
  289.                    
  290.                     <!-- //////////////////// ADD more paragraphs ABOVE this line! //////////////////// -->
  291.                 </div>
  292.             </div>
  293.         </div>
  294.         <!-- //////////////////// END PERSONALITY //////////////////// -->
  295.        
  296.        
  297.         <!-- //////////////////// LIKES - this whole row will adjust with the box which has the longest content, it wont scroll //////////////////// -->
  298.         <div class="col-lg-5 mb-3">
  299.             <div class="card rounded-0 border-0 bg-faded mr-lg-3 mr-0 p-2 h-100">
  300.                 <div class="d-flex display-3 my-2 pb-2" style="font-variant: small-caps;">
  301.                     <i class="fal fa-heart fa-lg ml-lg-2 ml-0" style="transform: rotate(-30deg); opacity: 0.3; color: #bd7ffa;"></i><span style="margin-left: -25px;">Likes</span>
  302.                     <hr class="w-100 mt-auto mb-0" style="border: 0; height: 2px; background: linear-gradient(90deg, rgba(189, 127, 250, 0.5), rgba(189, 127, 250, 0));">
  303.                 </div>
  304.                
  305.                 <ul class="fa-ul mb-2">
  306.                     <li><span class="fa-li"><i class="fal fa-heart" style="color: #bd7ffa;"></i></span>content</li>
  307.                     <li><span class="fa-li"><i class="fal fa-heart" style="color: #bd7ffa;"></i></span>content</li>
  308.                     <li><span class="fa-li"><i class="fal fa-heart" style="color: #bd7ffa;"></i></span>content</li>
  309.                     <li><span class="fa-li"><i class="fal fa-heart" style="color: #bd7ffa;"></i></span>content</li>
  310.                     <li><span class="fa-li"><i class="fal fa-heart" style="color: #bd7ffa;"></i></span>content</li>
  311.                 </ul>
  312.             </div>
  313.         </div>
  314.         <!-- //////////////////// END LIKES //////////////////// -->
  315.        
  316.        
  317.         <!-- //////////////////// DISLIKES //////////////////// -->
  318.         <div class="col-lg-5 mb-3">
  319.             <div class="card bg-faded rounded-0 border-0 p-2 h-100 mr-lg-3 mr-0">
  320.                 <div class="d-flex display-3 my-2 pb-2" style="font-variant: small-caps;">
  321.                     <i class="fal fa-heart-broken fa-lg ml-lg-2 ml-0" style="transform: rotate(-30deg); opacity: 0.3; color: #bd7ffa;"></i><span style="margin-left: -25px;">Dislikes</span>
  322.                     <hr class="w-100 mt-auto mb-0" style="border: 0; height: 2px; background: linear-gradient(90deg, rgba(189, 127, 250, 0.5), rgba(189, 127, 250, 0));">
  323.                 </div>
  324.                 <ul class="fa-ul mb-2">
  325.                     <li><span class="fa-li"><i class="fal fa-heart-broken" style="color: #bd7ffa;"></i></span>content</li>
  326.                     <li><span class="fa-li"><i class="fal fa-heart-broken" style="color: #bd7ffa;"></i></span>content</li>
  327.                     <li><span class="fa-li"><i class="fal fa-heart-broken" style="color: #bd7ffa;"></i></span>content</li>
  328.                     <li><span class="fa-li"><i class="fal fa-heart-broken" style="color: #bd7ffa;"></i></span>content</li>
  329.                     <li><span class="fa-li"><i class="fal fa-heart-broken" style="color: #bd7ffa;"></i></span>content</li>
  330.                 </ul>
  331.             </div>
  332.  
  333.         </div>
  334.         <!-- //////////////////// END DISLIKES //////////////////// -->
  335.        
  336.        
  337.         <!-- //////////////////// SIDE IMG - DIS/LIKES //////////////////// -->
  338.         <div class="col-lg-2 mb-3" style="background: url(IMGHERE) right; background-size: cover; background-repeat: no-repeat; min-height: 100px"></div>
  339.         <!-- //////////////////// END SIDE IMG - DIS/LIKES //////////////////// -->
  340.        
  341.        
  342.         <!-- //////////////////// BACKGROUND //////////////////// -->
  343.         <div class="col-lg-12 mb-3">
  344.             <div class="card bg-faded border-0 rounded-0 h-100 p-2">
  345.                 <div class="d-flex display-3 my-2 pb-2" style="font-variant: small-caps;">
  346.                     <i class="fal fa-book fa-lg ml-lg-2 ml-0" style="transform: rotate(-30deg); opacity: 0.3; color: #bd7ffa;"></i><span style="margin-left: -25px;">Background</span>
  347.                     <hr class="w-100 mt-auto mb-0" style="border: 0; height: 2px; background: linear-gradient(90deg, rgba(189, 127, 250, 0.5), rgba(189, 127, 250, 0));">
  348.                 </div>
  349.                
  350.                
  351.                 <!-- //////////////////// To add more sections, copy/paste from the line below to the empty space before the next section. Paste anywhere above the comment line that states where to paste new things //////////////////// -->
  352.                 <span class="display-4 p-2" style="font-variant: small-caps;"><i class="fal fa-bookmark fa-sm mr-2" style="color: #bd7ffa;"></i>Header One</span>
  353.                 <div class="p-2 text-justify">
  354.                     <p><span class="px-2 ml-4 mr-1 text-white" style="font-weight: 100; background: #bd7ffa; font-size: 1.5rem; text-transform: uppercase;">P</span>rism trust fund craft beer deep v hexagon, butcher marfa vinyl keytar readymade literally normcore wayfarers. Literally disrupt schlitz biodiesel chicharrones XOXO, beard cold-pressed sartorial subway tile. Hot chicken single-origin coffee 90's butcher tbh. Small batch fingerstache cornhole everyday carry ramps hella pickled viral tumeric narwhal. Hammock live-edge kitsch, tbh narwhal PBRB iceland vinyl kale chips poutine celiac man bun gluten-free single-origin coffee keffiyeh.</p>
  355.                     <p><span class="ml-4"></span>Prism trust fund craft beer deep v hexagon, butcher marfa vinyl keytar readymade literally normcore wayfarers. Literally disrupt schlitz biodiesel chicharrones XOXO, beard cold-pressed sartorial subway tile. Hot chicken single-origin coffee 90's butcher tbh. Small batch fingerstache cornhole everyday carry ramps hella pickled viral tumeric narwhal. Hammock live-edge kitsch, tbh narwhal PBRB iceland vinyl kale chips poutine celiac man bun gluten-free single-origin coffee keffiyeh.</p>
  356.                    
  357.                    
  358.                     <!-- //////////////////// ADD more paragraphs for this section ABOVE this line! //////////////////// -->
  359.                 </div>
  360.                
  361.                 <span class="display-4 p-2" style="font-variant: small-caps;"><i class="fal fa-bookmark fa-sm mr-2" style="color: #bd7ffa;"></i>Header Two</span>
  362.                 <div class="p-2 text-justify">
  363.                     <p><span class="px-2 ml-4 mr-1 text-white" style="font-weight: 100; background: #bd7ffa; font-size: 1.5rem; text-transform: uppercase;">P</span>rism trust fund craft beer deep v hexagon, butcher marfa vinyl keytar readymade literally normcore wayfarers. Literally disrupt schlitz biodiesel chicharrones XOXO, beard cold-pressed sartorial subway tile. Hot chicken single-origin coffee 90's butcher tbh. Small batch fingerstache cornhole everyday carry ramps hella pickled viral tumeric narwhal. Hammock live-edge kitsch, tbh narwhal PBRB iceland vinyl kale chips poutine celiac man bun gluten-free single-origin coffee keffiyeh.</p>
  364.                     <p><span class="ml-4"></span>Prism trust fund craft beer deep v hexagon, butcher marfa vinyl keytar readymade literally normcore wayfarers. Literally disrupt schlitz biodiesel chicharrones XOXO, beard cold-pressed sartorial subway tile. Hot chicken single-origin coffee 90's butcher tbh. Small batch fingerstache cornhole everyday carry ramps hella pickled viral tumeric narwhal. Hammock live-edge kitsch, tbh narwhal PBRB iceland vinyl kale chips poutine celiac man bun gluten-free single-origin coffee keffiyeh.</p>
  365.                    
  366.                    
  367.                     <!-- //////////////////// ADD more paragraphs for this section ABOVE this line! //////////////////// -->
  368.                 </div>
  369.                
  370.                 <span class="display-4 p-2" style="font-variant: small-caps;"><i class="fal fa-bookmark fa-sm mr-2" style="color: #bd7ffa;"></i>Header Three</span>
  371.                 <div class="p-2 text-justify">
  372.                     <p><span class="px-2 ml-4 mr-1 text-white" style="font-weight: 100; background: #bd7ffa; font-size: 1.5rem; text-transform: uppercase;">P</span>rism trust fund craft beer deep v hexagon, butcher marfa vinyl keytar readymade literally normcore wayfarers. Literally disrupt schlitz biodiesel chicharrones XOXO, beard cold-pressed sartorial subway tile. Hot chicken single-origin coffee 90's butcher tbh. Small batch fingerstache cornhole everyday carry ramps hella pickled viral tumeric narwhal. Hammock live-edge kitsch, tbh narwhal PBRB iceland vinyl kale chips poutine celiac man bun gluten-free single-origin coffee keffiyeh.</p>
  373.                     <p><span class="ml-4"></span>Prism trust fund craft beer deep v hexagon, butcher marfa vinyl keytar readymade literally normcore wayfarers. Literally disrupt schlitz biodiesel chicharrones XOXO, beard cold-pressed sartorial subway tile. Hot chicken single-origin coffee 90's butcher tbh. Small batch fingerstache cornhole everyday carry ramps hella pickled viral tumeric narwhal. Hammock live-edge kitsch, tbh narwhal PBRB iceland vinyl kale chips poutine celiac man bun gluten-free single-origin coffee keffiyeh.</p>
  374.                    
  375.                    
  376.                     <!-- //////////////////// ADD more paragraphs for this section ABOVE this line! //////////////////// -->
  377.                 </div>
  378.                
  379.                
  380.                 <!-- //////////////////// ADD more parts ABOVE this line! //////////////////// -->
  381.             </div>
  382.         </div>
  383.         <!-- //////////////////// END BACKGROUND //////////////////// -->
  384.        
  385.        
  386.         <!-- //////////////////// SIDE IMG -TRIVIA //////////////////// -->
  387.         <div class="col-lg-4 mb-3" style="background: url(IMGHERE) center; background-size: cover; background-repeat: no-repeat; min-height: 100px"></div>
  388.         <!-- //////////////////// END SIDE IMG - TRIVIA //////////////////// -->
  389.        
  390.        
  391.         <!-- //////////////////// TRIVIA //////////////////// -->
  392.         <div class="col-lg-8 mb-3">
  393.             <div class="card bg-faded border-0 rounded-0 h-100 p-2 ml-lg-3 ml-0">
  394.                 <div class="d-flex display-3 my-2 pb-2" style="font-variant: small-caps;">
  395.                     <i class="fal fa-star fa-lg ml-lg-2 ml-0" style="transform: rotate(-30deg);opacity: 0.3; color: #bd7ffa;"></i><span style="margin-left: -25px;">Trivia</span>
  396.                     <hr class="w-100 mt-auto mb-0" style="border: 0; height: 2px; background: linear-gradient(90deg, rgba(189, 127, 250, 0.5), rgba(189, 127, 250, 0));">
  397.                 </div>
  398.                 <ul class="fa-ul mb-2">
  399.                     <li><span class="fa-li"><i class="fal fa-star" style="color: #bd7ffa;"></i></span>content</li>
  400.                     <li><span class="fa-li"><i class="fal fa-star" style="color: #bd7ffa;"></i></span>content</li>
  401.                     <li><span class="fa-li"><i class="fal fa-star" style="color: #bd7ffa;"></i></span>content</li>
  402.                     <li><span class="fa-li"><i class="fal fa-star" style="color: #bd7ffa;"></i></span>content</li>
  403.                 </ul>
  404.             </div>
  405.         </div>
  406.         <!-- //////////////////// END TRIVIA //////////////////// -->
  407.        
  408.        
  409.         <!-- //////////////////// PLAYLIST //////////////////// -->
  410.         <div class="col-lg-8 mb-3">
  411.             <div class="card rounded-0 border-0 bg-faded p-2 h-100 mr-lg-3 mr-0">
  412.                
  413.                 <div class="d-flex display-3 my-2 pb-2" style="font-variant: small-caps;">
  414.                     <i class="fal fa-music fa-lg ml-lg-2 ml-0" style="transform: rotate(-20deg);opacity: 0.3; color: #bd7ffa;"></i><span style="margin-left: -25px;">Playlist</span>
  415.                     <hr class="w-100 mt-auto mb-0" style="border: 0; height: 2px; background: linear-gradient(90deg, rgba(189, 127, 250, 0.5), rgba(189, 127, 250, 0));">
  416.                 </div>
  417.                
  418.                 <!-- //////////////////// PLAYLIST COVER - best 1x1 image, but will adjust either way! //////////////////// -->
  419.                 <div class="mx-auto mb-3" style="background: url(IMGHERE) center; background-size: cover; background-repeat: no-repeat; width: 150px; height: 150px;">
  420.                    
  421.                 </div>
  422.                
  423.                 <!-- //////////////////// PLAY BUTTON //////////////////// -->
  424.                 <div class="d-flex justify-content-center mb-2">
  425.                     <hr class="w-100 my-auto mr-2" style="border: 0; height: 2px; background: linear-gradient(90deg, rgba(189, 127, 250, 0), rgba(189, 127, 250, 0.5));">
  426.                    
  427.                     <!-- //////////////////// PLAYLIST LINK
  428.                    - open your YT playlist (best if it's the screen where it displays your playlist songs, not the one where a song is currently playing)
  429.                    - COPY the keysmash found AFTER '/playlist?list='
  430.                    - replace URLHERE with the keysmash and you're done! //////////////////// -->
  431.                     <iframe src="https://www.youtube-nocookie.com/embed/videoseries?modestbranding=1&list=URLHERE" class="border-0" style="position: absolute; height: 3em; width: 3em; opacity: 0; z-index: 99"></iframe>
  432.                    
  433.                     <i class="display-3 fal fa-play mx-4" style="color: #bd7ffa;"></i>
  434.                     <hr class="w-100 my-auto ml-2" style="border: 0; height: 2px; background: linear-gradient(90deg, rgba(189, 127, 250, 0.5), rgba(189, 127, 250, 0));">
  435.                 </div>
  436.                
  437.                 <!-- //////////////////// CAROUSEL PLAYLIST - meant to show the songs inside the playlist
  438.                HOW TO ADD MORE SONGS:
  439.                - copy from '<div class="carousel-item"> to the next </div> and add anywhere above the line specified
  440.                - MAKE SURE there's only one carousel-item that has an 'active' class (this is the one that's first shown in the screen) //////////////////// -->
  441.                 <div class="d-flex justify-content-center">
  442.                     <hr class="w-50 my-auto mr-2 hidden-sm-down" style="border: 0;">
  443.                     <div id="carouselplaylist" class="carousel slide p-2 w-100 text-center" data-ride="carousel">
  444.                         <div class="carousel-inner">
  445.                            
  446.                             <div class="carousel-item active">
  447.                                 <a href="URLHERE" style="font-variant: small-caps; font-size: 1.1rem;">Song Title</a><br>
  448.                                 <span>Artist</span>
  449.                             </div>
  450.                            
  451.                             <div class="carousel-item">
  452.                                 <a href="URLHERE" style="font-variant: small-caps; font-size: 1.1rem;">Song Title</a><br>
  453.                                 <span>Artist</span>
  454.                             </div>
  455.                            
  456.                             <div class="carousel-item">
  457.                                 <a href="URLHERE" style="font-variant: small-caps; font-size: 1.1rem;">Song Title</a><br>
  458.                                 <span>Artist</span>
  459.                             </div>
  460.                            
  461.                             <div class="carousel-item">
  462.                                 <a href="URLHERE" style="font-variant: small-caps; font-size: 1.1rem;">Song Title</a><br>
  463.                                 <span>Artist</span>
  464.                             </div>
  465.                            
  466.                             <div class="carousel-item">
  467.                                 <a href="URLHERE" style="font-variant: small-caps; font-size: 1.1rem;">Song Title</a><br>
  468.                                 <span>Artist</span>
  469.                             </div>
  470.                            
  471.                             <!-- //////////////////// ADD more songs ABOVE this line! //////////////////// -->
  472.                         </div>
  473.                        
  474.                         <a class="carousel-control-prev" href="#carouselplaylist" role="button" data-slide="prev">
  475.                             <span class="fas fa-chevron-left fa-lg" style="color: #bd7ffa;" aria-hidden="true"></span>
  476.                             <span class="sr-only">Previous</span>
  477.                         </a>
  478.                         <a class="carousel-control-next" href="#carouselplaylist" role="button" data-slide="next">
  479.                            <span class="fas fa-chevron-right fa-lg" style="color: #bd7ffa;" aria-hidden="true"></span>
  480.                             <span class="sr-only">Next</span>
  481.                         </a>
  482.      
  483.                     </div>
  484.                     <hr class="w-50 my-auto ml-2 hidden-sm-down" style="border: 0;">
  485.                 </div>
  486.             </div>
  487.         </div>
  488.         <!-- //////////////////// END PLAYLIST //////////////////// -->
  489.        
  490.        
  491.         <!-- //////////////////// SIDE IMG - PLAYLIST //////////////////// -->
  492.         <div class="col-lg-4 mb-3" style="background: url(IMGHERE) center; background-size: cover; background-repeat: no-repeat; min-height: 100px"></div>
  493.         <!-- //////////////////// END SIDE IMG - PLAYLIST //////////////////// -->
  494.        
  495.        
  496.         <!-- //////////////////// LINKS //////////////////// -->
  497.         <div class="col-lg-12 mb-3">
  498.             <div class="card bg-faded border-0 rounded-0 h-100 p-2">
  499.                 <div class="d-flex display-3 my-2 pb-2" style="font-variant: small-caps;">
  500.                     <i class="fal fa-link fa-lg ml-lg-2 ml-0" style="opacity: 0.3; color: #bd7ffa;"></i><span style="margin-left: -25px;">Links</span>
  501.                     <hr class="w-100 mt-auto mb-0" style="border: 0; height: 2px; background: linear-gradient(90deg, rgba(189, 127, 250, 0.5), rgba(189, 127, 250, 0));">
  502.                 </div>
  503.                
  504.                 <div class="row p-2 justify-content-center">
  505.                    
  506.                     <!-- //////////////////// CHARACTER - just copy/paste from this line to END CHARACTER //////////////////// -->
  507.                     <div class="col-md-4 d-flex flex-column rounded-0 border-0 pb-3">
  508.                         <!-- //////////////////// PHOTO - best for 1x1 images, but will adjust either way //////////////////// -->
  509.                         <div class="mx-auto" style="background: url(IMGHERE) center; background-size: cover; background-repeat: no-repeat; height: 150px; width: 150px;"></div>
  510.                         <!-- //////////////////// NAME //////////////////// -->
  511.                         <a href="URLHERE" class="display-4 text-center mt-3 mb-1" style="font-size: 1.5rem; font-variant: small-caps;">Name</a>
  512.                        
  513.                         <!-- //////////////////// HEART METER - 'fas' is solid heart, 'fal' is empty heart //////////////////// -->
  514.                         <span class="text-center mb-2">
  515.                             <i class="fas fa-heart" style="color: #bd7ffa;"></i>
  516.                             <i class="fas fa-heart" style="color: #bd7ffa;"></i>
  517.                             <i class="fas fa-heart" style="color: #bd7ffa;"></i>
  518.                             <i class="fal fa-heart" style="color: #bd7ffa;"></i>
  519.                             <i class="fal fa-heart" style="color: #bd7ffa;"></i>
  520.                         </span>
  521.                        
  522.                         <p class="text-justify"><span class="ml-4"></span>It's best if you keep this short! This won't scroll. The next row will adjust to the longest description in this row.</p>
  523.                     </div>
  524.                     <!-- //////////////////// END CHARACTER //////////////////// -->
  525.                    
  526.                    
  527.                     <!-- //////////////////// CHARACTER - just copy/paste from this line to END CHARACTER //////////////////// -->
  528.                     <div class="col-md-4 d-flex flex-column rounded-0 border-0 pb-3">
  529.                         <!-- //////////////////// PHOTO - best for 1x1 images, but will adjust either way //////////////////// -->
  530.                         <div class="mx-auto" style="background: url(IMGHERE) center; background-size: cover; background-repeat: no-repeat; height: 150px; width: 150px;"></div>
  531.                         <!-- //////////////////// NAME //////////////////// -->
  532.                         <a href="URLHERE" class="display-4 text-center mt-3 mb-1" style="font-size: 1.5rem; font-variant: small-caps;">Name</a>
  533.                        
  534.                         <!-- //////////////////// HEART METER - 'fas' is solid heart, 'fal' is empty heart //////////////////// -->
  535.                         <span class="text-center mb-2">
  536.                             <i class="fas fa-heart" style="color: #bd7ffa;"></i>
  537.                             <i class="fas fa-heart" style="color: #bd7ffa;"></i>
  538.                             <i class="fas fa-heart" style="color: #bd7ffa;"></i>
  539.                             <i class="fal fa-heart" style="color: #bd7ffa;"></i>
  540.                             <i class="fal fa-heart" style="color: #bd7ffa;"></i>
  541.                         </span>
  542.                        
  543.                         <p class="text-justify"><span class="ml-4"></span>It's best if you keep this short! This won't scroll. The next row will adjust to the longest description in this row. Like this one, for example!</p>
  544.                     </div>
  545.                     <!-- //////////////////// END CHARACTER //////////////////// -->
  546.                    
  547.                    
  548.                     <!-- //////////////////// CHARACTER - just copy/paste from this line to END CHARACTER //////////////////// -->
  549.                     <div class="col-md-4 d-flex flex-column rounded-0 border-0 pb-3">
  550.                         <!-- //////////////////// PHOTO - best for 1x1 images, but will adjust either way //////////////////// -->
  551.                         <div class="mx-auto" style="background: url(IMGHERE) center; background-size: cover; background-repeat: no-repeat; height: 150px; width: 150px;"></div>
  552.                         <!-- //////////////////// NAME //////////////////// -->
  553.                         <a href="URLHERE" class="display-4 text-center mt-3 mb-1" style="font-size: 1.5rem; font-variant: small-caps;">Name</a>
  554.                        
  555.                         <!-- //////////////////// HEART METER - 'fas' is solid heart, 'fal' is empty heart //////////////////// -->
  556.                         <span class="text-center mb-2">
  557.                             <i class="fas fa-heart" style="color: #bd7ffa;"></i>
  558.                             <i class="fas fa-heart" style="color: #bd7ffa;"></i>
  559.                             <i class="fas fa-heart" style="color: #bd7ffa;"></i>
  560.                             <i class="fal fa-heart" style="color: #bd7ffa;"></i>
  561.                             <i class="fal fa-heart" style="color: #bd7ffa;"></i>
  562.                         </span>
  563.                        
  564.                         <p class="text-justify"><span class="ml-4"></span>It's best if you keep this short! This won't scroll. The next row will adjust to the longest description in this row.</p>
  565.                     </div>
  566.                     <!-- //////////////////// END CHARACTER //////////////////// -->
  567.                    
  568.                    
  569.                     <!-- //////////////////// CHARACTER - just copy/paste from this line to END CHARACTER //////////////////// -->
  570.                     <div class="col-md-4 d-flex flex-column rounded-0 border-0 pb-3">
  571.                         <!-- //////////////////// PHOTO - best for 1x1 images, but will adjust either way //////////////////// -->
  572.                         <div class="mx-auto" style="background: url(IMGHERE) center; background-size: cover; background-repeat: no-repeat; height: 150px; width: 150px;"></div>
  573.                         <!-- //////////////////// NAME //////////////////// -->
  574.                         <a href="URLHERE" class="display-4 text-center mt-3 mb-1" style="font-size: 1.5rem; font-variant: small-caps;">Name</a>
  575.                        
  576.                         <!-- //////////////////// HEART METER - 'fas' is solid heart, 'fal' is empty heart //////////////////// -->
  577.                         <span class="text-center mb-2">
  578.                             <i class="fas fa-heart" style="color: #bd7ffa;"></i>
  579.                             <i class="fas fa-heart" style="color: #bd7ffa;"></i>
  580.                             <i class="fas fa-heart" style="color: #bd7ffa;"></i>
  581.                             <i class="fal fa-heart" style="color: #bd7ffa;"></i>
  582.                             <i class="fal fa-heart" style="color: #bd7ffa;"></i>
  583.                         </span>
  584.                        
  585.                         <p class="text-justify"><span class="ml-4"></span>It's best if you keep this short! This won't scroll. The next row will adjust to the longest description in this row. Rows with less than three characters will automatically center.</p>
  586.                     </div>
  587.                     <!-- //////////////////// END CHARACTER //////////////////// -->
  588.                    
  589.                    
  590.                     <!-- //////////////////// CHARACTER - just copy/paste from this line to END CHARACTER //////////////////// -->
  591.                     <div class="col-md-4 d-flex flex-column rounded-0 border-0 pb-3">
  592.                         <!-- //////////////////// PHOTO - best for 1x1 images, but will adjust either way //////////////////// -->
  593.                         <div class="mx-auto" style="background: url(IMGHERE) center; background-size: cover; background-repeat: no-repeat; height: 150px; width: 150px;"></div>
  594.                         <!-- //////////////////// NAME //////////////////// -->
  595.                         <a href="URLHERE" class="display-4 text-center mt-3 mb-1" style="font-size: 1.5rem; font-variant: small-caps;">Name</a>
  596.                        
  597.                         <!-- //////////////////// HEART METER - 'fas' is solid heart, 'fal' is empty heart //////////////////// -->
  598.                         <span class="text-center mb-2">
  599.                             <i class="fas fa-heart" style="color: #bd7ffa;"></i>
  600.                             <i class="fas fa-heart" style="color: #bd7ffa;"></i>
  601.                             <i class="fas fa-heart" style="color: #bd7ffa;"></i>
  602.                             <i class="fal fa-heart" style="color: #bd7ffa;"></i>
  603.                             <i class="fal fa-heart" style="color: #bd7ffa;"></i>
  604.                         </span>
  605.                        
  606.                         <p class="text-justify"><span class="ml-4"></span>It's best if you keep this short! This won't scroll. The next row will adjust to the longest description in this row.</p>
  607.                     </div>
  608.                     <!-- //////////////////// END CHARACTER //////////////////// -->
  609.                    
  610.                    
  611.                     <!-- //////////////////// ADD more characters ABOVE this line! //////////////////// -->
  612.                 </div>
  613.             </div>
  614.         </div>
  615.         <!-- //////////////////// END LINKS //////////////////// -->
  616.        
  617.        
  618.         <!-- //////////////////// FINAL BAR //////////////////// -->
  619.         <div class="col-lg-12">
  620.             <div class="card border-0 rounded-0 py-3 px-4" style="background: url(IMGHERE) center; background-size: cover; background-repeat: no-repeat; height: 50px;">
  621.             </div>
  622.         </div>
  623.         <!-- //////////////////// END FINAL BAR //////////////////// -->
  624.        
  625.     </div>
  626.    
  627.     <!-- //////////////////// CREDITS, please don't remove! //////////////////// -->
  628.     <p class="text-secondary text-right mt-2" style="font-size: 0.7rem;">code by <a href="https://toyhou.se/icecreampizzer">icecreampizzer</a>
  629.     <br>
  630.     art by @ user, @ user | images from website, @ user, etc
  631.     </p>
  632. </div>
  633. <!-- //////////////////// 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!