Design a Contact Form - Design a Contact Form

HTML-CSS
1

Tell us what’s happening:

i give correct answer but is said error can you fix this

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Form</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <div class="form-container">
    <form>
      <h2>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></textarea>

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

</body>
</html>

/* file: styles.css */
/* Form container */
.form-container {
  background-color: #f0f8ff;
  border-radius: 10px;
  padding: 2rem;
  width: 400px;
  margin: 2rem auto;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
}

/* Heading */
h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #333;
}

/* Labels */
label {
  display: block;
  margin-bottom: 0.5rem; /* margin for spacing */
  color: #333;           /* font color */
  font-weight: bold;
}

/* Inputs */
input {
  width: 100%;           /* full width */
  padding: 0.5rem;       /* padding inside */
  margin-bottom: 1rem;   /* spacing below */
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
}

/* Textarea */
textarea {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
  box-sizing: border-box;
  min-height: 100px;
  resize: vertical;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
}

/* Button and submit input */
button,
input[type="submit"] {
  background-color: #0077cc; /* background color */
  color: #fff;
  font-size: 1.1rem;         /* font size */
  padding: 0.7rem 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.3s ease;
}

/* Button hover effect */
button:hover,
input[type="submit"]:hover {
  background-color: #005fa3; /* darker shade on hover */
}

Your browser information:

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

Challenge Information:

Design a Contact Form - Design a Contact Form

2

19. Your labels should have a margin and font color
It asks for margin, but you have have margin-bottom

  • Failed:22. Your button element should have a background color.

  • Failed:23. Your button element should have a font size.

  • Failed:24. Your button element should have a hover effect that changes the background color.

button:hover,

input[type="submit"]:hover {

  background-color: #005fa3;

What if you just tried using the button element, and not an input? You dont have an input with the type “submit” even on the page

3

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.