API tools faq
paste
Advertisement
SparklyLightus

Grid

SparklyLightus
Oct 24th, 2020
1,029
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.51 KB | None | 0 0
raw download clone embed print report
  1. <div class="card m-2 pt-3 pb-3 bg-faded">
  2.     <!-- BASIC INFO, OVERVIEW & STORY -->
  3.     <div class="row m-1">
  4.         <!-- LEFT COL -->
  5.         <div class="col-lg-4">
  6.             <!-- META INFO -->
  7.             <div class="card p-2 m-1" style="height: 390px; overflow: auto;">
  8.                 <!-- IMG -->
  9.                 <div class="m-2 justify-content-center">
  10.                     <img src="//via.placeholder.com/200x200" class="rounded-circle" style="height: 200px; width: 200px">
  11.                 </div>
  12.                 <!-- META STUFF -->
  13.                 <ul class="list-group list-group-flush mt-2 w-100">
  14.                     <li class="list-group-item p-2 d-flex justify-content-between border-0 bg-faded">
  15.                         <span class="text-secondary">DESIGNER</span>
  16.                         <span>INFO</span></li>
  17.                     <li class="list-group-item p-2 d-flex justify-content-between border-0">
  18.                         <span class="text-secondary">OWNER</span>
  19.                         <span>INFO</span></li>
  20.                     <li class="list-group-item p-2 d-flex justify-content-between border-0 bg-faded">
  21.                         <span class="text-secondary">UNIVERSE</span>
  22.                         <span>INFO</span></li>
  23.                     <li class="list-group-item p-2 d-flex justify-content-between border-0">
  24.                         <span class="text-secondary">STATUS</span>
  25.                         <span>INFO</span></li>
  26.                 </ul>
  27.             </div>
  28.             <!-- CREDIT, DON'T MOVE -->
  29.             <div class="text-center m-1">
  30.                 <a data-toggle="tooltip" title="Code by SparklyCodes" href="/SparklyCodes"><i class="fas fa-code"></i></a>
  31.             </div>
  32.             <!-- INFORMATION -->
  33.             <div class="card p-1 m-1" style="height: 340px; overflow: auto;">
  34.                 <div class="card bg-faded p-1 m-1 border-0">
  35.                     <p class="text-secondary m-0">NAME:</p> <p class="m-0">INFORMATION</p></div>
  36.                 <div class="card bg-faded p-1 m-1 border-0">
  37.                     <p class="text-secondary m-0">ALIAS:</p> <p class="m-0">INFORMATION</p></div>
  38.                 <div class="card bg-faded p-1 m-1 border-0">
  39.                     <p class="text-secondary m-0">AGE:</p> <p class="m-0">INFORMATION (bday)</p></div>
  40.                 <div class="card bg-faded p-1 m-1 border-0">
  41.                     <p class="text-secondary m-0">GENDER:</p> <p class="m-0">INFORMATION (prns)</p></div>
  42.                 <div class="card bg-faded p-1 m-1 border-0">
  43.                     <p class="text-secondary m-0">RACE:</p> <p class="m-0">INFORMATION</p></div>
  44.                 <div class="card bg-faded p-1 m-1 border-0">
  45.                     <p class="text-secondary m-0">RELATIONSHIP:</p> <p class="m-0">INFORMATION</p></div>
  46.                 <div class="card bg-faded p-1 m-1 border-0">
  47.                     <p class="text-secondary m-0">OCCUPATION:</p> <p class="m-0">INFORMATION</p></div>
  48.                 <div class="card bg-faded p-1 m-1 border-0">
  49.                     <p class="text-secondary m-0">ORIGIN:</p> <p class="m-0">INFORMATION</p></div>
  50.             </div>
  51.         </div>
  52.         <!-- RIGHT COL -->
  53.         <div class="col-lg">
  54.             <div class="card p-2 m-1" style="height: 760px; overflow: auto;">
  55.                 <!-- OVERVIEW -->
  56.                 <div class="m-1 text-justify">
  57.                     <h3 class="text-secondary font-weight-light"><i class="fas fa-eye"></i> Overview</h3>
  58.                     <p class="mr-2 ml-2">Introduce your character here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus consectetur ullamcorper. Proin imperdiet faucibus pellentesque. Vivamus erat leo, vulputate viverra nunc venenatis, auctor semper nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in egestas quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
  59.                     <hr class="m-0 mt-3">
  60.                 </div>
  61.                 <!-- PERSONALITY -->
  62.                 <div class="m-1 text-justify">
  63.                     <h3 class="text-secondary font-weight-light"><i class="fas fa-comment"></i> Personality</h3>
  64.                     <p class="mr-2 ml-2">Write about their personality. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus consectetur ullamcorper. Proin imperdiet faucibus pellentesque. Vivamus erat leo, vulputate viverra nunc venenatis, auctor semper nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in egestas quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
  65.                     <p class="mr-2 ml-2">Integer et mauris eget turpis porttitor aliquam in a nisi. Duis laoreet consequat ipsum nec lacinia. Fusce blandit lectus ullamcorper maximus egestas. Morbi ullamcorper justo nunc, at feugiat risus pharetra non. Pellentesque molestie lectus mauris. Curabitur a metus nisl.</p>
  66.                     <hr class="m-0 mt-3">
  67.                 </div>
  68.                 <!-- APPEARANCE -->
  69.                 <div class="m-1 text-justify">
  70.                     <h3 class="text-secondary font-weight-light"><i class="fas fa-sparkles"></i> Appearance</h3>
  71.                     <p class="mr-2 ml-2">Describe your character's appearance here, you can also use this space for design notes. Morbi mattis facilisis diam, id mollis ante scelerisque sed. Pellentesque vulputate volutpat leo, vel volutpat turpis vestibulum eget. Curabitur sed leo ac lectus condimentum tempus. Morbi feugiat posuere ipsum, ac consectetur nunc fringilla ut. Mauris a tortor tincidunt, convallis risus nec, interdum quam. Nulla facilisi.</p>
  72.                     <hr class="m-0 mt-3">
  73.                 </div>
  74.                 <!-- STORY -->
  75.                 <div class="m-1 text-justify">
  76.                     <h3 class="text-secondary font-weight-light"><i class="fas fa-book"></i> Story</h3>
  77.                    
  78.                     <p class="text-primary text-right mb-1" style="font-size: 16px;">HEADER</p><hr class="bg-primary m-0">
  79.                     <p class="mr-2 ml-2">Phasellus quis commodo leo. Duis sed blandit purus, sit amet vestibulum felis. Sed efficitur molestie vestibulum. Quisque vitae vestibulum erat. Donec quis porttitor odio. Pellentesque sit amet luctus enim. Vivamus quis vulputate turpis. </p>
  80.                    
  81.                     <p class="text-primary text-right mb-1" style="font-size: 16px;">HEADER</p><hr class="bg-primary m-0">
  82.                     <p class="mr-2 ml-2">Curabitur sed dictum quam. Duis maximus libero vel nunc consectetur dapibus. Phasellus varius est sed nibh volutpat viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu ipsum lacinia, interdum turpis at, accumsan diam. Aliquam id interdum urna. Pellentesque euismod et est a semper. Mauris ac ante vel ante ornare facilisis. Morbi id semper tortor, quis tristique arcu. Phasellus nec maximus neque. Pellentesque vel turpis aliquet, scelerisque tellus in, vestibulum orci. </p>
  83.                    
  84.                     <p class="text-primary text-right mb-1" style="font-size: 16px;">HEADER</p><hr class="bg-primary m-0">
  85.                     <p class="mr-2 ml-2">In consequat nunc sed nisl ornare, eu blandit turpis feugiat. Mauris ante quam, fermentum tempus mollis at, iaculis a est. Donec ut sapien non ipsum ultricies mattis ac luctus ligula. Vivamus ut condimentum erat. Vivamus tempor consectetur imperdiet. Duis feugiat hendrerit erat lacinia ultricies. Integer interdum turpis eget varius porta. Integer quis nunc ac leo iaculis tempor. Aliquam porttitor blandit turpis ac elementum. </p>
  86.                     <hr class="m-0 mt-3">
  87.                 </div>
  88.             </div>
  89.         </div>
  90.     </div>
  91.     <!-- RELATIONSHIPS & TRIVIA -->
  92.     <div class="row m-1 mt-3">
  93.         <!-- LEFT COL -->
  94.         <div class="col-lg-6">
  95.             <!-- RELATIONSHIPS -->
  96.             <div class="card p-1 m-1" style="height: 474px; overflow: auto;">
  97.                 <!-- PERSON 1 -->
  98.                 <div class="card bg-faded p-3 m-1 border-0">
  99.                     <p class="m-0 text-secondary"><a href="LINK" class="btn btn-primary p-1">NAME1</a> . relationship</p>
  100.                     <p class="m-0">Describe relationship, this box grows with content. Etiam imperdiet sem nec ipsum sagittis, vitae molestie sem pulvinar. In iaculis enim ac molestie porttitor.</p>
  101.                     <p class="m-0">You can add another paragraph as well. Quisque lacinia tortor diam, vitae consectetur sapien porttitor id. Suspendisse sagittis eu erat tincidunt ultrices. </p>
  102.                 </div>
  103.                 <!-- PERSON 2 -->
  104.                 <div class="card bg-faded p-3 m-1 border-0">
  105.                     <p class="m-0 text-secondary"><a href="LINK" class="btn btn-primary p-1">NAME2</a> . relationship</p>
  106.                     <p class="m-0">Mauris ultrices, nulla ut malesuada viverra, lacus dui luctus purus, ac ullamcorper erat dolor ac mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed commodo ex nibh, id ullamcorper ipsum lacinia in.</p>
  107.                 </div>
  108.                 <!-- PERSON 3 -->
  109.                 <div class="card bg-faded p-3 m-1 border-0">
  110.                     <p class="m-0 text-secondary"><a href="LINK" class="btn btn-primary p-1">NAME3</a> . relationship</p>
  111.                     <p class="m-0">Vestibulum laoreet mattis turpis, a facilisis lacus ullamcorper in.</p>
  112.                 </div>
  113.                 <!-- PERSON 4 -->
  114.                 <div class="card bg-faded p-3 m-1 border-0">
  115.                     <p class="m-0 text-secondary"><a href="LINK" class="btn btn-primary p-1">NAME4</a> . relationship</p>
  116.                     <p class="m-0">Suspendisse potenti. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non elit risus. Nam varius, nibh ac auctor placerat, nunc lectus luctus dui, eget porta odio odio quis dui.</p>
  117.                 </div>
  118.             </div>
  119.         </div>
  120.         <!-- RIGHT COL -->
  121.         <div class="col-lg-6">
  122.             <!-- TRIVIA -->
  123.             <div class="card p-2 m-1" style="height: 200px; overflow: auto;">
  124.                 <div class="m-1 text-justify">
  125.                     <h3 class="text-secondary font-weight-light"><i class="fas fa-star"></i> Trivia</h3>
  126.                    
  127.                     <p class="m-1"><i class="far fa-star"></i> Put some trivia here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus congue pellentesque justo id facilisis.</p>
  128.                     <p class="m-1"><i class="far fa-star"></i> Curabitur egestas lectus egestas est rutrum egestas. Nullam aliquet arcu nec purus vulputate ornare. </p>
  129.                     <p class="m-1"><i class="far fa-star"></i> Pellentesque sed purus at sapien lobortis congue eget a nunc. Pellentesque vitae elit vitae dui dictum semper. Aenean lacinia rutrum felis nec efficitur.</p>
  130.                 </div>
  131.             </div>
  132.             <!-- PREFERENCES -->
  133.             <div class="card p-2 m-1 mt-4" style="height: 250px; overflow: auto;">
  134.                
  135.                 <div class="m-1 text-justify">
  136.                     <h3 class="text-secondary font-weight-light"><i class="fas fa-abacus"></i> Preferences</h3>
  137.                     <!-- LIKES -->
  138.                     <p class="text-success text-right mb-1" style="font-size: 16px;">LIKES</p><hr class="bg-success m-0">
  139.                     <ul>
  140.                         <li>Fusce in augue sollicitudin, sagittis ante non, eleifend mauris. </li>
  141.                         <li>Donec feugiat libero fringilla placerat semper.</li>
  142.                         <li>Phasellus dignissim diam eu eros dapibus, et volutpat dui sagittis.</li>
  143.                         <li>Maecenas libero lorem, fringilla et sem in, convallis vehicula tortor.</li>
  144.                     </ul>
  145.                     <!-- DISLIKES -->
  146.                     <p class="text-danger text-right mb-1" style="font-size: 16px;">DISLIKES</p><hr class="bg-danger m-0">
  147.                     <ul>
  148.                         <li>Praesent sagittis ante in elit laoreet, vitae iaculis lorem mattis. </li>
  149.                         <li>Cras porttitor est fringilla dui sollicitudin, nec fringilla tortor hendrerit. </li>
  150.                         <li>Pellentesque tempor, felis nec pharetra placerat. </li>
  151.                         <li>Lacus leo condimentum metus, id vulputate elit dolor ac ipsum.</li>
  152.                     </ul>
  153.                 </div>
  154.             </div>
  155.         </div>
  156.     </div>
  157. </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!