Design a Contact Form - Design a Contact Form

HTML-CSS
1

Tell us what’s happening:

Steps 20 and 21 are frustrating me badly! it says give input and textarea a bottom margin, and i gave it to them, yet nothing changed and i still got it “Wrong”. And my button element very clearly has a background color, so why isn’t step 21 solved?

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' />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>

    <body>
        <div class="form-container">
            <form method="post">
                <h2>Form</h2>
                <img src="https://tse4.mm.bing.net/th/id/OIP.VAlFrLxuSB9RqhCPDqItpAHaFc?cb=iwc2&pid=ImgDet&w=203&h=148&c=7" />
                
                <label for="name">Write Your Name<input type="text" required id="name" name="Name" /></label>

                <label for="email">Write Your Email<input type="email" required id="email" name="Email" /></label>
                
                <label for="notes">Give us some notes<textarea rows="7" required id='notes' name="Notes"></textarea></label>
                
                <button type="submit">Submit</button>
            </form>
        </div>
    </body>

</html>


/* file: styles.css */
* {font-family: sans-serif;}
body {
  background-image: linear-gradient(90deg, yellow, orange);
}
.form-container {
    background-color: white;
    margin: auto;
    width: 400px;
    border-radius: 10px;
    padding: 4px;
}
h2 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 5px;
}
h3 {margin-left: 6px;}
input, textarea, img, button {
    display: block;
    margin: 4px auto;
    padding: 4px;
    width: 93%;
    border-radius: 10px;
}
input {margin-bottom: 4px;}
textarea {resize: vertical;}
button {
    width: 200px;
    margin-top: 8px;
    transition: transform ease 0.3s, background-color ease 0.3s;
    background-color: whitesmoke;
    font-size: 24px;
}
button:hover {
    background-color: yellow;
    transform: scale(1.3);
}
label {
    margin: auto;
    color: black;
}

Your browser information:

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

Challenge Information:

Design a Contact Form - Design a Contact Form

2

I delete the img and button type selector and I passed with your code.

By the way, your button type selector is repeating.There might be a conflict.

3

it worked! but why though? it doesn’t make sense really.

4

Maybe the test is a little bit too strict? :thinking: