Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

TEST #18
I can see my code changing the color of the labels as it should, but the code still doesn’t pass the test #18. i have tried many changes but nothing has helped.

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">
    <link rel="stylesheet" href="styles.css">

    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comic+Relief:wght@400;700&display=swap" rel="stylesheet">

    <title>Job Application Form</title>
</head>

<body>
<div class="container">
    <form action="/submit" method="POST">

        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name" required><br><br>

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

        <label for="position">Choose your Position:</label><br>
        <select id="position" name="position" required>
            <option value="engineer">Software Engineer</option>
            <option value="advisor">Financial Advisor</option>
            <option value="broker">Stock Broker</option>
        </select><br><br>

        <fieldset class="radio-group">
            
            <legend>Availability</legend>

            
            <input type="radio" name="availability" value="full" id="full" class="radio-group">
            <label for="full">
            Full Time
            </label><br><br>

            
                <input type="radio" name="availability" value="part" id="part" class="radio-group">
            <label for="part">
            Part Time
            </label><br><br>

            
                <input type="radio" name="availability" value="sesonal" id="sesonal" class="radio-group">
            <label for="sesonal">
            Sesonal
            </label><br><br>

        </fieldset><br><br>

        <label for="message">Your Message:</label><br>
        <textarea id="message" name="message" rows="4" cols="40" required></textarea><br><br>

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

    </form>
</div>
</body>
</html>

/* file: styles.css */
body {
  font-family: american typewriter, arial, helvetica, sans serif, comic relief;
  font-size: 0.75em;
  background-image: url('https://treeera.com/wp-content/uploads/2021/09/MountainForests-AB-800x518.jpg');
  background-repeat: no-repeat;       /* Prevent tiling */
  background-size: cover;             /* Scale image to cover the entire screen */
  background-position: center center; /* Center the image */
}

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

input:focus, textarea:focus {
  border-color: blue;
  outline: none;
}

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

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

button:hover {
  background-color: black;
  color: white;
}


.radio-group label {
  padding: 10px 10px;
  margin: 5px;
  transition: all 0.3s ease;
  
}


.radio-group input[type="radio"]:checked {
  border-color: green;
  background-color: green;
  accent-color: red;
  box-shadow: 0 0 10px gray;
  
}


.radio-group input[type="radio"]:checked + label {
  color: red;
  box-shadow: 0 0 10px gray;
  padding: 5px;
  border-radius: 5px;
  background-color: #9eebf7;
}


input:first-of-type {
  
  box-shadow: 0 0 10px gray;
}

.container {
  width: 50%;
  margin: 0 auto 0 auto;
  border: 1px solid black;
  padding: 10px;
  background-color: white;
}

textarea {
  width: 85%;
}

fieldset {
  width: 80%;
}

input[type="text"], input[type="email"] 
{
  width: 60%;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:140.0) Gecko/20100101 Firefox/140.0

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

The tests do not like that transition.

2 Likes
3

thank you!
you were spot on. i was stuck in that error for a while.

1 Like