Fylo Dark Theme Landing Page

Table of contents

• Overview
  • The objective
  • Screenshot
• My process
  • Built with
  • What I learned

Overview

The objective

• Combine my HTML and CSS skills to create a front-end landing page. Implement components using CSS Grid skills to ensure the page is responsive.

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page

Screenshot

Lighthouse Test Screenshot

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid

What I learned

From this challenge I learned more about CSS Grid and the various properties it has such as grid template columns, rows, and areas. Using these grid properties resulted in all of the components being very responsive further reducing the amount of time spent working with the media queries and adjusting the sizes for different sized screens. I also learned more about how to use background iamges and the correct ways to layout the images behind text and buttons.