const botao = document.querySelector(".botao");
const lista = document.querySelector(".lista");
botao.addEventListener("click", () => {
lista.classList.toggle("lista--ativo");
})
* {
margin: 0;
padding: 0;
}
body {
font-family: "Roboto Mono", monospace;
min-height: 400px;
min-width: 450px;
background-size: 80vh;
color: rgb(0, 0, 0);
background-image: url("https://www.uniabeu.edu.br/wp-content/uploads/2020/03/fundo-lilas.png");
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
font-size: 24px;
font-weight: bold;
display: flex;
align-items: center;
flex-direction: column;
}
button {
font-size: 24px;
font-family: "Futura Lt BT", sans-serif;
font-weight: bold;
background-color: rgb(70, 63, 63);
background-repeat: no-repeat;
height: 80px;
cursor: pointer;
overflow: hidden;
outline: none;
padding: 8px 22px 8px 23px;
color: white;
box-shadow: 0px 0px 5px gray;
border-radius: 5px 5px 0 0;
border: none;
transition: all .2s ease-in-out;
margin: 0;
z-index: 1;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.822);
}
button:hover {
color: rgb(7, 7, 7);
background-color: rgb(189, 185, 185);
}
button:active {
color: black;
background-color: white;
}
.lista {
display: flex;
background: rgb(110, 78, 78);
border-radius: 0 0 5px 5px;
flex-direction: column;
padding: 20px;
align-items: center;
list-style-type: none;
border: 1px solid rgba(234, 122, 11, 0.992);
position: absolute;
top:-100vw;
transition:all .5s ease-in-out;
width: 250px;
max-height: 280px;
}
.lista--ativo{
top: 75px;
transition:all .5s ease-in-out;
}
.lista-top{
top: -100vw;
padding: 10px;
filter: brightness(75%);
max-height: 20px;
transition: all .15s ease-in-out;
}
.lista-top:hover{
font-size: 1.8rem;
cursor: pointer;
text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.404);
filter: brightness(110%);
}
.lista-top:active{
filter: brightness(90%);
}
.lista-top--ativo{
top: 100px;
}
.alura-logo {
width: 150px;
position: absolute;
top: 2%;
right: 2%;
}
[cor="laranja"] {
color: orange;
}
[cor="vermelho"] {
color: red;
}
[cor="branco"] {
color: white;
}
[cor="amarelo"] {
color: yellow;
}
[cor="rosa"] {
color: pink;
}
[cor="preto"] {
color: black;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Manipulando o DOM - Aula 3</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<button class="botao" aria-label="Botao">Aluratintas em estoque:</button>
<ul class="lista lista--ativo">
<li cor="laranja" class="lista-top">Tinta laranja</li>
<li cor="vermelho" class="lista-top">Tinta vermelha</li>
<li cor="branco" class="lista-top">Tinta branca</li>
<li cor="amarelo" class="lista-top">Tinta amarela</li>
<li cor="rosa" class="lista-top">Tinta rosa</li>
<li cor="preto" class="lista-top">Tinta preta</li>
</ul>
<a href="https://alura.com.br/" target="_blank"><img src="https://www.alura.com.br/assets/img/home/alura-logo.svg" alt="" class="alura-logo"></a>
<script src="./js/script.js"></script>
</body>
</html>
