Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

assalam o alaikom
i forgot element and attribute every next day any solution

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>

            <!-- Name -->

            <label for="name">Full Name:</label>

            <input type="text" id="name" required><br>

    

            <!-- Email -->

            <label for="email">Email:</label>

            <input type="email" id="email" required><br>



            <!-- Position -->

            <label for="position">Desired Position:</label>

            <select id="position">

                <option value="dev">Junior Developer</option>

                <option value="designer">UI/UX Designer</option>

                <option value="pm"> IT Project Manager</option>

            </select>

            

            <!-- Availability -->

            <fieldset class="radio-group">

                <legend>Availability </legend>



                         <!-- Full time -->

                <input type="radio" id="full-time" name="availability">

                <label for="full-time">Full-Time</label>

                

                        <!-- Part Time -->

                <input type="radio" id="part-time" name="availability">

                <label for="part-time">Part-Time</label>

            </fieldset>



            <!-- Motivation -->

            <label>Why do you want this job?</label><br>

            <textarea id="message" required>Write your motivation</textarea><br>



            <!-- Submit button -->

            <button type="submit">Submit</button>

        </form>

    </div>

</body>

</html>

/* file: styles.css */
input:focus, textarea:focus {
  border-color: blue;
}

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

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

button:hover {
  background-color: pink;
}

/* Style when radio is checked */
.radio-group input[type="radio"]:checked + label {
  color: cyan; /* ✅ use 'color', not 'text-color' */
}

/* Optional: visual feedback for radio itself */
.radio-group input[type="radio"]:checked {
  border-color: brown;
  background-color: yellow;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Example of first input special styling */
input:first-of-type {
  background-color: lime;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Hi there and welcome to the forum!

Your solution works from my end. Please try one of the following steps to move forward.

Click on the “Reset” step button and force a refresh of your page with CTRL + F5 if you’re on Windows then try to paste the code in again. On other systems, please follow the instructions here.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

or - Turn off high contrast themes on Windows (from accessibility settings menu)

I hope one of these will work for you.