Frontend Mentor - Fylo dark theme landing page solution

This is a solution to the Fylo dark theme landing page challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author
• Usage
• Available Scripts

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

• Solution URL: https://github.com/Abuu998/fylo-dark
• Live Site URL: https://site-fylo-dark.netlify.app/

My process

Built with

• Semantic HTML5 markup
• tailwindcss - v4
• Flexbox
• CSS Grid
• Mobile-first workflow
• Solidjs - JS library
• Solid Icons - Icons for Solidjs
• TypeScript

What I learned

As someone who try to make my app perfect - if there is such thing as perfect :-D - , i am pretty happy how it tourned out expecialy the "Get Early Access" section of the bottom.

I liked the experience i gained while searching and trying to make it work.

I made it with Typescript because i feel like i want to use it in all my projects. and making challenges like these make me learn more.

Continued development

I want to continue learning Typescript and using it more often.

Author

• Frontend Mentor - @Abuu998
• Twitter - @abu0998
• Github - @Abuu998

Usage

$ npm install # or pnpm install or yarn install

Available Scripts

In the project directory, you can run:

npm run dev

Runs the app in the development mode.
Open http://localhost:5173 to view it in the browser.

npm run build

Builds the app for production to the dist folder.
It correctly bundles Solid in production mode and optimizes the build for the best performance.