Skip to content

Commit 649343f

Browse files
Enice-CodesEnice-Codes
committed
add style layout with css
1 parent 7da6f86 commit 649343f

3 files changed

Lines changed: 55 additions & 17 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 32 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,26 @@
88
<meta name="viewport" content="width=device-width, initial-scale=1">
99
<link rel="stylesheet" href="style.css" >
1010
</head>
11+
1112
<body>
13+
<center>
1214
<header>
1315
<h1>Customer Confirmation Form </h1>
1416
</header>
17+
</center>
18+
1519
<main>
1620
<form action="results.html" method="GET">
1721
<div>
1822
<label for="name">Customer Name:</label>
19-
<input type="text" id="name" name="name" required placeholder="two non-space characters."/>
23+
<input type="text" id="name" name="name" required placeholder="enter your name ."/>
2024
</div>
25+
2126
<div
2227
<label for="email"> Email:</label>
2328
<input type="email" id="email" name="email" required placeholder="@gmail.com" />
2429
</div>
30+
2531
<div>
2632
<label for="Size"> Size: </label>
2733
<select id="size" name="size">
@@ -32,48 +38,57 @@ <h1>Customer Confirmation Form </h1>
3238
<option value="xlarge">xLarge</option>
3339
<option value="xxlarge">xxLarge</option>
3440

41+
</div>
3542
</select>
36-
</div>
3743

38-
<div>
44+
<div>
45+
3946
<label for="phone"> Phone Number:</label>
4047
<input type="tel" id="phone" name="phone" required />
41-
</div>
48+
</div>
4249

43-
<div>
50+
<div>
4451
<label for="address"> Address: </label>
4552
<input type="text" id="address" name="address" required />
46-
</div>
47-
48-
<div>
53+
</div>
54+
55+
<div>
4956
<label for="color"> Color:</label>
5057
<select id="color" name="color">
5158
<option value="red">yellow</option>
5259
<option value="blue">black</option>
5360
<option value="green">Green</option>
5461
</select>
5562
</div>
56-
<div>
63+
64+
<fieldset>
65+
66+
<legend>
5767
Gender
58-
</div>
68+
</legend>
5969

6070
<div>
61-
<label for="gender">Male</label>
71+
<label for="gender" value="male">Male</label>
6272
<input type="radio" for="gender" id="male"></input>
63-
</div>
73+
</div>
74+
6475
<div>
65-
<label for="gender">Female</label>
76+
<label for="gender" value="female">Female</label>
6677
<input type="radio" for="gender" id="female"></input>
67-
</div>
78+
</div>
79+
80+
</fieldset>
6881
<div>
6982
<label for="comments">Additional Comments:</label>
7083
<textarea id="comments" name="comments"></textarea>
71-
</div>
72-
84+
</div>
85+
86+
<div>
7387
<div class="form-button">
7488
<button type="submit">Submit</button>
7589
<button type="reset">Reset</button>
76-
</div>
90+
</div>
91+
7792
</form>
7893
</main>
7994
<footer>

‎Form-Controls/results.html‎

Whitespace-only changes.

‎Form-Controls/style.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
h2 {
2+
text-align: center;
3+
color: #333;
4+
font-size: 24px;
5+
}
6+
body {
7+
font-family: Arial, sans-serif;
8+
background-color: #c597b0;
9+
margin: 0;
10+
padding: 20px;
11+
}
12+
header {
13+
background-color: #c597b0;
14+
color: rgb(53, 50, 50);
15+
padding: 5px 0;
16+
}
17+
form {
18+
background-color: #dd9ad2;
19+
padding: 20px;
20+
border-radius: 10px;
21+
max-width: 500px;
22+
margin: auto;
23+
}

0 commit comments

Comments
 (0)