Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

Why are ,my numbers 15 and 16 not passing the test?

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>Job Application Form</title>
    <link rel="stylesheet" href='styles.css'>
</head>
<body>
<div class="container">
    <form>
        <label for="name">Name</label>
        <input type="text" id="name" name="name">
         <label for="email">Email</label>
        <input type="email" id="email" name="email">
     <label for="position">Select Position:</label>   <select id="position"name="position" required> <option value="position" disabled selected>Select a position</option><option id="position">Junior Developer</option>
<option id="position">Senior Developer</option>
<option id="position">Product Manager</option>
<option id="position">Mobile App Developer</option></select>


        <fieldset class="radio-group" name="availability">
             <label for="full-time">Full-Time</label>
        <input type="radio" id="full-time" value="full-time" name="availability">

        <label for="part-time">Part-Time</label>
        <input type="radio" id="part-time" value="part-time" name="availability">
        </fieldset>
        <label for="message">Why do you want to work with us?</label>
        <textarea id="message">Tell us why.
        </textarea>
        <button type="submit">Submit</button>
    </form>
</div>
</body>
</html>

/* file: styles.css */
body{background-color:white; display:block; margin:5%; padding:auto;font:arial;}
.container {text-align:left; background: #f4f4f4; padding:5%;border-radius:10px black;box-shadow:2px purple;}
form{display: flex;flex-direction: column;
}
input, select, textarea {
    margin-top: 5px;
    padding: auto;
    border: 2px solid;
    border-radius: 5px;
    outline: none;
}
input:focus, textarea:focus{border-color:yellow;}
input:invalid, select:invalid, textarea:invalid{border-color:red;}
input:valid, select:valid, textarea:valid{border-color:green;}
.radio-group input[type="radio"]:checked + label {border:1px blue;background-color:pink; color:brown;box-shadow:0 4px 2px grey;}

button{margin:15px 60px;padding:3px;}



button:hover{background-color:orange;}
input:nth-child(1) {border-radius:15px purple;}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

  • The border color, background color and a box shadow should be on the radio button element.

  • Your radio button label selector is not correct. Your labels are before the element, not after it. So + is not selecting the correct thing. The easiest would be to just move the label to after the radio element.

3

Thanks so much. It worked