itinerae : hello, spring

title here

scrollbox

currently

Date 18.04.2025

Weather Sunny

Watching Something

Eating Something

Drinking Something

Loving Something

Thinking Something

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac tortor fermentum, feugiat arcu vel, commodo dui. Vivamus vel ante tincidunt, convallis eros vel, luctus dolor. Vestibulum eu massa erat. Cras dictum ipsum in faucibus pharetra. Phasellus ipsum enim, placerat eu nibh ut, eleifend vulputate turpis. Etiam eget congue ante, at sollicitudin ex. Aenean sit amet accumsan dui, vitae tempus lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec nec mauris nec mauris imperdiet facilisis. Nullam a ante non eros iaculis pulvinar sit amet at justo. Pellentesque hendrerit porta eros sed finibus. Donec iaculis, mi eget aliquam convallis, velit risus pharetra libero, et dictum tortor justo et tortor.

the code

<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<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=Silkscreen:wght@400;700&family=VT323&display=swap" rel="stylesheet">

<title>itinerae : hello, spring </title>
<link rel="shortcut icon" href="https://64.media.tumblr.com/aa39111921c4274e5644686423823be3/5c238482cce6bcc5-6b/s75x75_c1/f99756ee232aa62693620b194a9e6d5b374f27ef.gifv">

body {
background: #fff url(https://files.catbox.moe/58o5fu.gif);
font-family: 'pixel', arial;
font-size: 12px;
color: #AA9988;
letter-spacing:1px;
line-height:13px;}

a:link, a:active, a:visited {
color: #FFC55A;
text-decoration: none;}

a:hover {
color: #B37F4C;}
  
b {color: #FFC55A;}

::-webkit-scrollbar-thumb {
background-color: #FFC55A;  
border-radius: 0px;}
  
::-webkit-scrollbar {
width: 6px; height: 0px; 
background: transparent;}

#banner {
position:absolute;
top: 36px;
left: 200px;
width: 670px;
height: 77px;
background:#FFFFF5;
padding:13px;
font-family:'doto', monospace, arial;
font-size:40px;
color:#FFC55A;
letter-spacing:3px;
line-height:77px;
text-align:center;
border:1px solid #FFF08F;
border-bottom:0px;}
  
  
#navigation {
position: absolute;
width: 670px;
height: 25px;
top: 140px;
left: 200px;
background: #FFFFF5;
border: 1px solid #FFF08F;
padding-left:13px;
padding-right:13px;
text-align: center;}

#navigation a {
display: inline-block;
text-transform:uppercase;
line-height:23px;
font-family: 'pixel', georgia;
font-size: 11px;
color: #FFC55A;
letter-spacing:3px;
padding-right:15px;
padding-top:2px;}

#navigation a:hover {
color: #B37F4C;}

#content {
position: absolute;
top: 165px;
left: 200px;
width: 670px;
padding: 13px;
background: #FFFFF5;
border: 1px solid #FFF08F;}

#main {
float: right;
width: 72%;
border-left: 1px dashed #FFF08F;
padding-left: 10px;}
  
#sidebar {
float: left;
width: 25%;}

.title {
padding: 1px;
font-family: 'pixel', arial;
font-size: 20px;
color: #FFC55A;
letter-spacing: 2px;
margin-bottom: 5px;}
  
.box {
border:1px solid #FFF08F;
padding:5px;}
  
.scrollbox {
border:1px solid #FFF08F;
padding:5px;
overflow:auto;
overflow-x:hidden;
height:100px;}

</style>

</head>

<body>

<div id="content"> 
  
  
  
<div id="sidebar"> 
  
<div class="box">
<div class="title">
<img src="https://64.media.tumblr.com/84d365d05dffea692a8cddff252d9779/5c238482cce6bcc5-76/s75x75_c1/fbca8574d6a9d31cbd63ebd57ac83ed210acb46c.webp" alt="lollipop"> title here</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac tortor fermentum, feugiat arcu vel, commodo dui. Vivamus vel ante tincidunt, convallis eros vel, luctus dolor. Vestibulum eu massa erat. Cras dictum ipsum in faucibus pharetra. 
</div>
<br>
  
<div class="scrollbox">
<div class="title">
<img src="https://64.media.tumblr.com/84d365d05dffea692a8cddff252d9779/5c238482cce6bcc5-76/s75x75_c1/fbca8574d6a9d31cbd63ebd57ac83ed210acb46c.webp" alt="lollipop"> scrollbox</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac tortor fermentum, feugiat arcu vel, commodo dui. Vivamus vel ante tincidunt, convallis eros vel, luctus dolor. Vestibulum eu massa erat. Cras dictum ipsum in faucibus pharetra. 
</div>
<br>
  
<div class="box">
<div class="title"> 
<img src="https://64.media.tumblr.com/84d365d05dffea692a8cddff252d9779/5c238482cce6bcc5-76/s75x75_c1/fbca8574d6a9d31cbd63ebd57ac83ed210acb46c.webp" alt="lollipop"> currently</div>
<img src="https://64.media.tumblr.com/35370079ffe4723ff8d9fed93a6f9b95/caea5dc10e55080a-0d/s75x75_c1/01ddfbc67eb40d530246592562ebabb5e3a99d10.gifv" alt="x"> <b>Date</b> 18.04.2025<br>
<img src="https://64.media.tumblr.com/caa5c099c675bec6f2e1f04330c3e4af/caea5dc10e55080a-96/s75x75_c1/912157b39cad015bb745abb7b0d7cdc8ffd2a4a6.gifv" alt="x"> <b>Weather</b> Sunny<br>
<img src="https://64.media.tumblr.com/1434dd3f58c7b3f537aafbe960fbc864/caea5dc10e55080a-ce/s75x75_c1/918258af078bebb52bca06d25b7ebe82527b07cc.gifv" alt="x"> <b>Watching</b> Something<br>
<img src="https://64.media.tumblr.com/e010b42387ab2d69fa5ebf51fb999ee0/caea5dc10e55080a-16/s75x75_c1/9c726967ac5e04fe4c253286ac03d7862085310c.gifv" alt="x"> <b>Eating</b> Something<br>
<img src="https://64.media.tumblr.com/2c10866974f8ba520a9d5e04cf0a8457/caea5dc10e55080a-0e/s75x75_c1/a61dac26c80e5bc221fd16ea8d6debbad634b68e.gifv" alt="x"> <b>Drinking</b> Something<br>
<img src="https://64.media.tumblr.com/06d0bac6d5252613cecdabc1ef1028dd/caea5dc10e55080a-2a/s75x75_c1/305849068b472ff1f81d32699ad58f926f2320c7.gifv" alt="x"> <b>Loving</b> Something <br>
<img src="https://64.media.tumblr.com/a5efc71f96f38a47821b6161743c9e9d/caea5dc10e55080a-69/s75x75_c1/e5378dac17dd7781c44d648f8edf267c347e394b.gifv" alt="x"> <b>Thinking</b> Something
</div>
<br>

<div class="box">
<div class="title"> 
<img src="https://64.media.tumblr.com/84d365d05dffea692a8cddff252d9779/5c238482cce6bcc5-76/s75x75_c1/fbca8574d6a9d31cbd63ebd57ac83ed210acb46c.webp" alt="lollipop"> title here</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac tortor fermentum, feugiat arcu vel, commodo dui. Vivamus vel ante tincidunt, convallis eros vel, luctus dolor. Vestibulum eu massa erat. Cras dictum ipsum in faucibus pharetra. 
</div>
<br>

<div id="main"> 
  
<div class="box">
<div class="title"> 
<img src="https://64.media.tumblr.com/84d365d05dffea692a8cddff252d9779/5c238482cce6bcc5-76/s75x75_c1/fbca8574d6a9d31cbd63ebd57ac83ed210acb46c.webp" alt="lollipop"> title here</div>
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac tortor fermentum, feugiat arcu vel, commodo dui. Vivamus vel ante tincidunt, convallis eros vel, luctus dolor. Vestibulum eu massa erat. Cras dictum ipsum in faucibus pharetra. Phasellus ipsum enim, placerat eu nibh ut, eleifend vulputate turpis. Etiam eget congue ante, at sollicitudin ex. Aenean sit amet accumsan dui, vitae tempus lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec nec mauris nec mauris imperdiet facilisis. Nullam a ante non eros iaculis pulvinar sit amet at justo. Pellentesque hendrerit porta eros sed finibus. Donec iaculis, mi eget aliquam convallis, velit risus pharetra libero, et dictum tortor justo et tortor.
  
</div>
<br>
    
<div class="box">
<div class="title"> 
<img src="https://64.media.tumblr.com/84d365d05dffea692a8cddff252d9779/5c238482cce6bcc5-76/s75x75_c1/fbca8574d6a9d31cbd63ebd57ac83ed210acb46c.webp" alt="lollipop"> title here</div>
  
Sed cursus augue in purus fringilla vulputate. Curabitur porttitor tristique placerat. Fusce pharetra eu tellus vitae porttitor. Cras vitae sapien bibendum, mollis ex eu, aliquam metus. Nam sit amet massa quam. Aliquam leo leo, pharetra non tincidunt vitae, elementum vel libero. Sed pretium feugiat eros, ut pulvinar ipsum. Proin a tellus tortor. Quisque in enim in diam lobortis egestas. Maecenas vitae lacus accumsan, semper lectus at, mattis nulla. Nulla urna turpis, vehicula in convallis id, suscipit sit amet elit. Proin a hendrerit nibh. Etiam et urna eget sapien iaculis varius ut vitae sem.
</div>
<br>
    
<div class="box">
<div class="title"> 
<img src="https://64.media.tumblr.com/84d365d05dffea692a8cddff252d9779/5c238482cce6bcc5-76/s75x75_c1/fbca8574d6a9d31cbd63ebd57ac83ed210acb46c.webp" alt="lollipop"> title here</div>
    
Donec mattis nulla id bibendum dapibus. Nam ornare vestibulum quam, vitae ultrices ex euismod mattis. Donec tincidunt mattis nunc, a scelerisque felis eleifend id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus eget ligula dolor. Quisque ut justo non est maximus mollis. Cras sed tempor ex. Donec lacinia cursus justo eu tristique. In imperdiet venenatis est, vestibulum dapibus enim pulvinar ac. Sed ac cursus velit, ullamcorper convallis lectus. Morbi sit amet congue ante. Sed vulputate justo eu ultrices porta. Suspendisse leo tellus, iaculis vel iaculis eget, semper ac urna. Mauris bibendum pharetra erat, ut elementum est suscipit vitae.
</div>
<br>
    
<div class="box">
<div class="title"> 
<img src="https://64.media.tumblr.com/84d365d05dffea692a8cddff252d9779/5c238482cce6bcc5-76/s75x75_c1/fbca8574d6a9d31cbd63ebd57ac83ed210acb46c.webp" alt="lollipop"> title here</div>
Nunc id quam erat. Nullam vitae volutpat velit, sed faucibus urna. Aenean sed mi sed ex euismod mollis. Nulla a blandit nunc. Pellentesque gravida, tellus eu dapibus fermentum, felis orci condimentum leo, sed vulputate elit ex sed odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam sit amet augue maximus turpis fermentum consectetur. In mollis orci in dictum imperdiet. Etiam ex sem, sagittis id sem sit amet, luctus hendrerit velit.
</div>
<br>
  
<div class="box">
<div class="title"> 
<img src="https://64.media.tumblr.com/84d365d05dffea692a8cddff252d9779/5c238482cce6bcc5-76/s75x75_c1/fbca8574d6a9d31cbd63ebd57ac83ed210acb46c.webp" alt="lollipop"> title here</div>
Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam et semper leo. Aenean odio metus, imperdiet quis lacinia fringilla, dapibus et erat. Sed imperdiet elit nec commodo ullamcorper. Cras venenatis erat ac bibendum suscipit. Etiam non maximus felis. Vestibulum accumsan nisi ac neque lacinia pretium non in libero.<br><br>
Quisque ut justo non est maximus mollis. Cras sed tempor ex. Donec lacinia cursus justo eu tristique. In imperdiet venenatis est, vestibulum dapibus enim pulvinar ac. Sed ac cursus velit, ullamcorper convallis lectus. 
</div>
<br>
  
<div class="box">
Layout: <a href="http://itinerae.neocities.org" target="_blank">Itinerae</a> Background: <a href="https://foollovers.com/" target="_blank">Fool Lovers</a> Pixels: <a href="https://lostsozai.tumblr.com" target="_blank">Lost sozai</a>
</div>
  
</div>

</div>

</body>
</html>

title here

Donec mattis nulla id bibendum dapibus. Nam ornare vestibulum quam, vitae ultrices ex euismod mattis. Donec tincidunt mattis nunc, a scelerisque felis eleifend id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus eget ligula dolor. Quisque ut justo non est maximus mollis. Cras sed tempor ex. Donec lacinia cursus justo eu tristique. In imperdiet venenatis est, vestibulum dapibus enim pulvinar ac. Sed ac cursus velit, ullamcorper convallis lectus. Morbi sit amet congue ante. Sed vulputate justo eu ultrices porta. Suspendisse leo tellus, iaculis vel iaculis eget, semper ac urna. Mauris bibendum pharetra erat, ut elementum est suscipit vitae.

title here

Nunc id quam erat. Nullam vitae volutpat velit, sed faucibus urna. Aenean sed mi sed ex euismod mollis. Nulla a blandit nunc. Pellentesque gravida, tellus eu dapibus fermentum, felis orci condimentum leo, sed vulputate elit ex sed odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam sit amet augue maximus turpis fermentum consectetur. In mollis orci in dictum imperdiet. Etiam ex sem, sagittis id sem sit amet, luctus hendrerit velit.

title here

Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam et semper leo. Aenean odio metus, imperdiet quis lacinia fringilla, dapibus et erat. Sed imperdiet elit nec commodo ullamcorper. Cras venenatis erat ac bibendum suscipit. Etiam non maximus felis. Vestibulum accumsan nisi ac neque lacinia pretium non in libero.

Quisque ut justo non est maximus mollis. Cras sed tempor ex. Donec lacinia cursus justo eu tristique. In imperdiet venenatis est, vestibulum dapibus enim pulvinar ac. Sed ac cursus velit, ullamcorper convallis lectus.

Layout: Itinerae Background: Fool Lovers Pixels: Lost sozai