Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

My code it working but when i run and test still ”You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.”

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>
            <h2>djibu lab job registration form</h2>
            
            <label for="name">Full Name</label>
            <input type="text" id="name" placeholder="NZAYIHORANA Djibu Pacifique" required>
            
            <label for="email">Email</label>
            <input type="email" id="email" placeholder="nzayihoranadjibu@gmail.com" required>
            
            <label for="position">Position</label>
            <select id="position" required>
                <option value="selected">Select a position</option>
                <option>project manager</option>
                <option >developer</option>
                <option>web design</option>
            </select>
            
            <fieldset class="radio-group">
                <legend>Availability</legend>
                
                <div class="radio-option">
                    <input type="radio" id="full-time" name="availability" value="full-time">
                    <label for="full-time" class="radio-label">Full Time</label>
                
                    <input type="radio" id="part-time" name="availability" value="part-time">
                    <label for="part-time" class="radio-label">Part Time</label>
                    <input type="radio" id="remote" name="availability" value="remote">
                    <label for="remote" class="radio-label">Remote</label>
                </div>
            </fieldset>
            
            <label for="message">Why do you need this job?</label>
            <textarea id="message" placeholder="I know..." required></textarea>
            
            <button type="submit">Send Message</button>
        </form>
    </div>
</body>
</html>

/* file: styles.css */

form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
body{
    background-color: cyan;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}
label {
    font-weight: bold;
    color: #555;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
}
input, select, textarea {
    width: 60%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    transition: all 0.3s ease;
    margin-left: auto;
    margin-right: auto;
}

input:focus, textarea:focus, select:focus {
    border-color: blue;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 0, 255, 0.3);
}

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

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

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

.radio-group {
    border: 2px solid #ddd;
    padding: 5px;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
}

.radio-group legend {
    font-weight: bold;
    color: #555;
    padding: 0 10px;
    text-align: center;
}

.radio-option {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.radio-group input[type="radio"] {
    width: auto;
    margin-right: 10px;
    transform: scale(1.2);
}

.radio-group input[type="radio"]:checked {
    border-color: green;
    background-color: green;
    box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);}

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

.radio-label {
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 5px;
    border-radius: 3px;
}


button {
    padding: 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
    width: 30%;
    margin-left: auto;
    margin-right: auto;
}


button:hover {
    background-color: blue;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
input:focus,textarea:focus{
    border-color: pink;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.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

2

don’t use transform, it takes too long and the color changes after the tests are checking

3

thank you very much. coding is amezing