Build a Job Application Form Task 14, 15 and 16

HTML-CSS
1

Tell us what’s happening:

My code is working in Preview, but the tests saying I failed task 14, 15 and 16?

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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Job Application</title>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>   

        <div class="container">

            <h1>Job Application Form</h1>
            <form class="form">

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

                <label for="email">Email:</label>
                <input type="email" id="email" required>
                
                <label for="position">Position:</label>
                <select id="position" required>
                    <option value="" selected>Select your position</option> 
                    <option value="part-time">Part-Time</option>
                    <option value="full-time">Full-Time</option>   
                    <option value="manager">Manager</option>                        
                </select>
                
                <fieldset class="radio-group">
                    
                    <legend>Availability</legend>

                    <input type="radio" id="weekday" name="availability" value="weekday" required>
                    <label for="weekday">Weekdays Only</label>

                    <input type="radio" id="full-week" name="availability" value="full-week">
                    <label for="full-week">Weekdays & Weekends</label>

                </fieldset>

                <label for="message">Why do you want this job?</label>
                <textarea id="message" placeholder="Enter your message here" required></textarea>
                
                <button type="submit">Submit</button>

            </form>
            
        </div>

  </body>
</html>

/* file: styles.css */
body {
    font-family: Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background-color:whitesmoke;
}                               

.container {
    box-sizing: border-box;
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    border: 2px solid floralwhite;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background: linear-gradient(45deg, floralwhite, white);
}

.container h1 {
    text-align: center;
}

form {
    display: flex;
    flex-direction: column;
}

input, textarea, select, button {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: none;
    box-shadow: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit; 
}

input[type="text"], input[type="email"], textarea, select {
    padding: 10px;
    border: 1px solid black;
    border-radius: 5px;
    background-color: white;
    transition: border-color 0.3s ease;
    margin-bottom: 10px;
}

.radio-group {
    margin-bottom: 10px;
}

button {
    padding: 10px;
    background-color: lightblue;
    display: inline-block;
    border-radius: 5px;
}

input:focus, textarea:focus {
    border-color: green;
}

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

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

button:hover {
    background-color: wheat;
}

.radio-group input[type="radio"] {
    display: none;
}

.radio-group label {
    background-color: white;
    padding: 6px;
    margin-right: 10px;
    border: 1px solid black;
    border-radius: 5px;
    cursor: pointer;
}

.radio-group input[type="radio"]:checked + label {
    border-color: green;
    background-color: lightgreen;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

input:nth-of-type(1) {
    box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.1);
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

checkout instructions for them, you are not quite doing what was being asked there!!

for example, for number 14 you are using those “asked styles” for “number 15”

also number 14 related “css style” is missing its “psuedo-class”

for number 16 checkout how to “make use of border radius”

happy coding :slight_smile: