error check with javascript

Hello @Gab-Ferreira, i have seen you solution. you did good job, but i have some notes on you solution.

1. HTML

• your general structure :

  body
   main
    header
     section
      footer
  

could be better for SEO and semantically, the general html layout could be:

body
header--> contains logo (the image).

main --> contains:
	 1. landing text
	 2. subscribe form
	 3. banner image
	 
footer --> contains:
	   1. social media icon
	   2. copyrights
div --> for your attribution

• .texts-container use <h1> heading level instead of <h2>. this will fix you html accessibility issue
• .button-email could be <button type="submit">

1. CSS

• main should have more space in the top and bottom add

  main {
  	padding: 70px 0
  }
  

• for the input you should rest outline and border

  .email-button-container > form > input{
  	outline:none;
  	border 1px solid var(--pale-blue:hsl(223, 100%,88%))
  }
  

• .button-email hover state background-color is very light try use:

  	.button-email:hover{
  		opacity: .7
  	}
  

• icons doesn't work check this issue.
• you can use @media media queries right after the element that need to be responsive instead of writing them all at page's end.

1. JavaScript

• why you add .error class before check if email validation or input value.

sendEmailButton.addEventListener("click", () => {

emailError.classList.add("error");
}
});

• you can use submit event for the form directly. So JavaScript could be:

const emailError = document.querySelector(".email-error");
const form = document.querySelector("form");
const inputEmail = form.getElementById("input-email");
let emailRegex =
  /^(?![_.-])((?![_.-][_.-])[a-zA-Z\d_.-]){0,63}[a-zA-Z\d]@((?!-)((?!--)[a-zA-Z\d-]){0,63}[a-zA-Z\d]\.){1,2}([a-zA-Z]{2,14}\.)?[a-zA-Z]{2,14}$/;

form.addEventListener('submit',(e)=>{
    let inputValue = inputEmail.value.trim();
    if(inputValue ==""){
        e.preventDefault();
        emailError.innerHTML = "Email cannot be empty";
        inputEmail.style.border = "var(--red) 1px solid";
    }else if(!emailRegex.test(inputValue)){
        e.preventDefault();
        emailError.innerHTML = "Please provide a valid email address";
    }
})

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day. Keep coding🚀

Hi there. Your decision looks good, but there are some corrections:

• Icons are still not displayed. In my opinion, it is better not to rely on third-party libraries, so I always use svg sprite. The icons are always on the server and it will not be such a surprise that a third-party library did not work.

• making the button an extraneous element is a bad practice, why don't you just use the input type submit or the button type submit?

• You also need to add an alternative description for the picture. Or hide it with aria-hidden = true.

• Your site is perfectly responsive, but he lacks padding top

I hope my comment will be useful

All the best