Tell us what’s happening:
Looking for guidance on step 18. I have looked at this for a good bit. I know it’s simple and my eyes playing tricks on me. Thank you for your help.
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">
<title>Job Application Form</title>
</head>
<body>
<h1>Prosepective Athlete for SFA Baseball</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" required>
<option id="select" value="select">Select a option</option>
<option id="dev" value="infield">Infield</option>
<option id="back-dev" value="outfield">Outfield</option>
<option id="full-dev" value="RHP">Right Hand Pitcher</option>
<option id="devops" value="LHP">Left Hand Pitcher</option>
</select>
<fieldset class="radio-group" name="availability" required>
<legend>Classification</legend>
<label for="Freshman">Freshman</label>
<input type="radio" name="availability" id="Freshman" value="Freshman">
<label for="Sophomore">Sophomore</label>
<input type="radio" name="availability" id="Sophomore" value="Sophomore">
<label for="Junior">Junior</label>
<input type="radio" name="availability" id="Junior" value="Junior">
<label for="Senior">Senior</label>
<input type="radio" name="availability" id="Senior" value="Senior">
<label for="Grad-Transfer">Grad Transfer</label>
<input type="radio" name="availability" id="Grad-Transfer" value="Grad-Transfer">
<p>Why do you want to come join the SFA Lumberjacks and be a part of the baseball team?</p>
<textarea id="message"name="message" required></textarea>
<button type="submit" id="submit">Submit</button>
<button type="reset" id=
"submit">Reset</button>
</body>
</html>
/* file: styles.css */
body {
font-family: Arial, sans-serif;
background-color: white;
}
h1 {
text-align: center;
color: purple;
}
p, legend, label:not(.availability) {
font-weight: bold;
padding: auto;
}
textarea {
width: auto;
}
input[type="text"], input[type="email"], select {
margin-bottom: 5px;
width: 100%;
display: block
}
input:focus,textarea:focus{
background-color:red;
color:purple;
border: 2px solid red;
outline:none;
}
input:focus, textarea:focus {
border: solid 1px purple;
}
input:invalid, select:invalid, textarea:invalid {
border: solid 2px red;
}
input:valid, select:valid, textarea:valid {
border: solid 2px green;
}
.radio-group input[type="radio"]:checked {
border-color: red;
background-color: purple;
box-shadow:1px 1px 1px green;
color: purple;
}
button {
width: 80vw;
background-color: red;
margin: 10px auto 10px auto;
padding: 10px;
font-size: 1.2rem;
display: block;
}
button:hover {
background-color: purple;
}
input:first-of-type {
color: black;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Safari/605.1.15
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
