API tools faq
paste
Jade-Everstone

Doin Well (light)

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