API tools faq
paste
Advertisement
MCDogWarrior

Design Preferences [Bootstrap]

MCDogWarrior
Jun 14th, 2022
1,411
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.86 KB | None | 0 0
raw download clone embed print report
  1. <!-------
  2. Colors (Ctrl+F):
  3. Favorites:#3ddb87 / Likes:#b6ed80 / Depends:#f5b776 / Dislikes:#cc553d
  4.  
  5. If you want to remove the "small note", delete the data-placement="" and title="", and everything within the quotes
  6. To bold text, write it like <b>Content</b>
  7. --------->
  8.  
  9.  
  10.  
  11. <!---- (Optional removal of additional page features, does not div off entirely)
  12. <div class="card w-100 border-0" style="position:absolute; top:-10px; left:0px; position:absolute; top:0px; left:0px"> ---->
  13.  
  14.  
  15. <div class="container mt-5 mb-3" style="width:1200px;">
  16. <!---- Key ---->
  17.      <div class="card rounded-0 border-0 bg-faded mb-4 mx-auto p-1" style="height:55px; border-radius:40px; width:350px;">
  18.        <p class="text-white" style="font-size:20px; text-align:center; margin-top:-18px">KEY</p>
  19.        <p style="font-size:15px; margin-top:-15px; text-align:center">
  20.        <span style="color:#3ddb87"><i class="fa-solid fa-circle-heart"></i> Favorites</span> / <span style="color:#b6ed80"><i class="fa-solid fa-circle-check"></i> Likes</span> / <span style="color:#f5b776"><i class="fa-solid fa-circle-question"></i> Depends</span> / <span style="color:#cc553d"><i class="fa-solid fa-circle-xmark"></i> Dislikes</span><br>
  21.        </p>
  22.        <p class="text-white" style="font-size:12px; text-align:center; margin-top:-10px; opacity:.6">Hover over the icons, they have extra info!</p>
  23.    </div>
  24.  
  25.  <div class="row no-gutters">
  26.  
  27. <!--- General Species --->
  28.   <div class="col-4 p-1">
  29.    <div class="card rounded-0 border-0 border-0 bg-primary" style="height:55px; border-top-left-radius:40px;">
  30.  <!-- Header + Description -->
  31.    <p class="text-white" style="font-size:35px; text-align:center; font-variant:small-caps; margin-top:-5px">General Species</p>
  32.    <p class="text-white" style="font-size:14px; text-align:center; margin-top:-28px">Real world species or vague species</p>
  33.    </div>
  34.     <div class="card rounded-0 card-outline-primary p-2" style="background-color:rgba(0,0,0,0.3); border-width:4px; height:400px; overflow:auto">
  35.     <div style="font-size:16px">
  36.  <!-- Favorites -->
  37.      <span style="color:#3ddb87"><i class="fa-solid fa-circle-heart tooltipster" data-placement="right" title="small note of clarification"></i> Content</span><br>
  38.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  39.  <!-- Likes -->
  40.     <span style="color:#b6ed80"><i class="fa-solid fa-circle-check tooltipster" data-placement="right" title="small note"></i> Content</span><br>
  41.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  42.  <!-- Depends (or meh) -->
  43.      <span style="color:#f5b776"><i class="fa-solid fa-circle-question tooltipster" data-placement="right" title="small note"></i> Content</span><br>
  44.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  45.  <!-- Dislikes -->
  46.     <span style="color:#cc553d"><i class="fa-solid fa-circle-xmark tooltipster" data-placement="right" title="small note"></i> Content</span><br>
  47.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  48.     </div>
  49.     </div>
  50.    </div>
  51.    
  52. <!--- Original Species --->
  53.    <div class="col-4 p-1">
  54.    <div class="card rounded-0 border-0 bg-primary" style="height:55px">
  55.  <!-- Header + Description -->
  56.    <p class="text-white" style="font-size:35px; text-align:center; font-variant:small-caps; margin-top:-5px">Original Species</p>
  57.    <p class="text-white" style="font-size:14px; text-align:center; margin-top:-28px">Fictional species created by artists</p>
  58.    </div>
  59.     <div class="card rounded-0 card-outline-primary p-2" style="background-color:rgba(0,0,0,0.3); border-width:4px; height:400px; overflow:auto">
  60.     <div style="font-size:16px">
  61.  <!-- Favorites -->
  62.      <span style="color:#3ddb87"><i class="fa-solid fa-circle-heart tooltipster" data-placement="right" title="small note"></i> <a href="link" style="color:#3ddb87">Content</a></span><br>
  63.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  64.  <!-- Likes -->
  65.     <span style="color:#b6ed80"><i class="fa-solid fa-circle-check tooltipster" data-placement="right" title="small note"></i> <a href="link" style="color:#b6ed80">Content</a></span><br>
  66.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  67.  <!-- Depends -->
  68.      <span style="color:#f5b776"><i class="fa-solid fa-circle-question tooltipster" data-placement="right" title="small note"></i> <a href="link" style="color:#f5b776">Content</a></span><br>
  69.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  70.  <!-- Dislikes -->
  71.     <span style="color:#cc553d"><i class="fa-solid fa-circle-xmark tooltipster" data-placement="right" title="small note"></i> <a href="link" style="color:#cc553d">Content</a></span><br>
  72.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  73.     </div>
  74.     </div>
  75.    </div>
  76.  
  77. <!--- Designers --->
  78.    <div class="col-4 p-1">
  79.    <div class="card rounded-0 border-0 bg-primary" style="height:55px; border-top-right-radius:40px;">
  80.  <!-- Header + Description -->
  81.    <p class="text-white" style="font-size:35px; text-align:center; font-variant:small-caps; margin-top:-5px">Designers</p>
  82.    <p class="text-white" style="font-size:14px; text-align:center; margin-top:-28px">*Not a requirement, just my preferences</p>
  83.    </div>
  84.     <div class="card rounded-0 card-outline-primary p-2" style="background-color:rgba(0,0,0,0.3); border-width:4px; height:400px; overflow:auto">
  85.     <div style="font-size:16px">
  86.  <!-- Favorites -->
  87.      <span style="color:#3ddb87"><i class="fa-solid fa-circle-heart tooltipster" data-placement="right" title="small note"></i> <a href="link" style="color:#3ddb87">Content</a></span><br>
  88.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  89.  <!-- Likes -->
  90.     <span style="color:#b6ed80"><i class="fa-solid fa-circle-check tooltipster" data-placement="right" title="small note"></i> <a href="link" style="color:#b6ed80">Content</a></span><br>
  91.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  92.  <!-- Depends -->
  93.      <span style="color:#f5b776"><i class="fa-solid fa-circle-question tooltipster" data-placement="right" title="small note"></i> <a href="link" style="color:#f5b776">Content</a></span><br>
  94.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  95.  <!-- Dislikes -->
  96.     <span style="color:#cc553d"><i class="fa-solid fa-circle-xmark tooltipster" data-placement="right" title="small note"></i> <a href="link" style="color:#cc553d">Content</a></span><br>
  97.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  98.     </div>
  99.     </div>
  100.    </div>
  101.  
  102. <!--- Colors --->
  103.    <div class="col-4 p-1">
  104.    <div class="card rounded-0 border-0 bg-primary" style="height:55px">
  105.  <!-- Header + Description -->
  106.    <p class="text-white" style="font-size:35px; text-align:center; font-variant:small-caps; margin-top:-5px">Colors/Palettes</p>
  107.    <p class="text-white" style="font-size:14px; text-align:center; margin-top:-28px">Individual colors or combos</p>
  108.    </div>
  109.     <div class="card rounded-0 card-outline-primary p-2" style="background-color:rgba(0,0,0,0.3); border-width:4px; height:400px; overflow:auto">
  110.     <div style="font-size:16px">
  111.  <!-- Favorites -->
  112.      <span style="color:#3ddb87"><i class="fa-solid fa-circle-heart tooltipster" data-placement="right" title="small note"></i> Content</span><br>
  113.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  114.  <!-- Likes -->
  115.     <span style="color:#b6ed80"><i class="fa-solid fa-circle-check tooltipster" data-placement="right" title="small note"></i> Content</span><br>
  116.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  117.  <!-- Depends -->
  118.      <span style="color:#f5b776"><i class="fa-solid fa-circle-question tooltipster" data-placement="right" title="small note"></i> Content</span><br>
  119.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  120.  <!-- Dislikes -->
  121.     <span style="color:#cc553d"><i class="fa-solid fa-circle-xmark tooltipster" data-placement="right" title="small note"></i> Content</span><br>
  122.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  123.     </div>
  124.     </div>
  125.    </div>
  126.  
  127. <!--- Aesthetics --->
  128.    <div class="col-4 p-1">
  129.    <div class="card rounded-0 border-0 bg-primary" style="height:55px">
  130.  <!-- Header + Description -->
  131.    <p class="text-white" style="font-size:35px; text-align:center; font-variant:small-caps; margin-top:-5px">Themes/Aesthetics</p>
  132.    <p class="text-white" style="font-size:14px; text-align:center; margin-top:-28px">General themes for designs</p>
  133.    </div>
  134.     <div class="card rounded-0 card-outline-primary p-2" style="background-color:rgba(0,0,0,0.3); border-width:4px; height:400px; overflow:auto">
  135.     <div style="font-size:16px">
  136.  <!-- Favorites -->
  137.      <span style="color:#3ddb87"><i class="fa-solid fa-circle-heart tooltipster" data-placement="right" title="small note"></i> Content</span><br>
  138.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  139.  <!-- Likes -->
  140.     <span style="color:#b6ed80"><i class="fa-solid fa-circle-check tooltipster" data-placement="right" title="small note"></i> Content</span><br>
  141.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  142.  <!-- Depends -->
  143.      <span style="color:#f5b776"><i class="fa-solid fa-circle-question tooltipster" data-placement="right" title="small note"></i> Content</span><br>
  144.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  145.  <!-- Dislikes -->
  146.     <span style="color:#cc553d"><i class="fa-solid fa-circle-xmark tooltipster" data-placement="right" title="small note"></i> Content</span><br>
  147.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  148.     </div>
  149.     </div>
  150.    </div>
  151.  
  152. <!--- Media --->
  153.    <div class="col-4 p-1">
  154.    <div class="card rounded-0 border-0 bg-primary" style="height:55px">
  155.  <!-- Header + Description -->
  156.    <p class="text-white" style="font-size:35px; text-align:center; font-variant:small-caps; margin-top:-5px">Media Themes</p>
  157.    <p class="text-white" style="font-size:14px; text-align:center; margin-top:-28px">Fandom (TV, book, game, etc) inspiration</p>
  158.    </div>
  159.     <div class="card rounded-0 card-outline-primary p-2" style="background-color:rgba(0,0,0,0.3); border-width:4px; height:400px; overflow:auto">
  160.     <div style="font-size:16px">
  161.  <!-- Favorites -->
  162.      <span style="color:#3ddb87"><i class="fa-solid fa-circle-heart tooltipster" data-placement="right" title="small note"></i> <a href="link" style="color:#3ddb87">Content</a></span><br>
  163.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  164.  <!-- Likes -->
  165.     <span style="color:#b6ed80"><i class="fa-solid fa-circle-check tooltipster" data-placement="right" title="small note"></i> <a href="link" style="color:#b6ed80">Content</a></span><br>
  166.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  167.  <!-- Depends -->
  168.      <span style="color:#f5b776"><i class="fa-solid fa-circle-question tooltipster" data-placement="right" title="small note"></i> <a href="link" style="color:#f5b776">Content</a></span><br>
  169.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  170.  <!-- Dislikes -->
  171.     <span style="color:#cc553d"><i class="fa-solid fa-circle-xmark tooltipster" data-placement="right" title="small note"></i> <a href="link" style="color:#cc553d">Content</a></span><br>
  172.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  173.     </div>
  174.     </div>
  175.    </div>
  176.  
  177. <!--- Abilities --->
  178.    <div class="col-4 p-1">
  179.    <div class="card rounded-0 border-0 bg-primary" style="height:55px">
  180.  <!-- Header + Description -->
  181.    <p class="text-white" style="font-size:35px; text-align:center; font-variant:small-caps; margin-top:-5px">Abilities</p>
  182.    <p class="text-white" style="font-size:14px; text-align:center; margin-top:-28px">Powers or supernatural traits</p>
  183.    </div>
  184.     <div class="card rounded-0 card-outline-primary p-2" style="background-color:rgba(0,0,0,0.3); border-width:4px; height:400px; overflow:auto; border-bottom-left-radius:40px;">
  185.     <div style="font-size:16px">
  186.  <!-- Favorites -->
  187.      <span style="color:#3ddb87"><i class="fa-solid fa-circle-heart tooltipster" data-placement="right" title="small note"></i> Content</span><br>
  188.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  189.  <!-- Likes -->
  190.     <span style="color:#b6ed80"><i class="fa-solid fa-circle-check tooltipster" data-placement="right" title="small note"></i> Content</span><br>
  191.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  192.  <!-- Depends -->
  193.      <span style="color:#f5b776"><i class="fa-solid fa-circle-question tooltipster" data-placement="right" title="small note"></i> Content</span><br>
  194.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  195.  <!-- Dislikes -->
  196.     <span style="color:#cc553d"><i class="fa-solid fa-circle-xmark tooltipster" data-placement="right" title="small note"></i> Content</span><br>
  197.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  198.     </div>
  199.     </div>
  200.    </div>
  201.  
  202. <!--- Traits --->
  203.    <div class="col-4 p-1">
  204.    <div class="card rounded-0 border-0 bg-primary" style="height:55px">
  205.  <!-- Header + Description -->
  206.    <p class="text-white" style="font-size:35px; text-align:center; font-variant:small-caps; margin-top:-5px">Physical traits</p>
  207.    <p class="text-white" style="font-size:14px; text-align:center; margin-top:-28px">Traits that make up a character's appearance</p>
  208.    </div>
  209.     <div class="card rounded-0 card-outline-primary p-2" style="background-color:rgba(0,0,0,0.3); border-width:4px; height:400px; overflow:auto">
  210.     <div style="font-size:16px">
  211.  <!-- Favorites -->
  212.      <span style="color:#3ddb87"><i class="fa-solid fa-circle-heart tooltipster" data-placement="right" title="small note"></i> Content</span><br>
  213.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  214.  <!-- Likes -->
  215.     <span style="color:#b6ed80"><i class="fa-solid fa-circle-check tooltipster" data-placement="right" title="small note"></i> Content</span><br>
  216.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  217.  <!-- Depends -->
  218.      <span style="color:#f5b776"><i class="fa-solid fa-circle-question tooltipster" data-placement="right" title="small note"></i> Content</span><br>
  219.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  220.  <!-- Dislikes -->
  221.     <span style="color:#cc553d"><i class="fa-solid fa-circle-xmark tooltipster" data-placement="right" title="small note"></i> Content</span><br>
  222.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  223.     </div>
  224.     </div>
  225.    </div>
  226.  
  227. <!--- Other --->
  228.    <div class="col-4 p-1">
  229.    <div class="card rounded-0 border-0 bg-primary" style="height:55px">
  230.  <!-- Header + Description -->
  231.    <p class="text-white" style="font-size:35px; text-align:center; font-variant:small-caps; margin-top:-5px">Et Cetera</p>
  232.    <p class="text-white" style="font-size:14px; text-align:center; margin-top:-28px">Other features</p>
  233.    </div>
  234.     <div class="card rounded-0 card-outline-primary p-2" style="background-color:rgba(0,0,0,0.3); border-width:4px; height:400px; overflow:auto; border-bottom-right-radius:40px;">
  235.     <div style="font-size:16px">
  236.  <!-- Favorites -->
  237.      <span style="color:#3ddb87"><i class="fa-solid fa-circle-heart tooltipster" data-placement="right" title="small note"></i> Content</span><br>
  238.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  239.  <!-- Likes -->
  240.     <span style="color:#b6ed80"><i class="fa-solid fa-circle-check tooltipster" data-placement="right" title="small note"></i> Content</span><br>
  241.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  242.  <!-- Depends -->
  243.      <span style="color:#f5b776"><i class="fa-solid fa-circle-question tooltipster" data-placement="right" title="small note"></i> Content</span><br>
  244.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  245.  <!-- Dislikes -->
  246.     <span style="color:#cc553d"><i class="fa-solid fa-circle-xmark tooltipster" data-placement="right" title="small note"></i> Content</span><br>
  247.        <div class="mx-auto w-100" style="border-top:1px solid #999; opacity:.2;"></div>
  248.     </div>
  249.    </div>
  250.   </div>
  251.  </div>
  252. <!-- Code credit (do not remove/alter) -->
  253. <p style="font-size:13px; text-align:center"><a style="color:#c4415d;" href="https://toyhou.se/MCDogResource"><i class="fas fa-bullseye"></i> Code by maniCARNY</a></p>
  254. </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!