API tools faq
paste
Jade-Everstone

MHW card (cc)

Jade-Everstone
Apr 18th, 2021 (edited)
627
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 17.87 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2.  
  3. <!--Rules:
  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, including moving credits and repurposing (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. -Some basic html knowledge is recommended for editing
  16.  
  17. default colors:
  18. -navs & links: #698bc7
  19. -text: text-white
  20. -info panel BG: rgba( 9, 7, 13, 0.9)
  21. -Headers & background: #261638
  22.  
  23. -->
  24.  
  25. <div class="container">
  26.    
  27.     <!--Navs-->
  28.    
  29.     <ul class="nav nav-tabs card-header-tabs row">
  30.    
  31.         <li class="col-sm-12 col-md-6 col-lg-3 my-2">
  32.             <a class="btn btn-block btn-primary rounded-0 border-0" data-toggle="tab" href="#panel1" role="button" style="background-color:#698bc7"><i class='fas fa-user-alt'></i> Main Info</a>
  33.         </li>
  34.        
  35.         <li class="col-sm-12 col-md-6 col-lg-3 my-2">
  36.             <a class="btn btn-block btn-primary rounded-0 border-0" data-toggle="tab" href="#panel2" role="button" style="background-color:#698bc7"><i class='fas fa-book-open'></i> Backstory</a>
  37.         </li>
  38.        
  39.         <li class="col-sm-12 col-md-6 col-lg-3 my-2">
  40.             <a class="btn btn-block btn-primary rounded-0 border-0" data-toggle="tab" href="#panel3" role="button" style="background-color:#698bc7"><i class='fas fa-question'></i> Misc. Info</a>
  41.         </li>
  42.        
  43.         <li class="col-sm-12 col-md-6 col-lg-3 my-2">
  44.             <a class="btn btn-block btn-primary rounded-0 border-0" data-toggle="tab" href="#panel4" role="button" style="background-color:#698bc7"><i class='fas fa-link'></i> Relationships</a>
  45.         </li>
  46.    
  47.     </ul>
  48.    
  49.     <!--end navs-->
  50.    
  51.     <!--Main profile-->
  52.    
  53.     <!--background img-->
  54.        
  55.     <div class="card rounded-0 border-0 p-2 mt-3" style="
  56.        background-color:#261638;
  57.        background-image:url( your bg image here );
  58.        background-position:center;
  59.        background-attachment:fixed;
  60.        background-size:cover
  61.        
  62.        ">
  63.        
  64.         <div class="row">
  65.            
  66.             <!--Info section-->
  67.            
  68.             <div class="col-md-12 col-lg-4">
  69.                
  70.                 <div class="card rounded-0 border-0" style="background-color:rgba( 9, 7, 13, 0.9)">
  71.                     <div class="card-body p-3" style="min-height:660px">
  72.                         <div class="tab-content">
  73.                            
  74.                         <!--Panel 1-->
  75.                        
  76.                         <div class="tab-pane active" id="panel1">
  77.                        
  78.                             <div class="card text-white rounded-0 border-0 pt-2" style="background-color:#261638;">
  79.                                 <h1 style="text-align:center">Character Name</h1>
  80.                             </div>
  81.                            
  82.                             <br>
  83.                            
  84.                             <!--basic info-->
  85.                            
  86.                             <div class="card-body text-white table-responsive" style="height:175px;max-width:250px;margin-left:auto;margin-right:auto">
  87.                                 <div class="row no-gutters">
  88.                                    
  89.                                    
  90.                                     <div class="col-6 pb-3">
  91.                                         <span class="text-uppercase">Title</span>
  92.                                     </div>
  93.                                     <div class="col-6 pb-3" style="text-align:right">
  94.                                         <span class="faded">text</span>
  95.                                     </div>
  96.                                    
  97.                                    
  98.                                     <div class="col-6 pb-3">
  99.                                         <span class="text-uppercase">Title</span>
  100.                                     </div>
  101.                                     <div class="col-6 pb-3" style="text-align:right">
  102.                                         <span class="faded">text</span>
  103.                                     </div>
  104.                                    
  105.                                    
  106.                                     <div class="col-6 pb-3">
  107.                                         <span class="text-uppercase">Title</span>
  108.                                     </div>
  109.                                     <div class="col-6 pb-3" style="text-align:right">
  110.                                         <span class="faded">text</span>
  111.                                     </div>
  112.                                    
  113.                                    
  114.                                     <div class="col-6 pb-3">
  115.                                         <span class="text-uppercase">Title</span>
  116.                                     </div>
  117.                                     <div class="col-6 pb-3" style="text-align:right">
  118.                                         <span class="faded">text</span>
  119.                                     </div>
  120.                                    
  121.                                    
  122.                                     <div class="col-6">
  123.                                         <span class="text-uppercase">Title</span>
  124.                                     </div>
  125.                                     <div class="col-6" style="text-align:right">
  126.                                         <span class="faded">text</span>
  127.                                     </div>
  128.                                    
  129.                                    
  130.                                 </div>
  131.                             </div>
  132.                            
  133.                             <!--end basic info section-->
  134.                            
  135.                             <!--about section-->
  136.                            
  137.                             <div class="card text-white rounded-0 border-0 pt-2 mt-3" style="background-color:#261638">
  138.                                 <h5 style="text-align:center">About</h5>
  139.                             </div>
  140.                            
  141.                             <div class="card-body text-white table-responsive p-3" style="height:240px">
  142.                                 <p>This section will scroll!</p>
  143.                                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis fermentum metus, eu consequat lorem laoreet eget. Duis gravida volutpat facilisis. Fusce id erat facilisis, molestie justo non, mattis est. Nulla nec ligula eu turpis varius suscipit nec vel justo.</p>
  144.                             </div>
  145.                            
  146.                             <!--end about section-->
  147.                            
  148.                             <hr>
  149.                            
  150.                             <!--quote + optional emote. to remove optional emote, delete everything in this section except the <p> section-->
  151.                            
  152.                             <div class="card-body text-white px-3">
  153.                                 <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
  154.                             </div>
  155.                            
  156.                             <!--end quote section-->
  157.                            
  158.                         </div>
  159.                        
  160.                         <!--end panel 1-->
  161.                        
  162.                         <!--Panel 2/backstory & bio-->
  163.                        
  164.                         <div class="tab-pane fade" id="panel2">
  165.                            
  166.                             <div class="card text-white rounded-0 border-0 pt-2 mb-3" style="background-color:#261638">
  167.                                 <h5 style="text-align:center">Backstory/Bio</h5>
  168.                             </div>
  169.                            
  170.                             <div class="card-body text-white table-responsive" style="max-height:575px">
  171.                                
  172.                                 <p>This section will automatically scroll!</p>
  173.                                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis fermentum metus, eu consequat lorem laoreet eget. Duis gravida volutpat facilisis. Fusce id erat facilisis, molestie justo non, mattis est. Nulla nec ligula eu turpis varius suscipit nec vel justo.</p>
  174.                                 <p>Vestibulum nibh nisi, maximus ac auctor ut, commodo vitae enim. Quisque in ex fringilla, hendrerit felis at, malesuada ligula. In ut dolor sed metus faucibus condimentum id ornare magna. Integer diam est, varius ornare quam et, euismod efficitur tellus. </p>
  175.                                
  176.                                 <h3 style="text-align:center">(sub section)</h3>
  177.                                 <hr>
  178.                                
  179.                                 <p>Maecenas tincidunt, nibh ut congue eleifend, nulla mi tincidunt mi, et rhoncus nibh augue sit amet odio. Aliquam sed turpis sed justo dapibus iaculis. Vivamus et neque pretium, ultricies magna in, malesuada sem. </p>
  180.                                
  181.                             </div>
  182.                            
  183.                         </div>
  184.                        
  185.                         <!--end panel 2/backstory & bio-->
  186.                        
  187.                         <!--Panel 3-->
  188.                        
  189.                         <div class="tab-pane fade" id="panel3">
  190.                            
  191.                             <!--misc facts-->
  192.                            
  193.                            
  194.                             <div class="card text-white rounded-0 border-0 pt-2 mb-3" style="background-color:#261638">
  195.                                 <h5 style="text-align:center">Misc. Facts</h5>
  196.                             </div>
  197.                            
  198.                             <div class="card-body text-white table-responsive" style="height:290px">
  199.                                 <ul>
  200.                                     <li>This box will automatically scroll!</li>
  201.                                     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  202.                                     <li>Quisque venenatis fermentum metus, eu consequat lorem laoreet eget.</li>
  203.                                     <li>Duis gravida volutpat facilisis.</li>
  204.                                     <li>Fusce id erat facilisis, molestie justo non, mattis est.</li>
  205.                                 </ul>
  206.                             </div>
  207.                            
  208.                             <!--end misc facts-->
  209.                            
  210.                             <!--playlist-->
  211.                            
  212.                             <div class="card text-white rounded-0 border-0 pt-2 mb-3" style="background-color:#261638">
  213.                                 <h5 style="text-align:center">Playlist</h5>
  214.                             </div>
  215.                            
  216.                             <div class="card-body table-responsive px-2" style="height:230px">
  217.                                 <p>
  218.                                     <a href="#" style="font-size:20px;color:#698bc7"><i class='fas fa-play'></i> Song Title</a>
  219.                                 </p>
  220.                                 <p>
  221.                                     <a href="#" style="font-size:20px;color:#698bc7"><i class='fas fa-play'></i> Song Title</a>
  222.                                 </p>
  223.                                 <p>
  224.                                     <a href="#" style="font-size:20px;color:#698bc7"><i class='fas fa-play'></i> Song Title</a>
  225.                                 </p>
  226.                                 <p>
  227.                                     <a href="#" style="font-size:20px;color:#698bc7"><i class='fas fa-play'></i> Song Title</a>
  228.                                 </p>
  229.                                 <p>
  230.                                     <a href="#" style="font-size:20px;color:#698bc7"><i class='fas fa-play'></i> Song Title</a>
  231.                                 </p>
  232.                             </div>
  233.                            
  234.                             <!--end playlist-->
  235.                            
  236.                         </div>
  237.                        
  238.                         <!--end panel 3-->
  239.                        
  240.                         <!--Panel 4/relationships-->
  241.                        
  242.                         <div class="tab-pane fade" id="panel4">
  243.                            
  244.                             <div class="card text-white bg-faded rounded-0 border-0 pt-2 mb-3" style="background-color:#261638">
  245.                                 <h5 style="text-align:center">Relationships</h5>
  246.                             </div>
  247.                            
  248.                             <div class="card-body table-responsive" style="max-height:575px">
  249.                                
  250.                                 <div class="row no-gutters">
  251.                                     <div class="col-3">
  252.                                         <img src="https://via.placeholder.com/100" style="width:70px">
  253.                                     </div>
  254.                                     <div class="col-9">
  255.                                         <p class="mx-2">
  256.                                             <a href="#" style="font-size:20px;color:#698bc7">Name!</a>
  257.                                         </p>
  258.                                         <i class="mx-2 text-white">Relationship</i>
  259.                                     </div>
  260.                                 </div>
  261.                                
  262.                                 <p class="py-2 text-white">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis fermentum metus, eu consequat lorem laoreet eget. Duis gravida volutpat facilisis."</p>
  263.                                
  264.                                 <hr>
  265.                                
  266.                                 <div class="row no-gutters">
  267.                                     <div class="col-3">
  268.                                         <img src="https://via.placeholder.com/100" style="width:70px">
  269.                                     </div>
  270.                                     <div class="col-9">
  271.                                         <p class="mx-2">
  272.                                             <a href="#" style="font-size:20px;color:#698bc7">Name!</a>
  273.                                         </p>
  274.                                         <i class="mx-2 text-white">Relationship</i>
  275.                                     </div>
  276.                                 </div>
  277.                                
  278.                                 <p class="py-2 text-white">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis fermentum metus, eu consequat lorem laoreet eget. Duis gravida volutpat facilisis."</p>
  279.                                
  280.                                 <hr>
  281.                                
  282.                                 <div class="row no-gutters">
  283.                                     <div class="col-3">
  284.                                         <img src="https://via.placeholder.com/100" style="width:70px">
  285.                                     </div>
  286.                                     <div class="col-9">
  287.                                         <p class="mx-2">
  288.                                             <a href="#" style="font-size:20px;color:#698bc7">Name!</a>
  289.                                         </p>
  290.                                         <i class="mx-2 text-white">Relationship</i>
  291.                                     </div>
  292.                                 </div>
  293.                                
  294.                                 <p class="py-2 text-white">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis fermentum metus, eu consequat lorem laoreet eget. Duis gravida volutpat facilisis."</p>
  295.                                
  296.                                 <hr>
  297.                                
  298.                             </div>
  299.                            
  300.                         </div>
  301.                        
  302.                         <!--end panel 4/relationships-->
  303.                        
  304.                         </div>
  305.                     </div>
  306.                 </div>
  307.                
  308.             </div>
  309.            
  310.             <!--end info section-->
  311.            
  312.             <!--Character pic -->
  313.            
  314.             <div class="col-md-12 col-lg-8">
  315.                 <div class="card bg-transparent border-0 h-100">
  316.                     <img src="https://via.placeholder.com/600px" style="
  317.                        width:600px;
  318.                        display:block;
  319.                        margin-left:auto;
  320.                        margin-right:auto;
  321.                        margin-top:auto;
  322.                        margin-bottom:auto
  323.                        ">
  324.                 </div>
  325.             </div>
  326.            
  327.             <!--end character pic-->
  328.            
  329.         </div>
  330.    
  331.     <!--background and img credit-->
  332.    
  333.     <p class="p-2" style="font-size:11px;position:absolute;bottom:0;right:0;">
  334.         <a class="px-1 text-white" href="#" data-toggle="tooltip" title="img credit"><i class="fas fa-user"></i></a>
  335.         <a class="px-1 text-white" href="#" data-toggle="tooltip" title="bg credit"><i class='fas fa-image'></i></a>
  336.     </p>
  337.    
  338.     </div>
  339.    
  340.     <!--end main profile-->
  341.    
  342.     <!--Credit (you may move, but please don't remove)-->
  343.  
  344.     <p style="text-align:right">HTML by <a href="https://toyhou.se/10203351" style="color:#698bc7"><i class='fad fa-heart'></i> Jade-Everstone</a></p>
  345.    
  346. </div>
Advertisement
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!