Tell us what’s happening:
- Your labels should have a margin and font color.
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 Us Form</title>
<link rel="stylesheet" href="styles.css"> <!-- Link to your stylesheet -->
</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 {
background-color: #f9f9f9; /* Light gray background color for the form container */
border-radius: 10px; /* Rounded corners for the form container */
padding: 20px; /* Space inside the container */
width: 80%; /* Width of the form container */
margin: 10 auto; /* Centering the form container horizontally */
}
/* Styles for the labels */
label {
margin-bottom: 10px; /* Space below each label */
color: #fff; /* Dark gray font color for labels */
display: block; /* Ensures each label appears on a new line */
}
/* Styles for input fields and textarea */
input, textarea {
width: 100%; /* Full width of the form container */
padding: 10px; /* Space inside the input fields */
margin-bottom: 15px; /* Space below each input field */
box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}
/* Styles for the submit button */
button {
background-color: #007bff; /* Blue background color for the button */
font-size: 16px; /* Font size of the button text */
padding: 10px 20px; /* Space inside the button */
border: none; /* Removes the default border */
border-radius: 5px; /* Rounded corners for the button */
cursor: pointer; /* Pointer cursor on hover */
}
/* Hover effect for the button */
button:hover {
background-color: #0056b3; /* Darker blue color when the button is hovered */
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36 Edg/132.0.0.0
Challenge Information:
Design a Contact Form - Design a Contact Form
