API tools faq
paste
Jade-Everstone

CharaFetch (bs)

Jade-Everstone
Mar 15th, 2022 (edited)
224
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.61 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2.  
  3. <!--Rules:
  4.  
  5. A very short/breif layout meant to mimic the neofetch terminal application
  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. -header, emphasized text: text-primary, bg-primary
  21. -pallete defaults:
  22.    -#ea5952
  23.    -#eef28c
  24.    -#75e584
  25.    -#427ece
  26.    -#6643a8
  27.    -#d372c6
  28.    
  29. Change the colors: Ctrl+f and search for the color you want to change.
  30.  
  31. -->
  32.  
  33. <div class="container my-5" style="max-width:550px">
  34.    
  35.    
  36.     <!--window-->
  37.    
  38.     <div class="card bg-faded" style="box-shadow: 2px 3px 5px
  39.        rgba(0,0,0,0.5)">
  40.        
  41.        
  42.         <!--header-->
  43.        
  44.         <div class="card-header bg-primary text-white py-1 px-2" style="font-weight:bold;letter-spacing:1px">
  45.            
  46.             <span>Terminal</span>
  47.            
  48.             <span class="pull-right" style="letter-spacing:2px">
  49.                 <i class="fa-solid fa-chevron-down"></i>
  50.                 <i class="fa-solid fa-chevron-up"></i>
  51.                 <i class="fa-solid fa-circle-x"></i>
  52.                
  53.             </span>
  54.         </div>
  55.        
  56.         <!--end header-->
  57.        
  58.        
  59.         <!--main info-->
  60.        
  61.         <div class="card-body p-3">
  62.            
  63.             <span><span class="text-primary" style="font-weight:bold">charaname@ToyhouseOS</span> : ~$
  64.                         neofetch
  65.             </span>
  66.            
  67.            
  68.             <div class="row my-1">
  69.                
  70.                 <!--image-->
  71.                
  72.                 <div class="col-12 col-sm-6">
  73.                     <div class="card bg-transparent border-0">
  74.                         <img src="https://via.placeholder.com/200px" style="max-width:200px;margin-left:auto;margin-right:auto">
  75.                     </div>
  76.                 </div>
  77.                
  78.                 <!--end image-->
  79.                
  80.                
  81.                 <!--main info
  82.                
  83.                if you want to keep it just the pallete/not have anything happen when you hover over them, delete the data-toggle="tooltip" and title="(color)" classes-->
  84.                
  85.                 <div class="col-12 col-sm-6">
  86.                    
  87.                     <span>
  88.                         <span class="text-primary" style="font-weight:bold">charaname</span>
  89.                         @
  90.                         <span class="text-primary" style="font-weight:bold">ToyhouseOS</span>
  91.                     </span>
  92.                    
  93.                     <hr class="my-1" style="border-style:dashed;border-width:2px">
  94.                    
  95.                     <span><span class="text-primary" style="font-weight:bold">Name</span> :
  96.                         Text
  97.                     </span>
  98.                     <br>
  99.                    
  100.                    
  101.                     <span><span class="text-primary" style="font-weight:bold">Gender</span> :
  102.                         text
  103.                     </span>
  104.                     <br>
  105.                    
  106.                    
  107.                     <span><span class="text-primary" style="font-weight:bold">Pronouns</span> :
  108.                         pro-noun
  109.                     </span>
  110.                     <br>
  111.                    
  112.                    
  113.                     <span><span class="text-primary" style="font-weight:bold">Species/Race</span> :
  114.                         Text
  115.                     </span>
  116.                     <br>
  117.                    
  118.                    
  119.                     <span><span class="text-primary" style="font-weight:bold">Birthday</span> :
  120.                         00-00
  121.                     </span>
  122.                     <br>
  123.                    
  124.                    
  125.                     <span><span class="text-primary" style="font-weight:bold">Orientation</span> :
  126.                         Text
  127.                     </span>
  128.                     <br>
  129.                    
  130.                    
  131.                     <span><span class="text-primary" style="font-weight:bold">Designer</span> :
  132.                         Text
  133.                     </span>
  134.                     <br>
  135.                    
  136.                    
  137.                     <span><span class="text-primary" style="font-weight:bold">Title</span> :
  138.                         Text
  139.                     </span>
  140.                     <br>
  141.                    
  142.                    
  143.                     <!--pallete-->
  144.                    
  145.                     <div class="row no-gutters my-2">
  146.                        
  147.                         <!--color 1-->
  148.                         <div class="col-2">
  149.                             <div class="card border-0 rounded-0" data-toggle="tooltip" style="height:25px;
  150.                                background-color:#ea5952"
  151.                                title="#ea5952"></div>
  152.                         </div>
  153.                        
  154.                         <!--color 2-->
  155.                         <div class="col-2">
  156.                             <div class="card border-0 rounded-0" data-toggle="tooltip" style="height:25px;
  157.                                background-color:#eef28c"
  158.                                title="#eef28c"></div>
  159.                         </div>
  160.                        
  161.                         <!--color 3-->
  162.                         <div class="col-2">
  163.                             <div class="card border-0 rounded-0" data-toggle="tooltip" style="height:25px;
  164.                                background-color:#75e584"
  165.                                title="#75e584"></div>
  166.                         </div>
  167.                        
  168.                         <!--color 4-->
  169.                         <div class="col-2">
  170.                             <div class="card border-0 rounded-0" data-toggle="tooltip" style="height:25px;
  171.                                background-color:#427ece"
  172.                                title="#427ece"></div>
  173.                         </div>
  174.                        
  175.                         <!--color 5-->
  176.                         <div class="col-2">
  177.                             <div class="card border-0 rounded-0" data-toggle="tooltip" style="height:25px;
  178.                                background-color:#6643a8"
  179.                                title="#6643a8"></div>
  180.                         </div>
  181.                        
  182.                         <!--color 6-->
  183.                         <div class="col-2">
  184.                             <div class="card border-0 rounded-0" data-toggle="tooltip" style="height:25px;
  185.                                background-color:#d372c6"
  186.                                title="#d372c6"></div>
  187.                         </div>
  188.                        
  189.                     </div>
  190.                    
  191.                 </div>
  192.             </div>
  193.             <span><span class="text-primary" style="font-weight:bold">charaname@ToyhouseOS</span> : ~$
  194.                 <i class="fa-solid fa-rectangle-vertical"></i>
  195.             </span>
  196.         </div>
  197.     </div>
  198.    
  199.     <!--end window-->
  200.    
  201.    
  202.     <!--Credit. You may move it, but please do not delete/remove-->
  203.  
  204.     <p style="text-align:right;margin-top:3px">HTML by <a href="https://toyhou.se/15218563"><i class='fa-solid fa-heart'></i> Jade-Everstone</a>
  205.  
  206. </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!