Windows 98

index.html

<div id="boot-ready"></div>

<div id="boot">
  <div class="loading-bar"></div>
</div>

<div id="desktop">
  
  <div class="desktop-icons">
    <div class="desktop-icon my-computer" title="My Computer">
      My Computer
    </div>
    
    <div class="desktop-icon my-documents" title="My Documents">
      My Documents
    </div>
    
     <div class="desktop-icon network" title="Network Neighborhood">
      Network Neighborhood
    </div>
    
    <div class="desktop-icon trash-empty" title="Recycle Bin">
      Recycle Bin
    </div>
  </div>
  
  <div class="window active">
      <div class="window-toolbar">
        <div class="window-title">Display Properties</div>
        <div class="window-buttons">
          <div class="window-button close"></div>
          <div class="window-button help"></div>
        </div>
      </div>
      <div class="window-wrapper">
        <div class="window-tabs">
          <button class="tabs-button active">Background</button>
          <button class="tabs-button">Screen Saver</button>
          <button class="tabs-button">Appearance</button>
          <button class="tabs-button">Effects</button>
          <button class="tabs-button">Web</button>
          <button class="tabs-button">Settings</button>
        </div>
        <div class="window-content">
          <form>
            <fieldset>
              <legend>Wallpaper</legend>

              <div class="window-hero">
                <div class="window-hero-monitror">
                  <!-- TO DO - Monitor illustration -->
                </div>
              </div>

              <p>Select an HTML Document or a picture</p>
              <select name="wallpaper" size="5">
                <option value="none">(None)</option>
                <option value="1">1st Boot</option>
                <option value="2">Black Thatch</option>
                <option value="3">Blue Rivets</option>
                <option value="4">Bubbles</option>
              </select>
            </fieldset>
          </form>
        </div>
        
        <div class="window-actions">
          <button class="window-action-button">Apply</button>
          <button class="window-action-button">Cancel</button>
          <button class="window-action-button">OK</button>
       </div>
      </div>
    </div>
  
  <div id="toolbar">
    <div class="toolbar-start-menu">
      <button class="start-button">
        Start
      </button>
      
      <div class="start-menu-wrapper">
        <div class="start-menu-title">
          <span><strong>Windows</strong>98</span>
        </div>
        
        <div class="start-menu">
          <button class="start-menu-link">
            Shut down
          </button>
        </div>
      </div>
    </div>
    <div class="toolbar-separator"></div>
    
    <div class="toolbar-left">
      <button class="toolbar-icon ie"></button>
      <button class="toolbar-icon outlook"></button>
      <button class="toolbar-icon desktop"></button>
      <button class="toolbar-icon channels"></button>
    </div>
    
    <div class="toolbar-separator"></div>
 
    <div class="toolbar-right">
      <div class="time"><span class="hour"></span>:<span class="minutes"></span> AM</div>
    </div>
  </div>
</div>

script.babel

let date = new Date();

setInterval(function(){
  document.querySelector('.time').innerText = date.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true });
}, 1000);

setTimeout(function(){
  document.querySelector('#boot').style.display = 'none';
}, 0);

setTimeout(function(){
  document.querySelector('#boot-ready').style.display = 'none';
}, 0);

document.querySelector('select[name="wallpaper"]').addEventListener('click', function(e){
  wallpaper = e.target.value;
  switch (wallpaper){
    case 'none':
      document.querySelector('#desktop').style.background = 'teal';
      break; 
     case '1':
      document.querySelector('#desktop').style.backgroundImage = 'url(https://i.pinimg.com/originals/e3/6b/41/e36b414450077c6a1e29eab4a27a858c.jpg)';
      break; 
    case '2':
      document.querySelector('#desktop').style.backgroundImage = 'url(http://cs.gettysburg.edu/~duncjo01/archive/patterns/windows/ancestry/Black%20Thatch.bmp)';
      break;
    case '3':
      document.querySelector('#desktop').style.backgroundImage = 'url(http://cs.gettysburg.edu/~duncjo01/archive/patterns/windows/ancestry/Blue%20Rivets.bmp)';
      break;
    case '4':
      document.querySelector('#desktop').style.backgroundImage = 'url(http://cs.gettysburg.edu/~duncjo01/archive/patterns/windows/ancestry/Soap%20Bubbles.bmp)';
      break;
  }
});

var draggie = new Draggabilly( '.window', {
 // containment: '.container',
  handle: '.window-toolbar'
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/draggabilly/2.2.0/draggabilly.pkgd.min.js"></script>

style.scss

*{
  box-sizing: border-box;
}

body{
  cursor: url(http://www.rw-designer.com/cursor-download.php?id=90885), auto;
  font-family: 'MS Sans Serif';
  letter-spacing: 0.001em;
  font-size: 14px;
  font-smooth: none;
}

#boot-ready{
  width: 100%;
  z-index: 98;
  position: fixed;
  height: 100vh;
  background: #000;
}

strong{
  font-weight: bold;
}

#boot{
  width: 100%;
  z-index: 99;
  position: fixed;
  height: 100vh;
  background: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4989c596-7ba0-4e17-8b98-7c338208ab64/daobodr-7dc4c4b1-7bd3-4b50-87bb-c987e2c4dfb7.jpg/v1/fill/w_1231,h_649,q_70,strp/windows_98_remastered_startup_screen__4k_wallpaper_by_archi_techi_daobodr-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MjE2MCIsInBhdGgiOiJcL2ZcLzQ5ODljNTk2LTdiYTAtNGUxNy04Yjk4LTdjMzM4MjA4YWI2NFwvZGFvYm9kci03ZGM0YzRiMS03YmQzLTRiNTAtODdiYi1jOTg3ZTJjNGRmYjcuanBnIiwid2lkdGgiOiI8PTQwOTYifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.79KQdANpp8aaMRj99IcG2XE63yJ8608uZ9IfgP2yYrY) no-repeat center -25px / cover;
}

.loading-bar{
  position: absolute;
  width: 100%;
  height: 25px;
  background: linear-gradient(220deg, rgba(85,132,187,1), rgba(202,232,251,1), rgba(85,132,187,1));
  background-size: 200% 100%;
  bottom: 0;
  left: 0;
  animation: loading 3s ease forwards infinite;
}

@keyframes loading { 
    0%{background-position:0% 51%}
    100%{background-position:-200% 51%}
}



#desktop{
  background: teal;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  
}

#toolbar{
  background: #c0c0c0;
  height: 35px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 2px solid #fff;
  
  .toolbar-start-menu{
    float: left;
    
    .start-button{
      background: url(https://win98icons.alexmeub.com/icons/png/windows-0.png) no-repeat 2px center / 24px;
      padding-left: 28px;
      padding-right: 5px;
      height: 29px;
      margin: 2px 3px;
      font-weight: bold;
      border: 2px solid #7c7c7c;
      border-top-color: #fff;
      border-left-color: #fff;
      
      &:hover{
        background-color: darken(#c0c0c0, 10%);
      }
    }
    
    .start-menu-wrapper{
      border: 2px solid #7c7c7c;
      border-top-color: #fff;
      border-left-color: #fff;
      background: #c0c0c0;
      position: fixed;
      left: 2px;
      bottom: 33px;
      width: 190px;
      min-height: 200px;
      
      .start-menu-title{
        height: 100%;
        padding: 5px 5px;
        background: linear-gradient(90deg, #00007b 0%, #0000ff 5%, #00007b 100%);
        color: #fff;
        width: 40px;
        float: left;
        text-transform: uppercase;
        font-size: 20px;
        position: absolute;

        span{
          transform: rotate(-90deg);
          transform-origin: left 0;
          position: absolute;
          left: 10px;
          bottom: -10px;
        }
      }
      
      .start-menu{
        margin-left: 40px;
      }
    }
  }
  
  .toolbar-separator{
    width: 2px;
    height: 26px;
    margin-top: 2px;
    background: #797979;
    float: left;
    border-right: 1px solid #fff;
  }
  
  .toolbar-left{
    float: left;
    padding: 0 5px;
  }
  
  .toolbar-icon{
    background: no-repeat center / auto 20px;
    width: 25px;
    height: 25px;
    border: none;
    margin-top: 3px;
    margin: 3px 2px;
    
    &.ie{
      background-image: url(https://win98icons.alexmeub.com/icons/png/msie1-4.png);
    }
    
    &.outlook{
      background-image: url(https://win98icons.alexmeub.com/icons/png/outlook_express-0.png);
    }
    
    &.desktop{
background-image: url(https://win98icons.alexmeub.com/icons/png/desktop-4.png);
    }
    
    &.channels{
      background-image: url(https://win98icons.alexmeub.com/icons/png/channels-5.png);
    }
  }
  
  .toolbar-right{
    float: right;
    margin: 2px 3px;
    height: 29px;
    border: 2px solid #7c7c7c;
    border-bottom-color: #fff;
    border-right-color: #fff;
    
    .time{
      padding: 6px 10px;
    }
  }
}

.desktop-icons{
  
  .desktop-icon{
    width: 115px;
    height: 100px;
    color: #fff;
    text-align: center;
    background: no-repeat center top;
    padding-top: 55px;
    margin: 10px;
    
    &.my-computer{
      background-image: url(https://win98icons.alexmeub.com/icons/png/computer_explorer-5.png);
    }
    &.my-documents{
      background-image: url(https://win98icons.alexmeub.com/icons/png/directory_open_file_mydocs-4.png);
    }
    
    &.network{
      background-image: url(https://win98icons.alexmeub.com/icons/png/network_cool_two_pcs-0.png);
    }
    
    &.trash-empty{
      background-image: url(https://win98icons.alexmeub.com/icons/png/recycle_bin_empty-4.png);
    }
  }
}

.window{
  border: 2px solid #7c7c7c;
  border-top-color: #fff;
  border-bottom-color: #131313;
  border-left-color: #fff;
  background: #c0c0c0;
  width: 90%;
  max-width: 500px;
  position: fixed;
  top: 25%;
  left: 25%;
  resize: both;
  
  .window-toolbar{
    background: #000080;
    color: #fff;
    padding: 4px;
    font-weight: bold;
  }
  
  .window-buttons{
    position: absolute;
    right: 2px;
    top: 2px;
    
    .window-button{
      background: no-repeat center #ccc;
      border: 2px solid #7c7c7c;
      border-top-color: #fff;
      border-left-color: #fff;
      height: 17px;
      width: 17px;
      float: right;
      margin-left: 2px;
      
      &.close{
        background-image: url(https://win98icons.alexmeub.com/images/close-icon.png);
      }
      
      &.help{
        background-image: url(https://win98icons.alexmeub.com/images/question-icon.png);
      }
    }
  }
  
  .window-tabs{
    overflow: hidden;
    padding-top: 2px;
    
    .tabs-button{
      background: none;
      border: none;
      padding: 5px 8px;
      float: left;
      border-top: 1px solid #fff;
      border-bottom: 1px solid #fff;
      border-radius: 3px 3px 0 0;
      border-right: 2px solid #666;
      margin: 0;
      
      &:first-child{
        border-left: 1px solid #fff;
      }
      
      &.active{
        border-bottom: none;
        padding-top: 7px;
        margin-top: -2px;
      }
    }
  }
  
  .window-content{
    padding: 15px;
    border: 1px solid #fff;
    border-top: none;
  }
  
  .window-wrapper{
    padding: 10px;
    
    fieldset{
      border: 1px solid #7c7c7c;
      padding: 10px;
      position: relative;
      
      &::before {
        content: " ";
        position: absolute;
        z-index: -1;
        bottom: -2px;
        left: 0;
        width: calc(100% + 1px);
        height: calc(100% - 7px);
        border: 1px solid #fff;
      }
      
      legend{
        padding: 0 3px;
        background: #c0c0c0;
      }
      
      select{
        width: 100%;
        margin: 15px 0;
        
        option{
          background: url(https://win98icons.alexmeub.com/icons/png/paint_file-1.png) no-repeat 2px 2px;
          background-size: auto 14px;
          padding: 2px 3px 0 18px;
          vertical-align: middle;
        }
        
        option:first-child{
          background-image: url(https://win98icons.alexmeub.com/icons/png/no2-1.png);
        }
      }
      
      p::first-letter{
        text-decoration: underline;
      }
    } 
  }
  
  .window-actions{
    margin-top: 10px;
    overflow: hidden;
    
    .window-action-button{
      border: 1px solid #131313;
      border-top-color: #fff;
      border-left-color: #fff;
      background: #c0c0c0;
      width: 75px;
      text-align: center;
      padding: 5px 0;
      float: right;
      margin-left: 5px;
    }
  }
}

windows-98.markdown

Windows 98

A Pen by Kevin Falencik on CodePen.

License.