API tools faq
paste
Jade-Everstone

Sort By... (folder code)

Jade-Everstone
Mar 20th, 2021 (edited)
373
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 40.78 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2.  
  3. <!--
  4.  
  5. You may
  6. -frankenstein with other codes (as long as the creator of said code allows it)
  7. -edit/change as much as you need (example: making character codes into user codes, vice-versa)
  8.  
  9. You may not
  10. -Redistribute, resell, and/or claim its yours
  11. -Remove credit (you're allowed to move & edit it though, just keep it visible)
  12.  
  13. Misc Notes:
  14. -When editing, remember to turn WYSIWYG off! My codes may break otherwise
  15. -This is a pretty complex code with a LOT of tabs, etc. HTML knowledge is reccomended (tags, cards, tabs & tab contents, images to list a few)
  16.  
  17. -->
  18.  
  19. <div class="container my-3">
  20.    
  21.    
  22. <!--Intro/top-->
  23.  
  24. <div class="row">
  25.    
  26.     <!--introduction-->
  27.    
  28.     <div class="col-12 col-md-6 col-lg-7">
  29.         <div class="card bg-faded rounded-0 border-0">
  30.             <div class="card-header border-0" style="border-radius:0;font-size:20px;text-align:center">Welcome!</div>
  31.             <div class="card-body p-3">
  32.                
  33.                 <p>Top section! This will expand the more you type</p>
  34.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at blandit felis, eget scelerisque sem. Aliquam vitae bibendum turpis, ut condimentum odio. </p>
  35.                 <p>Aliquam ut pellentesque mauris. Curabitur iaculis est ut eros ultricies bibendum. Donec volutpat convallis dolor a tincidunt. Sed id finibus nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
  36.                
  37.             </div>
  38.         </div>
  39.     </div>
  40.    
  41.     <!--end introduction-->
  42.    
  43.    
  44.     <!--Sort By/Navigation-->
  45.    
  46.     <div class="col-12 col-md-6 col-lg-5">
  47.         <div class="card bg-faded border-0 rounded-0 p-2 mb-2" style="font-size:20px;text-align:center">
  48.             Sort By:
  49.         </div>
  50.        
  51.         <ul class="nav flex-column">
  52.            
  53.             <!--Featured/Folder button-->
  54.            
  55.             <li class="nav-item mb-2">
  56.                 <a class="nav-link btn btn-primary btn-block rounded-0 border-0" data-toggle="tab" href="#folder">Featured/Folder</a>
  57.             </li>
  58.            
  59.             <!--end Featured/Folder button-->
  60.            
  61.            
  62.             <!--Category 1-->
  63.            
  64.             <li class="nav-item mb-2">
  65.                 <a class="nav-link btn btn-success btn-block rounded-0 border-0" data-toggle="tab" href="#sorting1">Sorting 1</a>
  66.             </li>
  67.            
  68.             <!--end Category 1-->
  69.            
  70.            
  71.             <!--Category 2-->
  72.            
  73.             <li class="nav-item mb-2">
  74.                 <a class="nav-link btn btn-danger btn-block rounded-0 border-0" data-toggle="tab" href="#sorting2">Sorting 2</a>
  75.             </li>
  76.            
  77.             <!--end Category 2-->
  78.            
  79.            
  80.             <!--Category 3-->
  81.            
  82.             <li class="nav-item mb-2">
  83.                 <a class="nav-link btn btn-warning btn-block rounded-0 border-0" data-toggle="tab" href="#tags">tags</a>
  84.             </li>
  85.            
  86.             <!--end Category 3-->
  87.            
  88.            
  89.         </ul>
  90.     </div>
  91.    
  92.     <!--end Sort By/Navigation-->
  93.    
  94.  
  95. </div>
  96.  
  97. <!--end info/top-->
  98.  
  99.  
  100. <!--to add a new sorting/category, copy and paste the contents of one of the section.
  101.    Change the ID of the section to something different (eg: id="sorting3")
  102.    Then make a new nav button and change the link/href to link to the new section (eg: href="#sorting3)-->
  103.  
  104.  
  105. <hr class="my-4">
  106.  
  107.  
  108. <div class="tab-content">
  109.    
  110.  
  111.    
  112. <!--Featured/folder-->
  113.  
  114. <div class="tab-pane active" id="folder">
  115.    
  116.    
  117.     <!--Featured characters-->
  118.    
  119.     <div class="card text-white bg-primary border-0 rounded-0 py-2 px-3 mb-4" id="b">
  120.         <p style="font-size:20px">
  121.             <i class='fad fa-heart'></i> Featured
  122.         </p>
  123.     </div>
  124.    
  125.     <div class="row">
  126.        
  127.        
  128.         <!--Character-->
  129.        
  130.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  131.             <div class="card text-white bg-primary rounded-0 border-0">
  132.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/EMT3io6.png">
  133.                 <a class="p-2 text-white" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  134.             </div>
  135.         </div>
  136.        
  137.         <!--End Character-->
  138.        
  139.        
  140.         <!--Character-->
  141.        
  142.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  143.             <div class="card text-white bg-primary rounded-0 border-0">
  144.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/EMT3io6.png">
  145.                 <a class="p-2 text-white" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  146.             </div>
  147.         </div>
  148.        
  149.         <!--End Character-->
  150.        
  151.        
  152.         <!--Character-->
  153.        
  154.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  155.             <div class="card text-white bg-primary rounded-0 border-0">
  156.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/EMT3io6.png">
  157.                 <a class="p-2 text-white" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  158.             </div>
  159.         </div>
  160.        
  161.         <!--End Character-->
  162.        
  163.        
  164.         <!--Character-->
  165.        
  166.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  167.             <div class="card text-white bg-primary rounded-0 border-0">
  168.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/EMT3io6.png">
  169.                 <a class="p-2 text-white" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  170.             </div>
  171.         </div>
  172.        
  173.         <!--End Character-->
  174.        
  175.        
  176.         <!--Character-->
  177.        
  178.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  179.             <div class="card text-white bg-primary rounded-0 border-0">
  180.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/EMT3io6.png">
  181.                 <a class="p-2 text-white" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  182.             </div>
  183.         </div>
  184.        
  185.         <!--End Character-->
  186.        
  187.        
  188.         <!--Character-->
  189.        
  190.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  191.             <div class="card text-white bg-primary rounded-0 border-0">
  192.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/EMT3io6.png">
  193.                 <a class="p-2 text-white" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  194.             </div>
  195.         </div>
  196.        
  197.         <!--End Character-->
  198.        
  199.        
  200.     </div>
  201.    
  202.     <!--end featured characters-->
  203.    
  204.    
  205.     <hr class="my-5" style="visibility:hidden">
  206.    
  207.    
  208.     <!--folders-->
  209.    
  210.     <div class="card text-white bg-primary border-0 rounded-0 py-2 px-3 mb-1" id="b">
  211.         <p style="font-size:20px">
  212.             <i class="fad fa-folders"></i> Folders
  213.         </p>
  214.     </div>
  215.    
  216.     <div class="row">
  217.        
  218.        
  219.         <!--Folder Card-->
  220.        
  221.         <div class="col-md-12 col-lg-6 mt-4">
  222.             <div class="card bg-faded rounded-0" style="border:0px;">
  223.                
  224.                 <!--Header-->
  225.                
  226.                 <a href="#">
  227.                     <h3 class="card-header" style="border:0px;border-radius:0">
  228.                         Unsorted <i class='fad fa-folders' style="float:right"></i>
  229.                     </h3>
  230.                 </a>
  231.                
  232.                 <div class="row no-gutters">
  233.                    
  234.                     <!--image-->
  235.                    
  236.                     <div class="col-sm-12 col-md-4">
  237.                         <div class="card rounded-0 border-0" style="
  238.                            height:180px;
  239.                            background-image:url(https://cdn.pixabay.com/photo/2017/07/14/07/17/iris-2502898_1280.jpg);
  240.                            background-position:center;
  241.                            background-size:400px;
  242.                            ">
  243.                         </div>
  244.                         <a href="https://pixabay.com/photos/iris-blossom-bloom-blue-flower-2502898/" class="text-white m-1" data-toggle="tooltip" title="img - pixabay" style="position:absolute;bottom:0px;left:0px"><i class="fas fa-image"></i></a>
  245.                     </div>
  246.                    
  247.                     <!--info (will auto-scroll)-->
  248.                    
  249.                     <div class="col-sm-12 col-md-8">
  250.                         <div class="card-body table-responsive p-3" style="max-height:180px;">
  251.                             <p>Have a long description? This box will scroll!</p>
  252.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at blandit felis, eget scelerisque sem. Aliquam vitae bibendum turpis, ut condimentum odio. Aliquam ut pellentesque mauris.</p>
  253.                         </div>
  254.                     </div>
  255.                    
  256.                 </div>
  257.                
  258.             </div>
  259.            
  260.         </div>
  261.        
  262.         <!--end Folder Card-->
  263.        
  264.        
  265.        
  266.         <!--Folder Card-->
  267.        
  268.         <div class="col-md-12 col-lg-6 mt-4">
  269.             <div class="card bg-faded rounded-0" style="border:0px;">
  270.                
  271.                 <!--Header-->
  272.                
  273.                 <a href="#">
  274.                     <h3 class="card-header" style="border:0px;border-radius:0">
  275.                         Unsorted <i class='fad fa-folders' style="float:right"></i>
  276.                     </h3>
  277.                 </a>
  278.                
  279.                 <div class="row no-gutters">
  280.                    
  281.                     <!--image-->
  282.                    
  283.                     <div class="col-sm-12 col-md-4">
  284.                         <div class="card rounded-0 border-0" style="
  285.                            height:180px;
  286.                            background-image:url(https://cdn.pixabay.com/photo/2017/07/14/07/17/iris-2502898_1280.jpg);
  287.                            background-position:center;
  288.                            background-size:400px;
  289.                            ">
  290.                         </div>
  291.                         <a href="https://pixabay.com/photos/iris-blossom-bloom-blue-flower-2502898/" class="text-white m-1" data-toggle="tooltip" title="img - pixabay" style="position:absolute;bottom:0px;left:0px"><i class="fas fa-image"></i></a>
  292.                     </div>
  293.                    
  294.                     <!--info (will auto-scroll)-->
  295.                    
  296.                     <div class="col-sm-12 col-md-8">
  297.                         <div class="card-body table-responsive p-3" style="max-height:180px;">
  298.                             <p>Have a long description? This box will scroll!</p>
  299.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at blandit felis, eget scelerisque sem. Aliquam vitae bibendum turpis, ut condimentum odio. Aliquam ut pellentesque mauris.</p>
  300.                         </div>
  301.                     </div>
  302.                    
  303.                 </div>
  304.                
  305.             </div>
  306.            
  307.         </div>
  308.        
  309.         <!--end Folder Card-->
  310.        
  311.        
  312.        
  313.         <!--Folder Card-->
  314.        
  315.         <div class="col-md-12 col-lg-6 mt-4">
  316.             <div class="card bg-faded rounded-0" style="border:0px;">
  317.                
  318.                 <!--Header-->
  319.                
  320.                 <a href="#">
  321.                     <h3 class="card-header" style="border:0px;border-radius:0">
  322.                         Unsorted <i class='fad fa-folders' style="float:right"></i>
  323.                     </h3>
  324.                 </a>
  325.                
  326.                 <div class="row no-gutters">
  327.                    
  328.                     <!--image-->
  329.                    
  330.                     <div class="col-sm-12 col-md-4">
  331.                         <div class="card rounded-0 border-0" style="
  332.                            height:180px;
  333.                            background-image:url(https://cdn.pixabay.com/photo/2017/07/14/07/17/iris-2502898_1280.jpg);
  334.                            background-position:center;
  335.                            background-size:400px;
  336.                            ">
  337.                         </div>
  338.                         <a href="https://pixabay.com/photos/iris-blossom-bloom-blue-flower-2502898/" class="text-white m-1" data-toggle="tooltip" title="img - pixabay" style="position:absolute;bottom:0px;left:0px"><i class="fas fa-image"></i></a>
  339.                     </div>
  340.                    
  341.                     <!--info (will auto-scroll)-->
  342.                    
  343.                     <div class="col-sm-12 col-md-8">
  344.                         <div class="card-body table-responsive p-3" style="max-height:180px;">
  345.                             <p>Have a long description? This box will scroll!</p>
  346.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at blandit felis, eget scelerisque sem. Aliquam vitae bibendum turpis, ut condimentum odio. Aliquam ut pellentesque mauris.</p>
  347.                         </div>
  348.                     </div>
  349.                    
  350.                 </div>
  351.                
  352.             </div>
  353.            
  354.         </div>
  355.        
  356.         <!--end Folder Card-->
  357.        
  358.        
  359.        
  360.         <!--Folder Card-->
  361.        
  362.         <div class="col-md-12 col-lg-6 mt-4">
  363.             <div class="card bg-faded rounded-0" style="border:0px;">
  364.                
  365.                 <!--Header-->
  366.                
  367.                 <a href="#">
  368.                     <h3 class="card-header" style="border:0px;border-radius:0">
  369.                         Unsorted <i class='fad fa-folders' style="float:right"></i>
  370.                     </h3>
  371.                 </a>
  372.                
  373.                 <div class="row no-gutters">
  374.                    
  375.                     <!--image-->
  376.                    
  377.                     <div class="col-sm-12 col-md-4">
  378.                         <div class="card rounded-0 border-0" style="
  379.                            height:180px;
  380.                            background-image:url(https://cdn.pixabay.com/photo/2017/07/14/07/17/iris-2502898_1280.jpg);
  381.                            background-position:center;
  382.                            background-size:400px;
  383.                            ">
  384.                         </div>
  385.                         <a href="https://pixabay.com/photos/iris-blossom-bloom-blue-flower-2502898/" class="text-white m-1" data-toggle="tooltip" title="img - pixabay" style="position:absolute;bottom:0px;left:0px"><i class="fas fa-image"></i></a>
  386.                     </div>
  387.                    
  388.                     <!--info (will auto-scroll)-->
  389.                    
  390.                     <div class="col-sm-12 col-md-8">
  391.                         <div class="card-body table-responsive p-3" style="max-height:180px;">
  392.                             <p>Have a long description? This box will scroll!</p>
  393.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at blandit felis, eget scelerisque sem. Aliquam vitae bibendum turpis, ut condimentum odio. Aliquam ut pellentesque mauris.</p>
  394.                         </div>
  395.                     </div>
  396.                    
  397.                 </div>
  398.                
  399.             </div>
  400.            
  401.         </div>
  402.        
  403.         <!--end Folder Card-->
  404.        
  405.        
  406.        
  407.     </div>
  408.    
  409.     <!--end folders-->
  410.    
  411. </div>
  412.  
  413. <!--End Featured/folder-->
  414.  
  415.  
  416.  
  417. <!--Sorting 1-->
  418.  
  419. <div class="tab-pane fade" id="sorting1">
  420.    
  421.     <!--quick jump-->
  422.    
  423.     <p class="my-2" style="text-align:center" id="sect1top">jump to...</p>
  424.    
  425.     <div class="row">
  426.        
  427.         <div class="col-12 col-sm-6">
  428.             <a class="btn btn-outline-success btn-block rounded-0 mb-2" href="#sort1sect2">
  429.                 <i class="fad fa-leaf"></i> Section 2
  430.             </a>
  431.         </div>
  432.        
  433.         <div class="col-12 col-sm-6">
  434.             <a class="btn btn-outline-success btn-block rounded-0 mb-2" href="#sort1sect3">
  435.                 <i class="fad fa-leaf"></i> Section 3
  436.             </a>
  437.         </div>
  438.        
  439.     </div>
  440.    
  441.     <!--end quick jump-->
  442.    
  443.    
  444.     <hr class="my-5" style="visibility:hidden">
  445.    
  446.         <!--To add a section, copy and paste one of the ones below. Change the id of pasted section to a different one (eg: id=sect4) and make a new button in quick jump that links to it (make sure the href is the same as the ID of the section)-->
  447.        
  448.        
  449.     <!--section 1-->
  450.    
  451.     <!--Header & Desciprion-->
  452.    
  453.     <div class="card text-white bg-success border-0 rounded-0 py-2 px-3" id="sort1sect1">
  454.         <p style="font-size:20px">
  455.             <i class='fad fa-leaf'></i> Section 1
  456.         </p>
  457.     </div>
  458.    
  459.         <!--to delete description/only have a header, delete this section & add the mb-3 tag to the header-->
  460.    
  461.     <div class="card border-0 rounded-0 mb-4 p-3">
  462.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at blandit felis, eget scelerisque sem. Aliquam vitae bibendum turpis, ut condimentum odio.
  463.     </div>
  464.    
  465.     <!--End Header & Desciprion-->
  466.    
  467.    
  468.     <!--Characters-->
  469.    
  470.     <div class="row">
  471.        
  472.         <!--Character-->
  473.        
  474.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  475.             <div class="card bg-faded rounded-0 border-0">
  476.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/zl2ybTj.png">
  477.                 <a class="p-2 text-success" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  478.             </div>
  479.         </div>
  480.        
  481.         <!--End Character-->
  482.        
  483.        
  484.         <!--Character-->
  485.        
  486.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  487.             <div class="card bg-faded rounded-0 border-0">
  488.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/zl2ybTj.png">
  489.                 <a class="p-2 text-success" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  490.             </div>
  491.         </div>
  492.        
  493.         <!--End Character-->
  494.        
  495.        
  496.         <!--Character-->
  497.        
  498.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  499.             <div class="card bg-faded rounded-0 border-0">
  500.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/zl2ybTj.png">
  501.                 <a class="p-2 text-success" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  502.             </div>
  503.         </div>
  504.        
  505.         <!--End Character-->
  506.        
  507.        
  508.         <!--Character-->
  509.        
  510.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  511.             <div class="card bg-faded rounded-0 border-0">
  512.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/zl2ybTj.png">
  513.                 <a class="p-2 text-success" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  514.             </div>
  515.         </div>
  516.        
  517.         <!--End Character-->
  518.        
  519.        
  520.         <!--Character-->
  521.        
  522.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  523.             <div class="card bg-faded rounded-0 border-0">
  524.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/zl2ybTj.png">
  525.                 <a class="p-2 text-success" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  526.             </div>
  527.         </div>
  528.        
  529.         <!--End Character-->
  530.        
  531.        
  532.         <!--Character-->
  533.        
  534.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  535.             <div class="card bg-faded rounded-0 border-0">
  536.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/zl2ybTj.png">
  537.                 <a class="p-2 text-success" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  538.             </div>
  539.         </div>
  540.        
  541.         <!--End Character-->
  542.        
  543.        
  544.     </div>
  545.    
  546.     <!--end characters-->
  547.    
  548.     <!--End section 1-->
  549.    
  550.    
  551.     <hr class="my-5" style="visibility:hidden">
  552.    
  553.    
  554.     <!--section 2-->
  555.    
  556.     <!--Header & Desciprion-->
  557.    
  558.     <div class="card text-white bg-success border-0 rounded-0 py-2 px-3" id="sort1sect2">
  559.         <p style="font-size:20px">
  560.             <i class='fad fa-leaf'></i> Section 2
  561.         </p>
  562.     </div>
  563.    
  564.         <!--to delete description/only have a header, delete this section & add the mb-3 tag to the header-->
  565.    
  566.     <div class="card border-0 rounded-0 mb-4 p-3">
  567.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at blandit felis, eget scelerisque sem. Aliquam vitae bibendum turpis, ut condimentum odio.
  568.     </div>
  569.    
  570.     <!--End Header & Desciprion-->
  571.    
  572.    
  573.     <!--Characters-->
  574.    
  575.     <div class="row">
  576.        
  577.         <!--Character-->
  578.        
  579.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  580.             <div class="card bg-faded rounded-0 border-0">
  581.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/zl2ybTj.png">
  582.                 <a class="p-2 text-success" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  583.             </div>
  584.         </div>
  585.        
  586.         <!--End Character-->
  587.        
  588.        
  589.         <!--Character-->
  590.        
  591.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  592.             <div class="card bg-faded rounded-0 border-0">
  593.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/zl2ybTj.png">
  594.                 <a class="p-2 text-success" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  595.             </div>
  596.         </div>
  597.        
  598.         <!--End Character-->
  599.        
  600.        
  601.         <!--Character-->
  602.        
  603.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  604.             <div class="card bg-faded rounded-0 border-0">
  605.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/zl2ybTj.png">
  606.                 <a class="p-2 text-success" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  607.             </div>
  608.         </div>
  609.        
  610.         <!--End Character-->
  611.        
  612.        
  613.         <!--Character-->
  614.        
  615.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  616.             <div class="card bg-faded rounded-0 border-0">
  617.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/zl2ybTj.png">
  618.                 <a class="p-2 text-success" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  619.             </div>
  620.         </div>
  621.        
  622.         <!--End Character-->
  623.        
  624.        
  625.         <!--Character-->
  626.        
  627.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  628.             <div class="card bg-faded rounded-0 border-0">
  629.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/zl2ybTj.png">
  630.                 <a class="p-2 text-success" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  631.             </div>
  632.         </div>
  633.        
  634.         <!--End Character-->
  635.        
  636.        
  637.         <!--Character-->
  638.        
  639.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  640.             <div class="card bg-faded rounded-0 border-0">
  641.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/zl2ybTj.png">
  642.                 <a class="p-2 text-success" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  643.             </div>
  644.         </div>
  645.        
  646.         <!--End Character-->
  647.        
  648.        
  649.     </div>
  650.    
  651.     <!--end characters-->
  652.    
  653.     <!--End Category 2-->
  654.    
  655.    
  656.     <hr class="my-5" style="visibility:hidden">
  657.    
  658.    
  659.     <!--section 3-->
  660.    
  661.     <!--Header & Desciprion-->
  662.    
  663.     <div class="card text-white bg-success border-0 rounded-0 py-2 px-3" id="sort1sect3">
  664.         <p style="font-size:20px">
  665.             <i class='fad fa-leaf'></i> Section 3
  666.         </p>
  667.     </div>
  668.    
  669.         <!--to delete description/only have a header, delete this section & add the mb-3 tag to the header-->
  670.    
  671.     <div class="card border-0 rounded-0 mb-4 p-3">
  672.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at blandit felis, eget scelerisque sem. Aliquam vitae bibendum turpis, ut condimentum odio.
  673.     </div>
  674.    
  675.     <!--End Header & Desciprion-->
  676.    
  677.    
  678.     <!--Characters-->
  679.    
  680.     <div class="row">
  681.        
  682.         <!--Character-->
  683.        
  684.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  685.             <div class="card bg-faded rounded-0 border-0">
  686.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/zl2ybTj.png">
  687.                 <a class="p-2 text-success" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  688.             </div>
  689.         </div>
  690.        
  691.         <!--End Character-->
  692.        
  693.        
  694.         <!--Character-->
  695.        
  696.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  697.             <div class="card bg-faded rounded-0 border-0">
  698.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/zl2ybTj.png">
  699.                 <a class="p-2 text-success" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  700.             </div>
  701.         </div>
  702.        
  703.         <!--End Character-->
  704.        
  705.        
  706.         <!--Character-->
  707.        
  708.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  709.             <div class="card bg-faded rounded-0 border-0">
  710.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/zl2ybTj.png">
  711.                 <a class="p-2 text-success" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  712.             </div>
  713.         </div>
  714.        
  715.         <!--End Character-->
  716.        
  717.        
  718.         <!--Character-->
  719.        
  720.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  721.             <div class="card bg-faded rounded-0 border-0">
  722.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/zl2ybTj.png">
  723.                 <a class="p-2 text-success" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  724.             </div>
  725.         </div>
  726.        
  727.         <!--End Character-->
  728.        
  729.        
  730.         <!--Character-->
  731.        
  732.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  733.             <div class="card bg-faded rounded-0 border-0">
  734.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/zl2ybTj.png">
  735.                 <a class="p-2 text-success" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  736.             </div>
  737.         </div>
  738.        
  739.         <!--End Character-->
  740.        
  741.        
  742.         <!--Character-->
  743.        
  744.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  745.             <div class="card bg-faded rounded-0 border-0">
  746.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/zl2ybTj.png">
  747.                 <a class="p-2 text-success" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  748.             </div>
  749.         </div>
  750.        
  751.         <!--End Character-->
  752.        
  753.        
  754.     </div>
  755.    
  756.     <!--end characters-->
  757.    
  758.     <!--End section 3-->
  759.        
  760.    
  761. </div>
  762.  
  763. <!--End Sorting 1-->
  764.  
  765.  
  766.  
  767. <!--Sorting 2-->
  768.  
  769. <div class="tab-pane fade" id="sorting2">
  770.    
  771.     <!--quick jump-->
  772.    
  773.     <p class="my-2" style="text-align:center" id="sect2top">jump to...</p>
  774.    
  775.     <div class="row">
  776.        
  777.         <div class="col-12 col-sm-6">
  778.             <a class="btn btn-outline-danger btn-block rounded-0 mb-2" href="#sort2sect2">
  779.                 <i class="fad fa-star"></i> Section 2
  780.             </a>
  781.         </div>
  782.        
  783.         <div class="col-12 col-sm-6">
  784.             <a class="btn btn-outline-danger btn-block rounded-0 mb-2" href="#sort2sect3">
  785.                 <i class="fad fa-star"></i> Section 3
  786.             </a>
  787.         </div>
  788.        
  789.     </div>
  790.    
  791.     <!--end quick jump-->
  792.    
  793.    
  794.     <hr class="my-5" style="visibility:hidden">
  795.    
  796.         <!--To add a section, copy and paste one of the ones below. Change the id of pasted section to a different one (eg: id=sect4) and make a new button in quick jump that links to it (make sure the href is the same as the ID of the section)-->
  797.        
  798.        
  799.     <!--section 1-->
  800.    
  801.     <!--Header & Desciprion-->
  802.    
  803.     <div class="card text-white bg-danger border-0 rounded-0 py-2 px-3" id="sort2sect1">
  804.         <p style="font-size:20px">
  805.             <i class='fad fa-star'></i> Section 1
  806.         </p>
  807.     </div>
  808.    
  809.         <!--to delete description/only have a header, delete this section & add the mb-3 tag to the header-->
  810.    
  811.     <div class="card border-0 rounded-0 mb-4 p-3">
  812.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at blandit felis, eget scelerisque sem. Aliquam vitae bibendum turpis, ut condimentum odio.
  813.     </div>
  814.    
  815.     <!--End Header & Desciprion-->
  816.    
  817.    
  818.     <!--Characters-->
  819.    
  820.     <div class="row">
  821.        
  822.         <!--Character-->
  823.        
  824.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  825.             <div class="card bg-faded rounded-0 border-0">
  826.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/Ri1bBCq.png">
  827.                 <a class="p-2 text-danger" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  828.             </div>
  829.         </div>
  830.        
  831.         <!--End Character-->
  832.        
  833.        
  834.         <!--Character-->
  835.        
  836.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  837.             <div class="card bg-faded rounded-0 border-0">
  838.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/Ri1bBCq.png">
  839.                 <a class="p-2 text-danger" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  840.             </div>
  841.         </div>
  842.        
  843.         <!--End Character-->
  844.        
  845.        
  846.         <!--Character-->
  847.        
  848.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  849.             <div class="card bg-faded rounded-0 border-0">
  850.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/Ri1bBCq.png">
  851.                 <a class="p-2 text-danger" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  852.             </div>
  853.         </div>
  854.        
  855.         <!--End Character-->
  856.        
  857.        
  858.         <!--Character-->
  859.        
  860.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  861.             <div class="card bg-faded rounded-0 border-0">
  862.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/Ri1bBCq.png">
  863.                 <a class="p-2 text-danger" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  864.             </div>
  865.         </div>
  866.        
  867.         <!--End Character-->
  868.        
  869.        
  870.         <!--Character-->
  871.        
  872.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  873.             <div class="card bg-faded rounded-0 border-0">
  874.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/Ri1bBCq.png">
  875.                 <a class="p-2 text-danger" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  876.             </div>
  877.         </div>
  878.        
  879.         <!--End Character-->
  880.        
  881.        
  882.         <!--Character-->
  883.        
  884.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  885.             <div class="card bg-faded rounded-0 border-0">
  886.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/Ri1bBCq.png">
  887.                 <a class="p-2 text-danger" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  888.             </div>
  889.         </div>
  890.        
  891.         <!--End Character-->
  892.        
  893.        
  894.     </div>
  895.    
  896.     <!--end characters-->
  897.    
  898.     <!--End section 1-->
  899.    
  900.    
  901.     <hr class="my-5" style="visibility:hidden">
  902.    
  903.    
  904.     <!--section 2-->
  905.    
  906.     <!--Header & Desciprion-->
  907.    
  908.     <div class="card text-white bg-danger border-0 rounded-0 py-2 px-3" id="sort2sect2">
  909.         <p style="font-size:20px">
  910.             <i class='fad fa-star'></i> Section 2
  911.         </p>
  912.     </div>
  913.    
  914.         <!--to delete description/only have a header, delete this section & add the mb-3 tag to the header-->
  915.    
  916.     <div class="card border-0 rounded-0 mb-4 p-3">
  917.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at blandit felis, eget scelerisque sem. Aliquam vitae bibendum turpis, ut condimentum odio.
  918.     </div>
  919.    
  920.     <!--End Header & Desciprion-->
  921.    
  922.    
  923.     <!--Characters-->
  924.    
  925.     <div class="row">
  926.        
  927.         <!--Character-->
  928.        
  929.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  930.             <div class="card bg-faded rounded-0 border-0">
  931.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/Ri1bBCq.png">
  932.                 <a class="p-2 text-danger" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  933.             </div>
  934.         </div>
  935.        
  936.         <!--End Character-->
  937.        
  938.        
  939.         <!--Character-->
  940.        
  941.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  942.             <div class="card bg-faded rounded-0 border-0">
  943.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/Ri1bBCq.png">
  944.                 <a class="p-2 text-danger" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  945.             </div>
  946.         </div>
  947.        
  948.         <!--End Character-->
  949.        
  950.        
  951.         <!--Character-->
  952.        
  953.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  954.             <div class="card bg-faded rounded-0 border-0">
  955.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/Ri1bBCq.png">
  956.                 <a class="p-2 text-danger" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  957.             </div>
  958.         </div>
  959.        
  960.         <!--End Character-->
  961.        
  962.        
  963.         <!--Character-->
  964.        
  965.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  966.             <div class="card bg-faded rounded-0 border-0">
  967.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/Ri1bBCq.png">
  968.                 <a class="p-2 text-danger" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  969.             </div>
  970.         </div>
  971.        
  972.         <!--End Character-->
  973.        
  974.        
  975.         <!--Character-->
  976.        
  977.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  978.             <div class="card bg-faded rounded-0 border-0">
  979.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/Ri1bBCq.png">
  980.                 <a class="p-2 text-danger" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  981.             </div>
  982.         </div>
  983.        
  984.         <!--End Character-->
  985.        
  986.        
  987.         <!--Character-->
  988.        
  989.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  990.             <div class="card bg-faded rounded-0 border-0">
  991.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/Ri1bBCq.png">
  992.                 <a class="p-2 text-danger" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  993.             </div>
  994.         </div>
  995.        
  996.         <!--End Character-->
  997.        
  998.        
  999.     </div>
  1000.    
  1001.     <!--end characters-->
  1002.    
  1003.     <!--End Category 2-->
  1004.    
  1005.    
  1006.     <hr class="my-5" style="visibility:hidden">
  1007.    
  1008.    
  1009.     <!--section 3-->
  1010.    
  1011.     <!--Header & Desciprion-->
  1012.    
  1013.     <div class="card text-white bg-danger border-0 rounded-0 py-2 px-3" id="sort2sect3">
  1014.         <p style="font-size:20px">
  1015.             <i class='fad fa-star'></i> Section 1
  1016.         </p>
  1017.     </div>
  1018.    
  1019.         <!--to delete description/only have a header, delete this section & add the mb-3 tag to the header-->
  1020.    
  1021.     <div class="card border-0 rounded-0 mb-4 p-3">
  1022.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at blandit felis, eget scelerisque sem. Aliquam vitae bibendum turpis, ut condimentum odio.
  1023.     </div>
  1024.    
  1025.     <!--End Header & Desciprion-->
  1026.    
  1027.    
  1028.     <!--Characters-->
  1029.    
  1030.     <div class="row">
  1031.        
  1032.         <!--Character-->
  1033.        
  1034.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  1035.             <div class="card bg-faded rounded-0 border-0">
  1036.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/Ri1bBCq.png">
  1037.                 <a class="p-2 text-danger" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  1038.             </div>
  1039.         </div>
  1040.        
  1041.         <!--End Character-->
  1042.        
  1043.        
  1044.         <!--Character-->
  1045.        
  1046.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  1047.             <div class="card bg-faded rounded-0 border-0">
  1048.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/Ri1bBCq.png">
  1049.                 <a class="p-2 text-danger" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  1050.             </div>
  1051.         </div>
  1052.        
  1053.         <!--End Character-->
  1054.        
  1055.        
  1056.         <!--Character-->
  1057.        
  1058.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  1059.             <div class="card bg-faded rounded-0 border-0">
  1060.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/Ri1bBCq.png">
  1061.                 <a class="p-2 text-danger" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  1062.             </div>
  1063.         </div>
  1064.        
  1065.         <!--End Character-->
  1066.        
  1067.        
  1068.         <!--Character-->
  1069.        
  1070.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  1071.             <div class="card bg-faded rounded-0 border-0">
  1072.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/Ri1bBCq.png">
  1073.                 <a class="p-2 text-danger" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  1074.             </div>
  1075.         </div>
  1076.        
  1077.         <!--End Character-->
  1078.        
  1079.        
  1080.         <!--Character-->
  1081.        
  1082.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  1083.             <div class="card bg-faded rounded-0 border-0">
  1084.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/Ri1bBCq.png">
  1085.                 <a class="p-2 text-danger" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  1086.             </div>
  1087.         </div>
  1088.        
  1089.         <!--End Character-->
  1090.        
  1091.        
  1092.         <!--Character-->
  1093.        
  1094.         <div class="col-6 col-sm-4 col-lg-3 col-xl-2 my-1">
  1095.             <div class="card bg-faded rounded-0 border-0">
  1096.                 <img class="card-img-top rounded-0" src="https://i.imgur.com/Ri1bBCq.png">
  1097.                 <a class="p-2 text-danger" href="#" style="text-align:center;font-size:15px;">Character Name</a>
  1098.             </div>
  1099.         </div>
  1100.        
  1101.         <!--End Character-->
  1102.        
  1103.        
  1104.     </div>
  1105.    
  1106.     <!--end characters-->
  1107.    
  1108.     <!--End section 3-->
  1109.        
  1110.    
  1111. </div>
  1112.  
  1113. <!--End Sorting 2-->
  1114.  
  1115.  
  1116.  
  1117. <!--tags-->
  1118.  
  1119. <div class="tab-pane fade" id="tags">
  1120.    
  1121.     <div class="card text-white bg-warning border-0 rounded-0 py-2 px-3 mb-4" id="tagtop">
  1122.         <p style="font-size:20px">
  1123.             <i class="fad fa-tags"></i> General Tags
  1124.         </p>
  1125.     </div>
  1126.    
  1127.     <div class="card bg-transparent border-0 rounded-0 p-3">
  1128.        
  1129.         <p>
  1130.             <a href="#" class="btn btn-warning border-0 rounded-0">
  1131.                 Tag
  1132.             </a>
  1133.                 Short description of the tag
  1134.         </p>
  1135.        
  1136.        
  1137.         <p>
  1138.             <a href="#" class="btn btn-warning border-0 rounded-0">
  1139.                 Tag
  1140.             </a>
  1141.                 Short description of the tag
  1142.         </p>
  1143.        
  1144.        
  1145.         <p>
  1146.             <a href="#" class="btn btn-warning border-0 rounded-0">
  1147.                 Tag
  1148.             </a>
  1149.                 Short description of the tag
  1150.         </p>
  1151.        
  1152.        
  1153.         <p>
  1154.             <a href="#" class="btn btn-warning border-0 rounded-0">
  1155.                 Tag
  1156.             </a>
  1157.                 Short description of the tag
  1158.         </p>
  1159.        
  1160.        
  1161.         <p>
  1162.             <a href="#" class="btn btn-warning border-0 rounded-0">
  1163.                 Tag
  1164.             </a>
  1165.                 Short description of the tag
  1166.         </p>
  1167.        
  1168.        
  1169.         <p>
  1170.             <a href="#" class="btn btn-warning border-0 rounded-0">
  1171.                 Tag
  1172.             </a>
  1173.                 Short description of the tag
  1174.         </p>
  1175.  
  1176.        
  1177.     </div>
  1178.    
  1179.        
  1180.     <hr class="my-4" style="visibility:hidden">
  1181.    
  1182. </div>
  1183.  
  1184. <!--End tags-->
  1185.  
  1186. <!--Credit. You may move it, but please do not delete/remove-->
  1187.  
  1188. </div>
  1189.  
  1190. <p style="text-align:right">HTML by <a href="https://toyhou.se/10396844"><i class='fad fa-heart'></i> Jade-Everstone</a></p>
  1191.    
  1192. </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!