https://github.com/code-beaker/fylo-dark-production-build-code-beaker

https://github.com/code-beaker/fylo-dark-production-build-code-beaker

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/code-beaker/fylo-dark-production-build-code-beaker
• Owner: Code-Beaker
• Created: 2024-04-25T08:26:58.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-04-25T08:55:40.000Z (9 months ago)
• Last Synced: 2024-04-25T09:36:31.079Z (9 months ago)
• Language: HTML
• Size: 850 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](<./fylo-home-dark.netlify.app_(Samsung%20Galaxy%20S20%20Ultra).png>)

### Desktop preview 🖥

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

![Mobile Preview Image](./fylo-home-dark.netlify.app_.png)

## Tools and tech 🛠

Here's what I used for creating this amazing project!

- ![VSCode](https://img.shields.io/badge/Visual%20Studio%20Code-007ACC.svg?style=for-the-badge&logo=Visual-Studio-Code&logoColor=white)

- ![Vite](https://img.shields.io/badge/Vite-646CFF.svg?style=for-the-badge&logo=Vite&logoColor=white)

- ![SCSS/SASS](https://img.shields.io/badge/Sass-CC6699.svg?style=for-the-badge&logo=Sass&logoColor=white)

- ![Firefox](https://img.shields.io/badge/Firefox%20Browser-FF7139.svg?style=for-the-badge&logo=Firefox-Browser&logoColor=white)

- ![Javascript](https://img.shields.io/badge/JavaScript-F7DF1E.svg?style=for-the-badge&logo=JavaScript&logoColor=black)

```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/)

- Netlify Deploy: [**PRODUCTION BUILD**](https://fylo-home-dark.netlify.app/)