Skip to content

Commit 253c27b

Browse files
cywong-devcywong-dev
committed
Add css script file and change the index.html file to link this file
Original css script in the <script> tag was moved to the css file and the html file was changed to link the css script file by the tag <link>
1 parent 43ef402 commit 253c27b

2 files changed

Lines changed: 47 additions & 33 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
<!-- Programmer : Chun Yan Wong
2+
Date : 2026-06-03
3+
Version : 1.0
4+
Purpose : To create the html form for form control homework
5+
-->
6+
17
<!DOCTYPE html>
28
<html lang="en" title="Checking Form">
39

‎Form-Controls/style.css‎

Lines changed: 41 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,46 @@
1+
/* Programmer : Chun Yan Wong
2+
Date : 2026-06-03
3+
Version : 1.0
4+
Purpose : To create the separate css file for form control homework
5+
*/
6+
17
body {
2-
font-family: Arial, sans-serif;
3-
background-color: hsl(0, 2%, 20%);
4-
display: flex;
5-
justify-content: center;
6-
align-items: center;
7-
height: 100vh;
8-
margin: 0;
9-
}
8+
font-family: Arial, sans-serif;
9+
background-color: hsl(0, 2%, 20%);
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
height: 100vh;
14+
margin: 0;
15+
}
1016

11-
.customer-form {
12-
background-color: #ffffff;
13-
padding: 40px;
14-
border-radius: 8px;
15-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
16-
width: 300px;
17-
}
17+
.customer-form {
18+
background-color: #ffffff;
19+
padding: 40px;
20+
border-radius: 8px;
21+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
22+
width: 300px;
23+
}
1824

19-
.customer-form label {
20-
margin-bottom: 5px;
21-
color: #1a1a1a; /* dark grey text */
22-
background-color: transparent;
23-
}
25+
.customer-form label {
26+
margin-bottom: 5px;
27+
color: #1a1a1a;
28+
/* dark grey text */
29+
background-color: transparent;
30+
}
2431

25-
.customer-form button {
26-
width: 100%;
27-
padding: 10px;
28-
background-color: #0056b3; /* darker blue */
29-
color: #ffffff;
30-
border: none;
31-
border-radius: 4px;
32-
cursor: pointer;
33-
font-size: 16px;
34-
}
32+
.customer-form button {
33+
width: 100%;
34+
padding: 10px;
35+
background-color: #0056b3;
36+
/* darker blue */
37+
color: #ffffff;
38+
border: none;
39+
border-radius: 4px;
40+
cursor: pointer;
41+
font-size: 16px;
42+
}
3543

36-
.custojmer-form button:hover {
37-
background-color: #003f8a;
38-
}
44+
.custojmer-form button:hover {
45+
background-color: #003f8a;
46+
}

0 commit comments

Comments
 (0)