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

HTML, CSS

AlbertoIJS 135

@AlbertoIJS

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


  • I couldn't get the "we're" with the right font-weight.
  • I did the mobile version with chrome dev tools and it seems to work right but when i re-size the window manually it doesn't work for me.

Any suggestions are appreciated.

Community feedback

@MohamedElidrissi

Posted

I notice that you made the heading text uppercase in your HTML, that will make screen readers spell it word by word(as if its an abbreviation), you should apply a text-transform: uppercase in CSS instead.

1

AlbertoIJS 135

@AlbertoIJS

Posted

I didn't know that, thanks for mention it

0
P
Matt Studdert 13,611

@mattstuddert

Posted

Hi Alberto, great work on this challenge! To answer your questions:

  • You're currently loading in 300i for Josefin Sans, which is the italic version. If you remove the i you'll be loading in the regular collection for that font-weight.
  • Your media query for mobile is currently max-width: 375px, which effectively switches the layout to desktop at 376px or larger. So you would need to increase that breakpoint and have a play around with different values depending on what looks best.

I hope these pointers help. Keep up the great work! 👍

1

AlbertoIJS 135

@AlbertoIJS

Posted

Thank for the feedback, i'm currently fixing the font weight. I never realized i was importing the wrong one. Since that challenge I've been playing around with the @media query so i'm also fixing the responsive part.

0
AlbertoIJS 135

@AlbertoIJS

Posted

Any tips and how to get the gradient? I've tried the linear-gradient but it only gets one color right even though i've found that you can have 2 gradients.

0
P
Matt Studdert 13,611

@mattstuddert

Posted

@AlbertoIJS the gradient for the submit? I think it looks fine as it is!

0

@tomwanderer

Posted

Hey there! I was looking at your code and I couldn't find where you put the arrow icon but it still happens right at the submit button. Could you elaborate? Thank you!

0

AlbertoIJS 135

@AlbertoIJS

Posted

I fixed that, i didn't even notice that there was an icon for that. Thanks to you i notice there was an svg. I had a ">" as the icon image. I changed it, check it out!

1

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