Responsividade, grid, flex, outros.

3 years ago · a286a0c379
--- a/formulario.html
+++ b/formulario.html
@ -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> 
--- a/index.html
+++ b/index.html
@ -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>
--- a/salvar.html
+++ b/salvar.html
@ -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> 
--- a/styles/.base.css.swp
+++ b/styles/.base.css.swp
--- a/styles/base.css
+++ 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;
 }
--- a/styles/formulario.css
+++ 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;
 }
--- a/styles/tabela.css
+++ 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;
 }
--- a/tabela.html
+++ b/tabela.html
@ -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>