|
21 | 21 | <div class="font-md mt-1">Find out by answering 10 MCQ questions!</div> |
22 | 22 | <div class="my-5 pt-2 font-mds">WHAT TO KNOW BEFORE YOU BEGIN:</div> |
23 | 23 | <div class="row pb-5 border-bottom mb-5"> |
24 | | - <div class="col-4"> |
| 24 | + <div class="col-sm-4 mb-sm-0 mb-4"> |
25 | 25 | <div class="font-mds bold mb-3 v-align-ma"> |
26 | 26 | <img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/clock-small.svg" class="mr-2"> |
27 | 27 | <span>Timed</span> |
|
30 | 30 | The questions are timed, you will get 30 seconds for one question. |
31 | 31 | </div> |
32 | 32 | </div> |
33 | | - <div class="col-4"> |
| 33 | + <div class="col-sm-4 mb-sm-0 mb-4"> |
34 | 34 | <div class="font-mds bold mb-3 v-align-ma"> |
35 | 35 | <img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/files-small.svg" class="mr-2"> |
36 | 36 | <span>Questions</span> |
|
39 | 39 | There will be 10 skill based MCQ questions. |
40 | 40 | </div> |
41 | 41 | </div> |
42 | | - <div class="col-4"> |
| 42 | + <div class="col-sm-4 mb-sm-0 mb-4"> |
43 | 43 | <div class="font-mds bold mb-3 v-align-ma"> |
44 | 44 | <img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/repeat-small.svg" class="mr-2"> |
45 | 45 | <span>Retake</span> |
|
72 | 72 | </div> |
73 | 73 | </div> |
74 | 74 | <div class="bg-white p-md-5 p-4"> |
75 | | - <div class="row no-gutters align-items-center justify-content-between pb-5 mb-5 border-bottom"> |
76 | | - <div class="flex-1"> |
| 75 | + <div class="row no-gutters align-items-center justify-content-between pb-5 mb-sm-5 mb-4 border-bottom"> |
| 76 | + <div class="flex-1 pr-4"> |
77 | 77 | <div class="row no-gutters align-items-center"> |
78 | 78 | <img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/tick_solid.svg"> |
79 | 79 | <div class="flex-1 pl-4"> |
|
82 | 82 | </div> |
83 | 83 | </div> |
84 | 84 | </div> |
85 | | - <div> |
| 85 | + <div class="d-sm-block d-none"> |
86 | 86 | <ul class="divided-list"> |
87 | | - <li class="px-5"> |
| 87 | + <li class="px-sm-5 px-4"> |
| 88 | + <div class="font-mdxl green bold mb-2">10</div> |
| 89 | + <div class="font-md">Questions</div> |
| 90 | + </li> |
| 91 | + <li class="px-sm-5 px-4"> |
| 92 | + <div class="font-mdxl green bold mb-2">07</div> |
| 93 | + <div class="font-md">Correct</div> |
| 94 | + </li> |
| 95 | + </ul> |
| 96 | + </div> |
| 97 | + </div> |
| 98 | + <div class="row no-gutters justify-content-end d-sm-none d-block mb-5"> |
| 99 | + <div> |
| 100 | + <ul class="divided-list mx-auto" style="width: fit-content;"> |
| 101 | + <li class="px-sm-5 px-4"> |
88 | 102 | <div class="font-mdxl green bold mb-2">10</div> |
89 | 103 | <div class="font-md">Questions</div> |
90 | 104 | </li> |
91 | | - <li class="px-5"> |
| 105 | + <li class="px-sm-5 px-4"> |
92 | 106 | <div class="font-mdxl green bold mb-2">07</div> |
93 | 107 | <div class="font-md">Correct</div> |
94 | 108 | </li> |
|
119 | 133 | </div> |
120 | 134 | </div> |
121 | 135 | <div class="bg-white p-md-5 p-4"> |
122 | | - <div class="row no-gutters align-items-center justify-content-between pb-5 mb-5 border-bottom"> |
123 | | - <div class="flex-1"> |
| 136 | + <div class="row no-gutters align-items-center justify-content-between pb-5 mb-sm-5 mb-4 border-bottom"> |
| 137 | + <div class="flex-1 pr-4"> |
124 | 138 | <div class="row no-gutters align-items-center"> |
125 | | - <img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/tick_solid.svg"> |
| 139 | + <img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/cross_solid.svg"> |
126 | 140 | <div class="flex-1 pl-4"> |
127 | | - <div class="font-mdxl green bold">Congratulations</div> |
128 | | - <div class="font-md mt-2">You are eligible for this course</div> |
| 141 | + <div class="font-mdxl pink bold">Sorry, you missed it!</div> |
| 142 | + <div class="font-md mt-2">You are not eligible for this course</div> |
129 | 143 | </div> |
130 | 144 | </div> |
131 | 145 | </div> |
132 | | - <div> |
| 146 | + <div class="d-sm-block d-none"> |
133 | 147 | <ul class="divided-list"> |
134 | | - <li class="px-5"> |
135 | | - <div class="font-mdxl green bold mb-2">10</div> |
| 148 | + <li class="px-sm-5 px-4"> |
| 149 | + <div class="font-mdxl pink bold mb-2">10</div> |
136 | 150 | <div class="font-md">Questions</div> |
137 | 151 | </li> |
138 | | - <li class="px-5"> |
139 | | - <div class="font-mdxl green bold mb-2">07</div> |
| 152 | + <li class="px-sm-5 px-4"> |
| 153 | + <div class="font-mdxl pink bold mb-2">03</div> |
| 154 | + <div class="font-md">Correct</div> |
| 155 | + </li> |
| 156 | + </ul> |
| 157 | + </div> |
| 158 | + </div> |
| 159 | + <div class="row no-gutters justify-content-end d-sm-none d-block mb-5"> |
| 160 | + <div> |
| 161 | + <ul class="divided-list mx-auto" style="width: fit-content;"> |
| 162 | + <li class="px-sm-5 px-4"> |
| 163 | + <div class="font-mdxl pink bold mb-2">10</div> |
| 164 | + <div class="font-md">Questions</div> |
| 165 | + </li> |
| 166 | + <li class="px-sm-5 px-4"> |
| 167 | + <div class="font-mdxl pink bold mb-2">03</div> |
140 | 168 | <div class="font-md">Correct</div> |
141 | 169 | </li> |
142 | 170 | </ul> |
|
148 | 176 | </div> |
149 | 177 |
|
150 | 178 | <div class="row c-card-carousel"> |
151 | | - <div class="col-5"> |
| 179 | + <div class="col-xl-5 col-sm-8 col-10"> |
152 | 180 | <div class="br-10 overflow-hidden"> |
153 | 181 | <div class="row no-gutters justify-content-between align-items-center bg-gradient-pink py-4 px-lg-5 px-4"> |
154 | 182 | <div class="flex-1 pr-4 white" style="max-width: calc(100% - 75px);"> |
|
182 | 210 | </div> |
183 | 211 | </div> |
184 | 212 | </div> |
185 | | - <div class="col-5"> |
| 213 | + <div class="col-xl-5 col-sm-8 col-10"> |
186 | 214 | <div class="br-10 overflow-hidden"> |
187 | 215 | <div class="row no-gutters justify-content-between align-items-center bg-gradient-pink py-4 px-lg-5 px-4"> |
188 | 216 | <div class="flex-1 pr-4 white" style="max-width: calc(100% - 75px);"> |
|
216 | 244 | </div> |
217 | 245 | </div> |
218 | 246 | </div> |
219 | | - <div class="col-5"> |
| 247 | + <div class="col-xl-5 col-sm-8 col-10"> |
220 | 248 | <div class="br-10 overflow-hidden"> |
221 | 249 | <div class="row no-gutters justify-content-between align-items-center bg-gradient-pink py-4 px-lg-5 px-4"> |
222 | 250 | <div class="flex-1 pr-4 white" style="max-width: calc(100% - 75px);"> |
|
262 | 290 | Skill Assessment Test: Frontend Developement |
263 | 291 | </div> |
264 | 292 | <div class="row no-gutters align-items-center justify-content-between mb-5"> |
265 | | - <div class="flex-1"> |
| 293 | + <div class="flex-1 pr-4"> |
266 | 294 | <div class="font-md bold"> |
267 | 295 | Q1. What is the preferred way for adding a background color in HTML? |
268 | 296 | </div> |
|
300 | 328 | </div> |
301 | 329 |
|
302 | 330 | <div class="row no-gutters justify-content-between align-items-center mt-5"> |
303 | | - <div class="col-8"> |
| 331 | + <div class="col-sm-8 col-6"> |
304 | 332 | <div class="med-grey font-sm">8 Questions Remaining</div> |
305 | 333 | <div class="mt-4"> |
306 | 334 | <progress value="40" max="100"></progress> |
|
318 | 346 | Skill Assessment Test: Frontend Developement |
319 | 347 | </div> |
320 | 348 | <div class="row no-gutters align-items-center justify-content-between mb-5"> |
321 | | - <div class="flex-1"> |
| 349 | + <div class="flex-1 pr-4"> |
322 | 350 | <div class="font-md bold"> |
323 | 351 | Q1. What is the preferred way for adding a background color in HTML? |
324 | 352 | </div> |
|
331 | 359 | </div> |
332 | 360 | </div> |
333 | 361 | <div |
334 | | - class="border-card py-3 px-4 mb-4 hover-grey pointer row no-gutters align-items-center justify-content-between"> |
| 362 | + class="border-card py-3 px-4 mb-4 hover-grey pointer row no-gutters align-items-center justify-content-between b-green"> |
335 | 363 | <div class="font-md"> |
336 | 364 | some random option |
337 | 365 | </div> |
| 366 | + <img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/tick_green.svg"> |
338 | 367 | </div> |
339 | 368 | <div |
340 | | - class="border-card py-3 px-4 mb-4 hover-grey pointer row no-gutters align-items-center justify-content-between"> |
| 369 | + class="border-card py-3 px-4 mb-4 hover-grey pointer row no-gutters align-items-center justify-content-between bg-green"> |
341 | 370 | <div class="font-md"> |
342 | 371 | some random option |
343 | 372 | </div> |
| 373 | + <img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/tick_grey.svg"> |
344 | 374 | </div> |
345 | 375 | <div |
346 | | - class="border-card py-3 px-4 mb-4 hover-grey pointer row no-gutters align-items-center justify-content-between"> |
| 376 | + class="border-card py-3 px-4 mb-4 hover-grey pointer row no-gutters align-items-center justify-content-between bg-pink"> |
347 | 377 | <div class="font-md"> |
348 | 378 | some random option |
349 | 379 | </div> |
| 380 | + <img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/cross_white.svg"> |
350 | 381 | </div> |
351 | 382 | <div |
352 | 383 | class="border-card py-3 px-4 mb-4 hover-grey pointer row no-gutters align-items-center justify-content-between"> |
|
356 | 387 | </div> |
357 | 388 |
|
358 | 389 | <div class="row no-gutters justify-content-between align-items-center mt-5"> |
359 | | - <div class="col-8"> |
| 390 | + <div class="col-sm-8 col-6"> |
360 | 391 | <div class="med-grey font-sm">8 Questions Remaining</div> |
361 | 392 | <div class="mt-4"> |
362 | 393 | <progress value="40" max="100"></progress> |
|
0 commit comments