itinerae : roses are red

the code

<!DOCTYPE html>
<html lang="en">
<head>
  <title>itinerae : roses are red</title>
  <link rel="shortcut icon" 
href="https://itinerae.neocities.org/img/favi.gif">

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

* {
      box-sizing: border-box;
    }

body {
      margin: 0;
      padding: 20px;
      background: #000;
      font-family: "ronda", calibri, verdana, arial;
      font-size: 9px;
      text-align: justify;
      color: #8d2524;
      letter-spacing: 1px;
      line-height: 13px;
    }
    
    textarea {background:#000;border:1px solid #8d2524;}

a {
  color: #d66b6a;
  text-decoration: none;
  transition: 0.2s ease;
}

a:hover {
  color: #ff9d9c;
  text-shadow: 0 0 4px #ff7472;
}

a:active {
  color: #b04544;
}

b {font-weight: bold;}
    
    
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #1a0000;
}

::-webkit-scrollbar-thumb {
  background: #5c0f0e;
  border-radius: 5px;
  border: 2px solid #1a0000;
}

::-webkit-scrollbar-thumb:hover {
  background: #7f1a19;
}

.layout {
      max-width: 600px;
      margin: 40px auto;
      border-radius: 10px;
      overflow: hidden;
    }
    
    
    .main {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
      background: #2b0201;
    }

.column {
      padding: 8px;
      background: #2b0201;
    }

.title {
      text-transform: lowercase;
      font-family: "ronda", arial;
      font-size: 10px;
      color: #e8807e;
      line-height: 12px;
      margin-bottom: 4px;
      letter-spacing: 2px;
    }

.lace {
      height: 36px;
      background: url(https://itinerae.neocities.org/img/lace2.png) 
repeat-x #000;
      color: #bcaccc;
      border-top-right-radius: 30px;
      border-top-left-radius: 30px;
    }

.banner {
      width: 100%;
      height: 130px;
      background: #190000 url(YOUR-BANNER-URL-HERE) center/cover 
no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
    }

.banner-inner {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

.site-name {
      font-family: "ronda", pixel, sans-serif;
      font-size: 24px;
      color: #e8807e;
      letter-spacing: 2px;
      text-shadow: 0 0 4px #000;
    }

.slogan {
      margin-top: 15px;
      font-family: "ronda", sans-serif;
      font-style: italic;
      font-size: 9px;
      color: #e8807e;
      letter-spacing: 1px;
      text-shadow: 0 0 3px #000;
      opacity: 0.85;
    }

.navigation {
      background: #2b0201;
      border-top: 1px solid #111;
      border-bottom: 1px solid #111;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 8px;
    }

.navi-link {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

.navi-link a {
      font: italic 11px georgia, monospace;
      text-transform: lowercase;
      line-height: 30px;
      padding-right: 15px;
      letter-spacing: 2px;
      color: #ae4442;
      white-space: nowrap;
    }

.navi-link a:hover {
      color: #ccc;
    }

.footer {
      height: 36px;
      background: url(https://itinerae.neocities.org/img/lace1.png) 
repeat-x #000;
      color: #555;
      border-top: 1px solid #111;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      line-height: 20px;
    }

.credits {
      text-align: center;
      font-family: ronda, sans-serif;
      font-size: 9px;
      color: #e8807e;
      margin: 10px 0 20px;
      opacity: 0.8;
      letter-spacing: 1px;
    }

@media (max-width: 768px) {
      .layout {
        margin: 20px auto;
      }

.main {
        grid-template-columns: 1fr;
      }

.navi-link a {
        margin-right: 10px;
        line-height: 24px;
      }
    }
  </style>
  
  
</head>

<div class="banner">
        <div class="banner-inner">
            <div class="site-name">
                <img 
src="https://itinerae.neocities.org/img/flower.gif" alt="x"> roses 
are red
                <img 
src="https://itinerae.neocities.org/img/flower.gif" alt="x">
            </div>
            <div class="slogan">and your slogan goes 
here.</div>
        </div>
    </div>

<main class="main">
        <aside class="column">
            <div class="title">title left</div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Morbi tristique tellus arcu, nec pulvinar dolor pretium in. Nulla ac 
volutpat tortor. Mauris elementum augue vel massa sagittis aliquam.
            <br>
            <br>

<div class="title">title here</div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Morbi tristique tellus arcu, nec pulvinar dolor pretium in. Integer nec 
rhoncus risus.
            <br>
            <br>

<div class="title">title here</div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Morbi tristique tellus arcu, nec pulvinar dolor pretium in. Nulla ac 
volutpat tortor. Mauris elementum augue vel massa sagittis aliquam.
            
        </aside>

<div class="column">
            <div class="title">title center</div>
            <b>Bold text</b> <i>Italic text</i> 
<a href="">Link</a> Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Morbi tristique tellus arcu, nec pulvinar dolor pretium
 in. Nullam eget sapien sodales, tempor nisi eu, bibendum dolor. 
Vestibulum ultrices auctor mollis.
            <br>
            <br>

<div class="title">title</div>
            Curabitur convallis rhoncus orci, et luctus erat aliquam et.
 Nulla ac volutpat tortor. Mauris elementum augue vel massa sagittis 
aliquam. Sed ornare odio nec purus vulputate.
            <br>
            <br>

<div class="title">title</div>
            Mauris purus sem, ornare eu dolor et, pretium placerat 
lacus. Cras felis turpis, congue eget condimentum at, hendrerit at 
lorem. Suspendisse laoreet id justo eget rutrum. Curabitur sollicitudin 
ante leo.
          <br>
          <br>
          
          <div class="title">title</div>
            <b>Bold text</b> <i>Italic text</i> 
<a href="">Link</a> Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Morbi tristique tellus arcu, nec pulvinar dolor pretium
 in. Nullam eget sapien sodales, tempor nisi eu, bibendum dolor. 
Vestibulum ultrices auctor mollis.
            <br>
            <br>

<aside class="column">
            <div class="title">title right</div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Morbi tristique tellus arcu, nec pulvinar dolor pretium in. Nulla ac 
volutpat tortor.
            <br>
            <br>

<div class="title">title here</div>
            Lorem ipsum dolor sit amet.
            <br>
            <br>

<div class="title">title here</div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nulla ac volutpat tortor.
            <br>
            <br>

<div class="title">title here</div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            <br>
            <br>
             <div class="title">title</div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Morbi tristique tellus arcu, nec pulvinar dolor pretium in. Nulla ac 
volutpat tortor.
            
        </aside>
      
      
    </main>

</div>

<div class="credits">
    layout made by <a href="https://itinerae.org" 
target="_blank">itinerae</a> · pixels by <a 
href="https://foollovers.com" target="_blank">foollovers</a>
</div>

</body>
</html>

title

Curabitur convallis rhoncus orci, et luctus erat aliquam et. Nulla ac volutpat tortor. Mauris elementum augue vel massa sagittis aliquam. Sed ornare odio nec purus vulputate.

title

Mauris purus sem, ornare eu dolor et, pretium placerat lacus. Cras felis turpis, congue eget condimentum at, hendrerit at lorem. Suspendisse laoreet id justo eget rutrum. Curabitur sollicitudin ante leo.

title

Bold text Italic text Link Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique tellus arcu, nec pulvinar dolor pretium in. Nullam eget sapien sodales, tempor nisi eu, bibendum dolor. Vestibulum ultrices auctor mollis.