Huddle landing page with curved sections

This is my solution to the huddle landing page with curved sections challenge on Frontend Mentor. Frontend Mentor is a platform where developers can learn and improve their frontend development skills alongside other developers by implementing solutions to challenges. Each challenge includes designs (both mobile and desktop), assets, and a style guide to get you started. The rest is up to you!

Table of contents

• Overview
  • The challenge
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Run locally
• Author
• Acknowledgments

Overview

The challenge

The challenge is to build out this huddle landing page with curved sections and get it looking as close to the design as possible.

Users should be able to:

• View the optimal layout depending on their device's screen size.
• See hover states for all interactive elements on the page.
• Receive an error message when the form is submitted if the input field is empty & the email address is not formatted correctly.

I don't have access to the premium Figma/Sketch files, so the design is not pixel perfect.

Screenshots

Desktop design

Active states

Mobile design

Links

• Live Site URL
• Solution URL

My process

Built with

• Semantic HTML5 markup
• SCSS
• Flexbox
• Mobile-first workflow

What I learned

I found a new accessibility-friendly way to hide content using the following snippet.

.visually-hidden {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
}

Useful resources

1. Choose license - A very useful website that helps you choose the right license for your projects.
2. No license - A short article that explains what we can expect from a publicly published project that does not have a license.

Run locally

Clone the project

  git clone https://github.com/iPavelGeorgiev/huddle-landing-page-with-curved-sections.git

Go to the project directory

  cd huddle-landing-page-with-curved-sections

Install dependencies

  npm install

Start the server

  npm run start

Author

• Frontend Mentor - @iPavelGeorgiev
• LinkedIn - @iPavelGeorgiev