itinerae : vintage

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purus est, dapibus a dignissim bibendum, porttitor at eros. Vestibulum id quam a massa rutrum viverra eget quis metus. Sed vitae mi dignissim, commodo felis sit amet, iaculis nulla. Mauris condimentum est eget tellus facilisis accumsan. Cras aliquet orci mi, eget eleifend ante scelerisque eget. In in arcu auctor, vestibulum enim a, porttitor tellus. Proin ut urna et risus accumsan bibendum. In hac habitasse platea dictumst. Quisque egestas quam vel orci gravida consectetur. Vestibulum at dapibus neque. Phasellus congue justo vel fermentum faucibus

The Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>itinerae : vintage</title>
<link rel="shortcut icon" href="https://files.catbox.moe/drouwx.gif">
<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=Pixelify+Sans:wght@400..700&family=Silkscreen:wght@400;700&family=Doto:wght@100..900&family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
<style>
body {
background:#f0f0f0 url(https://64.media.tumblr.com/15c18eb6be02e6b62601f109f677b598/47d032ea233c8d6b-19/s100x200/fd65edf5a03d67e051bbad76621fc4c24ae8dfd8.gifv) fixed;
font-family:calibri, arial;
font-size:10px;
line-height:11px;
letter-spacing:1px;
color:#A38985;
}
a { color:#9D7956; text-decoration:none; }
a:hover { color:#555; }
b { color:#E4AFA7; }
img { border:0; }
.credits {text-align:center;}
::-webkit-scrollbar-thumb {
background-color:#fff;
border-radius:0px;
border:1px solid #9D7956;
}
::-webkit-scrollbar {
width:5px;
height:0px;
background:transparent;
}
#layout {
width:540px;
margin:20px auto;
}
#header {
height:60px;
display:flex;
align-items:center;
justify-content:center;
}
.sitename a {
font:26px 'doto';
text-transform:uppercase;
letter-spacing:5px;
color:#E02650;
border-bottom:2px dotted #ddd;
padding-bottom:4px;
}
.sitename a:hover { color:#A38985; }
#navigation {
text-align:center;
margin-bottom:8px;
}
.navi a {
display:inline-block;
background:#E4D1CE;
font:9px 'silkscreen', arial;
text-transform:uppercase;
padding:1px 5px 2px;
margin-bottom:4px;
letter-spacing:1px;
color:#fff;
border-radius:10px;
border:1px solid #E4AFA7;
}
.navi a:hover { color:#A38985; }
#main {
display:flex;
gap:0;
}
#left {
width:180px;
padding:6px;
}
#content {
width:360px;
padding:6px;
}
.box {
border-width:8px;
border-style:solid;
border-image:url("https://64.media.tumblr.com/7aec0ae36d68b36def9be87357aea92a/b2756e0706eb2c30-11/s75x75_c1/f85ea5e4367db423531b3f112f4454750ea9a53e.pnj") 8 fill round;
margin-bottom:8px;
}
.scrollbox {
height:100px;
overflow:auto;
overflow-x:hidden;
border-width:8px;
border-style:solid;
border-image:url("https://64.media.tumblr.com/7aec0ae36d68b36def9be87357aea92a/b2756e0706eb2c30-11/s75x75_c1/f85ea5e4367db423531b3f112f4454750ea9a53e.pnj") 8 fill round;
margin-bottom:8px;
}
.title {
font:bold 10px calibri;
color:#E4AFA7;
text-transform:uppercase;
letter-spacing:5px;
border-bottom:1px dashed #E4D1CE;
margin-bottom:4px;
}
.extralinks a {
display:inline-block;
width:100%;
background:#E4D1CE;
font:13px 'pixelify sans', arial;
letter-spacing:3px;
color:#fff;
text-align:center;
margin-bottom:1px;
}
.extralinks a:hover { color:#A38985; }
textarea {
font:10px calibri, arial;
letter-spacing:1px;
color:#444;
}
@media (max-width:600px) {
body {
font-size:11px;
line-height:13px;
}
#layout {
width:100%;
margin:10px auto;
}
#header {
height:auto;
padding:10px 0;
}
.sitename a {
font-size:20px;
letter-spacing:3px;
}
#main {
flex-direction:column;
}
#left,
#content {
width:100%;
padding:6px;
}
img {
max-width:100%;
height:auto;
display:block;
margin:0 auto;
}
.scrollbox {
height:auto;
max-height:200px;
}
}
</style>
</head>
<body>
<div id="layout">
    
    
<div id="header">
<div class="sitename">
<a href="">yourwebsite.org</a>
</div>
</div>

<div id="main">
    
    
<div id="left">
<div class="box">
<img src="https://64.media.tumblr.com/216e8ba9f2e8e3b4f07f983297dd76d4/e1c2f4a7d1904056-f7/s400x600/1b8e1cb33a904b1d9c59731d0895928dfb48c9c1.pnj" width="150">
</div>
<div class="box extralinks">
<a href="">link here</a><br>
<a href="">link here</a><br>
<a href="">link here</a><br>
<a href="">link here</a>
</div>
<div class="box">
<div class="title">Title</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purus est, dapibus a dignissim bibendum, porttitor at eros. Vestibulum id quam a massa rutrum viverra eget quis metus.  Quisque egestas quam vel orci gravida consectetur. <b>Bold text</b> <i>Italic text</i> <a href="">Link</a>
</div>
<div class="box">
<div class="title">Title</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purus est, dapibus a dignissim bibendum, porttitor at eros. Vestibulum id quam a massa rutrum viverra eget quis metus.  Quisque egestas quam vel orci gravida consectetur. <b>Bold text</b> <i>Italic text</i> <a href="">Link</a>
</div>

</div>

<div id="content">
<div class="box">
<div class="title">Title</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purus est, dapibus a dignissim bibendum, porttitor at eros. Vestibulum id quam a massa rutrum viverra eget quis metus. Sed vitae mi dignissim, commodo felis sit amet, iaculis nulla. Mauris condimentum est eget tellus facilisis accumsan. Cras aliquet orci mi, eget eleifend ante scelerisque eget. In in arcu auctor, vestibulum enim a, porttitor tellus. Proin ut urna et risus accumsan bibendum. In hac habitasse platea dictumst. Quisque egestas quam vel orci gravida consectetur. Vestibulum at dapibus neque. Phasellus congue justo vel fermentum faucibus
</div>
<div class="box">
<div class="title">Title</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purus est, dapibus a dignissim bibendum, porttitor at eros. Vestibulum id quam a massa rutrum viverra eget quis metus. Sed vitae mi dignissim, commodo felis sit amet, iaculis nulla. Mauris condimentum est eget tellus facilisis accumsan. Cras aliquet orci mi, eget eleifend ante scelerisque eget. In in arcu auctor, vestibulum enim a, porttitor tellus. Proin ut urna et risus accumsan bibendum. In hac habitasse platea dictumst. Quisque egestas quam vel orci gravida consectetur. Vestibulum at dapibus neque. Phasellus congue justo vel fermentum faucibus
</div>
<div class="box">
<div class="title">Title</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purus est, dapibus a dignissim bibendum, porttitor at eros. Vestibulum id quam a massa rutrum viverra eget quis metus. Sed vitae mi dignissim, commodo felis sit amet, iaculis nulla. Mauris condimentum est eget tellus facilisis accumsan. Cras aliquet orci mi, eget eleifend ante scelerisque eget. In in arcu auctor, vestibulum enim a, porttitor tellus. Proin ut urna et risus accumsan bibendum. In hac habitasse platea dictumst. Quisque egestas quam vel orci gravida consectetur. Vestibulum at dapibus neque. Phasellus congue justo vel fermentum faucibus
</div>
<div class="scrollbox">
<div class="title">Box with scrollbar</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purus est, dapibus a dignissim bibendum, porttitor at eros. Vestibulum id quam a massa rutrum viverra eget quis metus. Sed vitae mi dignissim, commodo felis sit amet, iaculis nulla. Mauris condimentum est eget tellus facilisis accumsan. Cras aliquet orci mi, eget eleifend ante scelerisque eget. In in arcu auctor, vestibulum enim a, porttitor tellus. Proin ut urna et risus accumsan bibendum. In hac habitasse platea dictumst. Quisque egestas quam vel orci gravida consectetur. Vestibulum at dapibus neque. Phasellus congue justo vel fermentum faucibus
</div>

<div class="credits"><br><b>Layout</b> made by <a href="http://itinerae.blogspot.com" target="_blank">Itinerae.</a> <br>
<b>Image</b> from <a href="https://www.tumblr.com/ethereabun" target="_blank">here.</a> 
<b>Lace border</b> from <a href="https://floras.neocities.org/" target="_blank">here.</a> 
</div>
</div>

</div>

</div>
</body>
</html>

Title

Box with scrollbar

Layout made by Itinerae.
Image from here. Lace border from here.