├── src ├── img │ ├── seta.png │ ├── fundo-1.jpg │ ├── fundo-2.jpg │ ├── fundo-3.jpg │ ├── fundo-4.jpg │ ├── fundo-5.jpg │ ├── fundo-6.jpg │ ├── images.png │ ├── jubileia.png │ ├── loggineto.png │ ├── seuclope.png │ ├── vamplena.png │ ├── fundo-base.jpg │ ├── professor-cafeze.png │ └── tempestade-solar.png ├── style.css ├── resposive.css ├── js │ └── index.js └── estilos.css ├── README.md └── index.html /src/img/seta.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/aula-evento/HEAD/src/img/seta.png -------------------------------------------------------------------------------- /src/img/fundo-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/aula-evento/HEAD/src/img/fundo-1.jpg -------------------------------------------------------------------------------- /src/img/fundo-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/aula-evento/HEAD/src/img/fundo-2.jpg -------------------------------------------------------------------------------- /src/img/fundo-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/aula-evento/HEAD/src/img/fundo-3.jpg -------------------------------------------------------------------------------- /src/img/fundo-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/aula-evento/HEAD/src/img/fundo-4.jpg -------------------------------------------------------------------------------- /src/img/fundo-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/aula-evento/HEAD/src/img/fundo-5.jpg -------------------------------------------------------------------------------- /src/img/fundo-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/aula-evento/HEAD/src/img/fundo-6.jpg -------------------------------------------------------------------------------- /src/img/images.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/aula-evento/HEAD/src/img/images.png -------------------------------------------------------------------------------- /src/img/jubileia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/aula-evento/HEAD/src/img/jubileia.png -------------------------------------------------------------------------------- /src/img/loggineto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/aula-evento/HEAD/src/img/loggineto.png -------------------------------------------------------------------------------- /src/img/seuclope.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/aula-evento/HEAD/src/img/seuclope.png -------------------------------------------------------------------------------- /src/img/vamplena.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/aula-evento/HEAD/src/img/vamplena.png -------------------------------------------------------------------------------- /src/img/fundo-base.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/aula-evento/HEAD/src/img/fundo-base.jpg -------------------------------------------------------------------------------- /src/img/professor-cafeze.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/aula-evento/HEAD/src/img/professor-cafeze.png -------------------------------------------------------------------------------- /src/img/tempestade-solar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marianicacio/aula-evento/HEAD/src/img/tempestade-solar.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # aula-evento 2 | 3 | ![image](https://github.com/marianicacio/aula-evento/assets/156533948/55487918-171d-4670-9f61-c6ed7be783a8) 4 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | ul { 8 | list-style: none; 9 | } 10 | -------------------------------------------------------------------------------- /src/resposive.css: -------------------------------------------------------------------------------- 1 | @media (max-width: 620px) { 2 | .cabecalho { 3 | padding: 30px 0; 4 | } 5 | 6 | .personagens-slider { 7 | padding: 0 15px; 8 | gap: 10px; 9 | } 10 | 11 | .btn-seta { 12 | width: 25px; 13 | height: 25px; 14 | padding: 25px; 15 | } 16 | 17 | .lista-personagens { 18 | height: 540px; 19 | } 20 | } -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | const btnAvancar = document.getElementById("btn-avancar"); 2 | const btnVoltar = document.getElementById("btn-voltar"); 3 | let cartaoAtual = 0; 4 | const cartoes = document.querySelectorAll(".cartao"); 5 | 6 | btnAvancar.addEventListener("click", function () { 7 | const ehUltimoCartao = cartaoAtual === cartoes.length - 1; 8 | if (ehUltimoCartao) return; 9 | 10 | esconderCartaoSelecionado(); 11 | 12 | cartaoAtual++; 13 | mostrarCartao(); 14 | }); 15 | 16 | btnVoltar.addEventListener("click", function () { 17 | const ehPrimeiroCartao = cartaoAtual === 0; 18 | if (ehPrimeiroCartao) return; 19 | 20 | esconderCartaoSelecionado(); 21 | 22 | cartaoAtual--; 23 | mostrarCartao(); 24 | }); 25 | 26 | function mostrarCartao() { 27 | cartoes[cartaoAtual].classList.add("selecionado"); 28 | } 29 | 30 | function esconderCartaoSelecionado() { 31 | const cartaoSelecionado = document.querySelector(".selecionado"); 32 | cartaoSelecionado.classList.remove("selecionado"); 33 | } -------------------------------------------------------------------------------- /src/estilos.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | font-family: 'outfit', sans-serif; 4 | background-image: url('../src/img/fundo-base.jpg'); 5 | background-repeat: no-repeat; 6 | background-size: cover; 7 | min-width: 100vh; 8 | } 9 | 10 | .cabecalho { 11 | text-align: center; 12 | padding: 60px 0px; 13 | } 14 | 15 | .cabecalho h1 { 16 | color: #f1ecff; 17 | font-size: 45px; 18 | letter-spacing: 10px; 19 | text-transform: uppercase; 20 | } 21 | 22 | .personagens-slider { 23 | display: flex; 24 | justify-content: center; 25 | align-items: center; 26 | gap: 80px; 27 | } 28 | 29 | .lista-personagens { 30 | width: 330px; 31 | height: 520px; 32 | position: relative; 33 | } 34 | .btn-seta 35 | { 36 | background-color: #ffffff; 37 | width: 70px; 38 | height: 70px; 39 | border-radius: 50px; 40 | border: 0; 41 | cursor: pointer; 42 | display: flex; 43 | align-items: center; 44 | justify-content: center; 45 | transition: background-color 0,2s ease-in-out; 46 | box-shadow: rgba(100, 100, 111, 0.10) 0px 7px 29px 0px; 47 | } 48 | 49 | .btn-seta.btn-voltar { 50 | transform: rotate(180deg); 51 | } 52 | 53 | .btn-seta:hover { 54 | background-color: #8351fe; 55 | } 56 | 57 | .cartao { 58 | opacity: 0; 59 | height: 100%; 60 | position: absolute; 61 | padding: 12px; 62 | box-shadow: rgba(100, 100, 111, 0.10) 0px 7px 29px 0px; 63 | border-radius: 10px; 64 | transition: opacity 0.3s ease-in-out; 65 | display: flex; 66 | flex-direction: column; 67 | justify-content: space-between; 68 | } 69 | 70 | .cartao.selecionado { 71 | opacity: 1; 72 | z-index: 1; 73 | } 74 | 75 | .cartao .imagem-personagem { 76 | width: 100%; 77 | max-width: 280px; 78 | margin-left: 10px; 79 | } 80 | 81 | .cartao .nome { 82 | background-color: rgb(179, 177, 185, 0.7); 83 | padding: 8px 10px; 84 | border-top-left-radius: 10px; 85 | border-top-right-radius: 10px; 86 | color: #ffffff; 87 | font-size: 16px; 88 | text-transform: uppercase; 89 | letter-spacing: 5px; 90 | } 91 | 92 | .cartao .descricao { 93 | background-color: rgb(225, 255, 225, 0.8); 94 | border-top-left-radius: 10px; 95 | border-top-right-radius: 10px; 96 | } 97 | 98 | .cartao .descricao .titulo { 99 | background-color: #333333; 100 | font-size: 20px; 101 | color: #ffffff; 102 | padding: 12px; 103 | } 104 | 105 | .cartao .descricao .texto { 106 | font-size: 14px; 107 | padding: 12px; 108 | text-align: justify; 109 | max-height: 110px; 110 | overflow-y: auto; 111 | } 112 | 113 | .cartao.fundo-1 { 114 | background: url(../src/img/fundo-1.jpg) no-repeat; 115 | } 116 | 117 | .cartao.fundo-2 { 118 | background: url(../src/img/fundo-2.jpg) no-repeat; 119 | } 120 | 121 | .cartao.fundo-3 { 122 | background: url(../src/img/fundo-3.jpg) no-repeat; 123 | } 124 | 125 | .cartao.fundo-4 { 126 | background: url(../src/img/fundo-4.jpg) no-repeat; 127 | } 128 | 129 | .cartao.fundo-5 { 130 | background: url(../src/img/fundo-5.jpg) no-repeat; 131 | } 132 | 133 | .cartao.fundo-6 { 134 | background: url(../src/img/fundo-6.jpg) no-repeat; 135 | } 136 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Aula de HTML e CSS 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

X-Devs

20 |
21 |
22 | 25 | 115 | 118 |
119 | 120 | 121 | 122 | 123 | 124 | --------------------------------------------------------------------------------