Skip to content

Commit 251f67c

Browse files
dDevAhmeddDevAhmed
committed
Class activity 13
1 parent f71fc94 commit 251f67c

File tree

2 files changed

+199
-0
lines changed

2 files changed

+199
-0
lines changed

‎class_activity_13.html

+184
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Revision 3</title>
8+
<link rel="shortcut icon" href="image/html_favicon/icons8-html-color-32.png" type="image/x-icon">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
10+
11+
<style>
12+
* {
13+
box-sizing: border-box;
14+
}
15+
16+
:root {
17+
--container-color: #567CC7;
18+
--header-color: #B6BFD0;
19+
}
20+
21+
body {
22+
background-color: whitesmoke;
23+
}
24+
25+
.page-container {
26+
width: 70%;
27+
margin: 20px auto;
28+
background: white;
29+
padding: 5px 50px;
30+
font-family: 'Times New Roman', Times, serif;
31+
padding-bottom: 30px;
32+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
33+
text-align: center;
34+
}
35+
36+
.page-container form{
37+
display: flex;
38+
align-items: center;
39+
gap: 30px;
40+
justify-content: center;
41+
/* fixme - center the form horizontally */
42+
/* margin: auto; */
43+
}
44+
45+
form .right-column{
46+
text-align: left;
47+
}
48+
49+
form p{
50+
text-align: right;
51+
}
52+
53+
form input, form label{
54+
display: block;
55+
}
56+
57+
/* .row p {
58+
text-align: right !important;
59+
}
60+
61+
.row input[type="radio"],
62+
.row input[type="checkbox"] {
63+
display: block;
64+
} */
65+
</style>
66+
</head>
67+
68+
<body>
69+
<h1>Revision 3: Page Replicate</h1>
70+
<!-- fixme - refine -->
71+
<p>It's revision time! 📝 In this activity, I'll be replicating a straightforward yet essential web page to hone my
72+
skills. The goal is to perfectly match the content and structure provided. Here's what the replicated page
73+
includes:</p>
74+
75+
76+
<h3>Class Activity Links</h3>
77+
<a href="index.html">Home page</a> |
78+
<a href="class_activity_1.html">Favorite Food</a> |
79+
<a href="class_activity_2.html">Login Form</a> |
80+
<a href="class_activity_3.html">Favorite Book</a> |
81+
<a href="class_activity_4.html">Feedback Form</a> |
82+
<a href="class_activity_5.html">Basic Calculator</a> |
83+
<a href="class_activity_6.html">Html Multimedia</a> |
84+
<a href="class_activity_7.html">Page Replicate</a> |
85+
<a href="class_activity_8.html">Financial Webpage Replication</a> |
86+
<a href="class_activity_9.html">Weekly Planner</a> |
87+
<a href="class_activity_10.html">Weekly Classroom Schedule</a> |
88+
<a href="class_activity_11.html">Revision 1</a> |
89+
<a href="class_activity_12.html">Revision 2</a> |
90+
91+
<h3>Assignment Links</h3>
92+
<a href="assignment_1.html">T-Shirt Signup Form</a> |
93+
<a href="assignment_2.html">Kaduna Electric Form</a> |
94+
<a href="assignment_3.html">Cable TV Packages</a> |
95+
96+
<h3>Project Preview Links</h3>
97+
<a href="https://deliciousbytes.vercel.app/" target="_blank">Delicious Bytes Food Menu</a> |
98+
99+
<div class="page-container">
100+
<h5>Let us know how we can improve freeCodeCamp</h5>
101+
<!-- <form action="">
102+
<div class="row">
103+
<p>* Name</p>
104+
<input type="text" name="name" id="">
105+
</div>
106+
<div class="row">
107+
<p>* Email</p>
108+
<input type="email" name="email" id="">
109+
</div>
110+
<div class="row">
111+
<p>* Age</p>
112+
<input type="number" name="age" id="">
113+
</div>
114+
<div class="row">
115+
<p>Which option best describes your current role? </p>
116+
<select name="role" id="">
117+
<option value="student">Student</option>
118+
<option value="student">Not Student</option>
119+
</select>
120+
</div>
121+
<div class="row">
122+
<p>* How likely is that you would recommend <br> freeCodeCamp to a friend?</p>
123+
<span>
124+
<label><input type="radio" name="recommend" id="">Definitely</label>
125+
<label><input type="radio" name="recommend" id="">Maybe</label>
126+
<label><input type="radio" name="recommend" id="">Not sure</label>
127+
</span>
128+
</div>
129+
<div class="row">
130+
<p>What do you like most in FCC:</p>
131+
<select name="role" id="">
132+
<option value="student">Select an option</option>
133+
<option value="student">Not Student</option>
134+
</select>
135+
</div>
136+
<div class="row">
137+
<p>Things that should be improved in the future <br>(Check all that apply): </p>
138+
<span>
139+
<label><input type="checkbox" name="recommend" id="">Front-end Projects</label>
140+
<label><input type="checkbox" name="recommend" id="">Back-end Projects</label>
141+
<label><input type="checkbox" name="recommend" id="">Data Visualization</label>
142+
</span>
143+
</div>
144+
</form> -->
145+
146+
<!-- second approach -->
147+
<form action="">
148+
<div class="left-column">
149+
<p>* Name</p>
150+
<p>* Email</p>
151+
<p>* Age</p>
152+
<p>Which option best describes your current role? </p>
153+
<p>* How likely is that you would recommend <br> freeCodeCamp to a friend?</p>
154+
<p>What do you like most in FCC:</p>
155+
<p>Things that should be improved in the future <br>(Check all that apply): </p>
156+
</div>
157+
<div class="right-column">
158+
<input type="text" name="name" id="">
159+
<input type="email" name="email" id="">
160+
<input type="number" name="age" id="">
161+
<select name="role" id="">
162+
<option value="student">Student</option>
163+
<option value="student">Not Student</option>
164+
</select>
165+
<span>
166+
<label><input type="radio" name="recommend" id="">Definitely</label>
167+
<label><input type="radio" name="recommend" id="">Maybe</label>
168+
<label><input type="radio" name="recommend" id="">Not sure</label>
169+
</span>
170+
<select name="role" id="">
171+
<option value="student">Select an option</option>
172+
<option value="student">Not Student</option>
173+
</select>
174+
<span>
175+
<label><input type="checkbox" name="recommend" id="">Front-end Projects</label>
176+
<label><input type="checkbox" name="recommend" id="">Back-end Projects</label>
177+
<label><input type="checkbox" name="recommend" id="">Data Visualization</label>
178+
</span>
179+
</div>
180+
</form>
181+
</div>
182+
</body>
183+
184+
</html>

‎test.html

+15
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,21 @@
3636
<div class="rect-to-triangle"></div>
3737
<!-- transform a rectangle div to an acute triangle -->
3838

39+
<center>
40+
<div>
41+
<label for="nane">name</label> &ThinSpace;
42+
<input type="text">
43+
</div>
44+
<div>
45+
<label for="nane">will you recommend</label> &ThinSpace;
46+
<span>
47+
<label for=""> <input type="radio" name="recommend">Definitely</label><br>
48+
<label for=""> <input type="radio" name="recommend">maybe</label><br>
49+
<label for=""> <input type="radio" name="recommend">not sure</label>
50+
</span>
51+
</div>
52+
</center>
53+
3954
</body>
4055

4156
</html>

0 commit comments

Comments
 (0)