Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

Hey everyone,
I wanted to check if there might be a bug with this exercise. I’m trying to run it, but I’m getting errors for steps #11 and #12 :slight_smile: Thanks for helping !

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="stylesheet.css"/>
    <title>Job Application Form</title>
</head>
<body>
    <div class="container">
    <h1>Job Application </h1>
        <form>
            <label for="name">Full Name:</label>
            <input type="text" name="name" id="name"/>
            <label for="email">Email:</label>
            <input type="email" name="email"id="email"/>
    
            <label for="position">Choose a position</label>
            <select id="position">
                <option value="">--Please choose a Position--</option>
                <option>Sales</option>
                <option>Business analysis</option>
                <option>Developer</option>
                <option>Human resources</option>
            </select>
            <fieldset class="radio-group">
                <legend>Availability</legend>
                <label for= "full-time"> Full-time </label>
                <input id ="full-time" type="radio" name="availability"/>
                <label for= "part-time"> Part-time </label>
                <input id ="part-time" type="radio" name="availability" />
            </fieldset>
            <label for="message">Why do you wanty this job?</label>
            <textarea id="message">Enter your motivation letter for this job...
            </textarea>
            <button type="submit"> Submit</button>
        </form>
    </div>
</body>
</html>

/* file: styles.css */
body {
  font-family: Arial, sans-serif;
  background-color: white;
  padding: 20px;
}

body {
  display: block;
  margin: 8px;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px;
  font-family: Arial, sans-serif;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
  font-size: 2.5rem;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
  margin-top: 20px;
  color: #333;
}

input:focus, textarea:focus {
  border-color: rgb(0, 28, 73);
  outline: none;
}

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

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

.radio-group input[type="radio"]:checked {
  border-color:yellow;
}

.radio-group input[type="radio"]:checked {
  background-color:pink;
}

.radio-group input[type="radio"]:checked {
    box-shadow: 0 0 8px rgb(128, 79, 0);
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 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

Are you referencing the correct file name here?

Also, you have the same selector referenced multiple times in your CSS.

1 Like
3

Oh, god I see it! Thanks!

1 Like