|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <link rel='stylesheet' type='text/css' href='style.css'> |
|
4 <style> |
|
5 body > div:nth-child(1) > .meter-bar { margin: 10px; padding: 0px; } |
|
6 body > div:nth-child(2) > .meter-bar { margin: 0px; padding: 10px; } |
|
7 body > div:nth-child(3) > .meter-bar { margin: 10px; padding: 10px; } |
|
8 body > div:nth-child(4) > .meter-bar { margin: 5px; padding: 5px; } |
|
9 body > div:nth-child(5) > .meter-bar { margin: 50px; padding: 50px; } |
|
10 body > div:nth-child(6) > .meter-bar { margin: 100px; padding: 100px; } |
|
11 body > div:nth-child(7) > .meter-bar { margin: 10px 0px 0px 0px; padding: 0px; } |
|
12 body > div:nth-child(8) > .meter-bar { margin: 0px 10px 0px 0px; padding: 0px; } |
|
13 body > div:nth-child(9) > .meter-bar { margin: 0px 0px 10px 0px; padding: 0px; } |
|
14 body > div:nth-child(10) > .meter-bar { margin: 0px 0px 0px 10px; padding: 0px; } |
|
15 body > div:nth-child(11) > .meter-bar { margin: 0px; padding: 10px 0px 0px 0px; } |
|
16 body > div:nth-child(12) > .meter-bar { margin: 0px; padding: 0px 10px 0px 0px; } |
|
17 body > div:nth-child(13) > .meter-bar { margin: 0px; padding: 0px 0px 10px 0px; } |
|
18 body > div:nth-child(14) > .meter-bar { margin: 0px; padding: 0px 0px 0px 10px; } |
|
19 body > div:nth-child(15) > .meter-bar { margin: 200px; padding: 0px; } |
|
20 body > div:nth-child(16) > .meter-bar { margin: 0px; padding: 200px; } |
|
21 /* 15 - 18 should have 100% width, no need to specify. */ |
|
22 </style> |
|
23 <body> |
|
24 <div class="meter-element"> |
|
25 <div class="meter-bar"> |
|
26 </div> |
|
27 </div> |
|
28 <div class="meter-element"> |
|
29 <div class="meter-bar"> |
|
30 </div> |
|
31 </div> |
|
32 <div class="meter-element"> |
|
33 <div class="meter-bar"> |
|
34 </div> |
|
35 </div> |
|
36 <div class="meter-element"> |
|
37 <div class="meter-bar"> |
|
38 </div> |
|
39 </div> |
|
40 <div class="meter-element"> |
|
41 <div class="meter-bar"> |
|
42 </div> |
|
43 </div> |
|
44 <div class="meter-element"> |
|
45 <div class="meter-bar"> |
|
46 </div> |
|
47 </div> |
|
48 <div class="meter-element"> |
|
49 <div class="meter-bar"> |
|
50 </div> |
|
51 </div> |
|
52 <div class="meter-element"> |
|
53 <div class="meter-bar"> |
|
54 </div> |
|
55 </div> |
|
56 <div class="meter-element"> |
|
57 <div class="meter-bar"> |
|
58 </div> |
|
59 </div> |
|
60 <div class="meter-element"> |
|
61 <div class="meter-bar"> |
|
62 </div> |
|
63 </div> |
|
64 <div class="meter-element"> |
|
65 <div class="meter-bar"> |
|
66 </div> |
|
67 </div> |
|
68 <div class="meter-element"> |
|
69 <div class="meter-bar"> |
|
70 </div> |
|
71 </div> |
|
72 <div class="meter-element"> |
|
73 <div class="meter-bar"> |
|
74 </div> |
|
75 </div> |
|
76 <div class="meter-element"> |
|
77 <div class="meter-bar"> |
|
78 </div> |
|
79 </div> |
|
80 <div class="meter-element"> |
|
81 <div class="meter-bar"> |
|
82 </div> |
|
83 </div> |
|
84 <div class="meter-element"> |
|
85 <div class="meter-bar"> |
|
86 </div> |
|
87 </div> |
|
88 <div class="meter-element"> |
|
89 <div class="meter-bar"> |
|
90 </div> |
|
91 </div> |
|
92 <div class="meter-element"> |
|
93 <div class="meter-bar"> |
|
94 </div> |
|
95 </div> |
|
96 <div class="meter-element"> |
|
97 <div class="meter-bar"> |
|
98 </div> |
|
99 </div> |
|
100 <div class="meter-element"> |
|
101 <div class="meter-bar"> |
|
102 </div> |
|
103 </div> |
|
104 </body> |
|
105 </html> |