-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (113 loc) · 3.97 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<script defer data-domain="bhavishka0210.github.io/bhavishkamulchandani.github.io" src="https://plausible.io/js/script.js"></script>
<title>Customized T-shirt Order Form</title>
<style>
/* Add some styles to make the page more attractive */
body {
font-family: Italic, sans-serif;
background-color: #a7ffce8a;
}
h1 {
text-align: center;
color: #000000;
margin-top: 50px;
}
form {
max-width: 500px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}
label {
display: block;
margin-top: 10px;
color: #000000;
font-weight: bold;
}
input[type="text"],
select,
input[type="number"],
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 5px;
margin-bottom: 10px;
font-size: 16px;
}
input[type="submit"] {
background-color: #000000;
color: #ffffff;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
input[type="submit"]:hover {
background-color: #4b644d;
}
</style>
</head>
<body>
<section style="float: right; max-width: 30%;">
<img src="blue.jpeg" alt="Profile Picture" style="width: 80%; border-radius: 30%;">
</section>
<section style="float: left; max-width: 30%;">
<img src="blue.jpeg" alt="Image at the Bottom" style="width: 80%; border-radius: 30%;">
</section>
<h1>Customized T-shirt Order Form</h1>
<form action="">
<label for="Name">Name:</label>
<input type="text" id="Name" name="Name" required>
<label for="Phone No.">Phone No.:</label>
<input type="number" id="Phone No." name="Phone No." required>
<label for="E-Mail">Email:</label>
<input type="email" id="E-Mail" name="E-Mail" required>
<label for="City Pin Code">City Pin Code:</label>
<input type="number" id="City Pin Code" name="City Pin Code" required>
<label for="tagline">Tagline:</label>
<input type="text" id="tagline" name="tagline" required>
<label for="color">Color:</label>
<select id="color" name="color" required>
<option value="">-- Select a color --</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="black">Black</option>
<option value="white">White</option>
<option value="grey">grey</option>
<option value="yellow">yellow</option>
<option value="orange">orange</option>
<option value="pink">pink</option>
<option value="purple">purple</option>
<option value="brown">brown</option>
<option value="maroon">maroon</option>
<option value="magneta">magneta</option>
<option value="thistle">thistle</option>
</select>
<label for="size">Size:</label>
<select id="size" name="size" required>
<option value="">-- Select a size --</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="xlarge">X-Large</option>
</select>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" required>
<label for="delivery-date">Delivery Date:</label>
<input type="date" id="delivery-date" name="delivery-date" required>
<label for="delivery-Address">Delivery Address:</label>
<textarea id="delivery-Address" name="delivery-Address"></textarea>
<input type="reset">
<input type="submit" value="Place Order">
</form>
</body>
</html>