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: about 1 month 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 (9 months ago)
• Default Branch: main
• Last Pushed: 2024-04-24T07:23:59.000Z (9 months ago)
• Last Synced: 2024-04-24T13:45:26.945Z (9 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:

![Mobile Preview Image](./screenshot-mobile.png)

### Desktop preview 🖥

Here's how it looks on desktop and laptop screens:

![Mobile Preview Image](./screenshot-desktop.png)

## 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**]()