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

Intro Component With Sign-up Form using HTML, CSS, and JavaScript

@kayegalon

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I would appreciate some feedbacks on my solution in terms of: -accessibility -organization of code -media query for mobile screens

Thank you.

Community feedback

Hyron 5,870

@hyrongennike

Posted

Hi @kayegalon,

Congrats on completing the challenge

To center the content on the page, you can replace your body rule with the following one.

body {
    margin: 0;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    background-image: url("bg-intro-desktop.png");
    background-repeat: no-repeat;
    background-color: hsl(var(--colors-primary-red));
}

and them wrap the title and form div inside a main tag and set a max-width: 1440px this will also fix the issue in the report above I think.

hope this is helpful.

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