Card Ping Soon Page (Css Flexbox ▪🍬▪ )

Community feedback

• 

  Tryt4n•960

  @Tryt4nPosted over 1 year ago

  Between width of 480px to around 700px on your social link icons narrow because you use width: 30% on .footer__social. Also for <form> element you could add some padding-inline because below 580px elements inside touch the edges and personally I would add text-wrap: nowrap; on your button because between 480-570px text is wrapping. For image you could change it so that it is always the same width as the form.

  For accessibility:

  • text "soon" in your h1 could not be visible for assestive technologies. Instead of that you could wrap it in strong or b or just leave it as it is and add <span class="visually-hiden>soon</span>
  • label is empty. You could add span with visually-hiden class and some text like "email"
  • add aria-errormessage="some_id" to your input
  • to you warning text add this id and aria-live="assertive"
  • © symbol is the same as &copy ; but without space between letter "y" and sign ";"
  • you could add some description for your footer navigation like aria-label="social links navigation" because in real website it would be probably just a component and there would be another nav elements

  Personally I would change span for p with your text "Subscribe and get notified. p is for paragraph and span is just like div but it has display: inline;

  Marked as helpful

  1