API tools faq
paste
Jade-Everstone

CharaFetch (cc)

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