Ryan Rabbitt http://a1-ryanrabbitt.glitch.me

This project shows ...

Technical Achievements

• Styled page with CSS: Added rules for body, h2, img, hr, li, selectors. body's background color + margins are changed. The background color is also changed with the hide() function. h2 has custom color, font side and text decoration (underline). img has set height, margins and a left float, also a background color for behind the transparent image. hr has custom margin and thicker outline. li has custom bullet points. button has width and height to fit screen, absolute positioning, and transparent background. It also has a z-index of 10 so it is selectable over the screensaver div.
• Added class selectors: Added classes + styles for header, container-box, and icon. Also added ids + styles for box-1, box-2. .container-box has custom borders to mimic Windows 95 windows, margin for spacing between boxes, + background color. .header has custom width + height, background color, font weight and padding. .icon has the same borders as .container-box, plus a set width + height, margins, and vertical + horizontal align to center the x. Vertical align was achieved using a line-height equal to the height of the div. #box-1 and #box-2 have padding, plus box-1 has a set height. #mainPage's background color + font is changed, also added fade in animation on load. Also added max-width and margins for center alignment. This id is for the main page's content. #screensaver's background color is changed, and additionally has a background image gif of the Windows95 pipe screensaver.
• Fade in animation: Added a custom fadeIn animation that runs when the mainPage div is loaded, with the @keyframes annotation to set the opacity at the beginning and end of the animation.
• Screensaver: The screensaver div shows when the page loads. When the screen is clicked, it hides and switches to the mainPage div, as well as changes the body's background color for a smoother transition.
• Additional HTML tags: Added an img and a hr element, as well as a button that switches from the screensaver to the main page.

Design Achievements

• Used the Inconsolata Font from Google Fonts: Imported the Inconsolata font from Google Fonts as the primary font, with Andale Mono and monospace as backup fonts incase the font doesn't load.
• Windows 95 Aesthetic: Mimicked the Windows 95 look with CSS <|:^)