panda.css (6797B)
1 body { 2 background-color: RGB(210,176,76); 3 color: white; 4 font-family: Papyrus, sans-serif; 5 margin: 0; 6 padding: 0; 7 } 8 9 p.inlog { 10 text-align: center; 11 } 12 13 .gif { 14 margin: 1vw; 15 border-radius: 200px; 16 } 17 18 /* CSS for the heading */ 19 h1 { 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 46 nav { 47 display: flex; 48 background-color: #333; 49 height: 5vw; 50 } 51 52 nav ul { 53 list-style-type: none; 54 margin: 0; 55 padding: 0; 56 } 57 58 nav li { 59 display: inline-block; 60 } 61 62 li:first-child a { 63 padding: 0; 64 } 65 66 li:first-child a img { 67 height: 5vw; 68 width: auto; 69 vertical-align: middle; 70 } 71 72 li 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 81 li a:hover { 82 background-color: #555; 83 } 84 85 div.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 }