itinerae : froglet

title center

Bold text Italic text Link Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique tellus arcu, nec pulvinar dolor pretium in.

The code for this layout :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>itinerae : froglet</title>
  <link rel="shortcut icon" href="https://itinerae.neocities.org/pixels/tinyleaf.png">

@font-face {
      font-family: "rainy";
      src: url("https://files.catbox.moe/r4oudq.ttf");
    }

@font-face {
      font-family: "pixel";
      src: url("https://files.catbox.moe/i1y2x0.woff");
    }

/* Basics */

* {
      box-sizing: border-box;
    }

body {
      margin: 0;
      padding: 20px;
      background: url("https://itinerae.neocities.org/bgs/beigefabric.png");
      font-family: "rainy", calibri, verdana, arial;
      font-size: 14px;
      line-height: 16px;
      letter-spacing: 1px;
      text-align: left;
      text-shadow: 0 0 1px #ddd1bc;
      color: #b58f71;
    }

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

a:hover {
      color: #c37a43;
      text-shadow: 0 0 4px #ffe2ee;
    }

a:active {
      color: #a76d3f;
    }

b {
      font-weight: bold;
      color: #c37a43;
    }

i {
      color: #a9b778;
    }

/* Scrollbar */

::-webkit-scrollbar {
      width: 10px;
    }

::-webkit-scrollbar-track {
      background: #fff8ee;
    }

::-webkit-scrollbar-thumb {
      background: #d8e7ad;
      border: 2px solid #fff8ee;
      border-radius: 5px;
    }

::-webkit-scrollbar-thumb:hover {
      background: #e4b989;
    }

/* Container */

.layout {
      max-width: 722px;
      margin: 40px auto;
      overflow: hidden;
      background: #fffdf8;
      border: 1px dotted #d7ab7d;
      border-radius: 10px;
    }

/* Top decoration */

.lace {
      height: 36px;
      background:
        linear-gradient(to bottom, rgba(255,255,255,0.45), rgba(255,226,238,0.18)),
        #fffdf8 url("https://itinerae.neocities.org/bgs/greencheck.jpg") repeat-x;
      border-top-left-radius: 30px;
      border-top-right-radius: 30px;
    }

/* Navi */

.navigation {
      padding: 7px 7px 0;
      background: linear-gradient(to bottom, #fffdf8, #fff3f7);
      border-top: 1px dotted #d7ab7d;
      border-bottom: 1px solid #d7ab7d;
      box-shadow:
        inset 0 1px 0 #ffffff,
        inset 0 -1px 0 rgba(216,231,173,0.45);
    }

.navi-link {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 6px;
    }

.navi-link a {
      flex: 1 1 0;
      position: relative;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      min-width: 0;
      padding: 4px 7px 2px;
      background: linear-gradient(to bottom, #ffffff 0%, #fff7ec 48%, #f9e8d3 100%);
      border: 1px dotted #e8c99f;
      border-bottom: 1px solid #fffdf8;
      border-radius: 9px 9px 0 0;
      box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.95),
        inset -1px 0 0 rgba(255,226,238,0.55),
        1px 0 0 rgba(255,255,255,0.5);
      font-family: "Silkscreen", monospace;
      font-size: 10px;
      font-weight: normal;
      line-height: 14px;
      letter-spacing: 1px;
      text-align: center;
      white-space: nowrap;
      color: #9cae73;
      text-shadow: 0 1px 0 #ffffff;
      transition: 0.22s ease;
    }

.navi-link a::before {
      content: "";
      position: absolute;
      left: 5px;
      right: 5px;
      top: 3px;
      height: 1px;
      background: rgba(255,255,255,0.95);
    }

.navi-link a:hover {
      border-color: #d7ab7d;
      border-bottom-color: #eecaa0;
      transform: translateY(-2px);
      z-index: 3;
    }

.nav-icon {
      margin-right: 4px;
      opacity: 0.55;
      transition: 0.22s ease;
    }

.navi-link a:hover .nav-icon {
      opacity: 1;
      transform: rotate(-8deg);
    }

/* Banner */

.banner {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 150px;
      background: url("https://itinerae.neocities.org/img/greenpond.jpg") center;
      background-size: cover;
      border-bottom: 1px dotted #d8e7ad;
    }

.banner::before {
      content: "";
      position: absolute;
      left: 12px;
      right: 12px;
      top: 12px;
      bottom: 12px;
      border: 1px dotted rgba(212,175,128,0.65);
      border-radius: 18px;
      pointer-events: none;
      box-shadow:
        inset 0 0 15px rgba(255,255,255,0.65),
        inset 0 0 20px rgba(222,240,189,0.25);
    }

.banner::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 100%;
      background: linear-gradient(to top, rgba(255,253,248,0.9), transparent);
      pointer-events: none;
    }
    
    
    /* Site name */

.site-name {
      position: relative;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px 45px 12px;
      font-family: "ronda", pixel, sans-serif;
      font-size: 24px;
      letter-spacing: 3px;
      text-align: center;
      text-transform: lowercase;
      color: #8b9664;
      text-shadow:
        0 1px 0 #ffffff,
        0 0 8px rgba(255,255,255,0.9),
        0 0 12px rgba(255,226,238,0.7);
    }

.site-name::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(
        to right,
        rgba(255,255,255,0),
        rgba(255,255,255,0.65) 18%,
        rgba(255,248,238,0.92) 50%,
        rgba(255,255,255,0.65) 82%,
        rgba(255,255,255,0)
      );
      border-top: 1px solid rgba(255,255,255,0.65);
      border-bottom: 1px solid rgba(222,240,189,0.7);
      filter: blur(0.2px);
    }

.site-sparkle {
      opacity: 0.5;
    }

/* Main columns */

.main {
      display: grid;
      grid-template-columns: 2.2fr 1fr;
      gap: 1px;
      background: #eef7d9;
      border-bottom: 1px solid #d8e7ad;
    }

.column {
      min-width: 0;
      padding: 8px;
      background: linear-gradient(to bottom, #fffdf8, #fff6fa);
    }

.column:first-child {
      background: linear-gradient(to bottom, #ffffff, #fff8f1);
    }

.column:last-child {
      background: linear-gradient(to bottom, #fffdf8, #f8fde8);
      border-left: 1px dotted #d7ab7d;
    }

/* Sections */

.box {
      margin-bottom: 8px;
      padding: 6px;
      background: linear-gradient(to bottom, #ffffff, #fdfff2);
      border: 1px solid #f9e0e6;
      border-radius: 8px;
    }

.box:last-child {
      margin-bottom: 0;
    }

.box p {
      margin: 0 0 7px;
    }

.box p:last-child {
      margin-bottom: 0;
    }

.intro-pixel {
      float: left;
      margin: 10px;
      opacity: 0.7;
      filter: grayscale(40%);
    }

/* Titles */

.title {
      margin-bottom: 5px;
      padding: 3px 5px;
      background: linear-gradient(to right, #ffffff, #f3fadf);
      border-top: 1px dotted #e8c99f;
      border-right: 1px dotted #e8c99f;
      border-bottom: 1px dotted #e8c99f;
      border-left: 5px solid #d8e7ad;
      border-radius: 7px 7px 3px 3px;
      box-shadow: inset 0 0 6px rgba(255,226,238,0.65);
      font-family: "Gaegu", arial;
      font-size: 15px;
      line-height: 12px;
      letter-spacing: 1px;
      text-transform: lowercase;
      color: #c37a43;
    }

.title-big {
      margin-bottom: 6px;
      padding: 4px 6px 3px;
      background: linear-gradient(to right, #f3fadf, #ffffff, #f3fadf);
      border-radius: 10px;
      font-family: "Gaegu", arial;
      font-size: 17px;
      line-height: 13px;
      letter-spacing: 2px;
      text-align: center;
      text-transform: lowercase;
      color: #c37a43;
    }

/* Notes and Lists */

.note {
      margin-top: 6px;
      padding: 5px;
      border-left: 3px solid #d8e7ad;
      border-radius: 0 6px 6px 0;
      font-size: 13px;
      line-height: 15px;
      color: #a9b778;
    }

.tiny-list {
      margin: 5px 0 0;
      padding: 0;
      list-style: none;
    }

.tiny-list li {
      padding: 2px 0;
      border-bottom: 1px dotted #e8c99f;
      color: #a9b778;
    }

.list-icon {
      opacity: 0.5;
    }

/* Mini boxes */

.mini-boxes {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px;
      margin-top: 7px;
    }

.mini-box {
      padding: 5px;
      border: 1px dotted #e8c99f;
      border-radius: 7px;
      font-size: 13px;
      text-align: center;
      color: #a77a5c;
    }

/* Miniblog / updates */

.miniblog {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

.mini-post {
      display: grid;
      grid-template-columns: 45px 1fr;
      gap: 7px;
      align-items: start;
      padding: 5px;
      background: #fffdf8;
      border: 1px dotted #e8c99f;
      border-radius: 8px;
      box-shadow: inset 0 0 7px rgba(222,240,189,0.45);
    }

.mini-post img {
      width: 45px;
      height: 45px;
      object-fit: cover;
      border: 1px solid #d8e7ad;
      border-radius: 7px;
      opacity: 0.9;
      filter: saturate(0.9) brightness(1.04);
    }

.mini-post-content {
      min-width: 0;
    }

.mini-post-title {
      display: block;
      margin-bottom: 2px;
      font-family: "Gaegu", "ronda", cursive;
      font-size: 15px;
      line-height: 14px;
      letter-spacing: 1px;
      color: #c37a43;
    }

.mini-post-meta {
      display: block;
      margin-bottom: 3px;
      font-size: 13px;
      color: #a9b778;
      opacity: 0.95;
    }

.mini-post-text {
      line-height: 14px;
      color: #b58f71;
    }

/* Footer */

.footer {
      padding: 8px;
      border-top: 1px dotted #d7ab7d;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      box-shadow:
        inset 0 1px 0 #ffffff,
        inset 0 0 8px rgba(222,240,189,0.65);
      line-height: 14px;
      letter-spacing: 1px;
      text-align: center;
      color: #b58f71;
    }

.footer a {
      color: #d88497;
      border-bottom: 1px dotted #c37a43;
    }

.footer a:hover {
      color: #c37a43;
      text-shadow: 0 0 4px #ffffff;
    }

/* Responsiveness */

@media (max-width: 768px) {
      body {
        padding: 10px;
      }

.layout {
        margin: 20px auto;
      }

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

.column:last-child {
        border-left: 0;
        border-top: 1px dotted #d7ab7d;
      }

.navigation {
        padding-bottom: 7px;
      }

.navi-link {
        flex-wrap: wrap;
        align-items: stretch;
      }

.navi-link a {
        flex: 1 1 calc(50% - 6px);
        border: 1px dotted #e8c99f;
        border-radius: 8px;
        padding: 5px 7px 4px;
      }

.navi-link a::before {
        display: none;
      }

.banner {
        height: 130px;
      }

.site-name {
        padding: 8px 14px 10px;
        font-size: 18px;
        line-height: 20px;
      }
    }

</style>

</head>

<body>

</div>
  </nav>

<div class="box">
        <div class="title-big">title center</div>

<p>
          <img class="intro-pixel" src="https://itinerae.neocities.org/pixels/greenfrog.gif" alt="x">
          <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.
        </p>

<p>
          Nullam eget sapien sodales, tempor nisi eu, bibendum dolor. Vestibulum ultrices auctor mollis. Curabitur convallis rhoncus orci, et luctus erat aliquam et.
        </p>

<div class="note">
          Nulla ac volutpat tortor. Mauris elementum augue vel massa sagittis aliquam. Sed ornare odio nec purus vulputate.
        </div>
      </div>

<div class="box">
        <div class="title-big">mini boxes</div>

<div class="mini-boxes">
          <div class="mini-box">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique tellus arcu, nec pulvinar dolor.
          </div>

<div class="mini-box">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique tellus arcu, nec pulvinar dolor.
          </div>
        </div>
      </div>

<div class="box">
        <div class="title-big">tiny blog / updates</div>

<div class="mini-post-content">
              <span class="mini-post-title">post title 001</span>
              <span class="mini-post-meta">01.07.2026</span>
              <div class="mini-post-text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. A tiny update can go here.
              </div>
            </div>
          </div>

<div class="mini-post-content">
              <span class="mini-post-title">post title 002</span>
              <span class="mini-post-meta">28.06.2026</span>
              <div class="mini-post-text">
                Morbi tristique tellus arcu, nec pulvinar dolor pretium in. Short and simple.
              </div>
            </div>
          </div>

<div class="mini-post-content">
              <span class="mini-post-title">post title 003</span>
              <span class="mini-post-meta">24.06.2026</span>
              <div class="mini-post-text">
                Nulla ac volutpat tortor. Mauris elementum augue vel massa sagittis aliquam.
              </div>
            </div>
          </div>

</div>
      </div>

</div>

<div class="box">
        <div class="title">title right</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique tellus arcu, nec pulvinar dolor pretium in.</p>
        <div class="note">A small decorated note area.</div>
      </div>

<ul class="tiny-list">
          <li><img class="list-icon" src="https://itinerae.neocities.org/pixels/small-star.gif" alt="x"> small list item</li>
          <li><img class="list-icon" src="https://itinerae.neocities.org/pixels/small-star.gif" alt="x"> small list item</li>
          <li><img class="list-icon" src="https://itinerae.neocities.org/pixels/small-star.gif" alt="x"> <a href="">or maybe links</a></li>
        </ul>
      </div>

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

<div class="box">
        <div class="title">title here</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Nullam eget sapien sodales, tempor nisi eu, bibendum dolor. Vestibulum ultrices auctor mollis. Curabitur convallis rhoncus orci, et luctus erat aliquam et.</p>
      </div>
      
      <div class="box">
        <div class="title">title here</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac volutpat tortor.</p>
      </div>

</aside>

</main>

<footer class="footer">
    <b>layout</b> made by <a href="https://itinerae.org" target="_blank">itinerae.</a>  <b>pixels</b> <a href="https://neko.moo.jp/BS/" target="_blank">from here</a> and <a href="https://webdec.neocities.org" target="_blank">here.</a> 
  </footer>

</div>

</body>
</html>

Nulla ac volutpat tortor. Mauris elementum augue vel massa sagittis aliquam. Sed ornare odio nec purus vulputate.

mini boxes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique tellus arcu, nec pulvinar dolor.

tiny blog / updates

post title 001 01.07.2026

Lorem ipsum dolor sit amet, consectetur adipiscing elit. A tiny update can go here.

post title 002 28.06.2026

Morbi tristique tellus arcu, nec pulvinar dolor pretium in. Short and simple.

post title 003 24.06.2026

Nulla ac volutpat tortor. Mauris elementum augue vel massa sagittis aliquam.

title right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique tellus arcu, nec pulvinar dolor pretium in.

A small decorated note area.

list

small list item
small list item
or maybe links

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac volutpat tortor.

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam eget sapien sodales, tempor nisi eu, bibendum dolor. Vestibulum ultrices auctor mollis. Curabitur convallis rhoncus orci, et luctus erat aliquam et.

title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac volutpat tortor.