Employee-Project/employee.css at main · bmstanfo/Employee-Project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
/* Adjust the layout and styles for a more fun and engaging design */

/* Employee Form Section */
.employee-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px; /* Add margin for separation */
}

.employee-form label {
  margin-bottom: 0.5rem;
  color: #2a9d8f; /* Teal color for labels */
}

.employee-form input {
  padding: 0.5rem;
  margin-bottom: 1rem;
  border-radius: 0.25rem;
  border: 1px solid #ccc;
  font-size: 16px; /* Increase font size */
  color: #333; /* Dark text color */
}

.employee-form button {
  padding: 0.5rem 1rem;
  background-color: #fca311; /* Bright orange background for the button */
  color: #fff;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 16px; /* Increase font size */
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

.employee-form button:hover {
  background-color: #e76f51; /* Darker orange on hover */
}

/* Employee List Section */
.employee-list {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  color: #333;
  align-items: center;
  background-color: #e9c46a; /* Light yellow background for the employee list */
  padding: 20px;
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.employee-list h1 {
  font-size: 24px;
  margin-bottom: 16px;
  color: #2a9d8f; /* Teal color for headings */
}

.employee-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.employee-list li {
  margin-bottom: 8px;
}

.employee-list li a {
  color: #0077b6; /* Bright blue color for links */
  text-decoration: none;
  font-weight: bold;
}

.employee-list li a:hover {
  text-decoration: underline; /* Underline on hover */
}

/* Employee Detail Section */
.employee-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f4a261; /* Light orange background */
  padding: 20px;
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.employee-detail label {
  font-weight: bold;
  color: #2a9d8f; /* Teal color for labels */
}

.employee-detail table {
  border-collapse: collapse;
  width: 100%;
  max-width: 600px;
}

.employee-detail td,
.employee-detail th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

.employee-detail tr:nth-child(even) {
  background-color: #f8f9fa; /* Light gray background for even rows */
}

.employee-detail tr:hover {
  background-color: #e9c46a; /* Darker yellow on hover */
}

.employee-detail th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #2a9d8f; /* Teal background for table headers */
  color: white;
}

/* Media Query for Responsive Design */
@media (max-width: 768px) {
  .employee-list,
  .employee-detail {
    padding: 10px; /* Decrease padding on smaller screens */
  }
}