Skip to content

Commit a69bb98

Browse files
sayeedhussain01sayeedhussain01
committed
Complete project
1 parent d746569 commit a69bb98

2 files changed

Lines changed: 158 additions & 56 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 76 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -7,83 +7,103 @@
77
<title>My form exercise</title>
88
<meta name="description" content="" />
99
<meta name="viewport" content="width=device-width, initial-scale=1" />
10+
11+
<!-- this is a google font link -->
12+
<link rel="preconnect" href="https://fonts.googleapis.com">
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14+
<link
15+
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
16+
rel="stylesheet">
17+
18+
19+
<!-- This is a css link -->
20+
<link rel="stylesheet" href="style.css">
1021
</head>
1122

12-
<body>
23+
<body class="font">
24+
25+
<div class="form">
26+
27+
<!-- This is a header section -->
28+
<header class="hd">
29+
<h1>Product Pick</h1>
30+
</header>
31+
32+
1333

14-
<!-- This is a header section -->
15-
<header class="hd">
16-
<h1>Product Pick</h1>
17-
</header>
34+
<main>
35+
<form>
1836

37+
<fieldset>
38+
<div class="all">
1939

40+
<!-- This is a customer name input -->
2041

21-
<main>
22-
<form>
42+
<div>
43+
<label class="blk" for="nam">First Name* </label>
44+
<input type="text" id="nam" name="name" placeholder="Enter Your Name" pattern=".*\S.*\S.*" required>
45+
</div>
2346

24-
<!-- This is a customer name input -->
47+
<br>
2548

26-
<div>
27-
<label class="blk" for="nam">First Name* </label>
28-
<input type="text" id="nam" name="name" placeholder="Enter Your Name" pattern=".*\S.*\S.*" required>
29-
</div>
49+
<div>
50+
<label class="blk" for="nams">Last Name* </label>
51+
<input type="text" id="nams" name="name" placeholder="Enter Your Name" pattern=".*\S.*\S.*" required>
52+
</div>
3053

31-
<br>
54+
<br>
3255

33-
<div>
34-
<label class="blk" for="nams">Last Name* </label>
35-
<input type="text" id="nams" name="name" placeholder="Enter Your Name" pattern=".*\S.*\S.*" required>
36-
</div>
3756

38-
<br>
57+
<!-- This is a customer email input -->
58+
<div>
59+
<label class="blk" for="mail">Email* </label>
60+
<input type="email" id="mail" placeholder="Enter Your Email" name="Email" required>
61+
</div>
3962

63+
<br>
4064

41-
<!-- This is a customer email input -->
42-
<div>
43-
<label class="blk" for="mail">Email* </label>
44-
<input type="email" id="mail" placeholder="Enter Your Email" name="Email" required>
45-
</div>
65+
<!-- This is a color section -->
4666

47-
<br>
67+
<div class="AllClr">
68+
<label class="blk" for="clr"> T-shirt Color*</label>
69+
<select name="Color" id="clr" required>
70+
<option value="">-- Select a color -- </option>
71+
<option value="red">Red</option>
72+
<option value="blue"> Blue</option>
73+
<option value="yellow">Yellow</option>
74+
</select>
75+
</div>
4876

49-
<!-- This is a color section -->
50-
51-
<div class="AllClr">
52-
<label class="blk" for="clr"> T-shirt Color*</label>
53-
<select name="Color" id="clr" required>
54-
<option value="">-- Select a color -- </option>
55-
<option value="red">Red</option>
56-
<option value="blue"> Blue</option>
57-
<option value="yellow">Yellow</option>
58-
</select>
59-
</div>
77+
<br>
6078

61-
<br>
6279

80+
<!-- This is a size option -->
6381

64-
<!-- This is a size option -->
82+
<div>
83+
<label class="blk" for="sz"> T-shirt Size*</label>
84+
<select name="Size" id="sz" required>
85+
<option value="">-- Select a color -- </option>
86+
<option value="xs">XS</option>
87+
<option value="s">S</option>
88+
<option value="m">M</option>
89+
<option value="l">L</option>
90+
<option value="xl">XL</option>
91+
<option value="xxl">XXL</option>
92+
</select>
6593

66-
<div>
67-
<label class="blk" for="sz"> T-shirt Size*</label>
68-
<select name="Size" id="sz" required>
69-
<option value="">-- Select a color -- </option>
70-
<option value="xs">XS</option>
71-
<option value="s">S</option>
72-
<option value="m">M</option>
73-
<option value="l">L</option>
74-
<option value="xl">XL</option>
75-
<option value="xxl">XXL</option>
76-
</select>
94+
<button class="btn" type="submit"> Submit </button>
95+
</div>
7796

78-
<button class="btn" type="submit"> Submit </button>
79-
</div>
97+
</div>
98+
</fieldset>
8099

81-
</form>
82-
</main>
83-
<footer>
84-
<!-- change to your name-->
85-
<p>By HOMEWORK SOLUTION</p>
86-
</footer>
100+
</form>
101+
</main>
102+
<footer>
103+
<!-- change to your name-->
104+
<p>By Sayeed Hussain </p>
105+
</footer>
106+
</div>
87107
</body>
88108

89109
</html>

‎Form-Controls/style.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
8+
9+
/* this is a google font */
10+
.font {
11+
font-family: "Inter", sans-serif;
12+
font-optical-sizing: auto;
13+
font-style: normal;
14+
}
15+
16+
17+
/* This is a whole form's class */
18+
.form{
19+
display: flex;
20+
flex-direction: column;
21+
align-items: center;
22+
justify-content: center;
23+
height: 100vh;
24+
}
25+
26+
27+
select{
28+
width: 212px;
29+
height: 35px;
30+
border-radius: 5px;
31+
border: solid 1px black;
32+
padding: 5px;
33+
}
34+
35+
fieldset{
36+
width: 314px;
37+
height: 470px;
38+
border-radius: 5px;
39+
}
40+
41+
42+
/* all input fields position class */
43+
.all{
44+
margin-top: 15px;
45+
margin-left: 20px;
46+
}
47+
48+
49+
input{
50+
height: 35px;
51+
width: 210px;
52+
border-radius: 5px;
53+
border: solid 1px black;
54+
padding: 10px;
55+
}
56+
57+
58+
/* This is whole font weight class name */
59+
.blk{
60+
display: block;
61+
font-weight: 500;
62+
margin-bottom: 6px;
63+
64+
}
65+
66+
/* This is header class name */
67+
.hd{
68+
margin-right: 5%;
69+
margin-bottom: 5px;
70+
}
71+
72+
.btn{
73+
display: block;
74+
margin-top: 10px;
75+
width: 90px;
76+
height: 40px;
77+
border-radius: 10px;
78+
border: none;
79+
background-color:rgb(42, 104, 236);
80+
color: white;
81+
font-weight: bold;
82+
}

0 commit comments

Comments
 (0)