Skip to content

Commit ca9365d

Browse files
SagarBiswas-MultiHATSagarBiswas-MultiHAT
authored
Add files via upload
1 parent 10519b4 commit ca9365d

2 files changed

Lines changed: 330 additions & 0 deletions

File tree

‎LAB TASK 1.pdf‎

171 KB
Binary file not shown.

‎registration.html‎

Lines changed: 330 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,330 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Registration Page</title>
6+
<style>
7+
body {
8+
font-family: Arial, Helvetica, sans-serif;
9+
background-color: #f5f5f5;
10+
margin: 0;
11+
padding: 30px;
12+
}
13+
14+
.page-track {
15+
font-size: 14px;
16+
margin-bottom: 10px;
17+
}
18+
19+
.required-hint {
20+
color: #b50000;
21+
font-size: 13px;
22+
margin-bottom: 12px;
23+
}
24+
25+
.form-wrapper {
26+
background-color: #e9e9e9;
27+
border: 1px solid #c8c8c8;
28+
max-width: 640px;
29+
padding: 25px 40px;
30+
margin: 0 auto;
31+
}
32+
33+
h2 {
34+
color: #d21515;
35+
margin-top: 30px;
36+
margin-bottom: 15px;
37+
font-size: 20px;
38+
}
39+
40+
fieldset {
41+
border: none;
42+
padding: 0;
43+
margin: 0;
44+
}
45+
46+
.form-grid {
47+
display: grid;
48+
grid-template-columns: 160px 1fr;
49+
gap: 8px 14px;
50+
margin-bottom: 16px;
51+
}
52+
53+
label {
54+
font-size: 14px;
55+
align-self: center;
56+
}
57+
58+
input[type="text"],
59+
input[type="email"],
60+
input[type="tel"],
61+
select,
62+
textarea {
63+
padding: 6px;
64+
border: 1px solid #b6b6b6;
65+
border-radius: 2px;
66+
font-size: 14px;
67+
width: 100%;
68+
box-sizing: border-box;
69+
}
70+
71+
textarea {
72+
resize: vertical;
73+
min-height: 90px;
74+
}
75+
76+
.inline-group {
77+
display: flex;
78+
flex-wrap: wrap;
79+
align-items: center;
80+
gap: 14px;
81+
font-size: 14px;
82+
}
83+
84+
.inline-group label {
85+
margin-right: 4px;
86+
align-self: center;
87+
}
88+
89+
.small-field {
90+
max-width: 160px;
91+
}
92+
93+
.checkbox-list,
94+
.radio-list {
95+
margin-bottom: 16px;
96+
font-size: 14px;
97+
}
98+
99+
.form-actions {
100+
display: flex;
101+
justify-content: flex-start;
102+
gap: 12px;
103+
margin-top: 20px;
104+
}
105+
106+
button {
107+
background-color: #d6d6d6;
108+
border: 1px solid #a5a5a5;
109+
padding: 6px 20px;
110+
font-size: 14px;
111+
cursor: pointer;
112+
}
113+
114+
button:hover {
115+
background-color: #c0c0c0;
116+
}
117+
118+
hr {
119+
border: none;
120+
border-top: 1px solid #c2c2c2;
121+
margin: 24px 0;
122+
}
123+
</style>
124+
</head>
125+
<body>
126+
<div class="required-hint">* - Denotes Required Information</div>
127+
<div class="page-track">&gt; 1 Donation &nbsp;&nbsp;&gt; 2 Confirmation &nbsp;&nbsp;&gt; Thank You!</div>
128+
129+
<div class="form-wrapper">
130+
<form>
131+
<section>
132+
<h2>Donor Information</h2>
133+
<fieldset>
134+
<div class="form-grid">
135+
<label for="first-name">First Name*</label>
136+
<input id="first-name" name="first-name" type="text" required>
137+
138+
<label for="last-name">Last Name*</label>
139+
<input id="last-name" name="last-name" type="text" required>
140+
141+
<label for="company">Company</label>
142+
<input id="company" name="company" type="text">
143+
144+
<label for="address1">Address 1*</label>
145+
<input id="address1" name="address1" type="text" required>
146+
147+
<label for="address2">Address 2</label>
148+
<input id="address2" name="address2" type="text">
149+
150+
<label for="city">City*</label>
151+
<input id="city" name="city" type="text" required>
152+
153+
<label for="state">State*</label>
154+
<select id="state" name="state" required>
155+
<option value="">Select a State</option>
156+
<option>California</option>
157+
<option>Florida</option>
158+
<option>Georgia</option>
159+
<option>Hawaii</option>
160+
<option>New Mexico</option>
161+
<option>New York</option>
162+
<option>Texas</option>
163+
<option>Washington</option>
164+
</select>
165+
166+
<label for="zip">Zip Code*</label>
167+
<input id="zip" name="zip" type="text" required class="small-field">
168+
169+
<label for="country">Country*</label>
170+
<select id="country" name="country" required>
171+
<option value="">Select a Country</option>
172+
<option>Bangladesh</option>
173+
<option>India</option>
174+
<option>Pakistan</option>
175+
<option>Bhutan</option>
176+
<option>Maldives</option>
177+
<option>Nepal</option>
178+
<option>Sri Lanka</option>
179+
<option>Afghanistan</option>
180+
<option>United States</option>
181+
<option>Canada</option>
182+
<option>United Kingdom</option>
183+
<option>Australia</option>
184+
<option>China</option>
185+
<option>Japan</option>
186+
<option>Germany</option>
187+
<option>France</option>
188+
<option>Italy</option>
189+
<option>Spain</option>
190+
<option>Brazil</option>
191+
<option>South Africa</option>
192+
<option>Mexico</option>
193+
<option>Other</option>
194+
</select>
195+
196+
<label for="phone">Phone</label>
197+
<input id="phone" name="phone" type="tel">
198+
199+
<label for="fax">Fax</label>
200+
<input id="fax" name="fax" type="tel">
201+
202+
<label for="email">Email*</label>
203+
<input id="email" name="email" type="email" required>
204+
</div>
205+
</fieldset>
206+
207+
<div class="radio-list">
208+
<span>Donation Amount*</span>
209+
<div class="inline-group">
210+
<label><input type="radio" name="amount" value="0" checked> None</label>
211+
<label><input type="radio" name="amount" value="50"> $50</label>
212+
<label><input type="radio" name="amount" value="75"> $75</label>
213+
<label><input type="radio" name="amount" value="100"> $100</label>
214+
<label><input type="radio" name="amount" value="250"> $250</label>
215+
<label><input type="radio" name="amount" value="other"> Other</label>
216+
<label>Other Amount $ <input type="text" name="amount-other" class="small-field"></label>
217+
</div>
218+
</div>
219+
220+
<div class="inline-group">
221+
<label><input type="checkbox" name="recurring"> I am interested in giving on a regular basis.</label>
222+
<label>Monthly Credit Card $ <input type="text" name="monthly-amount" class="small-field"></label>
223+
<label>For <input type="text" name="monthly-months" class="small-field"> months</label>
224+
</div>
225+
</section>
226+
227+
<hr>
228+
229+
<section>
230+
<h2>Honorarium and Memorial Donation Information</h2>
231+
<div class="inline-group">
232+
<span>I would like to make this</span>
233+
<label><input type="radio" name="honor-type" value="honor"> To Honor</label>
234+
<label><input type="radio" name="honor-type" value="memory"> In Memory of</label>
235+
</div>
236+
237+
<div class="inline-group" style="margin-top: 10px;">
238+
<span>Acknowledge donation to</span>
239+
<select name="acknowledge-title" class="small-field">
240+
<option value="">Select</option>
241+
<option>Mr.</option>
242+
<option>Mrs.</option>
243+
<option>Ms.</option>
244+
<option>Dr.</option>
245+
<option>Prof.</option>
246+
</select>
247+
</div>
248+
249+
<div class="form-grid" style="margin-top: 10px;">
250+
<label for="ack-name">Name</label>
251+
<input id="ack-name" name="ack-name" type="text">
252+
253+
<label for="ack-address">Address</label>
254+
<input id="ack-address" name="ack-address" type="text">
255+
256+
<label for="ack-city">City</label>
257+
<input id="ack-city" name="ack-city" type="text">
258+
259+
<label for="ack-state">State</label>
260+
<select id="ack-state" name="ack-state">
261+
<option>California</option>
262+
<option>Florida</option>
263+
<option>Georgia</option>
264+
<option>Hawaii</option>
265+
<option>New Mexico</option>
266+
<option>New York</option>
267+
<option>Texas</option>
268+
<option>Washington</option>
269+
</select>
270+
271+
<label for="ack-zip">Zip</label>
272+
<input id="ack-zip" name="ack-zip" type="text" class="small-field">
273+
</div>
274+
</section>
275+
276+
<hr>
277+
278+
<section>
279+
<h2>Additional Information</h2>
280+
<p>Please enter your name, company or organization as you would like it to appear in our publications:</p>
281+
282+
<div class="form-grid" style="margin-bottom: 10px;">
283+
<label for="public-name">Name</label>
284+
<input id="public-name" name="public-name" type="text">
285+
</div>
286+
287+
<div class="checkbox-list">
288+
<label><input type="checkbox" name="anonymous"> I would like my gift to remain anonymous.</label> <br>
289+
<label><input type="checkbox" name="matching"> My employer offers a matching gift program. I will mail the matching gift form.</label> <br>
290+
<label><input type="checkbox" name="no-mail"> Please save the cost of acknowledging this gift by not mailing a thank you letter.</label>
291+
</div>
292+
293+
<label for="comments">Comments</label>
294+
<textarea id="comments" name="comments" placeholder="Please enter any questions or feedback here"></textarea>
295+
296+
<div class="checkbox-list" style="margin-top: 16px;">
297+
<div style="margin-bottom: 5px;">
298+
<span style="margin-top: 10px;">How may we contact you?</span> <br>
299+
</div>
300+
<label><input type="checkbox" name="contact-email"> Email</label> <br>
301+
<label><input type="checkbox" name="contact-mail"> Postal Mail</label> <br>
302+
<label><input type="checkbox" name="contact-phone"> Telephone</label> <br>
303+
<label><input type="checkbox" name="contact-fax"> Fax</label>
304+
</div>
305+
306+
<div class="checkbox-list">
307+
<div style="margin-bottom: 5px;">
308+
<span>I would like to receive newsletters and information about special events by:</span> <br>
309+
</div>
310+
<label><input type="checkbox" name="info-email"> Email</label> <br>
311+
<label><input type="checkbox" name="info-mail"> Postal Mail</label>
312+
</div>
313+
314+
<div class="checkbox-list">
315+
<label><input type="checkbox" name="volunteer"> I would like information about volunteering with the organization.</label>
316+
</div>
317+
</section>
318+
319+
<div class="form-actions">
320+
<button type="reset">Reset</button>
321+
<button type="submit">Continue</button>
322+
</div>
323+
</form>
324+
</div>
325+
326+
<p style="font-size: 12px; margin-top: 18px; color: #505050;">
327+
Donate online with confidence. You are on a secure server. If you have any problems or questions, please contact support.
328+
</p>
329+
</body>
330+
</html>

0 commit comments

Comments
 (0)