raonieqr
/
Animals
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

add css

master
Raoni 3 years ago
parent
51b3610db4
commit
a5d1a0b4c3
5 changed files with 189 additions and 35 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +56
    -0
      extinction.html
  2. +42
    -0
      home.html
  3. +0
    -31
      index.html
  4. +22
    -4
      style/extinction.css
  5. +69
    -0
      style/home.css

+ 56
- 0
extinction.html View File

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style/extinction.css">
<link rel="icon" href="./img/whale.png">
<title>Extinções</title>
</head>
<body>
<main class="navbar">
<a href=""><img src="./img/whale.png" alt="logo"></a>
<div class="pages">
<a href="home.html">Home</a>
<a href="#">Parques Naturais</a>
<a href="extincoes.html">Extinções</a>
</div>
</main>
<h2>Tabela de Animais</h2>
<table>
<thead>
<tr>
<th scope="col">Nome</th>
<th scope="col">Quantidade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Baleia-Azul</td>
<td>10.000</td>
</tr>
<tr>
<td>Orangotango</td>
<td>104.700</td>
</tr>
<tr>
<td>Tubarão-Branco</td>
<td>3.500</td>
</tr>
<tr>
<td>Ararinha-Azul</td>
<td>200</td>
</tr>
</tbody>
</table>
</body>
</html>
<!--
Crie outra página chamada parques-naturais.html, com a lista de 5 parques naturais do Brasil e a área em m2 para cada um deles.
Deve ter o cabeçalho da tabela e o footer com o somatório.
Pelo menos 2 parques devem ser do mesmo estado, sendo que não pode repetir o nome do estado.
No rodapé da tabela deve conter o somatório das áreas agrupando colunas.
Crie um formulário que receba o nome do animal, quantidade, o nome do parque e o estado.
Realize a submissão do formulário para um iframe com a mensagem que foi salvo com sucesso. -->

+ 42
- 0
home.html View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style/home.css">
<link rel="icon" href="./img/whale.png">
<title>Animals</title>
</head>
<body>
<main class="navbar">
<a href="home.html"><img src="./img/whale.png" alt="logo"></a>
<div class="pages">
<a href="home.html">Home</a>
<a href="#">Parques Naturais</a>
<a href="extinction.html">Extinções</a>
</div>
</main>
<figure>
<img src="./img/mamute-home.jpeg" alt="">
</figure>
<article class="about">
<h2>Sobre a extinção</h2>
<p>Os animais em extinção são uma triste realidade em nosso planeta. A ação humana tem sido uma das principais
causas dessa situação alarmante, através de atividades como a caça predatória, a destruição de habitats
naturais e a poluição ambiental. Cada vez mais espécies estão sendo ameaçadas, com muitas delas correndo o
risco de desaparecer completamente. Essa perda de biodiversidade não afeta apenas os animais em si, mas
também o equilíbrio ecológico em nosso planeta, podendo ter consequências graves para o meio ambiente e para
a qualidade de vida humana. É importante conscientizar a população sobre a importância da preservação da
natureza e tomar medidas concretas para proteger essas espécies em perigo de extinção.</p>
</article>
</body>
</html>
<!-- Crie uma nova página chamada extincoes.html, com uma tabela simples que contenha o nome de 5 animais em extinção e a quantidade para cada um deles.
Crie outra página chamada parques-naturais.html, com a lista de 5 parques naturais do Brasil e a área em m2 para cada um deles.
Deve ter o cabeçalho da tabela e o footer com o somatório.
Pelo menos 2 parques devem ser do mesmo estado, sendo que não pode repetir o nome do estado.
No rodapé da tabela deve conter o somatório das áreas agrupando colunas.
Crie um formulário que receba o nome do animal, quantidade, o nome do parque e o estado.
Realize a submissão do formulário para um iframe com a mensagem que foi salvo com sucesso. -->

+ 0
- 31
index.html View File

@ -1,31 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style/index.css">
<title>Document</title>
</head>
<body>
<main class="navbar">
<a href="./index.html"><img src="./img/whale.png" alt="logo"></a>
<div class="pages">
<a href="./index.html">Home</a>
<a href="#">Parques Naturais</a>
<a href="#">Extinções</a>
</div>
</main>
<figure>
</figure>
</body>
</html>
<!-- Crie uma nova página chamada extincoes.html, com uma tabela simples que contenha o nome de 5 animais em extinção e a quantidade para cada um deles.
Crie outra página chamada parques-naturais.html, com a lista de 5 parques naturais do Brasil e a área em m2 para cada um deles.
Deve ter o cabeçalho da tabela e o footer com o somatório.
Pelo menos 2 parques devem ser do mesmo estado, sendo que não pode repetir o nome do estado.
No rodapé da tabela deve conter o somatório das áreas agrupando colunas.
Crie um formulário que receba o nome do animal, quantidade, o nome do parque e o estado.
Realize a submissão do formulário para um iframe com a mensagem que foi salvo com sucesso. -->

style/index.css → style/extinction.css View File


+ 69
- 0
style/home.css View File

@ -0,0 +1,69 @@
body {
margin: 0;
padding: 0;
font-family: Roboto, Helvetica, sans-serif;
}
.navbar {
background-color: gray;
display: flex;
min-height: 50px;
align-items: center;
justify-content: space-between;
width: 100vw;
}
.navbar img {
width: 40px;
height: 30px;
margin: 5px 20px;
}
.pages a {
text-decoration: none;
margin-right: 10px;
color: white;
font-size: 14px;
}
.pages a:hover {
color: rgb(196, 208, 251);
}
a:last-child {
margin-right: 20px;
}
figure {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
figure img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.about {
display: flex;
flex-wrap: wrap;
padding: 20px;
justify-content: center;
}
.about h2 {
color: rgb(47, 47, 47);
font-size: 22px;
margin-bottom: 0;
font-weight: 600;
}
.about p {
color: rgb(47, 47, 47);
font-size: 16px;
}

Write Preview
Loading…
Cancel
Save