API tools faq
paste
werewiire

Diablerie Layout

werewiire
Jul 21st, 2025
209
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.34 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>Diablerie</title>
  6.        
  7.         <!-- THEME STYLE / CSS START-->
  8.         <style>
  9.             body {
  10.                 background-color: black;
  11.                 margin: 8px;
  12.                 color: #eeeeee;
  13.                 font-family: arial, helvetica;
  14.                 font-size: 11pt;
  15.             }
  16.  
  17.             .small {font-size: 9pt;}
  18.  
  19.             h3 {color: #d9d9ff}
  20.  
  21.             h2 {
  22.                 font-size: 13.5pt;
  23.                 font-weight: bold;
  24.                 color: #9999FF;
  25.                 margin-top: 20px
  26.             }
  27.  
  28.             h1 {
  29.                 font-family: "arial narrow", arial, helvetica;
  30.                 font-size: 24pt;
  31.                 font-weight: bold;
  32.                 color: #9999FF;
  33.                 text-align: center;
  34.                 letter-spacing: 6px;
  35.             }
  36.  
  37.             em {
  38.                 color: #d9d9ff;
  39.             }
  40.  
  41.             a:link {color: #9999FF;}
  42.             a:visited {color: #999999;}
  43.             a:active {color: #999999;}
  44.             a:hover {color: #cccccc; cursor: crosshair;}
  45.  
  46.             ul {list-style-type: circle;}
  47.  
  48.             blockquote {
  49.                 margin-left: 2px;
  50.                 padding-left: 15px;
  51.                 border-left: 2px solid #9999FF;
  52.             }
  53.  
  54.             .container {
  55.                 width: 750px;
  56.                 margin: 30px auto 30px auto;
  57.                 display: flex;
  58.                 flex-direction: column;
  59.                 justify-content: center;
  60.                 align-items: flex-start;
  61.                 border: 2px solid #9999FF;
  62.             }
  63.  
  64.             /* Header */
  65.             .head {
  66.                 width: 100%;
  67.                 height: 43px;
  68.                 color: #9999FF;
  69.                 background-image: url(images/top.gif);
  70.                 border-bottom: solid 0.5px #9999FF;
  71.                 text-align: left;
  72.                 font-family: "UnifrakturCook", cursive;
  73.                 font-weight: 700;
  74.                 font-style: normal;
  75.             }
  76.             .headarea {
  77.                 display: flex;
  78.                 height: 100%;
  79.             }
  80.             .headarea a {
  81.                 text-decoration: none;
  82.                 font-size: 20px;
  83.                 line-height: 40px;
  84.                 letter-spacing: 3px;
  85.             }
  86.             .headarea a:hover {text-shadow: 0 0 3px #eee}
  87.  
  88.             /* Navigation */
  89.             .navi {
  90.                 width: 100%;
  91.                 height: 30px;
  92.                 border-bottom: solid 0.5px #9999FF;
  93.             }
  94.             .navi ul {
  95.                 display: flex;
  96.                 height: 100%;
  97.                 justify-content: space-between;
  98.                 list-style-type: none;
  99.                 margin: 0;
  100.                 padding: 0;
  101.             }
  102.  
  103.             .navi li {
  104.                 padding: 5px;
  105.                 display: block;
  106.                 align-content: center;
  107.                 width: 100px;
  108.                 overflow-x:hidden;
  109.             }
  110.  
  111.             .navi li.dropdown {
  112.                 display: inline-block;
  113.                 background: transparent;
  114.             }
  115.  
  116.             .navi li:hover, .navigation li.dropdown:hover {
  117.                 background-color: #2b2b2b;
  118.                 color: var(--bright);
  119.                 text-shadow: 0 0 3px #eee;
  120.             }
  121.  
  122.             .navi a {
  123.                 display: inline-block;
  124.                 text-decoration: none;
  125.                 background: transparent;
  126.                 text-align: center;
  127.                 margin-bottom: 4px;
  128.                 padding-bottom: 2px;
  129.                 padding-top: 2px;
  130.                 line-height: 10px;
  131.                 text-transform: uppercase;
  132.                 letter-spacing: 1px;
  133.                 color: #9999FF;
  134.                 width: inherit;
  135.             }
  136.  
  137.             .navi a:hover {color: white; text-decoration: underline}
  138.  
  139.             .dropdown-content {
  140.                 display: none;
  141.                 position: absolute;
  142.                 width: 90px;
  143.                 padding: 4px;
  144.                 border: 1px solid #9999FF;
  145.                 background-color: black;
  146.                 z-index: 1;
  147.             }
  148.  
  149.             .dropdown-content a {
  150.                 padding: 4px;
  151.                 text-decoration: none;
  152.                 display: block;
  153.                 text-align: center;
  154.                 width: auto;
  155.             }
  156.  
  157.             .dropdown-content a:hover {
  158.                 background-color: #9999FF;
  159.                 width: auto;
  160.             }
  161.  
  162.             .dropdown:hover .dropdown-content {
  163.                 display: block;
  164.             }
  165.  
  166.             /* Body */
  167.             .body {
  168.                 padding: 10px;
  169.             }
  170.  
  171.             .body img {
  172.                 max-width: 100%;
  173.             }
  174.  
  175.             /* Footer */
  176.             .foot {
  177.                 width: 100%;
  178.                 text-align: center;
  179.                 border-top: solid 0.5px #9999FF;
  180.                 font-size: 9pt;
  181.             }
  182.  
  183.             /* Fonts */
  184.             .unifrakturcook-bold {
  185.               font-family: "UnifrakturCook", cursive;
  186.               font-weight: 700;
  187.               font-style: normal;
  188.             }
  189.         </style>
  190.         <!-- THEME STYLE / CSS END -->
  191.        
  192.         <!-- Google Fonts -->
  193.         <link rel="preconnect" href="https://fonts.googleapis.com">
  194.         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  195.         <link href="https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap" rel="stylesheet">
  196.     </head>
  197.    
  198.     <!-- HTML BODY -->
  199.     <body>
  200.         <div class="container">
  201.            
  202.             <!-- Header -->
  203.             <div class="head">
  204.                 <div class="headarea"><img src="images/330px-Malkavian_symbol.png" height="33px" style="padding: 5px"><a href="index.html">A Fun and Funky Site Title</a></div>
  205.             </div>
  206.            
  207.             <!-- Navigation Bar -->
  208.             <div class="navi">
  209.                 <nav>
  210.                     <ul>
  211.                         <li><a href="#">king</a></li>
  212.  
  213.                         <li class="dropdown"><a href="javascript:void(0)" class="dropbtn">queen &blacktriangledown;</a>
  214.                             <!-- Dropdown Menu -->
  215.                             <div class="dropdown-content">
  216.                                 <a href="#">ace</a>
  217.                                 <a href="#">king</a>
  218.                                 <a href="#">queen</a>
  219.                                 <a href="#">jack</a>
  220.                             </div>
  221.                         </li>
  222.                         <li><a href="#">rook</a></li>
  223.                         <li><a href="#">bishop</a></li>
  224.                         <li><a href="#">knight</a></li>
  225.                         <li><a href="#">pawn</a></li>
  226.                     </ul>
  227.                 </nav>
  228.             </div>
  229.            
  230.             <!-- Main Content -->
  231.             <div class="body">
  232.                 <h1>&#78585; Page Title &#78585;</h1>
  233.                 <h2>A Section Header</h2>
  234.                 <img src="images/placeholder1.png" style="float: right; width: 30%">
  235.                
  236.                 <p>This layout template is heavily inspired by the site for a long-defunct IRC based VtM roleplay, which I found while exploring the Wayback Machine. I changed it a lot it to be compatible with current HTML, and it's flex-based rather than table-based now. However, it's <em>not</em> responsive/mobile-friendly.</p>
  237.                 <p>It's designed to be quite basic, easy to add your own flair and customisation to. The header background image is 750x43 if you want to replace it with your own.</p>
  238.                 <p>I would appreciate you leaving credit and a <a href="https://werewiire.neocities.org/">link to me</a> somewhere on your site if you use this theme. Also, let me know by signing my <a href="https://werewiire.atabook.org/">guestbook</a>! Thank you &#94;_&#94;</p>
  239.                 <p>&gt;&gt; You can get the code <a href="/" target="_blank">here</a>! &lt;&lt;</p>
  240.                
  241.                 <h2>Down the Rabbit-Hole</h2>                
  242.                 <p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversations?”</p>
  243.                 <ul>
  244.                     <li>So she was considering in her own mind...</li>
  245.                     <li>(as well as she could, for the hot day made her feel very sleepy and stupid)</li>
  246.                     <li>...whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies...</li>
  247.                     <li>When suddenly a White Rabbit with pink eyes ran close by her.</li>
  248.                 </ul>
  249.                
  250.                 <p><a href="https://www.gutenberg.org/files/11/11-h/11-h.htm">This is a link.</a></p>
  251.                 <p><strong>This is bold text.</strong></p>
  252.                 <p><em>This is italic text.</em></p>
  253.                 <blockquote>And this is a block quote!</blockquote>
  254.                
  255.                 <h2>Another Lovely Header</h2>
  256.                 <p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, “Oh dear! Oh dear! I shall be late!” (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually <em>took a watch out of its waistcoat-pocket</em>, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge. </p>
  257.                
  258.             </div>
  259.            
  260.             <!-- Footer -->
  261.             <div class="foot">
  262.                 <p>&#78585; Layout by <a href="https://werewiire.neocities.org/">werewiire</a> | CC BY &#78585;</p>
  263.             </div>
  264.         </div>
  265.     </body>
  266. </html>
Tags: html CSS
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!