API tools faq
paste
SparklyLightus

Visual V2

SparklyLightus
Jul 25th, 2021 (edited)
841
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.07 KB | None | 0 0
raw download clone embed print report
  1. <div class="p-2 my-3 mx-auto card border-0 bg-faded" style="max-width: 600px; border-radius: 30px; font-variant: small-caps;">
  2.     <!-- HEADER -->
  3.     <div style="background: url('//via.placeholder.com/1000') center; background-size: cover; height: 140px; border-radius: 25px 25px 0px 0px;" class="align-items-end">
  4.         <h1 class="mr-2 w-100 display-4 text-sm-left text-right" style="text-shadow: 0px 0px 4px #000; text-indent: 10px;"> Name</h1>
  5.     </div>
  6.     <!-- MIDDLE STRIP -->
  7.     <div>
  8.         <!-- IMAGE -->
  9.         <div class="p-1 float-sm-right" style="margin-top: -80px;">
  10.             <img src="//via.placeholder.com/200" class="img-thumbnail rounded-circle" style="height: 120px; width: 120px;">
  11.         </div>
  12.         <!-- QUOTE -->
  13.         <h3 class="m-1 text-center text-secondary">
  14.             "Quote goes here..."
  15.         </h3>
  16.     </div>
  17.     <!-- CONTENT -->
  18.     <div class="p-2 card border-0 rounded-0" style="border-radius: 0px 0px 25px 25px;">
  19.         <!-- BASICS -->
  20.         <div class="row no-gutters">
  21.             <h1 class="m-0 col-auto text-primary text-center"><i class="fas fa-user"></i> Basics</h1>
  22.             <div class="ml-2 col card border-bottom-0 my-auto"></div>
  23.         </div>
  24.         <div class="row no-gutters text-center">
  25.             <!-- BASICS -->
  26.             <div class="p-1 col-sm-3 col-6">
  27.                 <p class="m-0">Information1</p> <hr class="m-0 bg-secondary"> <p class="m-0 text-secondary font-weight-bold">Name</p> </div>
  28.             <div class="p-1 col-sm-3 col-6">
  29.                 <p class="m-0">Information2</p> <hr class="m-0 bg-secondary"> <p class="m-0 text-secondary font-weight-bold">Age</p> </div>
  30.             <div class="p-1 col-sm-3 col-6">
  31.                 <p class="m-0">Information3</p> <hr class="m-0 bg-secondary"> <p class="m-0 text-secondary font-weight-bold">Gender</p> </div>
  32.             <div class="p-1 col-sm-3 col-6">
  33.                 <p class="m-0">Information4</p> <hr class="m-0 bg-secondary"> <p class="m-0 text-secondary font-weight-bold">Race</p> </div>
  34.             <div class="p-1 col-sm-3 col-6">
  35.                 <p class="m-0">Information5</p> <hr class="m-0 bg-secondary"> <p class="m-0 text-secondary font-weight-bold">Orientation</p> </div>
  36.             <div class="p-1 col-sm-3 col-6">
  37.                 <p class="m-0">Information6</p> <hr class="m-0 bg-secondary"> <p class="m-0 text-secondary font-weight-bold">Height</p> </div>
  38.             <div class="p-1 col-sm-3 col-6">
  39.                 <p class="m-0">@/Information7</p> <hr class="m-0 bg-secondary"> <p class="m-0 text-secondary font-weight-bold">Creator</p> </div>
  40.             <div class="p-1 col-sm-3 col-6">
  41.                 <p class="m-0"><a href="SONG_LINK_HERE">Information8</a> </p> <hr class="m-0 bg-secondary"> <p class="m-0 text-secondary font-weight-bold">Theme</p> </div>
  42.             <!-- APPEARANCE -->
  43.             <div class="p-1 col-sm-3 col-6">
  44.                 <p class="m-0">Information9</p> <hr class="m-0 bg-primary"> <p class="m-0 text-primary font-weight-bold">Hair</p> </div>
  45.             <div class="p-1 col-sm-3 col-6">
  46.                 <p class="m-0">Information10</p> <hr class="m-0 bg-primary"> <p class="m-0 text-primary font-weight-bold">Skin</p> </div>
  47.             <div class="p-1 col-sm-3 col-6">
  48.                 <p class="m-0">Information11</p> <hr class="m-0 bg-primary"> <p class="m-0 text-primary font-weight-bold">Eyes</p> </div>
  49.             <div class="p-1 col-sm-3 col-6">
  50.                 <p class="m-0">Information12</p> <hr class="m-0 bg-primary"> <p class="m-0 text-primary font-weight-bold">Build</p> </div>
  51.         </div>
  52.        
  53.         <!-- PERSONALITY -->
  54.         <div class="row no-gutters">
  55.             <h1 class="m-0 col-auto text-primary text-center"><i class="fas fa-eye"></i> Personality</h1>
  56.             <div class="ml-2 col card border-bottom-0 my-auto"></div>
  57.         </div>
  58.         <div class="row no-gutters">
  59.             <!-- TIP: CHANGE THE % IN 'width:' TO MOVE THE BARS -->
  60.             <!-- LEFT -->
  61.             <div class="p-1 col-sm-6">
  62.                 <p class="m-0 text-right"> <span class="pull-left text-secondary">Introvert</span> Extrovert </p>
  63.                 <div class="progress bg-faded" style="height: 8px;"> <div class="progress-bar bg-faded text-primary" style="border-right: 4px solid; width: 10%;"></div> </div>
  64.                
  65.                 <p class="m-0 text-right"> <span class="pull-left text-secondary">Shy</span> Bold </p>
  66.                 <div class="progress bg-faded" style="height: 8px;"> <div class="progress-bar bg-faded text-primary" style="border-right: 4px solid; width: 20%;"></div> </div>
  67.                
  68.                 <p class="m-0 text-right"> <span class="pull-left text-secondary">Careful</span> Careless </p>
  69.                 <div class="progress bg-faded" style="height: 8px;"> <div class="progress-bar bg-faded text-primary" style="border-right: 4px solid; width: 30%;"></div> </div>
  70.                
  71.                 <p class="m-0 text-right"> <span class="pull-left text-secondary">Honest</span> Dishonest </p>
  72.                 <div class="progress bg-faded" style="height: 8px;"> <div class="progress-bar bg-faded text-primary" style="border-right: 4px solid; width: 40%;"></div> </div>
  73.             </div>
  74.             <!-- RIGHT -->
  75.             <div class="p-1 col-sm-6">
  76.                 <p class="m-0 text-right"> <span class="pull-left text-secondary">Complying</span> Stubborn </p>
  77.                 <div class="progress bg-faded" style="height: 8px;"> <div class="progress-bar bg-faded text-primary" style="border-right: 4px solid; width: 50%;"></div> </div>
  78.                
  79.                 <p class="m-0 text-right"> <span class="pull-left text-secondary">Trusting</span> Suspicious </p>
  80.                 <div class="progress bg-faded" style="height: 8px;"> <div class="progress-bar bg-faded text-primary" style="border-right: 4px solid; width: 60%;"></div> </div>
  81.                
  82.                 <p class="m-0 text-right"> <span class="pull-left text-secondary">Patient</span> Impatient </p>
  83.                 <div class="progress bg-faded" style="height: 8px;"> <div class="progress-bar bg-faded text-primary" style="border-right: 4px solid; width: 70%;"></div> </div>
  84.                
  85.                 <p class="m-0 text-right"> <span class="pull-left text-secondary">Friendly</span> Reserved </p>
  86.                 <div class="progress bg-faded" style="height: 8px;"> <div class="progress-bar bg-faded text-primary" style="border-right: 4px solid; width: 80%;"></div> </div>
  87.             </div>
  88.             <!-- ADJECTIVES - POSITIVE-->
  89.             <p class="m-0 p-1 col-sm-6 text-success text-sm-right text-left">adj • adj • adj</p>
  90.             <!-- ADJECTIVES - NEGATIVE-->
  91.             <p class="m-0 p-1 col-sm-6 text-danger">adj • adj • adj</p>
  92.         </div>
  93.        
  94.         <!-- STORY -->
  95.         <div class="row no-gutters">
  96.             <h1 class="m-0 col-auto text-primary text-center"><i class="fas fa-bookmark"></i> Story</h1>
  97.             <div class="ml-2 col card border-bottom-0 my-auto"></div>
  98.         </div>
  99.         <div class="row no-gutters">
  100.             <!-- TIP: CHANGE THE % IN 'width:' TO MOVE THE BARS -->
  101.             <!-- LEFT -->
  102.             <div class="p-1 col-sm-6">
  103.                 <p class="m-0 text-right"> <span class="pull-left text-secondary">Rich</span> Poor </p>
  104.                 <div class="progress bg-faded" style="height: 8px;"> <div class="progress-bar bg-faded text-primary" style="border-right: 4px solid; width: 10%;"></div> </div>
  105.                
  106.                 <p class="m-0 text-right"> <span class="pull-left text-secondary">High status</span> Low status </p>
  107.                 <div class="progress bg-faded" style="height: 8px;"> <div class="progress-bar bg-faded text-primary" style="border-right: 4px solid; width: 20%;"></div> </div>
  108.                
  109.                 <p class="m-0 text-right"> <span class="pull-left text-secondary">Turbulent past</span> Peaceful past </p>
  110.                 <div class="progress bg-faded" style="height: 8px;"> <div class="progress-bar bg-faded text-primary" style="border-right: 4px solid; width: 30%;"></div> </div>
  111.             </div>
  112.             <!-- RIGHT -->
  113.             <div class="p-1 col-sm-6">
  114.                 <p class="m-0 text-right"> <span class="pull-left text-secondary">Turbulent present</span> Peaceful present </p>
  115.                 <div class="progress bg-faded" style="height: 8px;"> <div class="progress-bar bg-faded text-primary" style="border-right: 4px solid; width: 40%;"></div> </div>
  116.                
  117.                 <p class="m-0 text-right"> <span class="pull-left text-secondary">Distant to family</span> Close to family </p>
  118.                 <div class="progress bg-faded" style="height: 8px;"> <div class="progress-bar bg-faded text-primary" style="border-right: 4px solid; width: 50%;"></div> </div>
  119.                
  120.                 <p class="m-0 text-right"> <span class="pull-left text-secondary">Big family</span> Small family </p>
  121.                 <div class="progress bg-faded" style="height: 8px;"> <div class="progress-bar bg-faded text-primary" style="border-right: 4px solid; width: 60%;"></div> </div>
  122.             </div>
  123.             <!-- PARAGRAPHS -->
  124.             <div class="p-1 col-12">
  125.                 <p>Write something about your character here. Or not. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non tellus vitae enim tempus laoreet. Curabitur pharetra orci arcu. Suspendisse rutrum ut nulla sollicitudin tincidunt. Ut viverra nisi sit amet metus dictum, a vulputate est scelerisque. Praesent quis tortor ante. Aliquam nec porta libero. Mauris elementum consectetur tellus at iaculis. Praesent interdum nisi id rutrum vulputate.</p>
  126.                 <p>Proin molestie laoreet lacinia. Aenean consectetur placerat magna. Maecenas suscipit, risus fermentum convallis congue, nunc enim faucibus lorem, in auctor elit nibh eu erat. Vivamus euismod enim quam, non sodales ante semper quis. Vivamus sit amet commodo tellus. Proin vitae gravida nunc.</p>
  127.             </div>
  128.             <!-- end paragraphs -->
  129.         </div>
  130.        
  131.         <!-- LINKS -->
  132.         <div class="row no-gutters">
  133.             <h1 class="m-0 col-auto text-primary text-center"><i class="fas fa-link"></i> Links</h1>
  134.             <div class="ml-2 col card border-bottom-0 my-auto"></div>
  135.         </div>
  136.         <div class="row no-gutters">
  137.             <!-- PERSON -->
  138.             <div class="p-1 col-sm-3 col-6 text-center">
  139.                 <a href="LINK" class="p-1 w-100 btn btn-secondary">
  140.                     <img src="//via.placeholder.com/200" style="height: 100px; width: 100px;" class="rounded-circle"> <br>
  141.                     <small>relationship</small> <br>
  142.                     Name </a>
  143.             </div>
  144.             <!-- PERSON -->
  145.             <div class="p-1 col-sm-3 col-6 text-center">
  146.                 <a href="LINK" class="p-1 w-100 btn btn-secondary">
  147.                     <img src="//via.placeholder.com/200" style="height: 100px; width: 100px;" class="rounded-circle"> <br>
  148.                     <small>relationship</small> <br>
  149.                     Name </a>
  150.             </div>
  151.             <!-- PERSON -->
  152.             <div class="p-1 col-sm-3 col-6 text-center">
  153.                 <a href="LINK" class="p-1 w-100 btn btn-secondary">
  154.                     <img src="//via.placeholder.com/200" style="height: 100px; width: 100px;" class="rounded-circle"> <br>
  155.                     <small>relationship</small> <br>
  156.                     Name </a>
  157.             </div>
  158.             <!-- PERSON -->
  159.             <div class="p-1 col-sm-3 col-6 text-center">
  160.                 <a href="LINK" class="p-1 w-100 btn btn-secondary">
  161.                     <img src="//via.placeholder.com/200" style="height: 100px; width: 100px;" class="rounded-circle"> <br>
  162.                     <small>relationship</small> <br>
  163.                     Name </a>
  164.             </div>
  165.             <!-- ADD MORE ABOVE HERE -->
  166.         </div>
  167.     </div>
  168. </div>
  169. <!-- .......................... CREDITS -->
  170. <p class="mt-n2 text-center">
  171.     <a data-toggle="tooltip" title="HTML by SparklyCodes" href="/SparklyCodes"> <i class="fal fa-code"></i> </a>
  172. </p>
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!