API tools faq
paste
Kawaii-Lau

Come Back Home [Club Code]

Kawaii-Lau
Jun 16th, 2020 (edited)
1,374
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.70 KB | None | 0 0
raw download clone embed print report
  1. <!-- CUSTOM FONTS -->
  2. <link href="https://fonts.googleapis.com/css2?family=Asul&family=IM+Fell+Double+Pica+SC&display=swap" rel="stylesheet">
  3.  
  4. <style>
  5. /*  
  6.  
  7.     ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
  8.      Thank you for using my code!
  9.     ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝
  10. Rules to Follow:
  11.  
  12. ✶ Do not EVER delete or remove the credits of the coder or claim this code as your own.
  13. ✶ Do not redistribute this code, no matter how much you edited it as a base or otherwise!
  14. ✶ If you need any help in fixing codes, contact me on Discord (Kawaii-lau#6316). Major changes in code is not accepted.
  15. ✶ If you like to share this code, send to your friends the link of my blog, kawaii-lau.tumblr.com , and support me!
  16.  
  17. If you like a custom code, check out my blog to see if commissions are open!
  18.  
  19. XOXO, Kawaii-Lau.
  20.  
  21.       ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
  22.         2020 © Coding by Kawaii-Lau
  23.       ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝                            
  24. */
  25.  
  26.  
  27. :root {
  28.  
  29. /* -ˋˏ *.·:·.
  30.                 COLORS CSS
  31.                                     .·:·.* ˎˊ-*/
  32.     --main-box:#eee; /* Main Box Color */
  33.     --accent-color:#999 /* url(https://i.pinimg.com/originals/0d/c4/9f/0dc49f5b229f0339292ca090c0dd6f33.jpg) */; /* BG or Accent Color */
  34.     --accent-color-fade:rgba(200, 150, 150, 0.2); /* Accent Color Darken/Lighten */
  35.     --border-color:white; /* Border Color */
  36.     --header-color:rgba(100, 100, 100, 0.4); /* Header Text Color */
  37.     --header2-color:rgb(130, 130, 130); /* Header Strip Color */
  38.     --main-font-color:rgb(80, 80, 80); /* General Text Color */
  39.     --scrollbar:#999; /* Scrollbar */
  40.  
  41. /* -ˋˏ *.·:·.
  42.                 FONTS CSS
  43.                                     .·:·.* ˎˊ-*/
  44.     --header-font:serif; /* Header Font */
  45.     --header-font2:'IM Fell Double Pica SC', serif; /* Header Strip Font */
  46.     --main-font:'Asul', sans-serif; /*General Text Font */
  47.     --header-size:48px; /* MAIN Header Font Size */
  48.     --header-text-size:16px; /* Header Strip Font Size */
  49.     --main-font-size:14px; /* Main Font Size */
  50.     --adjust:-45px; /* Box Alignment Adjust */
  51. }
  52.  
  53. ::-webkit-scrollbar {width:5px; height:4px; background:transparent;}
  54. ::-webkit-scrollbar-thumb {background:var(--scrollbar)}
  55.  
  56. /* -ˋˏ *.·:·. MAIN COLOR .·:·.* ˎˊ- */
  57. .main-box {
  58.     width:530px;
  59.     height:800px;
  60.     background:var(--main-box);
  61.     background-size:100% 100%;
  62.     margin:0px auto;
  63.     font-size:var(--main-font-size);
  64.     font-family:var(--main-font);
  65.     color:var(--main-font-color)
  66. }
  67.  
  68. /* -ˋˏ *.·:·. ACCENT COLOR .·:·.* ˎˊ- */
  69. .two-tone {
  70.     position:absolute;
  71.     z-index:1;
  72.     width:20%;
  73.     height:inherit;
  74.     background:var(--accent-color);
  75. }
  76.  
  77. .two-tone-fade {
  78.     background-color:var(--accent-color-fade);
  79.     height:inherit;
  80. }
  81.  
  82. /* -ˋˏ *.·:·. HEADER .·:·.* ˎˊ- */
  83. header {
  84.     position:relative;
  85.     z-index:2;
  86.     margin-bottom:var(--adjust);
  87.     margin-top:-30px
  88. }
  89. header > h1 {
  90.     font-size:var(--header-size);
  91.     font-family:var(--header-font);
  92.     font-style:italic;
  93.     color:var(--header-color);
  94. }
  95.  
  96. /* -ˋˏ *.·:·. INNER BOX .·:·.* ˎˊ- */
  97. .boxes {
  98.     padding:20px;
  99.     position:relative;
  100.     z-index:4;
  101.     border:1px solid var(--border-color);
  102.     margin-left:25px;
  103.     height:660px;
  104. }
  105.  
  106. .boxes img {
  107.     margin:10px auto;display:block;
  108.     border:4px double var(--border-color)
  109. }
  110.  
  111. .textbox {
  112.     overflow:auto;
  113.     height:630px
  114. }
  115.  
  116. /* -ˋˏ *.·:·. HEADER STRIP CSS .·:·.* ˎˊ- */
  117.  
  118. .header-text {
  119.     width:480px; padding:5px;
  120.     background-color:var(--border-color);
  121.     margin:0px 0px 0px -35px;
  122.     font-family:var(--header-font2);
  123.     font-size:var(--header-text-size);
  124.     text-align:center; color:var(--header2-color)
  125. }
  126.  
  127. /* -ˋˏ *.·:·. AESTHETIC COLUMN .·:·.* ˎˊ- */
  128. .aes {
  129.     width:80px;
  130.     position:relative;
  131.     margin-left:-60px;
  132.     margin-top:140px
  133. }
  134. .aes-box{
  135.     width:60px;
  136.     height:60px;
  137.     padding:10px;
  138.     margin-bottom:30px;
  139.     box-shadow:0px 0px 15px rgba(30, 30, 30, 0.4)
  140. }  
  141. .aes-box > div {
  142.     border:1px solid var(--border-color);
  143.     height:100%;
  144. }
  145. .col {display:flex;flex-direction:column;}
  146. .row {display:flex;flex-direction:row;}
  147. </style>
  148. <body>
  149. <div class="background">
  150. <div class="main-box">
  151. <div class="two-tone">
  152. <div class="two-tone-fade">
  153. <br>
  154.     <div class="col aes">
  155.         <div class="aes-box" style="background: url(https://via.placeholder.com/60.png);background-size:100% 100%;"><div></div></div><!-- AES#1 -->
  156.         <div class="aes-box" style="background: url(https://via.placeholder.com/60.png);background-size:100% 100%;"><div></div></div><!-- AES#2 -->
  157.         <div class="aes-box" style="background: url(https://via.placeholder.com/60.png);background-size:100% 100%;"><div></div></div><!-- AES#3 -->
  158.         <div class="aes-box" style="background: url(https://via.placeholder.com/60.png);background-size:100% 100%;"><div></div></div><!-- AES#4 -->
  159.     </div><!-- END OF AESTHETICS -->
  160.  
  161. </div></div>
  162. <div style="padding:20px;">
  163.     <header>
  164.         <h1>Road to Kingdom</h1>
  165.     </header>
  166.     <div class="boxes">
  167.         <div class="header-text">
  168.             -ˋˏ *.·:·. Come Back Home .·:·.* ˎˊ-
  169.         </div>
  170.     <div class="textbox" style="text-align:justify;padding-right:10px;margin-top:4px">
  171.         <img src="https://via.placeholder.com/300x200.png"/>
  172.         <p>Lorem impsum dolor varom, ab imo pectore. Potter. Walkers. Thrones. Olympians. Nephilim. Galaxies. Mystic Falls. Alagaesia. Supernaturals. Fairy Tales. Gladers United. Forgotten Dungeons. Legends. Meta Humans. Bending Arts. Jade Mountain. Unseen Arts. High Fae. Middle Earth. Mutants. Narnia Kingdom. Wild West. Eldritch County. Gladiators. Survival Tribes. Coding. HTML &amp; CSS. Gryffindor. Hufflepuff. Ravenclaw. Slytherin. WoX community. Site Bulletin Board. Coding Help. Academia de Villainary. Signature Factory. Discord. Fandoms. Books. Shows. Movies. Fan casts. Dream casts. Tessisamess. w3schools. liveweave. cssdesk. Minister of Magic. Headmaster. Head of House. The Management Team. Chief Editor. Professors/Teachers. Prefects. Journalists. Assistant Teachers. Plot Team. Social-Media Team. Librarian. Backstory Team. Artist. Party Team. Normal User. Profile Text. Backstory. Clubs. Books. Lessons. Course Overviews. Examinations. Lexicon. Wallposts. Charms. Potions. Transfiguration. History of Magic. Defence Against the Dark Arts. Herbology. Astronomy. Study of Ancient Runes. Arithmancy. Flying. Care of Magical Creatures. Divination. Apparition. Magical legends and tales. Music. Lumos. Alohamora. Colloportus. Accio coffee. Avada Kedavra. Aguamenti. Crucio. Morsmordre.  Rictusempra. Furnunculus. Petrificus Totalus. Aparecium. Arresto Momentum. Ascendio. Harry Potter. The Walking Dead. Game of Thrones. Percy Jackson and the Olympians. The Mortal Instruments. The Infernal Devices. The Shadowhunters. Star Wars. The Vampire Diaries. Eragon. Inheritance Cycle. Supernatural. Once Upon A Time. The Maze Runner. Dungeons and Dragons. Fantasy and Legends. DC universe. Avatar: the Last Airbender. Wings of Fire. The Chilling Adventures of Sabrina. Throne of Glass. A Court of Thorns and Roses. Lord of the Rights. X-Men. The Narnia Chronicles. Western world in 1700's. H.P Lovecraft. Rome and 300 BC. The 100. a lorem a tortor scelerisque rhoncus. Nunc posuere augue non nunc hendrerit, id mollis nisi rhoncus. Mauris tincidunt tincidunt mollis. Fusce tempus dolor eu magna elementum, quis faucibus velit sodales.</p>
  173.     </div>
  174.    
  175.     </div>
  176.    
  177. </div>
  178. </div>
  179. </div>
  180.  
  181. <!-- -ˋˏ *.·:·. PLEASE DONT REMOVE CREDITS .·:·.* ˎˊ-  -->
  182. <div class="credits">2020 &copy; Coding by <a href="https://kawaii-lau.tumblr.com/" target="_blank">Kawaii-Lau &hearts;</a></div>
  183. </body>
  184. <style>
  185. .credits {
  186.     text-align:center;
  187.     font-size:11px;
  188.     font-family:serif;
  189.     transition:0.6s ease;
  190. }
  191. .credits:hover {
  192.     letter-spacing:3px;
  193.     font-size:14px;
  194. }
  195. .credits a {
  196.     color:#CFA6A0;
  197.     text-decoration:none;
  198. }
  199. </style>
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!