panda.css (6797B) download
1body {
2 background-color: RGB(210,176,76);
3 color: white;
4 font-family: Papyrus, sans-serif;
5 margin: 0;
6 padding: 0;
7}
8
9p.inlog {
10 text-align: center;
11}
12
13.gif {
14 margin: 1vw;
15 border-radius: 200px;
16}
17
18/* CSS for the heading */
19h1 {
20 text-align: center;
21 font-size: 36px;
22 margin-top: 50px;
23}
24
25/* CSS for the content */
26.content,
27.content1,
28.content2 {
29 display: flex;
30 width:35vw;
31 height: 10vw;
32 margin: auto auto 1vw;
33 padding: 30px;
34 justify-content: space-between;
35 border-style: outset;
36 border-color: black;
37 background-color: RGB(230,176,77);
38}
39
40.content2 {
41 height: 20vw;
42 align-items: center;
43 justify-content: center;
44}
45
46nav {
47 display: flex;
48 background-color: #333;
49 height: 5vw;
50}
51
52nav ul {
53 list-style-type: none;
54 margin: 0;
55 padding: 0;
56}
57
58nav li {
59 display: inline-block;
60}
61
62li:first-child a {
63 padding: 0;
64}
65
66li:first-child a img {
67 height: 5vw;
68 width: auto;
69 vertical-align: middle;
70}
71
72li a {
73 display: block;
74 color: #fff;
75 text-decoration: none;
76 padding: 15px;
77 font-family: Arial, sans-serif;
78 transition: background-color 0.3s;
79}
80
81li a:hover {
82 background-color: #555;
83}
84
85div.block1 {
86 display: flex;
87}
88
89.graph {
90 width: 400px;
91 height: 300px;
92 border: 1px solid #ccc;
93 padding: 10px;
94 box-sizing: border-box;
95 position: relative;
96}
97
98.bar {
99 width: 40px;
100 background-color: #5A534C;
101 position: absolute;
102 bottom: 0;
103}
104
105.fancy-list {
106 list-style-type: none;
107 margin: 0;
108 padding: 0;
109}
110
111.fancy-list li {
112 position: relative;
113 padding-left: 20px;
114 margin-bottom: 10px;
115}
116
117.fancy-list li:before {
118 content: '';
119 position: absolute;
120 top: 5px;
121 left: 0;
122 width: 10px;
123 height: 10px;
124 background-color: #333;
125 border-radius: 50%;
126}
127
128.fancy-list li:last-child {
129 margin-bottom: 0;
130}
131
132/* CSS for the panda */
133
134.circle {
135 background-color: #D0E6AA;
136 position: fixed;
137 top: 50%;
138 left: 50%;
139 transform: translate(-45%, -45%);
140 width: 280px;
141 height: 260px;
142 border-radius: 100%;
143 overflow: hidden;
144 z-index:-1;
145}
146.circle .head {
147 width: 160px;
148 height: 500px;
149 background: white;
150 margin-top: 70px;
151 margin-left: 55px;
152 border-top-left-radius: 45% 20%;
153 border-top-right-radius: 45% 20%;
154 z-index: 2;
155 position: absolute;
156 border: 6px solid #5A534C;
157}
158.circle .ears {
159 width: 100%;
160}
161.circle .eyeleft {
162 position: absolute;
163 z-index: 3;
164 top: 130px;
165 left: 50%;
166 transform: translate(-50%, 0%);
167 display: flex;
168 display: block;
169 width: 40px;
170 height: 50px;
171 background: #5A534C;
172 border-radius: 100%;
173 margin: 0 20px;
174 -ms-transform: rotate(90deg);
175 /* IE 9 */
176 -webkit-transform: rotate(90deg);
177 /* Chrome, Safari, Opera */
178 transform: rotate(-25deg);
179}
180.circle .pupilleft {
181 height: 25px;
182 width: 25px;
183 border-radius: 25px;
184 margin-left: 7px;
185 margin-top: 13px;
186 background-color: white;
187}
188.circle .pupilright {
189 height: 25px;
190 width: 25px;
191 border-radius: 20px;
192 margin-left: 8px;
193 margin-top: 13px;
194 background-color: white;
195}
196.circle .pupilinsideright {
197 height: 12px;
198 width: 12px;
199 border-radius: 10px;
200 border: 2px #5A534C solid;
201 position: absolute;
202 margin-top: 5px;
203 margin-left: 5px;
204 background-color: #5A534C;
205}
206.circle .eyes {
207 top: -10px;
208 position: relative;
209}
210.circle .pupilinsideleft {
211 height: 12px;
212 width: 12px;
213 border-radius: 10px;
214 border: 2px #5A534C solid;
215 position: absolute;
216 margin-top: 5px;
217 margin-left: 4px;
218 background-color: #5A534C;
219}
220.circle .eyeright {
221 position: absolute;
222 z-index: 3;
223 top: 130px;
224 left: 50%;
225 transform: translate(-50%, 0%);
226 display: flex;
227 display: block;
228 width: 40px;
229 height: 50px;
230 background: #5A534C;
231 border-radius: 100%;
232 margin: 0 -60px;
233 -ms-transform: rotate(30deg);
234 /* IE 9 */
235 -webkit-transform: rotate(30deg);
236 /* Chrome, Safari, Opera */
237 transform: rotate(25deg);
238}
239.circle .earleft {
240 position: absolute;
241 top: 66px;
242 right: 35%;
243 transform: translate(-50%, 0%);
244 display: flex;
245 display: block;
246 content: "";
247 width: 30px;
248 height: 30px;
249 background: #5A534C;
250 border-radius: 100%;
251 margin: 0 40px;
252 border: 15px solid #5A534C;
253 z-index: 1;
254 position: absolute;
255}
256.circle .earright {
257 position: absolute;
258 top: 67px;
259 left: 58%;
260 transform: translate(-50%, 0%);
261 display: flex;
262 display: block;
263 content: "";
264 width: 30px;
265 height: 30px;
266 background: #5A534C;
267 border-radius: 100%;
268 margin: 0 40px;
269 border: 15px solid #5A534C;
270 z-index: 1;
271 position: absolute;
272}
273.circle .shadowleft {
274 width: 30px;
275 height: 30px;
276 border-bottom: none;
277 background-color: white;
278 border-radius: 15px;
279 margin-left: -1px;
280}
281.circle .shadowright {
282 width: 30px;
283 height: 30px;
284 border-bottom: none;
285 background-color: white;
286 border-radius: 15px;
287 margin-left: 1px;
288}
289.circle .mouth {
290 position: absolute;
291 z-index: 3;
292 top: 155px;
293 left: 50%;
294 transform: translate(-50%, 0%);
295 width: 25px;
296 border: 2px #5A534C solid;
297 height: 15px;
298 border-radius: 20px;
299 background: #5A534C;
300}
301.circle .mouthmiddle {
302 position: absolute;
303 z-index: 3;
304 top: 172px;
305 left: 50%;
306 transform: translate(-50%, 0%);
307 width: 3px;
308 border: 2px #5A534C solid;
309 height: 20px;
310 border-radius: 15px;
311 background: #5A534C;
312}
313.circle .mouthend {
314 position: absolute;
315 z-index: 99;
316 top: 180px;
317 left: 50%;
318 transform: translate(-50%, 0%);
319 width: 30px;
320 border: 6px #5A534C solid;
321 height: 12px;
322 border-radius: 5px;
323 background: transparent;
324 border-top: none;
325 border-bottom-left-radius: 2em;
326 border-bottom-right-radius: 2em;
327}
328.wall {
329 width: 300px;
330 height: 100px;
331 top: 50%;
332 left: 50%;
333 margin-top: 150px;
334 background-color: RGB(210,176,76);
335 transform: translate(-50%, -50%);
336 position: fixed;
337 border-top: 6px #5A534C solid;
338 z-index: -1;
339}
340.handsright {
341 width: 30px;
342 height: 25px;
343 border-radius: 20px;
344 background-color: #5A534C;
345 top: 50%;
346 left: 50%;
347 margin-top: 100px;
348 margin-left: -40px;
349 transform: translate(-50%, -50%);
350 position: fixed;
351 border-top: 7px #5A534C solid;
352 z-index: -1;
353}
354.handsleft {
355 width: 30px;
356 height: 25px;
357 border-radius: 20px;
358 background-color: #5A534C;
359 top: 50%;
360 left: 50%;
361 margin-top: 100px;
362 margin-left: 110px;
363 transform: translate(-50%, -50%);
364 position: fixed;
365 border-top: 7px #5A534C solid;
366 z-index: -1;
367}