API tools faq
paste
SparklyLightus

Polaroid Stack V1

SparklyLightus
Jan 15th, 2021
649
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 31.66 KB | None | 1 0
raw download clone embed print report
  1. <div style="background: #92A6EB; background-attachment: fixed; position: absolute; left: 0px; top: 0px; z-index: -1;" class="h-100 w-100"></div>
  2. <!--BOX BACKGROUND: 6275B7
  3. HEADER: 394F9C
  4. PROFILE BACKGROUND: 92A6EB
  5. CUSTOM ICON USED: heart - LOOK AT fontawesome.com to chose another one and customize!-->
  6. <div class="m-2 row justify-content-center">
  7.     <!-- -------------------- MOBILE NAV -->
  8.     <div class="p-0 col-12">
  9.         <ul class="nav nav-pills text-center justify-content-center hidden-lg-up" style="font-size: 20px;">
  10.             <!-- ONE -->
  11.             <li class="nav-item" style="transform: rotate(10deg);">
  12.                 <a data-toggle="tab" href="#one" class="m-2 p-1 nav-link active text-light" style="border: 4px solid; border-bottom: 19px solid; border-radius: 0px; background: #6275B7; height: 70px; width: 60px;">
  13.                 <i class="fas fa-user mt-2"></i>
  14.                 </a>
  15.             </li>
  16.             <!-- TWO -->
  17.             <li class="nav-item" style="transform: rotate(-10deg);">
  18.                 <a data-toggle="tab" href="#two" class="m-2 p-1 nav-link text-light" style="border: 4px solid; border-bottom: 19px solid; border-radius: 0px; background: #6275B7; height: 70px; width: 60px;">
  19.                 <i class="fas fa-book mt-2"></i>
  20.                 </a>
  21.             </li>
  22.             <!-- THREE -->
  23.             <li class="nav-item" style="transform: rotate(10deg);">
  24.                 <a data-toggle="tab" href="#three" class="m-2 p-1 nav-link text-light" style="border: 4px solid; border-bottom: 19px solid; border-radius: 0px; background: #6275B7; height: 70px; width: 60px;">
  25.                 <i class="fas fa-palette mt-2"></i>
  26.                 </a>
  27.             </li>
  28.             <!-- FOUR -->
  29.             <li class="nav-item" style="transform: rotate(-10deg);">
  30.                 <a data-toggle="tab" href="#four" class="m-2 p-1 nav-link text-light" style="border: 4px solid; border-bottom: 19px solid; border-radius: 0px; background: #6275B7; height: 70px; width: 60px;">
  31.                 <i class="fas fa-star mt-2"></i>
  32.                 </a>
  33.             </li>
  34.             <!-- FIVE -->
  35.             <li class="nav-item" style="transform: rotate(10deg);">
  36.                 <a data-toggle="tab" href="#five" class="m-2 p-1 nav-link text-light" style="border: 4px solid; border-bottom: 19px solid; border-radius: 0px; background: #6275B7; height: 70px; width: 60px;">
  37.                 <i class="fas fa-link mt-2"></i>
  38.                 </a>
  39.             </li>
  40.         </ul>
  41.     </div>
  42.     <!-- -------------------- CONTENT BOX -->
  43.     <div class="m-1 p-0 col-lg-9">
  44.         <div class="m-1 tab-content rounded" style="background: #6275B7;">
  45.             <!-- ONE -->
  46.             <div class="p-1 tab-pane fade show active" id="one">
  47.                 <!-- HEADER -->
  48.                 <div class="m-1 p-2 card border-0 text-center">
  49.                     <div class="justify-content-between">
  50.                         <h1 class="m-0 display-3">NAME</h1>
  51.                         <h1 class="m-0">
  52.                             <i class="fas fa-heart fa-lg"></i> <i class="fas fa-heart fa-2x"></i></h1>
  53.                     </div>
  54.                 </div>
  55.                
  56.                 <!-- DIVIDER -->
  57.                 <h6 class="m-0 text-center">
  58.                     <i class="fas fa-heart fa-lg"></i> <i class="fas fa-heart fa-2x"></i> <i class="fas fa-heart fa-lg"></i></h6>
  59.                 <!-- BASICS -->
  60.                 <div class="m-1 p-2 card border-0">
  61.                     <h1 class="m-0" style="color: #394F9C;">BASICS</h1>
  62.                     <div class="m-0 row">
  63.                         <div class="p-0 col-md-6"><p class="m-1 p-1 bg-faded rounded justify-content-between">
  64.                             <b class="text-secondary">NAME</b>
  65.                             <span>information</span></p></div>
  66.                         <div class="p-0 col-md-6"><p class="m-1 p-1 bg-faded rounded justify-content-between">
  67.                             <b class="text-secondary">ALIAS</b>
  68.                             <span>information</span></p></div>
  69.                         <div class="p-0 col-md-6"><p class="m-1 p-1 bg-faded rounded justify-content-between">
  70.                             <b class="text-secondary">AGE</b>
  71.                             <span>information</span></p></div>
  72.                         <div class="p-0 col-md-6"><p class="m-1 p-1 bg-faded rounded justify-content-between">
  73.                             <b class="text-secondary">GENDER</b>
  74.                             <span>information</span></p></div>
  75.                         <div class="p-0 col-md-6"><p class="m-1 p-1 bg-faded rounded justify-content-between">
  76.                             <b class="text-secondary">ORIENTATION</b>
  77.                             <span>information</span></p></div>
  78.                         <div class="p-0 col-md-6"><p class="m-1 p-1 bg-faded rounded justify-content-between">
  79.                             <b class="text-secondary">THEME</b>
  80.                             <span>information</span></p></div>
  81.                     </div>
  82.                 </div>
  83.                
  84.                 <!-- DIVIDER -->
  85.                 <h6 class="m-0 text-center">
  86.                     <i class="fas fa-heart fa-lg"></i> <i class="fas fa-heart fa-2x"></i> <i class="fas fa-heart fa-lg"></i></h6>
  87.                 <!-- OVERVIEW -->
  88.                 <div class="m-1 p-2 card border-0">
  89.                     <div>
  90.                         <div class="m-1 float-sm-right justify-content-center">
  91.                             <img class="img-thumbnail rounded-0" src="//via.placeholder.com/200" style="height: 150px; width: 150px;">
  92.                         </div>
  93.                         <h1 class="m-0" style="color: #394F9C;">OVERVIEW</h1>
  94.                         <p>Introduce your character here. This box expands. Suspendisse sagittis libero in rutrum varius. Pellentesque aliquam lacus at quam mollis luctus. Nunc lacinia arcu augue, vel aliquam purus mattis vitae. Pellentesque venenatis libero vitae dui blandit, sed condimentum diam iaculis. Mauris eget erat finibus, porta ex ut, bibendum felis. Sed facilisis non ipsum at suscipit.</p>
  95.                         <p>Aenean rutrum mauris rhoncus viverra tincidunt. Nunc quis nisl lobortis, semper turpis sit amet, placerat sem.</p>
  96.                     </div>
  97.                 </div>
  98.                
  99.                 <!-- DIVIDER -->
  100.                 <h6 class="m-0 text-center">
  101.                     <i class="fas fa-heart fa-lg"></i> <i class="fas fa-heart fa-2x"></i> <i class="fas fa-heart fa-lg"></i></h6>
  102.                 <!-- PERSONALITY -->
  103.                 <div class="m-1 p-2 card border-0">
  104.                     <h1 class="m-0" style="color: #394F9C;">PERSONALITY</h1>
  105.                     <p>Write about their personality This box expands. Nam et mattis turpis. Mauris et pulvinar sapien, in tempus lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam vulputate elit eget justo condimentum gravida. Fusce at sem non mi interdum congue. Morbi sed lectus sed neque tincidunt pharetra vel eget purus. Maecenas massa felis, vehicula vitae facilisis sed, vulputate ut odio. Phasellus dictum scelerisque nisi, ac efficitur erat sagittis et. </p>
  106.                     <p>Praesent nunc eros, bibendum vel risus vel, auctor rhoncus orci. Nulla dictum euismod velit vestibulum euismod. Nunc magna eros, vehicula nec vulputate ut, auctor sed est. Quisque efficitur aliquam arcu vitae vulputate. Aenean erat dolor, tempor vel placerat at, tristique sit amet orci. Aliquam tempor sagittis vestibulum. Curabitur in arcu nulla. Etiam ultricies molestie erat ut laoreet. Morbi eu dolor id justo dictum imperdiet. </p>
  107.                 </div>
  108.             </div>
  109.             <!-- TWO -->
  110.             <div class="p-1 tab-pane fade" id="two">
  111.                 <!-- HEADER -->
  112.                 <div class="m-1 p-2 card border-0 text-center">
  113.                     <div class="justify-content-between">
  114.                         <h1 class="m-0 display-3">STORY</h1>
  115.                         <h1 class="m-0">
  116.                             <i class="fas fa-heart fa-lg"></i> <i class="fas fa-heart fa-2x"></i></h1>
  117.                     </div>
  118.                 </div>
  119.                
  120.                 <!-- DIVIDER -->
  121.                 <h6 class="m-0 text-center">
  122.                     <i class="fas fa-heart fa-lg"></i> <i class="fas fa-heart fa-2x"></i> <i class="fas fa-heart fa-lg"></i></h6>
  123.                 <!-- CONTENT -->
  124.                 <div class="m-1 p-2 card border-0">
  125.                     <div>
  126.                         <div class="m-1 float-sm-right justify-content-center">
  127.                             <img src="//via.placeholder.com/200x400" style="max-height: 350px;">
  128.                         </div>
  129.                         <!-- HEADER -->
  130.                         <h1 class="m-0" style="color: #394F9C;">HEADER</h1>
  131.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu venenatis mi, nec iaculis elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec mattis, ligula a aliquam bibendum, justo turpis aliquet lacus, ac viverra nibh libero et augue. Duis ac sapien quis nisl sodales aliquet. Nam et mattis mi. Curabitur interdum nunc in risus commodo, in cursus magna varius. Etiam interdum placerat commodo. In dignissim sollicitudin nisi vel interdum.</p>
  132.                         <p>Quisque pellentesque fermentum eros sit amet dictum. Nullam sagittis, tortor ac pellentesque congue, turpis erat ullamcorper nulla, a tempor nulla velit varius orci.</p>
  133.                         <!-- HEADER -->
  134.                         <h1 class="m-0" style="color: #394F9C;">HEADER</h1>
  135.                         <p>Fusce lectus tortor, auctor eget fringilla maximus, tincidunt at tortor. Etiam ut mauris ligula. Pellentesque placerat, purus non tristique elementum, lacus velit tincidunt sem, vitae gravida nisi nisi id lacus. Nam viverra arcu eget interdum vulputate. Donec eu efficitur purus. Nulla vitae leo dignissim, dapibus massa a, pulvinar sapien.</p>
  136.                         <!-- HEADER -->
  137.                         <h1 class="m-0" style="color: #394F9C;">HEADER</h1>
  138.                         <p>Quisque pretium erat turpis, sed tincidunt ante accumsan sit amet. Praesent vitae sem sed magna convallis facilisis euismod a elit. Etiam at ipsum a sapien sodales fringilla at eleifend eros. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  139.                         <p>Nulla eget varius nibh. Nulla nec tristique ante. Etiam malesuada sem bibendum, pretium libero sit amet, auctor lacus. Aliquam ut quam ut nisi gravida volutpat. Suspendisse bibendum in nulla id auctor.</p>
  140.                     </div>
  141.                 </div>
  142.             </div>
  143.             <!-- THREE -->
  144.             <div class="p-1 tab-pane fade" id="three">
  145.                 <!-- HEADER -->
  146.                 <div class="m-1 p-2 card border-0 text-center">
  147.                     <div class="justify-content-between">
  148.                         <h1 class="m-0 display-3">DESIGN</h1>
  149.                         <h1 class="m-0">
  150.                             <i class="fas fa-heart fa-lg"></i> <i class="fas fa-heart fa-2x"></i></h1>
  151.                     </div>
  152.                 </div>
  153.                
  154.                 <!-- DIVIDER -->
  155.                 <h6 class="m-0 text-center">
  156.                     <i class="fas fa-heart fa-lg"></i> <i class="fas fa-heart fa-2x"></i> <i class="fas fa-heart fa-lg"></i></h6>
  157.                 <!-- CONTENT -->
  158.                 <div class="m-1 p-2 card border-0">
  159.                     <div>
  160.                         <div class="m-1 float-sm-left justify-content-center">
  161.                             <!-- FLOATING IMAGE - LINK REFERENCE SHEET IF YOU WANT TO. IF NOT, REMOVE <a> and </a> -->
  162.                             <a href="LINK_HERE" target="_blank" data-toggle="tooltip" title="Click for Reference Sheet">
  163.                                 <img src="//via.placeholder.com/200x400" style="max-height: 350px;">
  164.                             </a>
  165.                         </div>
  166.                         <!-- APPEARANCE -->
  167.                         <h1 class="m-0" style="color: #394F9C;">APPEARANCE</h1>
  168.                         <p>Describe the character's appearance here. Etiam lacinia risus vitae nibh lacinia viverra. Fusce elementum nec libero vitae mattis. Suspendisse eu ante tincidunt, consectetur est non, tempor mi. Ut velit odio, gravida quis pretium nec, facilisis non risus. Donec nec lectus quis risus tempor sagittis non in nulla. Maecenas eget ante eros. Etiam tincidunt ornare ultrices. Aliquam varius nibh ut diam luctus, id bibendum nisl suscipit. Integer laoreet lectus scelerisque, finibus libero non, porta sem.</p>
  169.                         <!-- COLORS -->
  170.                         <h1 class="m-0" style="color: #394F9C;">COLORS</h1>
  171.                         <h1 class="display-4 justify-content-center">
  172.                             <span style="color: #949494;" data-toggle="tooltip" title="Skin"><i class="m-1 fas fa-heart"></i></span>
  173.                             <span style="color: #949494;" data-toggle="tooltip" title="Hair"><i class="m-1 fas fa-heart"></i></span>
  174.                             <span style="color: #949494;" data-toggle="tooltip" title="Eyes"><i class="m-1 fas fa-heart"></i></span>
  175.                             <span style="color: #949494;" data-toggle="tooltip" title="Extra"><i class="m-1 fas fa-heart"></i></span>
  176.                             <span style="color: #949494;" data-toggle="tooltip" title="Extra"><i class="m-1 fas fa-heart"></i></span>
  177.                         </h1>
  178.                     </div>
  179.                 </div>
  180.                
  181.                 <!-- DIVIDER -->
  182.                 <h6 class="m-0 text-center">
  183.                     <i class="fas fa-heart fa-lg"></i> <i class="fas fa-heart fa-2x"></i> <i class="fas fa-heart fa-lg"></i></h6>
  184.                 <!-- DEISGN NOTES -->
  185.                 <div class="m-1 p-2 card border-0">
  186.                     <h1 class="m-0" style="color: #394F9C;">DESIGN NOTES</h1>
  187.                     <ul>
  188.                         <li>Vestibulum tristique sodales sapien quis consequat.</li>
  189.                         <li>Pellentesque rutrum gravida nibh, non gravida sapien venenatis nec.</li>
  190.                         <li>Ut id semper metus.</li>
  191.                     </ul>
  192.                 </div>
  193.             </div>
  194.             <!-- FOUR -->
  195.             <div class="p-1 tab-pane fade" id="four">
  196.                 <!-- HEADER -->
  197.                 <div class="m-1 p-2 card border-0 text-center">
  198.                     <div class="justify-content-between">
  199.                         <h1 class="m-0 display-3">DETAILS</h1>
  200.                         <h1 class="m-0">
  201.                             <i class="fas fa-heart fa-lg"></i> <i class="fas fa-heart fa-2x"></i></h1>
  202.                     </div>
  203.                 </div>
  204.                
  205.                 <!-- DIVIDER -->
  206.                 <h6 class="m-0 text-center">
  207.                     <i class="fas fa-heart fa-lg"></i> <i class="fas fa-heart fa-2x"></i> <i class="fas fa-heart fa-lg"></i></h6>
  208.                 <!-- IN-DEPTH -->
  209.                 <div class="m-1 p-2 card border-0">
  210.                     <h1 class="m-0" style="color: #394F9C;">IN-DEPTH</h1>
  211.                     <div class="m-0 row">
  212.                         <div class="p-0 col-md-6"><p class="m-1 p-1 bg-faded rounded justify-content-between">
  213.                             <b class="text-secondary">BIRTHDAY</b>
  214.                             <span>information</span></p></div>
  215.                         <div class="p-0 col-md-6"><p class="m-1 p-1 bg-faded rounded justify-content-between">
  216.                             <b class="text-secondary">RELATIONSHIP</b>
  217.                             <span>information</span></p></div>
  218.                         <div class="p-0 col-md-6"><p class="m-1 p-1 bg-faded rounded justify-content-between">
  219.                             <b class="text-secondary">MBTI</b>
  220.                             <span>information</span></p></div>
  221.                         <div class="p-0 col-md-6"><p class="m-1 p-1 bg-faded rounded justify-content-between">
  222.                             <b class="text-secondary">HEIGHT</b>
  223.                             <span>information</span></p></div>
  224.                         <div class="p-0 col-md-6"><p class="m-1 p-1 bg-faded rounded justify-content-between">
  225.                             <b class="text-secondary">WEIGHT</b>
  226.                             <span>information</span></p></div>
  227.                         <div class="p-0 col-md-6"><p class="m-1 p-1 bg-faded rounded justify-content-between">
  228.                             <b class="text-secondary">OCCUPATION</b>
  229.                             <span>information</span></p></div>
  230.                         <div class="p-0 col-md-6"><p class="m-1 p-1 bg-faded rounded justify-content-between">
  231.                             <b class="text-secondary">STATUS</b>
  232.                             <span>information</span></p></div>
  233.                         <div class="p-0 col-md-6"><p class="m-1 p-1 bg-faded rounded justify-content-between">
  234.                             <b class="text-secondary">ORIGIN</b>
  235.                             <span>information</span></p></div>
  236.                     </div>
  237.                 </div>
  238.                
  239.                 <!-- DIVIDER -->
  240.                 <h6 class="m-0 text-center">
  241.                     <i class="fas fa-heart fa-lg"></i> <i class="fas fa-heart fa-2x"></i> <i class="fas fa-heart fa-lg"></i></h6>
  242.                 <!-- TASTES -->
  243.                 <div class="m-1 p-2 card border-0">
  244.                     <h1 class="m-0" style="color: #394F9C;">TASTES</h1>
  245.                     <div class="m-0 row">
  246.                         <!-- LIKES -->
  247.                         <ul class="m-1 p-0 col-md list-unstyled font-weight-bold">
  248.                             <li class="text-success">LIKES:</li>
  249.                             <li><i class="fas fa-check text-success"></i> INFO</li>
  250.                             <li><i class="fas fa-check text-success"></i> INFO</li>
  251.                             <li><i class="fas fa-check text-success"></i> INFO</li>
  252.                             <li><i class="fas fa-check text-success"></i> INFO</li>
  253.                         </ul>
  254.                         <!-- DISLIKES -->
  255.                         <ul class="m-1 p-0 col-md list-unstyled font-weight-bold">
  256.                             <li class="text-danger">DISLIKES:</li>
  257.                             <li><i class="fas fa-times text-danger"></i> INFO</li>
  258.                             <li><i class="fas fa-times text-danger"></i> INFO</li>
  259.                             <li><i class="fas fa-times text-danger"></i> INFO</li>
  260.                             <li><i class="fas fa-times text-danger"></i> INFO</li>
  261.                         </ul>
  262.                     </div>
  263.                 </div>
  264.                
  265.                 <!-- DIVIDER -->
  266.                 <h6 class="m-0 text-center">
  267.                     <i class="fas fa-heart fa-lg"></i> <i class="fas fa-heart fa-2x"></i> <i class="fas fa-heart fa-lg"></i></h6>
  268.                 <!-- TRIVIA -->
  269.                 <div class="m-1 p-2 card border-0">
  270.                     <h1 class="m-0" style="color: #394F9C;">TRIVIA</h1>
  271.                     <ul>
  272.                         <li>Miscellaneous Trivia here.Vestibulum tristique sodales sapien quis consequat.</li>
  273.                         <li>Pellentesque rutrum gravida nibh, non gravida sapien venenatis nec.</li>
  274.                         <li>Ut id semper metus.</li>
  275.                     </ul>
  276.                 </div>
  277.                
  278.                 <!-- DIVIDER -->
  279.                 <h6 class="m-0 text-center">
  280.                     <i class="fas fa-heart fa-lg"></i> <i class="fas fa-heart fa-2x"></i> <i class="fas fa-heart fa-lg"></i></h6>
  281.                 <!-- SKILLS -->
  282.                 <div class="m-1 p-2 card border-0">
  283.                     <h1 class="m-0" style="color: #394F9C;">SKILLS</h1>
  284.                     <ul>
  285.                         <li>Write some skills here. These can be the things they're good at or specific spells/techniques. Vestibulum tristique sodales sapien quis consequat.</li>
  286.                         <li>Pellentesque rutrum gravida nibh, non gravida sapien venenatis nec.</li>
  287.                         <li>Ut id semper metus.</li>
  288.                     </ul>
  289.                 </div>
  290.             </div>
  291.             <!-- FIVE -->
  292.             <div class="p-1 tab-pane fade" id="five">
  293.                 <!-- HEADER -->
  294.                 <div class="m-1 p-2 card border-0 text-center">
  295.                     <div class="justify-content-between">
  296.                         <h1 class="m-0 display-3">LINKS</h1>
  297.                         <h1 class="m-0">
  298.                             <i class="fas fa-heart fa-lg"></i> <i class="fas fa-heart fa-2x"></i></h1>
  299.                     </div>
  300.                 </div>
  301.                
  302.                 <!-- DIVIDER -->
  303.                 <h6 class="m-0 text-center">
  304.                     <i class="fas fa-heart fa-lg"></i> <i class="fas fa-heart fa-2x"></i> <i class="fas fa-heart fa-lg"></i></h6>
  305.                 <!-- FAMILY -->
  306.                 <div class="m-1 p-2 card border-0">
  307.                     <h1 class="m-0" style="color: #394F9C;">FAMILY</h1>
  308.                     <!-- PERSON -->
  309.                     <div class="m-1 p-2 bg-faded rounded">
  310.                         <div class="m-1 float-sm-left justify-content-center">
  311.                             <img class="img-thumbnail rounded-0" src="//via.placeholder.com/200" style="height: 150px; width: 150px;">
  312.                         </div>
  313.                         <!-- NAME -->
  314.                         <h4 class="m-0">
  315.                             <a href="LINK">Name</a>
  316.                             <i class="fas fa-heart"></i> <em>Relationship</em>
  317.                         </h4>
  318.                         <p>Describe relationship. This box expands. Cras accumsan posuere venenatis. Phasellus ut dictum est. Etiam nisi nisl, malesuada vel vestibulum eget, gravida sit amet nisl. In ac interdum augue. Nunc sit amet libero mauris.</p>
  319.                         <p>Cras sed pellentesque dolor. Nullam ac finibus quam. Fusce non nunc quis tortor commodo aliquet et pretium arcu. Donec vehicula placerat cursus. Aenean a imperdiet elit. Aliquam scelerisque sed leo et rutrum. Mauris interdum tortor sed nibh aliquet interdum. </p>
  320.                     </div>
  321.                     <!-- PERSON -->
  322.                     <div class="m-1 p-2 bg-faded rounded">
  323.                         <div class="m-1 float-sm-left justify-content-center">
  324.                             <img class="img-thumbnail rounded-0" src="//via.placeholder.com/200" style="height: 150px; width: 150px;">
  325.                         </div>
  326.                         <!-- NAME -->
  327.                         <h4 class="m-0">
  328.                             <a href="LINK">Name</a>
  329.                             <i class="fas fa-heart"></i> <em>Relationship</em>
  330.                         </h4>
  331.                         <p>Describe relationship. This box expands. Cras accumsan posuere venenatis. Phasellus ut dictum est. Etiam nisi nisl, malesuada vel vestibulum eget, gravida sit amet nisl. In ac interdum augue. Nunc sit amet libero mauris.</p>
  332.                         <p>Cras sed pellentesque dolor. Nullam ac finibus quam. Fusce non nunc quis tortor commodo aliquet et pretium arcu. Donec vehicula placerat cursus. Aenean a imperdiet elit. Aliquam scelerisque sed leo et rutrum. Mauris interdum tortor sed nibh aliquet interdum. </p>
  333.                     </div>
  334.                 </div>
  335.                
  336.                 <!-- DIVIDER -->
  337.                 <h6 class="m-0 text-center">
  338.                     <i class="fas fa-heart fa-lg"></i> <i class="fas fa-heart fa-2x"></i> <i class="fas fa-heart fa-lg"></i></h6>
  339.                 <!-- FRIENDS -->
  340.                 <div class="m-1 p-2 card border-0">
  341.                     <h1 class="m-0" style="color: #394F9C;">FRIENDS</h1>
  342.                     <!-- PERSON -->
  343.                     <div class="m-1 p-2 bg-faded rounded">
  344.                         <div class="m-1 float-sm-left justify-content-center">
  345.                             <img class="img-thumbnail rounded-0" src="//via.placeholder.com/200" style="height: 150px; width: 150px;">
  346.                         </div>
  347.                         <!-- NAME -->
  348.                         <h4 class="m-0">
  349.                             <a href="LINK">Name</a>
  350.                             <i class="fas fa-heart"></i> <em>Relationship</em>
  351.                         </h4>
  352.                         <p>Describe relationship. This box expands. Cras accumsan posuere venenatis. Phasellus ut dictum est. Etiam nisi nisl, malesuada vel vestibulum eget, gravida sit amet nisl. In ac interdum augue. Nunc sit amet libero mauris.</p>
  353.                         <p>Cras sed pellentesque dolor. Nullam ac finibus quam. Fusce non nunc quis tortor commodo aliquet et pretium arcu. Donec vehicula placerat cursus. Aenean a imperdiet elit. Aliquam scelerisque sed leo et rutrum. Mauris interdum tortor sed nibh aliquet interdum. </p>
  354.                     </div>
  355.                     <!-- PERSON -->
  356.                     <div class="m-1 p-2 bg-faded rounded">
  357.                         <div class="m-1 float-sm-left justify-content-center">
  358.                             <img class="img-thumbnail rounded-0" src="//via.placeholder.com/200" style="height: 150px; width: 150px;">
  359.                         </div>
  360.                         <!-- NAME -->
  361.                         <h4 class="m-0">
  362.                             <a href="LINK">Name</a>
  363.                             <i class="fas fa-heart"></i> <em>Relationship</em>
  364.                         </h4>
  365.                         <p>Describe relationship. This box expands. Cras accumsan posuere venenatis. Phasellus ut dictum est. Etiam nisi nisl, malesuada vel vestibulum eget, gravida sit amet nisl. In ac interdum augue. Nunc sit amet libero mauris.</p>
  366.                         <p>Cras sed pellentesque dolor. Nullam ac finibus quam. Fusce non nunc quis tortor commodo aliquet et pretium arcu. Donec vehicula placerat cursus. Aenean a imperdiet elit. Aliquam scelerisque sed leo et rutrum. Mauris interdum tortor sed nibh aliquet interdum. </p>
  367.                     </div>
  368.                 </div>
  369.                
  370.                 <!-- DIVIDER -->
  371.                 <h6 class="m-0 text-center">
  372.                     <i class="fas fa-heart fa-lg"></i> <i class="fas fa-heart fa-2x"></i> <i class="fas fa-heart fa-lg"></i></h6>
  373.                 <!-- FRIENDS -->
  374.                 <div class="m-1 p-2 card border-0">
  375.                     <h1 class="m-0" style="color: #394F9C;">MISCELLANEOUS</h1>
  376.                     <!-- PERSON -->
  377.                     <div class="m-1 p-2 bg-faded rounded">
  378.                         <div class="m-1 float-sm-left justify-content-center">
  379.                             <img class="img-thumbnail rounded-0" src="//via.placeholder.com/200" style="height: 150px; width: 150px;">
  380.                         </div>
  381.                         <!-- NAME -->
  382.                         <h4 class="m-0">
  383.                             <a href="LINK">Name</a>
  384.                             <i class="fas fa-heart"></i> <em>Relationship</em>
  385.                         </h4>
  386.                         <p>Describe relationship. This box expands. Cras accumsan posuere venenatis. Phasellus ut dictum est. Etiam nisi nisl, malesuada vel vestibulum eget, gravida sit amet nisl. In ac interdum augue. Nunc sit amet libero mauris.</p>
  387.                         <p>Cras sed pellentesque dolor. Nullam ac finibus quam. Fusce non nunc quis tortor commodo aliquet et pretium arcu. Donec vehicula placerat cursus. Aenean a imperdiet elit. Aliquam scelerisque sed leo et rutrum. Mauris interdum tortor sed nibh aliquet interdum. </p>
  388.                     </div>
  389.                     <!-- PERSON -->
  390.                     <div class="m-1 p-2 bg-faded rounded">
  391.                         <div class="m-1 float-sm-left justify-content-center">
  392.                             <img class="img-thumbnail rounded-0" src="//via.placeholder.com/200" style="height: 150px; width: 150px;">
  393.                         </div>
  394.                         <!-- NAME -->
  395.                         <h4 class="m-0">
  396.                             <a href="LINK">Name</a>
  397.                             <i class="fas fa-heart"></i> <em>Relationship</em>
  398.                         </h4>
  399.                         <p>Describe relationship. This box expands. Cras accumsan posuere venenatis. Phasellus ut dictum est. Etiam nisi nisl, malesuada vel vestibulum eget, gravida sit amet nisl. In ac interdum augue. Nunc sit amet libero mauris.</p>
  400.                         <p>Cras sed pellentesque dolor. Nullam ac finibus quam. Fusce non nunc quis tortor commodo aliquet et pretium arcu. Donec vehicula placerat cursus. Aenean a imperdiet elit. Aliquam scelerisque sed leo et rutrum. Mauris interdum tortor sed nibh aliquet interdum. </p>
  401.                     </div>
  402.                 </div>
  403.             </div>
  404.         </div>
  405.         <!-- CREDIT, DON'T MOVE -->
  406.         <div class="p-0 text-center">
  407.             <a class="text-dark" data-toggle="tooltip" title="SparklyCodes" href="/SparklyCodes"><i class="fal fa-code"></i></a>
  408.         </div>
  409.     </div>
  410.     <!-- -------------------- NAV -->
  411.     <div class="p-0 col-lg-auto">
  412.         <div class="sticky-top">
  413.             <ul class="hidden-md-down justify-content-center nav nav-pills text-center flex-column" style="font-size: 40px;">
  414.                 <!-- ONE -->
  415.                 <li class="nav-item" style="transform: rotate(10deg);">
  416.                     <a data-toggle="tab" href="#one" class="m-2 p-0 nav-link active text-light" style="border: 4px solid; border-bottom: 30px solid; border-radius: 0px; background: #6275B7; height: 110px; width: 90px;">
  417.                         <i class="fas fa-user mt-3"></i>
  418.                     </a>
  419.                 </li>
  420.                 <!-- TWO -->
  421.                 <li class="nav-item" style="transform: rotate(-10deg); margin-top: -30px;">
  422.                     <a data-toggle="tab" href="#two" class="m-2 p-0 nav-link text-light" style="border: 4px solid; border-bottom: 30px solid; border-radius: 0px; background: #6275B7; height: 110px; width: 90px;">
  423.                         <i class="fas fa-book mt-3"></i>
  424.                     </a>
  425.                 </li>
  426.                 <!-- THREE -->
  427.                 <li class="nav-item" style="transform: rotate(10deg); margin-top: -30px;">
  428.                     <a data-toggle="tab" href="#three" class="m-2 p-0 nav-link text-light" style="border: 4px solid; border-bottom: 30px solid; border-radius: 0px; background: #6275B7; height: 110px; width: 90px;">
  429.                         <i class="fas fa-palette mt-3"></i>
  430.                     </a>
  431.                 </li>
  432.                 <!-- FOUR -->
  433.                 <li class="nav-item" style="transform: rotate(-10deg); margin-top: -30px;">
  434.                     <a data-toggle="tab" href="#four" class="m-2 p-0 nav-link text-light" style="border: 4px solid; border-bottom: 30px solid; border-radius: 0px; background: #6275B7; height: 110px; width: 90px;">
  435.                         <i class="fas fa-star mt-3"></i>
  436.                     </a>
  437.                 </li>
  438.                 <!-- FIVE -->
  439.                 <li class="nav-item" style="transform: rotate(10deg); margin-top: -30px;">
  440.                     <a data-toggle="tab" href="#five" class="m-2 p-0 nav-link text-light" style="border: 4px solid; border-bottom: 30px solid; border-radius: 0px; background: #6275B7; height: 110px; width: 90px;">
  441.                         <i class="fas fa-link mt-3"></i>
  442.                     </a>
  443.                 </li>
  444.             </ul>
  445.         </div>
  446.     </div>
  447. </div>
  448.  
  449. <!-- GO TO TOP BUTTON -->
  450. <a href="#top" class="p-2 btn btn-secondary" style="position: fixed; bottom: 10px; right: 10px; z-index: 100;">
  451.     <i class="fas fa-chevron-double-up fa-lg"></i>
  452. </a>
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!