Itinerae : Halloween ducklings

Title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas arcu turpis, aliquet quis libero et, congue posuere libero. Nunc non augue sed justo sollicitudin malesuada id ac neque. Maecenas sit amet fermentum sapien, eget sodales arcu. Curabitur efficitur id orci sit amet efficitur.

The Code :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<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=Doto:wght@100..900&family=Press+Start+2P&family=Silkscreen:wght@400;700&family=VT323&display=swap" rel="stylesheet">

<title>Itinerae : Halloween ducklings</title>
  <style>

body {
      background:#111 url();
      color: #A48C72;
      font-family: georgia, calibri, verdana, sans-serif;
      font-size:11px;
      letter-spacing:0.5px;
      text-shadow:0px 0px 1px #666;
      line-height:14px;
      margin: 0;
      padding: 20px;
      text-align:justify;}
    
    a:link,a:visited,a:active {color: #EBD2B4; text-decoration: none; }
    a:hover { color: #CB9C67;}
    
::-webkit-scrollbar-thumb {
background-color: #CB9C67;}
::-webkit-scrollbar 
{width: 5px; height: 0px; background: transparent;}

.container {
      width: 90%;
      max-width: 600px;
      margin: 40px auto;
      background: linear-gradient(to bottom, #3a2f25 0%, #2e241c 100%);
      border: 1px solid #000;
      box-shadow: 0 0 25px rgba(235, 217, 195, 0.4);
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      overflow: hidden;}

.top {
      display: flex;
      flex-direction: row;
      margin: 0;
      padding: 0;}

.main-column {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin: 0;
      padding: 0;
      background: linear-gradient(to bottom, #444 0%, #1d1d1d 100%);}

header {
      position: relative;
      margin: 0;
      padding: 0;
      line-height: 0;
      overflow: hidden;
      border-bottom: 1px dotted #BB8959;}

header img {
      display: block;
      width: 100%;
      height: auto;}
    
    
    
  .site-name {
     position: absolute;
     bottom: 20px;         
     right: 20px;        
     font-family: georgia, cursive;
     font-size: 18px;
     color: #CB9C67;
     text-shadow: 1px 1px 0px #333;
     font-style:italic;
     letter-spacing: 3px;
     pointer-events: none;}

.title {
      font:bold 16px 'doto', georgia, cursive;
      color: #CB9C67;
      margin: 0 0 6px 0;
      padding-bottom: 4px;
      border-bottom:1px dotted #856F57;
      letter-spacing:3px;} 
    
    
    
    nav {
      background:#29211D;
      border-bottom: 1px dotted #BB8959;
      text-align: center;}

nav ul {
      list-style: none;
      margin: 0;
      padding: 6px 0;
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;}

nav li {
      display: inline-block;}

nav a {
      text-transform:lowercase;
      font-style:italic;
      letter-spacing:2px;
      font-size: 10px;
      padding: 4px 10px;
      border-radius: 5px;
      transition: all 0.2s ease-in-out;}

main {
      flex: 1;
      padding: 10px 12px;
      background: linear-gradient(to bottom, #111 0%, #29211D 100%);
      position: relative;}

aside {
      width: 160px;
      background: linear-gradient(to bottom, #111 0%, #29211D 100%);
      border-left: 1px dotted #BB8959;
      padding: 10px;
      box-sizing: border-box;}

aside ul {
      list-style: none;
      padding: 0;
      margin: 0;}

aside li {
      margin: 6px 0;
      padding: 4px;
      background: rgba(255, 191, 105, 0.05);
      border-radius: 5px;
      transition: background 0.2s ease, transform 0.2s ease;}

aside li:hover {
      background: #333;}
    
    aside a:link,
    aside a:visited,
    aside a:active {
    color: #F5B97A;
    text-decoration: none;}

footer {
      background: linear-gradient(to right, #1e1e1e 0%, #131313 100%);
      text-align: center;
      padding: 8px 0;
      font-size: 12px;
      border-top: 1px dotted #BB8959;
      position: relative;
      font-size:10px;}

@media (max-width: 700px) {
      .top {
        flex-direction: column;}
      
      .site-name {font-size:14px;
       position: absolute;
       bottom: 13px;         
       right: 20px; }

aside {
        width: 100%;
        border-left: none;
        border-top: 1px dotted #BB8959;}

nav ul {
        flex-wrap: wrap;
        gap: 8px;
      }

nav a {
        font-size: 11px;
        padding: 4px 8px;
      }

.container {
        width: 95%;
        margin: 20px auto;
      }
    }

</style>
</head>
  
  
  
  
<body>
  
  
<div class="container">
  
<div class="top">
  
<div class="main-column">
  
<header>
<img src="https://64.media.tumblr.com/f09751e04a1be51b976a5fc85378e801/03c6ba3ddaf88231-b4/s1280x1920/e58b098c1e7a8eae1dcf54878c71362a96c3465e.jpg" alt="ducklings">
<div class="site-name"> Site name ~</div>
</header>
  
  
<nav>
<ul>
<li><a href="#">► Link</a></li> 
<li><a href="#">► Link</a></li> 
<li><a href="#">► Link</a></li> 
<li><a href="#">► Link</a></li> 
<li><a href="#">► Link</a></li>
</ul>
</nav>

<main>
<div class="title"><img src="https://64.media.tumblr.com/bd1ac82319848235f81ebceb43d9d77e/03c6ba3ddaf88231-6c/s250x400/f32c53ac673337dc714999b2aaa563dd4aebeed9.gifv" alt="x"> Title here </div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas arcu turpis, aliquet quis libero et, congue posuere libero. Nunc non augue sed justo sollicitudin malesuada id ac neque. Maecenas sit amet fermentum sapien, eget sodales arcu. Curabitur efficitur id orci sit amet efficitur. <br><br>
          
Mauris luctus est est, et tristique turpis consequat quis. Pellentesque ultrices facilisis dignissim. Nulla faucibus elit sit amet sem varius lobortis. Sed fermentum, felis vel posuere laoreet, velit urna volutpat turpis, id finibus sapien dui quis quam. Cras imperdiet quam erat, vitae accumsan nulla tempor eu. <br><br>
          
Aliquam enim lacus, bibendum id sagittis non, finibus ut sapien. Cras venenatis risus vel ante mollis, vel lobortis sem sollicitudin. 
</main>
  
</div>

<ul>
<li><a href="#">Something</a></li>
<li><a href="#"> Something</a></li>
<li><a href="#"> Something</a></li>
<li><a href="#"> Something</a></li>
</ul>
  
<br>
        
<center><img src="https://64.media.tumblr.com/6966c08f77ac2642fdd8edf76538843e/03c6ba3ddaf88231-a6/s250x400/bc5ad29b372ee8e737510ead89f4c76673562418.pnj" alt="divider"></center><br>
 
<div class="title">Title</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus ipsum id ex iaculis mattis. Nam ut lacus ut velit dictum posuere.<br><br>
  
<div class="title">Title</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus ipsum id ex iaculis mattis. Nam ut lacus ut velit dictum posuere. 
  
  
  
  
</aside>
  
  
  
</div>
  
  

<footer>
Layout made by <a href="https://itinerae.blogspot.com/" target="_blank">Itinerae.</a> Banner from <a href="https://pinterest.com/pin/885168501774855349/" target="_blank">here.</a> Dividers from <a href="https://foollovers.com/" target="_blank">here.</a> 
</footer>
  
</div>
  
  
  
</body>
</html>

Mauris luctus est est, et tristique turpis consequat quis. Pellentesque ultrices facilisis dignissim. Nulla faucibus elit sit amet sem varius lobortis. Sed fermentum, felis vel posuere laoreet, velit urna volutpat turpis, id finibus sapien dui quis quam. Cras imperdiet quam erat, vitae accumsan nulla tempor eu.