Design a Contact Form - Design a Contact Form

HTML-CSS
1

Tell us what’s happening:

i can not fix step 19
19. Your labels should have a margin and font color.
Please, help me. What am i doing wrong?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Contact Form</title>
    <link rel="stylesheet" href="styles.css" />
    <link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet">
</head>

<body>
    <div class="form-container">
        <form>
            <h2>Contact us</h2>
            <label for="name">Your name: </label>
            <input type="text" id="name" name="name" required />

            <label for="email">Email: </label>
            <input type="email" id="email" name="email" required />

            <label for="text">Leave us a message:</label>
            <textarea id="text" name="text" required></textarea> 
            
            <button type="submit">Submit</button>
        </form>
    </div>

</body>

</html>

/* file: styles.css */
body {
 height: 100%;
 margin: 0;
 background: linear-gradient(to top right, #328E6E, #67AE6E, #90C67C, #E1EEBC) fixed;
 padding: 2rem;
 font-family: 'EB Garamond', serif;
 font-size: 20px;

}
.form-container {
  background-color: #FFFCFB ; 
  border-radius: 10px;
  padding: 20px;
  margin: 0 auto;
  width: 300px;

}

form {
  width: 100%;
}

h2 {
  text-align: center;
}

form label {
  display: block; 
  width: 100%; 
  margin: 10px 0; 
  color: black;
  text-align: center;
}

input,
textarea {
  display: block;
  padding: 5px;
  margin-bottom: 10px;       
  width: 100%;
  box-sizing: border-box; 
  border-radius: 5px;
  border: 1px solid black;
}

button {
  background-color: #328E6E; 
  font-size: 16px ;
  padding: 1rem; 
  border: none;
  border-radius: 5px;
  color: #FFFCFB;
  display: block; 
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  cursor: pointer; 
  transition: background-color 0.3s;
}

button:hover {
  background-color: #90C67C;
}

input:valid, textarea:valid {
  border-color: #328E6E;
}

input:invalid, textarea:invalid {
  border-color: red; 
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36

Challenge Information:

Design a Contact Form - Design a Contact Form

2

Hi there and welcome back to the forum!

Why did you use form at first?

1 Like
3

I was thinking because the labels are inside the form.:sweat_smile:
I tried using ChatGPT to help me fix it, but it seems I couldn’t trust it, the AI couldn’t figure out the problem.
I removed the form and then passed the test.
Thank you so much for your reply!:star_struck:

1 Like
4

AI cannot think, they just combine statistically likely phrases, so you have to be careful asking LLMs.

1 Like
5

also AIs don’t know know the particular behaviours of freeCodeCamp tests, the best they can do is guess

1 Like