Post
Ask Question
ahmed salah

ahmed salah

  • 931
  • 547
  • 64.4k

How to make web design using html and css for part under filled by emp

Sep 23 2023 12:30 AM

I make web design to resignation form submittion . i face issue on design for part under filled by employee

so i need to make web design for the part under filled by employee

what i try as below :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Your custom CSS -->
    <style>
    .form-header {
text-align: center;
width: 30%;
margin: 0 auto;
background-color: gray;
border-radius: 10px 10px 0 0;
padding: 20px;
}

.form-header h2 {
color: white;
margin: 0;
}

.form-container {
  background-color: #eee;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.form-section {
  margin-bottom: 10px;
  width:400px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

input[type="text"] {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.fill-by-employee {
  text-align: right;
  font-style: italic;
  color: #888;
}
h1 {
  text-align: center;
}

form {
  margin-top: 20px;
}

label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
}

input[type="text"],
textarea,
input[type="date"] {
  width: 100%;
  padding: 5px;
}

input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 20px;
}

input[type="submit"]:hover {
  background-color: #45a049;
}
    </style>
</head>
<body>
   <div class="form-header"> <h2> ????? ??? ?? ??????? <br/> Resignation Submission Form</h2> </div> 
<div class="form-container">
  <div class="form-section">
    <label for="emp-input">Filled By Employee:</label>
  </div>
  <div class="form-section">
    <p class="fill-by-employee">???? ?? ??? ??????</p>
  </div>
</div>
   <form>
      <div class="employee-info">
        <label for="emp-id">Emp. ID:</label>
        <input type="text" id="emp-id" name="emp-id" placeholder="Enter employee ID" required>

        <label for="dept-branch">????? ???????:</label>
        <input type="text" id="dept-branch" name="dept-branch" placeholder="Enter department/branch" required>

        <label for="submission-date">Emp Name:</label>
        <input type="date" id="submission-date" name="submission-date" required>

        <label for="emp-sign">??? ??????:</label>
        <input type="text" id="emp-sign" name="emp-sign" placeholder="Enter employee signature" required>
      </div>

      <div class="reason-section">
        <label for="reason">Reason of Resignation:</label>
        <textarea id="reason" name="reason" placeholder="Enter reason of resignation" required></textarea>
      </div>
      
      <input type="submit" value="Submit">
    </form>
  
</body>
</html>

desired result as below with red color 

so can you please help me


Answers (2)