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 + font is changed, also added fade in animation on load. Also added max-width and margins for center alignment. 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.
• 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.
• Fade in animation: Added a custom fadeIn animation that runs when the page is loaded, with the @keyframes annotation to set the opacity at the beginning and end of the animation.
• Additional HTML tags: Added an img and a hr element.

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 <|:^)