Base Apparel coming soon page

Hey @catherineisonline, good job at staying true to the design. Just have a few thoughts:

1. I would try increasing the breakpoint to 900px + or so. Still looks a little tight at 801px and the text is almost touching the gutter.
2. On wider widths, the logo starts disappearing. Use an img tag or nest the svg in the header. The logo is such an important part of a page and shouldn't be used as a decorative background image.
3. The error and success messages flashes a little too quickly and should probably stay until the user edits or submits again.
4. The form submit is an interactive element, meaning it implies an action from the user, and therefore should be a button instead of a div. Great job on the hover, I'd add a transition to make it smoother.
5. Minor: looks like input should have a transparent background and label be desaturated red with some opacity.
6. I highly recommend going mobile-first. It's easier to make elements larger than to have them scale down to fit smaller screens. It also often results to less code.

Hope this helps :-)

I think the button has a box-shadow and the colour of the email address shouldn't be black.

I have seen all your awesome solutions. Keep up the good work.

Hey Catherine, The work is amazing, just so you know the placeholder text did not inherit the font family. So to do the trick, you can do the following:- "input::placeholder { font-family: }" This way you give the font family style to the placeholder text too.

well done. The landing page looks cool. Previous comments already gave brilliant suggestions on what to do.

Nice job.

You might consider: 1: Adding adding more border radius to the submit button. 2: Center text horizontally in mobile view. 3: Match background and border color to that of the design (if colors don't match a nice trick will to add opacity or color opacity using the alpha channel of the color function).

Other then that everything looks great.

As always, nice job!

Maybe you should put the input and the 'submit button' inside a form tag. It is more semantic, allows the user to submit the form by pressing enter and you don't need to use a regular expression to check if the input has a valid email.

And to display the custom error message, you could add a 'invalid' event listener to the input.

I made a codepen showing how to implement this: https://codepen.io/vanderms/pen/QWOYLjW .

Looks great Catherine! I agree with the box-shadow which has already been mentioned.

Nice job! I would give a box-shadow to the button and make the input element have a white background color. Other then that, looks great!