API tools faq
paste
Advertisement
TheDemonicArtist

Capsule-Mon Code

TheDemonicArtist
Feb 26th, 2022 (edited)
162
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 18.09 KB | None | 0 0
raw download clone embed print report
  1. <div class="mx-auto text-muted my-3" style="max-width: 900px; font-size: 12px;letter-spacing: .6px;">
  2.    <div class="row no-gutters">
  3.       <!----- COLUMN 1 START ----->
  4.       <div class="col-md-3 p-1 flex-column">
  5.          <!-- image start -->
  6.          <div class="card rounded bg-primary border-0 mb-2" style="height: 200px;
  7.            background: url(URL HERE) center no-repeat;
  8.            background-size: cover;">
  9.          </div>
  10.          <!-- image end -->
  11.          <!-- info start --->
  12.          <div class="card rounded bg-faded border-0 p-1 flex-grow-1">
  13.             <div class="p-1 my-auto">
  14.                
  15.                <div class="d-flex justify-content-between">
  16.                   <span><b>Slot Number</b></span>
  17.                   <span class="pull-right">Name [#]</span>
  18.                </div>
  19.                <hr class="mt-1 mb-2">
  20.                <div class="d-flex justify-content-between">
  21.                   <span><b>Species</b></span>
  22.                   <span class="pull-right">Content</span>
  23.                </div>
  24.                <hr class="mt-1 mb-2">
  25.                <div class="d-flex justify-content-between">
  26.                   <span><b>Typing</b></span>
  27.                   <span class="pull-right">Content</span>
  28.                </div>
  29.                <hr class="mt-1 mb-2">
  30.                <div class="d-flex justify-content-between">
  31.                   <span><b>Gender</b></span>
  32.                   <span class="pull-right">Content</span>
  33.                </div>
  34.                <hr class="mt-1 mb-2">
  35.                <div class="d-flex justify-content-between">
  36.                   <span><b>Height</b></span>
  37.                   <span class="pull-right">Content</span>
  38.                </div>
  39.                <hr class="mt-1 mb-2">
  40.                <div class="d-flex justify-content-between">
  41.                   <span><b>Trainer</b></span>
  42.                   <span class="pull-right"><a href="URL">Content</a></span>
  43.                </div>
  44.                <hr class="mt-1 mb-2">
  45.                <div class="d-flex justify-content-between">
  46.                   <span><b>Ability</b></span>
  47.                   <span class="pull-right">Content</span>
  48.                </div>
  49.                <hr class="mt-1 mb-2">
  50.                <div class="d-flex justify-content-between">
  51.                   <span><b>Traits</b></span>
  52.                   <span class="pull-right">Content</span>
  53.                </div>
  54.                <hr class="mt-1 mb-2">
  55.                <div class="d-flex justify-content-between">
  56.                   <span><b>Level</b></span>
  57.                   <span class="pull-right">1</span>
  58.                </div>
  59.                <hr class="mt-1 mb-2">
  60.                <div class="d-flex justify-content-between">
  61.                   <span><b>Prestige Rank</b></span>
  62.                   <span class="pull-right">0</span>
  63.                </div>
  64.                <hr class="mt-1 mb-2">
  65.                <div class="d-flex justify-content-between">
  66.                   <span><b>Approval type</b></span>
  67.                   <span class="pull-right">Content</span>
  68.                </div>
  69.                <hr class="mt-1 mb-2">
  70.                <div class="d-flex justify-content-between">
  71.                   <span><b>Designer</b></span>
  72.                   <span class="pull-right"><a href="URL">Username</a></span>
  73.                </div>
  74.                <hr class="mt-1 mb-2">
  75.                <div class="d-flex justify-content-between">
  76.                   <span><b>Owner</b></span>
  77.                   <span class="pull-right"><a href="URL">Username</a></span>
  78.                </div>
  79.                <hr class="mt-1 mb-2">
  80.  
  81.                <!-- add more above this line -->
  82.             </div>
  83.          </div>
  84.       </div>
  85.       <!-- info end -->
  86.       <!----- COLUMN 1 END----->
  87.       <!----- COLUMN 2 START ----->
  88.       <div class=" col-md-9 flex-column">
  89.         <div class="row no-gutters">
  90.         <div class="col-md-4 flex-grow-1">
  91.           <div class="row no-gutters">
  92.         <!-- App --------------->
  93.          <div class="col-md-12 col-4 p-1">
  94.             <div class="card bg-faded border-0 p-2">
  95.                <div class="text-center">
  96.                   <p style="font-size: 15px;font-weight: 600;"><a href="URL"> Visual Ref </a></p>
  97.                </div>
  98.             </div>
  99.          </div>
  100.        
  101.          <!-- Obtainment --------------->
  102.          <div class="col-md-12 col-4 p-1">
  103.             <div class="card bg-faded border-0 p-2">
  104.                <div class="text-center">
  105.                   <p style="font-size: 15px;font-weight: 600;"><a href="URL"> Date Obtained</a></p>
  106.                </div>
  107.             </div>
  108.          </div>
  109.          
  110.          <!-- Approval --------------->
  111.          <div class="col-md-12 col-4 p-1">
  112.             <div class="card bg-faded border-0 p-2">
  113.                <div class="text-center">
  114.                   <p style="font-size: 15px;font-weight: 600;"><a href="URL"> Approval</a></p>
  115.                </div>
  116.             </div>
  117.          </div>
  118. </div>
  119.          </div>
  120.          
  121.          <div class="col-md-8 p-1">
  122.          <!-- Name start -->
  123.          <div class="card rounded h-100 border-0 bg-primary">
  124.                      <h1 class="col-auto text-uppercase text-center text-white m-auto p-5" style=" letter-spacing: 1px;">
  125.                         Name
  126.                      </h1>
  127.            
  128.          </div>
  129.          <!-- Name end -->
  130.          </div>
  131.  
  132.          <!-- --------------------------->
  133.          <!-- ABOUT -->
  134.          <div class="col-md-12 p-1">
  135.             <div class="h-100 card bg-faded rounded border-0 p-1">
  136.                <div class="p-1">
  137.                   <div class="row no-gutters text-primary">
  138.                      <div class="col mx-2 my-auto">
  139.                         <hr class="my-0">
  140.                      </div>
  141.                      <h2 class="col-auto text-uppercase" style="letter-spacing: 1px;">
  142.                         About
  143.                      </h2>
  144.                      <div class="col mx-2 my-auto">
  145.                         <hr class="my-0">
  146.                      </div>
  147.                   </div>
  148.                   <div class="p-1" style="overflow-y: auto; height: 125px;">
  149.                      <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam maximus diam interdum finibus ultricies. Aenean quis urna varius nibh mattis accumsan a at eros. Nam et odio gravida, suscipit massa vestibulum, suscipit lacus. Cras posuere dolor ac massa pretium gravida. Sed id dolor enim. Quisque imperdiet varius nisi nec facilisis. Aenean vel tellus sed magna laoreet ullamcorper. Donec laoreet a neque eget sodales.</p>
  150.                      <!-- Add more text above this line -->
  151.                   </div>
  152.                </div>
  153.             </div>
  154.          </div>
  155.          <!-- --------------------------->
  156.          <!-- Likes -->
  157.          <div class="col-md-6 p-1">
  158.             <div class="h-100 card bg-faded rounded border-0 p-1">
  159.                <div class="p-1">
  160.                   <div class="row no-gutters text-primary">
  161.                      <div class="col mx-2 my-auto">
  162.                         <hr class="my-0">
  163.                      </div>
  164.                      <h2 class="col-auto text-uppercase" style="letter-spacing: 1px;">
  165.                         Likes
  166.                      </h2>
  167.                      <div class="col mx-2 my-auto">
  168.                         <hr class="my-0">
  169.                      </div>
  170.                   </div>
  171.                   <div class="p-1">
  172.                      <ul class="mb-md-0" style="overflow-y: auto; height: 95px; padding-left: 20px;">
  173.                         <li>Content</li>
  174.                         <li>Content</li>
  175.                         <li>Content</li>
  176.                         <li>Content</li>
  177.                         <!-- Add more above this line -->
  178.                      </ul>
  179.                   </div>
  180.                </div>
  181.             </div>
  182.          </div>
  183.          <!-- --------------------------->
  184.          <!-- Dislikes -->
  185.          <div class="col-md-6 p-1">
  186.             <div class="h-100 card bg-faded rounded border-0 p-1">
  187.                <div class="p-1">
  188.                   <div class="row no-gutters text-primary">
  189.                      <div class="col mx-2 my-auto">
  190.                         <hr class="my-0">
  191.                      </div>
  192.                      <h2 class="col-auto text-uppercase" style="letter-spacing: 1px;">
  193.                         Dislikes
  194.                      </h2>
  195.                      <div class="col mx-2 my-auto">
  196.                         <hr class="my-0">
  197.                      </div>
  198.                   </div>
  199.                   <div class="p-1">
  200.                      <ul class="mb-md-0" style="overflow-y: auto; height: 95px; padding-left: 20px;">
  201.                        <li>Content</li>
  202.                         <li>Content</li>
  203.                         <li>Content</li>
  204.                         <li>Content</li>
  205.                         <!-- Add more above this line -->
  206.                      </ul>
  207.                   </div>
  208.                </div>
  209.             </div>
  210.          </div>
  211.          <!-- --------------------------->
  212.          <!-- Headcanons -->
  213.          <div class="col-md-12 p-1">
  214.             <div class="h-100 card bg-faded rounded border-0 p-1">
  215.                <div class="p-1">
  216.                   <div class="row no-gutters text-primary">
  217.                      <div class="col mx-2 my-auto">
  218.                         <hr class="my-0">
  219.                      </div>
  220.                      <h2 class="col-auto text-uppercase" style="letter-spacing: 1px;">
  221.                         Headcanons
  222.                      </h2>
  223.                      <div class="col mx-2 my-auto">
  224.                         <hr class="my-0">
  225.                      </div>
  226.                   </div>
  227.                   <div class="p-1">
  228.                      <ul class="my-1 mb-2 mb-md-0" style="overflow-y: auto; height: 95px; padding-left: 20px;">
  229.                         <li>Content</li>
  230.                         <li>Content</li>
  231.                         <li>Content</li>
  232.                         <li>Content</li>
  233.                         <!-- Add more headcanons above this line -->
  234.                      </ul>
  235.                   </div>
  236.                </div>
  237.             </div>
  238.          </div>
  239.          <!-- --------------------------->
  240.       </div>
  241.    </div>
  242.    <!----- COLUMN 2 END ----->
  243.    </div>
  244.    <!----------------- FOKIN TABS M8 ---------------------------------------------------->
  245. <div class="row no-gutters">
  246.    <div class="col-md-4">
  247.       <!----------------- NAVIGATION BUTTONS ---------------------------------------------------->
  248.       <ul class="nav nav-justified row no-gutters">
  249.          <li class="nav-item col-md-12 col-4 p-1">
  250.             <a class="nav-link tabs active text-muted p-3 rounded border-0 btn bg-faded " style="font-size: 15px;font-weight: 600;" data-toggle="tab" href="#ONE">
  251.             Levels Log</a>
  252.          </li>
  253.          <li class="nav-item col-md-12 col-4 p-1">
  254.             <a class="nav-link tabs btn text-muted p-3 rounded border-0 bg-faded" style="font-size: 15px;font-weight: 600;" data-toggle="tab" href="#TWO">
  255.             Items Log</a>
  256.          </li>
  257.          <li class="nav-item col-md-12 col-4 p-1">
  258.             <a class="nav-link tabs btn text-muted p-3 rounded border-0 bg-faded " style="font-size: 15px;font-weight: 600;" data-toggle="tab" href="#THREE">
  259.             Evolution Log</a>
  260.          </li>
  261.  
  262.       </ul>
  263.    </div>
  264.    <div class="col-md-8 p-1">
  265.       <div class="h-100 card bg-faded rounded border-0 p-1">
  266.          <!------------------------------- SECTION ONE -- LEVEL LOG --------------------------------->
  267.          <div class="tab-content">
  268.             <div class="tab-pane fade in active show" id="ONE">
  269.                <div class="p-1">
  270.                   <!-- Inside Content ------------>
  271.                   <div class="row no-gutters text-primary">
  272.                      <div class="col mx-2 my-auto">
  273.                         <hr class="my-0">
  274.                      </div>
  275.                      <h2 class="col-auto text-uppercase" style="letter-spacing: 1px;">
  276.                         Levels Log
  277.                      </h2>
  278.                      <div class="col mx-2 my-auto">
  279.                         <hr class="my-0">
  280.                      </div>
  281.                   </div>
  282.                   <div style="overflow-y: auto; height: 122px; ">
  283.                      <table class="table table-sm table-striped border-0 mb-0">
  284.                         <!-- Row Start ----->
  285.                         <tr class="row no-gutters text-center py-1">
  286.                            <td class="col-4">Content</td>
  287.                            <td class="col-2 text-center"><a href="#"><i class="fas fa-image" style="font-size: 1.5em;"></i></a></td>
  288.                            <td class="col-4"><a href="#">Approval</a></td>
  289.                            <td class="col-2">+0</td>
  290.                         </tr>
  291.                         <!-- end row -->
  292.                         <!-- Row Start ----->
  293.                         <tr class="row no-gutters text-center py-1">
  294.                            <td class="col-4">Content</td>
  295.                            <td class="col-2 text-center"><a href="#"><i class="fas fa-image" style="font-size: 1.5em;"></i></a></td>
  296.                            <td class="col-4"><a href="#">Approval</a></td>
  297.                            <td class="col-2">+0</td>
  298.                         </tr>
  299.                         <!-- end row -->
  300.                         <!-- Row Start ----->
  301.                         <tr class="row no-gutters text-center py-1">
  302.                            <td class="col-4">Content</td>
  303.                            <td class="col-2 text-center"><a href="#"><i class="fas fa-image" style="font-size: 1.5em;"></i></a></td>
  304.                            <td class="col-4"><a href="#">Approval</a></td>
  305.                            <td class="col-2">+0</td>
  306.                         </tr>
  307.                         <!-- end row -->
  308.                   </div>
  309.                </div>
  310.             </div>
  311.             <!-- --------------------------->
  312.             </table>
  313.          </div>
  314.       </div>
  315.    </div>
  316.    <!-- --------------------------->
  317.    <!------------------------------- SECTION TWO -- ITEM LOG --------------------------------->
  318.    <div class="tab-pane fade" id="TWO">
  319.       <div class="p-1">
  320.          <!-- Inside Content ------------>
  321.          <div class="row no-gutters text-primary">
  322.             <div class="col mx-2 my-auto">
  323.                <hr class="my-0">
  324.             </div>
  325.             <h2 class="col-auto text-uppercase" style="letter-spacing: 1px;">
  326.                Items Log
  327.             </h2>
  328.             <div class="col mx-2 my-auto">
  329.                <hr class="my-0">
  330.             </div>
  331.          </div>
  332.          <div style="overflow-y: auto; height: 122px; ">
  333.             <table class="table table-striped border-0 mb-0">
  334.                <!-- Row Start ----->
  335.             <tr class="row no-gutters text-center py-1">
  336.                <td class="col-4">Item</td>
  337.                <td class="col-4 text-center"><a href="#"><i class="fas fa-comment-alt-dollar" style="font-size: 1.5em;"></i></a></td>
  338.                <td class="col-4"><a href="#">Approval</a></td>
  339.             </tr>
  340.             <!-- end row -->
  341.                <!-- Row Start ----->
  342.             <tr class="row no-gutters text-center py-1">
  343.                <td class="col-4">Item</td>
  344.                <td class="col-4 text-center"><a href="#"><i class="fas fa-comment-alt-dollar" style="font-size: 1.5em;"></i></a></td>
  345.                <td class="col-4"><a href="#">Approval</a></td>
  346.             </tr>
  347.             <!-- end row -->
  348.                <!-- Row Start ----->
  349.             <tr class="row no-gutters text-center py-1">
  350.                <td class="col-4">Item</td>
  351.                <td class="col-4 text-center"><a href="#"><i class="fas fa-comment-alt-dollar" style="font-size: 1.5em;"></i></a></td>
  352.                <td class="col-4"><a href="#">Approval</a></td>
  353.             </tr>
  354.             <!-- end row -->
  355.          </div>
  356.       </div>
  357.    </div>
  358.    <!-- --------------------------->
  359.    </table>
  360. </div>
  361. </div>
  362. </div>
  363. <!-- --------------------------->
  364. <!------------------------------- SECTION THREE -- EVOLUTION LONG --------------------------------->
  365. <div class="tab-pane fade" id="THREE">
  366.    <div class="p-1">
  367.       <!-- Inside Content ------------>
  368.       <div class="row no-gutters text-primary">
  369.          <div class="col mx-2 my-auto">
  370.             <hr class="my-0">
  371.          </div>
  372.          <h2 class="col-auto text-uppercase" style="letter-spacing: 1px;">Evolution Log</h2>
  373.          <div class="col mx-2 my-auto">
  374.             <hr class="my-0">
  375.          </div>
  376.       </div>
  377.       <div style="overflow-y: auto; height: 122px; ">
  378.          <table class="table table-striped border-0 mb-0">
  379.             <!-- Row Start ----->
  380.             <tr class="row no-gutters text-center py-1">
  381.                <td class="col-4">Content</td>
  382.                <td class="col-4 text-center"><a href="#"><i class="fas fa-image" style="font-size: 1.5em;"></i></a></td>
  383.                <td class="col-4"><a href="#">Approval</a></td>
  384.             </tr>
  385.             <!-- end row -->
  386.             <!-- Row Start ----->
  387.             <tr class="row no-gutters text-center py-1">
  388.                <td class="col-4">Content</td>
  389.                <td class="col-4 text-center"><a href="#"><i class="fas fa-image" style="font-size: 1.5em;"></i></a></td>
  390.                <td class="col-4"><a href="#">Approval</a></td>
  391.             </tr>
  392.             <!-- end row -->
  393.             <!-- Row Start ----->
  394.             <tr class="row no-gutters text-center py-1">
  395.                <td class="col-4">Content</td>
  396.                <td class="col-4 text-center"><a href="#"><i class="fas fa-image" style="font-size: 1.5em;"></i></a></td>
  397.                <td class="col-4"><a href="#">Approval</a></td>
  398.             </tr>
  399.             <!-- end row -->
  400.       </div>
  401.    </div>
  402. </div>
  403. <!-- --------------------------->
  404. </table>
  405. </div>
  406. </div>
  407. </div>
  408. <!-- --------------------------->
  409. </div>
  410. </div>
  411. </div>
  412. </div>
  413. <!-- END TABS --------------------------->
  414.   <p class="text-right small mt-1 px-1">HTML by @TheDemonicArtist</p>
  415. </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!