API tools faq
paste
Advertisement
SparklyLightus

Target

SparklyLightus
Jul 29th, 2021 (edited)
2,006
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 26.13 KB | None | 0 0
raw download clone embed print report
  1. <!-- FA ICON USED: fa-star //  THEME ID: dQw4w9WgXcQ -->
  2. <div class="container my-3 p-lg-5 py-5" style="max-width: 1150px; overflow-x: hidden;"> <div class="row no-gutters">
  3.     <!-- SIDEBAR -->
  4.     <div class="col-lg-4 flex-column align-items-center pr-lg-3">
  5.         <!-- PROFILE PIC -->
  6.         <div class="card mb-5 rounded-circle" style="border-width: 4px;">
  7.             <!-- ROTATING ICON -->
  8.             <div class="fal fa-crosshairs fa-spin text-primary" style="position: absolute; top: -45px; left: -45px; font-size: 390px; opacity: .5; animation-duration: 20s; animation-direction: reverse;"></div>
  9.             <!-- PICTURE -->
  10.             <div class="bg-faded rounded-circle" style="background-image: url(IMGLINK);
  11.             background-size: cover; background-position: center; height: 300px; width: 300px;"></div>
  12.         </div>
  13.         <!-- CARDS -->
  14.         <div style="width: 300px; min-width: 100%;">
  15.             <!-- BASICS -->
  16.             <div class="card mb-3 bg-faded border-0" style="border-radius: 10px; overflow: hidden;">
  17.                 <div class="mt-2 p-2 text-white bg-primary" style="letter-spacing: -1px;">
  18.                     <h3 class="mb-0"> <i class="fal fa-crosshairs fa-lg" style="transform: rotate(45deg);"></i> IDENTIFYING INFORMATION </h3>
  19.                 </div>
  20.                 <!-- FIRST BASICS -->
  21.                 <div class="ml-2 px-3 py-1 row no-gutters">
  22.                     <p class="mb-1 col-lg-12 col-sm-6"> <span class="ml-n2 text-secondary" style="font-size: 110%; letter-spacing: 1px;">I. Name</span> <br>
  23.                         Information</p>
  24.                     <p class="mb-1 col-lg-12 col-sm-6"> <span class="ml-n2 text-secondary" style="font-size: 110%; letter-spacing: 1px;">II. Age</span> <br>
  25.                         Information</p>
  26.                     <p class="mb-1 col-lg-12 col-sm-6"> <span class="ml-n2 text-secondary" style="font-size: 110%; letter-spacing: 1px;">III. Birthday</span> <br>
  27.                         Information</p>
  28.                     <p class="mb-1 col-lg-12 col-sm-6"> <span class="ml-n2 text-secondary" style="font-size: 110%; letter-spacing: 1px;">IV. Gender</span> <br>
  29.                         Information</p>
  30.                     <p class="mb-1 col-lg-12 col-sm-6"> <span class="ml-n2 text-secondary" style="font-size: 110%; letter-spacing: 1px;">V. Orientation</span> <br>
  31.                         Information</p>
  32.                 </div>
  33.                
  34.                 <!-- COLLAPSE LINK -->
  35.                 <div class="p-2 text-center bg-primary" style="letter-spacing: -1px;">
  36.                     <a class="py-1 text-white" data-toggle="collapse" href="#design" role="button" aria-expanded="false" aria-controls="design">
  37.                         <i class="fal fa-chevron-down fa-lg"></i> </a>
  38.                 </div>
  39.                 <!-- COLLAPSE -->
  40.                 <div class="collapse" id="design">
  41.                     <div class="mt-2 p-2 text-white bg-primary" style="letter-spacing: -1px;">
  42.                         <h3 class="mb-0"> <i class="fal fa-crosshairs fa-lg" style="transform: rotate(45deg);"></i> DESIGN INFORMATION </h3>
  43.                     </div>
  44.                     <!-- DESIGN -->
  45.                     <div class="ml-2 px-3 py-1 row no-gutters">
  46.                         <p class="mb-1 col-lg-12 col-sm-6"> <span class="ml-n2 text-secondary" style="font-size: 110%; letter-spacing: 1px;">I. Height</span> <br>
  47.                             Information</p>
  48.                         <p class="mb-1 col-lg-12 col-sm-6"> <span class="ml-n2 text-secondary" style="font-size: 110%; letter-spacing: 1px;">II. Build</span> <br>
  49.                             Information</p>
  50.                         <p class="mb-1 col-lg-12 col-sm-6"> <span class="ml-n2 text-secondary" style="font-size: 110%; letter-spacing: 1px;">III. Species</span> <br>
  51.                             Information</p>
  52.                         <hr class="ml-n2 my-1 col-12 bg-secondary">
  53.                         <p class="mb-1 col-lg-12 col-sm-6"> <span class="ml-n2 text-secondary" style="font-size: 110%; letter-spacing: 1px;">IV. Designer</span> <br>
  54.                             @/user</p>
  55.                         <p class="mb-1 col-lg-12 col-sm-6"> <span class="ml-n2 text-secondary" style="font-size: 110%; letter-spacing: 1px;">V. Worth</span> <br>
  56.                             $999</p>
  57.                     </div>
  58.                 </div>
  59.             </div>
  60.             <!-- PALETTE -->
  61.             <div class="card mb-3 bg-faded border-0" style="border-radius: 10px; overflow: hidden;"> <div class="row no-gutters">
  62.                 <div class="col" style="background: #111; height: 40px;"></div>
  63.                 <div class="col" style="background: #222; height: 40px;"></div>
  64.                 <div class="col" style="background: #333; height: 40px;"></div>
  65.                 <div class="col" style="background: #444; height: 40px;"></div>
  66.                 <div class="col" style="background: #555; height: 40px;"></div>
  67.                 <div class="col" style="background: #666; height: 40px;"></div>
  68.             </div> </div>
  69.             <!-- DESIGN NOTES -->
  70.             <div class="card mb-3 bg-faded border-0" style="border-radius: 10px; overflow: hidden;">
  71.                 <div class="p-2 mt-2 text-white bg-primary" style="letter-spacing: -1px;">
  72.                     <h3 class="mb-0"> <i class="fal fa-crosshairs fa-lg" style="transform: rotate(45deg);"></i> NOTES </h3>
  73.                 </div>
  74.                
  75.                 <ul class="my-3 mx-1 pl-4">
  76.                     <li> Design notes here.</li>
  77.                     <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
  78.                     <li> Integer pulvinar tincidunt lacus et tincidunt. </li>
  79.                 </ul>
  80.             </div>
  81.             <!-- CREDITS, DON'T REMOVE -->
  82.             <p class="text-center mx-auto bg-primary" style="font-size: 18px; border-radius: 10px; width: 100px;">
  83.                 <a class="text-white" data-toggle="tooltip" data-placement="left" title="Sketch - 8byte" href="https://toyhou.se/8byte">
  84.                     <i class="fal fa-crow"></i> </a>
  85.                 <a class="text-white" data-toggle="tooltip" data-placement="bottom" title="Base Code - Togo" href="https://toyhou.se/Togo">
  86.                     <i class="fal fa-coffee-togo"></i> </a>
  87.                 <a class="text-white" data-toggle="tooltip" data-placement="right" title="Styling - SparklyCodes" href="https://toyhou.se/SparklyCodes">
  88.                     <i class="fal fa-sparkles"></i> </a>
  89.             </p>
  90.         </div>
  91.     </div>
  92.     <!-- CONTENT -->
  93.     <div class="col-lg-8 flex-column pl-lg-5">
  94.         <!-- HEADER -->
  95.         <div class="card my-4 p-3 pb-lg-4 bg-faded border-0">
  96.             <i class="fal fa-star text-primary" style="position: absolute; top: -20px; right: -15px; font-size: 80px; opacity: .4; transform: rotate(15deg);"></i>
  97.             <!-- NAME / QUOTE -->
  98.             <div class="mb-3 flex-lg-row-reverse justify-content-center justify-content-lg-between"> <div class="text-right pr-lg-4" style="width: 75%;">
  99.                     <h1 class="mb-2 text-primary" style="letter-spacing: -1px;">
  100.                         NAME </h1>
  101.                     <p class="m-1 font-italic">
  102.                         "Quote. lorem ipsum dolor sit amet, consectetur adipiscing elit." </p>
  103.             </div> </div>
  104.             <!-- THEME SONG -->
  105.             <div class="flex-row" style="position: absolute; bottom: -20px; left: -10px; height: 70px;">
  106.                 <i class="fal fa-compact-disc fa-spin text-primary" style="font-size: 70px; animation-duration: 8s;"></i>
  107.                 <div style="position: absolute; top: 0; height: 100%; width: 70px; overflow: hidden; opacity: 0.0001;">
  108.                     <!-- CHANGE SONG LINK HERE - put in the video ID where 'dQw4w9WgXcQ' is -->
  109.                     <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?controls=0"
  110.                     frameborder="0" style="position: absolute; top: -65px; left: -115px;" width="300" height="200"></iframe>
  111.                 </div>
  112.                 <p class="m-3">song title / artist</p>
  113.             </div>
  114.         </div>
  115.         <!-- NAV BUTTONS -->
  116.         <div class="card align-self-lg-end mt-2 mt-lg-0 mb-3 mr-lg-n4 ml-lg-4 bg-faded border-0" style="overflow: hidden;"> <ul class="nav">
  117.             <li class="nav-item flex-grow-1">
  118.                 <a href="#personality" data-toggle="tab" class="nav-link active btn btn-outline-primary border-0 rounded-0" style="box-shadow: none;">
  119.                 PROFILE </a> </li>
  120.             <li class="nav-item flex-grow-1">
  121.                 <a href="#history" data-toggle="tab" class="nav-link btn btn-outline-primary border-0 rounded-0" style="box-shadow: none;">
  122.                 CASES </a> </li>
  123.             <li class="nav-item flex-grow-1">
  124.                 <a href="#moodboard" data-toggle="tab" class="nav-link btn btn-outline-primary border-0 rounded-0" style="box-shadow: none;">
  125.                 EVIDENCE </a> </li>
  126.             <li class="nav-item flex-grow-1">
  127.                 <a href="#trivia" data-toggle="tab" class="nav-link btn btn-outline-primary border-0 rounded-0" style="box-shadow: none;">
  128.                 NOTES </a> </li>
  129.         </ul> </div>
  130.         <!-- NAV CONTENT -->
  131.         <div id="tabs" class="tab-content">
  132.             <!-- ................... TAB 1 -->
  133.             <div id="personality" class="tab-pane fade show active"> <div class="row no-gutters">
  134.                 <!-- HEADER -->
  135.                 <div class="col-12 row no-gutters align-items-center mb-2">
  136.                     <h2 class="mb-0 px-2 col-auto"> PROFILE. </h2> <div class="px-2 col"> <hr class="m-0 bg-primary"> </div>
  137.                     <h2 class="mb-0 px-2 col-auto"> I </h2>
  138.                 </div>
  139.                 <!-- STATS -->
  140.                 <div class="col-lg-5 flex-column"> <div class="card flex-grow-1 mb-3 p-3 bg-faded border-0" style="border-radius: 10px;">
  141.                     <i class="fal fa-star text-primary" style="position: absolute; top: -20px; right: -7px; font-size: 80px; opacity: .4; transform: rotate(5deg);"></i>
  142.                    
  143.                     <div class="mx-n3 mt-n2 p-3 bg-secondary" style="margin-bottom: -27px; opacity: .5;"></div>
  144.                     <h3 class="mb-3 text-white" style="letter-spacing: -1px; z-index: 9;">
  145.                         <i class="fal fa-star fa-lg" style="transform: rotate(15deg); opacity: .4; margin-right: -15px;"></i> PERSONALITY </h3>
  146.                    
  147.                     <!-- CHANGE THE POSITION OF THE LINE BY CHANGING THE WIDTH - it's at the end of the long lines -->
  148.                    
  149.                     <p class="m-0 text-right"> <span class="pull-left text-secondary">Friendly</span> Reserved </p>
  150.                     <div class="progress bg-light"> <div class="progress-bar bg-light text-primary" style="border-right: 4px solid; width: 10%;"></div> </div>
  151.                    
  152.                     <p class="m-0 text-right"> <span class="pull-left text-secondary">Mature</span> Immature </p>
  153.                     <div class="progress bg-light"> <div class="progress-bar bg-light text-primary" style="border-right: 4px solid; width: 20%;"></div> </div>
  154.                    
  155.                     <p class="m-0 text-right"> <span class="pull-left text-secondary">Timid</span> Brave </p>
  156.                     <div class="progress bg-light"> <div class="progress-bar bg-light text-primary" style="border-right: 4px solid; width: 30%;"></div> </div>
  157.                    
  158.                     <p class="m-0 text-right"> <span class="pull-left text-secondary">Sensitive</span> Rough </p>
  159.                     <div class="progress bg-light"> <div class="progress-bar bg-light text-primary" style="border-right: 4px solid; width: 50%;"></div> </div>
  160.                    
  161.                     <p class="m-0 text-right"> <span class="pull-left text-secondary">Lazy</span> Diligent </p>
  162.                     <div class="progress bg-light"> <div class="progress-bar bg-light text-primary" style="border-right: 4px solid; width: 60%;"></div> </div>
  163.                    
  164.                     <p class="m-0 text-right"> <span class="pull-left text-secondary">Complying</span> Stubborn </p>
  165.                     <div class="progress bg-light"> <div class="progress-bar bg-light text-primary" style="border-right: 4px solid; width: 70%;"></div> </div>
  166.                 </div> </div>
  167.                 <!-- IMAGE -->
  168.                 <div class="col-lg flex-column mx-lg-3">
  169.                     <!-- IMAGE LINK - any size, focus on center -->
  170.                     <div style="min-height: 300px; background-image: url(IMGLINK);
  171.                     background-size: cover; background-position: center; border-radius: 10px;" class="card flex-grow-1 mb-3 bg-faded border-0"></div>
  172.                 </div>
  173.                 <!-- TASTES -->
  174.                 <div class="col-lg flex-column"> <div class="card flex-grow-1 mb-3 p-3 bg-faded border-0" style="border-radius: 10px;">
  175.                     <div class="mx-n3 mt-n2 p-3 bg-secondary" style="margin-bottom: -27px; opacity: .5;"></div>
  176.                     <h5 class="mb-3 text-white" style="letter-spacing: -1px; z-index: 9;">
  177.                         <i class="fal fa-star fa-lg" style="transform: rotate(15deg); opacity: .4; margin-right: -15px;"></i> LIKES </h5>
  178.                     <ul class="mb-0 pl-4">
  179.                         <li> content </li>
  180.                         <li> content </li>
  181.                         <li> content </li>
  182.                     </ul>
  183.                    
  184.                     <div class="mx-n3 mt-2 p-3 bg-secondary" style="margin-bottom: -27px; opacity: .5;"></div>
  185.                     <h5 class="mb-3 text-white" style="letter-spacing: -1px; z-index: 9;">
  186.                         <i class="fal fa-star fa-lg" style="transform: rotate(15deg); opacity: .4; margin-right: -15px;"></i> DISLIKES </h5>
  187.                     <ul class="mb-0 pl-4">
  188.                         <li> content </li>
  189.                         <li> content </li>
  190.                         <li> content </li>
  191.                     </ul>
  192.                 </div> </div>
  193.             </div> </div>
  194.             <!-- ................... TAB 2 -->
  195.             <div id="history" class="tab-pane fade"> <div class="row no-gutters">
  196.                 <!-- HEADER -->
  197.                 <div class="col-12 row no-gutters align-items-center mb-2">
  198.                     <h2 class="mb-0 px-2 col-auto"> PAST CASES. </h2> <div class="px-2 col"> <hr class="m-0 bg-primary"> </div>
  199.                     <h2 class="mb-0 px-2 col-auto"> II </h2>
  200.                 </div>
  201.                 <!-- CONTENT -->
  202.                 <div class="card mb-3 p-3 bg-faded border-0 col-12" style="border-radius: 10px; height: 300px; overflow-y: auto;">
  203.                     <!-- KEEP HEADER NAMES SHORT, IT MIGHT BREAK OTHERWISE -->
  204.                    
  205.                     <div class="mx-n3 mt-n2 p-3 bg-secondary" style="margin-bottom: -27px; opacity: .5;"></div>
  206.                     <h3 class="mb-3 text-white" style="letter-spacing: -1px; z-index: 9;">
  207.                         <i class="fal fa-star fa-lg" style="transform: rotate(15deg); opacity: .4; margin-right: -15px;"></i> HEADER </h3>
  208.                    
  209.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed nunc et nunc tristique fermentum. Vivamus tempus dolor ut nisl luctus vulputate. Aliquam ut tempor orci. Etiam a sem nec arcu eleifend iaculis. Fusce erat magna, vehicula vitae sem tempor, sodales consectetur ante. Nullam auctor, mi non finibus mollis, justo sapien porta lectus, eu sagittis urna massa ut arcu. Donec vitae augue at lacus laoreet auctor id sed mi. Duis ut justo sed ligula efficitur sagittis et ac libero. Proin ac dictum felis. Mauris nec nunc sodales, tincidunt est eu, venenatis nulla. Aliquam in mattis velit.</p>
  210.                    
  211.                     <div class="mx-n3 mt-n2 p-3 bg-secondary" style="margin-bottom: -27px; opacity: .5;"></div>
  212.                     <h3 class="mb-3 text-white" style="letter-spacing: -1px; z-index: 9;">
  213.                         <i class="fal fa-star fa-lg" style="transform: rotate(15deg); opacity: .4; margin-right: -15px;"></i> HEADER </h3>
  214.                    
  215.                     <p>In mattis enim id odio congue, quis finibus ipsum malesuada. Mauris id porttitor orci. Aliquam augue dui, convallis efficitur suscipit sit amet, vehicula at mi. Aenean tortor ligula, sagittis a facilisis eu, eleifend aliquam ipsum. Nam ornare sed sem ut interdum. Nunc vestibulum bibendum laoreet. In mattis vitae metus ut viverra. Vestibulum vitae dapibus massa. Sed tincidunt, ligula non hendrerit tempor, odio diam ultricies augue, nec faucibus urna tellus nec tellus. Etiam at sem scelerisque, congue ex ac, placerat sapien. Nullam non porta diam, vel ornare massa. Pellentesque sem lectus, auctor eget lacus id, sollicitudin tempor ex. Ut turpis nisl, finibus quis vehicula et, accumsan in mi. Proin commodo purus feugiat nisl feugiat mollis. Mauris vulputate congue nunc ut eleifend.</p>
  216.                    
  217.                     <div class="mx-n3 mt-n2 p-3 bg-secondary" style="margin-bottom: -27px; opacity: .5;"></div>
  218.                     <h3 class="mb-3 text-white" style="letter-spacing: -1px; z-index: 9;">
  219.                         <i class="fal fa-star fa-lg" style="transform: rotate(15deg); opacity: .4; margin-right: -15px;"></i> HEADER </h3>
  220.                    
  221.                     <p>Morbi consectetur vehicula quam non lobortis. Quisque et lacus justo. Nam condimentum libero ut posuere aliquam. Fusce neque felis, commodo sit amet dui a, ultrices venenatis est. Integer efficitur placerat scelerisque. Pellentesque varius eget odio nec vulputate. Praesent sed molestie lectus. Donec maximus urna risus, vitae consequat ex blandit sed. In fringilla feugiat magna quis dignissim. Proin facilisis eget arcu ac hendrerit. Cras accumsan odio purus.</p>
  222.                    
  223.                     <!-- add more above here -->
  224.                 </div>
  225.             </div> </div>
  226.             <!-- ................... TAB 3 -->
  227.             <div id="moodboard" class="tab-pane fade"> <div class="row no-gutters mx-n2">
  228.                 <!-- HEADER -->
  229.                 <div class="col-12 row no-gutters align-items-center mb-2 px-2">
  230.                     <h2 class="mb-0 px-2 col-auto"> RECORDED EVIDENCE. </h2> <div class="px-2 col"> <hr class="m-0 bg-primary"> </div>
  231.                     <h2 class="mb-0 px-2 col-auto"> III </h2>
  232.                 </div>
  233.                 <!-- IMAGES -->
  234.                 <div class="p-1 px-2 col-4">
  235.                     <div style="background-image: url(IMGLINK);
  236.                     background-size: cover; background-position: center; padding-bottom: 100%; border-radius: 10px;" class="card mb-3 bg-faded border-0"></div> </div>
  237.                 <div class="p-1 px-2 col-4">
  238.                     <div style=" background-image: url(IMGLINK);
  239.                     background-size: cover; background-position: center; padding-bottom: 100%; border-radius: 10px;" class="card mb-3 bg-faded border-0"></div> </div>
  240.                 <div class="p-1 px-2 col-4">
  241.                     <div style=" background-image: url(IMGLINK);
  242.                     background-size: cover; background-position: center; padding-bottom: 100%; border-radius: 10px;" class="card mb-3 bg-faded border-0"></div> </div>
  243.             </div> </div>
  244.             <!-- ................... TAB 4 -->
  245.             <div id="trivia" class="tab-pane fade"> <div class="row no-gutters">
  246.                 <!-- HEADER -->
  247.                 <div class="col-12 row no-gutters align-items-center mb-2">
  248.                     <h2 class="mb-0 px-2 col-auto"> DETECTIVE'S NOTES. </h2> <div class="px-2 col"> <hr class="m-0 bg-primary"> </div>
  249.                     <h2 class="mb-0 px-2 col-auto"> IV </h2>
  250.                 </div>
  251.                
  252.                 <!-- DETAILS BOX -->
  253.                 <div class="pr-lg-2 pb-3 pb-lg-0 col-lg-4"> <div class="card mb-lg-3 bg-faded border-0" style="border-radius: 10px; height: 300px; overflow-y: auto;">
  254.                     <div class="mt-2 p-3 bg-secondary" style="margin-bottom: -27px; opacity: .5;"></div>
  255.                     <h3 class="ml-3 mb-2 text-white" style="letter-spacing: -1px; z-index: 9;">
  256.                         <i class="fal fa-star fa-lg" style="transform: rotate(15deg); opacity: .4; margin-right: -15px;"></i> DETAILS </h3>
  257.                    
  258.                     <!-- FIRST BASICS -->
  259.                     <div class="ml-2 px-3 py-1 row no-gutters">
  260.                         <p class="mb-1 col-lg-12 col-sm-6"> <span class="ml-n2 text-secondary" style="font-size: 110%; letter-spacing: 1px;">I. Aliases</span> <br>
  261.                             Information</p>
  262.                         <p class="mb-1 col-lg-12 col-sm-6"> <span class="ml-n2 text-secondary" style="font-size: 110%; letter-spacing: 1px;">II. MBTI</span> <br>
  263.                             Information</p>
  264.                         <p class="mb-1 col-lg-12 col-sm-6"> <span class="ml-n2 text-secondary" style="font-size: 110%; letter-spacing: 1px;">III. Origin</span> <br>
  265.                             Information</p>
  266.                         <p class="mb-1 col-lg-12 col-sm-6"> <span class="ml-n2 text-secondary" style="font-size: 110%; letter-spacing: 1px;">IV. Occupation</span> <br>
  267.                             Information</p>
  268.                         <p class="mb-1 col-lg-12 col-sm-6"> <span class="ml-n2 text-secondary" style="font-size: 110%; letter-spacing: 1px;">V. Relationship</span> <br>
  269.                             Information</p>
  270.                     </div>
  271.                 </div> </div>
  272.                 <!-- TRIVIA BOX -->
  273.                 <div class="pl-lg-2 col-lg-8"> <div class="card mb-lg-3 p-3 bg-faded border-0" style="border-radius: 10px; height: 300px; overflow-y: auto;">
  274.                     <div class="mx-n3 mt-n2 p-3 bg-secondary" style="margin-bottom: -27px; opacity: .5;"></div>
  275.                     <h3 class="mb-3 text-white" style="letter-spacing: -1px; z-index: 9;">
  276.                         <i class="fal fa-star fa-lg" style="transform: rotate(15deg); opacity: .4; margin-right: -15px;"></i> TRIVIA </h3>
  277.                    
  278.                     <ul class="mb-0 pl-4">
  279.                         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed nunc et nunc tristique fermentum.</li>
  280.                         <li>Vivamus tempus dolor ut nisl luctus vulputate. Aliquam ut tempor orci. Etiam a sem nec arcu eleifend iaculis. Fusce erat magna, vehicula vitae sem tempor, sodales consectetur ante.</li>
  281.                         <li>Nullam auctor, mi non finibus mollis, justo sapien porta lectus, eu sagittis urna massa ut arcu. Donec vitae augue at lacus laoreet auctor id sed mi.</li>
  282.                         <li>Duis ut justo sed ligula efficitur sagittis et ac libero. Proin ac dictum felis. Mauris nec nunc sodales, tincidunt est eu, venenatis nulla. Aliquam in mattis velit.</li>
  283.                     </ul>
  284.                 </div> </div>
  285.             </div> </div>
  286.         </div>
  287.         <!-- end nav content -->
  288.         <!-- SKILLS -->
  289.         <div class="row no-gutters align-items-center mb-2">
  290.             <h2 class="mb-0 px-2 col-auto">V</h2> <div class="px-2 col"> <hr class="m-0 bg-primary"> </div>
  291.             <h2 class="mb-0 px-2 col-auto">NOTABLE SKILLS.</h2>
  292.         </div>
  293.         <div class="card mb-3 bg-faded border-0" style="border-radius: 10px;">
  294.             <i class="fal fa-star text-primary" style="position: absolute; top: -20px; left: -15px; font-size: 80px; opacity: .4; transform: rotate(-15deg); z-index: 9999;"></i>
  295.             <div class="row no-gutters">
  296.                 <!-- LEFT -->
  297.                 <div class="px-3 pb-3 col-lg-7 card bg-faded rounded-0 border-0" style="border-radius: 10px;">
  298.                     <!-- SKILL -->
  299.                     <div class="mt-2 mx-n3 p-3 bg-secondary" style="margin-bottom: -27px; opacity: .5;"></div>
  300.                     <h3 class="mr-n1 mb-2 text-white text-right" style="letter-spacing: -1px; z-index: 9;">
  301.                         Skill <i class="fal fa-star fa-lg" style="transform: rotate(15deg); opacity: .4; margin-left: -15px;"></i> </h3>
  302.                     <p> quick blurb. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id dolor sit amet augue aliquam fermentum. Donec vel lacus molestie, maximus tellus a, varius mauris. Morbi et eleifend urna. </p>
  303.                     <hr class="bg-secondary">
  304.                    
  305.                     <!-- SKILL -->
  306.                     <div class="mt-2 mx-n3 p-3 bg-secondary" style="margin-bottom: -27px; opacity: .5;"></div>
  307.                     <h3 class="mr-n1 mb-2 text-white text-right" style="letter-spacing: -1px; z-index: 9;">
  308.                         Skill <i class="fal fa-star fa-lg" style="transform: rotate(15deg); opacity: .4; margin-left: -15px;"></i> </h3>
  309.                     <p> quick blurb. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id dolor sit amet augue aliquam fermentum. Donec vel lacus molestie, maximus tellus a, varius mauris. Morbi et eleifend urna. </p>
  310.                     <hr class="bg-secondary">
  311.                    
  312.                     <!-- add more above here -->
  313.                 </div>
  314.                 <!-- DIVIDER -->
  315.                 <div class="col-lg-auto">
  316.                     <div class="card h-lg-100 my-3 my-lg-0 mx-0 mx-lg-2 border-left-0 border-bottom-0"></div>
  317.                 </div>
  318.                 <!-- RIGHT -->
  319.                 <div class="px-3 col card bg-faded rounded-0 border-0" style="border-radius: 10px;">
  320.                     <!-- STRENGTHS -->
  321.                     <div class="mt-2 mx-n3 p-3 bg-secondary" style="margin-bottom: -27px; opacity: .5;"></div>
  322.                     <h3 class="mr-n1 mb-2 text-white text-right" style="letter-spacing: -1px; z-index: 9;">
  323.                         Strengths <i class="fal fa-star fa-lg" style="transform: rotate(15deg); opacity: .4; margin-left: -15px;"></i> </h3>
  324.                     <ul class="mb-0 pl-4">
  325.                         <li>content</li>
  326.                         <li>content</li>
  327.                         <li>content</li>
  328.                     </ul>
  329.  
  330.                     <!-- WEAKNESSES -->
  331.                     <div class="mt-2 mx-n3 p-3 bg-secondary" style="margin-bottom: -27px; opacity: .5;"></div>
  332.                     <h3 class="mr-n1 mb-2 text-white text-right" style="letter-spacing: -1px; z-index: 9;">
  333.                         Weaknesses <i class="fal fa-star fa-lg" style="transform: rotate(15deg); opacity: .4; margin-left: -15px;"></i> </h3>
  334.                     <ul class="mb-0 pl-4">
  335.                         <li>content</li>
  336.                         <li>content</li>
  337.                         <li>content</li>
  338.                     </ul>
  339.                 </div>
  340.             </div>
  341.         </div>
  342.         <!-- LINKS -->
  343.         <div class="row no-gutters align-items-center mb-2">
  344.             <h2 class="mb-0 px-2 col-auto">ASSOCIATES.</h2> <div class="px-2 col"> <hr class="m-0 bg-primary"> </div>
  345.             <h2 class="mb-0 px-2 col-auto">VI</h2>
  346.         </div>
  347.         <div class="row">
  348.             <!-- CHARACTER -->
  349.             <div class="pb-3 col-lg-4 col-6"> <div class="card p-2 bg-faded border-0 h-100" style="border-radius: 10px;">
  350.                 <img src="IMGLINK" class="d-block w-100 mx-auto" style="max-width: 200px; border-radius: 10px;">
  351.                
  352.                 <div class="mt-2 mx-n2 p-2 bg-primary text-center" style="letter-spacing: -1px;">
  353.                     <h3 class="mb-0"> <a href="LINK" class=" text-white">NAME</a></h3>
  354.                 </div>
  355.                 <p class="my-1 text-secondary text-monospace"> <i class="fal fa-chevron-right"></i> relationship</p>
  356.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a ante id ipsum ullamcorper eleifend.</p>
  357.             </div> </div>
  358.             <!-- CHARACTER -->
  359.             <div class="pb-3 col-lg-4 col-6"> <div class="card p-2 bg-faded border-0 h-100" style="border-radius: 10px;">
  360.                 <img src="IMGLINK" class="d-block w-100 mx-auto" style="max-width: 200px; border-radius: 10px;">
  361.                
  362.                 <div class="mt-2 mx-n2 p-2 bg-primary text-center" style="letter-spacing: -1px;">
  363.                     <h3 class="mb-0"> <a href="LINK" class=" text-white">NAME</a></h3>
  364.                 </div>
  365.                 <p class="my-1 text-secondary text-monospace"> <i class="fal fa-chevron-right"></i> relationship</p>
  366.                 <p>Morbi volutpat erat nisl, ac egestas purus cursus id. Curabitur in lacinia justo.</p>
  367.             </div> </div>
  368.             <!-- CHARACTER -->
  369.             <div class="pb-3 col-lg-4 col-6"> <div class="card p-2 bg-faded border-0 h-100" style="border-radius: 10px;">
  370.                 <img src="IMGLINK" class="d-block w-100 mx-auto" style="max-width: 200px; border-radius: 10px;">
  371.                
  372.                 <div class="mt-2 mx-n2 p-2 bg-primary text-center" style="letter-spacing: -1px;">
  373.                     <h3 class="mb-0"> <a href="LINK" class=" text-white">NAME</a></h3>
  374.                 </div>
  375.                 <p class="my-1 text-secondary text-monospace"> <i class="fal fa-chevron-right"></i> relationship</p>
  376.                 <p>Suspendisse consectetur diam at est lobortis pharetra ut non neque. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
  377.             </div> </div>
  378.             <!-- add more above here -->
  379.         </div>
  380.     </div>
  381. </div> </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!