API tools faq
paste
SparklyLightus

Boxed - Character

SparklyLightus
Sep 7th, 2021 (edited)
1,171
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.50 KB | None | 0 0
raw download clone embed print report
  1. <div class="m-3 p-3 mx-auto row no-gutters code" style="
  2.    background: url('BACKGROUND_IMAGE');
  3.    background-size: cover; background-position: center;
  4.    max-width: 900px; border-radius: 20px;">
  5.    
  6.     <!-- ...................................... PROFILE PICTURE -->
  7.     <div class="col-sm-4 text-center">
  8.         <!-- IMAGE -->
  9.         <img src="IMG_LINK" class="m-2 rounded-circle" style="max-width: 100%; max-height: 250px;">
  10.         <!-- BASICS -->
  11.         <div class="m-2 card" style="border-radius: 20px; overflow: hidden">
  12.             <div class="p-2 overflow-auto text-right" style="height: 265px;">
  13.                 <p class="m-1"><strong class="text-secondary pull-left" style="font-variant: small-caps;">Name</strong>
  14.                     Information</p>
  15.                 <p class="m-1"><strong class="text-secondary pull-left" style="font-variant: small-caps;">Gender</strong>
  16.                     Information</p>
  17.                 <p class="m-1"><strong class="text-secondary pull-left" style="font-variant: small-caps;">Age</strong>
  18.                     Information</p>
  19.                 <p class="m-1"><strong class="text-secondary pull-left" style="font-variant: small-caps;">Race</strong>
  20.                     Information</p>
  21.                 <p class="m-1"><strong class="text-secondary pull-left" style="font-variant: small-caps;">Orientation</strong>
  22.                     Information</p>
  23.                 <p class="m-1"><strong class="text-secondary pull-left" style="font-variant: small-caps;">Occupation</strong>
  24.                     Information</p>
  25.                 <p class="m-1"><strong class="text-secondary pull-left" style="font-variant: small-caps;">Residence</strong>
  26.                     Information</p>
  27.                 <hr class="my-2">
  28.                 <p class="m-1"><strong class="text-secondary pull-left" style="font-variant: small-caps;">Worth</strong>
  29.                     Information</p>
  30.                 <p class="m-1"><strong class="text-secondary pull-left" style="font-variant: small-caps;">Designer</strong>
  31.                     Information</p>
  32.             </div>
  33.         </div>
  34.         <!-- NOTES -->
  35.         <div class="mx-2 card" style="border-radius: 20px; overflow: hidden"> <div class="p-2 overflow-auto text-left" style="height: 250px;">
  36.             <h3 class="m-1 text-center" style="font-variant: small-caps;">Design Notes</h3>
  37.             <!-- DIVIDER -->
  38.             <div class="mt-n1 row no-gutters faded text-muted">
  39.                 <div class="mx-1 col my-auto" style="border-top: 2px solid;"></div> <i class="mt-1 col-auto far fa-chevron-down fa-lg"></i> <div class="mx-1 col my-auto" style="border-top: 2px solid;"></div>
  40.             </div>
  41.             <!-- CONTENT -->
  42.             <ul class="m-0 list-unstyled">
  43.                 <li class="m-1"><i class="fas fa-chevron-right"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  44.                 <li class="m-1"><i class="fas fa-chevron-right"></i> Vestibulum non venenatis nisl.</li>
  45.                 <li class="m-1"><i class="fas fa-chevron-right"></i> Etiam lacinia mi arcu, vitae auctor ligula placerat ac.</li>
  46.                 <li class="m-1"><i class="fas fa-chevron-right"></i> Maecenas eget faucibus urna. Integer malesuada enim eu lobortis porttitor.</li>
  47.                 <li class="m-1"><i class="fas fa-chevron-right"></i> Duis ut leo sed ante vestibulum sodales quis vel mi.</li>
  48.             </ul>
  49.         </div> </div>
  50.     </div>
  51.     <!-- ...................................... RIGHT -->
  52.     <div class="col-sm-8">
  53.         <!-- NAME -->
  54.         <div class="m-2 p-2 card text-center" style="border-radius: 20px;">
  55.             <h1 class="m-0 display-3">Name Here</h1>
  56.         </div>
  57.         <!-- BIO -->
  58.         <div class="m-2 card" style="border-radius: 20px; overflow: hidden;"> <div class="p-2 overflow-auto" style="height: 360px; text-indent: 20px;">
  59.             <!-- PERSONALITY -->
  60.             <div>
  61.                 <h1 class="m-1" style="font-variant: small-caps; text-indent: 0px;"><i class="fas fa-chevron-right"></i> Personality</h1>
  62.                 <p>Phasellus et erat sit amet nibh consequat maximus a nec enim. Morbi a felis vitae lorem suscipit vulputate. Nulla ultrices fermentum ligula, et sodales lectus ultricies et. Sed facilisis volutpat commodo. Nam egestas accumsan nisi, vel suscipit neque. Nam ornare mi placerat, laoreet purus sed, varius lectus. Ut euismod nisl in nunc sodales venenatis. Morbi elit diam, feugiat non augue nec, consequat blandit ex. Maecenas laoreet leo sed ante vulputate, id lacinia nunc interdum. Nam finibus dapibus neque vitae vehicula.</p>
  63.             </div>
  64.             <!-- TASTES -->
  65.             <div class="row no-gutters" style="text-indent: 0px;">
  66.                 <!-- LIKES -->
  67.                 <div class="p-2 col-sm-6">
  68.                     <h3 class="m-1 text-muted" style="font-variant: small-caps;">Likes</h3>
  69.                     <ul class="m-0 list-unstyled">
  70.                         <li class="m-1"><i class="fas fa-chevron-right"></i> Info</li>
  71.                         <li class="m-1"><i class="fas fa-chevron-right"></i> Info</li>
  72.                         <li class="m-1"><i class="fas fa-chevron-right"></i> Info</li>
  73.                         <li class="m-1"><i class="fas fa-chevron-right"></i> Info</li>
  74.                     </ul>
  75.                 </div>
  76.                 <!-- DISLIKES -->
  77.                 <div class="p-2 col-sm-6">
  78.                     <h3 class="m-1 text-muted" style="font-variant: small-caps;">Dislikes</h3>
  79.                     <ul class="m-0 list-unstyled">
  80.                         <li class="m-1"><i class="fas fa-chevron-right"></i> Info</li>
  81.                         <li class="m-1"><i class="fas fa-chevron-right"></i> Info</li>
  82.                         <li class="m-1"><i class="fas fa-chevron-right"></i> Info</li>
  83.                         <li class="m-1"><i class="fas fa-chevron-right"></i> Info</li>
  84.                     </ul>
  85.                 </div>
  86.             </div>
  87.             <!-- STORY -->
  88.             <div>
  89.                 <h1 class="m-1" style="font-variant: small-caps; text-indent: 0px;"><i class="fas fa-chevron-right"></i> Story</h1>
  90.                 <p>Donec metus ligula, fringilla ut sodales non, gravida sit amet urna. Vestibulum consequat est ut magna laoreet pharetra. Curabitur rhoncus ex non pretium tempus. Quisque vitae sem tellus. Morbi vehicula justo vitae lacinia lobortis. Donec sit amet tellus vel ante auctor vulputate. Ut ornare dui vel lacus tincidunt sagittis. Aenean ac bibendum nisl.</p>
  91.                 <p>Integer porttitor, lacus eu ultricies tristique, diam turpis varius neque, ut feugiat lacus lectus a leo. Praesent congue nisi ipsum, id viverra ipsum aliquam sed. Proin sollicitudin risus a odio pulvinar ultricies. Aenean congue consectetur ex eu hendrerit. Cras eu eros eu nisi consectetur mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum dictum interdum luctus. Phasellus quis posuere sem. Nullam vitae fringilla odio. Etiam sed felis consequat, lacinia leo in, sodales eros. Fusce tincidunt turpis eget dui lacinia, quis commodo sem tincidunt. Nam quis luctus turpis. </p>
  92.             </div>
  93.             <!-- RELATIONSHIPS -->
  94.             <div style="text-indent: 0px;">
  95.                 <h1 class="m-1" style="font-variant: small-caps; text-indent: 0px;"><i class="fas fa-chevron-right"></i> Relationships</h1>
  96.                
  97.                 <!-- PERSON -->
  98.                 <div class="row no-gutters">
  99.                     <div class="p-2 col-sm-auto text-center my-auto">
  100.                         <h3 class="m-1" style="font-variant: small-caps;">
  101.                         <!-- NAME & LINK -->
  102.                             <a href="LINK">Name Here</a></h3>
  103.                         <!-- IMAGE -->
  104.                         <img src="IMG_LINK" class="rounded-circle" style="max-width: 120px">
  105.                     </div>
  106.                     <div class="p-1 col-sm my-auto" style="text-indent: 20px;">
  107.                         <p class="m-1">Praesent a feugiat erat. Sed vel tortor maximus, lobortis ipsum eget, tincidunt nisi. Duis quam risus, scelerisque eu cursus eu, finibus non dui. Aliquam a ipsum mi. Nunc sit amet tellus vitae metus aliquam sodales sed ut enim. Vestibulum nec nisl metus. Aliquam nulla sapien, ullamcorper in libero at, elementum auctor ligula.</p>
  108.                         <p class="m-1">Nam sit amet ligula id metus placerat aliquet ac eget est. Morbi convallis nulla aliquam massa pretium malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper non velit sed lacinia.</p>
  109.                     </div>
  110.                 </div>
  111.                 <hr class="my-0">
  112.                 <!-- PERSON -->
  113.                 <div class="row no-gutters">
  114.                     <div class="p-2 col-sm-auto text-center my-auto">
  115.                         <h3 class="m-1" style="font-variant: small-caps;">
  116.                         <!-- NAME & LINK -->
  117.                             <a href="LINK">Name Here</a></h3>
  118.                         <!-- IMAGE -->
  119.                         <img src="IMG_LINK" class="rounded-circle" style="max-width: 120px">
  120.                     </div>
  121.                     <div class="p-1 col-sm my-auto" style="text-indent: 20px;">
  122.                         <p class="m-1">Vivamus sed risus aliquet, ornare tortor ac, ornare ipsum. Nulla ultrices quis massa a ullamcorper. Mauris semper facilisis vehicula. Mauris id erat eget lacus finibus lobortis et ornare mauris. Nam placerat lectus venenatis, dapibus quam eu, interdum lectus. </p>
  123.                     </div>
  124.                 </div>
  125.                 <hr class="my-0">
  126.                 <!-- PERSON -->
  127.                 <div class="row no-gutters">
  128.                     <div class="p-2 col-sm-auto text-center my-auto">
  129.                         <h3 class="m-1" style="font-variant: small-caps;">
  130.                         <!-- NAME & LINK -->
  131.                             <a href="LINK">Name Here</a></h3>
  132.                         <!-- IMAGE -->
  133.                         <img src="IMG_LINK" class="rounded-circle" style="max-width: 120px">
  134.                     </div>
  135.                     <div class="p-1 col-sm my-auto" style="text-indent: 20px;">
  136.                         <p class="m-1">Sed eget enim sollicitudin, viverra lectus vitae, ultrices magna. Mauris ipsum sapien, lobortis vel erat ac, accumsan porta velit.</p>
  137.                     </div>
  138.                 </div>
  139.                 <!-- ADD MORE ABOVE HERE -->
  140.             </div>
  141.         </div> </div>
  142.         <!-- REFERENCE -->
  143.         <div class="m-2 p-2 card" style="border-radius: 20px; overflow: hidden;">
  144.             <h1 class="m-1" style="font-variant: small-caps; text-indent: 0px;"><i class="fas fa-chevron-right"></i> Reference
  145.                 <a href="LINK_REF_IMAGE"> <i class="fas fa-search fa-sm"></i> </a>
  146.             </h1>
  147.             <div class="justify-content-center align-items-center" style="height: 300px">
  148.                 <!-- REFERENCE IMAGE -->
  149.                 <img src="IMG_LINK" style="max-width: 100%; max-height: 100%;">
  150.             </div>
  151.         </div>
  152.     </div>
  153.    
  154.     <!-- ...................................... CREDITS -->
  155.     <div class="m-n1 col-12 text-center">
  156.         <a data-toggle="tooltip" title="HTML by SparlyCodes" href="/SparklyCodes"> <i class="fas fa-code"></i></a>
  157.         <a data-toggle="tooltip" title="Layout by connorthecanoe" href="/connorthecanoe"><i class="mx-2 fas fa-paint-brush"></i></a>
  158.         <a data-toggle="tooltip" title="Background" href="BG_SOURCE"> <i class="fas fa-image"></i> </a>
  159.     </div>
  160. </div>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!