frontend-mentor-Fylo-dark-theme-landing-page-Project — HTML 企业官网模板

SHA-256: b341dab4df00be1682946f29d4ba1c7c9127747665e91baad73d23f0d4af0bac

2026-10-13T07:55:13.138Z

# Frontend Mentor - Fylo dark theme landing page solution

This is a solution to the [Fylo dark theme landing page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/fylo-dark-theme-landing-page-5ca5f2d21e82137ec91a50fd). Frontend Mentor challenges help you improve your coding skills by building realistic projects. 

## Table of contents

- [Overview](#overview)
  - [The challenge](#the-challenge)
  - [Screenshot](#screenshot)
  - [Links](#links)
- [My process](#my-process)
  - [Built with](#built-with)
  - [What I learned](#what-i-learned)
  - [Continued development](#continued-development)
  - [Useful resources](#useful-resources)
  - [AI Collaboration](#ai-collaboration)
- [Author](#author)
- [Acknowledgments](#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

preview desktop: ![Preview Desktop](./images/Frontend-Mentor-Fylo-landing-page-with-dark-theme-and-features-grid-preview-desktop.png)

preview mobile: ![Preview Mobile](./images/Frontend-Mentor-Fylo-landing-page-with-dark-theme-and-features-grid-preview-mobile.png)

### Links

- Solution URL: [solution URL](https://github.com/arshiya-sr/frontend-mentor-Fylo-dark-theme-landing-page-Project)
- Live Site URL: [live site URL](https://arshiya-sr.github.io/frontend-mentor-Fylo-dark-theme-landing-page-Project/)

## My process

### Built with

- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- media queries
- Deepseek AI
- Github copilot AI

### What I learned

This project was very useful structurally because it's an almost realistic landing page, and overall it helped improve my work and styling in various ways.

### Continued development

Things I'll do in the future on this project:
- optimize the code overall.
- move the layout code to a new CSS file named layout.css . 
- Improve the tablet breakpoint range.

### Useful resources

- [Deepseek AI](https://www.deepseek.com) - DeepSeek has helped me immensely on my learning journey—it's far better to use it for truly understanding concepts than for just getting answers and bypassing the work. And it helped me a lot more on this project.
- [github copilot AI](https://github.com/copilot) - GitHub Copilot has also been a huge help, especially when it comes to coding.
- [freecodecamp free online course](https://www.freecodecamp.org) - I gained my web development knowledge through freeCodeCamp, which is completely free and packed with resources: theory, labs, workshops, quizzes, and even review projects that help you master each topic. This project itself comes from freeCodeCamp, so a big thank-you to them.

### AI Collaboration

- What tools did you use (e.g., ChatGPT, Claude, GitHub Copilot)? i only used deepseek and github copilot AI a lot.
- How did you use them (e.g., debugging, generating boilerplate, brainstorming solutions)? i used it to help me understand the structure and debug small pieces of codes. also github copilot helped me nearly in all of it. It's really good.

## Author

- github - [my github](https://github.com/arshiya-sr)
- Frontend Mentor - [my frontend mentor](https://www.frontendmentor.io/profile/arshiya-sr)
- FreeCodeCamp - [my freecodecamp](https://www.freecodecamp.org/arshiya_sr)

## Acknowledgments

thank to Frontend Mentor for this awesome Project/Challenge, and thank to you for paying your time and attention to my project. I'd be so happy to receive your advice and recommendations.
Hope you a good day ♥