API tools faq
paste
Advertisement
Kawaii-Lau

Cold Rulers [Club Code]

Kawaii-Lau
Sep 7th, 2021
1,782
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. <!--
  2. ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
  3.   Thank you for using my code!
  4. ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝
  5. Rules to Follow:
  6.  
  7. ✶ Do not EVER delete or remove the credits of the coder or claim this code as your own.
  8. ✶ Do not redistribute this code, no matter how much you edited it as a base or otherwise!
  9. ✶ If you need any help in fixing codes, contact me on Discord (Kawaii-Lau#0005).
  10. ✶ If you like to share this code, send to your friends the link of my blog, https://kawaii-lau.tumblr.com , and support me!
  11.  
  12. If you like a custom code, check out my blog to see if requests are open!
  13. XOXO, Lauren.
  14. ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
  15.   2021 © Coding by Kawaii-Lau
  16. ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝ -->
  17. <html>
  18. <style>
  19.        
  20. /* EASY EDIT CSS */
  21. :root {
  22.   --defaultText:white;/* TEXT COLOR */
  23.   --defaultFontFamily:font-family:'Times New Roman', serif;/* FONT FAMILY*/
  24.   --bodyBackground: url(https://i.ibb.co/t3KmrqT/icelandbackground.jpg);/* OUTER BACKGROUND */
  25.  
  26.   --mainBoxBackground: url(https://i.ibb.co/gVc5x1V/java-hickory-home-decorators-collection-vinyl-plank-flooring-60199-64-300.jpg);/* INNER BACKGROUND */
  27.   --mainBoxBorder:#1a0e03;/* MAIN BOX BORDER */
  28.  
  29.   --titleColor:white;/* TITLE COLOR */
  30.   --titleoutset1:#1c1511;/* TITLE BORDER 1 */
  31.   --titleoutset2:#7d6454;/* TITLE BORDER 2 */
  32.   --titleshadow:black;/* TITLE SHADOW */
  33.  
  34.   --button:url(https://i.ibb.co/tXtzdbL/woodenbackground.jpg); /* BUTTON COLOR OR BACKGROUND  */
  35.   --buttonBorder:linear-gradient(to bottom right, #1c0f08, #3b1f0e, #1c0f08); /* BUTTON BORDER COLOR, GRADIENT, OR BACKGROUND */
  36.   --buttonFontFamily:'Times New Roman', serif;/* BUTTON FONT FAMILY */
  37.   --buttonText:white;/* BUTTON TEXT COLOR */
  38. }
  39.  
  40. /* SCROLLBAR */
  41. ::-webkit-scrollbar {
  42.   width:5px; height:6px;
  43.   background:transparent;
  44. }
  45. ::-webkit-scrollbar-thumb {
  46.   background:#5c493e;
  47. }
  48.  
  49. /* BODY BACKGROUND */
  50. .background {
  51.   background:#fff var(--bodyBackground);
  52.   background-size:cover;
  53. }
  54.  
  55. /* MAIN BOX */
  56. .mainBox {
  57.   background-image:var(--mainBoxBackground);
  58.   width:500px; height:auto;
  59.   background-size:100%;
  60.   border:15px ridge var(--mainBoxBorder);
  61.   margin:0px auto;
  62.   box-shadow:0px 0px 10px black;
  63. }
  64.  
  65. /* CREDITS */
  66. .credits {
  67.   padding:5px 20px;
  68.   color:var(--defaultText);
  69.   font-family:var(--defaultFontFamily);
  70.   text-shadow:-1px 1px 2px black
  71. }
  72. .credits a {
  73.   color:#cfc23a;
  74.   text-decoration:none;
  75. }
  76.  
  77. /* BUTTONS AND MASK BUTTONS */
  78. .mainBox button {cursor:pointer;}
  79. .maskButton {
  80.   -webkit-mask-image: url(https://i.ibb.co/7jDZWPw/buttonmask.png);
  81.   -webkit-mask-size: 100% 100%;
  82. }
  83. .b1 {/* BORDER (gradient) */
  84.   width:270px; height:120px;
  85.   background:var(--buttonBorder);
  86. }
  87. .b2 {/* BUTTON (wooden background) */
  88.   width:250px; height:100px;
  89.   background:var(--button);
  90.   background-size:cover;
  91.   margin:5px 5px 5px 2px;
  92.   padding:30px 0px;
  93.   box-sizing:border-box;
  94.   font-size:40px;
  95.   font-family:var(--buttonFontFamily);
  96.   color:var(--buttonText);
  97. }
  98. .back {/* BACK BUTTON */
  99.   width:130px; height:30px;
  100. }
  101. .back button {
  102.   width:100%; height:100%;
  103.   margin:0px;
  104.   background:none;
  105.   border:none;
  106.   outline:none;
  107.   text-align:left;
  108. }
  109. .maskBack {
  110.   -webkit-mask-image:url(https://i.ibb.co/VYBgsdk/arrowleft.png);
  111.   -webkit-mask-size: 100% 100%;
  112.   background:white;
  113.   width:100%; height:100%;
  114. }
  115.  
  116. /* PAGES CSS */
  117. .content {
  118.   text-align:center;
  119.   display:none;
  120.   color:var(--defaultText);
  121.   padding:10px;
  122.   font-family:var(--defaultFontFamily);
  123.   max-height:1000px;
  124.   overflow:auto;
  125.   box-sizing:border-box;
  126. }
  127.  
  128. .content h1 {
  129.   color:var(--titleColor);
  130.   text-shadow:1px 1px var(--titleoutset1), -1px -1px var(--titleoutset1), 1px -1px var(--titleoutset2), -1px 1px var(--titleoutset2), 2px 2px var(--titleoutset2), -2px -2px var(--titleoutset2), 2px -2px var(--titleoutset1), -2px 2px var(--titleoutset1), 3px 3px 5px var(--titleshadow);
  131.   font-size:58px;
  132.   margin:3px;
  133. }
  134. .content p {text-align:justify;}
  135. .content img {margin:0px auto; display:block;}
  136.  
  137. /* FLEX BOX */
  138. .flexBox {
  139.   display:flex; flex-direction:row;
  140.   justify-content:center;
  141.   width:100%; height:auto;
  142.   margin-bottom:20px;
  143. }
  144.  
  145. /* INFO BOX */
  146. .infoBox {
  147.   width:340px;
  148. }
  149. .infoBox ul, .infoBox ul li {
  150.   text-align:left;
  151. }
  152. ul li {
  153.   margin:10px 0px;
  154. }
  155.  
  156. /* SIDE IMAGES */
  157. .sideImg {
  158.   width:140px;
  159.   margin:0px 10px;
  160. }
  161. .sideImg img {
  162.   width:100%;
  163. }
  164. </style>
  165. <script>
  166.     function openInfo(evt, page) {
  167.             var i, tabcontent, tablinks;
  168.             content = document.getElementsByClassName("content");
  169.             for (i = 0; i < content.length; i++) {
  170.                content[i].style.display = "none";
  171.            }
  172.            tablinks = document.getElementsByClassName("tablinks");
  173.            for (i = 0; i < tablinks.length; i++) {
  174.                tablinks[i].className = tablinks[i].className.replace(" active", "");
  175.            }
  176.          document.getElementById(page).style.display = "block";
  177. }
  178. </script>
  179. <body class="background">
  180.   <main class="mainBox">
  181.     <!--WELCOME PAGE-->
  182.     <section class="content" style="display:block" id="page1">
  183.      
  184.       <h1>Welcome!</h1>
  185.      
  186.       <img src="https://thumbs.gfycat.com/AnotherElegantBat-size_restricted.gif" style="width:70%;"/>
  187.      
  188.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et arcu faucibus, placerat augue ut, mollis tellus. Aenean quis est orci. Integer a lorem a tortor scelerisque rhoncus. Nunc posuere augue non nunc hendrerit, id mollis nisi rhoncus. Mauris tincidunt tincidunt mollis.<br><br>
  189.       Consectetur adipiscing elit. Nunc et arcu faucibus, placerat augue ut, mollis tellus. Aenean quis est orci. Integer a lorem a tortor scelerisque rhoncus. Nunc posuere augue non nunc hendrerit, id mollis nisi rhoncus. Mauris tincidunt tincidunt mollis.<br><br>
  190.         "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
  191.       </p>
  192.      
  193.       <div>
  194.         <button class="maskButton b1" onclick="openInfo(event, 'page2')">
  195.           <div class="maskButton b2">
  196.             Guidelines
  197.           </div>
  198.         </button>
  199.        
  200.         <button class="maskButton b1" onclick="openInfo(event, 'page3')">
  201.           <div class="maskButton b2">
  202.             Members
  203.           </div>
  204.         </button>
  205.        
  206.         <button class="maskButton b1" onclick="openInfo(event, 'page4')">
  207.           <div class="maskButton b2">
  208.             Extra
  209.           </div>
  210.         </button>
  211.        
  212.        
  213.       </div>
  214.      
  215.     </section>
  216.    
  217.     <!-- GUIDELINES PAGE (or whatever you want to put here)-->
  218.     <section class="content" id="page2">
  219.       <div class="flexBox">
  220.         <!-- GUIDELINES INFO BOX -->
  221.           <div class="infoBox">
  222.            
  223.             <h1>Guidelines</h1>
  224.            
  225.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et arcu faucibus, placerat augue ut, mollis tellus. Aenean quis est orci. Integer a lorem a tortor scelerisque rhoncus. Nunc posuere augue non nunc hendrerit, id mollis nisi rhoncus. Mauris tincidunt tincidunt mollis.<br><br>
  226.  
  227. Consectetur adipiscing elit. Nunc et arcu faucibus, placerat augue ut, mollis tellus. Aenean quis est orci. Integer a lorem a tortor scelerisque rhoncus. Nunc posuere augue non nunc hendrerit, id mollis nisi rhoncus. Mauris tincidunt tincidunt mollis.</p>
  228.  
  229.             <ul>
  230.               <li>Add some bulleted guide descriptions for your team members</li>
  231.               <li>Credits to <a href="https://assassin1513.tumblr.com/post/634340639170068480/vikings-legend-gifs-made-by-me" target="blank" style="color:white;">Assassin1513</a> for the gifs on the right side of this page for aesthetic </li>
  232.               <li>Consectetur adipiscing elit. Nunc et arcu faucibus, placerat augue ut, mollis tellus.</li>
  233.               <li>Aenean quis est orci. Integer a lorem a tortor scelerisque rhoncus.</li>
  234.               <li>Remember to drink water! (Or else ocean sirens will make you drink some...)</li>
  235.             </ul>
  236.            
  237.           </div><!-- END OF INFO BOX -->
  238.        
  239.         <!-- AESTHETIC PICTURES -->
  240.           <div class="sideImg">
  241.           <img src="https://64.media.tumblr.com/bb9140d452d91915fea0021ea7e5e0b1/f38a1245183fa0aa-20/s500x750/768ded351d46aaaac5e5d23d469a06bfad5778a3.gif"  alt="Aesthetic Img 1"/>
  242.             <img src="https://64.media.tumblr.com/8eee862833453edd2caf82e7d38c4267/f38a1245183fa0aa-f0/s500x750/77bd3571887870aa4e5151e57a681396913b04c6.gif" alt="Aesthetic Img 2"/>
  243.             <img src="https://64.media.tumblr.com/49edc8901a70fbf8584fa3684072cf61/f38a1245183fa0aa-3a/s540x810/ff8e2187b5eb87116b0972c0dc82889757651def.gif" alt="Aesthetic Img 3"/>
  244.           </div><!-- END OF AESTHETIC PICTURES -->
  245.         </div><!-- END OF FLEXBOX -->
  246.      
  247.       <div class="back">
  248.         <button onclick="openInfo(event, 'page1')" title="back">
  249.           <div class="maskBack"></div>
  250.          </button>
  251.       </div>
  252.     </section>
  253.    
  254.     <!-- MEET THE TEAM PAGE / MEMBERS PAGE -->
  255.     <section class="content" id="page3">
  256.      
  257.       <div class="flexBox">
  258.         <img src="https://64.media.tumblr.com/8dad2eab31d28a10689ce6722d6f8b55/cef48dd919b4a2dd-21/s640x960/4ee2be8a493e6a909b14a4dc81361db35328b8e0.jpg" style="width:120px; height:120px"/>
  259.        
  260.         <div class="infoBox">
  261.           <ul>
  262.             <li>Name: XX</li>
  263.             <li>Date Joined: XX.XX.XX</li>
  264.             <li>Intro: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et arcu faucibus</li>
  265.             <li>Fun fact: XX</li>
  266.           </ul>
  267.         </div>
  268.        
  269.       </div><!-- END OF MEMBER -->
  270.      
  271.       <div class="flexBox">
  272.         <img src="https://i.pinimg.com/originals/a0/26/63/a02663c3d0c6ba262abefd8224ccfd51.jpg" style="width:120px; height:120px"/>
  273.        
  274.         <div class="infoBox">
  275.           <ul>
  276.             <li>Name: XX</li>
  277.             <li>Date Joined: XX.XX.XX</li>
  278.             <li>Intro: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et arcu faucibus</li>
  279.             <li>Fun fact: XX</li>
  280.           </ul>
  281.         </div>
  282.        
  283.       </div><!-- END OF MEMBER -->
  284.      
  285.       <div class="flexBox">
  286.         <img src="https://64.media.tumblr.com/410008271ee2d3d500ee09cb2de76230/a7a9454ac815af60-14/s400x600/209fd4f08972607a85bf6af66d173491819bd90d.png" style="width:120px; height:120px"/>
  287.        
  288.         <div class="infoBox">
  289.           <ul>
  290.             <li>Name: XX</li>
  291.             <li>Date Joined: XX.XX.XX</li>
  292.             <li>Intro: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et arcu faucibus</li>
  293.             <li>Fun fact: XX</li>
  294.           </ul>
  295.         </div>
  296.        
  297.       </div><!-- END OF MEMBER -->
  298.      
  299.       <div class="flexBox">
  300.         <img src="https://64.media.tumblr.com/1b551c2c87005462cb5ae56afd12a9d9/abec1f3ab5b0c005-e2/s400x600/b7be2a05958acf7d0d503246cffa5989a8530891.jpg" style="width:120px; height:120px"/>
  301.        
  302.         <div class="infoBox">
  303.           <ul>
  304.             <li>Name: XX</li>
  305.             <li>Date Joined: XX.XX.XX</li>
  306.             <li>Intro: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et arcu faucibus</li>
  307.             <li>Fun fact: XX</li>
  308.           </ul>
  309.         </div>
  310.        
  311.       </div><!-- END OF MEMBER -->
  312.      
  313.       <div class="back">
  314.         <button onclick="openInfo(event, 'page1')" title="back">
  315.           <div class="maskBack"></div>
  316.          </button>
  317.       </div>
  318.     </section>
  319.    
  320.    
  321.     <!-- EXTRA PAGE (do whatever you want with it) -->
  322.     <section class="content" id="page4">
  323.       <div class="flexBox">
  324.         <!-- AESTHETIC PICTURES -->
  325.           <div class="sideImg">
  326.           <img src="https://64.media.tumblr.com/35493ec5733cd3458f9a78087a96182c/f38a1245183fa0aa-18/s540x810/6775ca688d2b63bae191da24f224b5a35e0a8f38.gif"  alt="Aesthetic Img 1"/>
  327.             <img src="https://64.media.tumblr.com/cbaffc9fcb80912ddd085f6793a8d92e/f38a1245183fa0aa-d6/s500x750/fe18c782a666055f7ea0001bca193a17035611d2.gif" alt="Aesthetic Img 2"/>
  328.             <img src="https://64.media.tumblr.com/25c3405a18591bf6fc8950983aa6ef52/f38a1245183fa0aa-aa/s540x810/98f56430a7a301d5de4d243247eb85f21ba88d3c.gif" alt="Aesthetic Img 3"/>
  329.           </div><!-- END OF AESTHETIC PICTURES -->
  330.        
  331.         <!-- INFO BOX -->
  332.           <div class="infoBox">
  333.             <h1>Extra Page</h1>
  334.             <p>blah blah blah blah Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.<br><br>
  335.              
  336.               "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.<br><br>
  337.              
  338.               consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et"
  339.             </p>
  340.         </div>
  341.       </div>
  342.      
  343.      
  344.       <div class="back">
  345.         <button onclick="openInfo(event, 'page1')" title="back">
  346.           <div class="maskBack"></div>
  347.          </button>
  348.       </div>
  349.     </section>
  350.    
  351.       <!--♡♡♡ DO NOT REMOVE CREDITS OR I WILL THROW AN AXE AT YOUR HEAD ♡♡♡-->
  352.     <div class="credits">
  353.       2021 &copy; Coding by <a href="https://kawaii-lau.tumblr.com/" target="_blank">Kawaii-Lau</a>
  354.     </div>
  355.   </main>
  356.   </body>
  357. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!