itinerae : pixel bakery

title here

Bold text Italic text Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae lacus vitae lorem scelerisque lacinia eu eget dolor. Ut nec ligula ipsum.

title here

Ut pellentesque facilisis nulla, sit amet suscipit ex mattis non. Vivamus suscipit laoreet volutpat. In hac habitasse platea dictumst. Aenean lacus tellus, sodales et tincidunt eu, vestibulum at lorem. Aenean laoreet eros mi, eget pharetra mauris ultricies ac. Vestibulum ut ante quis purus ultrices ullamcorper sit amet non arcu. Curabitur quam mauris, sollicitudin vitae ipsum id, molestie interdum purus. Etiam mollis metus vitae enim congue, nec imperdiet nibh semper.

credits

Layout made by Itinerae. Pixels founded from here and here. Backgrounds from here. Header border made with this cool tool.

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae lacus vitae lorem scelerisque lacinia eu eget dolor. Ut nec ligula ipsum. Ut pellentesque facilisis nulla, sit amet suscipit ex mattis non. Vivamus suscipit laoreet volutpat. In hac habitasse platea dictumst. Aenean lacus tellus, sodales et tincidunt eu, vestibulum at lorem. Aenean laoreet eros mi, eget pharetra mauris ultricies ac. Vestibulum ut ante quis purus ultrices ullamcorper sit amet non arcu. Curabitur quam mauris, sollicitudin vitae ipsum id, molestie interdum purus. Etiam mollis metus vitae enim congue, nec imperdiet nibh semper.

the code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>itinerae : pixel bakery</title>
<link rel="shortcut icon" href="https://64.media.tumblr.com/f615cbcf0642b6974365e758a0ec5227/fcc1c55696d11870-ae/s75x75_c1/4a2da68c43dfebf8a64956df644d4eb4f4711588.gifv"> 
<link href="https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Megrim%7CLato" rel="stylesheet" type="text/css">

@font-face { font-family: pixel; src: url(https://dl.dropbox.com/s/kmhe7d3n18vdz5e/w95fa.woff?dl=0);}

/* Basics */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
font:9px 'lato', calibri, Arial, sans-serif;
letter-spacing:1px;
line-height:11px;
background: #eee url(https://64.media.tumblr.com/e40b19dd4c8dc6b23a23992d6142743a/09f0777b5afb7bd8-39/s75x75_c1/f7e14dc2a28f4f1df75977bc276150d9f3af9b87.gifv);
color: #9C5A3C;}
 
  
/* Scrollbar */

::-webkit-scrollbar-thumb {
background-color: #FFFDE5;  
border:1px dotted #F17E72;
border-radius: 8px;}
::-webkit-scrollbar {
width: 5px; height: 0px; 
background: transparent;}
  
  
/* Links etc. */

a:link, a:visited, a:active { 
color:#FF7E00;text-decoration:none;}
a:hover {color:#9C5A3C;}  
  
b {color:#FF7E00;letter-spacing:2px;}
i {font-weight:bold;}
  
  
/* Title */

.title {font:12px silkscreen;color:#E5AA7A;text-transform:uppercase;margin-bottom:3px; border-bottom:1px dashed #E5AA7A;}

/* Do not delete */
.block::after {
content: "";
display: block;
clear: both;}
  
  
/* Centered container. I wouldn't recommend changing the width, this layout breaks super easily */
.container {
max-width: 702px;
width: 100%;
margin: 0 auto;
border:1px solid #E5AA7A;
background:#FEFCEC;
border-radius:8px;}

/* Navigation */
.navigation {
border-top-left-radius:8px;border-top-right-radius:8px;
background: linear-gradient(90deg, #FFF9BD, #fff);
padding: 5px;
box-shadow: 0 2px 8px #fdffc1;
text-align: center;
font:10px 'silkscreen';
line-height:13px;
border-bottom:1px dashed #ffe1c1;}
  
 .navigation a {
display: inline-block; margin-right:20px;   color: #FF7E00; text-decoration: none; font-weight:bold;}
.navigation a:hover {
color: #9C5A3C;}

/* Three boxes. I wouldn't recommend changing the width, this layout breaks super easily. */
.three-boxes {padding:5px;overflow:auto;max-height:80px;}

.box1 {
float: left;
width: 227px; 
margin-right:5px;
padding: 5px;padding-top:0px;
border-radius: 8px;
background: linear-gradient(180deg, #fffdea, #ffe1c1);
box-shadow: 0 2px 8px #FFD9D5;
text-align: left;}
  
.box2 {
float: left;
width: 221px;
margin-right:5px;
padding: 5px;padding-top:0px;
border-radius: 8px;
background: linear-gradient(180deg, #fffdea, #ffe1c1);
text-align: left; 
box-shadow: 0 2px 8px #FFD9D5;}
  
.box3 {
float: left;
width: 227px;
padding: 5px;padding-top:0px;
border-radius: 8px;
background: linear-gradient(180deg, #fffdea, #ffe1c1);
text-align: left; 
box-shadow: 0 2px 8px #FFD9D5;}

/* Header */
.header-section {
height:150px;
margin: 0 5px;
padding: 5px; 
border-radius: 8px;
background:#FEFCEC url(https://64.media.tumblr.com/e2090358d2627adecdfb7023986ac29b/09f0777b5afb7bd8-cb/s75x75_c1/e9ba800caf2a78f8e2b778874c50c07fc2402a4c.gifv);
box-shadow: 0 2px 8px #fdffc1;
border:1px solid #ffe1c1;
border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAaBJREFUeF7t3MFuwkAQRMH4/z/aUXKMDyPk8q4Cj+vKvUy5MQYkjvM8z68eTOAIlFn+BgVqPQPFnlfQ4zgOvcnOvL+XND3fJf/pDXdi/uz99HyB4ldgoIHeu2hML3m+PgXeG2f/0dN8fH0K3E9y7xlM8/H1KfDeOPuPnubj668G7ie69wym+9DJ4+/uL7/Lv9tn/UDvFfJydKDvBornWR43XRP5+hS4XABvOM3H16dAPN/yuGk+vj4FLhfAG07z8fUpEM+3PO7p+V6+D10ugDcMNFAsgOO2NxTP83Fx/YyMT3mggWIBHHdp6PRtDN7/38d93H3o02csUCwcaKBYAMfV0ECxAI6roYFiARxXQwPFAjiuhgaKBXBcDQ0UC+C4GhooFsBxNTRQLIDjamigWADH1dBAsQCOq6GBYgEcV0MDxQI4roYGigVwXA0NFAvguBoaKBbAcTU0UCyA42pooFgAx9XQQLEAjquhgWIBHFdDA8UCOK6GBooFcFwNDRQL4LgaGigWwHE1NFAsgONq6GpQvN/HxfU3Q/iUBxooFsBx306gDzIl3SqLAAAAAElFTkSuQmCC") 28 /  28px / 0 round;
border-width:  28px;
border-style:  solid;
text-align:center;}
  
  
/* Site name */
.sitename {font:35px 'pixel';color:#fffdea;text-align:center;text-shadow:0px 0px 3px #9C5A3C;margin-top:10px;text-decoration:underline;letter-spacing:5px;}
  
  
/* Link buttons */
.buttons a {
font:9px 'silkscreen';
text-shadow:0px 0px 1px #FFD76B;
display:inline-block;
color:#904000;
border-radius:5px;
padding:2px;
padding-left:10px;
padding-right:10px;
margin-right:5px;
background: #F8A31C;
border: 1px solid #904000;
box-shadow:
3px 3px 8px #EFFDE9,
inset 2px 2px 5px rgba(255, 255, 255, 0.9),
inset -2px -2px 5px rgba(255,255,255, 0.15);}
 
.buttons a:hover {transform: translateY(1px);}
 
  
/* Sidebars and main section.*/
.content {padding: 5px;}

.sidebar, .main {
float: left;
padding: 5px;
border-radius: 8px;
background: linear-gradient(180deg, #fffdea, #ffe1c1);
box-shadow: 0 2px 8px #FFD9D5;}
  
/* I wouldn't recommend changing the width, this layout breaks super easily*/
.left  { width: 165px;margin-right:5px;}
.main  { width: 350px;margin-right:5px;}
.right { width: 165px;}

/* Footer */
.footer {
background:#FFF9BD;
text-align: center;
padding: 5px;
border-top:1px dashed #F8A31C;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;}
  
/* Crystal decor, you can delete this if u don't like it */
.bottom-decor {position:fixed;bottom:0px;left:0px;background:url(https://64.media.tumblr.com/72038e0f1b33e8e2ca8afd91d83ff7a8/2f6e19468ae1a774-2f/s400x600/d2a1cf7d2ba7e4adcc2056dc2a92be98caafba36.webp) ;height:72px;width:100%;}
  
  
</style>
</head>
<body>
  
  

<br><br><br><br><br>
  
  

<div class="container">

<div class="navigation">
<a href="#"><img src="https://64.media.tumblr.com/693cceb1583fc2c97bfd2815d134862b/1a5fa5080373adb0-2a/s75x75_c1/71e6fc7e8aff5c0ca87497c35852a8ca950b9ed8.gifv" alt="x"> Link</a>
<a href="#"><img src="https://64.media.tumblr.com/693cceb1583fc2c97bfd2815d134862b/1a5fa5080373adb0-2a/s75x75_c1/71e6fc7e8aff5c0ca87497c35852a8ca950b9ed8.gifv" alt="x"> Link</a>
<a href="#"><img src="https://64.media.tumblr.com/693cceb1583fc2c97bfd2815d134862b/1a5fa5080373adb0-2a/s75x75_c1/71e6fc7e8aff5c0ca87497c35852a8ca950b9ed8.gifv" alt="x"> Link</a>
<a href="#"><img src="https://64.media.tumblr.com/693cceb1583fc2c97bfd2815d134862b/1a5fa5080373adb0-2a/s75x75_c1/71e6fc7e8aff5c0ca87497c35852a8ca950b9ed8.gifv" alt="x"> Link</a>
<a href="#"><img src="https://64.media.tumblr.com/693cceb1583fc2c97bfd2815d134862b/1a5fa5080373adb0-2a/s75x75_c1/71e6fc7e8aff5c0ca87497c35852a8ca950b9ed8.gifv" alt="x"> Link</a>
</div>

<div class="three-boxes block">

<div class="box1">
<div class="title"> 
<img src="https://64.media.tumblr.com/8d150cd592d170e50c6d1ff13d1e66c7/b015ad046cd9bede-79/s75x75_c1/bb9454b6f5a119f7788d1fa5a1644f9d3e3e4620.gifv" alt="x"> cookie jar</div> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae lacus vitae lorem scelerisque lacinia eu eget dolor. Ut nec ligula ipsum. Ut pellentesque facilisis nulla, sit amet suscipit ex mattis non. Vivamus suscipit laoreet volutpat. </div>
  
<div class="box2">
<div class="title">
<img src="https://64.media.tumblr.com/076c5c536d1f71e27c4ae3eece15b36e/fcc1c55696d11870-00/s75x75_c1/ff99f09f007b59bbe000bb16eb397964674e9c5d.gifv" alt="x">  recipes</div> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae lacus vitae lorem scelerisque lacinia eu eget dolor. Ut nec ligula ipsum. Ut pellentesque facilisis nulla, sit amet suscipit ex mattis non. Vivamus suscipit laoreet volutpat. </div>

<div class="box3">
<div class="title">
<img src="https://64.media.tumblr.com/143216bdb2b2b824c149fbd5c61174ca/fcc1c55696d11870-b4/s75x75_c1/d28511dbd4c7a8ab18a110c927d7513bd6a18256.gifv" alt="x"> a scrollbar -></div> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae lacus vitae lorem scelerisque lacinia eu eget dolor. Ut nec ligula ipsum. Ut pellentesque facilisis nulla, sit amet suscipit ex mattis non. Vivamus suscipit laoreet volutpat. </div>

</div>

<div class="header-section">
<div class="sitename"><img src="https://64.media.tumblr.com/9f6008b0d9452375747a4ed08030775d/57b0af411cb10675-cb/s75x75_c1/948e4136843a32f2c6a2959f92311e221eb5fde5.gifv" alt="x"> site name <img src="https://64.media.tumblr.com/9f6008b0d9452375747a4ed08030775d/57b0af411cb10675-cb/s75x75_c1/948e4136843a32f2c6a2959f92311e221eb5fde5.gifv" alt="x"> </div><br>
<div class="buttons">
<a href="">button</a> <a href="">button</a> <a href="">button</a> <a href="">button</a> 
</div>
</div> 
  
  
  
  

<div class="content block">

<div class="sidebar left">
<div class="title">
<img src="https://64.media.tumblr.com/5490f7ae669d3041825e0249d56a7ddf/fcc1c55696d11870-ba/s75x75_c1/3a338a6080b1ac15900393191a66b8c284a235f9.gifv" alt="x"> title here</div>
<b>Bold text</b> <i>Italic text</i> <a href="">Link</a><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae lacus vitae lorem scelerisque lacinia eu eget dolor. Ut nec ligula ipsum. <br><br>
      
<div class="title"><img src="https://64.media.tumblr.com/5490f7ae669d3041825e0249d56a7ddf/fcc1c55696d11870-ba/s75x75_c1/3a338a6080b1ac15900393191a66b8c284a235f9.gifv" alt="x"> title here</div>
Ut pellentesque facilisis nulla, sit amet suscipit ex mattis non. Vivamus suscipit laoreet volutpat. In hac habitasse platea dictumst. Aenean lacus tellus, sodales et tincidunt eu, vestibulum at lorem. Aenean laoreet eros mi, eget pharetra mauris ultricies ac. Vestibulum ut ante quis purus ultrices ullamcorper sit amet non arcu. Curabitur quam mauris, sollicitudin vitae ipsum id, molestie interdum purus. Etiam mollis metus vitae enim congue, nec imperdiet nibh semper.<br><br>

<div class="title"><img src="https://64.media.tumblr.com/5490f7ae669d3041825e0249d56a7ddf/fcc1c55696d11870-ba/s75x75_c1/3a338a6080b1ac15900393191a66b8c284a235f9.gifv" alt="x"> credits</div>
<b>Layout</b> made by <a href="https://itinerae.blogspot.com" target="_blank">Itinerae.</a> 
<b>Pixels</b> founded from <a href="https://pixel-mochi.tumblr.com" target="_blank">here</a> and <a href="https://p-i-x-e-l-s.tumblr.com" target="_blank">here</a>.
<b>Backgrounds</b> from <a href="https://webdec.neocities.org/beegees" target="_blank">here.</a>
<b>Header border</b> made with <a href="https://maxbittker.github.io/broider/" target="_blank">this cool tool.</a>
  
</div> 
    
   
  
  

<div class="main">
<div class="title"><img src="https://64.media.tumblr.com/c1493269d7ee6ab8cc30ec8c3df7fa34/fcc1c55696d11870-6f/s75x75_c1/ae0bafd1cc45e9a90c9f2e3ccee0c69ad21471a7.gifv" alt="x"> title here</div>
<img src="https://64.media.tumblr.com/5e3e6ca2659e0301e977a5fa5c85e3ef/558367ff87949557-29/s75x75_c1/4b644b269d61f8db43f00f81cc29ba42951e0906.gifv" align="left" alt="welcome" style="margin:5px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae lacus vitae lorem scelerisque lacinia eu eget dolor. Ut nec ligula ipsum. Ut pellentesque facilisis nulla, sit amet suscipit ex mattis non. Vivamus suscipit laoreet volutpat. In hac habitasse platea dictumst. Aenean lacus tellus, sodales et tincidunt eu, vestibulum at lorem. Aenean laoreet eros mi, eget pharetra mauris ultricies ac. Vestibulum ut ante quis purus ultrices ullamcorper sit amet non arcu. Curabitur quam mauris, sollicitudin vitae ipsum id, molestie interdum purus. Etiam mollis metus vitae enim congue, nec imperdiet nibh semper. <br><br>
    
<div class="title"><img src="https://64.media.tumblr.com/c1493269d7ee6ab8cc30ec8c3df7fa34/fcc1c55696d11870-6f/s75x75_c1/ae0bafd1cc45e9a90c9f2e3ccee0c69ad21471a7.gifv" alt="x"> title here</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae lacus vitae lorem scelerisque lacinia eu eget dolor. Ut nec ligula ipsum. Ut pellentesque facilisis nulla, sit amet suscipit ex mattis non. Vivamus suscipit laoreet volutpat. In hac habitasse platea dictumst. Aenean lacus tellus, sodales et tincidunt eu, vestibulum at lorem. Aenean laoreet eros mi, eget pharetra mauris ultricies ac.<br><br>
      
<div class="title"><img src="https://64.media.tumblr.com/c1493269d7ee6ab8cc30ec8c3df7fa34/fcc1c55696d11870-6f/s75x75_c1/ae0bafd1cc45e9a90c9f2e3ccee0c69ad21471a7.gifv" alt="x"> title here</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae lacus vitae lorem scelerisque lacinia eu eget dolor. Ut nec ligula ipsum. Ut pellentesque facilisis nulla, sit amet suscipit ex mattis non. Vivamus suscipit laoreet volutpat. In hac habitasse platea dictumst. Aenean lacus tellus, sodales et tincidunt eu, vestibulum at lorem. Aenean laoreet eros mi, eget pharetra mauris ultricies ac. Vestibulum ut ante quis purus ultrices ullamcorper sit amet non arcu. Curabitur quam mauris, sollicitudin vitae ipsum id, molestie interdum purus. Etiam mollis metus vitae enim congue, nec imperdiet nibh semper. Quisque eget justo purus. 
<br><br><br><br><br>

</div>

<div class="sidebar right"><div class="title"><img src="https://64.media.tumblr.com/ef3f59f2936ac90e414101487fbea87c/fcc1c55696d11870-dd/s75x75_c1/e36577b1a104e1c4e8770b3fa3730ee221291129.gifv" alt="x"> title here</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae lacus vitae lorem scelerisque lacinia eu eget dolor. Ut nec ligula ipsum. Ut pellentesque facilisis nulla, sit amet suscipit ex mattis non. Vivamus suscipit laoreet volutpat. In hac habitasse platea dictumst. 
<br><br>
      
<div class="title"><img src="https://64.media.tumblr.com/ef3f59f2936ac90e414101487fbea87c/fcc1c55696d11870-dd/s75x75_c1/e36577b1a104e1c4e8770b3fa3730ee221291129.gifv" alt="x"> title here</div>    
Aenean lacus tellus, sodales et tincidunt eu, vestibulum at lorem. Aenean laoreet eros mi, eget pharetra mauris ultricies ac. Vestibulum ut ante quis purus ultrices ullamcorper sit amet non arcu. Curabitur quam mauris, sollicitudin vitae ipsum id, molestie interdum purus.
<br><br>
    
<div class="title"><img src="https://64.media.tumblr.com/ef3f59f2936ac90e414101487fbea87c/fcc1c55696d11870-dd/s75x75_c1/e36577b1a104e1c4e8770b3fa3730ee221291129.gifv" alt="x"> title here</div>
<b>Bold text</b> <i>Italic text</i> <a href="">Link</a><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae lacus vitae lorem scelerisque lacinia eu eget dolor. Ut nec ligula ipsum. In hac habitasse platea dictumst. Aenean lacus tellus, sodales et tincidunt eu, vestibulum at lorem. Aenean laoreet eros mi, eget pharetra mauris ultricies ac. 
</div>

</div>

<div class="footer">
</div>
  
  
</div>

<div class="bottom-decor">
</div>

</body>
</html>

title here

Aenean lacus tellus, sodales et tincidunt eu, vestibulum at lorem. Aenean laoreet eros mi, eget pharetra mauris ultricies ac. Vestibulum ut ante quis purus ultrices ullamcorper sit amet non arcu. Curabitur quam mauris, sollicitudin vitae ipsum id, molestie interdum purus.

title here

Bold text Italic text Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae lacus vitae lorem scelerisque lacinia eu eget dolor. Ut nec ligula ipsum. In hac habitasse platea dictumst. Aenean lacus tellus, sodales et tincidunt eu, vestibulum at lorem. Aenean laoreet eros mi, eget pharetra mauris ultricies ac.