Game UI

├── img ├── browser.png ├── mario.png └── toad.png ├── index.html ├── js.js └── style.css /img/browser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danilolmc/GameUI/679a376ffe70e10799a395d932fc34a9c4d406e4/img/browser.png -------------------------------------------------------------------------------- /img/mario.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danilolmc/GameUI/679a376ffe70e10799a395d932fc34a9c4d406e4/img/mario.png -------------------------------------------------------------------------------- /img/toad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danilolmc/GameUI/679a376ffe70e10799a395d932fc34a9c4d406e4/img/toad.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Game UI 10 | 11 | 12 |

13 | 24 | 25 | Logo 26 | 27 | 40 |

41 | 42 |

43 |

44 |

45 |

46 | 47 | 48 | 49 | 50 | 6/10 51 | 52 |

53 | 67 | 68 | 74 |

75 |

76 |

77 | 78 | 79 | 80 | 81 | 2/10 82 | 83 |

84 | 98 | 99 | 105 |

106 |

107 |

108 | 109 | 110 | 111 | 112 | 9/10 113 | 114 |

115 | 129 | 130 | 136 |

137 |

138 | 139 |

140 |

141 | Conections 142 | scroll 143 |

144 |

145 | 146 | 152 |

153 |

154 | 155 | 193 | 194 | 195 | -------------------------------------------------------------------------------- /js.js: -------------------------------------------------------------------------------- 1 | let users = document.querySelectorAll(".contentUsers")[0]; 2 | 3 | 4 | console.log(users) 5 | 6 | let containerusers = document.querySelectorAll(".mainContentUsers")[0]; 7 | 8 | 9 | let imgUrl = "https://avatars2.githubusercontent.com/u/31545128?s=460&u=2c1e279b6d728d05c70b90a9739ba86f2448bf22&v=4"; 10 | 11 | let usersList = [ 12 | 13 | { 14 | id: 1, 15 | name: "Danilo Lima", 16 | score: 69000 17 | 18 | }, 19 | { 20 | id: 2, 21 | name: "Eric Ayuko", 22 | score: 78670 23 | 24 | }, 25 | { 26 | id: 3, 27 | name: "Erica Mendes", 28 | score: 346 29 | }, 30 | { 31 | id: 4, 32 | name: "Julio Costa", 33 | score: 1790 34 | }, 35 | { 36 | id: 5, 37 | name: "Bruna Carvalho", 38 | score: 123560 39 | }, 40 | { 41 | id: 6, 42 | name: "Alissa Santos", 43 | score: 69000 44 | }, 45 | { 46 | id: 7, 47 | name: "Bruno Almeida", 48 | score: 23500 49 | }, 50 | { 51 | id: 8, 52 | name: "Antonio da Silva", 53 | score: 78670 54 | }, 55 | ] 56 | 57 | function User(id,name,score){ 58 | 59 | 60 | let element = document.createElement("div"); 61 | let spanid = document.createElement("span"); 62 | spanid.textContent = id; 63 | 64 | let spanName = document.createElement("span"); 65 | 66 | 67 | let spanUsreImg = document.createElement("img"); 68 | 69 | spanUsreImg.src = imgUrl; 70 | 71 | let labelUserName = document.createElement("label"); 72 | 73 | labelUserName.textContent = name; 74 | 75 | spanName.appendChild(spanUsreImg); 76 | spanName.appendChild(labelUserName); 77 | 78 | let spanScore = document.createElement("span"); 79 | let spanNumerbsScore = document.createElement("label"); 80 | 81 | spanNumerbsScore.textContent = score; 82 | 83 | let spanCoreIcon = document.createElement("i"); 84 | 85 | spanCoreIcon.className = "fas fa-gem"; 86 | 87 | 88 | let spanMoreIcon = document.createElement("span"); 89 | 90 | spanMoreIcon.className = "fas fa-ellipsis-v"; 91 | 92 | spanScore.appendChild(spanNumerbsScore); 93 | spanScore.appendChild(spanCoreIcon); 94 | 95 | 96 | element.classList.add("contentUsers"); 97 | 98 | element.style.animationDelay = `${id - (id * 0.8)}s`; 99 | 100 | element.appendChild(spanid); 101 | element.appendChild(spanName); 102 | element.appendChild(spanScore); 103 | element.appendChild(spanMoreIcon); 104 | 105 | return element; 106 | } 107 | 108 | usersList.map(user => { 109 | 110 | containerusers.appendChild(User(user.id,user.name,user.score)); 111 | }); 112 | 113 | 114 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | outline: 0; 7 | border: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | button, 12 | z { 13 | cursor: pointer; 14 | } 15 | 16 | p, 17 | h1, 18 | h2 { 19 | cursor: context-menu; 20 | } 21 | 22 | body { 23 | background-image: url("https://imgpile.com/images/32228cdea9528b2943e9c12f82bee49e.jpg"); 24 | background-size: cover; 25 | } 26 | 27 | ::-webkit-scrollbar { 28 | background: #12171c; 29 | width: 5px; 30 | } 31 | 32 | ::-webkit-scrollbar-thumb { 33 | background: #5f7c99; 34 | } 35 | 36 | body > header { 37 | background: rgba(15, 23, 33, 0.8); 38 | width: 100%; 39 | height: 11vh; 40 | display: grid; 41 | grid-template-columns: repeat(3, 1fr); 42 | align-items: center; 43 | justify-items: center; 44 | color: #fff; 45 | } 46 | 47 | ul { 48 | list-style: none; 49 | display: flex; 50 | } 51 | 52 | body > header ul li { 53 | list-style: none; 54 | display: flex; 55 | margin: 0 2rem; 56 | font-family: "Montserrat", sans-serif; 57 | text-transform: uppercase; 58 | font-weight: 700; 59 | } 60 | 61 | body > header #logo { 62 | font-family: "Montserrat", sans-serif; 63 | text-transform: uppercase; 64 | font-weight: 600; 65 | font-size: 1.7rem; 66 | } 67 | 68 | .header-container-right { 69 | display: flex; 70 | width: 275px; 71 | justify-content: space-between; 72 | align-items: center; 73 | } 74 | 75 | .header-container-right > div:first-of-type { 76 | border: 1px solid rgba(255, 255, 255, 0.2); 77 | width: 140px; 78 | height: 40px; 79 | border-top-left-radius: 50px; 80 | border-bottom-left-radius: 50px; 81 | display: flex; 82 | align-items: center; 83 | padding: 0 0 0 1.5rem; 84 | justify-content: space-between; 85 | } 86 | 87 | .header-container-right > div:first-of-type span { 88 | font-family: "Montserrat", sans-serif; 89 | font-weight: 500; 90 | display: flex; 91 | align-items: center; 92 | } 93 | 94 | .header-container-right > div:first-of-type span i { 95 | color: #48aff8; 96 | font-size: 0.7rem; 97 | transform: translate(8px, 0px); 98 | } 99 | 100 | .header-container-right > div:first-of-type button { 101 | background: red; 102 | width: 40px; 103 | height: 40px; 104 | border-radius: 50%; 105 | transform: translateX(15px); 106 | background: linear-gradient(#48aff8, #4ab0f9); 107 | font-size: 1.5rem; 108 | color: #fff; 109 | box-shadow: -5px 0 10px rgba(15, 23, 33, 0.9); 110 | } 111 | 112 | .header-container-right > div:last-of-type { 113 | width: 100px; 114 | display: flex; 115 | height: 50px; 116 | align-items: center; 117 | position: relative; 118 | } 119 | 120 | .header-container-right > div:last-of-type img { 121 | width: 52%; 122 | height: 100%; 123 | border-radius: 3px; 124 | filter: brightness(0.5); 125 | } 126 | 127 | .header-container-right > div:last-of-type span { 128 | background: #7ed321; 129 | width: 8px; 130 | height: 8px; 131 | border-radius: 50%; 132 | position: absolute; 133 | top: 0; 134 | transform: translate(3rem, -0.2rem); 135 | box-shadow: 0 0 5px #7ed321; 136 | } 137 | 138 | .header-container-right > div:last-of-type i { 139 | margin-left: 1rem; 140 | color: rgba(255, 255, 255, 0.6); 141 | } 142 | 143 | main { 144 | height: 97vh; 145 | margin: 0 auto; 146 | max-width: 95%; 147 | display: flex; 148 | justify-content: center; 149 | 150 | padding: 5rem 0; 151 | } 152 | 153 | main section:first-of-type { 154 | height: 100%; 155 | width: 50%; 156 | display: grid; 157 | grid-template-columns: 50% 50%; 158 | grid-template-rows: 1fr 1fr; 159 | gap: 3rem; 160 | margin-right: 5rem; 161 | } 162 | 163 | main section:last-of-type { 164 | background-color: rgba(15, 23, 33, 0.95); 165 | width: 28%; 166 | border-radius: 20px; 167 | display: flex; 168 | flex-direction: column; 169 | align-items: center; 170 | justify-content: space-between; 171 | padding-bottom: 1.5rem; 172 | } 173 | 174 | main section:last-of-type header { 175 | display: flex; 176 | justify-content: space-between; 177 | align-items: center; 178 | width: 85%; 179 | height: 40px; 180 | margin: 2rem; 181 | font-family: "Montserrat", sans-serif; 182 | } 183 | 184 | main section:last-of-type header span:first-of-type { 185 | color: #fff; 186 | font-weight: 700; 187 | text-transform: uppercase; 188 | } 189 | 190 | main section:last-of-type header span:last-of-type { 191 | color: #5f7c99; 192 | font-weight: 400; 193 | } 194 | 195 | main section:last-of-type footer { 196 | display: flex; 197 | width: 100%; 198 | justify-content: center; 199 | } 200 | 201 | main section:last-of-type footer span { 202 | display: flex; 203 | align-items: center; 204 | font-family: "Montserrat"; 205 | font-size: 0.8rem; 206 | color: #5f7c99; 207 | transform: translate(25px, 0px); 208 | cursor: pointer; 209 | transition: 0.5s ease-in-out; 210 | } 211 | 212 | main section:last-of-type footer span:hover { 213 | color: #80a1c2; 214 | } 215 | 216 | main section:last-of-type footer span label { 217 | margin-right: 1rem; 218 | transform: translate(0, -1px); 219 | } 220 | 221 | .mainContentUsers { 222 | color: #5f7c99; 223 | font-weight: 400; 224 | width: 90%; 225 | height: 100%; 226 | border-radius: 10px; 227 | display: flex; 228 | flex-direction: column; 229 | align-items: center; 230 | overflow-y: scroll; 231 | overflow-x: hidden; 232 | } 233 | 234 | .contentUsers { 235 | color: #5f7c99; 236 | font-weight: 400; 237 | border-radius: 10px; 238 | display: grid; 239 | grid-template-columns: 1% 50% 25% 10%; 240 | justify-items: flex-start; 241 | width: 100%; 242 | column-gap: 2rem; 243 | padding: 0 1.8rem 0 1.5rem; 244 | height: 60px; 245 | align-items: center; 246 | font-family: "Montserrat", sans-serif; 247 | font-weight: 700; 248 | background: rgba(15, 23, 33, 0.9); 249 | margin-bottom: 1rem; 250 | transition: 0.3s ease-in-out; 251 | opacity: 0; 252 | transform: translateY(30px); 253 | animation: listAnimation 0.5s ease-in-out forwards; 254 | } 255 | 256 | .contentUsers:hover { 257 | background: rgb(35, 51, 71); 258 | } 259 | 260 | @keyframes listAnimation { 261 | to { 262 | transform: translateY(0); 263 | opacity: 1; 264 | } 265 | } 266 | 267 | .contentUsers span { 268 | display: flex; 269 | align-items: center; 270 | border-radius: 10px; 271 | } 272 | 273 | .contentUsers span:nth-of-type(2) { 274 | width: 220px; 275 | } 276 | 277 | .contentUsers span:nth-of-type(3) { 278 | justify-self: flex-end; 279 | } 280 | 281 | .contentUsers span:nth-of-type(3) label { 282 | margin: 0 0.8rem; 283 | color: #fff; 284 | } 285 | 286 | .contentUsers span:nth-of-type(3) i { 287 | font-size: 0.8rem; 288 | color: #48aff8; 289 | transform: translateY(1px); 290 | } 291 | 292 | .contentUsers img { 293 | width: 33px; 294 | height: 30px; 295 | border-radius: 5px; 296 | margin: 0 1rem; 297 | } 298 | 299 | main > section.characters > div { 300 | border-radius: 20px; 301 | position: relative; 302 | background-color: rgba(15, 23, 33, 0.95); 303 | padding: 2.5rem; 304 | display: flex; 305 | flex-direction: column; 306 | justify-content: space-between; 307 | font-family: "Montserrat", sans-serif; 308 | transition: border 0.4s ease-in-out; 309 | border: 1px solid transparent; 310 | } 311 | 312 | main > section.characters > div:hover { 313 | border: 1px solid #5f7c99; 314 | } 315 | 316 | main > section.characters > div:hover img { 317 | transform: scale(2); 318 | } 319 | 320 | main > section.characters > div header { 321 | height: 40px; 322 | width: 100%; 323 | display: flex; 324 | align-items: center; 325 | } 326 | 327 | main > section.characters > div header span { 328 | display: flex; 329 | align-items: center; 330 | } 331 | 332 | main > section.characters > div header span label:first-of-type { 333 | display: grid; 334 | place-items: center; 335 | background: #7ed321; 336 | width: 32px; 337 | height: 30px; 338 | color: #fff; 339 | font-size: 0.9rem; 340 | border-radius: 50%; 341 | margin-right: 1rem; 342 | } 343 | 344 | main > section.characters > div header span label:last-of-type { 345 | color: #fff; 346 | font-weight: 800; 347 | } 348 | 349 | main > section.characters > div aside { 350 | height: auto; 351 | width: 100%; 352 | display: flex; 353 | justify-content: space-between; 354 | align-items: center; 355 | } 356 | 357 | main > section.characters > div aside div { 358 | height: 100px; 359 | width: 100%; 360 | display: flex; 361 | flex-direction: column; 362 | justify-content: space-between; 363 | } 364 | 365 | main > section.characters > div aside div span:first-of-type { 366 | font-size: 2rem; 367 | font-weight: 600; 368 | color: #fff; 369 | display: flex; 370 | align-items: center; 371 | } 372 | 373 | main > section.characters > div aside div span:first-of-type i { 374 | color: #48aff8; 375 | font-size: 1.2rem; 376 | margin-left: 1rem; 377 | } 378 | 379 | main > section.characters > div aside div span:last-of-type { 380 | font-weight: 600; 381 | transform: translateY(20px); 382 | } 383 | 384 | main > section.characters > div aside div span:last-of-type * { 385 | display: block; 386 | } 387 | 388 | main 389 | > section.characters 390 | > div 391 | aside 392 | div 393 | span:last-of-type 394 | label:first-of-type { 395 | color: #5f7c99; 396 | font-size: 0.8rem; 397 | font-weight: 800; 398 | } 399 | 400 | main > section.characters > div aside div span:last-of-type label:last-of-type { 401 | color: #fff; 402 | font-size: 1.3rem; 403 | font-weight: 800; 404 | line-height: 2.2rem; 405 | } 406 | 407 | main > section.characters > div footer { 408 | display: flex; 409 | } 410 | 411 | section.characters > div header, 412 | section.characters > div aside, 413 | section.characters > div footer { 414 | opacity: 0; 415 | transform: translateX(10px); 416 | animation: animaHeaderAsideFooter 1s ease-in-out forwards; 417 | } 418 | 419 | @keyframes animaHeaderAsideFooter { 420 | to { 421 | opacity: 1; 422 | transform: translateX(0); 423 | } 424 | } 425 | 426 | main > section.characters footer > button, 427 | footer > span { 428 | border-radius: 30px; 429 | width: 100px; 430 | height: 35px; 431 | display: block; 432 | margin: 0 1rem 0 0; 433 | font-weight: 800; 434 | text-transform: uppercase; 435 | display: grid; 436 | place-items: center; 437 | color: #fff; 438 | cursor: pointer; 439 | transition: 0.2s ease-in-out; 440 | } 441 | 442 | main > section.characters footer > button { 443 | font-size: 0.8rem; 444 | } 445 | 446 | main > section.characters > div footer > span { 447 | background: #1b252f; 448 | } 449 | 450 | main > section.characters > div footer > span:hover { 451 | background: #2c3b49; 452 | } 453 | 454 | main > section.characters > div footer span label { 455 | font-size: 0.8rem; 456 | cursor: pointer; 457 | } 458 | 459 | main > section.characters > div:nth-of-type(1) footer > button { 460 | background: linear-gradient(-45deg, #1978e6, #52bafc); 461 | } 462 | 463 | main > section.characters > div footer > button:hover { 464 | transform: scale(1.05); 465 | } 466 | 467 | main > section.characters > div:nth-of-type(2) footer > button { 468 | background: linear-gradient(-45deg, #df2745, #e65f5c); 469 | } 470 | 471 | main > section.characters > div:nth-of-type(3) footer > button { 472 | background: linear-gradient(-45deg, #fb6425, #feb633); 473 | } 474 | 475 | .characters div:nth-of-type(1) img { 476 | max-width: 190px; 477 | width: 100%; 478 | position: absolute; 479 | transform: translate(-30px, -50px); 480 | opacity: 0; 481 | right: 0; 482 | filter: drop-shadow(5px -10px 40px #2b6ba4); 483 | animation: animaImg1 1s ease-in-out forwards; 484 | } 485 | 486 | @keyframes animaImg1 { 487 | to { 488 | opacity: 1; 489 | transform: translate(0px, -70px); 490 | } 491 | } 492 | 493 | .characters div:nth-of-type(2) img { 494 | max-width: 270px; 495 | width: 100%; 496 | right: 0; 497 | position: absolute; 498 | opacity: 0; 499 | transform: translate(-10px, -80px); 500 | filter: drop-shadow(0px 25px 40px #912d49); 501 | animation: animaImg2 1s ease-in-out forwards; 502 | } 503 | 504 | @keyframes animaImg2 { 505 | to { 506 | opacity: 1; 507 | transform: translate(40px, -70px); 508 | } 509 | } 510 | 511 | .characters div:nth-of-type(3) img { 512 | max-width: 520px; 513 | width: 100%; 514 | right: 0; 515 | position: absolute; 516 | transform: translate(10px, -10px) rotateY(180deg); 517 | filter: drop-shadow(5px -5px 40px #f6a11960); 518 | opacity: 0; 519 | animation: animaImgBrowser 1s ease-in-out forwards; 520 | } 521 | 522 | @keyframes animaImgBrowser { 523 | to { 524 | opacity: 1; 525 | transform: translate(-30px, -10px) rotateY(180deg); 526 | } 527 | } 528 | 529 | main section:first-of-type div:last-of-type { 530 | grid-column: 1/3; 531 | } 532 | 533 | body > footer { 534 | height: 20vh; 535 | background: #12171c; 536 | display: flex; 537 | justify-content: space-between; 538 | } 539 | 540 | body > footer > div { 541 | height: 100%; 542 | width: 25%; 543 | color: #fff; 544 | display: grid; 545 | place-items: center; 546 | font-family: "Montserrat", sans-serif; 547 | font-weight: 800; 548 | } 549 | 550 | body > footer div:nth-of-type(1) { 551 | font-size: 2.5rem; 552 | } 553 | 554 | body > footer div:nth-of-type(2) { 555 | display: flex; 556 | justify-content: space-between; 557 | } 558 | 559 | body > footer div:nth-of-type(2) ul { 560 | display: flex; 561 | flex-direction: column; 562 | transform: translateY(10px); 563 | } 564 | 565 | body > footer div:nth-of-type(2) ul li { 566 | margin-bottom: 15px; 567 | } 568 | 569 | body > footer div:nth-of-type(3) .social-container { 570 | transform: translateY(-10px); 571 | margin-left: 4rem; 572 | } 573 | 574 | body > footer div:nth-of-type(3) .social-container h2 { 575 | color: #fff; 576 | font-size: 1.2rem; 577 | text-transform: uppercase; 578 | margin: 1rem 0; 579 | } 580 | 581 | body > footer div:nth-of-type(3) .social-container .social { 582 | display: flex; 583 | } 584 | 585 | body > footer div:nth-of-type(3) .social-container .social i { 586 | margin: 1rem 2rem 0 0; 587 | font-size: 2rem; 588 | } 589 | 590 | body > footer div:nth-of-type(4) .certified { 591 | margin: 1rem 2rem 0 0; 592 | border: 1px dashed #314152; 593 | border-radius: 10px; 594 | background: #151c23; 595 | display: grid; 596 | width: 190px; 597 | height: 120px; 598 | align-items: center; 599 | justify-content: center; 600 | } 601 | 602 | body > footer div:nth-of-type(4) .certified p { 603 | font-size: 1rem; 604 | text-transform: uppercase; 605 | } 606 | 607 | @media (max-width: 1440px) { 608 | body * { 609 | /* background: red; */ 610 | } 611 | 612 | main > section.characters > div { 613 | padding: 10px; 614 | } 615 | 616 | main > section.characters > div aside { 617 | width: auto; 618 | margin-top: 10px; 619 | margin-bottom: 10px; 620 | } 621 | 622 | main > section.characters footer > button, 623 | footer > span { 624 | width: 90px; 625 | height: 35px; 626 | } 627 | 628 | main > section.characters > div aside div span:last-of-type { 629 | transform: translateY(0); 630 | } 631 | 632 | main > section.characters > div aside div span label { 633 | font-size: 30px; 634 | } 635 | 636 | main > section.characters > div > * { 637 | margin: 10px 20px 20px 20px; 638 | } 639 | 640 | .characters div:nth-child(1) img { 641 | width: 60%; 642 | right: -20px; 643 | top: -55px; 644 | transform: translate(20px, 20px); 645 | } 646 | 647 | .characters div:nth-child(2) img { 648 | width: 90%; 649 | top: -80px; 650 | right: -20px; 651 | } 652 | 653 | .characters div:nth-child(3) img { 654 | width: 65%; 655 | right: -45px; 656 | } 657 | 658 | .contentUsers { 659 | color: #5f7c99; 660 | font-weight: 400; 661 | border-radius: 10px; 662 | display: grid; 663 | justify-items: flex-start; 664 | width: 96%; 665 | column-gap: 20px; 666 | padding: 0 1rem 0 1.5rem; 667 | height: 50px; 668 | align-items: center; 669 | font-family: "Montserrat", sans-serif; 670 | font-weight: 700; 671 | background: rgba(15, 23, 33, 0.9); 672 | margin-bottom: 1rem; 673 | transition: background 0.3s ease-in-out opacity 0.3s ease-in-out, 674 | translate 0.3s ease-in-out; 675 | opacity: 0; 676 | font-size: 11px; 677 | transform: translateY(30px); 678 | animation: listAnimation 0.5s ease-in-out forwards; 679 | } 680 | .contentUsers img { 681 | width: 20px; 682 | height: 20px; 683 | } 684 | 685 | main section:last-of-type { 686 | width: 35%; 687 | } 688 | 689 | body > footer div:nth-of-type(2) ul li { 690 | font-size: 0.7rem; 691 | } 692 | 693 | body > footer div:nth-of-type(3) .social-container { 694 | transform: translateY(0); 695 | } 696 | 697 | body > footer div:nth-of-type(3) .social-container h2 { 698 | font-size: 1rem; 699 | } 700 | 701 | body > footer div:nth-of-type(3) .social-container .social i { 702 | font-size: 1.8rem; 703 | } 704 | } 705 | --------------------------------------------------------------------------------