API tools faq
paste
Advertisement
SparklyLightus

Grid V2

SparklyLightus
Feb 3rd, 2021
477
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.15 KB | None | 0 0
raw download clone embed print report
  1. <div class="card m-2 p-2 bg-faded">
  2.     <div class="row no-gutters">
  3.         <!-- META STUFF -->
  4.         <div class="col-lg-4 m-0 p-0">
  5.             <!-- META INFO -->
  6.             <div class="card p-2 m-1" style="height: 345px; overflow: auto;">
  7.                 <!-- IMG -->
  8.                 <div class="m-2 justify-content-center">
  9.                     <img src="//via.placeholder.com/200" class="rounded-circle" style="height: 160px; width: 160px">
  10.                 </div>
  11.                 <!-- META STUFF -->
  12.                 <ul class="list-group list-group-flush mt-2 w-100">
  13.                     <li class="list-group-item p-2 d-flex justify-content-between border-0 bg-faded">
  14.                         <span class="text-secondary">DESIGNER</span>
  15.                         <span>INFO</span></li>
  16.                     <li class="list-group-item p-2 d-flex justify-content-between border-0">
  17.                         <span class="text-secondary">OWNER</span>
  18.                         <span>INFO</span></li>
  19.                     <li class="list-group-item p-2 d-flex justify-content-between border-0 bg-faded">
  20.                         <span class="text-secondary">UNIVERSE</span>
  21.                         <span><a href="LINK">INFO</a></span></li>
  22.                     <li class="list-group-item p-2 d-flex justify-content-between border-0">
  23.                         <span class="text-secondary">STATUS</span>
  24.                         <span>INFO</span></li>
  25.                 </ul>
  26.             </div>
  27.         </div>
  28.         <!-- BASICS -->
  29.         <div class="col-lg-4 m-0 p-0">
  30.             <div class="card p-0 m-1" style="height: 345px; overflow: auto;">
  31.                 <div class="m-1 p-0">
  32.                     <div class="card bg-faded p-1 m-1 border-0">
  33.                         <p class="text-secondary m-0">NAME:</p> <p class="m-0">INFORMATION</p></div>
  34.                     <div class="card bg-faded p-1 m-1 border-0">
  35.                         <p class="text-secondary m-0">ALIAS:</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">AGE:</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">RACE:</p> <p class="m-0">INFORMATION</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">ORIENTATION:</p> <p class="m-0">INFORMATION</p></div>
  44.                 </div>
  45.             </div>
  46.         </div>
  47.         <!-- SPECIFICS -->
  48.         <div class="col-lg-4 m-0 p-0">
  49.             <div class="card p-0 m-1" style="height: 345px; overflow: auto;">
  50.                 <div class="m-1 p-0">
  51.                     <div class="card bg-faded p-1 m-1 border-0">
  52.                         <p class="text-secondary m-0">OCCUPATION:</p> <p class="m-0">INFORMATION</p></div>
  53.                     <div class="card bg-faded p-1 m-1 border-0">
  54.                         <p class="text-secondary m-0">HEIGHT:</p> <p class="m-0">INFORMATION</p></div>
  55.                     <div class="card bg-faded p-1 m-1 border-0">
  56.                         <p class="text-secondary m-0">MBTI:</p> <p class="m-0">INFORMATION</p></div>
  57.                     <div class="card bg-faded p-1 m-1 border-0">
  58.                         <p class="text-secondary m-0">RELATIONSHIP:</p> <p class="m-0">INFORMATION</p></div>
  59.                     <div class="card bg-faded p-1 m-1 border-0">
  60.                         <p class="text-secondary m-0">STATUS:</p> <p class="m-0">INFORMATION</p></div>
  61.                     <div class="card bg-faded p-1 m-1 border-0">
  62.                         <p class="text-secondary m-0">ORIGIN/RESIDENCE:</p> <p class="m-0">INFORMATION</p></div>
  63.                 </div>
  64.             </div>
  65.         </div>
  66.         <!-- OVERVIEW -->
  67.         <div class="col-lg-6 m-0 p-0">
  68.             <div class="card p-2 m-1" style="height: 360px; overflow: auto;">
  69.                 <!-- OVERVIEW -->
  70.                 <div class="m-1 text-justify">
  71.                     <h3 class="text-secondary font-weight-light"><i class="fas fa-eye"></i> Overview</h3>
  72.                     <p class="mx-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>
  73.  
  74.                     <hr class="m-0 mt-2">
  75.                 </div>
  76.                 <!-- APPEARANCE -->
  77.                 <div class="m-1 text-justify">
  78.                     <h3 class="text-secondary font-weight-light"><i class="fas fa-sparkles"></i> Appearance</h3>
  79.                     <p class="mx-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.</p>
  80.                     <hr class="m-0 mt-2">
  81.                 </div>
  82.             </div>
  83.         </div>
  84.         <!-- PERSONALITY/STORY -->
  85.         <div class="col-lg-6 m-0 p-0">
  86.             <div class="card p-2 m-1" style="height: 360px; overflow: auto;">
  87.                 <!-- PERSONALITY -->
  88.                 <div class="m-1 text-justify">
  89.                     <h3 class="text-secondary font-weight-light"><i class="fas fa-comment"></i> Personality</h3>
  90.                     <p class="mx-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>
  91.                     <p class="mx-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>
  92.                     <hr class="m-0 mt-2">
  93.                 </div>
  94.                 <!-- STORY -->
  95.                 <div class="m-1 text-justify">
  96.                     <h3 class="text-secondary font-weight-light"><i class="fas fa-book"></i> Story</h3>
  97.                    
  98.                     <p class="text-primary text-right mb-1" style="font-size: 16px;">HEADER</p><hr class="bg-primary m-0">
  99.                     <p class="mx-2">Write about their backstory. 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>
  100.                    
  101.                     <p class="text-primary text-right mb-1" style="font-size: 16px;">HEADER</p><hr class="bg-primary m-0">
  102.                     <p class="mx-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>
  103.                    
  104.                     <p class="text-primary text-right mb-1" style="font-size: 16px;">HEADER</p><hr class="bg-primary m-0">
  105.                     <p class="mx-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>
  106.                     <hr class="m-0 mt-2">
  107.                 </div>
  108.             </div>
  109.         </div>
  110.         <!-- LINKS -->
  111.         <div class="col-lg-6 m-0 p-0">
  112.             <div class="card p-1 m-1" style="height: 424px; overflow: auto;">
  113.                 <!-- PERSON 1 -->
  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">NAME1</a> . relationship</p>
  116.                     <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>
  117.                     <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>
  118.                 </div>
  119.                 <!-- PERSON 2 -->
  120.                 <div class="card bg-faded p-3 m-1 border-0">
  121.                     <p class="m-0 text-secondary"><a href="LINK" class="btn btn-primary p-1">NAME2</a> . relationship</p>
  122.                     <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>
  123.                 </div>
  124.                 <!-- PERSON 3 -->
  125.                 <div class="card bg-faded p-3 m-1 border-0">
  126.                     <p class="m-0 text-secondary"><a href="LINK" class="btn btn-primary p-1">NAME3</a> . relationship</p>
  127.                     <p class="m-0">Vestibulum laoreet mattis turpis, a facilisis lacus ullamcorper in.</p>
  128.                 </div>
  129.                 <!-- PERSON 4 -->
  130.                 <div class="card bg-faded p-3 m-1 border-0">
  131.                     <p class="m-0 text-secondary"><a href="LINK" class="btn btn-primary p-1">NAME4</a> . relationship</p>
  132.                     <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>
  133.                 </div>
  134.             </div>
  135.         </div>
  136.         <!-- TRIVIA -->
  137.         <div class="col-lg-6 m-0 p-0">
  138.             <!-- TRIVIA -->
  139.             <div class="card p-2 m-1" style="height: 200px; overflow: auto;">
  140.                 <div class="m-1 text-justify">
  141.                     <h3 class="text-secondary font-weight-light"><i class="fas fa-star"></i> Trivia</h3>
  142.                    
  143.                     <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>
  144.                     <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>
  145.                     <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>
  146.                     <p class="m-1"><i class="far fa-star"></i> Suspendisse sagittis libero in rutrum varius. Pellentesque aliquam lacus at quam mollis luctus.</p>
  147.                 </div>
  148.             </div>
  149.             <!-- PREFERENCES -->
  150.             <div class="card p-2 m-1 mt-2" style="height: 216px; overflow: auto;">
  151.                 <div class="m-1 text-justify">
  152.                     <h3 class="text-secondary font-weight-light"><i class="fas fa-abacus"></i> Preferences</h3>
  153.                     <!-- LIKES -->
  154.                     <p class="text-success text-right mb-1" style="font-size: 16px;">LIKES</p><hr class="bg-success m-0">
  155.                     <ul>
  156.                         <li>INFO</li>
  157.                         <li>INFO</li>
  158.                         <li>INFO</li>
  159.                     </ul>
  160.                     <!-- DISLIKES -->
  161.                     <p class="text-danger text-right mb-1" style="font-size: 16px;">DISLIKES</p><hr class="bg-danger m-0">
  162.                     <ul>
  163.                         <li>INFO</li>
  164.                         <li>INFO</li>
  165.                         <li>INFO</li>
  166.                     </ul>
  167.                 </div>
  168.             </div>
  169.         </div>
  170.     </div>
  171.     <!-- CREDIT, DON'T MOVE -->
  172.     <div class="text-center m-0">
  173.         <a data-toggle="tooltip" title="Code by SparklyCodes" href="/SparklyCodes"><i class="fas fa-code"></i></a>
  174.     </div>
  175. </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!