Skip to content

Commit ee629d3

Browse files
IceyMintIceyMint
committed
Completed tasks 1-3
1 parent f36af46 commit ee629d3

File tree

2 files changed

+271
-109
lines changed

2 files changed

+271
-109
lines changed

‎css/index.css‎

Lines changed: 226 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -3,144 +3,287 @@
33
License: none (public domain)
44
*/
55

6-
html, body, div, span, applet, object, iframe,
7-
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8-
a, abbr, acronym, address, big, cite, code,
9-
del, dfn, em, img, ins, kbd, q, s, samp,
10-
small, strike, strong, sub, sup, tt, var,
11-
b, u, i, center,
12-
dl, dt, dd, ol, ul, li,
13-
fieldset, form, label, legend,
14-
table, caption, tbody, tfoot, thead, tr, th, td,
15-
article, aside, canvas, details, embed,
16-
figure, figcaption, footer, header, hgroup,
17-
menu, nav, output, ruby, section, summary,
18-
time, mark, audio, video {
19-
margin: 0;
20-
padding: 0;
21-
border: 0;
22-
font-size: 100%;
23-
font: inherit;
24-
vertical-align: baseline;
6+
html,
7+
body,
8+
div,
9+
span,
10+
applet,
11+
object,
12+
iframe,
13+
h1,
14+
h2,
15+
h3,
16+
h4,
17+
h5,
18+
h6,
19+
p,
20+
blockquote,
21+
pre,
22+
a,
23+
abbr,
24+
acronym,
25+
address,
26+
big,
27+
cite,
28+
code,
29+
del,
30+
dfn,
31+
em,
32+
img,
33+
ins,
34+
kbd,
35+
q,
36+
s,
37+
samp,
38+
small,
39+
strike,
40+
strong,
41+
sub,
42+
sup,
43+
tt,
44+
var,
45+
b,
46+
u,
47+
i,
48+
center,
49+
dl,
50+
dt,
51+
dd,
52+
ol,
53+
ul,
54+
li,
55+
fieldset,
56+
form,
57+
label,
58+
legend,
59+
table,
60+
caption,
61+
tbody,
62+
tfoot,
63+
thead,
64+
tr,
65+
th,
66+
td,
67+
article,
68+
aside,
69+
canvas,
70+
details,
71+
embed,
72+
figure,
73+
figcaption,
74+
footer,
75+
header,
76+
hgroup,
77+
menu,
78+
nav,
79+
output,
80+
ruby,
81+
section,
82+
summary,
83+
time,
84+
mark,
85+
audio,
86+
video {
87+
margin: 0;
88+
padding: 0;
89+
border: 0;
90+
font-size: 100%;
91+
font: inherit;
92+
vertical-align: baseline;
2593
}
2694
/* HTML5 display-role reset for older browsers */
27-
article, aside, details, figcaption, figure,
28-
footer, header, hgroup, menu, nav, section {
29-
display: block;
95+
article,
96+
aside,
97+
details,
98+
figcaption,
99+
figure,
100+
footer,
101+
header,
102+
hgroup,
103+
menu,
104+
nav,
105+
section {
106+
display: block;
30107
}
31108
body {
32-
line-height: 1;
109+
line-height: 1;
33110
}
34-
ol, ul {
35-
list-style: none;
111+
ol,
112+
ul {
113+
list-style: none;
36114
}
37-
blockquote, q {
38-
quotes: none;
115+
blockquote,
116+
q {
117+
quotes: none;
39118
}
40-
blockquote:before, blockquote:after,
41-
q:before, q:after {
42-
content: '';
43-
content: none;
119+
blockquote:before,
120+
blockquote:after,
121+
q:before,
122+
q:after {
123+
content: "";
124+
content: none;
44125
}
45126
table {
46-
border-collapse: collapse;
47-
border-spacing: 0;
127+
border-collapse: collapse;
128+
border-spacing: 0;
48129
}
49130

50131
* {
51-
box-sizing: border-box;
132+
box-sizing: border-box;
52133
}
53134

54-
html, body {
55-
height: 100%;
56-
font-family: 'Roboto', sans-serif;
135+
html,
136+
body {
137+
height: 100%;
138+
font-family: "Roboto", sans-serif;
57139
}
58140

59-
h1, h2, h3, h4, h5 {
60-
font-size: 18px;
61-
margin-bottom: 15px;
62-
font-family: 'Rubik', sans-serif;
141+
h1,
142+
h2,
143+
h3,
144+
h4,
145+
h5 {
146+
font-size: 18px;
147+
margin-bottom: 15px;
148+
font-family: "Rubik", sans-serif;
63149
}
64150

65151
p {
66-
line-height: 1.4;
152+
line-height: 1.4;
67153
}
68154

69155
.container {
70-
width: 800px;
71-
margin: 0 auto;
156+
width: 800px;
157+
margin: 0 auto;
72158
}
73159

74160
.top-content {
75-
display: flex;
76-
flex-wrap: wrap;
77-
justify-content: space-evenly;
78-
margin-bottom: 20px;
79-
border-bottom: 1px dashed black;
161+
display: flex;
162+
flex-wrap: wrap;
163+
justify-content: space-evenly;
164+
margin-bottom: 20px;
165+
border-bottom: 1px dashed black;
80166
}
81167

82168
.top-content .text-container {
83-
width: 48%;
84-
padding: 0 1%;
85-
padding-bottom: 20px;
169+
width: 48%;
170+
padding: 0 1%;
171+
padding-bottom: 20px;
86172
}
87173

88174
.middle-content {
89-
margin-bottom: 20px;
90-
border-bottom: 1px dashed black;
175+
margin-bottom: 20px;
176+
border-bottom: 1px dashed black;
91177
}
92178

93179
.middle-content h2 {
94-
padding: 0 2%;
95-
margin-bottom: 0;
180+
padding: 0 2%;
181+
margin-bottom: 0;
96182
}
97183

98184
.middle-content .boxes {
99-
display: flex;
100-
flex-wrap: wrap;
101-
justify-content: space-evenly;
185+
display: flex;
186+
flex-wrap: wrap;
187+
justify-content: space-evenly;
102188
}
103189

104190
.middle-content .boxes .box {
105-
width: 12.5%;
106-
height: 100px;
107-
background: black;
108-
margin: 20px 2.5%;
109-
color: white;
110-
display: flex;
111-
align-items: center;
112-
justify-content: center;
191+
width: 12.5%;
192+
height: 100px;
193+
background: black;
194+
margin: 20px 2.5%;
195+
color: white;
196+
display: flex;
197+
align-items: center;
198+
justify-content: center;
199+
}
200+
201+
#box1 {
202+
background-color: teal;
203+
}
204+
205+
#box2 {
206+
background-color: gold;
207+
}
208+
209+
#box3 {
210+
background-color: cadetblue;
211+
}
212+
213+
#box4 {
214+
background-color: coral;
215+
}
216+
217+
#box5 {
218+
background-color: crimson;
219+
}
220+
221+
#box6 {
222+
background-color: forestgreen;
223+
}
224+
225+
#box7 {
226+
background-color: darkorchid;
227+
}
228+
229+
#box8 {
230+
background-color: hotpink;
231+
}
232+
233+
#box9 {
234+
background-color: indigo;
235+
}
236+
237+
#box10 {
238+
background-color: dodgerblue;
113239
}
114240

115241
.bottom-content {
116-
display: flex;
117-
margin: 0 2% 20px;
118-
justify-content: space-around;
242+
display: flex;
243+
margin: 0 2% 20px;
244+
justify-content: space-around;
119245
}
120246

121247
.bottom-content .text-container {
122-
padding-right: 4%;
248+
padding-right: 4%;
123249
}
124250

125251
.bottom-content .text-container:last-child {
126-
padding-right: 0;
252+
padding-right: 0;
127253
}
128254

129255
footer {
130-
width: 100%;
131-
background: black;
256+
width: 100%;
257+
background: black;
132258
}
133259

134260
footer nav {
135-
width: 60%;
136-
display: flex;
137-
justify-content: space-between;
138-
align-items: center;
139-
padding: 20px 2%;
140-
font-size: 14px;
261+
width: 60%;
262+
display: flex;
263+
justify-content: space-between;
264+
align-items: center;
265+
padding: 20px 2%;
266+
font-size: 14px;
141267
}
142268

143269
footer nav a {
144-
color: white;
145-
text-decoration: none;
146-
}
270+
color: white;
271+
text-decoration: none;
272+
}
273+
274+
header nav {
275+
display: flex;
276+
justify-content: space-between;
277+
align-items: center;
278+
padding: 20px 2%;
279+
font-size: 14px;
280+
}
281+
282+
header nav a {
283+
text-decoration: none;
284+
color: black;
285+
}
286+
287+
.header-img-jumbo {
288+
margin: 10px 0 15px;
289+
}

0 commit comments

Comments
 (0)