home Home about About me media Links paint Paint credits Credits
Hello
x Hello there! This layout is a bit more complicated than my previous layouts, so I will write some important info and instructions here.
Read me
  • DEMO ONLY – NOT FOR USE

    This is a preview of a paid HTML/CSS layout by Itinerae.
  • Shop this layout here: ko-fi.com/itinerae
  • The layout includes 2 HTML versions: one with everything on the same page (CSS + HTML + JS), and one using external files for the CSS and JS.
  • You also get a quick user manual.txt to help you edit the layout.
  • This layout is NOT responsive. This means the layout is desktop-only and is not intended for mobile screens.
  • You are welcome to look at the source code to understand how the layout works, but please do not copy ANY code directly from this demo. I have spent many hours making this.
  • The CSS uses flexbox. I wanted to mention this in case you are not familiar with it.
  • The JS for this layout was created with the help of AI. Editing the JS is not required for normal customization.
  • All windows are draggable. You can minimize them to the taskbar or close them. The maximize button is included for style only and is disabled in this layout.
  • You can change the icons to your own liking. The icons used here are from Pixel art icons.

    You can find classic Windows icons here.

    This site also has a great collection of old web icons.

    Note: You may need to crop some icons if they appear too small.
  • The icons on the left side can behave as normal links opening another page.
  • Or they can open windows like this one. Test by clicking "about me" "credits" or "paint".

    Popup window content is edited in the hidden HTML sections near the bottom of the page.

    Windows can be any size you want. To change a popup window size, edit the icon's data-width and data-height values.

    Windows open in random positions by default. If you want a popup window to open in a specific place, add optional data-left and data-top values to its desktop icon.
  • The links in the Start menu are normal links.
  • To add music to the CD player, you need a direct audio file link, usually ending in .mp3. You can upload your own audio file to a file host, then copy the direct link and paste it into the track's value="" field.

    You can also add a custom cover image with data-cover, or leave it empty to use the default CD image.
  • You can edit this layout as much as you want if you are comfortable editing HTML/CSS.

    If there is a mistake in the original layout files, or something in the original code is causing trouble, message me and I will gladly help fix it. I cannot guarantee support for problems caused by heavy custom edits, removed code, added scripts, or other changes made after downloading, so please edit carefully and keep a backup copy. :3
  • If you are unsure about something / have problems with the original layout code, feel free to send me an email or message me on Ko-fi. I will reply as soon as I can. :)
Image example
aquarium
CD player
album art
0:00 0:00
Your name x

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis posuere enim, in convallis augue. Ut ac vehicula neque, quis accumsan dolor. Sed ullamcorper lacus sit amet nulla mollis mattis. Fusce finibus augue massa, a imperdiet justo ullamcorper vitae.

mood focused
listening spotify
working on this website
online since 2002
This layout was made by Shye / Itinerae, with inspiration from 98.css. Scrollbar code is from here. Classic MS Paint is from here. The icons are from Pixel art icons. The main font is W95FA.