Witam,
robię hamburger menu, nie widać spana hamburger line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kolker+Brush&display=swap" rel="stylesheet">
<style>
:root{
--dark: #0a0a0a;
--blue: #26278a;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
color: white;
font-family: 'Lato', sans-serif;
}
body{
width: 100vw;
height: 100vh;
background: var(--blue);
background-image: url("blue.jpg");
background-size: cover;
background-position: center;
align-items: center;
justify-content: center;
display: flex;
position: relative;
}
.container{
background: rgba(0, 0, 0, 0.55);
background: linear-gradient(45deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.1));
backdrop-filter: blur(10px);
width: 70vw;
min-height: 70vh;
border-radius: 1.5vh;
animation: opacity linear 1s;
position: relative;
}
a{
text-decoration: none;
}
h1{
text-align: center;
font-weight: 700;
background: linear-gradient(90deg, var(--blue), rgba(255, 255, 255, 1));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 28px;
margin-top: 10px;
}
@keyframes opacity{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
.hamburger{
position: absolute;
background-color: transparent;
border: transparent;
padding: 10px;
top: 15px;
left: 15px;
display: inline-block;
}
.hamburger-box{
position: relative;
width: 48;
height: 24;
display: inline-block;
}
.hamburger-line{
width: 100%;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background-color: white;
height: 3px;
display: inline-block;
}
</style>
</head>
<body>
<div class="container">
<main>
<div class="logo">
<a href="index.html">
<h1>Podróże</h1>
</a>
<button class="hamburger">
<span class="hamburger-box">
<span class="hamburger-line"></span>
</span>
</button>
</div>
<div id="content">
<p>
</p>
</div>
</div>
</main>
</body>
</html>
i nie można zmienić koloru tła hamburger-box.
Dziękuję z wszystkie opdowiedzi.