https://github.com/code-beaker/huddle-page-curved-sections-code-beaker

A Frontend Mentor Project | Huddle Landing Page with Curved Sections
https://github.com/code-beaker/huddle-page-curved-sections-code-beaker

css frontendmentor-challenge html huddle-landing-page js responsive-website validator

Last synced: about 1 month ago
JSON representation

A Frontend Mentor Project | Huddle Landing Page with Curved Sections

• Host: GitHub
• URL: https://github.com/code-beaker/huddle-page-curved-sections-code-beaker
• Owner: Code-Beaker
• Created: 2024-05-29T04:41:20.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-06-09T17:44:41.000Z (7 months ago)
• Last Synced: 2024-06-10T02:45:21.033Z (7 months ago)
• Topics: css, frontendmentor-challenge, html, huddle-landing-page, js, responsive-website, validator
• Language: SCSS
• Homepage: https://huddle-page-curved-sections-code-beaker.vercel.app
• Size: 967 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Huddle Landing Page with Curved Sections

This is a solution to the **Huddle Landing Page with Curved Sections** challenge from [Frontend Mentor](https://frontendmentor.io)

## Preview

### Desktop Preview

![alt text](image.png)

### Mobile Preview

![alt text](image-1.png)

## Tools and Languages

### Tools

- [Visual Studio Code](https://code.visualstudio.com)

- [Vite](https://vitejs.dev)

- [Brave](https://brave.com)

- [Firefox](https://mozilla.org/firefox)

- [Validator Library](https://www.npmjs.com/package/validator)

### Languages

- Semantic HTML5

- CSS

- SCSS

- JS

## Process

The full command line process is given below

### Create Vite App

```sh

npm create vite@latest -- --template vanilla app

```

```sh

cd app

```

#### Install dependencies and packages

```sh

npm install

npm add sass -D

npm install validator

```

### Import the files with JavaScript

![alt text](image-2.png)

### Preview the website

```

npm run dev

```

## Using Validator

Here's how the Validator library is used in this project.

![alt text](image-3.png)

## Links

- [GitHub Repository](https://github.com/Code-Beaker/huddle-page-curved-sections-code-beaker/)

- [Netlify Deploy](https://huddle-home-curved-code-beaker.netlify.app/) 

- [Vercel Deploy](https://huddle-page-curved-sections-code-beaker.vercel.app/)

[![Netlify Status](https://api.netlify.com/api/v1/badges/dfaf43da-4e30-42d1-8eda-9b75921cd592/deploy-status)](https://app.netlify.com/sites/huddle-home-curved-code-beaker/deploys)