https://github.com/code-beaker/fylo-dark-production
Fylo Landing Page - Dark
https://github.com/code-beaker/fylo-dark-production
html sass scss static-website vite
Last synced: 10 months ago
JSON representation
Fylo Landing Page - Dark
- Host: GitHub
- URL: https://github.com/code-beaker/fylo-dark-production
- Owner: Code-Beaker
- Created: 2024-04-24T07:23:55.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-24T07:23:59.000Z (almost 2 years ago)
- Last Synced: 2025-02-01T23:34:01.965Z (12 months ago)
- Topics: html, sass, scss, static-website, vite
- Language: HTML
- Homepage: https://fylo-dark-production-code-beaker.netlify.app/
- Size: 632 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Fylo Landing Page - Dark version
This is a solution to the Fylo Landing Page Challenge from [Frontend Mentor](https://frontendmentor.io)
## Preview 🖼
See how it looks on different screens
### Mobile preview 📱
Here's how it looks on Mobile phones:
### Desktop preview 🖥
Here's how it looks on desktop and laptop screens:
## Tools and tech ðŸ›
Here's what I used for creating this amazing project!
- [**Visual Studio Code**](https://code.visualstudio.com) 
- [**Vite**](https://vitejs.dev) - to compile SCSS 
- [**SCSS**](https://sass-lang.com/) 
- [**Mozilla Firefox**](https://mozilla.org/firefox) 
- **Javascript** 👇
```js
import "./scss/style.scss";
```
**Yes, that's all.**
## Process 🗺
### Project Initialization
Initialize a new project with [**Vite**](https://vitejs.dev).
```
npm create vite@latest -- --template vanilla my-app
```
### Installing dependencies
Installing dependencies is essential for vite projects to work. So, the next step is to install them.
```
cd my-app
npm install
```
### Installing SASS package
Without installing this package, we can't compile and run our SASS/SCSS project.
```
npm add -D sass
```
### Cleaning up the folders
I deleted the pre-installed files and created my own. Stored all the images in the `public` directory.
### Running the live preview
```
npm run dev
```
## Links 🔗
- GitHub repository: [**Code-Beaker/fylo-page-dark-code-beaker**](https://github.com/Code-Beaker/fylo-page-dark)
- Vercel Deploy: [PREVIEW BUILD](https://fylo-page-dark-code-beaker.vercel.app/)
- Vercel Deploy: [**PRODUCTION BUILD**]()