API tools faq
paste
Jade-Everstone

2000 and late (cc - grey steel)

Jade-Everstone
Jun 9th, 2021 (edited)
310
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 19.81 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. -Text sections (bio/backstory & main info) start off the same height as the smaller panels & will expand as you add info.
  17.  
  18. (Grey steel theme) Default colors:
  19. -Headers & img card bgs: #7988a8
  20. -Header text, img. credit: #ffffff
  21. -Links & subheaders: #6b6fd6
  22. -Card bg: #ffffff
  23. -Card borders: #575f73
  24. -Text: #32383d
  25.  
  26. -Gradient (card body): rgba(0,0,0,0), rgba(0,0,0,0.1)
  27. -Gradient (card body alt.): rgba(0,0,0,0.2), rgba(0,0,0,0.3)
  28. -Gradient (headers): rgba(0,0,0,0), rgba(0,0,0,0.3)
  29.  
  30. Change the colors: Ctrl+f and search for the color you want to change.
  31. -Gradients use RGBA colors. Last number in an RGBA color changes the opacity (eg: 0- transparent. 0.5- semi-transparent. 1- solid)
  32.  
  33. -->
  34.  
  35.  
  36. <div class="container" style="max-width:1050px">
  37.    
  38.     <div class="row">
  39.        
  40.         <!--Basic info-->
  41.        
  42.         <div class="col-12 col-lg-8 mb-2 order-2 order-lg-1">
  43.             <div class="card h-100" style="
  44.                border-width:2px;
  45.                border-radius:6px;
  46.                background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.1));
  47.                box-shadow: 0px 2px 3px #000000;
  48.                background-color:#ffffff;
  49.                border-color:#575f73;
  50.                color:#32383d
  51.                ">
  52.                
  53.                 <!--Header-->
  54.                
  55.                 <div class="card-header p-2" style="
  56.                border-width:2px;
  57.                background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3));
  58.                background-color:#7988a8;
  59.                ">
  60.                     <p><span style="font-size:20px;font-weight:bold;color:#ffffff"><i class="fas fa-stars"></i> Character Name</span></p>
  61.                 </div>
  62.                
  63.                
  64.                 <!--body/info-->
  65.                
  66.                 <div class="card-body p-2">
  67.                     <p class="mb-1" style="font-size:20px;font-weight:bold;color:#6b6fd6">About</p>
  68.                    
  69.                     <p>Have a lot of info? This section will expand!</p>
  70.                    
  71.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate congue odio sit amet egestas. Mauris non turpis quis purus commodo semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin feugiat leo sit amet nisi sagittis feugiat. Integer in ipsum eu erat maximus pulvinar. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  72.                    
  73.                     <p class="mb-1" style="font-size:20px;font-weight:bold;color:#6b6fd6">Trivia</p>
  74.                    
  75.                     <ul>
  76.                         <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
  77.                         <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>
  78.                         <li>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</li>
  79.                     </ul>
  80.                    
  81.                 </div>
  82.             </div>
  83.         </div>
  84.        
  85.         <!--end Basic info-->
  86.        
  87.        
  88.         <!--Main pic/breif info-->
  89.        
  90.         <div class="col-12 col-lg-4 mb-2 order-1">
  91.             <div class="card" style="
  92.                border-width:2px;
  93.                border-radius:6px;
  94.                box-shadow: 0px 2px 3px #000000;
  95.                border-color:#575f73
  96.                ">
  97.                 <div class="card-header" style="
  98.                    height:300px;
  99.                    background-color:#7988a8;
  100.                    background-image:url(https://via.placeholder.com/500px);
  101.                    background-size:cover;
  102.                    background-repeat:no-repeat;
  103.                    background-position:center">
  104.                    
  105.                     <!--Image credit-->
  106.                    
  107.                     <a href="#" data-toggle="tooltip" title="img credit" style="color:#ffffff;position:absolute;top:2px;right:6px;font-size:16px;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
  108.                    
  109.                 </div>
  110.                
  111.                
  112.                 <!--basic info-->
  113.                
  114.                 <div class="card py-1 px-3 border-0 rounded-0" style="background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.1));background-color:#ffffff;color:#32383d">
  115.                     <span><i class="fas fa-transgender-alt"></i> Gender, Pro/noun</span>
  116.                 </div>
  117.                
  118.                 <div class="card py-1 px-3 border-0 rounded-0" style="background-image:linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.3));background-color:#ffffff;color:#32383d">
  119.                     <span><i class="fas fa-paw"></i> Species / Race</span>
  120.                 </div>
  121.                
  122.                 <div class="card py-1 px-3 border-0 rounded-0" style="background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.1));background-color:#ffffff;color:#32383d">
  123.                     <span><i class="fas fa-birthday-cake"></i> Birthday</span>
  124.                 </div>
  125.                
  126.                 <div class="card py-1 px-3 border-0 rounded-0" style="background-image:linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.3));background-color:#ffffff;color:#32383d">
  127.                     <span><i class="fas fa-heart"></i> Likes</span>
  128.                 </div>
  129.                
  130.                 <div class="card py-1 px-3 border-0 rounded-0" style="background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.1));background-color:#ffffff;color:#32383d">
  131.                     <span><i class="fas fa-heart-broken"></i> Dislikes</span>
  132.                 </div>
  133.                
  134.             </div>
  135.         </div>
  136.        
  137.         <!--end Main pic/breif info-->
  138.        
  139.        
  140.         <!--Pic 2-->
  141.        
  142.         <div class="col-12 col-lg-3 mb-2 order-3">
  143.             <div class="card h-100" style="
  144.                border-width:2px;
  145.                border-radius:6px;
  146.                box-shadow: 0px 2px 3px #000000;
  147.                background-color:#7988a8;
  148.                background-image:url(https://via.placeholder.com/500px);
  149.                background-size:cover;
  150.                background-repeat:no-repeat;
  151.                background-position:center;
  152.                min-height:300px;
  153.                max-height:500px;
  154.                border-color:#575f73
  155.                ">
  156.                
  157.                 <!--Image credit-->
  158.                    
  159.                 <a href="#" data-toggle="tooltip" title="img credit" style="color:#ffffff;position:absolute;top:2px;right:6px;font-size:16px;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
  160.                    
  161.             </div>
  162.         </div>
  163.        
  164.         <!--end Pic 2-->
  165.        
  166.        
  167.         <!--Bio/backstory-->
  168.        
  169.         <div class="col-12 col-lg-9 mb-2 order-4">
  170.            
  171.             <div class="card h-100" style="
  172.                border-width:2px;
  173.                border-radius:6px;
  174.                background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.1));
  175.                box-shadow: 0px 2px 3px #000000;
  176.                background-color:#ffffff;
  177.                color:#32383d;
  178.                border-color:#575f73
  179.                ">
  180.                
  181.                 <!--Header-->
  182.                
  183.                 <div class="card-header p-2" style="
  184.                border-width:2px;
  185.                background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3));
  186.                background-color:#7988a8
  187.                ">
  188.                     <p><span style="font-size:20px;font-weight:bold;color:#ffffff"><i class="fas fa-books"></i> Bio/Backstory</span></p>
  189.                 </div>
  190.                
  191.                
  192.                 <!--body/info-->
  193.                
  194.                 <div class="card-body p-2">
  195.                    
  196.                     <p>Have a lot of info? This section will expand!</p>
  197.                    
  198.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate congue odio sit amet egestas. Mauris non turpis quis purus commodo semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin feugiat leo sit amet nisi sagittis feugiat. Integer in ipsum eu erat maximus pulvinar. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam blandit risus sit amet dignissim gravida. Sed ac lacus vitae sem iaculis egestas. Nunc imperdiet libero sit amet maximus malesuada. Mauris vel odio vitae arcu blandit rutrum.</p>
  199.                    
  200.                     <p class="mb-1" style="font-size:20px;font-weight:bold;color:#6b6fd6">(sub-header)</p>
  201.                    
  202.                     <p>Sed sit amet diam est. Cras tempor dui dolor, et laoreet tortor congue at. Proin eget metus enim. Ut porta interdum purus. Fusce faucibus gravida metus. Nulla pellentesque nunc mauris, a sollicitudin orci blandit vitae. Donec sollicitudin enim a elementum sollicitudin. Mauris pretium maximus tortor, sed tristique ex laoreet in. Fusce malesuada eros in massa porttitor, eu dignissim dui ultrices. Phasellus varius faucibus fringilla. Pellentesque neque sem, sodales a risus et, tincidunt consectetur turpis. Etiam accumsan, sem id aliquet luctus, augue arcu malesuada nisl, vestibulum mattis ante est quis nibh. Proin id bibendum diam, vel aliquet nunc. In nec arcu cursus, consequat quam eget, pretium massa. Vivamus accumsan dignissim est, sit amet sagittis lectus iaculis interdum. </p>
  203.                    
  204.                    
  205.                 </div>
  206.             </div>
  207.            
  208.         </div>
  209.        
  210.         <!--end Bio/backstory-->
  211.        
  212.        
  213.         <!--Relationships-->
  214.        
  215.         <div class="col-12 col-lg-8 mb-2 order-6 order-lg-5">
  216.            
  217.             <div class="card h-100" style="
  218.                border-width:2px;
  219.                border-radius:6px;
  220.                box-shadow: 0px 2px 3px #000000;;
  221.                border-color:#575f73
  222.                ">
  223.                
  224.                 <!--Header-->
  225.                
  226.                 <div class="card-header p-2" style="
  227.                border-width:2px;
  228.                background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3));
  229.                background-color:#7988a8
  230.                ">
  231.                     <p><span style="font-size:20px;font-weight:bold;color:#ffffff"><i class="fas fa-link"></i> Relationships</span></p>
  232.                 </div>
  233.                
  234.                
  235.                 <!--Relationship 1-->
  236.                
  237.                 <div class="card border-right-0 border-left-0 rounded-0" style="background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.1));background-color:#ffffff;color:#32383d">
  238.                     <div class="row no-gutters">
  239.                     <div class="col-12 col-sm-2">
  240.                         <div class="card bg-faded border-0" style="
  241.                            height:110px;
  242.                            max-width:110px;
  243.                            background-image:url(https://via.placeholder.com/150);
  244.                            background-size:cover;
  245.                            margin-left:auto;
  246.                            margin-right:auto;
  247.                            "></div>
  248.                     </div>
  249.                    
  250.                     <div class="col-12 col-sm-10">
  251.                        
  252.                         <a href="#" class="mb-1 ml-2" style="font-size:20px;font-weight:bold;color:#6b6fd6">Character name</a>
  253.                         <span class="faded"> - (relationship)</span>
  254.                        
  255.                         <div class="card-body p-2">
  256.                            
  257.                             <p>These sections will expand, however for the best look I suggest keeping your info breif (2-3 lines max)</p>
  258.                            
  259.                         </div>
  260.                     </div>
  261.                 </div>
  262.                 </div>
  263.                
  264.                
  265.                 <!--Relationship 2-->
  266.                
  267.                 <div class="card border-right-0 border-left-0 rounded-0" style="background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.1));background-color:#ffffff;color:#32383d">
  268.                     <div class="row no-gutters">
  269.                     <div class="col-12 col-sm-2">
  270.                         <div class="card bg-faded border-0" style="
  271.                            height:110px;
  272.                            max-width:110px;
  273.                            background-image:url(https://via.placeholder.com/150);
  274.                            background-size:cover;
  275.                            margin-left:auto;
  276.                            margin-right:auto;"></div>
  277.                     </div>
  278.                    
  279.                     <div class="col-12 col-sm-10">
  280.                        
  281.                         <a href="#" class="mb-1 ml-2" style="font-size:20px;font-weight:bold;color:#6b6fd6">Character name</a>
  282.                         <span class="faded"> - (relationship)</span>
  283.                        
  284.                         <div class="card-body p-2">
  285.                            
  286.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate congue odio sit amet egestas. Mauris non turpis quis purus commodo semper.</p>
  287.                            
  288.                         </div>
  289.                     </div>
  290.                 </div>
  291.                 </div>
  292.                
  293.                
  294.                 <!--Relationship 3-->
  295.                
  296.                 <div class="card border-right-0 border-left-0 rounded-0" style="background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.1));background-color:#ffffff;color:#32383d">
  297.                     <div class="row no-gutters">
  298.                     <div class="col-12 col-sm-2">
  299.                         <div class="card bg-faded border-0" style="
  300.                            height:110px;
  301.                            max-width:110px;
  302.                            background-image:url(https://via.placeholder.com/150);
  303.                            background-size:cover;
  304.                            margin-left:auto;
  305.                            margin-right:auto;"></div>
  306.                     </div>
  307.                    
  308.                     <div class="col-12 col-sm-10">
  309.                        
  310.                         <a href="#" class="mb-1 ml-2" style="font-size:20px;font-weight:bold;color:#6b6fd6">Character name</a>
  311.                         <span class="faded"> - (relationship)</span>
  312.                        
  313.                         <div class="card-body p-2">
  314.                            
  315.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate congue odio sit amet egestas. Mauris non turpis quis purus commodo semper. </p>
  316.                            
  317.                         </div>
  318.                     </div>
  319.                 </div>
  320.                 </div>
  321.                
  322.             </div>
  323.         </div>
  324.        
  325.         <!--end Relationships-->
  326.        
  327.        
  328.         <!--Pic 3-->
  329.        
  330.         <div class="col-12 col-lg-4 mb-2 order-5 order-lg-6">
  331.             <div class="card h-100" style="
  332.                border-width:2px;
  333.                border-radius:6px;
  334.                box-shadow: 0px 2px 3px #000000;
  335.                background-color:#7988a8;
  336.                background-image:url(https://via.placeholder.com/500px);
  337.                background-size:cover;
  338.                background-repeat:no-repeat;
  339.                background-position:center;
  340.                min-height:300px;
  341.                max-height:500px;
  342.                border-color:#575f73
  343.                ">
  344.                
  345.                 <!--Image credit-->
  346.                    
  347.                 <a href="#" data-toggle="tooltip" title="img credit" style="color:#ffffff;position:absolute;top:2px;right:6px;font-size:16px;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
  348.                    
  349.             </div>
  350.         </div>
  351.        
  352.         <!--end Pic 3-->
  353.        
  354.        
  355.        
  356.         <!--BLANK PANEL TEMPLATES
  357.        Added these in incase anyone wants to make their own custom panels. Some ideas include playlists, moodboards, stamp/ribbon collections.
  358.        
  359.        To change the order each panel shows up, change the order classes (order-x for how they'll show up on mobile screens, order-lg-x for how they'll show up on larger screens)
  360.        I strongly suggest if editing these, use a code previewer/editor-->
  361.        
  362.             <!--(blank header template)-->
  363.        
  364.         <div class="col-12 col-lg-6 mb-2 order-7 order-lg-7">
  365.            
  366.             <div class="card h-100" style="
  367.                border-width:2px;
  368.                border-radius:6px;
  369.                background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.1));
  370.                box-shadow: 0px 2px 3px #000000;
  371.                background-color:#ffffff;
  372.                color:#32383d;
  373.                border-color:#575f73
  374.                ">
  375.                
  376.                
  377.                 <!--Panel Header-->
  378.                
  379.                 <div class="card-header p-2" style="
  380.                border-width:2px;
  381.                background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3));
  382.                background-color:#7988a8
  383.                ">
  384.                     <p><span style="font-size:20px;font-weight:bold;color:#ffffff"><i class="fas fa-palette"></i> Header Text</span></p>
  385.                 </div>
  386.                
  387.                
  388.                 <!--Panel content-->
  389.                
  390.                 <div class="card-body p-2">
  391.                    
  392.                    
  393.                    
  394.                 </div>
  395.                
  396.             </div>
  397.         </div>
  398.        
  399.        
  400.             <!--(blank image template)-->
  401.        
  402.         <div class="col-12 col-lg-6 mb-2 order-8 order-lg-8">
  403.             <div class="card" style="
  404.                min-height:300px;
  405.                background-color:#7988a8;
  406.                background-image:url(https://via.placeholder.com/500px);
  407.                background-size:cover;
  408.                background-repeat:no-repeat;
  409.                background-position:center;
  410.                border-width:2px;
  411.                border-radius:6px;
  412.                box-shadow: 0px 2px 3px #000000;
  413.                border-color:#575f73
  414.                ">
  415.                
  416.                 <!--Image credit-->
  417.                    
  418.                 <a href="#" data-toggle="tooltip" title="img credit" style="color:#ffffff;position:absolute;top:2px;right:6px;font-size:16px;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
  419.                    
  420.             </div>
  421.         </div>
  422.        
  423.     </div>
  424.  
  425.    
  426. <!--Credit. You may move it, but please do not delete/remove-->
  427.  
  428. <p style="text-align:right">HTML by <a href="https://toyhou.se/Jade-Everstone" style="color:#6b6fd6"><i class='fad fa-heart'></i> Jade-Everstone</a></p>
  429.    
  430. </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!