eduveks
/
maranhao-meu-site
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

Responsividade, grid, flex, outros.

RetornoDoHeader
Eduardo Velasques 3 years ago
parent
75e0dc33fc
commit
a286a0c379
8 changed files with 310 additions and 1 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +42
    -0
      formulario.html
  2. +90
    -1
      index.html
  3. +13
    -0
      salvar.html
  4. BIN
      styles/.base.css.swp
  5. +41
    -0
      styles/base.css
  6. +38
    -0
      styles/formulario.css
  7. +28
    -0
      styles/tabela.css
  8. +58
    -0
      tabela.html

+ 42
- 0
formulario.html View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<title>Formul&aacute;rio</title>
<link rel="stylesheet" href="styles/base.css" />
<link rel="stylesheet" href="styles/formulario.css" />
</head>
<body>
<header>
<h1>Meu Formul&aacute;rio</h1>
<p>
<a href="index.html">Index</a>
&middot;
<a href="tabela.html">Tabela</a>
&middot;
<a href="formulario.html">Formul&aacute;rio</a>
</p>
</header>
<main>
<form method="GET" action="salvar.html" target="salvou">
<div>
Tipo:
<input type="text" name="tipo" />
</div>
<div>
<label for="campo-marca">Marca:</label>
<input type="text" name="marca" id="campo-marca" />
</div>
<div>
<label>
Pode ser publicado?
<input type="checkbox" name="publica" />
</label>
</div>
<button>Enviar</button>
</form>
<iframe id="salvou-id" name="salvou" frameBorder="0" width="500" height="300"></iframe>
</main>
<footer>
</footer>
</body>
</html>

+ 90
- 1
index.html View File

@ -1 +1,90 @@
Bem vindo!
<!DOCTYPE html>
<html>
<head>
<title>T&iacute;tulo P&aacute;gina</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/base.css" />
</head>
<body>
<header>
<h1>Meu Site</h1>
<p>
<a href="tabela.html">Tabela</a>
&middot;
<a href="formulario.html">Formul&aacute;rio</a>
</p>
</header>
<main>
<section>
<h1>Bem vindo.</h1>
<p>Seja <span>bem vindo</span> ao site.</p>
</section>
<hr/>
<style>
div[data-colunas="grid"] {
display: grid;
grid-template-columns: auto auto auto;
}
</style>
<section>
<h1>GRID</h1>
<div data-colunas="grid">
<div>
<h2>Carro</h2>
<p>Andam em estradas, t&ecirc;m quatro pneus.</p>
</div>
<div>
<h2>Barco</h2>
<p>Flutua e se deslocar sobre &aacute;gua.</p>
</div>
<div>
<h2>Avi&atilde;o</h2>
<p>Com asas fixas e motores para se sustentar no ar.</p>
</div>
</div>
</section>
<hr/>
<style>
div[data-colunas="flex"] {
display: flex;
flex-direction: row;
}
div.tipos-veiculos[data-colunas="flex"] > div {
flex: 50%;
}
@media (max-width: 500px) {
div[data-colunas="flex"] {
flex-direction: column;
}
}
@media (min-width: 500px) and (max-width: 800px) {
div[data-colunas="flex"] {
background-color: #555500;
}
}
</style>
<section>
<h1>FLEX</h1>
<div class="tipos-veiculos" data-colunas="flex">
<div>
<h2>Carro</h2>
<p>Andam em estradas, t&ecirc;m quatro pneus.</p>
</div>
<div>
<h2>Barco</h2>
<p>Flutua e se deslocar sobre &aacute;gua.</p>
</div>
<div>
<h2>Avi&atilde;o</h2>
<p>Com asas fixas e motores para se sustentar no ar.</p>
</div>
</div>
</section>
</main>
</body>
</html>

+ 13
- 0
salvar.html View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>Salvar</title>
<link rel="stylesheet" href="styles/base.css" />
</head>
<body>
<h1>Salvo com Sucesso</h1>
<p>
&Eacute; uma simula&ccedil;&atilde;o.
</p>
</body>
</html>

BIN
styles/.base.css.swp View File


+ 41
- 0
styles/base.css View File

@ -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;
}

+ 38
- 0
styles/formulario.css View File

@ -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;
}

+ 28
- 0
styles/tabela.css View File

@ -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;
}

+ 58
- 0
tabela.html View File

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<title>Tabela</title>
<link rel="stylesheet" href="styles/base.css" />
<link rel="stylesheet" href="styles/tabela.css" />
</head>
<body>
<header>
<h1>Minha Tabela</h1>
<p>
<a href="index.html">Index</a>
&middot;
<a href="tabela.html">Tabela</a>
&middot;
<a href="formulario.html">Formul&aacute;rio</a>
</p>
</header>
<main>
<table class="tabela tabela-espaco-interno" cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th>Tipo</th>
<th>Marca</th>
<th>Quantidade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Carro</td>
<td>Ford</td>
<td>10</td>
</tr>
<tr>
<td rowspan="2" valign="top">Barco</td>
<td>Benetou</td>
<td>20</td>
</tr>
<tr>
<!--td>Barco</td-->
<td>Azimut</td>
<td>14</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2" align="right">Total</th>
<!--th></th-->
<td>44</td>
</tr>
</tfoot>
</table>
<div class="tabela">
<h1>Titutlo...</h1>
</div>
</main>
</body>
</html>

Write Preview
Loading…
Cancel
Save