0
/* Configurações Globais Inicio */
html, body {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
background-color: aqua;
}
a {
text-decoration: none;
color: black;
display: block;
}
input[type="checkbox"] {
display: none;
}
/* Configurações Globais Fim */
/* Templates Inicio */
.menu-frontal {
background: #ffffff;
grid-area: menu-frontal;
border: 0.1vw solid #f5f5f591;
}
.menu-lateral {
background: #eeeeee;
grid-area: menu-lateral;
}
.home {
background: #f5f5f5;
display: grid;
grid-template-columns: 3fr 18fr;
grid-template-rows: 10vh 10vh 80vh;
grid-template-areas: "menu-frontal menu-frontal " "menu-lateral ." "menu-lateral ."
}
/* Templates Fim */
.icon-menu {
position: relative;
top: 3vh;
left: 1vw;
}
.img-logo {
position: relative;
top: 2.5vh;
left: 9.9vw;
}
.text-logo {
position: absolute;
top: 0.6vh;
left: 4.2vw;
font-family: Verdana;
font-size: 1.5vw;
color: #212121;
}
.menu li img {
position: relative;
bottom: 1vh;
right: 1.7vw;
padding: 1vw;
font-size: 1.2vw;
}
.menu li .text {
position: relative;
bottom: 6vh;
left: 3vw;
}
li:hover {
background-color: red;
/* width: 11.8vw;
right: 20vw; */
}
li {
/* position: relative; */
/* position: absolute; */
/* display: inline; */
background-color: pink;
}
input[type="checkbox"]:checked~.menu-esquerda {
background-color: red;
}<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home</title>
<link rel="stylesheet" href="arquivos/style2.css">
</head>
<body>
<section class="home">
<header class="menu-frontal">
<input type="checkbox" name="" id="chec">
<label for="chec" class="icon-menu">
<img src="arquivos/menu.svg" alt="">
</label>
<label for="">
<img src="arquivos/logo6.png" title="Página Inicial" class="img-logo">
</label>
<label for="" class="text-logo">
<p title="Página Inicial">Team Roping</p>
</label>
</header>
<aside class="menu-lateral">
<nav class="menu-esquerda">
<ul class="menu">
<li ><a href="#"><img src="arquivos/home.svg" alt="" class="img-inicio"></a><a href="#" class="text">Inicio</a></li>
<!-- <li class=""><a href="#" class="inicio"></a><img src="arquivos/home.svg" alt="" srcset="" class="primeira">Início</a></li> -->
<li><a href="#"><img src="arquivos/create.svg" alt="" class="segunda"></a><a href="#" class="text">Criar prova</a> </li>
<li><a href="#"><img src="arquivos/add.svg" alt="" class="terceira"></a><a href="#" class="text">Novo competidor </a></li>
</ul>
</nav>
</aside>
</section>
</body>
</html>
Explain the problem better, it is very vague. As a new user, it is important to read the documentation of the site, such as [tour] and [Ask].
– Sam
Didn’t I get it right, you don’t want the blue bar there on the left? Do you want the pink list to stick to the left? It wasn’t clear
– hugocsl
I would love to help. But for that you would have to explain what you do, because of this code there are infinite possibilities of expansion. Each person will get a different view of the code that probably won’t be their own.
– Augusto Vasques