API tools faq
paste
Jade-Everstone

Doin Well (dark)

Jade-Everstone
Apr 22nd, 2022 (edited)
1,399
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.25 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2.  
  3. <!--Rules:
  4.  
  5. Dark Vers.
  6.  
  7. You may
  8. -frankenstein with other codes (as long as the creator of said code allows it)
  9. -edit/change as much as you need (example: making character codes into user codes, vice-versa)
  10.  
  11. You may not
  12. -Redistribute, resell, and/or claim its yours
  13. -Remove credit (you're allowed to move & edit it though, just keep it visible)
  14.  
  15. Misc Notes:
  16. -When editing, remember to turn WYSIWYG off! My codes may break otherwise
  17. -Some basic html knowledge is recommended for editing
  18.  
  19. Default Colors:
  20. -Headers, links: #cc5776
  21. -Card background: rgba(10,2,20,0.95)
  22. -Footer/credit-section background: #010003
  23. -Text: Text white
  24.  
  25. Change the colors: Ctrl+f and search for the color you want to change.
  26.  
  27. -->
  28.  
  29.  
  30. <!--background
  31.  
  32. you can delete the bg if you don't need it-->
  33.  
  34. <div style="
  35.    background-image:url(https://images.unsplash.com/photo-1475687628081-a6cdfccba7ae?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80);
  36.    background-attachment:fixed;
  37.    background-size:cover;
  38.    background-position:center;
  39.    z-index:-20;
  40.    height:100%;
  41.    width:100%;
  42.    position:absolute;
  43.    left:0px;
  44.    right:0px;
  45.    top:0;
  46.    bottom:0;
  47.    margin-top:-15px;
  48.    min-height:695px;
  49.    box-shadow: 3px 3px 5px rgba(0,0,0,0.5);background-color:rgba(10,2,20,0.95)">
  50. </div>
  51.  
  52. <!--end background-->
  53.  
  54.  
  55. <div class="container" style="max-width:900px">
  56.    
  57.    
  58.     <!--Main info & socials-->
  59.    
  60.     <div class="card border-0 rounded-0 my-3 text-white" style="box-shadow: 1px 1px 5px rgba(0,0,0,0.5);background-color:rgba(10,2,20,0.95)">
  61.        
  62.         <h2 class="card-header text-white border-0" style="border-radius:0px;background-color:#cc5776">
  63.             <i class="fa-solid fa-heart"></i> Name - Pro/Noun - misc.
  64.         </h2>
  65.        
  66.         <div class="row">
  67.            
  68.             <!--Profile blurb-->
  69.             <div class="col-12 col-sm-7 col-lg-8 order-2 order-md-1">
  70.                 <div class="card-body table-responsive p-3" style="max-height:250px">
  71.                     <p>Have a lot of info? This section will scroll</p>
  72.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt elit non velit bibendum, egestas ullamcorper mauris efficitur. Integer viverra mauris a nunc vestibulum vestibulum. Aliquam cursus, tortor vitae tincidunt convallis, purus risus imperdiet leo, nec eleifend lectus nibh vitae lacus.</p>
  73.                    
  74.                     <p>Phasellus euismod venenatis ante, a rhoncus urna luctus quis. Nullam vehicula euismod nunc sed malesuada.</p>
  75.                    
  76.                    
  77.                    
  78.                 </div>
  79.             </div>
  80.            
  81.             <!--Image-->
  82.             <div class="col-12 col-sm-5 col-lg-4 order-1 order-md-2">
  83.                 <div class="card border-0 bg-transparent rounded-0" style="height:250px;
  84.                    background-image:url(https://via.placeholder.com/250px);
  85.                    background-size:cover;
  86.                    background-position:top;
  87.                    background-repeat:none;
  88.                    ">
  89.                    
  90.                     <!--image credit(s)-->
  91.                    
  92.                     <p style="position:absolute;top:3px;right:4px;letter-spacing:3px">
  93.                         <a href="#" class="text-white" data-toggle="tooltip" title="Character - " style="font-size:16px;text-shadow: 0px 1px 3px #000000">
  94.                         <i class="fas fa-user"></i>
  95.                         </a>
  96.                        
  97.                         <a href="#" class="text-white" data-toggle="tooltip" title="img - credit"  style="font-size:16px;text-shadow: 0px 1px 3px #000000">
  98.                         <i class="fas fa-image"></i>
  99.                         </a>
  100.                     </p>
  101.                    
  102.                 </div>
  103.             </div>
  104.            
  105.         </div>
  106.        
  107.        
  108.         <!--Socials-->
  109.        
  110.         <div class="card border-0 p-2" style="border-radius:0px;text-align:center;font-size:20px;letter-spacing:15px;background-color:#010003">
  111.             <p>
  112.                
  113.                
  114.                 <a href="#" style="color:#cc5776" data-toggle="tooltip" title="Twitter"><i class="fa-brands fa-twitter"></i></a>
  115.                
  116.                 <a href="#" style="color:#cc5776" data-toggle="tooltip" title="Instagram"><i class="fa-brands fa-instagram"></i></a>
  117.                
  118.                 <a href="#" style="color:#cc5776" data-toggle="tooltip" title="DeviantArt"><i class="fa-brands fa-deviantart"></i></a>
  119.                
  120.                 <a href="#" style="color:#cc5776" data-toggle="tooltip" title="Tumblr"><i class="fa-brands fa-tumblr"></i></a>
  121.                
  122.                 <a href="#" data-toggle="tooltip" style="color:#cc5776" title="Artfight"><i class="fa-solid fa-paintbrush-pencil"></i></a>
  123.                
  124.                 <a href="#" data-toggle="tooltip" style="color:#cc5776" title="Carrd"><i class='fa-solid fa-address-card'></i></a>
  125.                
  126.             </p>
  127.            
  128.         </div>
  129.     </div>
  130.    
  131.     <!--end Main info & socials-->
  132.    
  133.    
  134.     <!--Stats & Misc Notes-->
  135.    
  136.     <div class="row">
  137.        
  138.         <div class="col-12 col-md-6 mb-3">
  139.             <div class="card border-0 rounded-0 mb-3 h-100 text-white" style="box-shadow: 1px 1px 5px rgba(0,0,0,0.5);background-color:rgba(10,2,20,0.95)">
  140.                 <h2 class="card-header text-white border-0" style="border-radius:0px;background-color:#cc5776">
  141.                     <i class="fa-duotone fa-chart-pie"></i> Status
  142.                 </h2>
  143.                 <div class="card-body p-3">
  144.                    
  145.                     <div class="row">
  146.                        
  147.                         <div class="col-6 mb-3">
  148.                             <b>Requests</b>
  149.                         </div>
  150.                         <div class="col-6 mb-3">
  151.                             status
  152.                         </div>
  153.                        
  154.                        
  155.                         <div class="col-6 mb-3">
  156.                             <b>Trades</b>
  157.                         </div>
  158.                         <div class="col-6 mb-3">
  159.                             status
  160.                         </div>
  161.                        
  162.                        
  163.                         <div class="col-6 mb-3">
  164.                             <b>Commissions</b>
  165.                         </div>
  166.                         <div class="col-6 mb-3">
  167.                             status
  168.                         </div>
  169.                        
  170.                     </div>
  171.                    
  172.                     <hr>
  173.                    
  174.                     A tl:dr of what you're working on, or if you're taking a break, busy with life stuff, etc. Both these sections will expand btw
  175.                    
  176.                 </div>
  177.             </div>
  178.         </div>
  179.        
  180.         <div class="col-12 col-md-6 mb-3">
  181.             <div class="card border-0 rounded-0 mb-3 h-100 text-white" style="box-shadow: 1px 1px 5px rgba(0,0,0,0.5);background-color:rgba(10,2,20,0.95)">
  182.                 <h2 class="card-header text-white border-0" style="border-radius:0px;background-color:#cc5776">
  183.                     <i class="fa-duotone fa-sparkles"></i> Misc notes
  184.                 </h2>
  185.                 <div class="card-body p-3">
  186.                     <p><i class="fa fa-dot-circle"></i> Extra info a la profile CWs, fun facts about yourself, what is and isn't for offers, and so on
  187.                     </p>
  188.                    
  189.                     <p><i class="fa fa-dot-circle"></i> I would recommend not putting revealing info here though. Safety first yunno
  190.                    
  191.                     <p><i class="fa fa-dot-circle"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  192.                     </p>
  193.                    
  194.                 </div>
  195.             </div>
  196.         </div>
  197.     </div>
  198.    
  199.     <!--end Stats & Misc Notes-->
  200.    
  201.    
  202.     <!--Featured Characters-->
  203.    
  204.     <div class="card border-0 rounded-0 my-3 text-white" style="box-shadow: 1px 1px 5px rgba(0,0,0,0.5);background-color:rgba(10,2,20,0.95)">
  205.         <h2 class="card-header text-white border-0" style="border-radius:0px;background-color:#cc5776">
  206.             <i class="fa-duotone fa-user-group"></i> Featured Characters
  207.         </h2>
  208.        
  209.         <div class="card-body p-3">
  210.            
  211.             <!--Optional CW:
  212.            Copy-paste this on the featured character card in the image section:
  213.            
  214.            <span class="text-white" style="position:absolute; top:2px; right:5px; font-size:25px;text-shadow:;text-shadow: 0px 1px 3px #000000" data-toggle="tooltip" title="Content Warning"><i class="fas fa-exclamation-triangle"></i> </span>
  215.  
  216.            -->
  217.            
  218.             <!--featured characters-->
  219.            
  220.             <div class="row">
  221.                
  222.                 <!--Character 1-->
  223.                 <div class="col-10 col-sm-4 col-md-5 col-lg-3 mt-2">
  224.                     <div class="card border-0 rounded-0" style="
  225.                        background-color:#cc5776;
  226.                        box-shadow: 1px 1px 5px rgba(0,0,0,0.5)">
  227.                        
  228.                         <div class="card bg-transparent border-0 rounded-0" style="
  229.                        height:200px;
  230.                        background-image:url(https://via.placeholder.com/250);
  231.                        background-size:cover;
  232.                        background-position:center">
  233.                            
  234.                             <!--content warning goes here-->
  235.                             <span class="text-white" style="position:absolute; top:2px; right:5px; font-size:25px;text-shadow:;text-shadow: 0px 1px 3px #000000" data-toggle="tooltip" title="CW - (warnings)"><i class="fas fa-exclamation-triangle"></i> </span>
  236.                            
  237.                         </div>
  238.                        
  239.                         <div class="card-body p-1" style="font-size:1.4em;text-align:center">
  240.                             <a href="#" class="text-white" style="text-transform:uppercase;">Character</a>
  241.                            
  242.                         </div>
  243.                     </div>
  244.                 </div>
  245.                
  246.                
  247.                 <!--Character 2-->
  248.                 <div class="col-10 col-sm-4 col-md-5 col-lg-3 mt-2">
  249.                     <div class="card border-0 rounded-0" style="
  250.                        background-color:#cc5776;
  251.                        box-shadow: 1px 1px 5px rgba(0,0,0,0.5)">
  252.                        
  253.                         <div class="card bg-transparent border-0 rounded-0" style="
  254.                        height:200px;
  255.                        background-image:url(https://via.placeholder.com/250);
  256.                        background-size:cover;
  257.                        background-position:center">
  258.                            
  259.                             <!--content warning goes here-->
  260.                            
  261.                         </div>
  262.                        
  263.                         <div class="card-body p-1" style="font-size:1.4em;text-align:center">
  264.                             <a href="#" class="text-white" style="text-transform:uppercase;">Character</a>
  265.                            
  266.                         </div>
  267.                     </div>
  268.                 </div>
  269.                
  270.                
  271.                 <!--Character 3-->
  272.                 <div class="col-10 col-sm-4 col-md-5 col-lg-3 mt-2">
  273.                     <div class="card border-0 rounded-0" style="
  274.                        background-color:#cc5776;
  275.                        box-shadow: 1px 1px 5px rgba(0,0,0,0.5)">
  276.                        
  277.                         <div class="card bg-transparent border-0 rounded-0" style="
  278.                        height:200px;
  279.                        background-image:url(https://via.placeholder.com/250);
  280.                        background-size:cover;
  281.                        background-position:center">
  282.                            
  283.                             <!--content warning goes here-->
  284.                            
  285.                         </div>
  286.                        
  287.                         <div class="card-body p-1" style="font-size:1.4em;text-align:center">
  288.                             <a href="#" class="text-white" style="text-transform:uppercase;">Character</a>
  289.                            
  290.                         </div>
  291.                     </div>
  292.                 </div>
  293.                
  294.                
  295.                 <!--Character 4-->
  296.                 <div class="col-10 col-sm-4 col-md-5 col-lg-3 mt-2">
  297.                     <div class="card border-0 rounded-0" style="
  298.                        background-color:#cc5776;
  299.                        box-shadow: 1px 1px 5px rgba(0,0,0,0.5)">
  300.                        
  301.                         <div class="card bg-transparent border-0 rounded-0" style="
  302.                        height:200px;
  303.                        background-image:url(https://via.placeholder.com/250);
  304.                        background-size:cover;
  305.                        background-position:center">
  306.                            
  307.                             <!--content warning goes here-->
  308.                            
  309.                         </div>
  310.                        
  311.                         <div class="card-body p-1" style="font-size:1.4em;text-align:center">
  312.                             <a href="#" class="text-white" style="text-transform:uppercase;">Character</a>
  313.                            
  314.                         </div>
  315.                     </div>
  316.                 </div>
  317.                
  318.             </div>
  319.            
  320.         </div>
  321.        
  322.     </div>
  323.    
  324.     <!--end Featured Characters-->
  325.    
  326.    
  327.     <!--Credit. You may move, but please don't remove-->
  328.    
  329.     <p class="p-1 text-white" style="text-align:right;box-shadow: 1px 1px 5px rgba(0,0,0,0.5);background-color:#010003;margin:auto">HTML by <a href="https://toyhou.se/15783806" style="color:#cc5776"><i class='fa fa-heart'></i> Jade-Everstone</a> // bg - <a href="https://unsplash.com/photos/0RPE-kbAs5I" style="color:#cc5776">Unsplash</a></p>
  330.    
  331.     <hr style="visibility:hidden">
  332.    
  333. </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!