commit
879cde8bd3
7 changed files with 144 additions and 0 deletions
Unified View
Diff Options
-
+1 -0.gitignore
-
+24 -0exercicios/index.html
-
+25 -0exercicios/index2.html
-
+19 -0index.html
-
+0 -0outroindex.html
-
+4 -0script.js
-
+71 -0style.css
+ 1
- 0
.gitignore
View File
| @ -0,0 +1 @@ | |||||
| *.swp | |||||
+ 24
- 0
exercicios/index.html
View File
| @ -0,0 +1,24 @@ | |||||
| <html> | |||||
| <head> | |||||
| <meta charset="utf-8" > | |||||
| <title></title> | |||||
| </head> | |||||
| <body> | |||||
| <h1>Testando VIM com novas configurações</h1> | |||||
| <div> | |||||
| <table width="400px" border="1"> | |||||
| <tr> | |||||
| <th width="40%">Name</th> | |||||
| <th width="20%">Stacks</th> | |||||
| <th width="40%">Ocupation</th> | |||||
| <tr> | |||||
| <tr> | |||||
| <td>Marcos</td> | |||||
| <td>JS/TS, Java</td> | |||||
| <td>Web Backend Developer</td> | |||||
| </tr> | |||||
| </table> | |||||
| <p><a href="index2.html">Form</a></p> | |||||
| </div> | |||||
| </body> | |||||
| </html> | |||||
+ 25
- 0
exercicios/index2.html
View File
| @ -0,0 +1,25 @@ | |||||
| <html> | |||||
| <head> | |||||
| <meta charset="utf-8"> | |||||
| </head> | |||||
| <body> | |||||
| <a href="index.html">Table</a> | |||||
| <form action="render"> | |||||
| <label>Name</label> | |||||
| <input type="text" name="name" placeholder="Digite seu nome" /> | |||||
| <label>Age</label> | |||||
| <input type="number" name="age" placeholder="Digite sua idade" /> | |||||
| <label>Email</label> | |||||
| <input type=""email placeholder="Digite seu email" /> | |||||
| <label>Confirm Data</label> | |||||
| <input type="checkbox" /> | |||||
| <button type="submit">Send</button> | |||||
| <iframe name="render"></iframe> | |||||
| </form> | |||||
| <script> | |||||
| const submitForm = () => { | |||||
| console.log('Success') | |||||
| } | |||||
| </script> | |||||
| </body> | |||||
| </html> | |||||
+ 19
- 0
index.html
View File
| @ -0,0 +1,19 @@ | |||||
| <!DOCTYPE html> | |||||
| <html lang="en"> | |||||
| <head> | |||||
| <meta charset="utf-8"> | |||||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |||||
| <link rel="stylesheet" href="style.css"> | |||||
| <title>My First Terminal HTML</title> | |||||
| </head> | |||||
| <body> | |||||
| <h1>Hello guys!!</h1> | |||||
| <p>I'm coding HTML by bash</p> | |||||
| <form> | |||||
| <label>Nome:</label> | |||||
| <input type="text" name="name" placeholder="Digite seu nome"/> | |||||
| <button onClick="helloDev()">Enviar</button> | |||||
| </form> | |||||
| <script src="script.js"></script> | |||||
| </body> | |||||
| </html> | |||||
+ 0
- 0
outroindex.html
View File
+ 4
- 0
script.js
View File
| @ -0,0 +1,4 @@ | |||||
| const helloDev = () => { | |||||
| alert('Obrigado por se apresentar! Tenha uma ótima aula') | |||||
| } | |||||
+ 71
- 0
style.css
View File
| @ -0,0 +1,71 @@ | |||||
| * { | |||||
| margin: 0; | |||||
| padding: 0; | |||||
| box-sizing: border-box; | |||||
| } | |||||
| body { | |||||
| background-color: #181818; | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| padding: 3rem 0; | |||||
| } | |||||
| h1 { | |||||
| color: #f5f5f5; | |||||
| text-align: center; | |||||
| color: #f5f5f5; | |||||
| } | |||||
| p { | |||||
| text-align: center; | |||||
| color: #f5f5f5; | |||||
| margin-bottom: 1rem; | |||||
| } | |||||
| form { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| width: 350px; | |||||
| height: 250px; | |||||
| margin: 0 auto; | |||||
| gap: 0.5rem; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| background-color: #222222; | |||||
| border: none; | |||||
| border-radius: 1rem; | |||||
| } | |||||
| form label { | |||||
| color: #f5f5f5; | |||||
| } | |||||
| form input { | |||||
| width: 250px; | |||||
| height: 2rem; | |||||
| border: none; | |||||
| border-radius: 0.5rem; | |||||
| outline: none; | |||||
| margin-bottom: 1rem; | |||||
| padding-left: 8px; | |||||
| } | |||||
| form button { | |||||
| width: 250px; | |||||
| height: 2rem; | |||||
| background-color: cyan; | |||||
| border: none; | |||||
| border-radius: 1rem; | |||||
| color: #f5f5f5; | |||||
| cursor: pointer; | |||||
| } | |||||
| form button:hover { | |||||
| background-color: blue; | |||||
| transition: 0.3s; | |||||
| } | |||||