API tools faq
paste
Advertisement
SparklyLightus

Hi-tech HTML only

SparklyLightus
Jul 16th, 2021
2,380
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 36.35 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. 6275B7 >> ACCENT COLOR
  3. fas fa-seedling >> ACCENT FA ICON
  4. fal fa-seedling >> SUBHEADER FA ICON
  5. -->
  6. <div class="p-1 mx-auto" style="max-width: 900px;">
  7. <!-- ............................ INFORMATION CONTAINER -->
  8. <div class="col-lg-9">
  9.     <h1 class="m-0 text-monospace" style="padding-left: 4%; color: #6275B7;">
  10.         <i class="fas fa-seedling"></i> Name</h1>
  11.     <!-- ++++++++++++++++++++ TOP LINE -->
  12.     <div style="border-width: 4px 0px 0px 4px; border-style: double; height: 20px; width: 40%; margin-left: 3%; transform:skewX(-30deg); color: #6275B7;"></div>
  13.     <!-- ++++++++++++++++++++ BOX -->
  14.     <div class="p-0 bg-faded row no-gutters" style="border: 4px double #6275B7;">
  15.         <!-- content -->
  16.         <div class="col-lg overflow-auto" style="height: 450px;">
  17.             <!-- NAV BUTTONS -->
  18.             <ul class="p-2 nav nav-pills text-center justify-content-center sticky-top" style="margin-bottom: -20px;">
  19.                 <li class="nav-item"><a data-toggle="tab" style="color: #6275B7; border: 1px solid;" class="mx-1 p-2 btn btn-secondary rounded-circle active" href="#G">
  20.                     <i class="fas fa-seedling fa-fw"></i> </a></li>
  21.                 <li class="nav-item"><a data-toggle="tab" style="color: #6275B7; border: 1px solid;" class="mx-1 p-2 btn btn-secondary rounded-circle" href="#H">
  22.                     <i class="fas fa-user fa-fw"></i> </a></li>
  23.                 <li class="nav-item"><a data-toggle="tab" style="color: #6275B7; border: 1px solid;" class="mx-1 p-2 btn btn-secondary rounded-circle" href="#I">
  24.                     <i class="fas fa-save fa-fw"></i> </a></li>
  25.                 <li class="nav-item"><a data-toggle="tab" style="color: #6275B7; border: 1px solid;" class="mx-1 p-2 btn btn-secondary rounded-circle" href="#J">
  26.                     <i class="fas fa-pencil-alt fa-fw"></i> </a></li>
  27.                 <li class="nav-item"><a data-toggle="tab" style="color: #6275B7; border: 1px solid;" class="mx-1 p-2 btn btn-secondary rounded-circle" href="#K">
  28.                     <i class="fas fa-list fa-fw"></i> </a></li>
  29.                 <li class="nav-item"><a data-toggle="tab" style="color: #6275B7; border: 1px solid;" class="mx-1 p-2 btn btn-secondary rounded-circle" href="#L">
  30.                     <i class="fas fa-chart-network fa-fw"></i> </a></li>
  31.             </ul>
  32.             <!-- NAV CONTENT -->
  33.             <div class="p-2 tab-content">
  34.                 <!-- ++++++ SUMMARY -->
  35.                 <div class="tab-pane show active" id="G"> <div class="row no-gutters">
  36.                     <!-- HEADER -->
  37.                     <div class="p-1 col-12" style="color: #6275B7;">
  38.                         <h1 class="m-0 mt-2 text-monospace" style=" text-indent: 5px;"> <i class="fas fa-seedling fa-fw"></i> Summary</h1>
  39.                         <div style="border-bottom: 4px double; border-left: 4px double;
  40.                        height: 30px; width: 100%;margin: -25px 0px 0px -7px; transform:skewX(30deg);"></div>
  41.                     </div>
  42.                     <!-- LEFT -->
  43.                     <div class="pl-sm-1 col-sm-4" style="letter-spacing: 1.5px;"> <div class="p-1 card border-0 rounded-0 h-100">
  44.                         <p class="m-0 font-weight-bold" style="border-bottom: 3px double; color: #6275B7;">Name</p>
  45.                             <p class="m-0 ml-2">Information</p>
  46.                         <p class="m-0 font-weight-bold" style="border-bottom: 3px double; color: #6275B7;">Alias</p>
  47.                             <p class="m-0 ml-2">Information</p>
  48.                         <p class="m-0 font-weight-bold" style="border-bottom: 3px double; color: #6275B7;">Gender</p>
  49.                             <p class="m-0 ml-2">Information</p>
  50.                         <p class="m-0 font-weight-bold" style="border-bottom: 3px double; color: #6275B7;">Age</p>
  51.                             <p class="m-0 ml-2">Information</p>
  52.                     </div> </div>
  53.                     <!-- CENTER -->
  54.                     <div class="pl-sm-1 col-sm-4" style="letter-spacing: 1.5px;"> <div class="p-1 card border-0 rounded-0 h-100">
  55.                         <p class="m-0 font-weight-bold" style="border-bottom: 3px double; color: #6275B7;">Race</p>
  56.                             <p class="m-0 ml-2">Information</p>
  57.                         <p class="m-0 font-weight-bold" style="border-bottom: 3px double; color: #6275B7;">Orientation</p>
  58.                             <p class="m-0 ml-2">Information</p>
  59.                         <p class="m-0 font-weight-bold" style="border-bottom: 3px double; color: #6275B7;">Occupation</p>
  60.                             <p class="m-0 ml-2">Information</p>
  61.                         <p class="m-0 font-weight-bold" style="border-bottom: 3px double; color: #6275B7;">Origin</p>
  62.                             <p class="m-0 ml-2">Information</p>
  63.                     </div> </div>
  64.                     <!-- RIGHT -->
  65.                     <div class="pl-sm-1 col-sm-4" style="letter-spacing: 1.5px;"> <div class="p-1 card border-0 rounded-0 h-100">
  66.                         <p class="m-0 font-weight-bold" style="border-bottom: 3px double; color: #6275B7;">Birthday</p>
  67.                             <p class="m-0 ml-2">Information</p>
  68.                         <p class="m-0 font-weight-bold" style="border-bottom: 3px double; color: #6275B7;">Height</p>
  69.                             <p class="m-0 ml-2">Information</p>
  70.                         <p class="m-0 font-weight-bold" style="border-bottom: 3px double; color: #6275B7;">MBTI</p>
  71.                             <p class="m-0 ml-2">Information</p>
  72.                         <p class="m-0 font-weight-bold" style="border-bottom: 3px double; color: #6275B7;">Voice Claim</p>
  73.                             <p class="m-0 ml-2"><a href="LINK" target="_blank">Information</a></p>
  74.                     </div> </div>
  75.                     <!-- PARAGRAPHS -->
  76.                     <div class="p-1 col-12" style="text-indent: 20px;">
  77.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum purus eget velit porttitor, nec semper urna blandit. Nulla non mauris eu nisl viverra lobortis in at turpis. Maecenas semper maximus arcu quis fermentum. Suspendisse aliquet ante non sodales sagittis. Duis nec feugiat mi. Ut malesuada egestas facilisis. Quisque ut nunc a libero porta dapibus in at nisl. Donec pulvinar laoreet dignissim. </p>
  78.                         <p>Nunc placerat leo vitae leo sodales dignissim ut et mauris. Cras a nisl risus.</p>
  79.                     </div>
  80.                 </div> </div>
  81.                 <!-- ++++++ PERSONALITY -->
  82.                 <div class="tab-pane" id="H"> <div class="row no-gutters">
  83.                     <!-- PARAPGRAPH -->
  84.                     <div class="p-1 col-12" style="text-indent: 20px;">
  85.                         <!-- HEADER -->
  86.                         <div style="color: #6275B7;">
  87.                             <h1 class="m-0 mt-2 text-monospace" style="text-indent: 5px;"> <i class="fas fa-user fa-fw"></i> Personality</h1>
  88.                             <div style="border-bottom: 4px double; border-left: 4px double;
  89.                            height: 30px; width: 100%;margin: -25px 0px 0px -7px; transform:skewX(30deg);"></div>
  90.                         </div>
  91.                            
  92.                         <p>Praesent lacus arcu, rutrum ac nibh eget, malesuada tincidunt turpis. Sed in augue purus. In id orci libero. Vestibulum mattis pellentesque sem, a euismod lacus vestibulum et. Suspendisse potenti. Ut aliquam hendrerit sollicitudin. Donec pharetra varius ornare. Aenean dui odio, semper vitae odio sit amet, lacinia lobortis dui. Fusce ipsum ligula, condimentum non urna a, lacinia sagittis ex. Suspendisse potenti.</p>
  93.                         <p>Curabitur ullamcorper scelerisque lacus vel semper. Etiam felis tellus, suscipit at faucibus at, varius nec massa. Nullam est sem, condimentum id imperdiet vitae, maximus quis est. Etiam vitae nibh semper nisl iaculis placerat id et justo. Etiam tincidunt dignissim accumsan.</p>
  94.                         <!-- DIVIDER L -->
  95.                         <div style="color: #6275B7; opacity: 0.6;" class="row no-gutters">
  96.                             <div style="border-top: 1px solid; border-right: 1px solid; height: 15px; transform:skewX(30deg);" class="col-6"></div>
  97.                             <div style="border-bottom: 1px solid; height: 15px; transform:skewX(30deg);" class="col-6"></div>
  98.                         </div>
  99.                         <p>Morbi interdum interdum purus fringilla dignissim. Duis et nisl mi. Phasellus arcu felis, vulputate ac lacus sed, egestas fermentum diam. Nunc orci ante, ornare sed vestibulum quis, vulputate at velit. Morbi varius venenatis sem sed imperdiet. Donec finibus pharetra risus, porttitor tincidunt purus cursus id. Nulla malesuada ut magna non sagittis. </p>
  100.                     </div>
  101.                     <!-- DIVIDER R -->
  102.                     <div style="color: #6275B7; opacity: 0.6;" class="row no-gutters col-12">
  103.                         <div style="border-bottom: 1px solid; height: 15px; transform:skewX(-30deg);" class="col-6"></div>
  104.                         <div style="border-top: 1px solid; border-left: 1px solid; height: 15px; transform:skewX(-30deg);" class="col-6"></div>
  105.                     </div>
  106.                     <!-- LIKES -->
  107.                     <div class="p-1 pr-sm-1 col-sm-6">
  108.                         <!-- HEADER -->
  109.                         <div style="color: #6275B7;">
  110.                             <h3 class="m-0 mt-2 text-monospace" style="text-indent: 5px;"> <i class="fal fa-seedling"></i> Likes</h3>
  111.                             <div style="border-bottom: 4px double; border-right: 4px double;
  112.                            height: 30px; width: 100%; margin: -25px 0px 0px -7px; transform:skewX(-30deg);"></div>
  113.                         </div>
  114.                         <ul class="pl-1 list-unstyled">
  115.                             <li><i class="fas fa-horizontal-rule" style="color: #6275B7;"></i> Information</li>
  116.                             <li><i class="fas fa-horizontal-rule" style="color: #6275B7;"></i> Information</li>
  117.                             <li><i class="fas fa-horizontal-rule" style="color: #6275B7;"></i> Information</li>
  118.                             <li><i class="fas fa-horizontal-rule" style="color: #6275B7;"></i> Information</li>
  119.                         </ul>
  120.                     </div>
  121.                     <!-- DISLIKES -->
  122.                     <div class="p-1 pl-sm-1 col-sm-6">
  123.                         <!-- HEADER -->
  124.                         <div style="color: #6275B7;">
  125.                             <h3 class="m-0 mt-2 text-monospace" style="text-indent: 5px;"> <i class="fal fa-seedling"></i> Dislikes</h3>
  126.                             <div style="border-bottom: 4px double; border-right: 4px double;
  127.                            height: 30px; width: 100%; margin: -25px 0px 0px -7px; transform:skewX(-30deg);"></div>
  128.                         </div>
  129.                         <ul class="pl-1 list-unstyled">
  130.                             <li><i class="fas fa-horizontal-rule" style="color: #6275B7;"></i> Information</li>
  131.                             <li><i class="fas fa-horizontal-rule" style="color: #6275B7;"></i> Information</li>
  132.                             <li><i class="fas fa-horizontal-rule" style="color: #6275B7;"></i> Information</li>
  133.                             <li><i class="fas fa-horizontal-rule" style="color: #6275B7;"></i> Information</li>
  134.                         </ul>
  135.                     </div>
  136.                 </div> </div>
  137.                 <!-- ++++++ STORY -->
  138.                 <div class="tab-pane" id="I">
  139.                     <!-- HEADER -->
  140.                     <div class="p-1" style="color: #6275B7;">
  141.                         <h1 class="m-0 mt-2 text-monospace" style="text-indent: 5px;"> <i class="fas fa-save fa-fw"></i> Story</h1>
  142.                         <div style="border-bottom: 4px double; border-left: 4px double;
  143.                        height: 30px; width: 100%;margin: -25px 0px 0px -7px; transform:skewX(30deg);"></div>
  144.                     </div>
  145.                     <!-- FLOATING IMAGE - you can move this, just keep it *between* sections. -->
  146.                     <div class="p-2 float-sm-right justify-content-center">
  147.                         <img src="//via.placeholder.com/200x300"
  148.                            style="max-height: 350px;">
  149.                     </div>
  150.                     <!-- SECTION -->
  151.                     <div class="p-1" style="text-indent: 20px;">
  152.                         <!-- HEADER -->
  153.                         <div style="color: #6275B7;">
  154.                             <h3 class="m-0 mt-2 text-monospace" style="text-indent: 5px;"> <i class="fal fa-seedling"></i> Header</h3>
  155.                             <div style="border-bottom: 4px double; border-right: 4px double;
  156.                            height: 30px; width: 50%;margin: -25px 0px 0px -7px; transform:skewX(-30deg);"></div>
  157.                         </div>
  158.                         <p>Sed commodo felis ut nisi lobortis, non tristique ante consectetur. Suspendisse malesuada vel neque et aliquet. Maecenas scelerisque, felis sed egestas eleifend, odio mauris consequat nibh, ut maximus urna nulla non ipsum. Phasellus ante velit, hendrerit sed sapien nec, venenatis faucibus quam. Vivamus eleifend posuere sapien, non maximus enim eleifend sed. Phasellus at lorem eu augue gravida ultrices in id erat. Vestibulum hendrerit orci ut eros scelerisque tincidunt. Praesent facilisis a odio at tempor.</p>
  159.                     </div>
  160.                     <hr class="m-0" style="opacity: 0;">
  161.                     <!-- DIVIDER L -->
  162.                     <div style="color: #6275B7; opacity: 0.6;" class="row no-gutters">
  163.                         <div style="border-top: 1px solid; border-right: 1px solid; height: 15px; transform:skewX(30deg);" class="col-6"></div>
  164.                         <div style="border-bottom: 1px solid; height: 15px; transform:skewX(30deg);" class="col-6"></div>
  165.                     </div>
  166.                     <!-- SECTION -->
  167.                     <div class="p-1" style="text-indent: 20px;">
  168.                         <!-- HEADER -->
  169.                         <div style="color: #6275B7;">
  170.                             <h3 class="m-0 mt-2 text-monospace" style="text-indent: 5px;"> <i class="fal fa-seedling"></i> Header</h3>
  171.                             <div style="border-bottom: 4px double; border-right: 4px double;
  172.                            height: 30px; width: 50%;margin: -25px 0px 0px -7px; transform:skewX(-30deg);"></div>
  173.                         </div>
  174.                         <p>Aenean semper ornare erat, et eleifend risus ornare elementum. Etiam condimentum in urna a egestas. Vestibulum dignissim odio nisl, varius maximus nisi cursus sed. Proin mi lorem, tempus in cursus et, iaculis ut magna. Proin volutpat consequat tortor quis placerat. Maecenas mattis varius nisi, quis pretium massa posuere vel. Proin facilisis erat eu erat molestie laoreet. Curabitur vulputate quam quis turpis viverra, eget bibendum elit volutpat.</p>
  175.                         <p>Cras dapibus purus libero, eu egestas tellus eleifend sit amet. Mauris ac congue dui, eu feugiat mauris. Praesent convallis pharetra ex in iaculis. Aliquam erat volutpat. Praesent mollis accumsan elit vitae ultricies. </p>
  176.                     </div>
  177.                     <!-- DIVIDER R -->
  178.                     <div style="color: #6275B7; opacity: 0.6;" class="row no-gutters">
  179.                         <div style="border-bottom: 1px solid; height: 15px; transform:skewX(-30deg);" class="col-6"></div>
  180.                         <div style="border-top: 1px solid; border-left: 1px solid; height: 15px; transform:skewX(-30deg);" class="col-6"></div>
  181.                     </div>
  182.                     <!-- add more above here -->
  183.                 </div>
  184.                 <!-- ++++++ DESIGN -->
  185.                 <div class="tab-pane" id="J">
  186.                     <!-- HEADER -->
  187.                     <div class="p-1" style="color: #6275B7;">
  188.                         <h1 class="m-0 mt-2 text-monospace" style="text-indent: 5px;"> <i class="fas fa-pencil-alt fa-fw"></i> Design</h1>
  189.                         <div style="border-bottom: 4px double; border-left: 4px double;
  190.                        height: 30px; width: 100%;margin: -25px 0px 0px -7px; transform:skewX(30deg);"></div>
  191.                     </div>
  192.                     <!-- COLORS -->
  193.                     <div class="p-1 text-center">
  194.                         <span style="color: #121212;"><i class="fas fa-seedling fa-2x"></i></span>
  195.                         <span style="color: #232323;"><i class="fas fa-seedling fa-2x"></i></span>
  196.                         <span style="color: #343434;"><i class="fas fa-seedling fa-2x"></i></span>
  197.                        
  198.                         <span style="color: #454545;"><i class="fas fa-seedling fa-2x"></i></span>
  199.                         <span style="color: #565656;"><i class="fas fa-seedling fa-2x"></i></span>
  200.                         <span style="color: #676767;"><i class="fas fa-seedling fa-2x"></i></span>
  201.                         <span style="color: #787878;"><i class="fas fa-seedling fa-2x"></i></span>
  202.                     </div>
  203.                     <!-- DIVIDER L -->
  204.                     <div style="color: #6275B7; opacity: 0.6;" class="row no-gutters">
  205.                         <div style="border-top: 1px solid; border-right: 1px solid; height: 15px; transform:skewX(30deg);" class="col-6"></div>
  206.                         <div style="border-bottom: 1px solid; height: 15px; transform:skewX(30deg);" class="col-6"></div>
  207.                     </div>
  208.                     <!-- FLOATING IMAGE -->
  209.                     <div class="p-2 float-sm-right justify-content-center">
  210.                         <img src="//via.placeholder.com/200x300"
  211.                            style="max-height: 350px;">
  212.                     </div>
  213.                     <!-- APPEARANCE -->
  214.                     <div class="p-1" style="text-indent: 20px;">
  215.                         <!-- HEADER -->
  216.                         <div style="color: #6275B7;">
  217.                             <h3 class="m-0 mt-2 text-monospace" style="text-indent: 5px;"> <i class="fal fa-seedling"></i> Appearance</h3>
  218.                             <div style="border-bottom: 4px double; border-right: 4px double;
  219.                            height: 30px; width: 50%;margin: -25px 0px 0px -7px; transform:skewX(-30deg);"></div>
  220.                         </div>
  221.                         <p>Donec sed dignissim lacus, id scelerisque urna. Maecenas elementum risus massa, nec vulputate quam gravida nec. Praesent sed pellentesque sapien, non fermentum nunc. Sed quis augue eget tellus sodales euismod. Aenean rutrum lobortis semper. Sed pharetra est eget purus lobortis interdum. Ut vel urna a lacus placerat blandit vel vitae eros. Donec sagittis et tortor in tristique.</p>
  222.                     </div>
  223.                     <hr class="m-0" style="opacity: 0;">
  224.                     <!-- DIVIDER R -->
  225.                     <div style="color: #6275B7; opacity: 0.6;" class="row no-gutters">
  226.                         <div style="border-bottom: 1px solid; height: 15px; transform:skewX(-30deg);" class="col-6"></div>
  227.                         <div style="border-top: 1px solid; border-left: 1px solid; height: 15px; transform:skewX(-30deg);" class="col-6"></div>
  228.                     </div>
  229.                     <!-- CLOTHES -->
  230.                     <div class="p-1" style="text-indent: 20px;">
  231.                         <!-- HEADER -->
  232.                         <div style="color: #6275B7;">
  233.                             <h3 class="m-0 mt-2 text-monospace" style="text-indent: 5px;"> <i class="fal fa-seedling"></i> Clothes</h3>
  234.                             <div style="border-bottom: 4px double; border-right: 4px double;
  235.                            height: 30px; width: 50%;margin: -25px 0px 0px -7px; transform:skewX(-30deg);"></div>
  236.                         </div>
  237.                         <p>In efficitur vitae turpis a vestibulum. Suspendisse quis posuere augue. Vivamus hendrerit mollis dui non pulvinar. Aliquam volutpat molestie justo nec aliquet. Maecenas a neque urna. In ac commodo leo, in maximus quam. Pellentesque nec felis nec massa dapibus suscipit ut id nisi. Mauris mattis et enim eget maximus.</p>
  238.                     </div>
  239.                 </div>
  240.                 <!-- ++++++ TRIVIA -->
  241.                 <div class="tab-pane" id="K">
  242.                     <!-- HEADER -->
  243.                     <div class="p-1" style="color: #6275B7;">
  244.                         <h1 class="m-0 mt-2 text-monospace" style="text-indent: 5px;"> <i class="fas fa-list fa-fw"></i> Trivia</h1>
  245.                         <div style="border-bottom: 4px double; border-left: 4px double;
  246.                        height: 30px; width: 100%;margin: -25px 0px 0px -7px; transform:skewX(30deg);"></div>
  247.                     </div>
  248.                     <!-- NOTES -->
  249.                     <div class="p-1">
  250.                         <!-- HEADER -->
  251.                         <div style="color: #6275B7;">
  252.                             <h3 class="m-0 mt-2 text-monospace" style="text-indent: 5px;"> <i class="fal fa-seedling"></i> Notes</h3>
  253.                             <div style="border-bottom: 4px double; border-right: 4px double;
  254.                            height: 30px; width: 50%;margin: -25px 0px 0px -7px; transform:skewX(-30deg);"></div>
  255.                         </div>
  256.                         <ul class="m-0 pl-4 fa-ul">
  257.                             <li><i class="fa-li fas fa-horizontal-rule" style="color: #6275B7;"></i>
  258.                                 Mauris vestibulum lobortis justo, vitae hendrerit lorem lacinia eu.</li>
  259.                             <li><i class="fa-li fas fa-horizontal-rule" style="color: #6275B7;"></i>
  260.                                 Donec rhoncus gravida lectus et gravida.</li>
  261.                             <li><i class="fa-li fas fa-horizontal-rule" style="color: #6275B7;"></i>
  262.                                 Morbi urna justo, rhoncus et quam vitae, imperdiet commodo tellus.</li>
  263.                             <li><i class="fa-li fas fa-horizontal-rule" style="color: #6275B7;"></i>
  264.                                 Vivamus non blandit metus, quis efficitur dolor.</li>
  265.                         </ul>
  266.                     </div>
  267.                     <!-- DIVIDER L -->
  268.                     <div style="color: #6275B7; opacity: 0.6;" class="row no-gutters">
  269.                         <div style="border-top: 1px solid; border-right: 1px solid; height: 15px; transform:skewX(30deg);" class="col-6"></div>
  270.                         <div style="border-bottom: 1px solid; height: 15px; transform:skewX(30deg);" class="col-6"></div>
  271.                     </div>
  272.                     <!-- SKILLS -->
  273.                     <div class="p-1">
  274.                         <!-- HEADER -->
  275.                         <div style="color: #6275B7;">
  276.                             <h3 class="m-0 mt-2 text-monospace" style="text-indent: 5px;"> <i class="fal fa-seedling"></i> Skills</h3>
  277.                             <div style="border-bottom: 4px double; border-right: 4px double;
  278.                            height: 30px; width: 50%;margin: -25px 0px 0px -7px; transform:skewX(-30deg);"></div>
  279.                         </div>
  280.                         <ul class="m-0 pl-4 fa-ul">
  281.                             <li><span style="color: #6275B7;"><i class="fa-li fas fa-horizontal-rule"></i>
  282.                                 Skill:</span> Maecenas pulvinar ligula sit amet mauris dignissim ultrices.</li>
  283.                             <li><span style="color: #6275B7;"><i class="fa-li fas fa-horizontal-rule"></i>
  284.                                 Skill:</span> Proin ut leo eget quam placerat laoreet in sit amet velit.</li>
  285.                             <li><span style="color: #6275B7;"><i class="fa-li fas fa-horizontal-rule"></i>
  286.                                 Skill:</span> Nulla posuere pellentesque augue sed tincidunt.</li>
  287.                         </ul>
  288.                     </div>
  289.                     <!-- DIVIDER R -->
  290.                     <div style="color: #6275B7; opacity: 0.6;" class="row no-gutters">
  291.                         <div style="border-bottom: 1px solid; height: 15px; transform:skewX(-30deg);" class="col-6"></div>
  292.                         <div style="border-top: 1px solid; border-left: 1px solid; height: 15px; transform:skewX(-30deg);" class="col-6"></div>
  293.                     </div>
  294.                     <!-- IMAGE -->
  295.                     <div class="p-1 text-center">
  296.                         <img src="//via.placeholder.com/500"
  297.                            style="width: 90%; max-width: 350px;">
  298.                         <p style="color: #6275B7;">Description of image. This can be the character using one of their skills, or something related to the trivia.</p>
  299.                     </div>
  300.                 </div>
  301.                 <!-- ++++++ LINKS -->
  302.                 <div class="tab-pane" id="L">
  303.                     <!-- HEADER -->
  304.                     <div class="p-1" style="color: #6275B7;">
  305.                         <h1 class="m-0 mt-2 text-monospace" style="text-indent: 5px;"> <i class="fas fa-chart-network fa-fw"></i> Relationships</h1>
  306.                         <div style="border-bottom: 4px double; border-left: 4px double;
  307.                        height: 30px; width: 100%; margin: -25px 0px 0px -7px; transform:skewX(30deg);"></div>
  308.                     </div>
  309.                    
  310.                     <!-- RELATIONSHIP ICON REFERENCE
  311.                        fas fa-check >> positive
  312.                        fas fa-times >> negative
  313.                        fas fa-heart >> love
  314.                    -->
  315.                    
  316.                     <!-- PERSON -->
  317.                     <div class="p-1 row no-gutters">
  318.                         <!-- IMAGE -->
  319.                         <div class="p-1 col-sm-auto justify-content-center">
  320.                             <a href="LINK" class="p-0 btn btn-outline-primary rounded-0" style="border: 4px double; height: 100px; width: 100px;">
  321.                                 <img src="//via.placeholder.com/200"> </a>
  322.                         </div>
  323.                         <div class="p-1 col-sm">
  324.                             <!-- HEADER -->
  325.                             <div style="color: #6275B7;">
  326.                                 <h3 class="m-0 mt-2 text-monospace" style="text-indent: 45px;"> Name <small class="faded">relationship</small></h3>
  327.                                 <div style="border-bottom: 3px double; border-right: 3px double; height: 30px; margin: -25px 0px 0px 30px; transform:skewX(-30deg);"></div>
  328.                                 <div style="border: 3px double; height: 40px; width: 40px; margin-top: -30px; z-index: 9;" class="card rounded-circle bg-faded">
  329.                                     <!-- RELATIONSHIP ICON --> <i class="fas fa-check fa-lg m-auto"></i> </div>
  330.                             </div>
  331.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  332.                         </div>
  333.                     </div> <!-- END PERSON -->
  334.                     <!-- DIVIDER L -->
  335.                     <div style="color: #6275B7; opacity: 0.6;" class="row no-gutters">
  336.                         <div style="border-top: 1px solid; border-right: 1px solid; height: 15px; transform:skewX(30deg);" class="col-6"></div>
  337.                         <div style="border-bottom: 1px solid; height: 15px; transform:skewX(30deg);" class="col-6"></div>
  338.                     </div>
  339.                    
  340.                     <!-- PERSON -->
  341.                     <div class="p-1 row no-gutters">
  342.                         <!-- IMAGE -->
  343.                         <div class="p-1 col-sm-auto justify-content-center order-sm-2">
  344.                             <a href="LINK" class="p-0 btn btn-outline-primary rounded-0" style="border: 4px double; height: 100px; width: 100px;">
  345.                                 <img src="//via.placeholder.com/200"> </a>
  346.                         </div>
  347.                         <div class="p-1 col-sm">
  348.                             <!-- HEADER -->
  349.                             <div style="color: #6275B7;">
  350.                                 <h3 class="m-0 mt-2 text-monospace text-right" style="padding-right: 45px;"> <small class="faded">relationship</small> Name</h3>
  351.                                 <div style="border-bottom: 3px double; border-left: 3px double; height: 30px; margin: -25px 30px 0px 0px; transform:skewX(30deg);" class="ml-auto"></div>
  352.                                 <div style="border: 3px double; height: 40px; width: 40px; margin-top: -30px; z-index: 9;" class="card rounded-circle bg-faded ml-auto">
  353.                                     <!-- RELATIONSHIP ICON --> <i class="fas fa-check fa-lg m-auto"></i> </div>
  354.                             </div>
  355.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  356.                         </div>
  357.                     </div> <!-- END PERSON -->
  358.                     <!-- DIVIDER R -->
  359.                     <div style="color: #6275B7; opacity: 0.6;" class="row no-gutters">
  360.                         <div style="border-bottom: 1px solid; height: 15px; transform:skewX(-30deg);" class="col-6"></div>
  361.                         <div style="border-top: 1px solid; border-left: 1px solid; height: 15px; transform:skewX(-30deg);" class="col-6"></div>
  362.                     </div>
  363.                    
  364.                     <!-- PERSON -->
  365.                     <div class="p-1 row no-gutters">
  366.                         <!-- IMAGE -->
  367.                         <div class="p-1 col-sm-auto justify-content-center">
  368.                             <a href="LINK" class="p-0 btn btn-outline-primary rounded-0" style="border: 4px double; height: 100px; width: 100px;">
  369.                                 <img src="//via.placeholder.com/200"> </a>
  370.                         </div>
  371.                         <div class="p-1 col-sm">
  372.                             <!-- HEADER -->
  373.                             <div style="color: #6275B7;">
  374.                                 <h3 class="m-0 mt-2 text-monospace" style="text-indent: 45px;"> Name <small class="faded">relationship</small></h3>
  375.                                 <div style="border-bottom: 3px double; border-right: 3px double; height: 30px; margin: -25px 0px 0px 30px; transform:skewX(-30deg);"></div>
  376.                                 <div style="border: 3px double; height: 40px; width: 40px; margin-top: -30px; z-index: 9;" class="card rounded-circle bg-faded">
  377.                                     <!-- RELATIONSHIP ICON --> <i class="fas fa-check fa-lg m-auto"></i> </div>
  378.                             </div>
  379.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  380.                         </div>
  381.                     </div> <!-- END PERSON -->
  382.                     <!-- DIVIDER L -->
  383.                     <div style="color: #6275B7; opacity: 0.6;" class="row no-gutters">
  384.                         <div style="border-top: 1px solid; border-right: 1px solid; height: 15px; transform:skewX(30deg);" class="col-6"></div>
  385.                         <div style="border-bottom: 1px solid; height: 15px; transform:skewX(30deg);" class="col-6"></div>
  386.                     </div>
  387.                    
  388.                     <!-- PERSON -->
  389.                     <div class="p-1 row no-gutters">
  390.                         <!-- IMAGE -->
  391.                         <div class="p-1 col-sm-auto justify-content-center order-sm-2">
  392.                             <a href="LINK" class="p-0 btn btn-outline-primary rounded-0" style="border: 4px double; height: 100px; width: 100px;">
  393.                                 <img src="//via.placeholder.com/200"> </a>
  394.                         </div>
  395.                         <div class="p-1 col-sm">
  396.                             <!-- HEADER -->
  397.                             <div style="color: #6275B7;">
  398.                                 <h3 class="m-0 mt-2 text-monospace text-right" style="padding-right: 45px;"> <small class="faded">relationship</small> Name</h3>
  399.                                 <div style="border-bottom: 3px double; border-left: 3px double; height: 30px; margin: -25px 30px 0px 0px; transform:skewX(30deg);" class="ml-auto"></div>
  400.                                 <div style="border: 3px double; height: 40px; width: 40px; margin-top: -30px; z-index: 9;" class="card rounded-circle bg-faded ml-auto">
  401.                                     <!-- RELATIONSHIP ICON --> <i class="fas fa-check fa-lg m-auto"></i> </div>
  402.                             </div>
  403.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  404.                         </div>
  405.                     </div> <!-- END PERSON -->
  406.                     <!-- DIVIDER R -->
  407.                     <div style="color: #6275B7; opacity: 0.6;" class="row no-gutters">
  408.                         <div style="border-bottom: 1px solid; height: 15px; transform:skewX(-30deg);" class="col-6"></div>
  409.                         <div style="border-top: 1px solid; border-left: 1px solid; height: 15px; transform:skewX(-30deg);" class="col-6"></div>
  410.                     </div>
  411.                    
  412.                     <!-- add more above here - copy the last two people over for best effect -->
  413.                 </div>
  414.             </div>
  415.             <!-- end nav content -->
  416.         </div>
  417.     </div>
  418.     <!-- ++++++++++++++++++++ BOTTOM LINE -->
  419.     <div style="color: #6275B7;" class="text-right">
  420.         <div style="border-width: 0px 4px 4px 0px; border-style: double; height: 20px; width: 50%; margin: 0px 0px 0px 45%; transform:skewX(-30deg);"></div>
  421.         <div style="border-width: 0px 0px 4px 4px; border-style: double; height: 30px; width: 52%; margin: -20px 0px 0px 3%; transform:skewX(30deg);"></div>
  422.         <div style="border: 4px double; height: 50px; width: 50px; margin-top: -25px; z-index: 9;" class="card rounded-circle mx-auto">
  423.             <!-- ++++++ THEME -->
  424.             <a href="SONGLINK" target="_blank" class="m-auto" style="color: #6275B7;">
  425.                 <!-- ++++++ FA ICON -->
  426.                 <i class="fas fa-seedling" style="font-size: 22px;"></i>  </a>
  427.         </div>
  428.     </div>
  429.     <!-- CREDIT, DON'T REMOVE -->
  430.     <a class="p-2 card rounded-0 btn btn-secondary" style="color: #6275B7; border: 4px double; width: 42px; margin-top: -50px; margin-bottom: 20px;"
  431.        data-toggle="tooltip" data-placement="right" target="_blank"
  432.        href="/SparklyCodes" title="Code by SparklyCodes">
  433.         <i class="fas fa-code fa-fw"></i>
  434.     </a>
  435. </div>
  436.  
  437. <!-- ............................ BOTTOM IMAGE - visible on mobile only! -->
  438. <div class="p-2 hidden-lg-up text-center">
  439.     <!-- CIRCLE -->
  440.     <div style="height: 250px; width: 250px; border: 4px double #6275B7; margin-bottom: -250px;" class="card rounded-circle mx-auto"></div>
  441.     <!-- IMAGE LINK HERE - use a vertical image of any size! -->
  442.     <img src="//via.placeholder.com/200x400"
  443.        class="m-1" style="max-width: 450px; max-height: 450px;">
  444. </div>
  445.  
  446. <!-- ............................ SIDE IMAGE - visible on PC only! -->
  447. <div class="hidden-md-down" style="height: 450px; margin-top: -500px; margin-bottom: 50px;"> <div style="margin-left: 67%;" class="text-center col-auto">
  448.     <!-- CIRCLE -->
  449.     <div style="height: 250px; width: 250px; border: 4px double #6275B7; margin-bottom: -250px;" class="card rounded-circle mx-auto"></div>
  450.     <!-- IMAGE LINK HERE - use a vertical image of any size! -->
  451.     <img src="//via.placeholder.com/200x400"
  452.        class="m-1" style="max-width: 450px; max-height: 450px;">
  453. </div> </div>
  454. <!-- ............................ -->
  455. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!