Build a Job Application Form

HTML-CSS
1

I created to clone the demo and I have a few questions

  1. The alignment of all the labels in the demo is in a straight line
    I tried doing that by placing the same width in all the target elements - Did not work
    Then placed different width(used %) in the fieldset & radio element - seems better
    fcc-upload-Job-Application-form
    fcc-upload-Job-Application-form1116×721 25.4 KB

    upload-final-job-application-form
    upload-final-job-application-form638×738 39.5 KB

How do I achieve the straight alignment ?
2. The radio buttons seem a little towards the top in the demo , mine looks a little off .
I have put margin-right in the radio element to create the space between the radio and the label . Is it alright or needs more fixing ?

2

you do not need to copy the examples, you are asked to come up with your own style when you do these projects

3

I understand that . I do 2 versions - one cloning , one my own version
Helps me to understand better !
What is it that I am doing wrong in the above example ?

4

I don’t know, you have not shared your code

7

I can’t seem to copy the entire HTML - CSS code here . How do I do it ?

8

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

9

Hi Buddy See Here by pressing the Help Button You will be able to put all your code over here.

1920×815 70.6 KB

Hope You Will Give us your code soon.

10 
<!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 action="" method="GET">
            <h1>Job Application Form</h1>
            <label for="name">Full Name: </label>
            <input type="text" id="name" placeholder="Enter your name" required>
            
            <br>

            <label for="email">Email: </label>
            <input type="email" id="email" placeholder="Enter your name" required>
            
            <br>

            <label for="position">Position: </label>
            <select id="position" name="position" required>
             <option name="position" value="select-a-position">Select a position</option>
             <option name="position" value="developer">Developer</option>
             <option name="position" value="designer">Designer</option> 
             <option name="position"value="manager">Manager</option>  
            </select>

            <br>

            <fieldset class="radio-group">
                <legend>Availability: </legend>
                <input type="radio" name="availability" id="full-time" checked>
                <label for="full-time">Full-Time</label>

                <input type="radio" name="availability" id="part-time">
                <label for="part-time">Part-Time</label>
            </fieldset>

            <h3>Why do youwant this job?</h3>
            <textarea id="message" cols="50" rows="5" placeholder="Write your motivation" required></textarea>

            <button type="submit">Submit Application</button>



        </form>
    </div>

</body>
</html>

.container {
  margin: 20px auto;
  width: 80%;
  box-shadow:0 4px 8px lightgray; 
  padding: 3%;
  border-radius: 5px;
}
/*label:nth-child(-n+3) {
  display: block;
  font-size: 1.1em;
  font-weight: bold;
  /*width: 80%;
}*/

input:focus , textarea:focus  {
  border: 1px solid yellow;
}

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

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

button:hover{
  background-color: black;
}

.radio-group input[type="radio"]:checked {
  border: 1px solid green;
  background-color: red;
  box-shadow:0 4px 8px lightgray;
}

input[type="radio"]:checked + label{
  color: green;
}

input:first-of-type {
  border-radius: 4px;
}
input, select{
  /*width: 80%;*/
  padding: 5px;
  margin-top: 5px;
  
}
#name, #email, #position {
  display: block;
  width: 98%;
  border-radius: 5px;
  
}

#position {
  padding: 5px;
  min-width: 99.5%;
}

#message {
  border-radius: 5px;
  width: 96%;
  height: 60px;
  padding: 10px; 
  margin-top: -15px;
}

button{
  margin-top:20px;
  width: 100%;
  padding: 8px;
  background-color: #228B22;
  color: white;
  
  border: none;
  border-radius: 5px;
}

h1 {
  text-align: center;
}
input[type="radio"] {
  transform: scale(1.7);
  accent-color: green;
  margin-bottom: 15px;
  padding-right: 25px;
  
}
.radio-group {
  padding: 10px;
  margin-right: 20px;
  width: 96%;
  
}

label:is(form, label){
  font-weight: bold;
}

/*.container input[type="text"], input[type="email"] , #position , .radio-group, #message {
  width: 95%;
}*/

 .radio-group label {
  font-size: 0.9em;
  padding-left: 5px;
   font-weight: normal;
}


h3 {
  margin-top: -4px;
}
11

can you also share the link to the project please?

12

Click on ‘this example project’

13

you are setting a different width to the elements

also one thing you could do is use border-box: box-sizing on the * selector