0
I need to hide the contact items (facebook, github and Linkedin) in the burger menu. However the effect does not apply to them, only to the menu text. I need everything on the menu to hide and only appear when you click the button. If anyone has a better visual way to do the menu as well, thank you.. rs
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700&family=Josefin+Slab:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&family=Mulish:ital,wght@0,200;0,300;0,400;0,500;1,200;1,300;1,400;1,500&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
:root{
--font-primary: "Baloo 2", serif;
--font-secondary: "Josefin+Slab", serif;
--font-action: "Mulish", serif;
}
.hamburguer{
/* background-color: red; */
width: 2rem;
height: 2rem;
position: fixed;
z-index: 100;
right: 2rem;
top: 2rem;
display: flex;
flex-direction: column;
justify-content: space-evenly;
cursor: pointer;
}
.line{
width: 100%;
background-color: #fff;
height: .2rem;
box-shadow: 0.1rem 0.1rem 1px #000;
}
header{
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
}
.img-wrapper{
width: 100%;
height: 100%;
overflow: hidden;
background-color:rgba(0,0,0,0.8);
}
.img-wrapper img{
width: 100%;
height: 100%
object-fit cover;
opacity: 0.5;
animation: zoom 25s;
}
@keyframes zoom {
0%{
transform: scale(1.3);
}
100%{
transform: scale(1);
}
}
.banner{
position: absolute;
top: 30%;
left: 15%;
}
.banner h1{
color: #ffffff;
font-size: 3rem;
font-family: var(--font-primary);
font-weight: 150;
text-shadow: .3rem .4rem 2px rgba(0,0, 0, 4);
line-height: 3.5rem;
margin-bottom: 1rem;
opacity: 0;
animation: moveBanner 1s 0.5s forwards;
}
.banner p{
font-family: var(--font-secondary);
color: #fff;
font-size: 2rem;
text-shadow: .2rem .2rem rgba(0,0, 0, 4);
margin-bottom: 1rem;
opacity: 0;
animation: moveBanner 1s 0.7s forwards;
}
.banner button{
font-family: var(--font-action);
color: #fff;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: .1rem;
background: #141E30;
background: -webkit-linear-gradient(to right, #243B55, #141E30);
background: linear-gradient(to left, #243B55, #141E30);
padding: 1rem 2rem;
border: none;
border-radius: 5px;
cursor: pointer;
opacity: 0;
animation: moveBanner 1s 0.9s forwards;
}
@keyframes moveBanner{
0%{
transform: translateY(10rem) rotateY(-30deg);
}
100%{
transform: translateY(0) rotateY(0);
opacity: 1;
}
}
.sidebar{
width: 20rem;
height: 100vh;
background-color: #fff;
position: fixed;
top: 0;
right: -20rem;
}
.sidebar.show-menu{
right: 0;
}
.menu{
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.menu-item{
text-align: center;
margin-bottom: .5rem;
}
.menu-link{
font-family: var(--font-action);
font-size: 2rem;
color: #555;
transition: color 1s;
}
.menu-link:hover{
color: #61258b;
}
.social-media{
position: absolute;
bottom: 2rem;
width: 100%;
display: flex;
justify-content: space-evenly;
}
.social-media i{
background-color: #61258b;
color: rgba(255, 255, 255, 1);
width: 2.5rem;
height: 2.5rem;
font-size: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: color 1s;
}
.social-media i:hover{
color: #a044ff;
}<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="apple-touch-icon" sizes="180x180" href="imagens/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="imagens/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="imagens/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<title>Portfólio</title>
</head>
<body>
<div class="container">
<div class="hamburguer">
<div class="line" id="line1"></div>
<div class="line" id="line2"></div>
<div class="line" id="line3"></div>
</div>
<header>
<div class="img-wrapper">
<img src="/imagens/bg.jpg" alt="">
</div>
<div class="banner">
<h1>Web Developer & Front End Designer</h1>
<p>Thiago de Arruda</p>
<button>Saiba Mais.</button>
</div>
</header>
<div class="sidebar">
<nav>
<ul class="menu">
<li class="menu-item"><a href="#" class="menu-link">Home</a></li>
<li class="menu-item"><a href="#" class="menu-link">Conhecimentos</a></li>
<li class="menu-item"><a href="#" class="menu-link">Projetos</a></li>
<li class="menu-item"><a href="#" class="menu-link">Contatos</a></li>
<li class="menu-item"><a href="#" class="menu-link">Orçamento</a></li>
</ul>
</nav>
</div>
</div>
<div class="social-media">
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-facebook"></i></a>
</div>
</body>
<script src="script.js"></script>
</html>
I’ve identified where the error was... :)
– Thiago de Arruda