Skip to content

Commit f85feba

Browse files
samanpwbbsamanpwbb
committed
🌟
1 parent 2023496 commit f85feba

File tree

4 files changed

+565
-0
lines changed

4 files changed

+565
-0
lines changed

‎colors.css

+281
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,281 @@
1+
/***
2+
3+
colors.css v2.0.0
4+
http://clrs.cc
5+
@mrmrs
6+
MIT License
7+
8+
***/
9+
/*
10+
11+
SKINS
12+
- Backgrounds
13+
- Colors
14+
- Border colors
15+
- SVG fills
16+
- SVG Strokes
17+
18+
*/
19+
/* Backgrounds */
20+
.bg-navy {
21+
background-color: #001F3F; }
22+
23+
.bg-blue {
24+
background-color: #0074D9; }
25+
26+
.bg-aqua {
27+
background-color: #7FDBFF; }
28+
29+
.bg-teal {
30+
background-color: #39CCCC; }
31+
32+
.bg-olive {
33+
background-color: #3D9970; }
34+
35+
.bg-green {
36+
background-color: #2ECC40; }
37+
38+
.bg-lime {
39+
background-color: #01FF70; }
40+
41+
.bg-yellow {
42+
background-color: #FFDC00; }
43+
44+
.bg-orange {
45+
background-color: #FF851B; }
46+
47+
.bg-red {
48+
background-color: #FF4136; }
49+
50+
.bg-fuchsia {
51+
background-color: #F012BE; }
52+
53+
.bg-purple {
54+
background-color: #B10DC9; }
55+
56+
.bg-maroon {
57+
background-color: #85144B; }
58+
59+
.bg-white {
60+
background-color: #fff; }
61+
62+
.bg-gray {
63+
background-color: #aaa; }
64+
65+
.bg-silver {
66+
background-color: #ddd; }
67+
68+
.bg-black {
69+
background-color: #111; }
70+
71+
/* Colors */
72+
.navy {
73+
color: #001F3F; }
74+
75+
.blue {
76+
color: #0074D9; }
77+
78+
.aqua {
79+
color: #7FDBFF; }
80+
81+
.teal {
82+
color: #39CCCC; }
83+
84+
.olive {
85+
color: #3D9970; }
86+
87+
.green {
88+
color: #2ECC40; }
89+
90+
.lime {
91+
color: #01FF70; }
92+
93+
.yellow {
94+
color: #FFDC00; }
95+
96+
.orange {
97+
color: #FF851B; }
98+
99+
.red {
100+
color: #FF4136; }
101+
102+
.fuchsia {
103+
color: #F012BE; }
104+
105+
.purple {
106+
color: #B10DC9; }
107+
108+
.maroon {
109+
color: #85144B; }
110+
111+
.white {
112+
color: #fff; }
113+
114+
.silver {
115+
color: #ddd; }
116+
117+
.gray {
118+
color: #aaa; }
119+
120+
.black {
121+
color: #111; }
122+
123+
/* Border colors
124+
125+
Use with another border utility that sets border-width and style
126+
i.e .border { border-width: 1px; border-style: solid; }
127+
*/
128+
.border--navy {
129+
border-color: #001F3F; }
130+
131+
.border--blue {
132+
border-color: #0074D9; }
133+
134+
.border--aqua {
135+
border-color: #7FDBFF; }
136+
137+
.border--teal {
138+
border-color: #39CCCC; }
139+
140+
.border--olive {
141+
border-color: #3D9970; }
142+
143+
.border--green {
144+
border-color: #2ECC40; }
145+
146+
.border--lime {
147+
border-color: #01FF70; }
148+
149+
.border--yellow {
150+
border-color: #FFDC00; }
151+
152+
.border--orange {
153+
border-color: #FF851B; }
154+
155+
.border--red {
156+
border-color: #FF4136; }
157+
158+
.border--fuchsia {
159+
border-color: #F012BE; }
160+
161+
.border--purple {
162+
border-color: #B10DC9; }
163+
164+
.border--maroon {
165+
border-color: #85144B; }
166+
167+
.border--white {
168+
border-color: #fff; }
169+
170+
.border--gray {
171+
border-color: #aaa; }
172+
173+
.border--silver {
174+
border-color: #ddd; }
175+
176+
.border--black {
177+
border-color: #111; }
178+
179+
/* Fills for SVG */
180+
.fill-navy {
181+
fill: #001F3F; }
182+
183+
.fill-blue {
184+
fill: #0074D9; }
185+
186+
.fill-aqua {
187+
fill: #7FDBFF; }
188+
189+
.fill-teal {
190+
fill: #39CCCC; }
191+
192+
.fill-olive {
193+
fill: #3D9970; }
194+
195+
.fill-green {
196+
fill: #2ECC40; }
197+
198+
.fill-lime {
199+
fill: #01FF70; }
200+
201+
.fill-yellow {
202+
fill: #FFDC00; }
203+
204+
.fill-orange {
205+
fill: #FF851B; }
206+
207+
.fill-red {
208+
fill: #FF4136; }
209+
210+
.fill-fuchsia {
211+
fill: #F012BE; }
212+
213+
.fill-purple {
214+
fill: #B10DC9; }
215+
216+
.fill-maroon {
217+
fill: #85144B; }
218+
219+
.fill-white {
220+
fill: #fff; }
221+
222+
.fill-gray {
223+
fill: #aaa; }
224+
225+
.fill-silver {
226+
fill: #ddd; }
227+
228+
.fill-black {
229+
fill: #111; }
230+
231+
/* Strokes for SVG */
232+
.stroke-navy {
233+
stroke: #001F3F; }
234+
235+
.stroke-blue {
236+
stroke: #0074D9; }
237+
238+
.stroke-aqua {
239+
stroke: #7FDBFF; }
240+
241+
.stroke-teal {
242+
stroke: #39CCCC; }
243+
244+
.stroke-olive {
245+
stroke: #3D9970; }
246+
247+
.stroke-green {
248+
stroke: #2ECC40; }
249+
250+
.stroke-lime {
251+
stroke: #01FF70; }
252+
253+
.stroke-yellow {
254+
stroke: #FFDC00; }
255+
256+
.stroke-orange {
257+
stroke: #FF851B; }
258+
259+
.stroke-red {
260+
stroke: #FF4136; }
261+
262+
.stroke-fuchsia {
263+
stroke: #F012BE; }
264+
265+
.stroke-purple {
266+
stroke: #B10DC9; }
267+
268+
.stroke-maroon {
269+
stroke: #85144B; }
270+
271+
.stroke-white {
272+
stroke: #fff; }
273+
274+
.stroke-gray {
275+
stroke: #aaa; }
276+
277+
.stroke-silver {
278+
stroke: #ddd; }
279+
280+
.stroke-black {
281+
stroke: #111; }

‎index.html

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>First</title>
5+
<link rel='stylesheet' href='reset.css' />
6+
<link rel='stylesheet' href='colors.css' />
7+
<link rel='stylesheet' href='style.css' />
8+
</head>
9+
<body>
10+
11+
<i class='h20 w10 body-container'>
12+
<i class='r2 h8 w10 bg-green chest hover-fill'></i>
13+
14+
<i class='arm-container w10 hover-fill'>
15+
<i class='r2 h9 w4 upper-arm left bg-green'>
16+
<i class='r2 h8 w4 lower-arm left bg-green'>
17+
<i class='h4 w4 hand dot left bg-green'></i>
18+
</i>
19+
</i>
20+
</i>
21+
22+
<i class='arm-container w10 hover-fill'>
23+
<i class='r2 h9 w4 upper-arm right bg-green'>
24+
<i class='r2 h8 w4 lower-arm right bg-green'>
25+
<i class='h4 w4 hand dot right bg-green'></i>
26+
</i>
27+
</i>
28+
</i>
29+
30+
<i class='r6 h10 w8 center-h bg-green head hover-fill'>
31+
<!--<i class='dot h3 w3 center-h center-v bg-white eye'></i>-->
32+
</i>
33+
34+
<i class='dot h9 w9 bg-green pelvis center-h hover-fill'>
35+
</i>
36+
37+
<i class='leg-container w10 hover-fill'>
38+
<i class='r2 h10 w4 upper-leg left bg-green'>
39+
<i class='r2 h12 w4 lower-leg left bg-green'>
40+
<i class='h5 w7 foot dot left bg-green'></i>
41+
</i>
42+
</i>
43+
<i class='r2 h10 w4 upper-leg right bg-green'>
44+
<i class='r2 h12 w4 lower-leg right bg-green'>
45+
<i class='h5 w7 foot r3 right bg-green'></i>
46+
</i>
47+
</i>
48+
</i>
49+
50+
</i>
51+
52+
</body>
53+
</html>

‎reset.css

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/* http://meyerweb.com/eric/tools/css/reset/
2+
v2.0 | 20110126
3+
License: none (public domain)
4+
*/
5+
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;
25+
}
26+
/* HTML5 display-role reset for older browsers */
27+
article, aside, details, figcaption, figure,
28+
footer, header, hgroup, menu, nav, section {
29+
display: block;
30+
}
31+
body {
32+
line-height: 1;
33+
}
34+
ol, ul {
35+
list-style: none;
36+
}
37+
blockquote, q {
38+
quotes: none;
39+
}
40+
blockquote:before, blockquote:after,
41+
q:before, q:after {
42+
content: '';
43+
content: none;
44+
}
45+
table {
46+
border-collapse: collapse;
47+
border-spacing: 0;
48+
}

0 commit comments

Comments
 (0)