From a5d1a0b4c317414b5637cfb4e51ca08e31fd8923 Mon Sep 17 00:00:00 2001 From: Raoni Date: Thu, 11 May 2023 18:04:42 +0000 Subject: [PATCH] add css --- extinction.html | 56 +++++++++++++++++++++++ home.html | 42 ++++++++++++++++++ index.html | 31 ------------- style/{index.css => extinction.css} | 26 +++++++++-- style/home.css | 69 +++++++++++++++++++++++++++++ 5 files changed, 189 insertions(+), 35 deletions(-) create mode 100644 extinction.html create mode 100644 home.html delete mode 100644 index.html rename style/{index.css => extinction.css} (68%) create mode 100644 style/home.css diff --git a/extinction.html b/extinction.html new file mode 100644 index 0000000..bcd89fd --- /dev/null +++ b/extinction.html @@ -0,0 +1,56 @@ + + + + + + + + + Extinções + + +
+ logo +
+ Home + Parques Naturais + Extinções +
+
+

Tabela de Animais

+ + + + + + + + + + + + + + + + + + + + + + + + + +
NomeQuantidade
Baleia-Azul10.000
Orangotango104.700
Tubarão-Branco3.500
Ararinha-Azul200
+ + + + \ No newline at end of file diff --git a/home.html b/home.html new file mode 100644 index 0000000..b3d32cd --- /dev/null +++ b/home.html @@ -0,0 +1,42 @@ + + + + + + + + + Animals + + +
+ logo +
+ Home + Parques Naturais + Extinções +
+
+
+ +
+
+

Sobre a extinção

+

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.

+
+ + + + \ No newline at end of file diff --git a/index.html b/index.html deleted file mode 100644 index 15e75a8..0000000 --- a/index.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - Document - - -
- logo -
- Home - Parques Naturais - Extinções -
-
-
- -
- - - - \ No newline at end of file diff --git a/style/index.css b/style/extinction.css similarity index 68% rename from style/index.css rename to style/extinction.css index 5b8f527..0a3cb28 100644 --- a/style/index.css +++ b/style/extinction.css @@ -4,7 +4,7 @@ body { font-family: Roboto, Helvetica, sans-serif; } -.navbar{ +.navbar { background-color: gray; display: flex; min-height: 50px; @@ -24,7 +24,7 @@ body { margin-right: 10px; color: white; font-size: 14px; -} +} .pages a:hover { color: rgb(196, 208, 251); @@ -34,6 +34,24 @@ a:last-child { margin-right: 20px; } -figure { - background-image: url("./mamute-home.jpg"); +h2 { + text-align: center; + margin-top: 40px; +} + +table { + margin: auto; + text-align: center; + border-radius: 5px; +} + +td { + font-size: 15px; +} + +table, +th, +td { + height: 40px; + border: 1px solid; } \ No newline at end of file diff --git a/style/home.css b/style/home.css new file mode 100644 index 0000000..6dcc755 --- /dev/null +++ b/style/home.css @@ -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; +} \ No newline at end of file