A Pen by Imersão Dev Alura on CodePen.
Created
April 5, 2021 14:56
-
-
Save D1ng0ls/a7c4b3cf9248ac3dba0bce66cef8c0e4 to your computer and use it in GitHub Desktop.
Aluraflix2 - Funções
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 05 | |
| </title> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1 class="page-title"> | |
| Aluraflix | |
| </h1> | |
| <img src="https://www.alura.com.br/assets/img/imersoes/dev-2021/logo-imersao-aluraflix.svg" class="page-logo" | |
| alt=""> | |
| <p class="page-subtitle"> | |
| Qual seu filme favorito? | |
| </p> | |
| <div class="form-wrapper"> | |
| <input type="text" id="filme" name="filme" placeholder="Insira endereço de imagem"> | |
| <button onClick="adicionarFilme()">Adicionar Filme</button> | |
| </div> | |
| </div> | |
| <div id="listaFilmes"></div> | |
| <a href="https://alura.com.br/" target="_blank"> | |
| <img src="https://www.alura.com.br/assets/img/home/alura-logo.svg" alt="" class="alura-logo"> | |
| </a> | |
| </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; | |
| text-align:center; | |
| background-image: url('https://www.alura.com.br/assets/img/imersoes/dev-2021/dia-04-aluraflix-e-filmes.png'); | |
| background-color: #000000; | |
| background-size: cover; | |
| background-position: center top; | |
| background-repeat: no-repeat; | |
| } | |
| .container { | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| .page-title { | |
| color: #ffffff; | |
| margin: 0 0 5px; | |
| } | |
| .page-subtitle { | |
| color: #ffffff; | |
| margin-top: 5px; | |
| } | |
| .page-logo { | |
| width: 200px; | |
| } | |
| .alura-logo { | |
| width: 40px; | |
| position: absolute; | |
| top: 10px; | |
| right:10px; | |
| } | |
| #listaFilmes img { | |
| margin: 10px; | |
| } | |
| .form-wrapper { | |
| margin: 0 0 15px; | |
| } | |
| .form-wrapper input { | |
| display: block; | |
| margin: 0 auto; | |
| padding: 10px 15px; | |
| } | |
| .form-wrapper button { | |
| border: 0; | |
| color: #ffffff; | |
| background: #DA1E26; | |
| font-weight:bold; | |
| padding: 15px 20px; | |
| font-size: 16px; | |
| borde-radius: 4px; | |
| margin-top: 20px; | |
| cursor: pointer; | |
| transition: .3s; | |
| } | |
| .form-wrapper button:hover { | |
| opacity:.8; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment