Skip to content

Commit 17daedb

Browse files
obamgbopaobamgbopa
committed
question and resource page
1 parent d940019 commit 17daedb

File tree

3 files changed

+205
-77
lines changed

3 files changed

+205
-77
lines changed

‎frontend/assets/css/style.css

Lines changed: 53 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,8 @@ body {
112112
height: 64px;
113113
} */
114114

115-
#inner {
115+
#inner,
116+
#inner-blue {
116117
display: table;
117118
width: 5%;
118119
margin: 0 auto;
@@ -144,14 +145,21 @@ div .background {
144145
border-radius: 10px;
145146
}
146147

148+
.background-res {
149+
background-size: cover;
150+
height: 100px;
151+
width: 200px;
152+
border-radius: 10px;
153+
}
154+
147155
.transbox {
148156
height: 100%;
149157
width: 100%;
150158
opacity: 0.8;
151159
filter: alpha(opacity=60);
152160
text-align: center;
153161
padding: 15px;
154-
padding-top: 80px;
162+
padding-top: 25px;
155163
border-radius: 10px;
156164
}
157165

@@ -173,6 +181,10 @@ div .background {
173181
background-color: #34444A;
174182
}
175183

184+
.dark-res {
185+
background-color: #082029;
186+
}
187+
176188
#sec-cat,
177189
#grad-awt-cat,
178190
#empl-cat {
@@ -187,15 +199,34 @@ div .background {
187199
text-align: center;
188200
text-decoration: none;
189201
display: inline-block;
190-
background-color: #32ad75;
202+
background-color: #31AD74;
191203
padding: 10px 30px;
192204
border-radius: 2px;
193205
letter-spacing: 1.2px;
194206
}
195207

196208
#inner a:hover,
197209
#inner a:active {
198-
background-color: #5FBA87;
210+
background-color: #345DC6;
211+
}
212+
213+
#inner-blue a:link,
214+
#inner-blue a:visited {
215+
/* background-color: rgba(80, 210, 104, 0.98);
216+
padding: 14px 25px; */
217+
color: white;
218+
text-align: center;
219+
text-decoration: none;
220+
display: inline-block;
221+
background-color: #66A1E8;
222+
padding: 10px 30px;
223+
border-radius: 2px;
224+
letter-spacing: 1.2px;
225+
}
226+
227+
#inner-blue a:hover,
228+
#inner-blue a:active {
229+
background-color: #9188F0;
199230
}
200231

201232
.sec {
@@ -205,7 +236,8 @@ div .background {
205236
}
206237

207238
h2,
208-
h3 {
239+
h3,
240+
label {
209241
font-weight: 500;
210242
/* color: #777; */
211243
font-family: "apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "sans-serif";
@@ -222,4 +254,20 @@ h3 {
222254
height: 100%;
223255
background-color: #ccc;
224256
border-radius: 3px;
257+
}
258+
259+
.questions-bx,
260+
.result-bx {
261+
background-color: white;
262+
}
263+
264+
.qst-cont,
265+
.rst-cont {
266+
align-items: center;
267+
/* padding-left: 120px;
268+
padding-right: 120px; */
269+
display: flex;
270+
flex-direction: column;
271+
justify-content: center;
272+
padding: 20px
225273
}

‎frontend/question.html

Lines changed: 68 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,64 +3,100 @@
33

44
<head>
55
<title>question</title>
6+
<link rel="stylesheet" href="assets/css/style.css">
67
</head>
78

89
<body>
9-
<div id="logo">
10-
<a href="index.html">
11-
<img src="assets/img/logo.png">
12-
</a>
10+
<div class="container">
11+
<div class="row">
12+
<div class="nav-icon col-6">
13+
<a href="index.html"><img src="assets/img/logo.png"> </a>
14+
</div>
15+
<div class="col-6 nav-link" style="text-align:right">
16+
<h3>Coding101</h3>
17+
</div>
18+
</div>
19+
<div class="row">
20+
<div class="col-12" style="text-align:center">
21+
<h2>I am a Secondary School Graduate</h2>
22+
</div>
23+
</div>
24+
<div class="qst-cont">
25+
<div class="questions-bx sec">
26+
<div class="question-#">
27+
<p>What do you prefer as a hobby/ what do you do in your free time</p>
28+
</div>
29+
<div class="hr">
30+
<hr>
31+
</div>
32+
<div class="options">
33+
<div>
34+
<input type="checkbox" name="question-1-answers" id="question-1-answers-A" value="A" />
35+
<label for="question-1-answers-A"> Computer Styled Sections </label>
36+
</div>
1337

14-
</div>
15-
<div id="name">
16-
<h2>Coding101</h2>
17-
</div>
38+
<div>
39+
<input type="checkbox" name="question-1-answers" id="question-1-answers-B" value="B" />
40+
<label for="question-1-answers-B"> Cascading Style Sheets</label>
41+
</div>
1842

19-
<form>
20-
<div id="quiz">
21-
<label>I am a Secondary School Graduate</label>
43+
<div>
44+
<input type="checkbox" name="question-1-answers" id="question-1-answers-C" value="C" />
45+
<label for="question-1-answers-C"> Crazy Solid Shapes</label>
46+
</div>
2247

23-
<div class="quest-1">
24-
<li>
48+
<div>
49+
<input type="checkbox" name="question-1-answers" id="question-1-answers-D" value="D" />
50+
<label for="question-1-answers-D"> None of the above</label>
51+
</div>
52+
</div>
53+
</div>
54+
</div>
2555

26-
<h3>What do you prefer as a hobby/ what do you do in your free time</h3>
56+
<div class="qst-cont">
57+
<div class="questions-bx sec">
58+
<div class="question-#">
59+
<p>What do you prefer as a hobby/ what do you do in your free time</p>
60+
</div>
61+
<div class="hr">
2762
<hr>
28-
63+
</div>
64+
<div class="options">
2965
<div>
30-
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A" />
31-
<label for="question-1-answers-A">A) Computer Styled Sections </label>
66+
<input type="checkbox" name="question-1-answers" id="question-1-answers-A" value="A" />
67+
<label for="question-1-answers-A"> Computer Styled Sections </label>
3268
</div>
3369

3470
<div>
35-
<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B" />
36-
<label for="question-1-answers-B">B) Cascading Style Sheets</label>
71+
<input type="checkbox" name="question-1-answers" id="question-1-answers-B" value="B" />
72+
<label for="question-1-answers-B"> Cascading Style Sheets</label>
3773
</div>
3874

3975
<div>
40-
<input type="radio" name="question-1-answers" id="question-1-answers-C" value="C" />
41-
<label for="question-1-answers-C">C) Crazy Solid Shapes</label>
76+
<input type="checkbox" name="question-1-answers" id="question-1-answers-C" value="C" />
77+
<label for="question-1-answers-C"> Crazy Solid Shapes</label>
4278
</div>
4379

4480
<div>
45-
<input type="radio" name="question-1-answers" id="question-1-answers-D" value="D" />
46-
<label for="question-1-answers-D">D) None of the above</label>
81+
<input type="checkbox" name="question-1-answers" id="question-1-answers-D" value="D" />
82+
<label for="question-1-answers-D"> None of the above</label>
4783
</div>
48-
49-
</li>
50-
84+
</div>
5185
</div>
5286
</div>
5387

54-
<div>
55-
<div id="button">
56-
<button type="button">Back</button>
88+
<div class="row">
89+
<div class="col-6" id="outer">
90+
<div id="inner"><a href="#">Back</a></div>
5791
</div>
58-
<div id="button">
59-
<button type="button">Next</button>
92+
<div class="col-6" id="outer">
93+
<div id="inner"><a href="#">Next</a></div>
6094
</div>
95+
6196
</div>
6297

63-
</form>
98+
99+
</div>
64100
</body>
65101

66102
</html>

‎frontend/result.html

Lines changed: 84 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,54 +2,98 @@
22
<html>
33

44
<head>
5+
<link rel="stylesheet" href="assets/css/style.css">
56
<title>resources</title>
67
</head>
78

89
<body>
9-
<div id="logo">
10-
<a href="index.html">
11-
<img src="assets/img/logo.png">
12-
</a>
13-
14-
</div>
15-
<div id="name">
16-
<p>Coding101</p>
17-
</div>
18-
<div id="content">
19-
<h3>Your Resust</h3>
20-
<p>Based on your result we think you will be best suited for the product design...</p>
21-
</div>
22-
<div class="result-view">
23-
<div class="track">
24-
<p>Visual Design Track</p>
25-
</div>
26-
<hr>
27-
<div class="view">
28-
<p>Visual begin</p>
29-
<p>Developing a design sense</p>
30-
<ol type="1">
31-
<li>Creaate a <u>dribble</u> across looking ...</li>
32-
<li>Creaate a <u>dribble</u> across looking ...</li>
33-
<li>Creaate a <u>dribble</u> across looking ...</li>
34-
</ol>
35-
36-
<p>from counter</p>
37-
<ol type="1">
38-
<li><u>invision fundamental</u> </li>
39-
<li><u>invision fundamental</u> </li>
40-
<li><u>invision fundamental</u> </li>
41-
</ol>
10+
<div class="container">
11+
<div class="row">
12+
<div class="nav-icon col-6">
13+
<a href="index.html"><img src="assets/img/logo.png"> </a>
14+
</div>
15+
<div class="col-6 nav-link" style="text-align:right">
16+
<h3>Coding101</h3>
17+
</div>
4218
</div>
43-
<div class="track-res">
44-
<p>Visual design resources</p>
45-
<hr>
46-
<div class="res-link">
47-
<a href="#">resources url</a>
48-
<a href="#">resources url</a>
19+
<div class="content">
20+
<div class="row">
21+
<div class="col-12" style="text-align:center">
22+
<h2>Your Results</h2>
23+
</div>
24+
</div>
25+
<div class="row">
26+
<div class="col-12 sec" style="text-align:center">
27+
<p>Based on your result we think you will be best suited for the product design... We've carefully prepared the following resources to guide you in your journey</p>
28+
</div>
29+
</div>
30+
31+
<div class="rst-cont">
32+
<div class="result-bx sec">
33+
<div class="result-#">
34+
<p>Visual Design Track</p>
35+
</div>
36+
<div class="hr">
37+
<hr>
38+
</div>
39+
<div class="view">
40+
<p>Visual begin</p>
41+
<p>Developing a design sense</p>
42+
<ol type="1">
43+
<li>Creaate a <u>dribble</u> across looking ...</li>
44+
<li>Creaate a <u>dribble</u> across looking ...</li>
45+
<li>Creaate a <u>dribble</u> across looking ...</li>
46+
</ol>
47+
48+
<p>from counter</p>
49+
<ol type="1">
50+
<li><u>invision fundamental</u> </li>
51+
<li><u>invision fundamental</u> </li>
52+
<li><u>invision fundamental</u> </li>
53+
</ol>
54+
</div>
55+
</div>
56+
</div>
57+
58+
<div class="rst-cont">
59+
<div class="result-bx sec">
60+
<div class="result-#">
61+
<p>Visual Design Resources</p>
62+
</div>
63+
<div class="hr">
64+
<hr>
65+
</div>
66+
67+
<div class="row">
68+
<div id="sec-cat" class="col-6">
69+
<div class="background-res">
70+
<div class="transbox dark-res">
71+
<p>resources url</p>
72+
</div>
73+
</div>
74+
</div>
75+
<div id="grad-awt-cat" class="col-6">
76+
<div class="background-res">
77+
<div class="transbox dark-res">
78+
<p>resources url</p>
79+
</div>
80+
</div>
81+
</div>
82+
83+
</div>
84+
85+
</div>
86+
</div>
87+
88+
<div class="row">
89+
<div class="col-12" id="outer">
90+
<div id="inner-blue"><a href="#">Start Over </a></div>
91+
</div>
4992
</div>
5093
</div>
51-
</div>
5294

95+
96+
</div>
5397
</body>
5498

5599
</html>

0 commit comments

Comments
 (0)