Browse Source

Modified files and added less

master
vinicius 3 years ago
parent
commit
b6eb511bbe
6 changed files with 110 additions and 94 deletions
  1. +65
    -49
      praticando/index.html
  2. +11
    -0
      praticando/scripts/less.min.js
  3. +1
    -0
      praticando/scripts/less.min.js.map
  4. +6
    -0
      praticando/scripts/main.js
  5. +3
    -45
      praticando/style.css
  6. +24
    -0
      praticando/styles/styles.less

+ 65
- 49
praticando/index.html View File

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

+ 11
- 0
praticando/scripts/less.min.js
File diff suppressed because it is too large
View File


+ 1
- 0
praticando/scripts/less.min.js.map
File diff suppressed because it is too large
View File


+ 6
- 0
praticando/scripts/main.js View File

@ -0,0 +1,6 @@
const texto = document.querySelector("input");
const botao = document.querySelector("#btn");
botao.addEventListener("click", mostreConteudo() {
console.log('mostre conteudo');
})

+ 3
- 45
praticando/style.css View File

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

+ 24
- 0
praticando/styles/styles.less View File

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

Loading…
Cancel
Save