Base Apparel coming soon page

Community feedback

• 

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted over 2 years ago

  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 :-)

  Marked as helpful

  1

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @emestabillo I will take a look at these and try them out, thank you for the feedback!

  1
• 

  Shafiqul Islam Khan•200

  @ArifKhanEverPosted over 2 years ago

  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.

  1

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @ArifKhanEver Didn't pay attention, will take a look. Thanks!

  0
• 

  Abhishek Gulab Bhikule•200

  @Bhikule19Posted almost 2 years ago

  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.

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 1 year ago

  @Bhikule19 Thanks for noting that!

  0
• 

  Victor Eleanya•620

  @mrvicthorPosted over 2 years ago

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

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @mrvicthor Thanks!

  0
• 

  Hamza Abdirashid•100

  @hamzaabdePosted over 2 years ago

  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.

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @hamzaabde Thank you for the feedback

  0
• 

  P

  Vander Santos•1,750

  @vandermsPosted over 2 years ago

  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 .

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @vanderms I will take a look, thank you!

  0
• 

  Jannie Hansen•110

  @Jawha3Posted over 2 years ago

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

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @Jawha3 I will take a look. Thanks!

  0
• 

  Kasra Tabrizi•300

  @KasraTabriziPosted over 2 years ago

  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!

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @KasraTabrizi I will check it out. Thanks!

  0