From a286a0c3799f4a67f9d0017aa3d5ef979adcf9df Mon Sep 17 00:00:00 2001 From: Eduardo Velasques Date: Thu, 6 Oct 2022 21:37:25 +0000 Subject: [PATCH] Responsividade, grid, flex, outros. --- formulario.html | 42 +++++++++++++++++++ index.html | 91 +++++++++++++++++++++++++++++++++++++++++- salvar.html | 13 ++++++ styles/.base.css.swp | Bin 0 -> 12288 bytes styles/base.css | 41 +++++++++++++++++++ styles/formulario.css | 38 ++++++++++++++++++ styles/tabela.css | 28 +++++++++++++ tabela.html | 58 +++++++++++++++++++++++++++ 8 files changed, 310 insertions(+), 1 deletion(-) create mode 100644 formulario.html create mode 100644 salvar.html create mode 100644 styles/.base.css.swp create mode 100644 styles/base.css create mode 100644 styles/formulario.css create mode 100644 styles/tabela.css create mode 100644 tabela.html diff --git a/formulario.html b/formulario.html new file mode 100644 index 0000000..7c0acd5 --- /dev/null +++ b/formulario.html @@ -0,0 +1,42 @@ + + + + Formulário + + + + +
+

Meu Formulário

+

+ Index + · + Tabela + · + Formulário +

+
+
+
+
+ Tipo: + +
+
+ + +
+
+ +
+ +
+ +
+ + + diff --git a/index.html b/index.html index 2226d23..378ddd3 100644 --- a/index.html +++ b/index.html @@ -1 +1,90 @@ -Bem vindo! + + + + Título Página + + + + +
+

Meu Site

+

+ Tabela + · + Formulário +

+
+
+
+

Bem vindo.

+

Seja bem vindo ao site.

+
+
+ +
+

GRID

+
+
+

Carro

+

Andam em estradas, têm quatro pneus.

+
+
+

Barco

+

Flutua e se deslocar sobre água.

+
+
+

Avião

+

Com asas fixas e motores para se sustentar no ar.

+
+
+
+
+ + + +
+

FLEX

+
+
+

Carro

+

Andam em estradas, têm quatro pneus.

+
+
+

Barco

+

Flutua e se deslocar sobre água.

+
+
+

Avião

+

Com asas fixas e motores para se sustentar no ar.

+
+
+
+
+ + diff --git a/salvar.html b/salvar.html new file mode 100644 index 0000000..415a8d9 --- /dev/null +++ b/salvar.html @@ -0,0 +1,13 @@ + + + + Salvar + + + +

Salvo com Sucesso

+

+ É uma simulação. +

+ + diff --git a/styles/.base.css.swp b/styles/.base.css.swp new file mode 100644 index 0000000000000000000000000000000000000000..d83ff3dc123d266a885f24df685644a9e150822e GIT binary patch literal 12288 zcmeI2y>HV%7>BQj0s{pE5@I~4)D#pac9PP{QK1V%2NtBVuyD4|iG|~{eCH+s0Rr(y zPXj${MF2712$N(AG zPXoCLt(CcrX2Y?Ivhx?t^E0P6_Ok=kA_HWA43GgbKnBPF86X2>;2$?&(i!#;Gaj1E zd1*Qo;4om|C;EQ} z-@q5}8GHioz+3PJyarp~33v=fGao?bG%^_=17v^eF85R%v{{s-xp70~=eo+rJ6gulH~bz<6-mB|Rp#=cjAPYrGvNx~M4J-v9nnmp zmTfU>xn3tq#HRfRv>+q2@@$KBq~9na-MnH z4nx~+v#t~Ynid_3fkt_{D+1L=6ZB{Tr|6S)Jh5n3d1Gm*%CXwD<%?zd72b6w6+AVt zrUmSA>R^nC%eK7` PL^_Sda8>t3T7jisMrQd2 literal 0 HcmV?d00001 diff --git a/styles/base.css b/styles/base.css new file mode 100644 index 0000000..248e5af --- /dev/null +++ b/styles/base.css @@ -0,0 +1,41 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); + +html, body { + font-family: 'Roboto', sans-serif; + font-size: 16px; + background-color: black; + color: #f1f1f1; + margin: 0; + padding: 0; +} +header { + display: none; + background-color: #414141; + padding: 20px 40px; + box-shadow: 0 10px 10px rgba(0, 255, 0, 0.3); + position: fixed; + left: 0; + right: 0; + top: 0; +} +header > h1 { + text-shadow: 2px 3px 10px rgba(0, 255, 0, 0.7); +} + +header a { + color: #00ff00; + text-decoration: none; +} + +header a:hover { + color: #00ffff; +} + +header a:active { + color: #ffff00; +} + +main { + margin: 200px 40px 40px 40px; +} + diff --git a/styles/formulario.css b/styles/formulario.css new file mode 100644 index 0000000..f68da3c --- /dev/null +++ b/styles/formulario.css @@ -0,0 +1,38 @@ +form > div { + margin-top: 20px; +} + +form input { + padding: 10px; + border: 1px solid #00ff00; + border-radius: 10px; + color: #00ff00; + min-width: 20px; + min-height: 20px; + background-image: linear-gradient(#212121, #343434); +} + +form > button { + margin-top: 20px; + padding: 10px 20px; + border: 2px solid #00ff00; + border-radius: 20px; + color: #00ff00; + font-weight: 800; + background-image: linear-gradient(#343434, #101010, #343434); + box-shadow: 2px 3px 10px rgba(0, 255, 0, 0.7); + transition: 2s ease-out; +} + +form > button:hover { + transition: 2s ease-out; + color: #00ffff; + border: 2px solid #00ffff; + background-image: linear-gradient(#101010, #545454, #101010); +} + + +iframe#salvou-id { + margin-top: 20px; +} + diff --git a/styles/tabela.css b/styles/tabela.css new file mode 100644 index 0000000..f051a5b --- /dev/null +++ b/styles/tabela.css @@ -0,0 +1,28 @@ + +table.tabela { + background: #101010; + border: 1px solid #00FF00; + padding: 0; + margin: 0; +} + +table.tabela td, table.tabela th { + border: 1px solid #00ff00; +} + +.tabela-espaco-interno td, .tabela-espaco-interno th { + padding: 10px; +} + +table.tabela th { + font-weight: bold; + color: #91d500; + padding: 10px; + background-color: black; +} + +table.tabela > tfoot td { + font-weight: bold; + color: #00ff00; +} + diff --git a/tabela.html b/tabela.html new file mode 100644 index 0000000..be48460 --- /dev/null +++ b/tabela.html @@ -0,0 +1,58 @@ + + + + Tabela + + + + +
+

Minha Tabela

+

+ Index + · + Tabela + · + Formulário +

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TipoMarcaQuantidade
CarroFord10
BarcoBenetou20
Azimut14
Total44
+
+

Titutlo...

+
+
+ +