Skip to content
Submitted over 2 years ago

Base Apparel coming soon page

Samson Sham•140
@samsonsham
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Base Apparel coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Please feel free to comment. Thank your so much!

  1. I am using HTML5 input type email to validate email address. I found it's handy and no regex is needed. Is it a good way to verify email? What is your way to verify email?

  2. I found the trickiest part of this challenge is the position of hero image in mobile and desktop. I can't manage to stick the desktop image right below the logo in HTML file. I have to do it separately and add the desktop image to bottom part of HTML file and control the show/hide with media query. Is there any semantically better solution? Or is it a viable solution?

Community feedback

  • Carlos Guzman•285
    @guztrilloPosted over 2 years ago

    Hey Samson, you did a great solution here! About your asking, here I give you my thoughts:

    1. The way you validated the email using HTML and JavaScript is really interesting and I didn't know that method. In my case, I did the validation using a regex expression. Like you said, your solution is more clean. So I think both ways are good because it satisfies the solution. Remember that there's not only one way to solve something. One thing I could say you is that the prompt function you use to confirm that the email was sent successfully is quite aggressive, because users can't do anything until they click 'ok'.

    2. I changed the position of the hero image modifying thegrid-template and then adding grid-column and grid-row to the elements. Thus, I can reorder the entire template. If you have any doubt, you can review my solution or send me a message.

    I hope this can help you.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord