API tools faq
paste
Kawaii-Lau

True Form (Dark) [Article]

Kawaii-Lau
Jun 27th, 2020 (edited)
1,236
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.91 KB | None | 0 0
raw download clone embed print report
  1. <!-- CUSTOM FONTS -->
  2. <link href="https://fonts.googleapis.com/css2?family=Cabin&display=swap" rel="stylesheet">
  3. <style>
  4. /*  
  5.  
  6.     ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
  7.      Thank you for using my code!
  8.     ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝
  9. Rules to Follow:
  10.  
  11. ✶ Do not EVER delete or remove the credits of the coder or claim this code as your own.
  12. ✶ Do not redistribute this code, no matter how much you edited it as a base or otherwise!
  13. ✶ If you need any help in fixing codes, contact me on Discord (Kawaii-lau#6316). Major changes in code is not accepted.
  14. ✶ If you like to share this code, send to your friends the link of my blog, kawaii-lau.tumblr.com , and support me!
  15.  
  16. If you like a custom code, check out my blog to see if commissions are open!
  17.  
  18. XOXO, Lauren.
  19.  
  20.       ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
  21.         2020 © Coding by Kawaii-Lau
  22.       ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝                            
  23. */
  24.  
  25. /* ─── ･ ｡ﾟ☆: *.
  26.     EASY CSS CHANGES
  27.         .* :☆ﾟ. ───*/
  28.  
  29. :root {
  30.     --background:url(https://static.vecteezy.com/system/resources/thumbnails/000/403/939/small/v295-binn-gold_background_plain-02.jpg);/* Background */
  31.     --background-size:150px;/* Background Size */
  32.  
  33.     --solid-background:#181818;/* Main-box Background */
  34.     --accent-color:#fbe7b5;/* Accent Color */
  35.     --head-font:'Justus';/* Header Font */
  36.     --main-text-color:white;/* Main Text Color */
  37.     --headline-shadow:black;/* Headline Text Shadow */
  38.     --box-shadow:#fbe7b5;/* Box Shadow (Main Box) */
  39. }
  40.  
  41. /* ─── ･ ｡ﾟ☆: *.
  42.     BACKGROUND
  43.         .* :☆ﾟ. ───*/
  44.  
  45. .background {
  46.     background:var(--background);
  47.     background-size:var(--background-size);
  48.     padding:10px 0px;
  49. }
  50.  
  51. /* ─── ･ ｡ﾟ☆: *.
  52.      MAIN BOX
  53.         .* :☆ﾟ. ───*/
  54.  
  55. .main-box {
  56.     width:550px;
  57.     background:var(--solid-background);
  58.     margin:10px auto;
  59.     padding:10px 40px 40px 40px;
  60.     font-family:Cabin;
  61.     box-shadow:6px 6px var(--box-shadow);
  62.     color:var(--main-text-color);
  63. }
  64.  
  65. /* ─── ･ ｡ﾟ☆: *.
  66.        LOGO
  67.         .* :☆ﾟ. ───*/
  68.  
  69. .logo {
  70.     width:inherit;
  71.     padding-bottom:20px;
  72.     margin-bottom:10px;
  73.     border-bottom:3px solid var(--accent-color);
  74. }
  75.  
  76. /* ─── ･ ｡ﾟ☆: *.
  77.     COLOR STRIP
  78.         .* :☆ﾟ. ───*/
  79.  
  80. .strip {
  81.     width:inherit;
  82.     height:30px;
  83.     background:var(--accent-color);
  84.     position:absolute;
  85.     z-index:3;
  86.     margin-top:-20px;
  87. }
  88.  
  89. /* ─── ･ ｡ﾟ☆: *.
  90.      IMAGES
  91.         .* :☆ﾟ. ───*/
  92.  
  93. .headline-img {
  94.     margin:0px auto;
  95.    
  96. }
  97. .logo img, .headline-img img {
  98.     display:block;
  99.     margin:0px auto;
  100.     width:100%;
  101.     position:relative;
  102.     z-index:5
  103. }
  104.  
  105. /* ─── ･ ｡ﾟ☆: *.
  106.     HEADLINE TITLE
  107.         .* :☆ﾟ. ───*/
  108.  
  109. .headline {
  110.     font-size:42px;
  111.     text-align:center;
  112.     font-family:var(--head-font);
  113.     margin-top:-20px;
  114.     z-index:6;
  115.     position:relative;
  116.     text-shadow:-1px 1px 10px var(--headline-shadow);
  117. }
  118.  
  119. /* ─── ･ ｡ﾟ☆: *.
  120.     ARTICLE BODY CONTENT
  121.         .* :☆ﾟ. ───*/
  122.  
  123. .main-box > .content {
  124.     margin-top:10px;
  125.     text-align:justify;
  126.     width:100%;
  127.     padding-bottom:20px;
  128.     border-bottom:5px solid var(--accent-color)
  129. }
  130.  
  131. /* ─── ･ ｡ﾟ☆: *.
  132.     ADVERTISEMENTS CONTENT
  133.             .* :☆ﾟ. ───*/
  134.  
  135. .side-content {
  136.     margin:0px 0px 10px 10px;
  137.     float:right;
  138.     width:140px;
  139.     text-align:left;
  140.     padding:0px 0px 10px 10px;
  141. }
  142.  
  143. /* ─── ･ ｡ﾟ☆: *.
  144.     ADVERTISEMENTS TITLE
  145.             .* :☆ﾟ. ───*/
  146.  
  147. .side-content > .head {
  148.     text-align:center;
  149.     font-size:18px;
  150.     margin-bottom:15px;
  151.     text-transform:uppercase;
  152.     font-weight:bold;
  153.     font-family:var(--head-font);
  154.     width:inherit; 
  155.     position:relative; z-index:5;
  156.     text-shadow:-1px 1px 5px var(--headline-shadow);
  157. }
  158.  
  159. /* ─── ･ ｡ﾟ☆: *.
  160.     ADVERTISEMENTS COLOR STRIP
  161.             .* :☆ﾟ. ───*/
  162.  
  163. .side-content > .strip {
  164.     width:170px;
  165.     height:10px;
  166.     background:var(--accent-color);
  167.     margin:-25px 0px 10px -5px;
  168.     z-index:3; position:relative;
  169. }
  170.  
  171. /* ─── ･ ｡ﾟ☆: *.
  172.     JOURNALIST
  173.         .* :☆ﾟ. ───*/
  174.  
  175. .journalist {
  176.     float:left;
  177.     margin:10px 10px 10px 0px;
  178.     width:370px; padding:5px;
  179.     border-top:3px solid var(--accent-color);
  180.     border-bottom:3px solid var(--accent-color);
  181. }
  182.  
  183. /* ─── ･ ｡ﾟ☆: *.
  184.     JOURNALIST PICTURE
  185.         .* :☆ﾟ. ───*/
  186.  
  187. .j-pic {
  188.     width:70px;
  189.     height:70px;
  190.     margin-right:10px;
  191. }
  192.  
  193. .j-pic img {
  194.     width:inherit; height:inherit;
  195. }
  196.  
  197. /* ─── ･ ｡ﾟ☆: *.
  198.      FLEXBOX CSS
  199.         .* :☆ﾟ. ───*/
  200.  
  201. .row {display:flex; flex-direction:row;}
  202. .col {display:column; flex-direction:column}
  203.  
  204.  
  205. /* ─── ･ ｡ﾟ☆: *.
  206.      CREDITS (DO NOT REMOVE)
  207.                 .* :☆ﾟ. ───*/
  208. .credits {
  209.     color:var(--main-font-color);
  210.     text-decoration:none;
  211.     transition:1s ease;
  212. }
  213. .credits:hover {
  214.     color:#C2B0CD;     
  215. }
  216.  
  217. /* ─── ･ ｡ﾟ☆: *.
  218.     IMPORT CUSTOM FONT
  219.             .* :☆ﾟ. ───*/
  220.  
  221. @font-face {
  222.     src:url(https://dl.dropbox.com/s/2g3k1bfmabftuti/Justus-Roman.ttf);
  223.    font-family:'Justus';
  224. }
  225. </style>
  226. <body>
  227. <div class="background">
  228. <div class="main-box">
  229. <!--
  230.     ─── ･ ｡ﾟ☆: *.
  231.     ➤ CAT LOGO (It can be removed)
  232.                 .* :☆ﾟ. ─── -->
  233.     <center>    <!-- From here -->
  234.         <div style="width:100px;margin:0px 0px 10px;-webkit-mask-image:url(https://i.imgur.com/jgXEH6i.png);-webkit-mask-size:100% 100%;height:80px;background:white"></div>
  235.     </center>   <!-- To here -->
  236.  
  237.     <header class="logo">
  238. <!--
  239.     ─── ･ ｡ﾟ☆: *.
  240.     ➤ HEADER LOGO - https://fontmeme.com/fonts/jenriv-titling-font/    
  241.                 .* :☆ﾟ. ─── -->
  242.             <img src="https://fontmeme.com/permalink/200624/83c83858a14f9152ab78f7ee00060d71.png" style="margin-bottom:-10px"/>
  243.         <div class="strip"></div>
  244.     </header>
  245.  
  246. <!--
  247.     ─── ･ ｡ﾟ☆: *.
  248.     ➤ HEADLINE IMAGE (MAIN ARTICLE IMAGE)
  249.                     .* :☆ﾟ. ─── -->
  250.     <div class="headline-img">
  251.         <img src="https://i.pinimg.com/originals/72/9a/b2/729ab2922f4c4ef4c6e132c58684b6b5.gif"/>
  252.     </div>
  253. <!--
  254. ─── ･ ｡ﾟ☆: *.
  255.     ➤ TITLE OF ARTICLE
  256.                     .* :☆ﾟ. ─── -->
  257.     <div class="headline">
  258.         Hot-tempered Boy Turns Into Cat
  259.     </div> <!-- end of title -->
  260.  
  261.  
  262.  
  263.     <div class="content"> <!-- Start of article -->
  264.    
  265. <!--
  266. ─── ･ ｡ﾟ☆: *.
  267.     ➤ SIDE CONTENT (ADVERTISEMENT)
  268.                         .* :☆ﾟ. ─── -->    
  269.     <div class="side-content">
  270.         <div class="head"> <!-- Side-content Header -->
  271.             Advertisement
  272.         </div>
  273.         <div class="strip"></div>
  274.         <div class="content"> <!-- Content -->
  275.             <b style="color:var(--accent-color);text-shadow:-1px 1px black, 1px 1px black, -1px -1px black, 1px -1px black">Kawaii-Lau</b> is happy to help you with your coding &hearts; Just message her on Discord, Kawaii-Lau#6316, if you need help in fixing codes or request your code template at her blog, <b style="color:var(--accent-color);text-shadow:-1px 1px black, 1px 1px black, -1px -1px black, 1px -1px black">https://kawaii-lau.tumblr.com</b> .
  276.         </div>
  277.     </div>
  278.  
  279. <!--
  280. ─── ･ ｡ﾟ☆: *.
  281.     ➤ JOURNALIST DETAILS
  282.                         .* :☆ﾟ. ─── -->  
  283.     <div class="journalist row">  
  284.         <div class="j-pic"><!-- ➤ JOURNALIST PICTURE -->  
  285.             <img src="https://i.imgur.com/PASmfZh.png"/>
  286.         </div>
  287.    
  288. <!-- ➤ JOURNALIST AND ARTICLE INFO -->    
  289.         <div class="j-info">
  290.             <b style="color:#e54543;font-size:22px">Kyo Sohma</b><br>
  291.             Issue No. #000<br>
  292.             January 15th, XXXX
  293.         </div>
  294.    
  295.     </div>
  296. <!--
  297. ─── ･ ｡ﾟ☆: *.
  298.     ➤ THE ACTUAL ARTICLE
  299.                         .* :☆ﾟ. ─── -->      
  300.      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. <br><br>
  301.    
  302.     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.
  303.     </div>
  304. <!-- ➤ CREDITS (PLEASE DO NOT REMOVE) -->  
  305.     <div style="padding-top:5px;padding-left:20px"><span style="font-size:14px">2020 &copy; <a href="https://kawaii-lau.tumblr.com" target="_blank" class="credits">Kawaii-Lau</a></span></div>
  306. </div>
  307. </div>
  308. </body>
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!