API tools faq
paste
Advertisement
Jade-Everstone

Terminal-esque (cc)

Jade-Everstone
Jul 30th, 2021 (edited)
1,707
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 29.08 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. Default colors:
  18. -Card headers, badges: #343d59
  19. -Card borders: #1e1c2e
  20. -Card backgrounds: rgba(0,0,0,0.9)
  21.  
  22. -Text, Header Text: text-white
  23. -Text Headers, Links, Navs: #5d9db3
  24. -Secondary header: #859499
  25. -Dividers: #3f434d
  26.  
  27. Change the colors: Ctrl+f and search for the color you want to change.
  28. Suggestion: If you're changing the background image & you want to keep the boxes transparent, I suggest using a less-busy image to keep things readable
  29.  
  30. -->
  31.  
  32.  
  33. <div class="container-fluid">
  34.  
  35.  
  36. <!--background img-->
  37.  
  38. <div class="card bg-faded rounded-0" style="
  39.    background-image:url(https://cdn.pixabay.com/photo/2019/09/11/02/23/buildings-4467663_1280.jpg);
  40.    background-size:cover;
  41.    background-position:center;
  42.    box-shadow: 2px 3px 5px rgba(0,0,0,0.5)">
  43.  
  44. <!--end background img-->
  45.  
  46.    
  47.     <!--Content-->
  48.    
  49.     <div class="row p-3">
  50.        
  51.        
  52.         <!--Main image & Navigation section-->
  53.        
  54.         <div class="col-12 col-lg-4">
  55.            
  56.            
  57.             <!--Main image-->
  58.            
  59.             <div class="card mb-3" style="
  60.                height:450px;
  61.                box-shadow: 2px 3px 5px rgba(0,0,0,0.8);
  62.                border-radius:0px;
  63.                background-color:rgba(0,0,0,0.9);
  64.                border-color:#1e1c2e">
  65.                
  66.                 <!--header-->
  67.                
  68.                 <div class="card-header py-1 px-2 text-white" style="font-size:17px;border-radius:0px;
  69.                    background-color:#343d59;
  70.                    border-color:#1e1c2e">
  71.                    
  72.                     <span class="pull-left"><i class="fas fa-camera"></i> Main Pic</span>
  73.                    
  74.                     <span class="pull-right" style="letter-spacing:2px;">
  75.                         <i class="fas fa-minus"></i>
  76.                         <i class="fas fa-window-restore"></i>
  77.                         <i class="fas fa-times"></i>
  78.                     </span>
  79.                    
  80.                 </div>
  81.                
  82.                
  83.                 <!--Image-->
  84.                
  85.                 <div class="card m-3 h-100" style="
  86.                    border-radius:0px;
  87.                    border-width:0px;
  88.                    background-image:url(https://via.placeholder.com/337x382);
  89.                    background-size:cover;
  90.                    box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  91.                    background-position:center top">
  92.                    
  93.                     <!--Image credit-->
  94.                    
  95.                     <a href="#" data-toggle="tooltip" title="img credit" style="color:#ffffff;position:absolute;top:2px;right:6px;font-size:17px;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
  96.                    
  97.                 </div>
  98.                
  99.             </div>
  100.            
  101.             <!--end Main image-->
  102.            
  103.            
  104.             <!--Navigation-->
  105.            
  106.             <div class="card mb-3 mb-lg-0" style="
  107.                height:250px;
  108.                box-shadow: 2px 3px 5px rgba(0,0,0,0.8);
  109.                border-radius:0px;
  110.                background-color:rgba(0,0,0,0.9);
  111.                border-color:#1e1c2e">
  112.                
  113.                
  114.                 <!--header-->
  115.                
  116.                 <div class="card-header py-1 px-2 text-white" style="font-size:17px;border-radius:0px;
  117.                    background-color:#343d59;
  118.                    border-color:#1e1c2e">
  119.                    
  120.                     <span class="pull-right" style="letter-spacing:2px;">
  121.                         <i class="fas fa-minus"></i>
  122.                         <i class="fas fa-window-restore"></i>
  123.                         <i class="fas fa-times"></i>
  124.                     </span>
  125.                    
  126.                     <span class="pull-left"><i class="far fa-compass"></i> Navigation</span>
  127.                    
  128.                 </div>
  129.                
  130.                
  131.                
  132.                 <ul class="nav flex-column m-3">
  133.                    
  134.                    
  135.                     <!--about btn-->
  136.                    
  137.                     <li class="nav-item">
  138.                         <a class="nav-link active btn btn-outline btn-block mb-2 rounded-0" data-toggle="tab" href="#about" style="border-color:#5d9db3;color:#5d9db3">
  139.                             About
  140.                         </a>
  141.                     </li>
  142.                    
  143.                    
  144.                     <!--story btn-->
  145.                    
  146.                     <li class="nav-item">
  147.                         <a class="nav-link btn btn-outline btn-block mb-2 rounded-0" data-toggle="tab" href="#story" style="border-color:#5d9db3;color:#5d9db3">
  148.                             Story
  149.                         </a>
  150.                     </li>
  151.                    
  152.                    
  153.                     <!--design btn-->
  154.                    
  155.                     <li class="nav-item">
  156.                         <a class="nav-link btn btn-outline btn-block mb-2 rounded-0" data-toggle="tab" href="#design" style="border-color:#5d9db3;color:#5d9db3">
  157.                             Design
  158.                         </a>
  159.                     </li>
  160.                    
  161.                    
  162.                     <!--relationships btn-->
  163.                    
  164.                     <li class="nav-item">
  165.                         <a class="nav-link btn btn-outline btn-block mb-2 rounded-0" data-toggle="tab" href="#relate" style="border-color:#5d9db3;color:#5d9db3">
  166.                             Relationships
  167.                         </a>
  168.                     </li>
  169.                    
  170.                 </ul>
  171.                
  172.                
  173.             </div>
  174.            
  175.             <!--end Navigation-->
  176.            
  177.            
  178.         </div>
  179.        
  180.         <!--end Main image & Navigation section-->
  181.        
  182.        
  183.         <!--Info Panel-->
  184.        
  185.         <div class="col-12 col-lg-8">
  186.             <div class="card text-white" style="
  187.                height:715px;
  188.                box-shadow: 2px 3px 5px rgba(0,0,0,0.8);
  189.                border-radius:0px;
  190.                background-color:rgba(0,0,0,0.9);
  191.                border-color:#1e1c2e">
  192.                
  193.                
  194.                 <!--header-->
  195.                
  196.                 <div class="card-header py-1 px-2 text-white" style="font-size:17px;border-radius:0px;
  197.                    background-color:#343d59;
  198.                    border-color:#1e1c2e">
  199.                    
  200.                     <span class="pull-left"> <i class="fas fa-user"></i> Info Panel</span>
  201.                    
  202.                     <span class="pull-right" style="letter-spacing:2px;">
  203.                         <i class="fas fa-minus"></i>
  204.                         <i class="fas fa-window-restore"></i>
  205.                         <i class="fas fa-times"></i>
  206.                     </span>
  207.                    
  208.                 </div>
  209.                
  210.                
  211.                 <div class="tab-content">
  212.                    
  213.                    
  214.                 <!--About-->
  215.                
  216.                 <div class="tab-pane active" id="about">
  217.                 <div class="card-body p-3 table-responsive" style="max-height:675px">
  218.                    
  219.                    
  220.                     <!--basic info-->
  221.                    
  222.                     <span style="font-size:22px;color:#5d9db3"> <i class="fas fa-chevron-right"></i> Basic info _</span>
  223.                    
  224.                     <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#3f434d">
  225.                    
  226.                     <div class="row mb-2" style="max-width:600px;margin-right:auto;margin-left:auto">
  227.                        
  228.                         <div class="col-12 col-sm-6 mt-1">
  229.                             <span class="badge" style="font-size:14px;border-radius:0px;background-color:#343d59">Name</span>
  230.                             <span class="pull-right">Text</span>
  231.                             <hr class="my-1" style="border-style:dashed;border-color:#3f434d">
  232.                         </div>
  233.                        
  234.                         <div class="col-12 col-sm-6 mt-1">
  235.                             <span class="badge" style="font-size:14px;border-radius:0px;background-color:#343d59">Race/species</span>
  236.                             <span class="pull-right">Text</span>
  237.                             <hr class="my-1" style="border-style:dashed;border-color:#3f434d">
  238.                         </div>
  239.                        
  240.                         <div class="col-12 col-sm-6 mt-1">
  241.                             <span class="badge" style="font-size:14px;border-radius:0px;background-color:#343d59">Gender</span>
  242.                             <span class="pull-right">gender pro/oun</span>
  243.                             <hr class="my-1" style="border-style:dashed;border-color:#3f434d">
  244.                         </div>
  245.                        
  246.                         <div class="col-12 col-sm-6 mt-1">
  247.                             <span class="badge" style="font-size:14px;border-radius:0px;background-color:#343d59">Birthday</span>
  248.                             <span class="pull-right">00/00</span>
  249.                             <hr class="my-1" style="border-style:dashed;border-color:#3f434d">
  250.                         </div>
  251.                        
  252.                         <div class="col-12 col-sm-6 mt-1">
  253.                             <span class="badge" style="font-size:14px;border-radius:0px;background-color:#343d59">Title</span>
  254.                             <span class="pull-right">Text</span>
  255.                             <hr class="my-1" style="border-style:dashed;border-color:#3f434d">
  256.                         </div>
  257.                        
  258.                         <div class="col-12 col-sm-6 mt-1">
  259.                             <span class="badge" style="font-size:14px;border-radius:0px;background-color:#343d59">Title</span>
  260.                             <span class="pull-right">Text</span>
  261.                             <hr class="my-1" style="border-style:dashed;border-color:#3f434d">
  262.                         </div>
  263.                        
  264.                        
  265.                     </div>
  266.                    
  267.                     <!--end basic info-->
  268.                    
  269.                    
  270.                     <!--about-->
  271.                    
  272.                     <span style="font-size:22px;color:#5d9db3"> <i class="fas fa-chevron-right"></i> About _</span>
  273.                    
  274.                     <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#3f434d">
  275.                    
  276.                     <p>Have a lot of info? this section will scroll!</p>
  277.                    
  278.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  279.                    
  280.                     <hr style="visibility:hidden">
  281.                    
  282.                     <!--end about-->
  283.                    
  284.                    
  285.                     <div class="row my-3" style="max-width:700px;margin-left:auto;margin-right:auto">
  286.                        
  287.                        
  288.                         <!--likes/dislikes-->
  289.                        
  290.                         <div class="col-12 col-xl-6 mb-3 mb-xl-0">
  291.                            
  292.                            
  293.                             <span style="font-size:20px;color:#859499"> <i class="fal fa-chevron-right"></i> Likes</span>
  294.                             <hr class="mt-0 mb-2" style="border-style:dashed;border-color:#3f434d">
  295.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>
  296.                            
  297.                            
  298.                             <span style="font-size:20px;color:#859499"> <i class="fal fa-chevron-right"></i> Dislikes</span>
  299.                             <hr class="mt-0 mb-2" style="border-style:dashed;border-color:#3f434d">
  300.                             <p>Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</p>
  301.                            
  302.                         </div>
  303.                        
  304.                         <!--end likes/dislikes-->
  305.                        
  306.                        
  307.                         <!--playlist-->
  308.                        
  309.                         <div class="col-12 col-xl-6">
  310.                            
  311.                             <span style="font-size:20px;color:#859499"> <i class="fal fa-chevron-right"></i> Playlist</span>
  312.                             <hr class="mt-0 mb-2" style="border-style:dashed;border-color:#3f434d">
  313.                            
  314.                            
  315.                             <a href="#" style="font-size:17px;color:#5d9db3"> <i class="fas fa-play-circle"></i> Song Title - Artist Name</a><hr class="mt-1 mb-2" style="border-style:dashed">
  316.                            
  317.                             <a href="#" style="font-size:17px;color:#5d9db3"> <i class="fas fa-play-circle"></i> Song Title - Artist Name</a><hr class="mt-1 mb-2" style="border-style:dashed">
  318.                            
  319.                             <a href="#" style="font-size:17px;color:#5d9db3"> <i class="fas fa-play-circle"></i> Song Title - Artist Name</a><hr class="mt-1 mb-2" style="border-style:dashed">
  320.                            
  321.                             <a href="#" style="font-size:17px;color:#5d9db3"> <i class="fas fa-play-circle"></i> Song Title - Artist Name</a><hr class="mt-1 mb-2" style="border-style:dashed">
  322.                            
  323.                             <a href="#" style="font-size:17px;color:#5d9db3"> <i class="fas fa-play-circle"></i> Song Title - Artist Name</a><hr class="mt-1 mb-2" style="border-style:dashed">
  324.                            
  325.                         </div>
  326.                        
  327.                         <!--end playlist-->
  328.                        
  329.                        
  330.                     </div>
  331.                    
  332.                 </div>
  333.                 </div>
  334.                
  335.                 <!--end About-->
  336.                
  337.                
  338.                 <!--Story/Trivia-->
  339.                
  340.                 <div class="tab-pane fade" id="story">
  341.                 <div class="card-body p-3 table-responsive" style="max-height:675px">
  342.                    
  343.                    
  344.                     <!--story-->
  345.                    
  346.                     <span style="font-size:22px;color:#5d9db3"> <i class="fas fa-chevron-right"></i> Story _</span>
  347.                    
  348.                     <hr class="mt-0 mb-2" style="border-style:dashed;border-color:#3f434d">
  349.                    
  350.                     <p>Have a lot of info? this section will scroll!</p>
  351.                    
  352.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mattis id libero eu scelerisque. Etiam purus magna, hendrerit ac aliquam a, porta quis est. Etiam euismod, justo sit amet vehicula hendrerit, orci nisl luctus ante, at venenatis tellus ante quis tortor. Praesent egestas hendrerit eleifend. Etiam eget mollis erat, sed condimentum enim. </p>
  353.                    
  354.                     <p>Nullam iaculis leo in turpis vestibulum, vel eleifend libero auctor. Aliquam quis mollis orci, at aliquam lorem. Maecenas maximus, dolor fermentum maximus tempus, libero nibh viverra ligula, ac ultrices lectus justo vitae lacus. Mauris sodales porttitor nulla, non hendrerit metus pulvinar vel. Nulla dictum finibus enim, scelerisque volutpat arcu molestie ut. </p>
  355.                    
  356.                     <span style="font-size:20px;color:#859499"> <i class="fal fa-chevron-right"></i> (subsection ex)</span>
  357.                     <hr class="mt-0 mb-2" style="border-style:dashed;border-color:#3f434d">
  358.                    
  359.                     <p>Nunc tempus magna quis arcu volutpat, non tincidunt massa viverra. Morbi imperdiet nunc sit amet varius facilisis. Vivamus nec hendrerit eros, placerat rutrum leo. Mauris lacinia est et est sollicitudin, in condimentum nibh porta. Aenean non nulla ex. Vivamus cursus elementum lorem, eget dignissim dui vulputate egestas.</p>
  360.                    
  361.                     <hr style="visibility:hidden">
  362.                    
  363.                     <!--end story-->
  364.                    
  365.                    
  366.                     <!--Trivia-->
  367.                    
  368.                     <span style="font-size:22px;color:#5d9db3"> <i class="fas fa-chevron-right"></i> Trivia _</span>
  369.                    
  370.                     <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#3f434d">
  371.                    
  372.                     <ul>
  373.                         <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
  374.                        
  375.                         <li>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </li>
  376.                         <li>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</li>
  377.                          <ul>
  378.                             <li>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</li>
  379.                         </ul>
  380.                     </ul>
  381.                    
  382.                     <!--end Trivia-->
  383.                    
  384.                    
  385.                 </div>
  386.                 </div>
  387.                
  388.                 <!--end Story/Trivia-->
  389.                
  390.                
  391.                 <!--Design-->
  392.                
  393.                 <div class="tab-pane fade" id="design">
  394.                 <div class="card-body p-3 table-responsive" style="max-height:675px">
  395.                    
  396.                     <!--Refsheet-->
  397.                    
  398.                     <span style="font-size:22px;color:#5d9db3"> <i class="fas fa-chevron-right"></i> Design _</span>
  399.                    
  400.                     <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#3f434d">
  401.                    
  402.                     <div class="card bg-transparent border-0 rounded-0" style="max-width:600px;margin-left:auto;margin-right:auto;box-shadow: 1px 1px 3px rgba(0,0,0,0.5)">
  403.                        
  404.                         <!--Refsheet-->
  405.                        
  406.                         <img src="https://via.placeholder.com/600x371">
  407.                        
  408.                         <!--fullsize link-->
  409.                        
  410.                         <a href="#" data-toggle="tooltip" title="full size" style="color:#ffffff;position:absolute;top:2px;right:6px;font-size:17px;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-external-link"></i> </a>
  411.                        
  412.                     </div>
  413.                    
  414.                     <!--end Refsheet-->
  415.                    
  416.                    
  417.                     <div class="row my-3" style="max-width:700px;margin-left:auto;margin-right:auto">
  418.                        
  419.                        
  420.                         <!--Design trait list-->
  421.                        
  422.                         <div class="col-12 col-xl-5 mb-3 mb-xl-0">
  423.                             <span class="badge" style="font-size:14px;border-radius:0px;background-color:#343d59">Design Trait</span>
  424.                             <span class="pull-right">Note</span>
  425.                             <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#3f434d">
  426.                            
  427.                             <span class="badge" style="font-size:14px;border-radius:0px;background-color:#343d59">Design Trait</span>
  428.                             <span class="pull-right">Note</span>
  429.                             <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#3f434d">
  430.                            
  431.                             <span class="badge" style="font-size:14px;border-radius:0px;background-color:#343d59">Design Trait</span>
  432.                             <span class="pull-right">Note</span>
  433.                             <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#3f434d">
  434.                            
  435.                             <span class="badge" style="font-size:14px;border-radius:0px;background-color:#343d59">Design Trait</span>
  436.                             <span class="pull-right">Note</span>
  437.                             <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#3f434d">
  438.                            
  439.                         </div>
  440.                        
  441.                         <!--end Design trait list-->
  442.                        
  443.                        
  444.                         <!--Design notes-->
  445.                        
  446.                         <div class="col-12 col-xl-7">
  447.                            
  448.                             <span style="font-size:20px;color:#859499"> <i class="fal fa-chevron-right"></i> Design notes</span>
  449.                             <hr class="mt-0 mb-2" style="border-style:dashed;border-color:#3f434d">
  450.                            
  451.                             <ul>
  452.                                 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  453.                                 <li> Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
  454.                                 <li>Donec accumsan tempor lacus, et venenatis elit feugiat non. </li>
  455.                             </ul>
  456.                         </div>
  457.                        
  458.                         <!--end Design notes-->
  459.                        
  460.                        
  461.                     </div>
  462.                    
  463.                 </div>
  464.                 </div>
  465.                
  466.                 <!--end Design-->
  467.                
  468.                
  469.                 <!--Relationships-->
  470.                
  471.                 <div class="tab-pane fade" id="relate">
  472.                 <div class="card-body p-3 table-responsive" style="max-height:675px">
  473.                    
  474.                     <span style="font-size:22px;color:#5d9db3"> <i class="fas fa-chevron-right"></i> Relationships _</span>
  475.                    
  476.                     <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#3f434d">
  477.                    
  478.                    
  479.                     <!--relationship 1-->
  480.                    
  481.                     <div class="row">
  482.                        
  483.                         <!--Link info-->
  484.                        
  485.                         <div class="col-12 col-sm-9 col-md-8 col-xl-9 order-2 order-sm-1">
  486.                             <a href="#" style="font-size:20px;color:#5d9db3">  Character Name</a>
  487.                             <span class="pull-right" style="font-size:17px;color:#859499">(relationship)</span>
  488.                             <hr class="mt-0 mb-2" style="border-style:dashed;border-color:#3f434d">
  489.                             <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
  490.                         </div>
  491.                        
  492.                        
  493.                         <!--image-->
  494.                        
  495.                         <div class="col-12 col-sm-3 col-md-4 col-xl-3 mb-2 mb-sm-0 order-1 order-sm-2">
  496.                             <div class="card bg-transparent border-0" style="max-width:150px;margin-left:auto;margin-right:auto;box-shadow: 1px 1px 3px rgba(0,0,0,0.5)">
  497.                                
  498.                                 <img src="https://via.placeholder.com/150">
  499.                                
  500.                             </div>
  501.                         </div>
  502.                        
  503.                     </div>
  504.                    
  505.                     <hr class="my-2" style="border-style:dashed;border-color:#3f434d">
  506.                    
  507.                     <!--end relationship 1-->
  508.                    
  509.                    
  510.                     <!--relationship 2-->
  511.                    
  512.                     <div class="row">
  513.                        
  514.                         <!--Link info-->
  515.                        
  516.                         <div class="col-12 col-sm-9 col-md-8 col-xl-9 order-2 order-sm-1">
  517.                             <a href="#" style="font-size:20px;color:#5d9db3">  Character Name</a>
  518.                             <span class="pull-right" style="font-size:17px;color:#859499">(relationship)</span>
  519.                             <hr class="mt-0 mb-2" style="border-style:dashed;border-color:#3f434d">
  520.                             <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
  521.                         </div>
  522.                        
  523.                        
  524.                         <!--image-->
  525.                        
  526.                         <div class="col-12 col-sm-3 col-md-4 col-xl-3 mb-2 mb-sm-0 order-1 order-sm-2">
  527.                             <div class="card bg-transparent border-0" style="max-width:150px;margin-left:auto;margin-right:auto;box-shadow: 1px 1px 3px rgba(0,0,0,0.5)">
  528.                                
  529.                                 <img src="https://via.placeholder.com/150">
  530.                                
  531.                             </div>
  532.                         </div>
  533.                        
  534.                     </div>
  535.                    
  536.                     <hr class="my-2" style="border-style:dashed;border-color:#3f434d">
  537.                    
  538.                     <!--end relationship 2-->
  539.                    
  540.                    
  541.                     <!--relationship 3-->
  542.                    
  543.                     <div class="row">
  544.                        
  545.                         <!--Link info-->
  546.                        
  547.                         <div class="col-12 col-sm-9 col-md-8 col-xl-9 order-2 order-sm-1">
  548.                             <a href="#" style="font-size:20px;color:#5d9db3">  Character Name</a>
  549.                             <span class="pull-right" style="font-size:17px;color:#859499">(relationship)</span>
  550.                             <hr class="mt-0 mb-2" style="border-style:dashed;border-color:#3f434d">
  551.                             <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
  552.                         </div>
  553.                        
  554.                        
  555.                         <!--image-->
  556.                        
  557.                         <div class="col-12 col-sm-3 col-md-4 col-xl-3 mb-2 mb-sm-0 order-1 order-sm-2">
  558.                             <div class="card bg-transparent border-0" style="max-width:150px;margin-left:auto;margin-right:auto;box-shadow: 1px 1px 3px rgba(0,0,0,0.5)">
  559.                                
  560.                                 <img src="https://via.placeholder.com/150">
  561.                                
  562.                             </div>
  563.                         </div>
  564.                        
  565.                     </div>
  566.                    
  567.                     <hr class="my-2" style="border-style:dashed;border-color:#3f434d">
  568.                    
  569.                     <!--end relationship 3-->
  570.                    
  571.                    
  572.                 </div>
  573.                 </div>
  574.                
  575.                 <!--end Relationships-->
  576.                
  577.                
  578.                 </div>
  579.                
  580.             </div>
  581.         </div>
  582.        
  583.         <!--end Info Panel-->
  584.        
  585.        
  586.     </div>
  587.    
  588.     <!--end Content-->
  589.    
  590.    
  591. </div>
  592.  
  593.  
  594. <!--Credit. You may move it, but please do not delete/remove-->
  595.  
  596. <p style="text-align:right;margin-top:3px">HTML by <a href="https://toyhou.se/12124942" style="color:#5d9db3"><i class='fad fa-heart'></i> Jade-Everstone</a> //
  597.  
  598. <!--background credit-->
  599.  
  600. bg - <a href="https://pixabay.com/photos/buildings-city-night-city-lights-4467663/" style="color:#5d9db3">Pixabay</a></p>
  601.  
  602.  
  603. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!