Newsletter sign-up

Nice! i haven't done this one yet but looks kind of fun. Your solution look amazing, one thing that i did notice is that your input (input-box) is a bit off and inside of your placeholder you added a big space to indent the text. What you could have done there is to add a padding, your solution currently has this:

HTML:

<input class="input-box" type="text" placeholder=" [email protected]" autocapitalize="none">

CSS:

.input-box {

margin-top: -10px;

margin-bottom: 10px;

opacity: 0.8; }

A Solution:

HTML:

placeholder=" [email protected]" <--- remove the space

CSS:

.input-box {

margin-top: -10px;

margin-bottom: 10px;

opacity: 0.8;

padding-left: 15px; <------------------- add a padding

}

Other than that great job! Hope this helps.

Hey! Very nice job on that styling, it looks very similar to the design the only difference that I can spot is the bold font on button. I also looked through you code, there is no need to give alt descriptions for icons that don't give important context for overall accesibillity and the h4 headings should not be used without heading hierarchy.

Here is some further reading on the topic: https://www.contentkingapp.com/academy/headings/

Overall amazing job on getting your design so close to the original. Good luck on next projects and happy coding!