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

Huddle Landing Page - HTML and CSS

bluepersia 275

@bluepersia

Desktop design screenshot for the Huddle landing page with curved sections coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (12)
error

Duplicate id attribute value `font-awesome-5-kit-css` found on the web page.

<link href="https://kit-free.fontawesome.com/releases/latest/css/free-v4-font-face.min.css" media="all" rel="stylesheet" id="font-awesome-5-kit-css">
error

Duplicate id attribute value `font-awesome-5-kit-css` found on the web page.

<link href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" media="all" rel="stylesheet" id="font-awesome-5-kit-css">
error

Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

<img src="images/logo.svg" class="logo">
error

Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

<img src="images/screen-mockups.svg" class="img-mockups container">
error

Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

<img class="icon" src="images/icon-communities.svg">
error

Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

<img class="icon" src="images/icon-messages.svg">
error

Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

<img src="images/illustration-grow-together.svg" class="stretch-width">
error

Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

<img src="images/illustration-flowing-conversation.svg" class="stretch-width">
error

Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

<img src="images/illustration-your-users.svg" class="stretch-width">
error

Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

<img src="images/icon-phone.svg">
error

Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

<img src="images/icon-email.svg">
error

This emailinput element does not have a name available to an accessibility API. Valid names are: label element, title undefined, aria-label undefined, aria-labelledby undefined.

<input type="email">

bluepersia’s questions for the community

Any feedback? :)

Community feedback

P

@emestabillo

Posted

Hi @bluepersia, great job in completing this challenge! Just a few little details - the buttons are missing their box-shadows and it'd be nicer to add hover styles to both the buttons and links in the footer. The second and third main blocks are also not displaying their desktop version of the wave dividers. Hope this helps!

1


bluepersia 275

@bluepersia

Posted

@emestabillo Thank you very much, great feedback.

1

P
Jen 1,230

@En-Jen

Posted

Looks really nice and clean in both desktop and mobile version! For some reason the link to your github repository isn't working so I couldn't look at your code. Just looking at the design though, the only suggestion I have is for the input box consider adding type="email" and required so that it doesn't let the user succeed in pressing the Subscribe button until they have entered a valid email address. Keep up the great work! -Jen

0


bluepersia 275

@bluepersia

Posted

@En-Jen Well spotted, thank you very much for the feedback.

0

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!