Skip to content

job applicaton #837

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

job applicaton #837

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 100 additions & 0 deletions project2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JOB APPLICATION FORM</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="apply_box">
<h1 class="size_control">
Job Application
<span class="title_small">(WEB)</span>
</h1>
<form action="">
<div class="form_container">
<div class="form_control">
<label for="frist_name">Frist Name</label>
<input
id="frist_name"
name="frist_name"
placeholder="Enter the Frist name..."
/>
</div>
<div class="form_control">
<label for="last_name">Last Name</label>
<input
id="last_name"
name="last_name"
placeholder="Enter the Last name..."
/>
</div>

<div class="form_control">
<label for="email_name">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="Enter Email"
/>
</div>

<div class="form_control">
<label for="job_role">Job Role</label>
<select id="job_role" name="job_role">
<option value="">Select Job Role</option>
<option value="frontend">Frontend Developer</option>
<option value="backend">Backend Developer</option>
<option value="ui_ux">UI UX Developer</option>
</select>
</div>
<div class="textarea_control">
<label for="address">Address</label>
<textarea
id="address"
name="adress"
row="4"
cols="50"
placeholder="Enter Address"
></textarea>
</div>
<div class="form_control">
<label for="city">City</label>
<input id="city" name="city" placeholder="Enter City..." />
</div>
<div class="form_control">
<label for="pincode">Pincode</label>
<input
type="number"
id="pincode"
name="pincode"
placeholder="Enter Pincode..."
/>
</div>
<div class="form_control">
<label for="date">Date</label>
<input
value="2022-08-31"
type="date"
id="date"
name="date"
placeholder="Enter Date..."
/>
</div>
<div class="form_control">
<label for="upload">Upload your CV</label>
<input type="file" id="upload" name="upload" />
<div class="button_container">
<button type="submit">Apply Now</button>
</div>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
259 changes: 60 additions & 199 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,228 +1,89 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}


:root{
--navbar-height: 59px;
}

#navbar{
display: flex;
align-items: center;
position: relative;
top: 0px;
}

#pic1{
margin: 10px 35px;
}

#pic1 img{
height : 56px;
margin : 13px 15px;

body{
background-color: #e4bebe;
}
.container{
margin: 0 auto;
max-width: 900px;


#navbar ul{
display: flex;
}

#navbar::before{
content: "";
background-color: black;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: -1;
}

#navbar ul li{
list-style: none;
font-size: 1.3rem;
.apply_box{
max-width: 600px;
padding:20px;
background-color: aliceblue;
margin: 0 auto;
margin-top: 50px;

box-shadow: 4px 3px 5pc rgb(1,1,1);
border-radius: 10px;
}

#navbar ul li a{
color: white;
display: block;
padding: 3px 22px;
border-radius: 20px;
text-decoration: none;
.title_small{
font-size: 20px;
}
.form_container{
margin-top: 20px;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(200px, 1fr));
gap: 20px;

#navbar ul li a:hover{
color: yellow;
background-color: rgb(5, 5, 5);

}

#home{
.form_control{
display: flex;
flex-direction: column;
padding: 3px 200px;
height: 650px;
justify-content: center;
align-items: center;
}

#home::before{
content: "";
background: url('../PIC_1.jpg') no-repeat center center/cover;
position: absolute;
top: 0px;
left: 0px;
height: 80%;
width: 100%;
z-index: -1;
opacity: 0.89;
}

#home.h1{
color: black;
text-align: center;
font-size: 3.5rem;
font-family: 'Noto Sans', sans-serif;
label{
font-size: 15px;
margin-bottom: 5px;
}
.size_control{
margin-left: 100px;

/* services*/


#services{
margin: 30px;
display: flex;
}

#services .box{
border: 5px solid yellow;
padding: 34px;
margin: 3px 6px;
border-radius: 29px;
background: rgb(10, 10, 6);
input,select,textarea{
padding: 6px 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 10px;

}

#services .box img{
height: 120px;
margin: auto;
display: block;
.button_container{
margin-top: 10px;
margin-left: 170px;
}


#client-section{
position: relative;
height: 344px;
}

#client-section::before{
content: "";
position: absolute;
background: url('../bg1.jpg') no-repeat center center/cover;
width: 100%;
height: 200%;
z-index: -1;
opacity: 0.89;;
}

#clients{
display: flex;
justify-content: center;
align-items: center;

}

.client-item{
padding: 34px;
input:focus{
outline-color:red;
}

#client img{
height: 60px;
}

#contact{
position: relative;
}

#contact::before{
content:"";
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.7;
background: rgb(240, 241, 241);
}

#contact-box{
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 34px;
}

#contact-box input,#contact-box textarea{
width: 100%;
padding: 9px 20px;
border-radius: 9px;
font-size: 1.1rem;
}

#contact-box form{
width: 40%;
}

#contact-box label{
font-size: 1.5rem;
font-family: 'Noto Sans', sans-serif;

}

footer{
background: black;
button{
background-color: rgb(232, 146, 84);
border: transparent solid 2px;
border-radius: 4px;
color: white;
padding: 10px 20px;
padding: 6px 8px;
transition: 0.3sec ease-in;
}
.h-primary{
font-size: 3.4rem;
padding: 50px;

}

.h-secondary{
font-size: 2.8rem;
padding: 45px;
font-family: 'Noto Sans', sans-serif;
color:azure

}

.btn{
padding: 6px 20px;
border: 2px solid white;
background-color: black;
color: white;
margin: 25px;
font-size: 1.2rem;
border-radius: 20px;
button:hover{
background-color: #ccc;
border: 2px solid red;
color: black;
transition: 0.3sec ease-out;
cursor: pointer;
}

.center{
text-align: center;
color: azure;
}
.textarea_control{
grid-column: 1 /span 2;

.c1{
text-align: center;
}
.textarea_control textarea{
width: 100%;
}
@media(max-width:460px){
.textarea_control{
grid-column: 1 /span 1;

}








}