Frontend Mentor - Manage landing page solution

This is a solution to the Manage landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• See all testimonials in a horizontal slider
• Receive an error message when the newsletter sign up form is submitted if:
  • The input field is empty
  • The email address is not formatted correctly

Screenshot

Links

• Solution URL: Github
• Live Site URL: https://manage-landing-page.mehedihasan.pro/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Tailwind CSS
• Javascript

What I learned

It is my first project using Tailwind CSS. Only classbased CSS writing is completely new for me. I found it very interesting. I struggled here to set the background capsule shape object according to example desgin in both desktop and mobile mode.

To see how you can add code snippets, see below:

<h1>Some HTML code I'm proud of</h1>

.proud-of-this-css {
  color: papayawhip;
}

const proudOfThisFunc = () => {
  console.log("🎉");
};

If you want more help with writing markdown, we'd recommend checking out The Markdown Guide to learn more.

Note: Delete this note and the content within this section and replace with your own learnings.

Author

• Website - Mehedi Hasan
• Frontend Mentor - @mytaison
• Twitter - @mytaison

Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.