API tools faq
paste
OneAlbatross

Mono Chrome

OneAlbatross
Nov 25th, 2022 (edited)
2,642
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.62 KB | None | 0 0
raw download clone embed print report
  1. <!-- ---------------------  CODE BY OneAlbatross  ------------------------
  2. ---- ---------------------------------------------------------------------
  3.  
  4. |[All links, socials, etc]:  https://onealbatross.carrd.co/
  5. |[Tip jar]:  https://ko-fi.com/onealbatross
  6.  
  7. |[How to use Templates - Video Guide by Indianimations]: https://youtu.be/B-X57fmPuPo?t=93
  8.  
  9. |[ Rules ]
  10.        - Modify the code as much as you like but please do not redistribute or claim it as your own.
  11.        - Please DO NOT remove credit regardless of how much you edit/Frankenstein the code.
  12.        - Keep WYSIWYG off while adding or editing code
  13.        - Turn "Enable Code Editor" off if you are on mobile to be able to paste.
  14.  
  15. |[ Info ]
  16.    Color Key Index - use these to find and replace all of one color (ctrl+f -> "All" button -> type your desired #hex color code or rgba() value)
  17.        - MAIN COLOR: #8b8b8b
  18.        - Accent Color 2: #6c6c6c
  19.        - Accent Color 3: #4d4d4d
  20.        - Accent Color 4: #3e3e3e
  21.  
  22. |[ Images ]
  23.    To fill in/replace images:
  24.        - your desired image can be anywhere online like a free image website, your Deviantart stash, Discord, or here on Toyhouse
  25.        - right click the image and select "copy image address" (should end in .png, .jpg, .gif, etc - NOT a .webp)
  26.        - paste this web address within areas like url(LINK_HERE) or src="IMG URL HERE"
  27.        
  28.    - Some info on adjusting images can be seen here: https://toyhou.se/4930674](https://toyhou.se/4930674
  29.  
  30. |[ Icons ]
  31.    - Icons used are from FontAwesome.com and you can find more info here: https://toyhou.se/3536712
  32.    
  33. ---------------------------------------------------------------------------
  34. ----------------------------------------------------------------------- -->
  35. <!--
  36.  
  37. -->
  38.  
  39. <!-- BACKGROUND IMAGE - make sure not to delete the quotes, put your image link inside them ---------------- -->
  40.     <div class="mx-lg-auto mx-3 row " style="background-image:url('https://images.unsplash.com/photo-1577043465285-545dfe19701b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1007&q=80'); margin-top:70px; max-width:450px; border-radius:5px; z-index:-2; color: #8b8b8b; background-size:cover;">
  41.         <div >
  42.        
  43.         <div class="row ml-lg-2 no-gutters w-100">
  44.            
  45.             <div class="col-lg-6">
  46.                 <div class="pb-3 mx-auto mb-lg-n3 shadow-lg" style=" background-image:linear-gradient(rgba(255,255,255,1) 80%, rgba(255,255,255,0)); width:200px; border-radius:5px 5px 0 0; margin-top:-40px;">
  47.                    
  48.                     <div class="p-2 mx-auto" style="border-radius:100%; background-color:white; width:200px; ">
  49. <!-- PROFILE PICTURE - make sure not to delete the quotes, put your image link inside them. You will likely want to adjust the second number in "background-position" to adjust the vertical centering  ---------- -->
  50.                         <div class="" style="width:185px; height:130px; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0'); background-position:0px -20px; border-radius:5px">
  51.                         </div>
  52.                        
  53.                     </div>
  54.                    
  55.                     <div class=" text-center p-2 mb-3" style="z-index:1;">
  56.                        
  57.                         <div class="p-2" style="border-radius:5px; ">
  58.                             <h1 class="pt-1" style="font-weight:500; font-size:28px; line-height:14px; text-shadow: -1px 1px #cdcdcd; color:#0f0f0f">Username</h1>
  59.                             <p style="color:#4d4d4d;">info / info / info</p>
  60.                         </div>
  61.                        
  62.                     </div>
  63.                 </div>
  64.             </div>
  65.            
  66.             <div class="col-lg-6">
  67.                
  68.                 <div class="pb-3 text-center mt-lg-n3 pt-lg-1 pt-3 d-flex justify-content-center mx-4" style="color:white; ">
  69. <!-- LINK SECTION - paste your link between the quotes in href="". Change the <i> icons to any other - more info here: https://toyhou.se/3536712 ---------------- -->
  70.                     <div class="col-3 p-1 py-3 mx-1" style="background-color:#8b8b8b; border-radius:5px; "><a href="LINK_HERE" style="color:#ffffff"><i class="fa-brands fa-instagram fa-xl"></i></a></div>
  71.                     <div class="col-3 p-1 py-3 mx-1" style="background-color:#6c6c6c; border-radius:5px; "><a href="LINK_HERE" style="color:#ffffff"><i class="fa-brands fa-twitter fa-xl"></i></a></div>
  72.                     <div class="col-3 p-1 py-3 mx-1" style="background-color:#4d4d4d; border-radius:5px; "><a href="LINK_HERE" style="color:#ffffff"><i class="fa-brands fa-tumblr fa-xl"></i></a></div>
  73.                     <div class="col-3 p-1 py-3 mx-1" style="background-color:#3e3e3e; border-radius:5px; "><a href="LINK_HERE" style="color:#ffffff"><i class="fa-solid fa-cards-blank fa-xl"></a></i></div>
  74.                 </div>
  75.                
  76.                
  77.                 <div class=" pt-2 ml-lg-3 ml-4 mr-lg-0 mr-4 pb-2">
  78. <!-- STATUS SECTION ---------------- -->
  79.                     <div class="row mb-1" style="background-color: #8b8b8b; border-radius:5px ">
  80.                     <div class="p-1 mb-1 ml-1 col pl-3" style="background-color:white; border-radius:5px 0px 0px 5px; font-weight:500">Commissions <em class="" style="color:#4d4d4d">Status</em></div>
  81.                     <div class="col-auto p-2" style="color:white"><i class="fa-solid fa-store fa-xl" style="width:24px"></i></div>
  82.                     </div>
  83.                    
  84.                     <div class="row mb-1" style="background-color:#6c6c6c; border-radius:5px ">
  85.                     <div class="p-1 mb-1 ml-1  col pl-3" style="background-color:white; border-radius:5px 0px 0px 5px; font-weight:500">Trades <em class="" style="color:#4d4d4d">Status</em></div>
  86.                     <div class="col-auto p-2" style="color:white"><i class="fa-solid fa-arrows-repeat fa-xl" style="width:24px"></i></div>
  87.                     </div>
  88.                    
  89.                     <div class="row mb-1" style="background-color:#4d4d4d; border-radius:5px">
  90.                     <div class="p-1 mb-1 ml-1  col pl-3" style="background-color:white; border-radius:5px 0px 0px 5px; font-weight:500">Requests <em class="" style="color:#4d4d4d">Status</em></div>
  91.                     <div class="col-auto p-2" style="color:white"><i class="fa-solid fa-comment-pen fa-xl" style="width:24px"></i></div>
  92.                     </div>
  93.                        
  94.                 </div>
  95.    
  96.             </div>
  97.         </div>
  98.        
  99.         <div class="row ml-lg-4 ml-0 no-gutters mb-2 mt-lg-0 mt-3 pr-2 pr-lg-0">
  100.            
  101.             <ul class="col-auto ml-n4 ml-lg-n5 mt-2 nav flex-column" style="color:white">
  102. <!-- NAV BAR SECTION ---------------- -->
  103.                 <li class="p-2 pr-3 mr-n2 nav-item" style="background-color:#8b8b8b; border-radius:5px 0px 0px 5px"><a data-toggle="tab" href="#pg1" class="active btn p-0" style="color:#ffffff"><i class="fa-duotone fa-stars"></i></a></li>
  104.                 <li class="p-2 pr-3 mr-n2 nav-item" style="background-color:#6c6c6c; border-radius:5px 0px 0px 5px"><a data-toggle="tab" href="#pg2" class="btn p-0" style="color:#ffffff"><i class="fa-duotone fa-address-card"></i></a></li>
  105.                 <li class="p-2 pr-3 nav-item" style="background-color:#4d4d4d; border-radius:5px 0px 0px 5px"><a data-toggle="tab" href="#pg3" class="btn p-0" style="color:#ffffff"><i class="fa-duotone fa-circle-exclamation"></i></a></li>
  106.             </ul>
  107.  
  108.             <div class="tab-content col ">
  109.                
  110. <!-- TAB ONE ---------------- -->
  111.                 <div class="p-3 pt-3 tab-pane active show" data-toggle="tab" id="pg1" style="background-color:white; box-shadow: -5px 5px; border:solid 2px; border-radius:5px; overflow:auto;">
  112.                                
  113.                     <span><i class="fa-solid fa-clouds"></i> | <span class="" style="font-weight:700">Header</span></span>
  114.                     <p>
  115.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Duis les, eget mattis nibh pellentesque.
  116.                     </p>
  117.                                
  118.                 </div>
  119.                
  120. <!-- TAB TWO ---------------- -->
  121.                 <div class="p-3 pt-3 tab-pane" data-toggle="tab" id="pg2" style="background-color:white; box-shadow: -5px 5px #6c6c6c; border:solid 2px; border-radius:5px; overflow:auto;">
  122.                                
  123.                     <span><i class="fa-solid fa-clouds"></i> | <span class="" style="font-weight:700">Jeader</span></span>
  124.                     <p>
  125.                     Consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Duis les, eget mattis nibh pellentesque.
  126.                     </p>
  127.                                
  128.                 </div>
  129.  
  130. <!-- TAB THREE ---------------- -->
  131.                     <div class="p-3 pt-3 tab-pane" data-toggle="tab" id="pg3" style="background-color:white; box-shadow: -5px 5px #4d4d4d; border:solid 2px; border-radius:5px; overflow:auto;">
  132.                                    
  133.                         <span><i class="fa-solid fa-clouds"></i> | <span class="" style="font-weight:700">Keader</span></span>
  134.                         <p>
  135.                          Duis les, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.
  136.                         </p>
  137.                                    
  138.                     </div>
  139.                 </div>
  140.             </div>
  141.            
  142.         </div>
  143.        
  144.         <div class="row ml-lg-2 no-gutters w-100 mb-4">
  145.            
  146.             <div class="col-lg-6">
  147.                
  148.                 <div class="pb-lg-4 pb-3 mx-auto mt-lg-n1 mt-3 pt-3 shadow-lg" style=" background-image:linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 40%); width:200px; border-radius:0px 0px 5px 5px">
  149.                    
  150.                     <div class="row no-gutters mx-auto pt-3 pl-3" style=" border-radius:4px; ">
  151.  
  152.                         <div class="pl-1 pr-1 pt-1" style="margin-top:-18px">
  153.                                
  154. <!-- MUSIC EMBED LINK ---------------- -->
  155.     <!-- Click the share button on a youtube video, click the EMBED button and copy the url between the src="" quotes and paste it in the src="" here (do not just copy paste the above url - that's a youtu.be link, it doesn't work)-->
  156.     <!-- to get the song to stop and/or start at a specific time, add ?start=0&end=30 to the end of the link - 0 and 30 represent the start and stop time in seconds -->
  157.                                <iframe class="" style="width: 30px; height: 30px; opacity:.01; margin-bottom:-33px;" src=""></iframe>
  158.            
  159.                                <div class="px-2" style="height: 25px; width: 25px; background-color:  #8b8b8b; border-radius:50%"> <!-- this is the icon in the center of the play button --> <i class="fas fa-play " style="color: rgb(250, 250, 250); margin-left:px; margin-top:6px"></i></div>
  160.                         </div>
  161.                        
  162.                         <div class="col"  style="">
  163. <!-- SONG TITLE ---------------- -->
  164.                             <p class=" mb-1" style="font-weight:400; font-size:1.1rem; color: #8b8b8b ">Song Title</p>
  165. <!-- ARTIST(S) ---------------- -->
  166.                             <p class="" style="font-weight:400; font-size:.8rem; margin-top:-10px; color:#4d4d4d;">by <a class="" href="LINK_TO_ARTIST_HERE" style="color:#4d4d4d;">Artist</a></p>
  167.                            
  168.                         </div>
  169.                     </div>
  170.                 </div>
  171.             </div>
  172.            
  173.  
  174.            
  175.             <div class="col-lg-6 mt-lg-3 mt-4">
  176.                
  177.                 <div class="row no-gutters px-lg-0 pl-3 pr-2">
  178.  
  179. <!-- CHARACTER ONE ---------------- -->
  180.                     <div class="col-4 px-1">
  181.                         <div class="w-100" style="filter:grayscale(50%)"> <!-- Get rid of "filter:grayscale(50%)" if you don't want the effect ---------------- -->
  182.                             <a style="color:#8b8b8b" href="LINK_TO_PROFILE"><!-- Link to your character's profile ---------------- -->
  183.                             <img src="LINK_TO_IMAGE" style="box-shadow: -4px 4px; border-radius:5px; background-color: #2e2e2e"><!-- Link to your character's pfp ---------------- -->
  184.                             </a>
  185.                         </div>
  186.                     </div>
  187.                    
  188. <!-- CHARACTER TWO ---------------- -->
  189.                     <div class="col-4 px-1">
  190.                         <div class="w-100" style="filter:grayscale(50%)"> <!-- Get rid of "filter:grayscale(50%)" if you don't want the effect ---------------- -->
  191.                             <a style="color:#8b8b8b" href="LINK_TO_PROFILE"><!-- Link to your character's profile ---------------- -->
  192.                                 <img src="LINK_TO_IMAGE" style="box-shadow: -4px 4px; border-radius:5px; background-color: #2e2e2e"><!-- Link to your character's pfp ---------------- -->
  193.                             </a>
  194.                         </div>
  195.                        
  196.                     </div>
  197.  
  198. <!-- CHARACTER THREE ---------------- -->
  199.                     <div class="col-4 px-1">
  200.                         <div class="w-100" style="filter:grayscale(50%)"> <!-- Get rid of "filter:grayscale(50%)" if you don't want the effect ---------------- -->
  201.                             <a style="color:#8b8b8b" href="LINK_TO_PROFILE"><!-- Link to your character's profile ---------------- -->
  202.                                 <img src="LINK_TO_IMAGE" style="box-shadow: -4px 4px; border-radius:5px; background-color: #2e2e2e"><!-- Link to your character's pfp ---------------- -->
  203.                             </a>
  204.                         </div>
  205.                     </div>
  206.                 </div>
  207.                
  208.             </div>
  209.         </div>
  210.     </div>
  211.    
  212. <!-- CREDIT - DO NOT REMOVE ---------------- --><div class="mx-auto" style="max-width:480px; opacity:50%" ><a href="https://toyhou.se/OneAlbatross/characters/folder:3801186" class="text-decoration-none text-light pull-right pr-3 pt-1" style="font-size:.7rem; " title="Code by OneAlbatross" data-toggle="tooltip" data-placement="bottom" ><i class="fa-solid fa-code"></i></a></div>
  213.    
  214. </div>
  215.  
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!