Oi, bom eu queria aumentar minha imagem que é esse menu amburguer, e fazer com que esse li aparessa só quando eu clicar nele no menu amburguer, lembrando que essa já é a versão responsiva!
3
respostas
respostas
aumentar imagem e posicionar lis!
<!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="normalize.css">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header>
<h1>Geovane <br>
<div class="espaço-titulo">desenvolvedor front-end</div>
</h1>
<nav class="menu-navegação">
<a class="menu-link" href="#">About</a>
<a class="menu-link" href="#">Projetos</a>
<a class="menu-link" href="#">Skills</a>
<a class="menu-link" href="#">Contatos</a>
</nav>
</header>
<hr>
<main>
<h2>
About
</h2>
<div class="sobre">
<p class="descrição">Meu nome é Geovane tenho 25 anos, estudo linguagem de programação <br> na escola online alura e gosto de tecnologia em geral. <br> Tenho conhecimento em html e css e estou estudando java script e web responsivo. <br> Procuro estágio na área
e será muito bom fazer parte da sua equipe. <br> Se quizer saber um pouco mais sobre meu <br> trabalho ou bater um bom papo entre em contato logo abaixo!
</p>
<img src="escritório.png" alt="escritório">
</div>
<h3 class="Projetos">
Projetos
</h3>
<p class="informações-de-projetos">
Ops! Por enquanto não tenho nenhum projeto, mais está em construção!
</p>
<h4>
Skills
</h4>
<div class="Skills">
<img class="fotos" src="html.png" alt="">
<img id="css" class="fotos" src="css.png" alt="">
<img id="git" class="fotos" src="git.png" alt="">
<img class="fotos" src="figma.png" alt="">
</div>
<h5 class="Contatos">
Contatos
</h5>
<form action="">
<div class="box-form">
<div class="form">
<div class="nome-sobrenome">
<label class="formulário" for="nome">Nome e Sobrenome</label>
<div class="nome-sobrenome-input">
<input class="formulário" type="text" placeholder="Nome e sobrenome">
</div>
</div>
<div class="e-mail">
<label class="formulário" for="e-mail">E-mail</label>
<div class="e-mail-input">
<input class="formulário" type="email" id="e-mail" placeholder="Exem:email@gmail.com">
</div>
</div>
<div class="numero">
<label class="formulário" for="numero">Numero</label>
<div class="numero-input">
<input class="formulário" type="tel" placeholder="Telefone">
</div>
</div>
<div class="assunto">
<label class="formulário" for="text">Assunto</label>
<div class="assunto-input">
<textarea class="formulário" name="" id="" cols="30" rows="10"></textarea>
</div>
</div>
<div class="enviar-button">
<button class="formulário">enviar</button>
</div>
</div>
<div class="img-form">
<img class="foto" src="formulário.jpg" alt="">
</div>
</div>
</form>
</main>
</body>
</html>header {
display: flex;
vertical-align: middle;
justify-content: space-between;
align-items: center;
margin-right: 4%;
}
hr {
width: 98%;
}
h1 {
font-size: 40px;
margin-left: 3%;
}
.sobre {
display: flex;
align-items: center;
}
h2 {
color: #7d7dde;
font-size: 57px;
margin-left: 6%;
}
.Projetos {
text-align: center;
color: #7d7dde;
font-size: 57px;
}
h4 {
text-align: center;
color: #7d7dde;
font-size: 57px;
}
.Skills {
text-align: center;
}
.Contatos {
text-align: center;
color: #7d7dde;
font-size: 57px;
}
.fotos {
margin-left: 110px;
}
#git {
width: 180px;
}
p {
text-align: center;
font-size: 27px;
margin-left: 50px;
}
.formulário {
display: flex;
margin-left: 230px;
margin-top: 10px;
}
input {
border-radius: 50px;
border-color: #7d7dde;
}
textarea {
border-radius: 10px;
border-color: #7d7dde;
}
.box-form {
display: flex;
}
.formulário button {
margin-right: 50px;
}
.foto {
width: 420px;
margin-top: 10px;
margin-left: 200px;
}
.espaço-titulo {
margin-left: 40px;
}
.menu-link {
margin-right: 20px;
color: #BBBBBB;
text-decoration: none;
font-size: 210%;
}
.menu-link:hover {
color: black;
}
@media screen and (max-width:480px) {
h1 {
margin-left: 50px;
font-size: 100px;
}
.espaço-titulo {
margin-left: 0px;
}
.menu-link {
background-image: url(menu-amburguer.png);
background-repeat: no-repeat;
background-size: cover;
}
}
Olá, Geovane. Tudo bem?
Logo no início desse curso o instrutor cria um menu hambúrguer responsivo. Seria legal fazer o passo a passo com o instrutor e replicar para o seu projeto.
Depois compartilhar aqui com a gente como ficou o seu projeto!
Espero ter ajudado!
Bons estudos! :)