Created
April 1, 2026 10:20
-
-
Save kelvysmoura/03bdce2fcf7ea594ff78c9db612f0ec3 to your computer and use it in GitHub Desktop.
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
| <!DOCTYPE html> | |
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>To-do Simples</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background: #f5f6fa; | |
| padding: 40px; | |
| } | |
| .container { | |
| max-width: 400px; | |
| margin: auto; | |
| background: white; | |
| padding: 20px; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 10px rgba(0,0,0,0.1); | |
| } | |
| h1 { | |
| text-align: center; | |
| margin-bottom: 20px; | |
| } | |
| .input-area { | |
| display: flex; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| } | |
| input { | |
| flex: 1; | |
| padding: 10px; | |
| border-radius: 6px; | |
| border: 1px solid #ccc; | |
| } | |
| button { | |
| padding: 10px; | |
| border: none; | |
| background: #2f3640; | |
| color: white; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| } | |
| button:hover { | |
| background: #353b48; | |
| } | |
| ul { | |
| list-style: none; | |
| padding: 0; | |
| } | |
| li { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 10px; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .completed span { | |
| text-decoration: line-through; | |
| color: #888; | |
| } | |
| .actions { | |
| display: flex; | |
| gap: 5px; | |
| } | |
| .btn-complete { | |
| background: #00b894; | |
| color: white; | |
| } | |
| .btn-delete { | |
| background: #e74c3c; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>To-do List</h1> | |
| <div class="input-area"> | |
| <input type="text" id="inputTarefa" placeholder="Digite uma tarefa"> | |
| <button id="btnAdicionar">Adicionar</button> | |
| </div> | |
| <ul id="lista"> | |
| <!-- ITEM NORMAL --> | |
| <li> | |
| <span>Estudar JavaScript</span> | |
| <div class="actions"> | |
| <button class="btn-complete">Concluir</button> | |
| <button class="btn-delete">Excluir</button> | |
| </div> | |
| </li> | |
| <!-- ITEM CONCLUÍDO --> | |
| <li class="completed"> | |
| <span>Fazer exercício</span> | |
| <div class="actions"> | |
| <button class="btn-complete">Concluir</button> | |
| <button class="btn-delete">Excluir</button> | |
| </div> | |
| </li> | |
| <!-- OUTRO ITEM --> | |
| <li> | |
| <span>Assistir aula</span> | |
| <div class="actions"> | |
| <button class="btn-complete">Concluir</button> | |
| <button class="btn-delete">Excluir</button> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment