higor
/
bootcamp
0
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

Atualização de CSS e HTML

master
higor 3 years ago
parent
145d1a80b2
commit
d3d1c0525b
5 changed files with 145 additions and 21 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -2
      index.html
  2. +17
    -6
      natureza/extincoes/extincoes.html
  3. +40
    -0
      natureza/extincoes/style.css
  4. +24
    -13
      natureza/parques/parques-naturais.html
  5. +62
    -0
      natureza/parques/style.css

+ 2
- 2
index.html View File

@ -6,11 +6,11 @@
<div class="header">
<a class="active" href="/">Home</a>
<a href="natureza/extincoes/extincoes.html">Extin&ccedil&otildees</a>
<a href="natureza/parques/index.html">Teste</a>
<a href="natureza/parques/parques-naturais.html">Parques Naturais</a>
</div>
</head>
<body>
<h1>Navegacao de Paginas</h1>
<h1>Navega&ccedil&atildeo de P&aacuteginas</h1>
</body>
<footer>
<div>


+ 17
- 6
natureza/extincoes/extincoes.html View File

@ -1,8 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>EXTINCOES</title>
<link rel="stylesheet" href="style.css">
<title>Extin&ccedil&otildees</title>
<div class="header">
<a href="/">Home</a>
<a class="active" href="natureza/extincoes/extincoes.html">Extin&ccedil&otildees</a>
<a href="/natureza/parques/parques-naturais.html">Parques Naturais</a>
</div>
</head>
<body>
<table>
@ -15,25 +20,31 @@
<tbody>
<tr>
<th>Baleia-azul</th>
<td>4</td>
<td>12000</td>
</tr>
<tr>
<th>On&ccedila-pintada</th>
<td>2</td>
<td>20000</td>
</tr>
<tr>
<th>Lobo-guar&aacute</th>
<td>7</td>
<td>24000</td>
</tr>
<tr>
<th>Mico-le&atildeo-dourado</th>
<td>1</td>
<td>15000</td>
</tr>
<tr>
<th>Panda-gigante</th>
<td>9</td>
<td>2537</td>
</tr>
</tbody>
</table>
</body>
<footer>
<div>
<strong>Copyright &copy 2023 Higor.</strong>
All rights reserved.
</div>
</footer>
</html>

+ 40
- 0
natureza/extincoes/style.css View File

@ -1,3 +1,43 @@
html {
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
footer {
position: fixed;
width: 100%;
display: block;
padding: 12px;
bottom: 0;
margin-right: 8px;
background-color: #f1f1f1;
}
table {
border-collapse: collapse;
width: 100%;


+ 24
- 13
natureza/parques/parques-naturais.html View File

@ -1,38 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Parques Naturais</title>
<div class="header">
<a href="/">Home</a>
<a href="/natureza/extincoes/extincoes.html">Extin&ccedil&otildees</a>
<a class="active" href="natureza/parques/parques-naturais.html">Parques Naturais</a>
</div>
</head>
<body>
<table cellspacing="5" cellpadding="10" border="2">
<table>
<thead>
<tr>
<th>Nome</th>
<th>Area em m2</th>
<th>&Aacuterea em km2</th>
</tr>
</thead>
<tbody>
<tr>
<th>Baleia-azul</th>
<td>4</td>
<th>Parque Nacional da Chapada Diamantina</th>
<td>1520</td>
</tr>
<tr>
<th>Onca-pintada</th>
<td>2</td>
<th>Parque Nacional Montanhas de Tumucumaque</th>
<td>38874</td>
</tr>
<tr>
<th>Lobo-guara</th>
<td>7</td>
<th>Parque Nacional da Tijuca</th>
<td>39,58</td>
</tr>
<tr>
<th>Mico-leao-dourado</th>
<td>1</td>
<th>Parque Nacional dos Len&ccedil&oacuteis Maranhenses</th>
<td>1566,84</td>
</tr>
<tr>
<th>Panda-gigante</th>
<td>9</td>
<th>Parque Nacional da Chapada dos Veadeiros</th>
<td>2405,9</td>
</tr>
</tbody>
</table>
</body>
<footer>
<div>
<strong>Copyright &copy 2023 Higor.</strong>
All rights reserved.
</div>
</footer>
</html>

+ 62
- 0
natureza/parques/style.css View File

@ -0,0 +1,62 @@
html {
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
footer {
position: fixed;
width: 100%;
display: block;
padding: 12px;
bottom: 0;
margin-right: 8px;
background-color: #f1f1f1;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 15px;
text-align: left;
}
thead {
background-color: #04AA6D;
color: white;
}
tbody tr:nth-child(odd) {
background-color: #f2f2f2;
}
tbody tr:hover {
background: #01cf00;
}

Write Preview
Loading…
Cancel
Save