Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

Hi, I don’t understand the box-shadow property asked on user story 15, since it’s not explained in the curriculum.

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">
        <form>
            <label for="name">Name
                <input type="text" id="name" placeholder="Ex.John Due">
            </label>
            <label for="email">Email
                <input type="email" id="email" placeholder="Ex.email@example.com">
            </label>
            <select id="position">
                <option value="
                " disabled selected>Select one</option>
                <option value="frontend">Front-End Developer</option>
                <option value="backend">Back-End Developer</option>
                <option value="fullstack">Full-Stack Developer</option>
                <option value="designer">Designer</option>
                <option value="manager">Project Manager</option>
                <option value="android">Android app Developer</option>
                <option value="ios">IOS Developer</option>
            </select>
            <fieldset class="radio-group">
                <legend>
                    Availability
                </legend>
                <Label>Full-Time
                    <input type="radio" name="availability">
                </Label>
                <label>Part-Time<input type="radio" name="availability"></label>
            </fieldset>
            <textarea id="message" placeholder="Write your message here"></textarea>
            <button type="submit">Submit</button>
        </form>
    </div>
</body>

/* file: styles.css */
input:focus, textarea:focus{
    border: 2px solid rgb(217, 229, 156);
    outline: none;
}

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

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

button{
    transition: background-color 0.3s ease, transform 0.3s ease;
    border: none;
    height: 30px;
    width: 100px;
    display: block;
    margin: 30px auto;
}

button:hover{   
    background-color: rgb(137, 135, 9);
    transform: scale(1.10);
}

.radio-group:checked{
    border:22px solid green;
    background-color: green;
    box-shadow: inset 0 0 5px green;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form
https://www.freecodecamp.org/learn/full-stack-developer/lab-job-application-form/lab-job-application-form

2

you can google it and see if that helps first. Let us know if you need to understand what you find.

3

Thank you for helping make FCC better. Bugs can be reported as GitHub Issues. Whenever reporting a bug, please check first that there isn’t already an issue for it and provide as much detail as possible.