Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

been stuck here since in 16. Add an :nth-child pseudo-class to the input elements to style the first input fields differently.

although i have done that buh it keep showing me error. can someone help and check what the problem is.

Your code so far

<!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 action="#" method="post">
            <label for="name">Full Name</label>
            <input type="text" id="name" name="name" placeholder="Enter your full name" required>
            <label for="email">Email</label>
            <input type="email" id="email" name="email" placeholder="Enter your email address" required>
            <label for="position">What job position are you interested in ?</label>
            <select name="position" id="position" >
                <option>Choose The position you want</option>
                <option>Software Engineer</option>
                <option>Data Scientist</option>
                <option>Product Manager</option>
                <option>UI/UX Desiner</option>
                <option>Cybersecurity Specialist</option>
            </select>
            <fieldset class="radio-group">
                <legend>Availability</legend>
                <input type="radio" name="availability" id="full-time">
                <label for="full-time">Full-Time</label>
                <input type="radio" name="availability" id="part-time">
                <label for="part-time">Part-Time</label>
                
            </fieldset>
            <label for="message">How do you think your skills and experience make you a good fit ?</label>
            <textarea name="message" id="message" placeholder="Enter your response..." required></textarea>
            <button type="submit">Submit Application</button>
        </form>
    </div>
</body>

</html>

body {
    background-color: #E2F3F4;
    justify-content: center;
    align-items: center;
    padding: 50px;
    font-family: Arial, sans-serif;
    font-size: 16px;
}

.container {
    align-items: center;
    background-color: whitesmoke;
    border-radius: 10px;
    margin: auto;
    padding: 30px;
    max-width: 500px;
    box-shadow: 0 1px 8px #4e939b;
}
h1 {
    text-align: center;
    color: #55868c;
    font-size: 30px;
    margin-bottom: 20px;
}
input:focus,textarea:focus{
    border-color: #55868c;
}

input[type="text"], select {
    display: block;
    width: 100%;
    height: 100%;
    margin: 5px 0 20px;
    padding: 10px;
    border-radius: 5px;
    border: 2px solid ;
    box-sizing: border-box;
}

input[type="email"] {
    display: block;
    width: 100%;
    margin: 5px 0 20px;
    padding: 10px;
    border-radius: 5px;
    border: 2px solid #ccc;
    box-sizing: border-box;
}   

.radio-group input[type="radio"]:checked {
  border: 2px solid #55868c;
  background-color: #cce5e5;
  box-shadow: 0 0 5px #4e939b;
}


input[type="radio"]:checked + label {
    color: green;
    border-radius: 5px;
    padding: 3px;
}


.radio-group {
    width: 100%;
    margin: 10px 0 20px;
    padding: 10px;
    border-radius: 5px;
    box-sizing: border-box;
}

textarea {
    display: block;
    width: 100%;
    margin: 5px 0 20px;
    padding: 10px;
    border-radius: 5px;
    border: 2px solid ;
    box-sizing: border-box;
    font-size: 16px;
}

label {
    font-size: 16px;
    font-weight: bold;
    color: #417379;
}

button {
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 15px 0;
    border-radius: 5px;
    background-color: green;
    border: none;
    color: whitesmoke;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

button:hover {

    background-color: #55868c;
    border: none;
    color: whitesmoke;
}

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


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

form input:nth-child(2) {
  background-color: #fef3c7;
  border: 2px solid #f59e0b;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form
https://www.freecodecamp.org/learn/full-stack-developer/lab-job-application-form/lab-job-application-form`Preformatted text`

2

no need i just found out the correct syntax is

input:nth-child(1) {
/*styles*/
}

not this

input:nth-child(2) {
/*styles*/
}

but still don’t not while it accept the first syntax. when they say the first input field

1 Like
3

it’s a small bug, we are working on fixing it, right now it accepts only :nth-child(1)

1 Like