Add files via upload

Faria-faiz · Dec 15, 2024 · 2e50fb2 · 2e50fb2
commit 2e50fb2
Show file tree

Hide file tree

Showing 2 changed files with 151 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Job Application</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="box">
+            <h1> Job Application <span class="small">(web)</span></h1>
+            <form action="">
+                <div class="form">
+                     <div class="First Name">
+                        <label for="First">First Name</label>
+                        <input id="First" name="First name" placeholder="Enter First Name..."/>
+                     </div>
+                      <div class="control">
+                        <label for="Last">Last Name</label>
+                        <input id="Last" name="Last name" placeholder="Last Name..."/>
+                      </div>
+                      <div class="email">
+                        <label for="Email">Email</label>
+                        <input type="email" id="Email" name="Email" placeholder="Enter Your Email...">
+
+
+                      </div>
+                      <div class="job role">
+
+                        <label for="Job">Job Role</label>
+
+                        <select id="Job role" name="Job Role">
+                        <option value="">Select Job Role</option>
+                        <option value="Web">Web devolper</option>
+                        <option value="App">App devolper</option>
+                        </select>
+
+                      </div>
+                      <div class="address">
+                        <label for="">Address</label>
+                        <textarea name="address" id="address" row="4" cols="50" placeholder="Enter Address..."></textarea>
+                      </div> 
+                      <div class="city">
+                        <label for="City">City</label>
+                        <input id="City" name="City" placeholder="Enter City Name...">
+                      </div>
+                      <div class="Pin Code">
+                        <label for="Pin Code">Pin Code</label>
+                        <input type="number" id="Pin Code" name="Pin Code" placeholder="Enter Pin Code..." >
+                      </div>
+                      <div class="Date">
+                        <label for="Date">Date</label>
+                        <input value="2024-12-15" type="date" id="Date" name="Date"/>
+                      </div>
+                      <div class="File">
+                        <label for="File">Uplod Your File</label>
+                        <input type="file" id="File" name="File">
+
+
+                    </div>
+
+
+
+
+                </div>
+                 <div class="button">
+                    <button type="submit">Apply NOW</button>
+                 </div>
+
+            </form>
+        </div>
+    </div>
+
+
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,74 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body{
+    background-color: darkgrey;
+}
+.container{
+    max-width: 900px;
+    margin: 0 auto;
+
+}
+.box{
+    max-width: 900px;
+    height: 600px;
+    padding: 20px;
+    background-color: white;
+    margin: 0 auto;
+    margin-top: 50px;
+    box-shadow: 4px 3px 5px rgb(16, 24, 40);
+    border-radius: 10px;
+}
+.small{
+    font-size: 20px;
+}
+.form{
+    display: grid;
+    margin-top: 20px;
+    grid-template-columns: repeat(auto-fit,minmax( 200px,1fr));
+    gap: 40px;
+}
+.control{
+    display: flex;
+    flex-direction: column;
+}
+label{
+    font-size: 20px;
+}
+input , select ,textarea{
+    padding-left: 6PX 10px;
+
+    border: 1PX solid rgb(142, 125, 164);
+    border-radius: 4px;
+    font-size: 15px;
+
+}
+input:focus{
+    outline-color: black;
+}.button{
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 20px;
+}
+button{
+    background-color: rgb(255, 3, 3);
+    border: transparent solid 2px;
+    padding: 5px 10px;
+    color: antiquewhite;
+    border-radius: 8px;
+    transition: 0.3s ease-in;
+}
+button:hover{
+    background-color: rgb(251, 253, 253);
+ border: 2px solid red;
+ color: red;
+cursor: pointer;
+  transition: 0.3s ease-out;
+}
+.address{
+    grid-column: 1 ;
+}
+
+