Design a Contact Form - Design a Contact Form

HTML-CSS
1

Tell us what’s happening:

I cannot fit the step "20"as follows:

  1. Your input elements should have a width, padding, and a margin on the bottom.

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">
    <link rel="stylesheet" href="styles.css">
    <title>Contact Form</title>
</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 */
body {
    background-color: #f4f4f4;
    min-height: 100vh;
    margin: 0;
    padding-top: 20px;
    box-sizing: border-box;
}

.form-container {
    background-color: #f0f0f0;
    border-radius: 8px;
    padding: 20px;
    width: 400px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 50px auto;
}

label {
    display: block;
    margin-bottom: 5px;
    color: #333;
    font-weight: bold;
    margin: auto;
}

textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    box-sizing: border-box;
    resize: vertical;
    min-height: 100px;
}

input[type="text"]{
    width: 100%;
    /* Ocupa a largura total disponível */
    padding: 10px;
    /* Espaçamento interno para o texto */
    margin-bottom: 15px;
    /* Espaçamento abaixo do campo */
    box-sizing: border-box;
}

input[type="email"]{
    width: 100%;
    /* Ocupa a largura total disponível */
    padding: 10px;
    /* Espaçamento interno para o texto */
    margin-bottom: 15px;
    /* Espaçamento abaixo do campo */
    box-sizing: border-box;
}


button {
    font-size: 18px;
    background-color: #007bff;
}

button:hover {
    background-color: #0056b3;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Challenge Information:

Design a Contact Form - Design a Contact Form

2

the test is not expecting the attribute selector, if you style all input elements together it should work

3

Thanks for the support. But, this is not working yet!. See below my currently CSS.

body {
    background-color: #f4f4f4;
    min-height: 100vh;
    margin: 0;
    padding-top: 20px;
    box-sizing: border-box;
}

.form-container {
    background-color: #f0f0f0;
    border-radius: 8px;
    padding: 20px;
    width: 400px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 50px auto;
}

label {
    display: block;
    margin-bottom: 5px;
    color: #333;
    font-weight: bold;
    margin: auto;
}

textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    box-sizing: border-box;
    resize: vertical;
    min-height: 100px;
}

input[type="text"],
input[type="email"]
{
    width:100%;
    padding:10px;
    margin-bottom:15px;
    box-sizing: border-box;
}

button {
    font-size: 18px;
    background-color: #007bff;
}

button:hover {
    background-color: #0056b3;
}
4

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

5

It looks like there is a misunderstanding on the suggestion provided for you here

These are attribute selectors

If you change that to only target the input element, not specific types of inputs, then it will pass.

hope that helps

1 Like
6

thanks! it works. Solution as simple as possible!!