jailton
/
exercicios
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

estilizando form e table

master
jailton 3 years ago
parent
8f48026ef2
commit
f2c7e4bb6c
3 changed files with 308 additions and 80 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +32
    -32
      3-HTML/about.html
  2. +48
    -48
      3-HTML/index.html
  3. +228
    -0
      4-css/index.html

+ 32
- 32
3-HTML/about.html View File

@ -1,35 +1,35 @@
<!DOCTYPE html> <!DOCTYPE html>
<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> </html>

+ 48
- 48
3-HTML/index.html View File

@ -1,51 +1,51 @@
<!DOCTYPE html> <!DOCTYPE html>
<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> </html>

+ 228
- 0
4-css/index.html View File

@ -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>

Write Preview
Loading…
Cancel
Save