Design a Contact Form - Design a Contact Form

HTML-CSS
1

Tell us what’s happening:

Points 19, 20 and 21 are not met, but i dont know why. all labels have a margin and font, and all inputs and textarea have width ,padding and
margin on the bottom. English isnt my first language so maybe im missing something..

    1. Your labels should have a margin and font color.
    1. Your input elements should have a width, padding, and a margin on the bottom.
    1. Your textarea element should have a width, padding, margin on the bottom.

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">
</head>

<body>
    <div class="form-container">
        <form>
            <h2 class="title">Contact Us</h2>
            <label for="name">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="message">Message: </label>
            <textarea
            id="message"
            name="message"
            required
            placeholder="Enter message..."></textarea>

            <button type="submit">Submit</button>


        </form>
    </div>
</body>

</html>

/* file: styles.css */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #ACE9F6;
  font-family: arial;
}

.form-container {
  background-color: white;
  border-radius: 10px;
  text-align: center;
  padding: 10px;
  width: 290px;
}

form {
  display: flex;
  flex-direction: column;
  height: 350px;
}

input, textarea {
  max-width: 100%;
  padding: 5px;
  margin-bottom: 20px;
}

label {
  margin-bottom: 3px;
  color: #2F4F4F
}

textarea {
  max-width: 100%;
  padding: 15px;
  margin-bottom: 25px;
}

button {
  background-color: #006400;
  color: white;
  font-size: 1.1em;
  width: 25%;
  margin: 0 auto;
  border-radius: 5px;
  padding: 5px 5px;
}

button:hover {
  background-color: #008000;
  text-decoration: underline;
  cursor: pointer;
}

Your browser information:

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

Challenge Information:

Design a Contact Form - Design a Contact Form

2

It does say “margin” not “margin-bottom”

Examine the other properties just as literally.

1 Like
3

thanks that was it! changed the margins around

1 Like