/Equalizer-landing-page

Responsive Landing Page built with Semantic HTML5 markup, CSS custom properties, Flexbox and Mobile-first Workflow

Primary LanguageCSS

Equalizer-landing-page

This is a solution to the HTML & CSS Portfolio Project

Project Objective

  • Your challenge is to build out this landing page and get it looking as close to the design as possible.
  • Customer Requirements

Your users should be able to:

  1. View the optimal layout depending on their device's screen size
  2. See hover states for interactive elements All the measurements of width and height are from sketch file.

The challenge

Users should be able to:

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

Screenshot

Desktop

Tablet

Mobile

Links

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-first workflow

What I learned

In this challenge, I learned more about the background property and how to use it to deal with multiple backgrounds (especially the positioning). I also learned about the mobile-first workflow and how to use media queries to make the website responsive.

I also learned how to deploy and a website for the first time using github Pages.

Useful resources

Author