Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

number 17 is not going through
, please can anyone help check where the fault is

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 href="styles.css" rel="stylesheet">
</head>
<body>
    <h1>Job Application Form</h1>
<div class="container">
    <form>
        <label for="name">Full Name:</label>
        <input type="text" id="name">
        <label for="email">Email:</label>
<input type="email" id="email">
<label for="position">Position:</label>
<select id="position">
    <option>Technical Writer</option>
    <option>Web Developer</option>
    <option>LinkedIn Social Media Manager</option>
    <option>Virtual Assistant</option>
</select>

<fieldset class="radio-group">
    <legend>Availability</legend>
<label for="full-time">Full Time</label>
<input type="radio" id="full-time" name="availability">
<label for="part-time">Part Time</label>
<input type="radio" id="part-time" name="availability">  
         </fieldset>
         <label for="message">Why do you want this job?</label>
         <textarea id="message"></textarea>
         <button type="submit">SUBMIT</button>   
    </form>
</div>
</body>
</html>

/* file: styles.css */
body {
  background-color: lightblue;
  font-family: Arial, sans-serif;
  padding: 0;
}
h1 {
  text-align: center;
}
.container {
  max-width: 90%;
    margin: 5px;
    background-style: none;
  padding: 20px;
  border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
form {
    display: flex;
    flex-direction: column;
}
input, select, textarea {
    margin-bottom: 16px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 16px;
    font-size: 16px;
}
button {
  border-radius: 16px; 
  font-weight: bold;
  height: 40px;
}
input:focus, textarea:focus { 
    outline: none !important;
    border-color: yellow;
    background-color: rgba(248, 204, 204, 0.452);
    box-shadow: 0 0 10px #719ECE   
 }
select:focus { 
    outline: none !important;
    border-color: yellow;
    background-color: rgba(248, 204, 204, 0.452);
    box-shadow: 0 0 10px #719ECE 
 }
 button:hover {
  background-color: green;
  color: white;
}
input:invalid, select:invalid, textarea:invalid {
  border-color: red;
}
input:valid, select:valid, textarea:valid {
  border-color: green;
}
.radio-group input[type="radio"]:checked {
  -webkit-appearance: none;
  border-color: red;
  background-color: rgb(9, 9, 247);
  box-shadow: 0 1px  rgb(180, 180, 6);
  margin-top: 16px;
  border-radius: 50%;
  height: 12px;
  width: 12px;
}
.radio-group input[type="radio"] {
  margin-top: 16px;
  width: 10%;
}
.radio-group input[type="radio"]:checked + label {
  color: grey;
  text-color: grey;
}
label:checked selected {
  color: green;
}
input:first-of-type {
    border-radius: 16px;
}
.radio-group label {
    margin-right: 10px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}
.message {
  padding-top: 16px;
}
input:nth-child(1) {
    border-radius: 8px;
}
fieldset {
  
  border-radius: 16px;
  border-color: green;
  border-width: 1px;
  }

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Can you share the details of test 17 and any feedback or hints?

Please share the section of code that relates to test 17 as well

3

When you visit an online form, do the radio button labels typically come before the radio button?

What is this selector targeting?

4

was just trying to play around with some other code to see if it will work

5
  1. You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.