Oi bom eu queria aumentar minha imagem e tirar os lis de cima dela!
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Oi bom eu queria aumentar minha imagem e tirar os lis de cima dela!
<!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;
}
button {
margin-right: 30px;
}
.box-form {
display: flex;
}
.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;
}
}
Boa tarde Geovane, tudo bem?
Para alterar os tamanhos, você pode utilizar as propriedades "width" e "height" na sua classe "fotos", que está no seu arquivo .CSS. "Width" é a largura e "height" é a altura da imagem.
Você pode utilizar valores em pixel ou em porcentagem. Ex:
width: 20px;
height: 50%;Já para posicionar o lis, você pode utilizar a propriedade "margin" para dar um espaçamento.
eu tentei e não deu, no caso eu queria que só a minha parte responsiva ficasse com o menu amburguer!