API tools faq
paste
BappidyBoopidy

Code Siren

BappidyBoopidy
Feb 18th, 2018 (edited)
1,308
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.59 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2. /*
  3.  
  4. ======== !! IMPORTANT !! DO NOT REMOVE ANY PART OF THIS SECTION =========
  5.  
  6.     AUTHOR: Elle
  7.     FOR: Sirena [RPC Profile]
  8.     LANGUAGE: CSS/HTML/JS
  9.     SOURCE: https://pastebin.com/raw/C935JDZ4 -
  10.     REGISTRATION: https://www.copyrighted.com/work/2PKqDybNAqyK7xoN ;
  11.  
  12.  
  13. ######################----########-----------------########------------------######################
  14. ######################----########-----------------########------------------######################
  15. ######################----########-----------------########------------------######################
  16. ########------------------########-----------------########------------------########
  17. ########------------------########-----------------########------------------########
  18. ######################----########-----------------########------------------######################
  19. ######################----########-----------------########------------------######################
  20. ######################----########-----------------########------------------######################
  21. ########------------------########-----------------########------------------########
  22. ########------------------########-----------------########------------------########
  23. ######################----#####################----######################----######################
  24. ######################----#####################----######################----######################
  25. ######################----#####################----######################----######################
  26. */
  27. /*
  28. ============================================================================================================
  29. THE REST OF THE CODE IS KEPT IN MY FILE BUT IT WON'T AFFECT HOW YOUR PROFILE WILL LOOK. HERE ARE THE EDITABLE
  30. PORTIONS OF YOUR CODE. IT MAKES IT EASIER FOR YOU TO IGNORE THE PARTS OF THE CODE WHERE YOU REALLY CAN'T TOUCH
  31. BECAUSE IT MIGHT BREAK THE WHOLE THING. IT ALSO MAKES IT EASIER FOR ME TO FIX BUGS YOU MAY FIND.
  32. =============================================================================================================
  33. */
  34.  
  35. /* ----------- CHANGE BACKGROUND -------------*/
  36. :root{
  37.     --background: radial-gradient(circle, #104480, #2F2727) !important;
  38. }
  39.  
  40.  
  41.  
  42. /* ------------- CHANGE PICTURE ---------------*/
  43. #mermaid{
  44.     background-image: url('https://i.imgur.com/ihYGuqp.png') !important;
  45.     background-position: center !important;
  46.     background-repeat: no-repeat !important;
  47.     background-size: 60% !important;
  48. }
  49.  
  50.  
  51.  
  52. /* ----------- CHANGE COLOURS -----------*/
  53. :root{
  54.     --scrollbar: #104480 !important;
  55.     --h1: #1ba77d !important;
  56.     --h1-outline: #fff !important;
  57.     --b: #132d55 !important;
  58.     --link: #d4a4f5 !important;
  59.     --link-hover: #64edad !important;
  60.     --italics: #1ba77d !important;
  61.     --border: #83ccee !important;
  62.     --box-background: linear-gradient(45deg, #a2d5ec, #3fa3d1) !important;
  63.     --nav-hover: #478de9 !important;
  64.     --text: #fff !important;
  65.     --audio-glow: #3fa3d1 !important;
  66. }
  67.  
  68.  
  69.  
  70. /* -----------CHANGE FONTS [you'd have to link them first though] --------------*/
  71. h1{
  72.     font-family: 'Dr Sugiyama' !important;
  73. }
  74.  
  75. b{
  76.     font-family: 'Engagement' !important;
  77.     font-size: 3.5vh !important;
  78. }
  79.  
  80. a{
  81.     font-family: 'Engagement' !important;
  82.     font-size: 3.5vh !important;
  83. }
  84.  
  85.  
  86.  
  87. /* ------------ CHANGE AUDIO PLACEMENT --------------*/
  88. audio {
  89.  position: absolute !important;
  90.  left: 12% !important;
  91.  bottom: 18% !important;
  92. }
  93.  
  94.  
  95. /*
  96.    =======================================================================================================
  97.         TROUBLESHOOTING: IF YOU NEED ANY HELP, MESSAGE ME ON DISCORD: Lil Monster#3557
  98.    =======================================================================================================
  99. */
  100. </style>
  101. <!-- ===================LOAD IN CSS FILE=================== -->
  102. <link href="https://ellexidecodes.github.io/Profile-Codes/free/mermaid.css" rel="stylesheet">
  103. <!--- ===================DO NOT TOUCH OR IT BORKS YOUR CODE========================== -->
  104. <script src="https://themonstrousdev.github.io/profiles/Addons/free.js"></script>
  105. <script src="https://ellexidecodes.github.io/Profile-Codes/free/siren.js"></script>
  106.  
  107. <!-- ==================PROFILE START================= -->
  108. <canvas id="canvas"></canvas>
  109. <div id="mermaid"></div>
  110. <div id="border"></div>
  111. <div id="back"></div>
  112.  
  113.  
  114. <!--============= BUBBLES =================-->
  115. <div id="background-wrap">
  116.         <div class="bubble x1"></div>
  117.         <div class="bubble x2"></div>
  118.         <div class="bubble x3"></div>
  119.         <div class="bubble x4"></div>
  120.         <div class="bubble x5"></div>
  121.         <div class="bubble x6"></div>
  122.         <div class="bubble x7"></div>
  123.         <div class="bubble x8"></div>
  124.         <div class="bubble x9"></div>
  125.         <div class="bubble x10"></div>
  126. </div>
  127. <div id="bubbles2">
  128.         <div class="bubbles xx1"></div>
  129.         <div class="bubbles xx2"></div>
  130.         <div class="bubbles xx3"></div>
  131.         <div class="bubbles xx4"></div>
  132.         <div class="bubbles xx5"></div>
  133. </div>
  134. <!-- ==================== BUBBLES END ======================== -->
  135.  
  136.  
  137.  
  138. <!-- ===================== THE TABS ======================== -->
  139. <div id="tabs">
  140.     <div class="tab">
  141.         <input id="anchor-1" name="mermaid" checked="checked" type="radio" />
  142.         <label for="anchor-1" class="one" title="Stats"><img src="https://i.imgur.com/Loq3ugK.png" width="100%" style="position: absolute;bottom: 0;left:0;"></label>
  143.         <div class="content">
  144.             <center><h1>The Ocean's Song</h1></center>
  145.             <table border="0" cellspacing="5" width="100%"><tbody>
  146.                 <tr>
  147.                     <td style="text-align: center;"><b>Name</b></td><td style="text-align: center;">Caterina</td>
  148.                 </tr>
  149.                 <tr>
  150.                     <td style="text-align: center;"><b>Moniker</b></td><td style="text-align: center;">Cat, Amore</td>
  151.                 </tr>
  152.                 <tr>
  153.                     <td style="text-align: center;"><b>Age</b></td><td style="text-align: center;">116 y.o.</td>
  154.                 </tr>
  155.                 <tr>
  156.                     <td style="text-align: center;"><b>Gender</b></td><td style="text-align: center;">Femme</td>
  157.                 </tr>
  158.                 <tr>
  159.                     <td style="text-align: center;"><b>Occupation</b></td><td style="text-align: center;">Singer</td>
  160.                 </tr>
  161.             </tbody></table>
  162.         </div>
  163.     </div>
  164.     <div class="tab">
  165.         <input id="anchor-2" name="mermaid" type="radio" />
  166.         <label for="anchor-2" class="two" title="Biography"><img src="https://i.imgur.com/Loq3ugK.png" width="100%" style="position: absolute;bottom: 0;left:0;"></label>
  167.         <div class="content">
  168.             <center><h1>Mermaid's Melody</h1></center>
  169.             <p><center>Work in Progress<br><b>Bold</b> <i>Italics</i> <u>Underline</u> <s>Strikethrough</s> <a>Link</a></center></p>
  170.         </div>
  171.     </div>
  172.     <div class="tab">
  173.         <input id="anchor-3" name="mermaid" type="radio" />
  174.         <label for="anchor-3" class="three" title="Friends"><img src="https://i.imgur.com/Loq3ugK.png" width="100%" style="position: absolute;bottom: 0;left:0;"></label>
  175.         <div class="content">
  176.             <center><h1>My Pearls</h1></center>
  177.             <center>
  178.                     <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  179.                     <center><b>- Name -</b><br> <i>foe/friend/neutral</i></center> small note.<br><br><br><br>
  180.                     <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  181.                     <center><b>- Name -</b><br> <i>foe/friend/neutral</i></center> small note.<br><br><br><br>
  182.                     <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  183.                     <center><b>- Name -</b><br> <i>foe/friend/neutral</i></center> small note.<br><br><br><br>
  184.                     <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  185.                     <center><b>- Name -</b><br> <i>foe/friend/neutral</i></center> small note.<br><br><br><br>
  186.                     <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  187.                     <center><b>- Name -</b><br> <i>foe/friend/neutral</i></center> small note.<br><br><br><br>
  188.                     </center>
  189.         </div>
  190.     </div>
  191.     <div class="tab">
  192.         <input id="anchor-4" name="mermaid" type="radio" />
  193.         <label for="anchor-4" class="four" title="OOC"><img src="https://i.imgur.com/Loq3ugK.png" width="100%" style="position: absolute;bottom: 0;left:0;"></label>
  194.         <div class="content">
  195.             <center><h1>On Land</h1></center>
  196.             <i>𝞅</i> PM friendly.<br>
  197.             <i>𝞅</i> Story oriented.<br>
  198.             <i>𝞅</i> Discord available.<br>
  199.         </div>
  200.     </div>
  201. </div>
  202.  
  203.  
  204. <!-- ================== MUSIC ================= -->
  205. <audio controls loop controlsList="nodownload" id="siren" src="http://k003.kiwi6.com/hotlink/k026clmvp1/Siren_s_Song.mp3"></audio>
  206.  
  207.  
  208. <!-- ===================== CREDIT PLEASE DON'T REMOVE ====================-->
  209. <div id="credit"><a href="https://www.copyrighted.com/work/2PKqDybNAqyK7xoN" target="_blank"><font style="font-size: 2.5vh;">&copy;</font></a> || <a href="https://themonstrousdev.github.io/" title="The Monster" target="_blank"><font style="font-size: 2.5vh;">𝞅</font></a></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!