Itinerae : Octoberveil

Site name

A slogan, more links or something !

The Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Itinerae : Octoberveil</title>
<link rel="shortcut icon" href="https://64.media.tumblr.com/cfbedbf25413456d63740fea587eeecb/271d65e1b722841d-a5/s75x75_c1/58bad00f7dc507f633f0c793b8843f35338ad803.gifv"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Creepster&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nosifer&display=swap" rel="stylesheet">

/* Basics */
body {
font-family: calibri, Arial, sans-serif;
background: #0d0d0d; 
color: #ccc;
font-size:13px;
display: flex;
min-height: 100vh;
letter-spacing:1px;}
  
textarea {background:#222;color:#999;letter-spacing:1px;font-size:10px;}
    
/* Links */
a:link,a:visited,a:active { color: #888; text-decoration: none; }
a:hover { color: #444; }
  
/* Scrollbar */
::-webkit-scrollbar-thumb {
background-color: #000; 
border:1px solid #eee;
border-radius: 3px;}

::-webkit-scrollbar { 
width: 7px; 
height: 0px; 
background: transparent; }

/* Sidebar */
.sidebar {
position: sticky;
top: 0;
height: 100vh;
width: 200px;
background: #8b0000;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;}

.sidebar h2 {
font-family: 'Nosifer', cursive;
font-size: 16px;
color: white;
margin-bottom: 10px;
text-shadow: 2px 2px 4px black;}

.sidebar a {
color: white;
text-decoration: none;
margin: 10px 0;
transition: color 0.3s;}

.sidebar a:hover {
color: #ff3333;}
    
.blinkie {margin-bottom:5px;}

/* Main Content */
.content {
flex: 1;
padding: 50px 20px 20px 50px; 
background: url(https://64.media.tumblr.com/40df69e452859877c3b2b3212732aaa7/271d65e1b722841d-8d/s75x75_c1/04f1c8df991327e198e59c87b9b64cf091963b08.gifv) repeat-x;}

.site-name {
font-family: 'Nosifer', cursive;
font-size: 22px;
color: #DA1632;
margin-bottom: 10px;
text-shadow: 3px 3px 6px black;
text-align:center;}
    
.slogan {text-align:center;font-style:italic;color:#999;}

.post {
background: #1a1a1a;
border: 2px solid #8b0000;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 0 10px #8b0000;
max-width: 500px;
width: 100%;}

.post h3 {
font-family: 'Creepster', cursive;
margin-bottom: 10px;
color: #DA1632;
letter-spacing:4px;}

/* Responsive layout */
@media (max-width: 768px) {
body {
flex-direction: column;}

.sidebar {
position: relative;
height: auto;
width: 100%;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;}

.sidebar h2 {
width: 100%;
text-align: center;
margin-bottom:5px;}

.content {
padding: 15px;
padding-top:50px;}

.site-name {
font-size: 22px;
text-align: center;}
}
  
  
</style>
  
  
</head>
<body>
  
  
  

<div class="sidebar">
<img src="https://64.media.tumblr.com/2dfce73552bb5fd3e255c5f5e2af5d88/d7e373807f4b1d57-b1/s75x75_c1/52adc281e8447a7c187a96dedd9e72ceb9232f23.pnj" alt="bird-skull">
<br>
<h2>Menu</h2>
<a href="#">☠ Link</a>
<a href="#">☠  Link</a>
<a href="#">☠ Link</a>
<a href="#">☠ Link</a><br><br>
  
<h2>Blinkies</h2>
<img src="https://64.media.tumblr.com/bd3f9265d7dac9f4bcb8c76ed5dcb2f7/7ac65c796547ceef-a3/s250x400/76386241577321633b710e42dccdb4ad8e1cb99e.gifv" alt="x" class="blinkie">
<img src="https://64.media.tumblr.com/7cbdaccd5cd6fbad2adab01b657b755a/7ac65c796547ceef-c0/s250x400/a78783901e9fc059e0a237975eeeb9cdc1a68c78.webp" alt="x" class="blinkie">
<img src="https://64.media.tumblr.com/ce786415e4507390525ddcc2e2a414c8/7ac65c796547ceef-30/s250x400/6029ae3ea1dca3bbf233955c81d326e52dd102f8.webp" alt="x" class="blinkie">
<img src="https://64.media.tumblr.com/d3615cc187f6253cf271db2d12a53aa0/7ac65c796547ceef-cd/s250x400/2d59e532dd215f3ff4a5edc40597e2fa17419032.gifv" alt="x" class="blinkie">
<img src="https://64.media.tumblr.com/8ce36cf6ae989796bc8e43a022f54961/7ac65c796547ceef-9b/s250x400/8a0ab0426c3bd02c53131ad4fb8f811e13a72b18.gifv" alt="x" class="blinkie">

</div>

<div class="content">
<div class="post">
<div class="site-name">
<img src="https://64.media.tumblr.com/d0c61c7cec92f7184f124fc37476968e/271d65e1b722841d-6f/s250x400/85bccb0fcbd3ab6b96722711fe948fd9a10aa960.webp" alt="main-image">
<br> Site name</div> 
<div class="slogan">A slogan, more links or something !</div>
</div>
    
  
    

<div class="post">
<h3>Post Title 1</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum finibus facilisis. Pellentesque malesuada lacinia velit, id feugiat lacus laoreet sed. Etiam at lacinia lacus. Phasellus iaculis sodales dignissim. Vestibulum faucibus risus eu ligula viverra maximus et et purus. Sed sit amet orci semper risus placerat lobortis tincidunt eget sapien. Morbi viverra ultricies eleifend. Nullam vestibulum faucibus quam, sit amet hendrerit nisi euismod euismod. 
</div>

<div class="post">
<h3>Post Title 2</h3>
Integer auctor, nisl in fermentum lacinia, sapien purus hendrerit nulla, at ultrices purus sapien quis felis. Ut interdum sem sit amet suscipit rhoncus. Nullam eget gravida ex. Sed interdum, augue non molestie rhoncus, nulla orci posuere lorem, sed condimentum mauris mi id nunc. Mauris tempor nisl nec feugiat mollis. Vivamus magna arcu, tempor non finibus eu, dictum ut orci. Duis quis tempus nulla, at dapibus orci. Sed euismod sagittis lacinia. Duis eu cursus augue. Sed metus velit, tincidunt auctor consectetur ut, vestibulum vitae felis.
</div>

<div class="post">
<h3> Post Title 3</h3>
Suspendisse fringilla ante quam, ac aliquam nisl imperdiet imperdiet. Phasellus in hendrerit mi. Morbi sit amet ex ut nibh faucibus accumsan. Suspendisse eget tincidunt odio, ultrices ultrices magna. Sed felis justo, pulvinar ultrices tincidunt non, congue id ante. Donec leo risus, dictum quis diam id, mollis venenatis est. Morbi enim tortor, gravida vel nisl at, feugiat pretium mauris.
</div>
  
  

<div class="post">
Layout made by <a href="https://itinerae.blogspot.com/" target="_blank">Itinerae.</a> Graphics founded from <a href="https://gloomy-poison.neocities.org/spookygraphics" target="_blank">here.</a> <br>
The fonts are "Nosifer" and "Creepster" from Google fonts. 
</div>
</div>
  
  
  
  
</body>
</html>

Post Title 2

Integer auctor, nisl in fermentum lacinia, sapien purus hendrerit nulla, at ultrices purus sapien quis felis. Ut interdum sem sit amet suscipit rhoncus. Nullam eget gravida ex. Sed interdum, augue non molestie rhoncus, nulla orci posuere lorem, sed condimentum mauris mi id nunc. Mauris tempor nisl nec feugiat mollis. Vivamus magna arcu, tempor non finibus eu, dictum ut orci. Duis quis tempus nulla, at dapibus orci. Sed euismod sagittis lacinia. Duis eu cursus augue. Sed metus velit, tincidunt auctor consectetur ut, vestibulum vitae felis.

Post Title 3

Suspendisse fringilla ante quam, ac aliquam nisl imperdiet imperdiet. Phasellus in hendrerit mi. Morbi sit amet ex ut nibh faucibus accumsan. Suspendisse eget tincidunt odio, ultrices ultrices magna. Sed felis justo, pulvinar ultrices tincidunt non, congue id ante. Donec leo risus, dictum quis diam id, mollis venenatis est. Morbi enim tortor, gravida vel nisl at, feugiat pretium mauris.

Layout made by Itinerae. Graphics founded from here.
The fonts are "Nosifer" and "Creepster" from Google fonts.