Skip to content

Commit 397d546

Browse files
dDevAhmeddDevAhmed
committed
Assignment 1 - Tshirt Signup
1 parent 9036820 commit 397d546

8 files changed

+160
-25
lines changed

‎Class_activity_4.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ <h3>Class Activity Links</h3>
3737
<a href="class_activity_5.html">Calculator</a> |
3838

3939
<h3>Assignment Links</h3>
40-
<a href="assignment_1.html">Google Form</a> |
40+
<a href="assignment_1.html">T-Shirt Signup Form</a> |
4141
<a href="assignment_2.html">Kaduna Electric Form</a> |
4242

4343

‎assignment_1.html

+153-18
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,146 @@
1010
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1111
<title>Google Form T-shirt Signup</title>
1212
<link rel="shortcut icon" href="image/html_favicon/icons8-html-color-32.png" type="image/x-icon">
13+
<style>
14+
* {
15+
box-sizing: border-box;
16+
}
1317

18+
body {
19+
background: whitesmoke;
20+
font-family: sans-serif;
21+
}
22+
23+
main {
24+
width: 550px;
25+
margin: 20px auto;
26+
}
27+
28+
form{
29+
/* font-size: 14px; */
30+
}
31+
32+
header,
33+
form div {
34+
background: white;
35+
padding: 10px 15px;
36+
border-radius: 5px;
37+
margin-bottom: 15px;
38+
}
39+
40+
header {
41+
border-top: 10px solid #673AB7;
42+
padding: 0 0 5px 0;
43+
font-size: 14px;
44+
}
45+
46+
header h1 {
47+
font-weight: 500;
48+
padding: 0 20px;
49+
}
50+
51+
header p a{
52+
text-decoration: none;
53+
}
54+
55+
header p:not(:last-child) {
56+
border-bottom: 1px solid rgba(220, 220, 220, 1.0);
57+
padding: 5px 20px;
58+
}
59+
60+
header p:last-child {
61+
padding: 0 20px;
62+
color: #DD6F41;
63+
}
64+
65+
form div.tshirt-size{
66+
display: flex;
67+
flex-direction: column;
68+
justify-content: center;
69+
}
70+
71+
form div.tshirt-preview img {
72+
width: 50%;
73+
height: auto;
74+
display: block;
75+
margin: 0 auto;
76+
}
77+
78+
form div.submit-clear{
79+
display: flex;
80+
justify-content: space-between;
81+
background: none;
82+
padding: unset;
83+
}
84+
85+
form div.submit-clear button{
86+
background: #673AB7;
87+
color: white;
88+
padding: 5px 15px;
89+
border-radius: 5px;
90+
border: none;
91+
font-size: 12px;
92+
cursor: pointer;
93+
}
94+
95+
form div.submit-clear a{
96+
text-decoration: none;
97+
color: #673AB7;
98+
font-size: 12px;
99+
font-weight: 700;
100+
}
101+
102+
footer{
103+
color: grey;
104+
font-size: 11px;
105+
}
106+
107+
footer a{
108+
color: grey;
109+
}
110+
111+
footer p:nth-child(2){
112+
text-align: center;
113+
margin-top: 15px;
114+
}
115+
116+
footer h3{
117+
text-align: center;
118+
font-size: 18px;
119+
font-family: Arial, Helvetica, sans-serif;
120+
font-weight: 500;
121+
margin-top: 15px;
122+
}
123+
124+
footer a.info img{
125+
height: 25px;
126+
width: auto;
127+
margin-top: -20px;
128+
}
129+
130+
footer h3 span{
131+
font-weight: 700;
132+
}
133+
134+
form div h5 {
135+
font-weight: 500;
136+
}
137+
138+
input[type=text] {
139+
border: none;
140+
border-bottom: 1px solid whitesmoke;
141+
display: block;
142+
width: 100%;
143+
margin: 0 auto;
144+
outline: none;
145+
padding: 5px;
146+
font-size: 14px;
147+
}
148+
149+
input[type=radio] {
150+
margin: 10px 0;
151+
}
152+
</style>
14153
</head>
15154

16155
<body>
@@ -27,28 +166,24 @@ <h3>Class Activities</h3>
27166
<a href="class_activity_5.html">Calculator</a> |
28167

29168
<h3>Assignment Links</h3>
30-
<a href="assignment_1.html">Google Form</a> |
169+
<a href="assignment_1.html">T-Shirt Signup Form</a> |
31170
<a href="assignment_2.html">Kaduna Electric Form</a> |
32171

33-
34-
35172
<main>
36173
<header>
37174
<h1>T-Shirt Sign Up</h1>
38175
<p>Enter your name and size to sign up for a T-shirt</p>
39-
<hr>
40176
<p><a href="#">Sign in to Google</a> to save your progress. <a href="#">Learn more</a></p>
41-
<hr>
42-
<p id="instructions">*Indicates required question</p>
177+
<p id="instructions">* Indicates required question</p>
43178
</header>
44179

45180
<form action="">
46-
<section>
181+
<div>
47182
<h5>Name <span>*</span></h5>
48-
<input type="text" placeholder="Your answer">
49-
</section>
183+
<input type="text" placeholder="Your answer" autofocus>
184+
</div>
50185

51-
<section>
186+
<div class="tshirt-size">
52187
<h5>Shirt size</h5>
53188
<label for="XS">
54189
<input type="radio" name="size" id="XS"> XS
@@ -65,19 +200,19 @@ <h5>Shirt size</h5>
65200
<label for="XL">
66201
<input type="radio" name="size" id="XL"> XL
67202
</label>
68-
</section>
203+
</div>
69204

70-
<section>
205+
<div class="tshirt-preview">
71206
<h5>T-Shirt Preview</h5>
72207
<img src="image/thebodytshirt.png" alt="Body Shirt Image">
73-
</section>
208+
</div>
74209

75-
<section>
210+
<div>
76211
<h5>Other thoughts or comments</h5>
77212
<input type="text" placeholder="Your answer">
78-
</section>
213+
</div>
79214

80-
<div>
215+
<div class="submit-clear">
81216
<button>Submit</button>
82217
<a href="#">Clear form</a>
83218
</div>
@@ -87,8 +222,8 @@ <h5>Other thoughts or comments</h5>
87222
<p>Never submit passwords through Google Forms</p>
88223
<p>This content is neither created nor endorsed by Google <a href="#">Report Abuse</a> - <a href="#">Terms
89224
of Service</a> - <a href="#">Privacy Policy</a></p>
90-
<h3>Google Forms</h3>
91-
<a href="#"><img src="image/icons8-info-100.png" alt="Info Message"></a>
225+
<h3><span>Google</span> Forms</h3>
226+
<a href="#" class="info"><img src="image/icons8-info-100.png" alt="Info Message"></a>
92227
</footer>
93228
</main>
94229
</body>

‎assignment_2.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ <h3>Class Activities</h3>
106106
<a href="class_activity_5.html">Calculator</a> |
107107

108108
<h3>Assignment Links</h3>
109-
<a href="assignment_1.html">Google Form</a> |
109+
<a href="assignment_1.html">T-Shirt Signup Form</a> |
110110
<a href="assignment_2.html">Kaduna Electric Form</a> |
111111

112112
<main>

‎class_activity_1.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ <h3>Class Activity Links</h3>
2626
<a href="class_activity_5.html">Calculator</a> |
2727

2828
<h3>Assignment Links</h3>
29-
<a href="assignment_1.html">Google Form</a> |
29+
<a href="assignment_1.html">T-Shirt Signup Form</a> |
3030
<a href="assignment_2.html">Kaduna Electric Form</a> |
3131

3232

‎class_activity_2.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ <h3>Class Activity Links</h3>
2626
<a href="class_activity_5.html">Calculator</a> |
2727

2828
<h3>Assignment Links</h3>
29-
<a href="assignment_1.html">Google Form</a> |
29+
<a href="assignment_1.html">T-Shirt Signup Form</a> |
3030
<a href="assignment_2.html">Kaduna Electric Form</a> |
3131

3232

‎class_activity_3.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ <h3>Class Activity Links</h3>
4949
<a href="class_activity_5.html">Calculator</a> |
5050

5151
<h3>Assignment Links</h3>
52-
<a href="assignment_1.html">Google Form</a> |
52+
<a href="assignment_1.html">T-Shirt Signup Form</a> |
5353
<a href="assignment_2.html">Kaduna Electric Form</a> |
5454

5555

‎class_activity_5.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ <h3>Class Activity Links</h3>
2222
<a href="class_activity_5.html">Calculator</a> |
2323

2424
<h3>Assignment Links</h3>
25-
<a href="assignment_1.html">Google Form</a> |
25+
<a href="assignment_1.html">T-Shirt Signup Form</a> |
2626
<a href="assignment_2.html">Kaduna Electric Form</a> |
2727

2828

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ <h3>Class Activity Links</h3>
5353
<a href="class_activity_5.html">Calculator</a> |
5454

5555
<h3>Assignment Links</h3>
56-
<a href="assignment_1.html">Google Form</a> |
56+
<a href="assignment_1.html">T-Shirt Signup Form</a> |
5757
<a href="assignment_2.html">Kaduna Electric Form</a> |
5858

5959
<br><br>

0 commit comments

Comments
 (0)