Frontend Mentor - Shortly URL shortening API Challenge

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

Front-end Style Guide

Layout

The designs were created to the following widths:

  • Mobile: 375px
  • Desktop: 1440px

Colors

Primary

--Cyan: hsl(180, 66%, 49%); --Dark Violet: hsl(257, 27%, 26%);

Secondary

--Red: hsl(0, 87%, 67%);

Neutral

--Gray: hsl(0, 0%, 75%); --Grayish Violet: hsl(257, 7%, 63%); --Very Dark Blue: hsl(255, 11%, 22%); --Very Dark Violet: hsl(260, 8%, 14%);

Typography

Body Copy

  • Font size: 18px

Fonts

  • Family: Poppins
  • Weights: 500, 700