Olá pessoal Estou começando e fiz esse inicio de pagina meio por conta e travei em 2 pontos Estou apanhando pra deixar o logo no automático e meu menu esta funcionando, porém, quando adicionei o background ele ficou preso a area dele, alguém pode ajudar!
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<img src="img/Studio-elah.png" class="logo">
<input type="checkbox" id="chec">
<label for="chec">
<img src="img/menuicon.png" class="icon">
</label>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="serviços.html">Serviços</a></li>
<li><a href="produtos.html">Produtos</a></li>
<li><a href="cursos.html">Cursos</a></li>
</ul>
</nav>
</div>
<main>
</main>
</header>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
/*menu*/
.icon{
width: 40px;
}
a{
text-decoration: none;
color: black;
}
body{
font-family: arial;
}
ul{
position: absolute;
list-style: none;
top: 70px;
}
input[type="checkbox"]{
display: none;
}
nav{
position: absolute;
background-color: rgba(16,16,16,.5);
width: 350px;
height:100%;
left: -350;
transition: all .5s;
}
input[type="checkbox"]:checked~nav{
transform: translateX(350px);
}
a{
text-transform: uppercase;
font-family: 'Montserrat';
display: block;
padding: 20px 40px;
color: aliceblue;
}
a:hover{
background-color: rgb(227, 205, 221);
color: black;
}
label{
padding: 15px;
position: absolute;
z-index: 1;
}
.container{
position: relative;
width: 100%;
height: 200px;
background: url(img/roseg.png);
border:"none";
}
.logo{
position: absolute;
width: 300px;
margin:50px 42%;
}