12 CSS Retro UI Designs09 / 12

Pure CSSMIT licensed

90s Website Guestbook Widget

An authentic Web 1.0 GeoCities-era homepage: a rainbow banner with a blinking hit counter, a scrolling marquee, ridge/inset bevelled tables, a sign-the-guestbook form with vintage entries, a webring, 88×31-style badges and an animated UNDER CONSTRUCTION sign. Times + Comic Neue + Courier Prime on tiled teal.

Published

Live Demo
Try it

The code

<div class="ret-09">
  <div class="ret-09__page">
    <div class="ret-09__banner">
      <div class="ret-09__bannerin">
        <h1>~*~ DAVE'S RAD HOMEPAGE ~*~</h1>
        <div class="blink">★ YOU ARE VISITOR NUMBER 0024891 ★</div>
      </div>
    </div>

    <div class="ret-09__marquee"><span>★彡 WELCOME 2 MY CORNER OF THE WWW!! ★ best viewed in Netscape Navigator 4.0 @ 800x600 ★ sign my guestbook below!! ★彡</span></div>

    <div class="ret-09__nav">
      <a href="#">[ HOME ]</a><a href="#">[ ABOUT ME ]</a><a href="#">[ MY DOG ]</a><a href="#">[ LINKS ]</a><a href="#">[ GUESTBOOK ]</a><a href="#">[ EMAIL ME! ]</a>
    </div>

    <div class="ret-09__body">
      <div class="ret-09__main">
        <h2>Sign My Guestbook!!</h2>
        <p class="ret-09__welcome">Hey there netizen! Thanks 4 stopping by my totally awesome website. Don't forget to <b>bookmark this page</b> and tell all ur friends. Leave me a note below!! :o)</p>

        <div class="ret-09__gb">
          <div class="ret-09__entry"><span class="who">xX_SkaterDude_Xx</span><span class="when">06/14/2001</span><span class="msg">kewl site dude!! how'd u make the spinning skull gif?? <b>l8r</b></span></div>
          <div class="ret-09__entry"><span class="who">~PrincessSparkle~</span><span class="when">06/12/2001</span><span class="msg">omg luv the rainbow text!!1! added u 2 my webring :) :) :)</span></div>
          <div class="ret-09__entry"><span class="who">webmaster_steve</span><span class="when">06/09/2001</span><span class="msg">nice tables. all hand-coded HTML, no css frameworks here. <b>RESPECT</b></span></div>
        </div>

        <div class="ret-09__form">
          <label>Ur Name:</label>
          <input type="text" placeholder="kewl_username_99">
          <label>Ur Message:</label>
          <textarea placeholder="say something rad..."></textarea>
          <button class="ret-09__sign">✎ Sign Guestbook!</button>
        </div>
      </div>

      <div class="ret-09__side">
        <div class="ret-09__box">
          <h3>VISITORS</h3>
          <div class="ret-09__counter"><span>0</span><span>0</span><span>2</span><span>4</span><span>8</span><span>9</span><span>1</span></div>
        </div>
        <div class="ret-09__box ret-09__webring">
          <h3>WEBRING</h3>
          <a href="#">◄</a> &nbsp;❤ &nbsp;<a href="#">►</a>
          <div style="margin-top:6px;font-size:.72rem">The 90s Kids Ring</div>
        </div>
        <div class="ret-09__box">
          <h3>BADGES</h3>
          <div class="ret-09__badges">
            <span class="ret-09__badge">HTML 4.0</span>
            <span class="ret-09__badge">NETSCAPE</span>
            <span class="ret-09__badge">GEOCITIES</span>
            <span class="ret-09__badge">Y2K OK</span>
          </div>
        </div>
        <div class="ret-09__construction"><span>🚧 UNDER<br>CONSTRUCTION 🚧</span></div>
      </div>
    </div>

    <div class="ret-09__foot">
      Made with Notepad &amp; ♥ · © 2001 Dave · <a href="#">webmaster@daverad.geocities.com</a><br>
      This page best viewed at 800×600 · Get <a href="#">Netscape Now!</a>
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Courier+Prime:wght@400;700&display=swap');

.ret-09,
.ret-09 *,
.ret-09 *::before,
.ret-09 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.ret-09 ::selection {
  background: #000080;
  color: #fff;
}

.ret-09 {
  --teal: #008080;
  --silver: #c0c0c0;
  --navy: #000080;
  --purple: #800080;
  --lime: #00ff00;
  --yellow: #ffff00;
  font-family: 'Times New Roman',Times,serif;
  background: #008080;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23008080'/%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23007070' stroke-width='1'/%3E%3C/svg%3E");
  min-height: 100vh;
  color: #000;
  padding: 14px;
}

.ret-09__page {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 3px ridge var(--silver);
  padding: 0;
}
/* rainbow top banner */

.ret-09__banner {
  background: linear-gradient(90deg,#f00,#ff7f00,#ff0,#0f0,#00f,#4b0082,#9400d3);
  padding: 3px;
}

.ret-09__bannerin {
  background: #000;
  text-align: center;
  padding: 14px 10px;
}

.ret-09__bannerin h1 {
  font-family: 'Courier Prime';
  color: var(--yellow);
  font-size: clamp(1.4rem,5vw,2.4rem);
  font-weight: 700;
  text-shadow: 2px 2px 0 #f00;
  letter-spacing: .05em;
}

.ret-09__bannerin .blink {
  color: var(--lime);
  font-family: 'Comic Neue';
  font-weight: 700;
  font-size: .95rem;
  animation: ret-09-blink 1s steps(2) infinite;
}

@keyframes ret-09-blink {
  50% {
    opacity: 0;
  }
}
/* marquee */

.ret-09__marquee {
  background: var(--navy);
  color: var(--yellow);
  font-family: 'Courier Prime';
  font-weight: 700;
  padding: 6px 0;
  overflow: hidden;
  white-space: nowrap;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #404040;
}

.ret-09__marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: ret-09-scroll 16s linear infinite;
}

@keyframes ret-09-scroll {
  to {
    transform: translateX(-100%);
  }
}

.ret-09__nav {
  background: var(--silver);
  border-bottom: 2px solid #808080;
  padding: 8px;
  text-align: center;
  font-family: 'Comic Neue';
  font-size: .9rem;
}

.ret-09__nav a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  margin: 0 6px;
}

.ret-09__nav a:hover {
  color: #f00;
  background: var(--yellow);
}

.ret-09__body {
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 18px;
}

@media (max-width: 640px) {
  .ret-09__body {
    grid-template-columns: 1fr;
  }
}

.ret-09__main h2 {
  font-family: 'Comic Neue';
  color: var(--purple);
  font-size: 1.5rem;
  border-bottom: 2px dotted var(--purple);
  padding-bottom: 4px;
  margin-bottom: 10px;
}

.ret-09__main h2::before {
  content: '» ';
}

.ret-09__welcome {
  font-size: .96rem;
  line-height: 1.5;
  margin-bottom: 14px;
}

.ret-09__welcome b {
  background: var(--yellow);
}
/* guestbook entries */

.ret-09__gb {
  border: 2px inset var(--silver);
  background: #fffef0;
  padding: 10px;
  margin-bottom: 14px;
}

.ret-09__entry {
  font-family: 'Comic Neue';
  font-size: .88rem;
  line-height: 1.45;
  padding: 8px;
  border-bottom: 1px dashed #999;
  margin-bottom: 8px;
}

.ret-09__entry:last-child {
  border: 0;
  margin: 0;
}

.ret-09__entry .who {
  color: var(--navy);
  font-weight: 700;
}

.ret-09__entry .when {
  color: #888;
  font-size: .78rem;
  float: right;
}

.ret-09__entry .msg {
  display: block;
  margin-top: 4px;
  color: #222;
}

.ret-09__entry .msg b {
  color: #f00;
}

.ret-09__form {
  border: 2px ridge var(--silver);
  background: var(--silver);
  padding: 10px;
  font-family: 'Comic Neue';
}

.ret-09__form label {
  display: block;
  font-weight: 700;
  font-size: .82rem;
  margin: 6px 0 3px;
}

.ret-09__form input,
.ret-09__form textarea {
  width: 100%;
  border: 2px inset #fff;
  padding: 5px;
  font-family: 'Courier Prime';
  font-size: .85rem;
}

.ret-09__form textarea {
  height: 54px;
  resize: none;
}

.ret-09__sign {
  margin-top: 10px;
  background: var(--silver);
  border: 2px outset #fff;
  padding: 5px 16px;
  font-family: 'Comic Neue';
  font-weight: 700;
  cursor: pointer;
}

.ret-09__sign:active {
  border-style: inset;
}
/* sidebar */

.ret-09__side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: 'Comic Neue';
  font-size: .82rem;
}

.ret-09__box {
  border: 2px outset var(--silver);
  background: #fff;
  padding: 8px;
  text-align: center;
}

.ret-09__box h3 {
  background: var(--navy);
  color: #fff;
  font-size: .8rem;
  margin: -8px -8px 8px;
  padding: 4px;
}

.ret-09__counter {
  display: inline-flex;
  gap: 2px;
  font-family: 'Courier Prime';
  font-weight: 700;
}

.ret-09__counter span {
  background: #000;
  color: var(--lime);
  padding: 3px 5px;
  border-radius: 2px;
}

.ret-09__webring a {
  color: var(--navy);
  text-decoration: none;
  font-size: 1.3rem;
}

.ret-09__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}

.ret-09__badge {
  font-family: 'Courier Prime';
  font-size: .6rem;
  font-weight: 700;
  padding: 3px 5px;
  border: 1px solid #000;
  color: #fff;
}

.ret-09__badge:nth-child(1) {
  background: #f00;
}

.ret-09__badge:nth-child(2) {
  background: var(--navy);
}

.ret-09__badge:nth-child(3) {
  background: var(--purple);
}

.ret-09__badge:nth-child(4) {
  background: #000;
}

.ret-09__construction {
  text-align: center;
  font-family: 'Comic Neue';
  font-weight: 700;
  color: #000;
  background: repeating-linear-gradient(45deg,var(--yellow) 0 12px,#000 12px 24px);
  padding: 3px;
  margin-top: 6px;
}

.ret-09__construction span {
  background: #fff;
  display: block;
  padding: 6px;
}

.ret-09__foot {
  text-align: center;
  font-family: 'Comic Neue';
  font-size: .74rem;
  color: #555;
  padding: 12px;
  border-top: 2px groove var(--silver);
}

.ret-09__foot a {
  color: var(--navy);
}

@media (prefers-reduced-motion: reduce) {
  .ret-09 * {
    animation: none !important;
  }

  .ret-09__marquee span {
    padding-left: 0;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Retro UI Design from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: 90s Website Guestbook Widget
Source: https://codefronts.com/design-styles/css-retro-designs/90s-website-guestbook-widget/

An authentic Web 1.0 GeoCities-era homepage: a rainbow banner with a blinking hit counter, a scrolling marquee, ridge/inset bevelled tables, a sign-the-guestbook form with vintage entries, a webring, 88×31-style badges and an animated UNDER CONSTRUCTION sign. Times + Comic Neue + Courier Prime on tiled teal.
## HTML
```html
<div class="ret-09">
  <div class="ret-09__page">
    <div class="ret-09__banner">
      <div class="ret-09__bannerin">
        <h1>~*~ DAVE'S RAD HOMEPAGE ~*~</h1>
        <div class="blink">★ YOU ARE VISITOR NUMBER 0024891 ★</div>
      </div>
    </div>

    <div class="ret-09__marquee"><span>★彡 WELCOME 2 MY CORNER OF THE WWW!! ★ best viewed in Netscape Navigator 4.0 @ 800x600 ★ sign my guestbook below!! ★彡</span></div>

    <div class="ret-09__nav">
      <a href="#">[ HOME ]</a><a href="#">[ ABOUT ME ]</a><a href="#">[ MY DOG ]</a><a href="#">[ LINKS ]</a><a href="#">[ GUESTBOOK ]</a><a href="#">[ EMAIL ME! ]</a>
    </div>

    <div class="ret-09__body">
      <div class="ret-09__main">
        <h2>Sign My Guestbook!!</h2>
        <p class="ret-09__welcome">Hey there netizen! Thanks 4 stopping by my totally awesome website. Don't forget to <b>bookmark this page</b> and tell all ur friends. Leave me a note below!! :o)</p>

        <div class="ret-09__gb">
          <div class="ret-09__entry"><span class="who">xX_SkaterDude_Xx</span><span class="when">06/14/2001</span><span class="msg">kewl site dude!! how'd u make the spinning skull gif?? <b>l8r</b></span></div>
          <div class="ret-09__entry"><span class="who">~PrincessSparkle~</span><span class="when">06/12/2001</span><span class="msg">omg luv the rainbow text!!1! added u 2 my webring :) :) :)</span></div>
          <div class="ret-09__entry"><span class="who">webmaster_steve</span><span class="when">06/09/2001</span><span class="msg">nice tables. all hand-coded HTML, no css frameworks here. <b>RESPECT</b></span></div>
        </div>

        <div class="ret-09__form">
          <label>Ur Name:</label>
          <input type="text" placeholder="kewl_username_99">
          <label>Ur Message:</label>
          <textarea placeholder="say something rad..."></textarea>
          <button class="ret-09__sign">✎ Sign Guestbook!</button>
        </div>
      </div>

      <div class="ret-09__side">
        <div class="ret-09__box">
          <h3>VISITORS</h3>
          <div class="ret-09__counter"><span>0</span><span>0</span><span>2</span><span>4</span><span>8</span><span>9</span><span>1</span></div>
        </div>
        <div class="ret-09__box ret-09__webring">
          <h3>WEBRING</h3>
          <a href="#">◄</a> &nbsp;❤ &nbsp;<a href="#">►</a>
          <div style="margin-top:6px;font-size:.72rem">The 90s Kids Ring</div>
        </div>
        <div class="ret-09__box">
          <h3>BADGES</h3>
          <div class="ret-09__badges">
            <span class="ret-09__badge">HTML 4.0</span>
            <span class="ret-09__badge">NETSCAPE</span>
            <span class="ret-09__badge">GEOCITIES</span>
            <span class="ret-09__badge">Y2K OK</span>
          </div>
        </div>
        <div class="ret-09__construction"><span>🚧 UNDER<br>CONSTRUCTION 🚧</span></div>
      </div>
    </div>

    <div class="ret-09__foot">
      Made with Notepad &amp; ♥ · © 2001 Dave · <a href="#">webmaster@daverad.geocities.com</a><br>
      This page best viewed at 800×600 · Get <a href="#">Netscape Now!</a>
    </div>
  </div>
</div>
```
## CSS
```css
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Courier+Prime:wght@400;700&display=swap');

.ret-09,
.ret-09 *,
.ret-09 *::before,
.ret-09 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.ret-09 ::selection {
  background: #000080;
  color: #fff;
}

.ret-09 {
  --teal: #008080;
  --silver: #c0c0c0;
  --navy: #000080;
  --purple: #800080;
  --lime: #00ff00;
  --yellow: #ffff00;
  font-family: 'Times New Roman',Times,serif;
  background: #008080;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23008080'/%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23007070' stroke-width='1'/%3E%3C/svg%3E");
  min-height: 100vh;
  color: #000;
  padding: 14px;
}

.ret-09__page {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 3px ridge var(--silver);
  padding: 0;
}
/* rainbow top banner */

.ret-09__banner {
  background: linear-gradient(90deg,#f00,#ff7f00,#ff0,#0f0,#00f,#4b0082,#9400d3);
  padding: 3px;
}

.ret-09__bannerin {
  background: #000;
  text-align: center;
  padding: 14px 10px;
}

.ret-09__bannerin h1 {
  font-family: 'Courier Prime';
  color: var(--yellow);
  font-size: clamp(1.4rem,5vw,2.4rem);
  font-weight: 700;
  text-shadow: 2px 2px 0 #f00;
  letter-spacing: .05em;
}

.ret-09__bannerin .blink {
  color: var(--lime);
  font-family: 'Comic Neue';
  font-weight: 700;
  font-size: .95rem;
  animation: ret-09-blink 1s steps(2) infinite;
}

@keyframes ret-09-blink {
  50% {
    opacity: 0;
  }
}
/* marquee */

.ret-09__marquee {
  background: var(--navy);
  color: var(--yellow);
  font-family: 'Courier Prime';
  font-weight: 700;
  padding: 6px 0;
  overflow: hidden;
  white-space: nowrap;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #404040;
}

.ret-09__marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: ret-09-scroll 16s linear infinite;
}

@keyframes ret-09-scroll {
  to {
    transform: translateX(-100%);
  }
}

.ret-09__nav {
  background: var(--silver);
  border-bottom: 2px solid #808080;
  padding: 8px;
  text-align: center;
  font-family: 'Comic Neue';
  font-size: .9rem;
}

.ret-09__nav a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  margin: 0 6px;
}

.ret-09__nav a:hover {
  color: #f00;
  background: var(--yellow);
}

.ret-09__body {
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 18px;
}

@media (max-width: 640px) {
  .ret-09__body {
    grid-template-columns: 1fr;
  }
}

.ret-09__main h2 {
  font-family: 'Comic Neue';
  color: var(--purple);
  font-size: 1.5rem;
  border-bottom: 2px dotted var(--purple);
  padding-bottom: 4px;
  margin-bottom: 10px;
}

.ret-09__main h2::before {
  content: '» ';
}

.ret-09__welcome {
  font-size: .96rem;
  line-height: 1.5;
  margin-bottom: 14px;
}

.ret-09__welcome b {
  background: var(--yellow);
}
/* guestbook entries */

.ret-09__gb {
  border: 2px inset var(--silver);
  background: #fffef0;
  padding: 10px;
  margin-bottom: 14px;
}

.ret-09__entry {
  font-family: 'Comic Neue';
  font-size: .88rem;
  line-height: 1.45;
  padding: 8px;
  border-bottom: 1px dashed #999;
  margin-bottom: 8px;
}

.ret-09__entry:last-child {
  border: 0;
  margin: 0;
}

.ret-09__entry .who {
  color: var(--navy);
  font-weight: 700;
}

.ret-09__entry .when {
  color: #888;
  font-size: .78rem;
  float: right;
}

.ret-09__entry .msg {
  display: block;
  margin-top: 4px;
  color: #222;
}

.ret-09__entry .msg b {
  color: #f00;
}

.ret-09__form {
  border: 2px ridge var(--silver);
  background: var(--silver);
  padding: 10px;
  font-family: 'Comic Neue';
}

.ret-09__form label {
  display: block;
  font-weight: 700;
  font-size: .82rem;
  margin: 6px 0 3px;
}

.ret-09__form input,
.ret-09__form textarea {
  width: 100%;
  border: 2px inset #fff;
  padding: 5px;
  font-family: 'Courier Prime';
  font-size: .85rem;
}

.ret-09__form textarea {
  height: 54px;
  resize: none;
}

.ret-09__sign {
  margin-top: 10px;
  background: var(--silver);
  border: 2px outset #fff;
  padding: 5px 16px;
  font-family: 'Comic Neue';
  font-weight: 700;
  cursor: pointer;
}

.ret-09__sign:active {
  border-style: inset;
}
/* sidebar */

.ret-09__side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: 'Comic Neue';
  font-size: .82rem;
}

.ret-09__box {
  border: 2px outset var(--silver);
  background: #fff;
  padding: 8px;
  text-align: center;
}

.ret-09__box h3 {
  background: var(--navy);
  color: #fff;
  font-size: .8rem;
  margin: -8px -8px 8px;
  padding: 4px;
}

.ret-09__counter {
  display: inline-flex;
  gap: 2px;
  font-family: 'Courier Prime';
  font-weight: 700;
}

.ret-09__counter span {
  background: #000;
  color: var(--lime);
  padding: 3px 5px;
  border-radius: 2px;
}

.ret-09__webring a {
  color: var(--navy);
  text-decoration: none;
  font-size: 1.3rem;
}

.ret-09__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}

.ret-09__badge {
  font-family: 'Courier Prime';
  font-size: .6rem;
  font-weight: 700;
  padding: 3px 5px;
  border: 1px solid #000;
  color: #fff;
}

.ret-09__badge:nth-child(1) {
  background: #f00;
}

.ret-09__badge:nth-child(2) {
  background: var(--navy);
}

.ret-09__badge:nth-child(3) {
  background: var(--purple);
}

.ret-09__badge:nth-child(4) {
  background: #000;
}

.ret-09__construction {
  text-align: center;
  font-family: 'Comic Neue';
  font-weight: 700;
  color: #000;
  background: repeating-linear-gradient(45deg,var(--yellow) 0 12px,#000 12px 24px);
  padding: 3px;
  margin-top: 6px;
}

.ret-09__construction span {
  background: #fff;
  display: block;
  padding: 6px;
}

.ret-09__foot {
  text-align: center;
  font-family: 'Comic Neue';
  font-size: .74rem;
  color: #555;
  padding: 12px;
  border-top: 2px groove var(--silver);
}

.ret-09__foot a {
  color: var(--navy);
}

@media (prefers-reduced-motion: reduce) {
  .ret-09 * {
    animation: none !important;
  }

  .ret-09__marquee span {
    padding-left: 0;
  }
}
```

Techniques used in this demo

grid-templateMDN ↗@keyframesMDN ↗clamp()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →