├── .vscode └── settings.json ├── img ├── bea.jpeg ├── logo.png ├── mico.jpeg ├── tick.jpeg ├── penny.jpeg ├── piper.jpeg ├── squeak.jpeg ├── background.jpg ├── bea-icon.png ├── mico-icon.png ├── penny-icon.png ├── piper-icon.png ├── tick-icon.png ├── brawl-stars.png └── squeak-icon.png ├── README.md ├── style.css └── index.html /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5503 3 | } -------------------------------------------------------------------------------- /img/bea.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beatrizveloso/brawl-stars-icons/HEAD/img/bea.jpeg -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beatrizveloso/brawl-stars-icons/HEAD/img/logo.png -------------------------------------------------------------------------------- /img/mico.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beatrizveloso/brawl-stars-icons/HEAD/img/mico.jpeg -------------------------------------------------------------------------------- /img/tick.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beatrizveloso/brawl-stars-icons/HEAD/img/tick.jpeg -------------------------------------------------------------------------------- /img/penny.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beatrizveloso/brawl-stars-icons/HEAD/img/penny.jpeg -------------------------------------------------------------------------------- /img/piper.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beatrizveloso/brawl-stars-icons/HEAD/img/piper.jpeg -------------------------------------------------------------------------------- /img/squeak.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beatrizveloso/brawl-stars-icons/HEAD/img/squeak.jpeg -------------------------------------------------------------------------------- /img/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beatrizveloso/brawl-stars-icons/HEAD/img/background.jpg -------------------------------------------------------------------------------- /img/bea-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beatrizveloso/brawl-stars-icons/HEAD/img/bea-icon.png -------------------------------------------------------------------------------- /img/mico-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beatrizveloso/brawl-stars-icons/HEAD/img/mico-icon.png -------------------------------------------------------------------------------- /img/penny-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beatrizveloso/brawl-stars-icons/HEAD/img/penny-icon.png -------------------------------------------------------------------------------- /img/piper-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beatrizveloso/brawl-stars-icons/HEAD/img/piper-icon.png -------------------------------------------------------------------------------- /img/tick-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beatrizveloso/brawl-stars-icons/HEAD/img/tick-icon.png -------------------------------------------------------------------------------- /img/brawl-stars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beatrizveloso/brawl-stars-icons/HEAD/img/brawl-stars.png -------------------------------------------------------------------------------- /img/squeak-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beatrizveloso/brawl-stars-icons/HEAD/img/squeak-icon.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Brawl Stars Character Icons 2 | 3 | Este projeto foi desenvolvido durante o curso de Web Design, em colaboração com uma amiga. Criamos uma página interativa utilizando HTML, CSS e JavaScript, onde é possível ver ícones dos personagens de Brawl Stars. Ao passar o mouse sobre cada ícone, uma descrição do personagem é exibida, proporcionando uma experiência dinâmica e envolvente. 4 | 5 | # Tecnologias utilizadas: 6 | 7 | - HTML 8 | - CSS 9 | 10 | ![image](https://github.com/beatrizveloso/brawl-stars-icons/assets/156534028/d76071fb-a21b-4aef-b63e-28ea64b2bab8) 11 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap'); 2 | 3 | * { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background-image: url("./img/background.jpg"); 11 | background-size: cover; 12 | width: 100%; 13 | height: 100%; 14 | } 15 | 16 | main { 17 | display: flex; 18 | flex-direction: column; 19 | justify-content: center; 20 | align-items: center; 21 | } 22 | 23 | .logo { 24 | display: flex; 25 | justify-content: center; 26 | align-items: center; 27 | width: 100%; 28 | } 29 | 30 | .logo img { 31 | height: 250px; 32 | } 33 | 34 | .container { 35 | display: grid; 36 | grid-template-columns: 1fr 1fr 1fr; 37 | grid-template-rows: 1fr 1fr; 38 | column-gap: 100px; 39 | row-gap: 50px; 40 | padding-bottom: 50px; 41 | } 42 | 43 | article { 44 | width: 200px; 45 | height: 200px; 46 | position: relative; 47 | } 48 | 49 | article img { 50 | width: 100%; 51 | height: 100%; 52 | object-fit: cover; 53 | } 54 | 55 | .overlay{ 56 | width: 100%; 57 | height: 100%; 58 | position: absolute; 59 | background-color: #0650C1; 60 | top: 0; 61 | right: 0; 62 | display: flex; 63 | flex-direction: column; 64 | justify-content: center; 65 | align-items: center; 66 | gap: 10px; 67 | padding: 10px; 68 | opacity: 0; 69 | transition: opacity .5s ease; 70 | } 71 | 72 | .overlay img { 73 | width: 50px !important; 74 | height: auto; 75 | } 76 | 77 | .overlay p { 78 | color: white; 79 | font-size: 16px; 80 | font-family: "Varela Round", sans-serif; 81 | text-align: center; 82 | } 83 | .overlay:hover{ 84 | opacity: 1; 85 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Brawl Stars 7 | 8 | 9 | 10 | 11 |
12 | 15 |
16 |
17 | 18 | 22 |
23 |
24 | 25 | 29 |
30 |
31 | 32 | 36 |
37 |
38 | 39 | 43 |
44 |
45 | 46 | 50 |
51 |
52 | 53 | 57 |
58 |
59 |
60 | 61 | --------------------------------------------------------------------------------