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 0000000..d83ff3d Binary files /dev/null and b/styles/.base.css.swp differ 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...

+
+
+ +