Frontend Development Workflow of Ping Single Coming Soon Page

Hello @tloxiu!

Great to see another challenge solution from you! A few suggestions from me:

• Move header and footer out of main. The main content area consists of content that is directly related to or expands upon the central topic of a document or an application where header/footer excludes contant that is repeated across a set of documents such as site navigation links, logos, banners etc which means we can consider them as adjacent content.
• Your .logo is decorative so keep your alt text empty and add aria-label attribute to your anchor instead so non-sighted users know where this link is pointing to. Something like aria-label="Ping - Home" would be nice.
• You should add label for your input and hide it with some sr-only class. The <label> element represents a caption for your input.
• .social-medias is clearly a navigation. Nav element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents which is true in your case. Change div tag to <nav> and next you should wrap your links inside unordered-list <ul>. Add aria-label attributes to your links to announce where those links are pointing to non-sighted users.
• You're using broad names for color variables within your css. Try to make them more descriptive so you can use them easier within your code. Each color have its own name so instead prefix them with --c- or --clr- like --c-blue, --c-blue-pale it will be easier for you to write code since if you start typing --c it will display you all colors and then if you have different variables for maybe fonts, background etc they'll be grouped like --c-, --bg-, --font- etc.
• Let's take a look at input and button elements. You don't want to make width of your input using padding. Instead remove all paddings values from .email-input and set it to padding: 1rem for now (you can modify it later to fit design). Next, add max-width: 350px to allow your input to take 100% width and limit it at 350px so it wont grow bigger. Next, remove padding from button for now. You want your button to take 100% height of input, and space that is left within container. To do so, just add flex: 1 property to your button so it stretches full avaible width and height. As you can see now your button lacks of height on mobile resolution. You need to match height of input so this is where you add padding: 1rem just like you add to your input.

Have fun!

A few suggestions? On the input element, you have unnecessary padding that looks great, but when the user types a long email, it cuts off, while there is so much space on the right. Try reducing the padding and increasing the width.

One more thing: take the header and footer tags out of the main.

The responsiveness is just marvelous. 🤝🎉😊 I love it