API tools faq
paste
Jade-Everstone

MHR card (bs)

Jade-Everstone
Apr 18th, 2021 (edited)
378
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 22.70 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 (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. -->
  18.  
  19. <div class="container my-3">
  20.    
  21.     <div class="card bg-faded rounded-0 border-0 px-3">
  22.        
  23.         <div class="row">
  24.            
  25.            
  26.             <!--content/right panel-->
  27.            
  28.             <div class="col-12 col-lg-7 order-3 order-lg-1 my-3">
  29.                 <div class="card rounded-0 border-0" style="height:550px">
  30.                     <div class="tab-content">
  31.                        
  32.                        
  33.                     <!--Main Info-->
  34.                    
  35.                     <div class="tab-pane active" id="mhr1">  
  36.                     <div class="card-body table-responsive p-3" style="height:550px">
  37.                        
  38.                        
  39.                         <!--basic info-->
  40.                        
  41.                         <div class="card bg-faded p-1 mb-3 rounded-0 border-0" style="text-align:center;font-size:20px">
  42.                         Main info
  43.                         </div>
  44.                        
  45.                         <div class="row" style="max-width:450px;margin-left:auto;margin-right:auto">
  46.                            
  47.                            
  48.                             <div class="col-6 pb-3">
  49.                                <span class="text-uppercase">Title</span>
  50.                             </div>
  51.                             <div class="col-6 pb-3" style="text-align:right">
  52.                                 <span class="faded">text</span>
  53.                             </div>
  54.                            
  55.                            
  56.                             <div class="col-6 pb-3">
  57.                                <span class="text-uppercase">Title</span>
  58.                             </div>
  59.                             <div class="col-6 pb-3" style="text-align:right">
  60.                                 <span class="faded">text</span>
  61.                             </div>
  62.                            
  63.                            
  64.                             <div class="col-6 pb-3">
  65.                                <span class="text-uppercase">Title</span>
  66.                             </div>
  67.                             <div class="col-6 pb-3" style="text-align:right">
  68.                                 <span class="faded">text</span>
  69.                             </div>
  70.                            
  71.                            
  72.                             <div class="col-6 pb-3">
  73.                                <span class="text-uppercase">Title</span>
  74.                             </div>
  75.                             <div class="col-6 pb-3" style="text-align:right">
  76.                                 <span class="faded">text</span>
  77.                             </div>
  78.  
  79.                        
  80.                         </div>
  81.                        
  82.                         <!--end basic info-->
  83.                        
  84.                        
  85.                         <!--Moodboard
  86.                        Note: I gave the cards colors so it's easier to tell what is what. Feel free to change/remove them-->
  87.                        
  88.                         <div class="row no-gutters pb-3">
  89.                            
  90.                            
  91.                             <!--image 1-->
  92.                            
  93.                             <div class="col-6 col-sm-3">
  94.                                
  95.                                 <div class="card bg-primary rounded-0 border-0" style="
  96.                                    height:100px;
  97.                                    background-image:url( your image here );
  98.                                    background-size:cover;
  99.                                    background-position:center">
  100.                                    
  101.                                     <!--image credit-->
  102.                                    
  103.                                     <a href="#" class="text-white" style="position:absolute; bottom:3px; right:5px; font-size:13px" data-toggle="tooltip" title="img credit"><i class="fas fa-image"></i> </a>
  104.                                    
  105.                                 </div>
  106.                                
  107.                             </div>
  108.                            
  109.                             <!--end image 1-->
  110.                            
  111.                            
  112.                             <!--image 2-->
  113.                            
  114.                             <div class="col-6 col-sm-3">
  115.                                
  116.                                 <div class="card bg-success rounded-0 border-0" style="
  117.                                    height:100px;
  118.                                    background-image:url( your image here );
  119.                                    background-size:cover;
  120.                                    background-position:center">
  121.                                    
  122.                                     <!--image credit-->
  123.                                    
  124.                                     <a href="#" class="text-white" style="position:absolute; bottom:3px; right:5px; font-size:13px" data-toggle="tooltip" title="img credit"><i class="fas fa-image"></i> </a>
  125.                                    
  126.                                 </div>
  127.                                
  128.                             </div>
  129.                            
  130.                             <!--end image 2-->
  131.                            
  132.                            
  133.                             <!--image 3-->
  134.                            
  135.                             <div class="col-6 col-sm-3">
  136.                                
  137.                                 <div class="card bg-warning rounded-0 border-0" style="
  138.                                    height:100px;
  139.                                    background-image:url( your image here );
  140.                                    background-size:cover;
  141.                                    background-position:center">
  142.                                    
  143.                                     <!--image credit-->
  144.                                    
  145.                                     <a href="#" class="text-white" style="position:absolute; bottom:3px; right:5px; font-size:13px" data-toggle="tooltip" title="img credit"><i class="fas fa-image"></i> </a>
  146.                                    
  147.                                 </div>
  148.                                
  149.                             </div>
  150.                            
  151.                             <!--end image 3-->
  152.                            
  153.                            
  154.                             <!--image 4-->
  155.                            
  156.                             <div class="col-6 col-sm-3">
  157.                                
  158.                                 <div class="card bg-danger rounded-0 border-0" style="
  159.                                    height:100px;
  160.                                    background-image:url( your image here );
  161.                                    background-size:cover;
  162.                                    background-position:center">
  163.                                    
  164.                                     <!--image credit-->
  165.                                    
  166.                                     <a href="#" class="text-white" style="position:absolute; bottom:3px; right:5px; font-size:13px" data-toggle="tooltip" title="img credit"><i class="fas fa-image"></i> </a>
  167.                                    
  168.                                 </div>
  169.                                
  170.                             </div>
  171.                            
  172.                             <!--end image 4-->
  173.                            
  174.                            
  175.                         </div>
  176.                        
  177.                         <!--end moodboard-->
  178.                        
  179.                        
  180.                         <!--about-->
  181.                        
  182.                         <div class="card bg-faded p-1 mb-3 rounded-0 border-0" style="text-align:center;font-size:20px">
  183.                         About
  184.                         </div>
  185.                         <div class="card-body px-3">
  186.                             <p>Have a lot of info? this whole panel will scroll!</p>
  187.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis elit euismod, aliquet purus vel, fringilla augue. Maecenas mattis vehicula ligula, quis gravida lacus consequat fringilla. Pellentesque mollis nisi quis erat lacinia aliquet. Morbi cursus dapibus fermentum. Mauris ut facilisis nisi, at eleifend sapien. In scelerisque ipsum vitae ex ultricies, in lacinia libero cursus. Vestibulum nec efficitur nisi. </p>
  188.                            
  189.                         </div>
  190.                        
  191.                         <!--end about-->
  192.                        
  193.                     </div>
  194.                     </div>
  195.                    
  196.                     <!--end main Info-->
  197.                    
  198.                    
  199.                     <!--story-->
  200.                    
  201.                     <div class="tab-pane fade" id="mhr2">
  202.                         <div class="card-body table-responsive p-3" style="height:550px">
  203.                            
  204.                             <div class="card bg-faded p-1 mb-3 rounded-0 border-0" style="text-align:center;font-size:20px">
  205.                             Backstory/Bio
  206.                             </div>
  207.                            
  208.                             <p>Have a lot of info? This whole panel will scroll!</p>
  209.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis elit euismod, aliquet purus vel, fringilla augue. Maecenas mattis vehicula ligula, quis gravida lacus consequat fringilla. Pellentesque mollis nisi quis erat lacinia aliquet. Morbi cursus dapibus fermentum. Mauris ut facilisis nisi, at eleifend sapien. In scelerisque ipsum vitae ex ultricies, in lacinia libero cursus. Vestibulum nec efficitur nisi. </p>
  210.                            
  211.                            
  212.                             <p style="text-align:center; font-size:18px"> (subsection)</p>
  213.                             <hr>
  214.                             <p>Nullam mattis purus maximus diam mattis cursus. Suspendisse sollicitudin quam id odio auctor, non egestas turpis consequat. Fusce feugiat orci mi, et tristique dolor ornare nec. Nunc ipsum nulla, posuere vel bibendum et, volutpat ac erat. Donec vel porttitor lacus. Mauris non vehicula mauris, ac gravida mi. Quisque nec turpis vitae turpis ullamcorper placerat eget sit amet tortor. Maecenas rutrum lorem imperdiet justo laoreet, ac dignissim orci consectetur. Fusce quis nibh eget neque gravida vehicula. Nam nisl dui, commodo vitae sagittis vel, luctus vitae elit. Donec id orci molestie, ultricies est vitae, tempus urna. Morbi tempor mauris nunc, vitae dignissim justo vulputate non. </p>
  215.                            
  216.                         </div>
  217.                     </div>
  218.                    
  219.                     <!--end story-->
  220.                    
  221.                    
  222.                     <!--misc. info-->
  223.                    
  224.                     <div class="tab-pane fade" id="mhr3">
  225.                        
  226.                         <div class="card-body table-responsive p-3" style="height:550px">
  227.                            
  228.                            
  229.                             <!--facts-->
  230.                            
  231.                             <div class="card bg-faded p-1 mb-3 rounded-0 border-0" style="text-align:center;font-size:20px">
  232.                             Misc. Facts
  233.                             </div>
  234.                            
  235.                             <ul>
  236.                                 <li>Have a lot of info? this whole panel will scroll!</li>
  237.                                 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consectetur quis odio id interdum. </li>
  238.                                 <li>Etiam sit amet mauris mi. Aliquam sed accumsan turpis. Cras quam tortor, pulvinar luctus volutpat in, tristique eget diam.</li>
  239.                                 <li>Fusce blandit, lorem eu malesuada porttitor, mauris metus luctus metus, et lobortis urna urna sit amet velit. </li>
  240.                                 <li>Aenean at ligula vel ante molestie ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </li>
  241.                             </ul>
  242.                            
  243.                             <!--end facts-->
  244.                            
  245.                            
  246.                             <!--playlist-->
  247.                            
  248.                             <div class="card bg-faded p-1 mb-3 rounded-0 border-0" style="text-align:center;font-size:20px">
  249.                             Playlist
  250.                             </div>
  251.                            
  252.                             <p class="px-4">
  253.                                 <a href="#" style="font-size:18px"><i class='fas fa-play'></i> Song title</a>
  254.                             </p>
  255.                            
  256.                             <p class="px-4">
  257.                                 <a href="#" style="font-size:18px"><i class='fas fa-play'></i> Song title</a>
  258.                             </p>
  259.                            
  260.                             <p class="px-4">
  261.                                 <a href="#" style="font-size:18px"><i class='fas fa-play'></i> Song title</a>
  262.                             </p>
  263.                            
  264.                             <p class="px-4">
  265.                                 <a href="#" style="font-size:18px"><i class='fas fa-play'></i> Song title</a>
  266.                             </p>
  267.                            
  268.                             <p class="px-4">
  269.                                 <a href="#" style="font-size:18px"><i class='fas fa-play'></i> Song title</a>
  270.                             </p>
  271.                            
  272.                             <!--end playlist-->
  273.                            
  274.                         </div>
  275.                        
  276.                     </div>
  277.                    
  278.                     <!--end misc. info-->
  279.                    
  280.                    
  281.                     <!--relationships-->
  282.                    
  283.                     <div class="tab-pane fade" id="mhr4">
  284.                        
  285.                         <div class="card-body table-responsive p-3" style="height:550px">
  286.                            
  287.                             <div class="card bg-faded p-1 mb-3 rounded-0 border-0" style="text-align:center;font-size:20px">
  288.                             Relationships
  289.                             </div>
  290.                            
  291.                            
  292.                             <!--relationship 1-->
  293.                            
  294.                             <div class="row">
  295.                                 <div class="col-12 col-lg-3">
  296.                                     <img src="https://via.placeholder.com/150" style="width:150px;">
  297.                                 </div>
  298.                                 <div class="col-12 col-lg-9">
  299.                                    
  300.                                     <p><a href="#" style="font-size:20px">Name</a> - <i>relationship</i></p>
  301.                                    
  302.                                     <p>
  303.                                         "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut pellentesque justo. Nam ornare ipsum eros, quis porttitor justo pulvinar non. Donec iaculis lorem in enim pellentesque blandit."
  304.                                     </p>
  305.                                 </div>
  306.                             </div>
  307.                            
  308.                             <!--end relationship 1-->
  309.                            
  310.                             <hr>
  311.                            
  312.                             <!--relationship 2-->
  313.                            
  314.                             <div class="row">
  315.                                 <div class="col-12 col-lg-3">
  316.                                     <img src="https://via.placeholder.com/150" style="width:150px;">
  317.                                 </div>
  318.                                 <div class="col-12 col-lg-9">
  319.                                    
  320.                                     <p><a href="#" style="font-size:20px">Name</a> - <i>relationship</i></p>
  321.                                    
  322.                                     <p>
  323.                                         "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut pellentesque justo. Nam ornare ipsum eros, quis porttitor justo pulvinar non. Donec iaculis lorem in enim pellentesque blandit."
  324.                                     </p>
  325.                                 </div>
  326.                             </div>
  327.                            
  328.                             <!--end relationship 2-->
  329.                            
  330.                             <hr>
  331.                            
  332.                             <!--relationship 3-->
  333.                            
  334.                             <div class="row">
  335.                                 <div class="col-12 col-lg-3">
  336.                                     <img src="https://via.placeholder.com/150" style="width:150px;">
  337.                                 </div>
  338.                                 <div class="col-12 col-lg-9">
  339.                                    
  340.                                     <p><a href="#" style="font-size:20px">Name</a> - <i>relationship</i></p>
  341.                                    
  342.                                     <p>
  343.                                         "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut pellentesque justo. Nam ornare ipsum eros, quis porttitor justo pulvinar non. Donec iaculis lorem in enim pellentesque blandit."
  344.                                     </p>
  345.                                 </div>
  346.                             </div>
  347.                            
  348.                             <!--end relationship 3-->
  349.                            
  350.                             <hr>
  351.                            
  352.                         </div>
  353.                        
  354.                     </div>
  355.                    
  356.                     <!--end relationships-->
  357.                    
  358.                     </div>
  359.                 </div>
  360.             </div>
  361.            
  362.             <!--end content/right panel-->
  363.            
  364.            
  365.             <!--image/right panel-->
  366.            
  367.             <div class="col-12 col-lg-5 order-1 order-lg-2 my-3">
  368.                 <div class="card rounded-0 border-0 p-3" style="height:550px">
  369.                     <div class="card-body">
  370.                        
  371.                    
  372.                     <!--character image
  373.                    reccomended min height: 350px-->
  374.                    
  375.                     <div class="card rounded-0 border-0 m-3" style="
  376.                        height:350px;
  377.                        background-image:url(https://via.placeholder.com/350px);
  378.                        background-size:cover;
  379.                        background-repeat:none;
  380.                        background-position:center;
  381.                        ">
  382.                        
  383.                         <!--image credit-->
  384.                        
  385.                         <a href="LINK HERE" class="text-white" style="position:absolute; bottom:3px; right:5px; font-size:13px" data-toggle="tooltip" title="img credit"><i class="fas fa-image"></i> </a>
  386.                        
  387.                        
  388.                     </div>
  389.                    
  390.                     <!--end character image-->
  391.                    
  392.                    
  393.                     <div class="card bg-faded rounded-0 border-0 p-1 mb-3" style="text-align:center;font-size:25px">
  394.                         Character name
  395.                     </div>
  396.                    
  397.                    
  398.                     <!--quote (or more notes)-->
  399.                    
  400.                     <div class="card-body table-responsive" style="height:85px;text-align:center">
  401.                         <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
  402.                     </div>
  403.                    
  404.                     <!--end quote (or more notes)-->
  405.                    
  406.                    
  407.                     </div>
  408.                 </div>
  409.             </div>
  410.            
  411.             <!--end image/right panel-->
  412.            
  413.            
  414.             <!--navs-->
  415.            
  416.             <div class="col-12 order-2 order-lg-3">
  417.                
  418.                 <ul class="nav nav-tabs card-header-tabs row mb-3">
  419.                     <li class="col-12 col-md-6 col-lg-3 mt-2">
  420.                         <a class="btn btn-block btn-primary rounded-0" data-toggle="tab" href="#mhr1" role="button">
  421.                             <i class="fas fa-user"></i> Main info
  422.                         </a>
  423.                     </li>
  424.                    
  425.                     <li class="col-12 col-md-6 col-lg-3 mt-2">
  426.                         <a class="btn btn-block btn-primary rounded-0" data-toggle="tab" href="#mhr2" role="button">
  427.                             <i class="fas fa-book-open"></i> Backstory/Bio
  428.                         </a>
  429.                     </li>
  430.                    
  431.                     <li class="col-12 col-md-6 col-lg-3 mt-2">
  432.                         <a class="btn btn-block btn-primary rounded-0" data-toggle="tab" href="#mhr3" role="button">
  433.                             <i class="fas fa-question"></i> Misc. Info
  434.                         </a>
  435.                     </li>
  436.                    
  437.                     <li class="col-12 col-md-6 col-lg-3 mt-2">
  438.                         <a class="btn btn-block btn-primary rounded-0" data-toggle="tab" href="#mhr4" role="button">
  439.                             <i class="fas fa-link"></i> Relationships
  440.                         </a>
  441.                     </li>
  442.                 </ul>
  443.                
  444.             </div>
  445.            
  446.             <!--end navs-->
  447.            
  448.         </div>
  449.        
  450.     </div>
  451.    
  452.    
  453.     <!--Credit. You may move it, but please do not delete/remove-->
  454.    
  455.     <p style="text-align:right">HTML by <a href="https://toyhou.se/10755461"><i class='fad fa-heart'></i> Jade-Everstone</a></p>
  456.    
  457. </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!