Geminii / fylo-dark-theme-landing

Fylo dark theme landing page frontend mentor challenge

Home Page:https://fylo-dark-theme-landing-nine.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

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

Desktop design

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

Acknowledgments

Thanks Frontendmentor for this really cool challenge ❤️

About

Fylo dark theme landing page frontend mentor challenge

https://fylo-dark-theme-landing-nine.vercel.app


Languages

Language:HTML 87.8%Language:TypeScript 5.0%Language:JavaScript 3.6%Language:CSS 3.6%