A Pen by Imersão Dev Alura on CodePen.
Created
April 5, 2021 16:03
-
-
Save D1ng0ls/df1a9fb5d44fcc65ef88275ab2c3d347 to your computer and use it in GitHub Desktop.
Super Trunfo - Dia 7
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title> | |
| Imersão Dev - Aula 07 | |
| </title> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <img src="https://www.alura.com.br/assets/img/imersoes/dev-2021/logo-imersao-super-trunfo.png" class="page-logo" | |
| alt=""> | |
| <h1 class="page-title">Super Trunfo</h1> | |
| <button onclick="sortearCarta()" id="btnSortear">Sortear carta</button> | |
| <form id="form"> | |
| <h2>Escolha o seu atributo</h2> | |
| <div class="opcoes" id="opcoes"></div> | |
| <button type="button" id="btnJogar" onclick="jogar()" disabled="false">Jogar</button> | |
| </form> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-family: 'Roboto Mono', monospace; | |
| min-height: 854px; | |
| background-image: url('https://www.alura.com.br/assets/img/imersoes/dev-2021/dia-07-super-trunfo-bg.png'); | |
| background-color: #000000; | |
| background-size: cover; | |
| background-position: center top; | |
| background-repeat: no-repeat; | |
| padding-bottom: 20vh; | |
| } | |
| .container { | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| .page-title { | |
| color: #ffffff; | |
| margin: 5px 0; | |
| } | |
| button { | |
| padding: .8rem 1.5rem; | |
| margin: 1rem 0; | |
| border-radius: 5px; | |
| border: none; | |
| font-size: 1rem; | |
| } | |
| h2 { | |
| color: white; | |
| } | |
| #carta-jogador { | |
| width: 360px; | |
| height: 500px; | |
| overflow: auto; | |
| border-radius: 10px; | |
| margin-bottom: 10px; | |
| margin: 0 auto; | |
| display: flex; | |
| align-items: flex-end; | |
| } | |
| #carta-jogador h3 { | |
| text-align: center; | |
| } | |
| .carta-imagem { | |
| border: 1px solid black; | |
| height: 100px; | |
| margin: 10px; | |
| } | |
| .carta-imagem img { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .carta-status { | |
| height: 160px; | |
| margin: 1.5rem; | |
| } | |
| .carta-status input { | |
| margin: 20px 10px; | |
| } | |
| .opcoes { | |
| color: white; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment