Fylo dark theme landing page

Overview

This is my solution to the fylo dark theme landing page challenge on Frontend Mentor. Frontend Mentor is a platform where developers can learn and improve their frontend development skills alongside other developers by implementing solutions to challenges. Each challenge includes designs (both mobile and desktop), assets, and a style guide to get you started. The rest is up to you!

The challenge

The challenge is to build out this landing page and get it looking as close to the design as possible.

Users should be able to:

• View the optimal layout depending on their device's screen size.
• See hover states for all interactive elements on the page.
• Receive an error message when the form is submitted if the input field is empty & the email address is not formatted correctly.

I don't have access to the premium Figma/Sketch files, so the design is not pixel perfect.

Screenshots

Desktop design

Active states

Mobile design

Built with

• Semantic HTML5 markup
• SCSS
• Flexbox
• CSS Grid

Links

• Live Site URL
• Solution URL

Run locally

Clone the project

  git clone https://github.com/iPavelGeorgiev/fylo-dark-theme-landing-page.git

Go to the project directory

  cd fylo-dark-theme-landing-page

Install dependencies

  npm install

Start the server

  npm run start

Author

• Frontend Mentor - @iPavelGeorgiev
• LinkedIn - @iPavelGeorgiev