Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

Hi there, I’m struggling with step 15 and can’t seem to figure out what the issue is. Would greatly appreciate any help

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">
        <h1>Job Application Form</h1>
            <form>
                <label for="name">Full Name:</label>
                <input type="text" id="name">

                <label for="email">Email:</label>
                <input type="email" id="email">

                <label for="position">Position:</label>
                <select id="position">
                <option value="caretaker">Caretaker</option>
                <option value="cleaner">Cleaner</option>
                </select>

                <fieldset class="radio-group">
                <legend>Availability</legend>
                <input type="radio" id="full-time" name="availability" required>
                <label for="full-time">Full Time</label>
                <input type="radio" id="part-time" name="availability">
                <label for="part-time">Part Time</label>
                </fieldset>

                <label for="message">Why do you want this job?</label>
                <textarea id="message"></textarea>

                <button type="submit" id="submit">Submit</button>  
    </div>
            </fieldset>
    </div>
</body>
</html>


/* file: styles.css */
body {
  background-color: black;
  font-family: arial, sans-serif;
  color: black;
}

.container {
  width: 70%;
  margin: auto;
  text-align: center;
  background-color: white;
}

input:focus, textarea:focus {
  border-color: grey;
}

input:invalid, select:invalid, textarea:invalid {
  border-color: red;
}

input:valid, select:valid, textarea:valid {
  border-color: green;
}

button:hover {
  background-color: grey;
}

.radio-group input[type="radio"]:checked {
  border-color: grey;
  background-color: grey;
  box-shadow: 0 0 0 5px blue;
}

.radio-group input[type="radio"]:checked + label {
  background-color: pink;
}

input:nth-child(1) {
  padding: 5px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3.1 Safari/605.1.15

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Can you please read again the hint and explain what part of your code does what is asked?

1 Like