Modified files and added less

3 years ago · b6eb511bbe
--- a/praticando/index.html
+++ b/praticando/index.html
@ -1,65 +1,81 @@
 <html lang="pt-br">
  <head>
      <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="style.css"/>
    <link rel="stylesheet/less" type="text/css" href="styles/styles.less" />
    <script src="scripts/less.min.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>PRATICANDO VIM</h1>
    <p>RUNNING TABLE</p>
    <header>
      <ul>
        <li>Incio</li>
        <li>Personagens</li>
        <li>Curiosidades</li>
      </ul>
    </header>
    <div>
      <table border="1" width="100%">
        <thead>
          <tr>
            <th colspan="3">Running</th>
          </tr>
        </thead>
    <main>
      <div class="titulo">
        <h1 class="titulo-principal">AVENGERS</h1>
        <p class="titulo-texto">Super heróis no mundoverso</p>
      </div>
        <tbody>
          <tr>
            <td>Monday</td>
            <td>Wednesday</td>
            <td>Sartuday</td>
          </tr>
      <div class="table">
        <table border="4" width="30%" height="50%">
          <thead>
            <tr align="center">
              <th>Heróis</th>
              <th>Características</th>
            </tr>
          </thead>
          <tr>
            <td>5 km</td>
            <td>6 km</td>
            <td>12 km</td>
          </tr>
          <tbody>
            <tr>
              <td>Homem de Ferro</td>
              <td>Inteligente | Confiante</td>
            </tr>
          <tr>
            <td> km</td>
            <td> km</td>
            <td> km</td>
          </tr>
        </tbody>
      </table>
    </div>
            <tr>
              <td>Capitão América</td>
              <td>Líder | Ex-militar</td>
            </tr>
    <div>
      <form>
        <div class="datas">
          <div>
            <label for="name">Name:</label>
            <input class="datas-running" type="text" name="name" placeholder="Type your name"/>
          </div>
            <tr>
              <td>Thor</td>
              <td>Deus do trovão</td>
            </tr>
          <div>
            <label for="name">Distance:</label>
            <input class="datas-running" type="text" name="name" placeholder="Type your distance"/>
          </div>
            <tr>
              <td>Hulk</td>
              <td>Super forte</td>
            </tr>
          <div>
            <label for="name">Time:</label>
            <input class="datas-running" type="text" name="name" placeholder="Type your time"/>
          </div>
            <tr>
              <td>Viúva Negra</td>
              <td>Destreza | Agilidade</td>
            </tr>
          <div>
            <button id="button">Register</button>
          </div>
            <tr>
              <td>Arqueiro Verde</td>
              <td>Calculista | Agilidade</td>
            </tr>
          </tbody>
        </table>
        <div class="button">
          <input type="text" placeholder="Escolha seu herói">
          <button id="btn" type="submit">Mostrar herói</button>
        </div>
      </form>
    </div>
        <footer>
          <div class=rodape_texto"">
            <p>Copyright 2023</p>
            <p>Em memória do grande herói Homem de Ferro</p>
          </div>
        </footer>
    </main>
    <script src="scripts/main.js"></script>
  </body>
 </html>
--- a/praticando/scripts/less.min.js
+++ b/praticando/scripts/less.min.js
--- a/praticando/scripts/less.min.js.map
+++ b/praticando/scripts/less.min.js.map
--- a/praticando/scripts/main.js
+++ b/praticando/scripts/main.js
@ -0,0 +1,6 @@
 const texto = document.querySelector("input");
 const botao = document.querySelector("#btn");
 botao.addEventListener("click", mostreConteudo() {
  console.log('mostre conteudo');
 })
--- a/praticando/style.css
+++ b/praticando/style.css
@ -2,55 +2,13 @@
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
 }
 body {
  color: #fff;
  background-color: #000;
  text-align: center;
  background-color: #3b444b;
  color: #fff;
  margin: 25px;
  display: flex;
  flex-direction: column;
  gap: 10px;
 }
 h1 {
  font-size: 45px;
 }
 p {
  margin-top: 50px;
  font-size: 20px;
 }
 table {
  background-color: lightblue;
  color: #000;
 }
 .datas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 15px;
 }
 .datas-running {
  border: none;
  padding: 16px 32px;
  border-radius: 16px;
 }
 #button {
  border: none;
  margin-left: 40px;
  padding: 16px 32px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  background-color: blue;
  color: #fff;
 }
--- a/praticando/styles/styles.less
+++ b/praticando/styles/styles.less
@ -0,0 +1,24 @@
 header {
  > ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 25px;
  }
  & li {
    border: 2px solid #ee6464;
    border-radius: 10px;
    background-color: #2b4bbe;
    padding: 8px 16px;
    font-size: 18px;
  }
 }
 table {
  background-color: rgb(43, 75, 190);
  color: #fff;
  border-color: rgb(139, 189, 229);
  & th {
    background-color: rgb(238, 100, 100);
  }
 }