Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Base Apprel

ASHISH• 130

@drashish77

Desktop design screenshot for the Base Apparel coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Please provide feedback

Community feedback

P
Grace• 27,350

@grace-snow

Posted

Ooh tailwind is giving you some issues here I think... as i resize the screen , the input and button become all stretched out and are misaligned with the section above.

I think you're misusing section element a bit here to be honest... I would call this whole solution a section maybe but not the section within section you have here.

As already suggested, the h1 should all be in one h1 tag. You can use spans within it for styling.

And two important points around the logo: 1) It's not navigation. Even if wrapped in a link, you wouldnt normally place the logo inside a nav element. 2) It's so so so important to give the logo alt text. That's the most important thing on this whole page in fact - what is the name of the product/site. If a user can't know that, the page's purpose fails.

I'd place the email input a button inside a form element too tbh.

I hope these are helpful tips. I'm a bit tired tonight so just bashing them out - i hope I've explained ok for you.

Best of luck with it!

1
P
Dave• 5,245

@dwhenson

Posted

Hi @drahish77 nice job here and looking good. Some small points to consider:

  1. The h1 text should probably be quite a bit bigger on the desktop view, but most importantly I would use a span inside the h1 rather than a separate h3, which doesn't make sense semantically (also its not really good practice to skip a heading level).

  2. You could remove the solid color on the background and try adding the background image using the background-image property in your CSS (if you make the background of your input element transparent, and use :placeholder to add some styles to the placeholder text that would also look nice)

I can't really comment much on the CSS code as I'm not familiar with Tailwind and the CSS file is currently huge! But nice job and keep on coding!

Cheers

0

Please log in to post a comment

Log in with GitHub
Discord logo

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