12 CSS Retro UI Designs 09 / 12

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.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

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="#">[email protected]</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}}

More from 12 CSS Retro UI Designs

Retro Futuristic Terminal UI Code8 Bit Pixel Art UI Elements & ButtonsNeo Brutalist UI Components ExamplesRetro Cassette Player UI Web ComponentVaporwave Aesthetic Website Theme DesignRetro Arcade Game UI KitY2K Style Web UI KitRetro Clothing Store Web UI DesignASCII Art Web Interface CodeRetro Desktop Portfolio Website TemplateRetro Windows 95 UI (CSS Template)
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →