Created
July 12, 2022 19:11
-
-
Save mikansc/052c1494f7efdf0f90d818299dfdc669 to your computer and use it in GitHub Desktop.
Exemplo de HTML e CSS para resolução dos exercícios do curso DEVInHouse
This file contains 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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Lista de Convidados</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <h1> | |
| Lista de Convidados | |
| </h1> | |
| </header> | |
| <main class="content"> | |
| <div class="card"> | |
| <h2>Camarote</h2> | |
| <ul class="listaConvidados" id="listaCamarote"> | |
| </ul> | |
| </div> | |
| <div class="card"> | |
| <h2>Arquibancada</h2> | |
| <ul class="listaConvidados" id="listaArquibancada"> | |
| </ul> | |
| </div> | |
| <div class="card"> | |
| <h2>Pista</h2> | |
| <ul class="listaConvidados" id="listaPista"> | |
| </ul> | |
| </div> | |
| </main> | |
| </body> | |
| </html> |
This file contains 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
| /* RESET DE CSS */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6, | |
| body { | |
| font-size: 16px; | |
| font-family: Arial, Helvetica, sans-serif; | |
| font-weight: 300; | |
| } | |
| /* FIM DO RESET */ | |
| body { | |
| background-color: #eee; | |
| } | |
| .header { | |
| width: 100%; | |
| height: 80px; | |
| margin-bottom: 1.5em; | |
| background-color: #5b6e8a; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .header h1 { | |
| font-size: 1.5rem; | |
| color: white; | |
| text-transform: uppercase; | |
| } | |
| .content { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| gap: 10px; | |
| margin: 0 1em; | |
| } | |
| @media screen and (min-width: 720px) { | |
| .header h1 { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| } | |
| .content { | |
| max-width: 80%; | |
| margin: 0 auto; | |
| flex-direction: row; | |
| } | |
| } | |
| .card { | |
| background-color: white; | |
| width: 100%; | |
| height: 400px; | |
| overflow-y: scroll; | |
| padding: 1em; | |
| border: 1px solid rgba(0, 0, 0, 0.1); | |
| box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); | |
| } | |
| .card h2 { | |
| font-size: 1rem; | |
| text-transform: uppercase; | |
| margin-bottom: 1em; | |
| } | |
| .card ul { | |
| list-style: disc inside; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment