Skip to content

Commit 59b12de

Browse files
theoomoregbeetheoomoregbee
authored
Merge pull request #14 from devcenter-square/frontend-task
Add style to your html code
2 parents 4bf39f5 + e1e56b5 commit 59b12de

File tree

8 files changed

+547
-131
lines changed

8 files changed

+547
-131
lines changed

‎frontend/assets/css/style.css

+293
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,293 @@
1+
* {
2+
-webkit-box-sizing: border-box;
3+
-moz-box-sizing: border-box;
4+
-ms-box-sizing: border-box;
5+
box-sizing: border-box;
6+
}
7+
8+
.container {
9+
width: auto;
10+
margin-right: auto;
11+
margin-left: auto;
12+
padding-left: 15px;
13+
padding-right: 15px;
14+
}
15+
16+
body {
17+
background-color: #f8fdff;
18+
letter-spacing: 0.3px;
19+
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
20+
font-size: 15px;
21+
letter-spacing: 1px;
22+
border-radius: 10px;
23+
/* text-align: center;
24+
padding: 15px;
25+
padding-top: 80px;
26+
*/
27+
}
28+
29+
@media (min-width:768px) {
30+
.container {
31+
width: 750px
32+
}
33+
}
34+
35+
@media (min-width:992px) {
36+
.container {
37+
width: 970px
38+
}
39+
}
40+
41+
@media (min-width:1200px) {
42+
.container {
43+
width: 1170px
44+
}
45+
}
46+
47+
.container-fluid {
48+
margin-right: auto;
49+
margin-left: auto;
50+
padding-left: 15px;
51+
padding-right: 15px
52+
}
53+
54+
.grid {
55+
margin: 0 auto;
56+
max-width: 1200px;
57+
width: 100%;
58+
}
59+
60+
.row {
61+
width: 100%;
62+
margin-bottom: 20px;
63+
display: flex;
64+
margin-left: -15px;
65+
margin-right: -15px;
66+
}
67+
68+
.col-1 {
69+
width: 8.33%;
70+
}
71+
72+
.col-2 {
73+
width: 16.66%;
74+
}
75+
76+
.col-3 {
77+
width: 25%;
78+
}
79+
80+
.col-4 {
81+
width: 33.33%;
82+
}
83+
84+
.col-5 {
85+
width: 41.66%;
86+
}
87+
88+
.col-6 {
89+
width: 50%;
90+
}
91+
92+
.col-7 {
93+
width: 58.33%;
94+
}
95+
96+
.col-8 {
97+
width: 66.66%;
98+
}
99+
100+
.col-9 {
101+
width: 75%;
102+
}
103+
104+
.col-10 {
105+
width: 83.33%;
106+
}
107+
108+
.col-11 {
109+
width: 91.66%;
110+
}
111+
112+
.col-12 {
113+
width: 100%;
114+
}
115+
116+
117+
/* .nav-icon {
118+
width: 64px;
119+
height: 64px;
120+
} */
121+
122+
#inner,
123+
#inner-blue {
124+
display: table;
125+
/* width: 5%; */
126+
margin: 0 auto;
127+
/*
128+
background-color: #4CAF50;
129+
border: none;
130+
color: white;
131+
padding: 15px 32px;
132+
text-align: center;
133+
text-decoration: none;
134+
display: inline-block;
135+
font-size: 16px;
136+
margin: 4px 2px;
137+
cursor: pointer;
138+
*/
139+
}
140+
141+
div .background {
142+
-webkit-box-shadow: 3px 4px 5px -2px rgba(0, 0, 0, 0.4);
143+
-moz-box-shadow: 3px 4px 5px -2px rgba(0, 0, 0, 0.4);
144+
box-shadow: 3px 4px 5px -2px rgba(0, 0, 0, 0.4);
145+
}
146+
147+
.background {
148+
background: url(../img/student.jpg);
149+
background-size: cover;
150+
height: 200px;
151+
width: 200px;
152+
border-radius: 10px;
153+
}
154+
155+
.background-res {
156+
background-size: cover;
157+
height: 100px;
158+
width: 200px;
159+
border-radius: 10px;
160+
}
161+
162+
.transbox {
163+
height: 100%;
164+
width: 100%;
165+
opacity: 0.8;
166+
filter: alpha(opacity=60);
167+
text-align: center;
168+
padding: 15px;
169+
padding-top: 25px;
170+
border-radius: 10px;
171+
}
172+
173+
.transbox p {
174+
margin: 5px;
175+
font-size: 15px;
176+
letter-spacing: 1px;
177+
color: #ffffff;
178+
padding-top: 50px;
179+
}
180+
181+
div.dark-res p {
182+
padding-top: 10px;
183+
}
184+
185+
.blue {
186+
background-color: #08b2ea;
187+
}
188+
189+
.green {
190+
background-color: rgba(80, 210, 104, 0.98);
191+
}
192+
193+
.dark {
194+
background-color: #34444A;
195+
}
196+
197+
.dark-res {
198+
background-color: #082029;
199+
}
200+
201+
#sec-cat,
202+
#grad-awt-cat,
203+
#empl-cat {
204+
margin: 10px;
205+
margin-right: 20px;
206+
margin-left: 20px;
207+
}
208+
209+
#inner a:link,
210+
#inner a:visited {
211+
/* background-color: rgba(80, 210, 104, 0.98);
212+
padding: 14px 25px; */
213+
color: white;
214+
text-align: center;
215+
text-decoration: none;
216+
display: inline-block;
217+
background-color: #31AD74;
218+
padding: 10px 30px;
219+
border-radius: 2px;
220+
letter-spacing: 1.2px;
221+
margin-left: 10px;
222+
margin-right: 10px;
223+
}
224+
225+
#inner a:hover,
226+
#inner a:active {
227+
background-color: #44B47E;
228+
}
229+
230+
#inner-blue a:link,
231+
#inner-blue a:visited {
232+
/* background-color: rgba(80, 210, 104, 0.98);
233+
padding: 14px 25px; */
234+
color: white;
235+
text-align: center;
236+
text-decoration: none;
237+
display: inline-block;
238+
background-color: #66A1E8;
239+
padding: 10px 30px;
240+
border-radius: 2px;
241+
letter-spacing: 1.2px;
242+
}
243+
244+
#inner-blue a:hover,
245+
#inner-blue a:active {
246+
background-color: #9188F0;
247+
}
248+
249+
.sec {
250+
font-weight: 500;
251+
color: #777;
252+
font-family: "apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "sans-serif";
253+
}
254+
255+
h2,
256+
h3,
257+
label {
258+
font-weight: 500;
259+
/* color: #777; */
260+
font-family: "apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "sans-serif";
261+
}
262+
263+
.center-div {
264+
position: absolute;
265+
margin: auto;
266+
top: 0;
267+
right: 0;
268+
bottom: 0;
269+
left: 0;
270+
width: 100%;
271+
height: 100%;
272+
background-color: #ccc;
273+
border-radius: 3px;
274+
box-shadow: 10px 10px 5px #888888;
275+
}
276+
277+
.questions-bx,
278+
.result-bx {
279+
background-color: white;
280+
box-shadow: 3px 3px 5px #888888;
281+
padding: 20px;
282+
}
283+
284+
.qst-cont,
285+
.rst-cont {
286+
align-items: center;
287+
/* padding-left: 120px;
288+
padding-right: 120px; */
289+
display: flex;
290+
flex-direction: column;
291+
justify-content: center;
292+
padding: 20px
293+
}

‎frontend/assets/img/logo.png

3.11 KB
Loading

‎frontend/assets/img/student.jpg

60.7 KB
Loading

‎frontend/category.html

+36-28
Original file line numberDiff line numberDiff line change
@@ -2,44 +2,52 @@
22
<html>
33

44
<head>
5-
<title>user-category</title>
5+
<title>Category - Coding 101. learn where you fit in tech</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/devcenter-logo.svg">
12-
</a>
13-
14-
</div>
15-
<div id="name">
16-
<h2>Coding101</h2>
17-
</div>
18-
<div id="content">
19-
<h2>I am a..</h2>
20-
</div>
21-
22-
<div id="sec-cat">
23-
<div class="background">
24-
<div class="transbox">
25-
<p>Secondary School Graduate</p>
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>
2617
</div>
2718
</div>
28-
</div>
29-
<div id="grad-awt-cat">
30-
<div class="background">
31-
<div class="transbox">
32-
<p>Student/ Graduate/ Awaiting NYSC</p>
19+
20+
<div class="row">
21+
<div class="col-12" id="content" style="text-align:center">
22+
<h2>I am a..</h2>
3323
</div>
3424
</div>
35-
</div>
36-
<div id="empl-cat">
37-
<div class="background">
38-
<div class="transbox">
39-
<p>Employed/ Corp Members/ Unemployed</p>
25+
26+
<div class="row">
27+
<div id="sec-cat" class="col-4">
28+
<div class="background">
29+
<div class="transbox blue">
30+
<p>Secondary School Graduate</p>
31+
</div>
32+
</div>
33+
</div>
34+
<div id="grad-awt-cat" class="col-4">
35+
<div class="background">
36+
<div class="transbox green">
37+
<p>Student/ Graduate/ Awaiting NYSC</p>
38+
</div>
39+
</div>
40+
</div>
41+
<div id="empl-cat" class="col-4">
42+
<div class="background">
43+
<div class="transbox dark">
44+
<p>Employed/ Corp Members/ Unemployed</p>
45+
</div>
46+
</div>
4047
</div>
4148
</div>
4249
</div>
50+
4351
</body>
4452

4553
</html>

0 commit comments

Comments
 (0)