API tools faq
paste
SparklyLightus

Like A Record

SparklyLightus
Feb 15th, 2021 (edited)
833
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 26.34 KB | None | 0 0
raw download clone embed print report
  1. <!-- ACCENT COLOR: 6275B7 / FA ICON: sparkles -->
  2. <div class="m-4 p-0 mx-auto container col-lg-9 row no-gutters text-dark bg-white">
  3.     <!-- HEADER -->
  4.     <div class="p-0 col-12">
  5.         <div class="progress rounded-0">
  6.             <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%; height: auto; background-color: #6275B7; margin-top: -4px;">
  7.                 <h1 class="text-white m-2 text-center display-4">
  8.                     <i class="fal fa-sparkles"></i> NAME <i class="fal fa-sparkles fa-flip-horizontal"></i>
  9.                 </h1>
  10.             </div>
  11.         </div>
  12.     </div>
  13.    
  14.     <!-- INDICATOR -->
  15.     <div class="p-0 col-auto">
  16.         <div class="pl-2 align-items-center" style="opacity: 1; width: 30px; height: 100%;">
  17.             <a class="m-0" data-slide="prev" data-target="#carousel" role="button"><i class="fas fa-chevron-left fa-2x text-dark"></i></a>
  18.         </div>
  19.     </div>
  20.     <!-- CONTENT -->
  21.     <div id="carousel" data-ride="carousel" class="p-0 col carousel slide">
  22.         <!-- CONTENT -->
  23.         <div class="carousel-inner p-0">
  24.             <!-- ===================== ONE -->
  25.             <div class="carousel-item active" data-interval="300000">
  26.                 <div class="m-0 row no-gutters" style="height: 450px; overflow: auto;">
  27.                     <!-- IMAGE -->
  28.                     <div class="col-5 mx-auto">
  29.                         <div class="sticky-top justify-content-center">
  30.                             <!-- big image hidden on small screen sizes, small does the opposite - you can set two different images if you want to idk -->
  31.                             <!-- BIG -->
  32.                             <img class="m-lg-0 hidden-md-down" src="//via.placeholder.com/300x500" style="max-height: 450px; max-width: 100%;">
  33.                             <!-- SMALL -->
  34.                             <img class="m-1 hidden-lg-up" src="//via.placeholder.com/300x500" style="max-height: 350px; max-width: 100%;">
  35.                         </div>
  36.                     </div>
  37.                     <!-- INFO -->
  38.                     <div class="col-lg-7 p-2">
  39.                         <h1 class="m-1 display-4 text-secondary"><i class="fal fa-sparkles"></i> SUMMARY</h1>
  40.                         <!-- BASICS -->
  41.                         <div class="m-1">
  42.                             <div class="row no-gutters"> <b class="col-auto text-secondary"><i class="fas fa-sparkles"></i> NAME</b>
  43.                                 <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div>
  44.                                 <p class="col-auto">INFORMATION</p></div>
  45.                                
  46.                             <div class="row no-gutters"> <b class="col-auto text-secondary"><i class="fas fa-sparkles"></i> AGE</b>
  47.                                 <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div>
  48.                                 <p class="col-auto">INFORMATION</p></div>
  49.                                
  50.                             <div class="row no-gutters"> <b class="col-auto text-secondary"><i class="fas fa-sparkles"></i> GENDER</b>
  51.                                 <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div>
  52.                                 <p class="col-auto">INFORMATION</p></div>
  53.                                
  54.                             <div class="row no-gutters"> <b class="col-auto text-secondary"><i class="fas fa-sparkles"></i> RACE</b>
  55.                                 <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div>
  56.                                 <p class="col-auto">INFORMATION</p></div>
  57.                                
  58.                             <div class="row no-gutters"> <b class="col-auto text-secondary"><i class="fas fa-sparkles"></i> ORIENTATION</b>
  59.                                 <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div>
  60.                                 <p class="col-auto">INFORMATION</p></div>
  61.                                
  62.                             <div class="row no-gutters"> <b class="col-auto text-secondary"><i class="fas fa-sparkles"></i> OCCUPATION</b>
  63.                                 <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div>
  64.                                 <p class="col-auto">INFORMATION</p></div>
  65.                                
  66.                             <div class="row no-gutters"> <b class="col-auto text-secondary"><i class="fas fa-sparkles"></i> THEME</b>
  67.                                 <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div>
  68.                                 <p class="col-auto"> <a href="SONGLINK">SONG NAME</a> </p></div>
  69.                         </div>
  70.                        
  71.                         <!-- SUMMARY -->
  72.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et enim id erat suscipit posuere ac at sem. Sed eget tortor at nisl rhoncus varius. Mauris at mi eget dolor pharetra iaculis semper facilisis sem. Fusce quis erat mi. Donec convallis efficitur odio, vel luctus orci.</p>
  73.                         <p>Vivamus urna tortor, iaculis rhoncus tincidunt in, ultricies vel turpis. Quisque eu ex mauris. Vestibulum posuere, elit eu vulputate consectetur, diam felis pharetra ex, ac rhoncus libero tortor pulvinar nibh.</p>
  74.                     </div>
  75.                 </div>
  76.             </div>
  77.             <!-- ===================== TWO -->
  78.             <div class="carousel-item" data-interval="300000">
  79.                 <div class="p-2" style="height: 450px; overflow: auto;">
  80.                     <!-- PERSONALITY -->
  81.                     <h1 class="m-1 display-4 text-secondary"><i class="fal fa-sparkles"></i> PERSONALITY</h1>
  82.                     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sollicitudin orci tellus, sed viverra sapien dapibus eu. Proin iaculis mauris vitae pellentesque laoreet. Sed aliquet justo ut purus varius interdum. Praesent a volutpat ipsum, tempus scelerisque arcu.</p>
  83.                     <p>Maecenas elementum tristique lorem, sit amet porta leo cursus sed. Sed in dui vitae mauris efficitur hendrerit. Morbi at lectus elementum, convallis risus eu, consectetur nisi. Donec non vestibulum urna.In lacinia laoreet ullamcorper. Phasellus ornare, dui eu lacinia faucibus, tellus elit tempus sapien, sed bibendum nisl est ac lectus. Nunc et nunc nisi. Pellentesque sapien ipsum, rutrum nec dui ac, blandit interdum magna. Integer ac varius odio. Aliquam erat volutpat.</p>
  84.                    
  85.                     <!-- STORY -->
  86.                     <h1 class="m-1 display-4 text-secondary"><i class="fal fa-sparkles"></i> STORY</h1>
  87.                    
  88.                     <div class="row no-gutters">
  89.                         <h4 class="col-auto text-secondary"><i class="far fa-bookmark"></i> HEADER</h4><div class="col mx-2 mb-3" style="border-bottom: 1px dotted;"></div></div>
  90.                     <p>Proin hendrerit scelerisque ornare. In non porttitor quam. Aliquam in odio tempor, molestie lectus id, dapibus orci. Integer luctus, metus vitae ornare consectetur, lorem nulla porttitor ex, non scelerisque turpis orci quis tortor. Praesent gravida leo ipsum, sit amet efficitur tellus bibendum sit amet. Vestibulum accumsan a magna sit amet vulputate.</p>
  91.                    
  92.                     <div class="row no-gutters">
  93.                         <h4 class="col-auto text-secondary"><i class="far fa-bookmark"></i> HEADER</h4><div class="col mx-2 mb-3" style="border-bottom: 1px dotted;"></div></div>
  94.                     <p>Praesent malesuada viverra mauris vel tempus. Sed gravida bibendum mauris, eget iaculis felis. Nunc ut rhoncus magna. Quisque sem ipsum, consequat et mollis vel, accumsan quis turpis. Duis gravida at nibh ac dapibus. Vivamus magna ante, commodo at eleifend id, ullamcorper sit amet velit.</p>
  95.                     <p> Pellentesque diam ante, suscipit id tortor quis, auctor elementum enim. Vestibulum in arcu ut nunc placerat semper. Suspendisse vel laoreet elit, interdum fringilla elit.</p>
  96.                 </div>
  97.             </div>
  98.             <!-- ===================== THREE -->
  99.             <div class="carousel-item" data-interval="300000">
  100.                 <div class="m-0 p-2 row no-gutters" style="height: 450px; overflow: auto;">
  101.                     <h1 class="col-12 m-1 display-4 text-secondary"><i class="fal fa-sparkles"></i> STATS</h1>
  102.                     <!-- IMAGE -->
  103.                     <div class="col-lg-4 order-lg-2 col-7 mx-auto p-1">
  104.                         <div style="background: url('//via.placeholder.com/400') center;
  105.                            background-size: cover; min-height: 200px; width: 100%;" class="rounded"></div>
  106.                     </div>
  107.                     <!-- LIKES -->
  108.                     <div class="col-lg-4 order-lg-1 p-1">
  109.                         <div class="row no-gutters">
  110.                             <h4 class="col-auto text-secondary"><i class="far fa-chevron-up"></i> LIKES</h4><div class="col mx-2 mb-3" style="border-bottom: 1px dotted;"></div></div>
  111.                         <ul class="m-0 p-0 pl-3">
  112.                             <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  113.                             <li>Nulla vulputate dolor nec viverra accumsan.</li>
  114.                             <li>Integer dignissim lorem a purus vehicula facilisis.</li>
  115.                             <li>Ut ornare eros in augue fermentum, et ultrices quam convallis.</li>
  116.                         </ul>
  117.                     </div>
  118.                     <!-- DISLIKES -->
  119.                     <div class="col-lg-4 order-lg-3 p-1">
  120.                         <div class="row no-gutters">
  121.                             <h4 class="col-auto text-secondary"><i class="far fa-chevron-down"></i> DISLIKES</h4><div class="col mx-2 mb-3" style="border-bottom: 1px dotted;"></div></div>
  122.                         <ul class="m-0 p-0 pl-3">
  123.                             <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  124.                             <li>Nulla vulputate dolor nec viverra accumsan.</li>
  125.                             <li>Integer dignissim lorem a purus vehicula facilisis.</li>
  126.                             <li>Ut ornare eros in augue fermentum, et ultrices quam convallis.</li>
  127.                         </ul>
  128.                     </div>
  129.                     <!-- STATS -->
  130.                     <div class="col-lg-12 order-lg-4 p-1 text-secondary font-weight-bold">
  131.                         <!-- CHANGE % to make colored bars smaller/bigger-->
  132.                         <p class="m-0">Charisma</p>
  133.                             <div class="progress">
  134.                             <div class="progress-bar progress-bar-striped progress-bar-animated" style="height: 7px; width: 10%; background-color: #6275B7;"></div></div>
  135.                         <p class="m-0">Courage</p>
  136.                             <div class="progress">
  137.                             <div class="progress-bar progress-bar-striped progress-bar-animated" style="height: 7px; width: 20%; background-color: #6275B7;"></div></div>
  138.                         <p class="m-0">Integrity</p>
  139.                             <div class="progress">
  140.                             <div class="progress-bar progress-bar-striped progress-bar-animated" style="height: 7px; width: 30%; background-color: #6275B7;"></div></div>
  141.                         <p class="m-0">Intellect</p>
  142.                             <div class="progress">
  143.                             <div class="progress-bar progress-bar-striped progress-bar-animated" style="height: 7px; width: 40%; background-color: #6275B7;"></div></div>
  144.                         <p class="m-0">Kindness</p>
  145.                             <div class="progress">
  146.                             <div class="progress-bar progress-bar-striped progress-bar-animated" style="height: 7px; width: 50%; background-color: #6275B7;"></div></div>
  147.                         <p class="m-0">Luck</p>
  148.                             <div class="progress">
  149.                             <div class="progress-bar progress-bar-striped progress-bar-animated" style="height: 7px; width: 60%; background-color: #6275B7;"></div></div>
  150.                     </div>
  151.                 </div>
  152.             </div>
  153.             <!-- ===================== FOUR -->
  154.             <div class="carousel-item" data-interval="300000">
  155.                 <div class="m-0 p-2 row no-gutters" style="height: 450px; overflow: auto;">
  156.                     <h1 class="col-12 m-1 display-4 text-secondary"><i class="fal fa-sparkles"></i> TRIVIA</h1>
  157.                     <!-- ===================== EXTRA INFO -->
  158.                     <!-- LEFT -->
  159.                     <div class="col-lg-6 p-1">
  160.                         <div class="row no-gutters"> <b class="col-auto text-secondary"><i class="fas fa-sparkles"></i> CALLED</b>
  161.                             <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div>
  162.                             <p class="col-auto">INFORMATION</p></div>
  163.                            
  164.                         <div class="row no-gutters"> <b class="col-auto text-secondary"><i class="fas fa-sparkles"></i> DOB</b>
  165.                             <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div>
  166.                             <p class="col-auto">INFORMATION</p></div>
  167.                            
  168.                         <div class="row no-gutters"> <b class="col-auto text-secondary"><i class="fas fa-sparkles"></i> HEIGHT</b>
  169.                             <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div>
  170.                             <p class="col-auto">INFORMATION</p></div>
  171.                            
  172.                         <div class="row no-gutters"> <b class="col-auto text-secondary"><i class="fas fa-sparkles"></i> BUILD</b>
  173.                             <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div>
  174.                             <p class="col-auto">INFORMATION</p></div>
  175.                            
  176.                         <div class="row no-gutters"> <b class="col-auto text-secondary"><i class="fas fa-sparkles"></i> EDUCATION</b>
  177.                             <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div>
  178.                             <p class="col-auto">INFORMATION</p></div>
  179.                            
  180.                         <div class="row no-gutters"> <b class="col-auto text-secondary"><i class="fas fa-sparkles"></i> ALIGNMENT</b>
  181.                             <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div>
  182.                             <p class="col-auto">INFORMATION</p></div>
  183.                     </div>
  184.                     <!-- RIGHT -->
  185.                     <div class="col-lg-6 p-1">
  186.                         <div class="row no-gutters"> <b class="col-auto text-secondary"><i class="fas fa-sparkles"></i> MBTI</b>
  187.                             <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div>
  188.                             <p class="col-auto">INFORMATION</p></div>
  189.                            
  190.                         <div class="row no-gutters"> <b class="col-auto text-secondary"><i class="fas fa-sparkles"></i> ENNEAGRAM</b>
  191.                             <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div>
  192.                             <p class="col-auto">INFORMATION</p></div>
  193.                            
  194.                         <div class="row no-gutters"> <b class="col-auto text-secondary"><i class="fas fa-sparkles"></i> SIN</b>
  195.                             <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div>
  196.                             <p class="col-auto">INFORMATION</p></div>
  197.                            
  198.                         <div class="row no-gutters"> <b class="col-auto text-secondary"><i class="fas fa-sparkles"></i> VIRTUE</b>
  199.                             <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div>
  200.                             <p class="col-auto">INFORMATION</p></div>
  201.                            
  202.                         <div class="row no-gutters"> <b class="col-auto text-secondary"><i class="fas fa-sparkles"></i> GEMSTONE</b>
  203.                             <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div>
  204.                             <p class="col-auto">INFORMATION</p></div>
  205.                            
  206.                         <div class="row no-gutters"> <b class="col-auto text-secondary"><i class="fas fa-sparkles"></i> ELEMENT</b>
  207.                             <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div>
  208.                             <p class="col-auto">INFORMATION</p></div>
  209.                     </div>
  210.                    
  211.                     <!-- TRIVIA -->
  212.                     <div class="col-12 my-2">
  213.                         <ul class="m-0 p-0 pl-3">
  214.                             <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  215.                             <li>Nulla vulputate dolor nec viverra accumsan.</li>
  216.                             <li>Integer dignissim lorem a purus vehicula facilisis.</li>
  217.                             <li>Ut ornare eros in augue fermentum, et ultrices quam convallis.</li>
  218.                         </ul>
  219.                     </div>
  220.                     <!-- MOODBOARD -->
  221.                     <div class="m-0 col-12 justify-content-center">
  222.                         <div class="m-0 row no-gutters">
  223.                             <!-- IMG 1 -->
  224.                             <div style="background-image: url(//via.placeholder.com/200); background-size: cover; background-position: center; height: 140px; width: 140px;" class="m-1 p-0 col-auto rounded"></div>
  225.                             <!-- IMG 2 -->
  226.                             <div style="background-image: url(//via.placeholder.com/200); background-size: cover; background-position: center; height: 140px; width: 140px;" class="m-1 p-0 col-auto rounded"></div>
  227.                             <!-- IMG 3 -->
  228.                             <div style="background-image: url(//via.placeholder.com/200); background-size: cover; background-position: center; height: 140px; width: 140px;" class="m-1 p-0 col-auto rounded"></div>
  229.                             <!-- IMG 4 -->
  230.                             <div style="background-image: url(//via.placeholder.com/200); background-size: cover; background-position: center; height: 140px; width: 140px;" class="m-1 p-0 col-auto rounded"></div>
  231.                         </div>
  232.                     </div>
  233.                 </div>
  234.             </div>
  235.             <!-- ===================== FIVE -->
  236.             <div class="carousel-item" data-interval="300000">
  237.                 <div class="m-0 p-2 row no-gutters" style="height: 450px; overflow: auto;">
  238.                     <div class="col-lg-6 p-2">
  239.                         <h1 class="m-1 display-4 text-secondary"><i class="fal fa-sparkles"></i> DESIGN</h1>
  240.                         <!-- COLORS -->
  241.                         <div class="row text-center m-0 mt-1">
  242.                             <div class="card border-0 m-1 col" style="height: 30px; background-color:#535353;"></div>
  243.                             <div class="card border-0 m-1 col" style="height: 30px; background-color:#646464;"></div>
  244.                             <div class="card border-0 m-1 col" style="height: 30px; background-color:#6D6D6D;"></div>
  245.                             <!-- line break --><div class="col-12"></div>
  246.                             <div class="card border-0 m-1 col" style="height: 30px; background-color:#767676;"></div>
  247.                             <div class="card border-0 m-1 col" style="height: 30px; background-color:#7E7E7E;"></div>
  248.                             <div class="card border-0 m-1 col" style="height: 30px; background-color:#878787;"></div>
  249.                             <div class="card border-0 m-1 col" style="height: 30px; background-color:#909090;"></div>
  250.                             <div class="card border-0 m-1 col" style="height: 30px; background-color:#999999;"></div>
  251.                             <!-- ADD MORE ABOVE HERE -->
  252.                         </div>
  253.                        
  254.                         <div class="m-1">
  255.                             <div class="row no-gutters"> <b class="col-auto text-secondary"><i class="fas fa-sparkles"></i> HAIR</b>
  256.                                 <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div>
  257.                                 <p class="col-auto">description</p></div>
  258.                                
  259.                             <div class="row no-gutters"> <b class="col-auto text-secondary"><i class="fas fa-sparkles"></i> EYES</b>
  260.                                 <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div>
  261.                                 <p class="col-auto">description</p></div>
  262.                                
  263.                             <div class="row no-gutters"> <b class="col-auto text-secondary"><i class="fas fa-sparkles"></i> DEMEANOR</b>
  264.                                 <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div>
  265.                                 <p class="col-auto">description</p></div>
  266.                                
  267.                             <div class="row no-gutters"> <b class="col-auto text-secondary"><i class="fas fa-sparkles"></i> RACE/ETHNICITY</b>
  268.                                 <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div>
  269.                                 <p class="col-auto">description</p></div>
  270.                         </div>
  271.                         <p class="m-0"><i class="fas fa-sparkles text-secondary font-weight-bold"></i> More facts here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  272.                         <p class="m-0"><i class="fas fa-sparkles text-secondary font-weight-bold"></i> Nam et enim id erat suscipit posuere ac at sem.</p>
  273.                     </div>
  274.                     <div class="col-lg-6 p-2 justify-content-center"><img class="m-1 rounded" src="//via.placeholder.com/300x500" style="max-height: 418px; max-width: 100%;"></div>
  275.                 </div>
  276.             </div>
  277.             <!-- ===================== SIX -->
  278.             <div class="carousel-item" data-interval="300000">
  279.                 <div class="m-0 p-2" style="height: 450px; overflow: auto;">
  280.                     <h1 class="m-1 display-4 text-secondary"><i class="fal fa-sparkles"></i> RELATIONSHIPS</h1>
  281.                     <!-- PERSON -->
  282.                     <div class="m-1 p-1" style="border-radius: 10px; border: 2px dotted; min-height: 161px;">
  283.                         <!-- IMAGE -->
  284.                         <div class="m-1 float-sm-left text-center">
  285.                             <img src="//via.placeholder.com/200" style="height: 140px; width: 140px;" class="rounded"></div>
  286.                        
  287.                         <div class="mx-2 mt-2 row no-gutters">
  288.                             <h4 class="m-0 col-auto font-weight-bold"> <a href="LINK">NAME</a> </h4>
  289.                             <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div> <p class="m-0 col-auto">RELATIONSHIP</p> </div>
  290.                         <p class="m-o">This box will expand. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut tellus in eros condimentum finibus. Morbi at augue sed eros fermentum euismod. Quisque odio tellus, vehicula in lorem vel, aliquet iaculis turpis. Praesent nec purus euismod, dignissim lectus quis, rutrum eros.</p>
  291.                     </div>
  292.                     <!-- PERSON -->
  293.                     <div class="m-1 p-1" style="border-radius: 10px; border: 2px dotted; min-height: 161px;">
  294.                         <!-- IMAGE -->
  295.                         <div class="m-1 float-sm-left text-center">
  296.                             <img src="//via.placeholder.com/200" style="height: 140px; width: 140px;" class="rounded"></div>
  297.                        
  298.                         <div class="mx-2 mt-2 row no-gutters">
  299.                             <h4 class="m-0 col-auto font-weight-bold"> <a href="LINK">NAME</a> </h4>
  300.                             <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div> <p class="m-0 col-auto">RELATIONSHIP</p> </div>
  301.                         <p class="m-o">This box will expand. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut tellus in eros condimentum finibus. Morbi at augue sed eros fermentum euismod. Quisque odio tellus, vehicula in lorem vel, aliquet iaculis turpis. Praesent nec purus euismod, dignissim lectus quis, rutrum eros.</p>
  302.                     </div>
  303.                     <!-- PERSON -->
  304.                     <div class="m-1 p-1" style="border-radius: 10px; border: 2px dotted; min-height: 161px;">
  305.                         <!-- IMAGE -->
  306.                         <div class="m-1 float-sm-left text-center">
  307.                             <img src="//via.placeholder.com/200" style="height: 140px; width: 140px;" class="rounded"></div>
  308.                        
  309.                         <div class="mx-2 mt-2 row no-gutters">
  310.                             <h4 class="m-0 col-auto font-weight-bold"> <a href="LINK">NAME</a> </h4>
  311.                             <div class="col mx-2 mb-2" style="border-bottom: 1px dotted;"></div> <p class="m-0 col-auto">RELATIONSHIP</p> </div>
  312.                         <p class="m-o">This box will expand. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut tellus in eros condimentum finibus. Morbi at augue sed eros fermentum euismod. Quisque odio tellus, vehicula in lorem vel, aliquet iaculis turpis. Praesent nec purus euismod, dignissim lectus quis, rutrum eros.</p>
  313.                     </div>
  314.                     <!-- end relationship panel -->
  315.                 </div>
  316.             </div>
  317.         </div>
  318.     </div>
  319.     <!-- INDICATOR -->
  320.     <div class="p-0 col-auto">
  321.         <div class="pr-2 align-items-center" style="opacity: 1; width: 30px; height: 100%;">
  322.             <a class="m-0" data-slide="next" data-target="#carousel" role="button"><i class="fas fa-chevron-right fa-2x text-dark"></i></a>
  323.         </div>
  324.     </div>
  325.     <!-- FOOTER -->
  326.     <div class="p-0 col-12">
  327.         <div class="progress rounded-0">
  328.             <div class="progress-bar progress-bar-striped progress-bar-animated p-2" style="width: 100%; height: auto; background-color: #6275B7; margin-top: -4px;">
  329.                 <a data-toggle="tooltip" title="Code by SparklyCodes" href="/SparklyCodes" class="text-white"><i class="fas fa-code fa-lg"></i></a>
  330.             </div>
  331.         </div>
  332.     </div>
  333. </div>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!