API tools faq
paste
Advertisement
Kawaii-Lau

Grishaverse [Club Code]

Kawaii-Lau
Aug 5th, 2021
1,521
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.46 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#4770).
  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.  
  18.  
  19. <!--CUSTOM FONTS-->
  20. <link href="https://fonts.googleapis.com/css2?family=Niconne&display=swap" rel="stylesheet">
  21.  
  22. <html>
  23.   <style>
  24.     :root {
  25.   --borderColorTop:#7a5988;
  26.   --borderColorBottom:#6a5ca2;
  27.  
  28.   --defaultTextColor:white;
  29.   --defaultFont:serif;
  30.   --titleFont:'Niconne', cursive;
  31.  
  32.   --boxBackgroundColor:#3a244a;
  33.   --boxBackgroundImg: url(https://i.pinimg.com/originals/7b/45/64/7b456480b1dc11783006ed74ccdec54b.jpg);
  34. }
  35. ::-webkit-scrollbar {
  36.   width:3px; height:5px;
  37.   background-color:transparent;
  38. }
  39. ::-webkit-scrollbar-thumb {
  40.   background-color:#111;
  41. }
  42.  
  43. .credits p {
  44.   text-align:center; margin:0px; font-family:'Times New Roman', serif; font-size:12px;}
  45. .credits p a {
  46.   text-decoration:none; color:var(--borderColorBottom);
  47.   font-weight:bold;
  48. }
  49.  
  50. .mainBox h1 {
  51.   font-family:var(--titleFont);
  52.   font-size:42px;
  53.   margin:0px;
  54. }
  55. .mainBox p {
  56.   text-align:justify;
  57. }
  58.  
  59. .mainBox img {
  60.   display:block; margin:0px auto;
  61. }
  62.  
  63. .boxSize {
  64.   width:450px; height:800px;
  65.   margin:30px auto;
  66. }
  67.  
  68. .nav {
  69.   display:flex; flex-direction:row;
  70. }
  71. .nav div {
  72.   background-color:rgba(0,0,0,0.1);
  73.   width:100%;
  74.   cursor:pointer;
  75.   padding:5px 15px;
  76.   text-align:center;
  77.   transition:1.5s ease;
  78. }
  79. .nav div:hover {
  80.   background-color:rgba(0,0,0,0.3);
  81. }
  82. .nav div a {
  83.   font-size:12px;
  84.   color:white;
  85.   text-decoration:none;
  86.   font-family:var(--defaultFont);
  87.   font-weight:bold;
  88. }
  89.  
  90. .topBorder, .bottomBorder {
  91.   width:100%; height:30px;
  92.   background-clip:padding-box;
  93.   position:relative;
  94.   left:-10px;
  95.  
  96.   border-left:10px solid transparent;
  97.   border-right:10px solid transparent;
  98. }
  99.  
  100. .topBorder {
  101.   border-top:30px solid var(--borderColorTop);
  102.   background-color:var(--borderColorTop);
  103. }
  104. .bottomBorder {
  105.   border-bottom:30px solid var(--borderColorBottom);
  106.   background-color:var(--borderColorBottom);
  107. }
  108.  
  109. .mainBox {
  110.   width:100%; height:100%;
  111.  
  112.   background:var(--boxBackgroundColor) var(--boxBackgroundImg);
  113.   background-size:100% 100%;
  114.   position:relative;
  115.   top:0px; left:0px;
  116. }
  117.  
  118. .mbBgTransparency {
  119.   width:100%; height:800px;
  120.   background:linear-gradient(to bottom, var(--borderColorTop), transparent, var(--borderColorBottom) );
  121.   overflow-y:auto;
  122. }
  123.  
  124. section {
  125.   text-align:center;
  126.   min-height:800px;
  127.   color:var(--defaultTextColor);
  128.   overflow:hidden;
  129. }
  130.  
  131. .infoBox {
  132.   padding:0px 20px;
  133. }
  134.  
  135. .iibox {
  136.   background:rgba(0,0,0,0.2);
  137.   text-align:left;
  138.   border:5px double white;
  139.   padding:5px 10px;
  140.   margin:10px 0px;
  141.   background-clip:padding-box;
  142. }
  143.  
  144. .iigrid {
  145.   display:flex; flex-direction:row;
  146.   justify-content:center;
  147.   flex-wrap:wrap;
  148.   width:100%;
  149. }
  150.  
  151. .iigrid-item {
  152.   margin:10px;
  153.   width:80px; height:180px;
  154.   background:linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
  155.   padding:3px;
  156.   font-size:12px;
  157. }
  158. .iigrid-item img {
  159.   width:100%;
  160.   margin-bottom:2px
  161. }
  162. .iigrid-item p {
  163.   margin-top:0px;
  164.   margin-bottom:5px;
  165.   text-align:center;
  166. }
  167.  
  168.   </style>
  169. <body>
  170. <div class="boxSize">
  171.  <div class="topBorder">
  172.    <nav class="nav">
  173.      <div><a href="#top">Top</a></div>
  174.      <div><a href="#section1">Welcome</a></div>
  175.      <div><a href="#section2">Teams</a></div>
  176.      <div><a href="#section3">Users</a></div>
  177.      <div><a href="#section4">Misc.</a></div>
  178.    </nav>
  179.  </div>
  180.  <main class="mainBox">
  181.    <div class="mbBgTransparency">
  182.      <br>
  183.      
  184.      <!--TOP SECTION-->
  185.      <a name="top"></a>
  186.      <section>
  187.        <br><br><br><br>
  188.        <br><br>
  189.        <img src="https://i.imgur.com/HxjdZrr.png" style="width:60%; height:auto;"/>
  190.        <h1 style="margin-top:10px; font-size:56px">My soul is yours to keep...</h1>
  191.        
  192.      </section>  
  193.      
  194.      <!--WELCOME SECTION-->
  195.      <a name="section1"></a>
  196.      <section>
  197.        <div class="infoBox">
  198.          <br>
  199.          <img src="https://i.imgur.com/3KFUX1T.png" style="width:200px; transform:rotate(180deg)"/>
  200.          <h1>Welcome!</h1>
  201.          <img src="https://i.imgur.com/3KFUX1T.png" style="width:200px;"/>
  202.          <br><br>
  203.          <img src="https://i.pinimg.com/originals/44/20/58/442058138951f60a7fdec2f804473f6f.jpg" style="width:96%;"/>
  204.          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ipsum nunc aliquet bibendum enim facilisis gravida neque convallis. Mi eget mauris pharetra et ultrices neque ornare aenean. In nibh mauris cursus mattis molestie a iaculis. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Morbi enim nunc faucibus a.<br><br> Quam viverra orci sagittis eu. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Vel risus commodo viverra maecenas accumsan lacus vel. Massa vitae tortor condimentum lacinia. Ac auctor augue mauris augue neque gravida in fermentum.</p>
  205.        </div>  
  206.      </section>
  207.      
  208.      <!--WELCOME SECTION-->
  209.      <a name="section2"></a>
  210.      <section>
  211.        <div class="infoBox">
  212.          <img src="https://i.imgur.com/3KFUX1T.png" style="width:200px; transform:rotate(180deg)"/>
  213.          <h1>Teams</h1>
  214.          <img src="https://i.imgur.com/3KFUX1T.png" style="width:200px;"/>
  215.          
  216.          <br><br>
  217.          <div class="iibox">
  218.          <h2>Welcome Team</h2>
  219.            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ipsum nunc aliquet bibendum enim facilisis gravida neque convallis. </p>
  220.          </div>
  221.            
  222.          <div class="iibox">
  223.          <h2>Columnists</h2>
  224.            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ipsum nunc aliquet bibendum enim facilisis gravida neque convallis. </p>
  225.          </div>
  226.          
  227.          <div class="iibox">
  228.          <h2>Event Team</h2>
  229.            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ipsum nunc aliquet bibendum enim facilisis gravida neque convallis. </p>
  230.          </div>
  231.          
  232.       </div>
  233.      </section>
  234.      
  235.      
  236.      <!--MILESTONES SECTION (can also be user of the week section. idk never been HoH recently-->
  237.      <a name="section3"></a>
  238.      <section>
  239.        <img src="https://i.imgur.com/3KFUX1T.png" style="width:200px; transform:rotate(180deg)"/>
  240.        <h1>User of the Week</h1>
  241.        <img src="https://i.imgur.com/3KFUX1T.png" style="width:200px;"/>
  242.        <br><hr>
  243.        <h2>Year 1</h2>
  244.        <div class="iigrid">
  245.          <div class="iigrid-item">
  246.            <img src="https://via.placeholder.com/60"/>
  247.            <p><b>User</b></p>
  248.            <p>Week #</p>
  249.          </div>
  250.        
  251.          <div class="iigrid-item">
  252.            <img src="https://via.placeholder.com/60"/>
  253.            <p><b>User</b></p>
  254.            <p>Week #</p>
  255.          </div>
  256.          
  257.                   <div class="iigrid-item">
  258.            <img src="https://via.placeholder.com/60"/>
  259.            <p><b>User</b></p>
  260.            <p>Week #</p>
  261.          </div>
  262.          
  263.                   <div class="iigrid-item">
  264.            <img src="https://via.placeholder.com/60"/>
  265.            <p><b>User</b></p>
  266.            <p>Week #</p>
  267.          </div>
  268.          
  269.          <!-- BREAK -->
  270.          
  271.                   <div class="iigrid-item">
  272.            <img src="https://via.placeholder.com/60"/>
  273.            <p><b>User</b></p>
  274.            <p>Week #</p>
  275.          </div>
  276.          
  277.                   <div class="iigrid-item">
  278.            <img src="https://via.placeholder.com/60"/>
  279.            <p><b>User</b></p>
  280.            <p>Week #</p>
  281.          </div>
  282.          
  283.                   <div class="iigrid-item">
  284.            <img src="https://via.placeholder.com/60"/>
  285.            <p><b>User</b></p>
  286.            <p>Week #</p>
  287.          </div>
  288.          
  289.                   <div class="iigrid-item">
  290.            <img src="https://via.placeholder.com/60"/>
  291.            <p><b>User</b></p>
  292.            <p>Week #</p>
  293.          </div>
  294.          
  295.          
  296.          <!-- BREAK -->
  297.          
  298.                   <div class="iigrid-item">
  299.            <img src="https://via.placeholder.com/60"/>
  300.            <p><b>User</b></p>
  301.            <p>Week #</p>
  302.          </div>
  303.          
  304.                   <div class="iigrid-item">
  305.            <img src="https://via.placeholder.com/60"/>
  306.            <p><b>User</b></p>
  307.            <p>Week #</p>
  308.          </div>
  309.          
  310.                   <div class="iigrid-item">
  311.            <img src="https://via.placeholder.com/60"/>
  312.            <p><b>User</b></p>
  313.            <p>Week #</p>
  314.          </div>
  315.          
  316.                   <div class="iigrid-item">
  317.            <img src="https://via.placeholder.com/60"/>
  318.            <p><b>User</b></p>
  319.            <p>Week #</p>
  320.          </div>
  321.  
  322.        </div>
  323.        <hr>
  324.      </section>
  325.      
  326.      <a name="section4"></a>
  327.      <section>
  328.        <br>
  329.        <img src="https://i.imgur.com/3KFUX1T.png" style="width:200px; transform:rotate(180deg)"/>
  330.        <h1>Extras</h1>
  331.        <img src="https://i.imgur.com/3KFUX1T.png" style="width:200px;"/>
  332.        <br><br>
  333.        
  334.        <h1 style="font-size:42px;">Here is whatever you want to put here. Go crazy</h1>
  335.        
  336.        <br>
  337.      </section>
  338.    </div>  
  339.  </main>
  340.  
  341.   <div class="bottomBorder" style="height:130px">
  342.     <!-- SIGNATURE BOX -->
  343.     <img src="https://i.imgur.com/VEsDuRj.png" style="width:320px; display:block; margin:0px auto;"/>
  344.   </div>  
  345.   <div class="credits">
  346.  <!--♡♡♡ IF YOU REMOVE MY CREDITS, I HAVE THE RIGHT TO SMOLDER YOU IN YOUR SLEEP ♡♡♡-->  
  347.     <p>2021 &copy; Coding by <a href="https://kawaii-lau.tumblr.com/" target="_blank">Kawaii-Lau</a></p>
  348.   </div>
  349.   <br><br>
  350. </div>  
  351. </body>  
  352. </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!