/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
<!DOCTYPE html>
<html lang="en">
<head>
<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&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap" rel="stylesheet">
<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">
  


<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"> 


  
<style>
  

body{
background: #f0f0f0 url(https://64.media.tumblr.com/15c18eb6be02e6b62601f109f677b598/47d032ea233c8d6b-19/s100x200/fd65edf5a03d67e051bbad76621fc4c24ae8dfd8.gifv) fixed;
letter-spacing:1px;
font-family:calibri, arial;
font-size:10px;
line-height:11px;
color:#A38985;
letter-spacing:1px;}

a:link, a:visited, a:active { 
color:#9D7956;text-decoration:none;}
a:hover {color:#555;}

b {color:#E4AFA7;}
  
img {border:0;}

::-webkit-scrollbar-thumb {
background-color: #fff;  
border-radius: 0px;
border:1px solid #9D7956;}
  
::-webkit-scrollbar {
width: 5px; height: 0px; 
background: transparent;}
  
  
  
#layout {
margin: 20px auto;
width: 540px;}
  
      
#header1 {
float: left;
margin: 0 auto;}

#header2 {
width: 540px;
height: 60px;
line-height:60px;
background:;}
  

.sitename a {color:#E02650;text-transform:uppercase;letter-spacing:5px;
height:26px;line-height:26px;font:26px 'doto';border-bottom:2px dotted #ddd;padding-bottom:4px;}
.sitename a:hover {color:#A38985;}

#navigation {
width:540px;
text-align:center;
float: left;
margin: 0 auto;}

.navi a { 
display:inline-block;
background: #E4D1CE; 
font:normal 9px 'silkscreen',arial;
line-height:9px;
text-transform:uppercase;
padding-top:1px; 
padding-left:5px;
padding-right:5px;
padding-bottom:2px;
margin-bottom:4px;
letter-spacing:1px;
color:#fff;
border-radius:10px;
border:1px solid #E4AFA7;}
      
.navi a:hover {
color:#A38985;}
      

#content1 {
width: 360px;
float: left;
margin: 0 auto;}

#content2 {
padding:6px;}

  
#left1 {
width:180px;
float: left;
margin: 0 auto;}

#left2 {
padding:6px;
background:transparent;}
  

.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;
color:#fff;
text-align:center;
font:normal 13px 'pixelify sans',arial;
width:146px;
background:#E4D1CE;
padding-left:5px;
letter-spacing:3px;
margin-bottom:1px;}
  
.extralinks a:hover {color:#A38985;}

textarea {font:10px calibri,arial;letter-spacing:1px;color:#444;}
  
</style>
</head>
  
  
<body>
  
  

<div id="layout">
    
  
    
<div id="header1">
<div id="header2">
  

  
<div class="sitename">
<center> <a href="">yourwebsite.org</a> 
  </center>
</div>

  
  

  
  
</div>
</div>
  
   
      
<div id="navigation">
<div class="navi">
<a href="">001</a> <a href="">002</a> <a href="">003</a> <a href="">004</a> <a href="">005</a> <a href="">006</a> <a href="">007</a> 
</div>
</div>
      
  
  
  
      
<div id="left1">
<div id="left2">
  
  
        
<div class="box">
<img src="https://64.media.tumblr.com/216e8ba9f2e8e3b4f07f983297dd76d4/e1c2f4a7d1904056-f7/s400x600/1b8e1cb33a904b1d9c59731d0895928dfb48c9c1.pnj" width="150">
</div>
      
  
<div class="box">
<div class="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>
   

<div class="box">
<div class="title"> Title </div>  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. <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. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
</div>
  

                
</div>
</div>
      
  

   
  
      
<div id="content1">
<div id="content2">
  
<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. <br><br>
  
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>  
Phasellus a placerat mi. Nunc id lacinia sapien, et varius orci. Donec dictum suscipit magna ut suscipit. Quisque ullamcorper quam leo, sed facilisis massa facilisis nec. Nullam accumsan, ipsum ut lobortis condimentum, quam justo dapibus nisi, ac ultricies nulla lectus ac purus. Nam ut augue vitae arcu hendrerit gravida. Mauris pulvinar lorem vel quam interdum pretium. Cras sed viverra velit, non ornare nulla. Ut a eros pharetra, tincidunt nisi vel, facilisis ex. Nulla ut euismod erat, maximus euismod dui.<br><br>
  
  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.
</div>       
          
<div class="scrollbox">
<div class="title"> Box with scrollbar</div>  
Phasellus a placerat mi. Nunc id lacinia sapien, et varius orci. Donec dictum suscipit magna ut suscipit. Quisque ullamcorper quam leo, sed facilisis massa facilisis nec. Nullam accumsan, ipsum ut lobortis condimentum, quam justo dapibus nisi, ac ultricies nulla lectus ac purus. Nam ut augue vitae arcu hendrerit gravida. Mauris pulvinar lorem vel quam interdum pretium. Cras sed viverra velit, non ornare nulla. Ut a eros pharetra, tincidunt nisi vel, facilisis ex. Nulla ut euismod erat, maximus euismod dui.
</div>   
  
  
</div> 
<!--PLEASE DO NOT REMOVE THIS !! -->
<center> <b>Layout made by </b> <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> </center>
</div>
      
      
  
  

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

