From f2c7e4bb6c3bf020bad31059db742497d8259b84 Mon Sep 17 00:00:00 2001
From: jailton <jailtonraneimoney@gmail.com>
Date: Tue, 9 May 2023 13:01:14 +0000
Subject: [PATCH] estilizando form e table

---
 3-HTML/about.html |  64 ++++++-------
 3-HTML/index.html |  96 +++++++++----------
 4-css/index.html  | 228 ++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 308 insertions(+), 80 deletions(-)
 create mode 100644 4-css/index.html
diff --git a/3-HTML/about.html b/3-HTML/about.html
index 7736788..3150d5d 100644
--- a/3-HTML/about.html
+++ b/3-HTML/about.html
@@ -1,35 +1,35 @@
 <!DOCTYPE html>
 <html>
-<head>
-        <meta charset="UTF-8"/>
-</head>
-<body>
-
-<header>
-	<div class="brand"> <img src="./cifrao.png"/> </div>
-        <nav>
-                <ul>
-                        <li> <a href="./index.html">HOME </a> </li>
-                        <li> <a href="#">LOGIN</a> </li>
-                        <li> <a href="#">ABOUT</a> </li>
-                </ul>
-        </nav>
-</header>
-
-<main>
-
-        <div class="container">
-
-                <h3>Saiba um pouco sobre nosso trabalho!</h3>
-
-               
-        </div/>
-        
-</main>
-
-<footer>
-	<span>CostBank 2023 &copy; </span>
-</footer>
-
-</body>
+  <head>
+    <meta charset="UTF-8"/>
+  </head>
+  <body>
+
+    <header>
+      <div class="brand"> <img src="./cifrao.png"/> </div>
+      <nav>
+        <ul>
+          <li> <a href="./index.html">HOME </a> </li>
+          <li> <a href="#">LOGIN</a> </li>
+          <li> <a href="#">ABOUT</a> </li>
+        </ul>
+      </nav>
+    </header>
+
+    <main>
+
+      <div class="container">
+
+        <h3>Saiba um pouco sobre nosso trabalho!</h3>
+
+
+      </div/>
+
+    </main>
+
+    <footer>
+      <span>CostBank 2023 &copy; </span>
+    </footer>
+
+  </body>
 </html>
diff --git a/3-HTML/index.html b/3-HTML/index.html
index 4683261..968c772 100644
--- a/3-HTML/index.html
+++ b/3-HTML/index.html
@@ -1,51 +1,51 @@
 <!DOCTYPE html>
 <html>
-<head>
-        <meta charset="UTF-8"/>
-</head>
-<body>
-
-<header>
-	<div class="brand"><img src="./cifrao.png"/> </div>
-        <nav>
-                <ul>
-                        <li> <a href="#">HOME </a> </li>
-                        <li> <a href="#">LOGIN</a> </li>
-                        <li> <a href="./about.html">ABOUT</a> </li>
-                </ul>
-        </nav>
-</header>
-
-<main>
-
-        <div class="container">
-
-                <h3>Abra agora sua conta!</h3>
-
-                <form>
-                        <div class="form-group">
-                                <label for="name" >Name:</label>
-                                <input type="text" name="name"/>
-                        </div>
-                        <div class="form-group">
-                                <label for="lastname" >Lastname:</label>
-                                <input type="text" name="lastname"/>
-                        </div>
-                        <div class="form-group">
-                                <label for="pass" >Password:</label>
-                                <input type="password" name="pass"/>
-                        </div>
-
-                        <input type="submit" value"Send"/>
-                <form>
-
-        </div/>
-        
-</main>
-
-<footer>
-	<span>CostBank 2023 &copy; </span>
-</footer>
-
-</body>
+  <head>
+    <meta charset="UTF-8"/>
+  </head>
+  <body>
+
+    <header>
+      <div class="brand"><img src="./cifrao.png"/> </div>
+      <nav>
+        <ul>
+          <li> <a href="#">HOME </a> </li>
+          <li> <a href="#">LOGIN</a> </li>
+          <li> <a href="./about.html">ABOUT</a> </li>
+        </ul>
+      </nav>
+    </header>
+
+    <main>
+
+      <div class="container">
+
+        <h3>Abra agora sua conta!</h3>
+
+        <form>
+          <div class="form-group">
+            <label for="name" >Name:</label>
+            <input type="text" name="name"/>
+          </div>
+          <div class="form-group">
+            <label for="lastname" >Lastname:</label>
+            <input type="text" name="lastname"/>
+          </div>
+          <div class="form-group">
+            <label for="pass" >Password:</label>
+            <input type="password" name="pass"/>
+          </div>
+
+          <input type="submit" value"Send"/>
+          <form>
+
+      </div/>
+
+    </main>
+
+    <footer>
+      <span>CostBank 2023 &copy; </span>
+    </footer>
+
+  </body>
 </html>
diff --git a/4-css/index.html b/4-css/index.html
new file mode 100644
index 0000000..411ffa2
--- /dev/null
+++ b/4-css/index.html
@@ -0,0 +1,228 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>T&iacute;tulo P&aacute;gina</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1"/>
+  <meta charset="utf-8">
+</head>
+
+<style>
+
+	*{padding:0;margin:0;box-sizing:border-box;}
+
+	header{
+		min-height:8vh;
+		display:flex;
+		justify-content:space-between;
+		align-items:center;
+		padding: 0.5em 1em;
+		background-color:#000;
+		color:#FFF;
+	}
+
+	nav ul{
+		display:flex;
+		gap:0.8em;
+	}
+
+	nav ul li{list-style:none;}
+
+	a{text-decoration:none; color:#FFF;}
+
+	main{
+		min-height:85vh;
+		background-color:#CCC;
+		display:flex;
+    gap:1em;
+    flex-direction:column;
+		justify-content:center;
+		align-items:center;
+	}
+
+	form{
+		width:350px;
+		display:flex;
+		flex-direction:column;
+		gap:1em;
+		border: 1px solid #000;
+		border-radius:5px;
+		padding:1em;
+
+	}
+
+	.form-group{
+		width:100%;
+		display:flex;
+		flex-direction:column;
+		gap:0.3em;
+			}
+
+	.form-group input{
+		font-size:1em;
+		padding:0.3em 0.4em;
+		border-radius:5px;
+	}
+
+	.btn{
+		padding:0.3em 0.1em;
+		font-size:1em;
+		cursor:pointer;
+	}
+
+	footer{
+		min-height:7vh;
+		background-color:#000;
+		color:#FFF;
+		display:flex;
+		justify-content:center;
+		align-items:center;
+		font-size:1.3em;
+	}
+
+	p{
+		text-align:center;
+		margin:0.5em 0em;
+	}
+
+
+  table {
+  border-collapse: collapse;
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+}
+
+thead {
+  background-color: #ebebeb;
+  text-align: left;
+}
+
+th, td {
+  padding: 10px;
+  text-align: left;
+  border: 1px solid #000;
+}
+
+th {
+  font-weight: bold;
+  color: #333;
+  border-bottom: 2px solid #000;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+
+tbody td {
+  border-bottom: 1px solid #000;
+}
+
+
+
+</style>
+
+<body>
+  <header>
+
+	  <div class="brand"> <a href="#">WEBAPP</a></div>
+
+	  <nav>
+		<ul>
+			<li> <a href="#">ABOUT</a></li>	
+			<li> <a href="#">HOME</a></li>
+			<li> <a href="#">LOGIN</a></li>
+
+		</ul>
+	  </nav>
+
+  </header>
+
+  <main>
+	
+	  <form method="POST" >
+
+		<div class="form-group">
+			<label for="name">Name:</label>
+			<input type="text" id="name" />
+		</div>
+
+
+		<div class="form-group">
+			<label for="lastname">Lastname:</label>
+			<input type="text" id="lastname" />
+		</div>
+
+		<input type="submit" value="Send" class="btn" id="btnSubmit" />
+
+		<p id="result"></p>
+
+	  </form>
+
+    <div class="container-table">
+        
+       <table id="tbl" >
+     
+         <thead>
+           <tr>
+             <th scope="col">Name:</th>
+              <th scope="col">Lastname:</th>
+           </tr>
+              
+           </thead>
+ 
+             <tbody id="tbl-body" >
+ 
+ 
+ 
+               </tbody>
+ 
+         </table>
+ 
+     <div>
+
+  </main>
+
+
+  <footer>
+
+	<h3>Bootcamp Netuno 2023 &copy;</h3>
+
+  </footer>
+
+
+	<script>
+
+		document.querySelector('#btnSubmit').addEventListener('click',e =>{
+
+			e.preventDefault();
+
+			const name = document.querySelector('#name').value;
+
+			const lastname = document.querySelector('#lastname').value;
+
+			//document.querySelector('#result').textContent=`Hello ${name} ${lastname}!`;
+
+      const tblBody = document.querySelector('#tbl-body');
+
+       const row = document.createElement("tr");
+
+
+        const tdName = document.createElement("td");
+        tdName.textContent= name;
+
+        const tdLastname = document.createElement("td");
+        tdLastname.textContent= lastname;
+
+      row.appendChild(tdName);
+      row.appendChild(tdLastname);
+
+      tbl.appendChild(row);
+
+		})
+
+	</script>
+
+</body>
+</html>
