mehbul/web-design-era

---

name: web-design-era description: Build a complete website in one of five retro web-design eras drawn from the Web Design Museum (1991–2010): Early Web (1991–1995), Late 90s (1996–1999), Early 00s (2000–2003), Mid 00s (2004–2006), or Late 00s (2007–2010). Use this skill whenever the user asks for a retro/old/vintage website, a 90s or 2000s style site, a site "like the old web", a GeoCities/MySpace/Facebook-era page, a Y2K aesthetic, a skeuomorphic/glossy Web 2.0 look, or wants to recreate the look of a specific decade of the web. Also use when the user names an era, a year range 1991–2010, or a brand-era combo (e.g. "Amazon 1998", "Apple 2005"). Keywords: retro web design, vintage website, 90s website, 2000s website, Y2K, GeoCities, MySpace, Flash intro, table layout, Web 2.0, glossy buttons, rounded corners, tag cloud, minimalism, old internet, nostalgic, era-accurate, period-correct, retro HTML, retro CSS. Produces a single self-contained HTML file matching the era's palette, typography, layout, components, and construction technique. Ask which era (or infer from context) before building. Make sure to use this skill whenever the user mentions retro, vintage, old web, 90s, 2000s, Y2K, nostalgic, era, decade, or wants any website styled like a past era of the internet, even if they don't explicitly ask for a "retro" site.

Web Design by Era (1991–2010)

You are a web designer who can authentically reproduce the look, feel, and construction of five distinct eras of web design, based on the Web Design Museum's 6,657-entry archive (1991–2010). Pick the era the user wants, then build a single self-contained HTML file that is unmistakably from that era — not a modern site with retro colors, but a site built the way sites were actually built then.

How to use this skill

1. Determine the target era. If the user named a year or era, use it. If ambiguous, ask: "Which era — Early Web (91–95), Late 90s, Early 00s, Mid 00s, or Late 00s?"
2. Read the matching era section below fully before writing code.
3. Produce one self-contained .html file (inline CSS; era-appropriate external resources only if the era actually used them, e.g. Flash was separate — here we emulate with CSS/JS).
4. Include realistic era content (not lorem ipsum) and era-appropriate chrome (badges, counters, "best viewed in..." lines) where the era used them.
5. Respect the era's constraints (viewport width, no responsive, table layouts, etc.) — do not modernize.

Era 1 — Early Web (1991–1995)

Vibe: Plain HTML, default browser, no design system. Looks like a university research page.

• Viewport: 640×480 / 800×600. Fixed, not responsive. Body width ~600px or full.
• Colors: gray background (#C0C0C0 or default #FFFFFF), black text, blue links (#0000EE), visited purple (#551A8B), no palette.
• Typography: Times New Roman / serif default; no web fonts; 12–14px default; no type scale.
• Layout: No CSS layout. <center>, <hr>, <br>, tables (if any). Single column.
• Components: <hr> dividers, <center> blocks, bulleted lists, "Under Construction" GIF banners, hit counters ("You are visitor #12345"), email links (mailto:), "Last updated" dates, "Best viewed with Netscape" text badges.
• Motion: <blink> and <marquee> (use CSS animation to emulate blink).
• Chrome: "© 1995", "Webmaster:", "Guestbook", "Links" page.
• Do not use: CSS flex/grid, border-radius, box-shadow, gradients, custom fonts, responsive units.

HTML skeleton:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html><head><title>Site Name</title></head>
<body bgcolor="#C0C0C0" text="#000000" link="#0000EE" vlink="#551A8B">
<center><h1>Site Name</h1><hr width="80%"></center>
<p>Welcome to my homepage. This site is <b>under construction</b>.</p>
<center><img src="construction.gif" alt="Under Construction"></center>
<p>You are visitor number <b>004217</b>.</p>
<marquee>Latest news here!</marquee>
<hr><p><small>Last updated: January 1, 1995 · Webmaster: [email protected]</small></p>
</body></html>

Era 2 — Late 90s (1996–1999)

Vibe: Table layouts, dark + neon, Flash intros, beveled 3D buttons, "Best viewed in Netscape."

• Viewport: 800×600 dominant. Fixed ~760–780px centered table.
• Colors: Dark backgrounds (#000000, #000033, #1a1a2e), neon text (#00FF00, #FF00FF, #00FFFF, #FFFF00), glowing. Or bright tiled patterns.
• Typography: Verdana/Arial/Helvetica 10–11px; pixel fonts for nav; beveled button text.
• Layout: Table-based (<table width="760">), sliced image maps for nav, framesets for persistent nav bars.
• Components: Splash/intro page (separate "Enter site" page), GIF animations, tiled background GIFs, 3D beveled buttons (image slices), "Best viewed in Netscape Navigator 4 / IE 4" badges, guestbooks, webrings, hit counters, "What's New" sections, framesets (<frameset cols="160,*">).
• Motion: GIF animations, Flash intros (emulate with CSS fade/zoom intro screen).
• Chrome: "© 1998", browser badges, "This site uses Flash" notices.
• Do not use: CSS flex/grid, border-radius, box-shadow, responsive.

Layout skeleton:

<table width="760" align="center" cellpadding="0" cellspacing="0" border="0">
  <tr><td colspan="2" height="80" bgcolor="#000033"><!-- header image map --></td></tr>
  <tr>
    <td width="160" valign="top" bgcolor="#000000"><!-- nav buttons (image slices) --></td>
    <td width="600" valign="top" bgcolor="#000033" style="color:#00FF00"><!-- content --></td>
  </tr>
</table>

Splash page: a centered "Enter" link over a dark animated background; link to main frameset.

Era 3 — Early 00s (2000–2003)

Vibe: Fixed centered CSS layouts (~760–800px), Flash intros peak, glossy plastic buttons, gradients and drop shadows, left sidebar nav, search bar on top.

• Viewport: 800×600 / 1024×768. Fixed ~760–800px centered.
• Colors: White/light gray body (#FFFFFF, #F5F5F5), blue nav (#003366, #0066CC), orange accents (#FF6600), gradient headers.
• Typography: Verdana/Arial 11–12px; Tahoma for UI; bold headers.
• Layout: CSS box model; margin: 0 auto; width: 780px; centered wrapper; left sidebar + main content; top search bar.
• Components: Flash intro (emulate with animated splash div), glossy plastic buttons (gradient + highlight), drop shadows on boxes, tabbed navigation, breadcrumb trails, "News" sidebars, footer link farms, copyright lines.
• Motion: Flash-style intro animation (CSS keyframes), hover button states.
• Chrome: "© 2001 Company. All rights reserved.", "Privacy Policy | Terms of Use", "Best viewed in IE 5/6".
• Do not use: border-radius, flexbox, grid, responsive, flat design.

CSS skeleton:

body { margin:0; background:#E8E8E8; font:11px/1.4 Verdana,Arial,sans-serif; color:#333; }
#wrapper { width:780px; margin:0 auto; background:#fff; border:1px solid #999; }
#header { background:linear-gradient(#003366,#0066CC); color:#fff; padding:10px; }
#nav { float:left; width:160px; background:#F0F0F0; }
#content { margin-left:160px; padding:12px; }
.btn { background:linear-gradient(#FF8800,#FF6600); color:#fff; border:1px solid #CC5500; padding:4px 10px; font-weight:bold; }

Era 4 — Mid 00s (2004–2006) Web 2.0

Vibe: Rounded corners, glossy gradients, large typography, pastels, AJAX feel, tag clouds, profile pages, 960px grid, whitespace.

• Viewport: 1024×768+. Fixed ~960px or fluid-ish.
• Colors: White background, soft pastels (mint #E8F5E9, sky #E3F2FD, peach #FBE9E7), glossy blue/green gradients, subtle grays (#F5F5F5).
• Typography: Helvetica/Arial/Lucida 12–13px; large bold headers (24–32px); rounded button labels.
• Layout: 960px grid; generous whitespace; card-based; centered single column or 2-col.
• Components: Rounded-corner boxes (image slices or early CSS), glossy gradient buttons, tag clouds, folksonomy tags, profile cards (avatar + name + stats), AJAX-style "loading..." indicators, star ratings, "Beta" badges, folksonomy clouds, large hero headings.
• Motion: Subtle hover transitions, AJAX spinners.
• Chrome: "Beta", "© 2005", "About · Blog · Status", rounded footer.
• Do not use: flat design, CSS3 box-shadow heavy, responsive, dark mode.

CSS skeleton:

body { margin:0; background:#fff; font:13px/1.6 'Lucida Grande',Arial,sans-serif; color:#333; }
#wrapper { width:960px; margin:0 auto; }
.card { background:#F7F7F7; border:1px solid #DDD; border-radius:8px; padding:16px; margin-bottom:12px; }
.btn { background:linear-gradient(#7CB342,#558B2F); color:#fff; border:none; border-radius:6px; padding:6px 14px; font-weight:bold; }
.tag { display:inline-block; background:#E3F2FD; color:#1565C0; border-radius:10px; padding:2px 8px; font-size:11px; margin:2px; }
h1 { font-size:28px; color:#222; letter-spacing:-0.5px; }

Era 5 — Late 00s (2007–2010)

Vibe: Minimalism returns — clean white, big photography, sans-serif, large hero images, app-store/flat-ish, CSS3 (border-radius, box-shadow), HTML5 video.

• Viewport: 960–1200px; early responsive (media queries) acceptable.
• Colors: White (#FFFFFF) dominant, light grays (#F5F5F5, #EEE), single accent color (blue #0066CC or orange), high-contrast black text.
• Typography: Helvetica Neue/Arial 13–14px; huge hero headlines (48–72px); light weights; generous line-height.
• Layout: Wide hero section with full-bleed image; centered content ~960px; grid of feature blocks; sticky-ish top nav.
• Components: Full-bleed hero with big headline + CTA, feature grid (3 columns), testimonial quotes, footer with columns, app-store badges, "Sign up" buttons (solid color, rounded), video embeds, subtle shadows.
• Motion: CSS3 transitions, fade-ins, parallax-lite.
• Chrome: "© 2010", social icons, "Follow us", minimal footer.
• Do use: border-radius, box-shadow, CSS3 gradients, @media queries, HTML5 <video>.

CSS skeleton:

* { box-sizing:border-box; }
body { margin:0; background:#fff; font:14px/1.6 'Helvetica Neue',Arial,sans-serif; color:#222; }
.hero { background:#111 url(hero.jpg) center/cover; color:#fff; padding:80px 20px; text-align:center; }
.hero h1 { font-size:56px; font-weight:300; margin:0; }
.btn { background:#0066CC; color:#fff; border:none; border-radius:4px; padding:10px 22px; font-size:15px; }
.section { max-width:960px; margin:0 auto; padding:60px 20px; }
.card { background:#fff; border:1px solid #E5E5E5; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.06); padding:24px; }
@media (max-width:768px){ .hero h1{font-size:32px;} .section{padding:30px 16px;} }

Output expectations

• Single self-contained .html file with inline <style>.
• Use era-appropriate fonts (system fonts only — no Google Fonts for pre-2007 eras; Google Fonts acceptable for Late 00s).
• Match the era's viewport behavior: fixed width for eras 1–4, responsive for era 5.
• Include era chrome: counters, badges, "best viewed in", copyright year matching the era.
• Do not add modern touches (smooth scrolling, dark mode toggles, Tailwind, React) unless the era supports them.
• If the user names a brand + year (e.g. "Amazon 1998"), reproduce that brand's known era look.

Choosing the era from cues

• "retro", "old web", "GeoCities", "90s", "Y2K" → Late 90s or Early 00s
• "vintage homepage", "under construction", "hit counter" → Early Web
• "glossy", "Web 2.0", "rounded corners", "MySpace", "tag cloud" → Mid 00s
• "minimal", "big hero image", "clean white", "app store" → Late 00s
• "Flash intro", "fixed 800px", "plastic buttons" → Early 00s

Reference

Patterns derived from Web Design Museum archive analysis (6,657 entries, 1991–2010): era distribution, 922 Flash titles, 94 brand timelines (832 entries), 172 exhibitions (youtube-channels 93, bad-and-ugly 36, geocities 25, apple-store 9, apple-itunes 9), 11 fullscreen sites.