geminii / fylo-dark-theme-landing

Fylo dark theme landing page frontend mentor challenge

Frontend Mentor - Fylo dark theme landing page solution

This is a solution to the Fylo dark theme landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Getting started
• Author
• Acknowledgments

Overview

The challenge

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

Links

• Live Site URL: Demo

My process

Built with

• ViteJs
• Typescript
• CSS custom properties
• Tailwindcss

What I learned

I learned so many things in this challenge :

• lighthouse improvement (title on link, respect of title element order, ...)
• grid usage about col-span-x
• typescript usage on HTMLInputElement

Continued development

None ideas about to improve this challenge. Let me know your feedbacks if you want any improvements 😇

Getting started

Start the project in local :

npm run dev

Build the project for production :

npm run build

Useful resources

• icones.js.org - It's an amazing website which regroup all of free icons. You can download each of them in differents formats 🚀

Author

• Github - Geminii
• Dev.to - Geminii
• Frontend Mentor - @Geminii

Acknowledgments

Thanks Frontendmentor for this really cool challenge ❤️