itinerae: xmas 2025

Title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum quam urna, quis sollicitudin eros tempus placerat. Nullam a magna aliquam arcu dictum molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Title here

extra link

Title here

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris cursus nunc massa, tempor hendrerit est bibendum eu. Vivamus vestibulum fringilla lorem quis viverra. Nam pharetra vitae arcu quis rhoncus.

title here

Nunc aliquam nisl et dictum lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus ex erat, ut tempus augue elementum ac. Sed at velit efficitur, hendrerit lectus at, eleifend lacus. Pellentesque vitae tempor magna, eu tincidunt metus.

The Code

A tip: if you want this (or any other) column to be wider than the others, just change the section class to "largecolumn".

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="https://64.media.tumblr.com/b73eb67fe93a3e231b06166010d93109/02a5b77b04f46187-33/s75x75_c1/8cfb487b57b24b5c66cc6edae77226cc16567ddb.gifv">

<title>itinerae: xmas 2025</title>
<style>
@font-face {font-family: spirit;src: url(https://dl.dropbox.com/scl/fi/npu6iooiwovhxljcjoeex/spirit.ttf?rlkey=eubwh1fc2c460q68exstay65d&dl=0);}
  
* {
box-sizing: border-box;
margin: 0;
padding: 0;}

body {
font-family: tahoma, calibri, georgia, arial, sans-serif;
font-size:11px;
color:#DC94A1;
letter-spacing:1px;
line-height:13px;
background: #FFF7F9 url(https://64.media.tumblr.com/effebb0ce0a222afb14b9b133deb4f83/14fadfff40e7cda3-7b/s500x750/62c66254c66af1722057f3161fc6629f4388e6de.gifv) fixed;
padding:20px;}
  
i {color:#EA8888;}
  
/* Links */
a{color:#EA8888;text-decoration:none;font-weight:bold;}
a:hover { color:#DC94A1; text-decoration:none; }
.extra {display:block;font-size:12px;padding-left:10px;margin-bottom:4px;color:#EA8888;}  
  
/* Scrollbar */
::-webkit-scrollbar-thumb {
background-color: #EA8888;
border:1px solid #fff;
border-radius: 6px;}
::-webkit-scrollbar {
width:6px; height: 0px;
background: transparent;}

/* Boxes and Titles */
.box {background:#FFF7F9;padding:5px;border:1px dashed #EDC2B1;border-radius:10px;}
.title {font:italic 15px 'georgia', arial;font-weight:bold;color:#F7B6C2;text-transform:lowercase;letter-spacing:3px;margin-bottom:5px;border-bottom:2px solid #fff;}
.title-filled {background:#F7B6C2;text-align:center;font:italic 13px 'georgia', arial;font-weight:bold;color:#fff;text-transform:lowercase;letter-spacing:3px;margin-bottom:4px;padding:1px;border-radius:10px;}

/* Layout */
.container {
width: 100%;
max-width: 700px;
margin: 20px auto;
background:#FDF0F2;
padding:10px;
border-radius:20px;
border-width:8px;
border-style:solid;
border-image: url("https://64.media.tumblr.com/5ff9a9d85e20892630c315cd0f203304/02a5b77b04f46187-6e/s75x75_c1/965fd167f4de4644dc593728fddedb46a37b93e7.pnj") 8 fill round;}

/* Header / Site name */
.sitename {
color: #F7B6C2;
padding: 10px;
margin-bottom:10px;
text-align:center;
font:italic 26px 'spirit', georgia, arial;}

/* Navigation */
.nav-bar {
margin-top: 0px;
background: transparent;
display: flex;
justify-content: center;
padding: 0px;}

.nav-bar a {
color: #EA8888;
font-weight:bold;
text-decoration: none;
text-transform:lowercase;
font-family:georgia, arial;
padding-bottom:0px;
font-size: 11px;
line-height:15px;
background:#fff;
padding:2px 10px;
margin-left:5px;
margin-right:5px;
border:1px dashed #EDC2B1;
border-radius:10px;}

/* Main / Content area */
.content {
display: flex;
gap: 10px;
margin-top:10px;}

.column {
flex: 1;
border-radius:10px;
padding: 3px;
text-align: justify;}
  
.largecolumn {
flex: 2;
border-radius:10px;
padding: 3px;
text-align: justify;}

/* Footer */
.footer {
background: #fff;
text-align: center;
padding: 10px;
margin-top:10px;
border:1px dashed #ddd;
border-radius:20px;}

/* Responsiveness */
@media (max-width: 600px) {
.content {
flex-direction: column;}

.nav-bar {
flex-direction: column;
gap: 8px;
align-items: center;
  }
.nav-bar a {display:block;width:60%;text-align:center;}
}

</style>
</head>
  
  
  
<body>

<div class="container">
  
  
    
<header class="sitename">
<img src="https://64.media.tumblr.com/22f15713081a2ae17d1d602cbd48add1/02a5b77b04f46187-f9/s100x200/8c2f3850ed633f6fac3bc503ae5a245389cbe92d.webp" alt="x"><br>
merry christmas neocities !
</header>

<nav class="nav-bar">
<a href="#"><img src="https://64.media.tumblr.com/0cbeadcbddd7fef9950139236ebb3e05/02a5b77b04f46187-6f/s75x75_c1/cdfa76359a1fb06941f60d272dd1d8f4a890ba8d.webp" height="10" alt="x"> hello</a>
<a href="#"><img src="https://64.media.tumblr.com/0cbeadcbddd7fef9950139236ebb3e05/02a5b77b04f46187-6f/s75x75_c1/cdfa76359a1fb06941f60d272dd1d8f4a890ba8d.webp" height="10" alt="x"> put</a>
<a href="#"><img src="https://64.media.tumblr.com/0cbeadcbddd7fef9950139236ebb3e05/02a5b77b04f46187-6f/s75x75_c1/cdfa76359a1fb06941f60d272dd1d8f4a890ba8d.webp" height="10" alt="x"> your</a>
<a href="#"><img src="https://64.media.tumblr.com/0cbeadcbddd7fef9950139236ebb3e05/02a5b77b04f46187-6f/s75x75_c1/cdfa76359a1fb06941f60d272dd1d8f4a890ba8d.webp" height="10" alt="x"> pretty</a>
<a href="#"><img src="https://64.media.tumblr.com/0cbeadcbddd7fef9950139236ebb3e05/02a5b77b04f46187-6f/s75x75_c1/cdfa76359a1fb06941f60d272dd1d8f4a890ba8d.webp" height="10" alt="x"> links</a>
<a href="#"><img src="https://64.media.tumblr.com/0cbeadcbddd7fef9950139236ebb3e05/02a5b77b04f46187-6f/s75x75_c1/cdfa76359a1fb06941f60d272dd1d8f4a890ba8d.webp" height="10" alt="x"> here</a>
</nav>

<main class="content">
  
  
  
<section class="column">
<div class="title"><img src="https://64.media.tumblr.com/fb4c4a7ed36da8da0166391d3b10171b/02a5b77b04f46187-36/s75x75_c1/5c8a270d129e365073f8555a7d1a70763472dc0b.gifv" alt="x">  Title here</div> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum quam urna, quis sollicitudin eros tempus placerat. Nullam a magna aliquam arcu dictum molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
<br><br>
<div class="box">  
<div class="title-filled"> Title here</div>
<a class="extra" href=""><img src="https://64.media.tumblr.com/95c805fe5e76b298362d9ad0800a5213/bb21ed1f809c8c30-70/s75x75_c1/abbaf6027d829017e2377a7348db13ec336b16d4.webp" alt="x"> extra link</a>
<a class="extra" href=""><img src="https://64.media.tumblr.com/95c805fe5e76b298362d9ad0800a5213/bb21ed1f809c8c30-70/s75x75_c1/abbaf6027d829017e2377a7348db13ec336b16d4.webp" alt="x">  extra link</a>
<a class="extra" href=""><img src="https://64.media.tumblr.com/95c805fe5e76b298362d9ad0800a5213/bb21ed1f809c8c30-70/s75x75_c1/abbaf6027d829017e2377a7348db13ec336b16d4.webp" alt="x">  extra link</a>
<a class="extra" href=""><img src="https://64.media.tumblr.com/95c805fe5e76b298362d9ad0800a5213/bb21ed1f809c8c30-70/s75x75_c1/abbaf6027d829017e2377a7348db13ec336b16d4.webp" alt="x">  extra link</a>
<a class="extra" href=""><img src="https://64.media.tumblr.com/95c805fe5e76b298362d9ad0800a5213/bb21ed1f809c8c30-70/s75x75_c1/abbaf6027d829017e2377a7348db13ec336b16d4.webp" alt="x">  extra link</a>
<a class="extra" href=""><img src="https://64.media.tumblr.com/95c805fe5e76b298362d9ad0800a5213/bb21ed1f809c8c30-70/s75x75_c1/abbaf6027d829017e2377a7348db13ec336b16d4.webp" alt="x">  extra link</a>
</div>
<br>
<div class="title"> Title here</div> 
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris cursus nunc massa, tempor hendrerit est bibendum eu. Vivamus vestibulum fringilla lorem quis viverra. Nam pharetra vitae arcu quis rhoncus. 
<br><br>
           
<div class="title"> title here </div> 
Nunc aliquam nisl et dictum lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus ex erat, ut tempus augue elementum ac. Sed at velit efficitur, hendrerit lectus at, eleifend lacus. Pellentesque vitae tempor magna, eu tincidunt metus. 
</section>
          
   
  
  
<section class="column">
<div class="title">
<img src="https://64.media.tumblr.com/48d75db84391a9e27bf2bd9761d8809f/02a5b77b04f46187-43/s75x75_c1/3b44e91724236eeea8d845b28cccf9614ee8c7f6.gifv" alt="x"> Title here</div>

<i>A tip: if you want this (or any other) column to be wider than the others, just change the section class to "largecolumn".</i><br><br>  
  
<div class="title"><img src="https://64.media.tumblr.com/fb4c4a7ed36da8da0166391d3b10171b/02a5b77b04f46187-36/s75x75_c1/5c8a270d129e365073f8555a7d1a70763472dc0b.gifv" alt="x"> Title here</div> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum quam urna, quis sollicitudin eros tempus placerat. Nullam a magna aliquam arcu dictum molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris cursus nunc massa, tempor hendrerit est bibendum eu. 
<br><br>
  
<div class="box">
<div class="title-filled">Title here</div> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum quam urna, quis sollicitudin eros tempus placerat.
</div>
<br>
  
<div class="title"> Title here</div>
Vivamus vestibulum fringilla lorem quis viverra. Nam pharetra vitae arcu quis rhoncus. Nunc aliquam nisl et dictum lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus ex erat, ut tempus augue elementum ac. Sed at velit efficitur, hendrerit lectus at, eleifend lacus. Pellentesque vitae tempor magna, eu tincidunt metus. Curabitur eu nunc laoreet, imperdiet nisl id, tempus nisi.
</section>
  
  
  
  
<section class="column">
<div class="box">
<div class="title-filled"> Title here</div> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum quam urna, quis sollicitudin eros tempus placerat.
</div>
<br>
      
<a class="extra" href=""><img src="https://64.media.tumblr.com/95c805fe5e76b298362d9ad0800a5213/bb21ed1f809c8c30-70/s75x75_c1/abbaf6027d829017e2377a7348db13ec336b16d4.webp" alt="x">  something</a>
<a class="extra" href=""><img src="https://64.media.tumblr.com/95c805fe5e76b298362d9ad0800a5213/bb21ed1f809c8c30-70/s75x75_c1/abbaf6027d829017e2377a7348db13ec336b16d4.webp" alt="x">  something</a>
<br>
      
<div class="title"><img src="https://64.media.tumblr.com/48d75db84391a9e27bf2bd9761d8809f/02a5b77b04f46187-43/s75x75_c1/3b44e91724236eeea8d845b28cccf9614ee8c7f6.gifv" alt="x">  Title here</div> 
Nullam a magna aliquam arcu dictum molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris cursus nunc massa, tempor hendrerit est bibendum eu. Vivamus vestibulum fringilla lorem quis viverra. Nam pharetra vitae arcu quis rhoncus. Nunc aliquam nisl et dictum lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br><br> 
  
<div class="title">Title here</div> 
Aliquam maximus ex erat, ut tempus augue elementum ac. Sed at velit efficitur, hendrerit lectus at, eleifend lacus. Pellentesque vitae tempor magna, eu tincidunt metus. Curabitur eu nunc laoreet, imperdiet nisl id, tempus nisi.
<br><br>
  
<div class="box">
<div class="title-filled">Title here</div> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum quam urna, quis sollicitudin eros tempus placerat.
</div>
  
</section>
  
  
    
</main>

<footer class="footer">
Layout <a href="https://itinerae.blogspot.com" target="_blank">Itinerae.</a> Header img <a href="https://www.tumblr.com/engrampixel/" target="_blank">x.</a>  Bg <a href="https://www.glitter-graphics.com/backgrounds/misc/1EPf-snow" target="_blank">x.</a> Lace border <a href="https://scripted.neocities.org" target="_blank">x.</a> Pixels <a href="https://webdec.neocities.org/favicons/" target="_blank">x.</a> This layout is responsive.
</footer>

</div>

</body>
</html>

Title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum quam urna, quis sollicitudin eros tempus placerat.

Title here

Vivamus vestibulum fringilla lorem quis viverra. Nam pharetra vitae arcu quis rhoncus. Nunc aliquam nisl et dictum lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus ex erat, ut tempus augue elementum ac. Sed at velit efficitur, hendrerit lectus at, eleifend lacus. Pellentesque vitae tempor magna, eu tincidunt metus.

Title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum quam urna, quis sollicitudin eros tempus placerat.

something

Title here

Nullam a magna aliquam arcu dictum molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris cursus nunc massa, tempor hendrerit est bibendum eu. Vivamus vestibulum fringilla lorem quis viverra. Nam pharetra vitae arcu quis rhoncus. Nunc aliquam nisl et dictum lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title here

Aliquam maximus ex erat, ut tempus augue elementum ac. Sed at velit efficitur, hendrerit lectus at, eleifend lacus. Pellentesque vitae tempor magna, eu tincidunt metus. Curabitur eu nunc laoreet, imperdiet nisl id, tempus nisi.

Title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum quam urna, quis sollicitudin eros tempus placerat.