ben/freecodecamp
1
0
Fork 0
mirror of https://github.com/BenDWit/freecodecamp.git synced 2025-12-23 11:09:59 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

finished job application form

Browse source
This commit is contained in:
bendwit 2025-07-05 15:53:28 +02:00
parent 325dff9a62
commit f7aa558120
2 changed files with 103 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

23
Certified_Full_Stack_Developer/CSS/Job_Aplication_Form/index.html
View file

@ -8,10 +8,25 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<form> <form id="job-application">
<input type="text" id="name"> <label for="name">Full Name:</label>
<input type="email" id="email"> <input type="text" id="name">
<select name="position" id="position"></select> <label for="email">email:</label>
<input type="email" id="email">
<select name="position" id="position" required>
<option value="">select position</option>
<option value="Guinea-pig">Guinea pig</option>
<option value="test-subject">Guinea pig</option>
</select>
<fieldset class="radio-group">
<legend>Availability:</legend>
<input type="radio" id="fullTime" name="availability" value="fullTime" checked="">
<label for="fullTime">Full-Time</label>
<input type="radio" id="partTime" name="availability" value="partTime">
<label for="partTime">Part-Time</label>
</fieldset>
<textarea name="" id="message"></textarea>
<button type="submit">Submit!</button>
</form> </form>
</div> </div>
</body> </body>

84
Certified_Full_Stack_Developer/CSS/Job_Aplication_Form/styles.css
View file

@ -0,0 +1,84 @@
body {
background-color: white;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
input{
border: 1px;
border-style: dashed;
}
input:focus, textarea:focus {
border-color: blueviolet;
}
input:invalid, select:invalid, textarea:invalid {
border-color: red;
}
input:valid, select:valid, textarea:valid {
border-color: green;
}
button:hover {
background-color: aliceblue;
}
.radio-group label {
margin: 0;
font-weight: normal;
cursor: pointer;
}
button {
width: 100%;
padding: 10px;
background-color: green;
border: none;
color: white;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
input:focus, textarea:focus {
border-color: blue;
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: green;
background-color: green;
box-shadow: inset 0 0 0 4px white;
}
button:hover {
background-color: black;
}
input[type="radio"]:checked + label {
color: green;
}
button:disabled {
background-color: grey;
}
input:first-of-type {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}