Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

The pseudo-class criteria for including a color change for the associated label is stopping me from advancing. I also can’t see the problem with the code.

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 class="title center">Job Application Form</h1>
        <form>

            <label for="name" class="contact-name">Full Name: </label>
            <input
            type="text"
            id="name"
            name="contact-name"
            required
            placeholder="E.g., Jane Doe"
            />


           <label for="email" class="contact-email">Email: </label>
            <input
            type="email"
            id="email"
            name="name"
            required
            placeholder="E.g., JaneDoe@gmail.com"
            />

            <label for="position" class="contact-position">Position: </label>
            <select id="position" required><option value="" disabled selected>Select a position</option>
                <option>Developer</option>
                <option>Designer</option>
                <option>Manager</option>
            </select>

            <fieldset class="radio-group">
                <legend>Availability:</legend>
                <input
                id="availability"
                class="availability-radio-btn"
                type="radio"
                name="availability"
                value="full-time"
                checked
                />
                <label for="part-time" class="part-time-availability">Full Time</label>
                
                <input
                id="availability"
                class="availability-radio-btn"
                type="radio"
                name="availability"
                value="part-time"
                />
                <label for="availability" class="part-time-availability">Part Time</label>
            </fieldset>
            
            <label for="message">
               Why do you want this job?
            </label>
            <textarea id="message" name="message" rows="4" cols="50" placeholder="Write your motivation" required></textarea>
        <button class="submit-btn"type="submit">Submit Application</submit>
        </form>
    </div>
</body>
</html>

/* file: styles.css */
body{
  font-family: sans-serif;
  background-color: white;
  color: rgb(34, 33, 33);  
}

.container{
  background-color: whitesmoke;
  width: 80%;
  max-width: 600px;
  border-radius: 10px;
  margin: 20px auto;
  padding: 10px 20px;
  box-shadow: 0 1px 3px rgb(155, 151, 151);  
}

.center{
  text-align: center;
}

fieldset {
  border: 1px solid gray;
  border-radius: 5px;
  margin: 20px 0;
  padding: 20px;
}

fieldset legend {
  font-size: 1.3rem;
  font-weight: 600;
}
label {
  font-size: 1.1rem;
}

label:not(.part-time-availability) {
  display: block;
  margin: 10px 0;
}

input:not(.availability-radio-btn),
textarea {
  background-color: #ffffff1a;
  width: 95%;
  border: 1px solid gray;
  border-radius: 5px;
  padding: 10px;
}


input:focus,
textarea:focus{
  border: 1px solid purple;
}

input:invalid,
select:invalid,
textarea:invalid{
  border: 1px solid red;
}

input:valid,
select:valid,
textarea:valid{
  border: 1px solid green;
}

button:hover{
  background-color: rgb(48, 47, 47);
}

.availability-radio-btn {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  vertical-align: bottom;
}

.radio-group input[type="radio"]:checked{
  border-color: green;
  background-color: green;
  box-shadow: inset 0 0 0 3px white;;
}

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

input:first-of-type {
  border-radius: 10px;
}

.submit-btn {
  cursor: pointer;
  background-color: green;
  color: whitesmoke;
  border: none;
  border-radius: 6px;
  padding: 12px 20px;
  font-size: 1.1rem;
  display: block;
  margin: auto;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

are you sure the label and input element are correctly associated?

you may want to review how to use for attribute

also, you can’t use the same id on multiple elements

3

thank you very much. I will look into that!