boa tarde meu underline esta muito grande na lateral eu quero diminuir ele pra ficar do tamanho da fonte como faço isso?
https://drive.google.com/file/d/1GyKjsp-Se1jnT77NEbOfc4Cr5-9tyM1w/view?usp=sharing
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!
Solucionado
boa tarde meu underline esta muito grande na lateral eu quero diminuir ele pra ficar do tamanho da fonte como faço isso?
https://drive.google.com/file/d/1GyKjsp-Se1jnT77NEbOfc4Cr5-9tyM1w/view?usp=sharing
Oi, Geovane, tudo bem?
O seu link está indisponível. Mas sobre o seu problema, você pode manipular a propriedade width para ficar no tamanho que deseja.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>biografia-Geovane</title>
<meta charset="utf-8">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="biografia.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap">
</head>
<body>
<header>
<div class="informacao">
Geovane Santana<br>
<div id="desenvolvedor"> desenvolvedor </div>
</div>
<h1>olá<img src="Geovane (1).png"></h1>
</header>
<main>
<section class="description">
<h2 class="title-about">about</h2>
<p class="content-about">Meu nome é Geovane, tenho 24 anos e moro na Saúde - SP.<br>Sou Desenvolvedor Web formado pela escola Alura <br> e busco estágiio na área de desenvolvimento web.<br>Possuo conhecimento em <strong>HTML</strong>, <strong>CSS</strong>, <strong>PHP</strong> e<strong>JavaScript</strong>.</p>
</section>
<form>
<h3>contato</h3>
<label for="nome">nome</label>
<input class="primeiro" type="text" id="nome">
<label for="email">e-mail</label>
<input class="segundo" type="email" id="email">
<label for="telefone">telefone</label>
<input class="terceiro" type="telefone" id="telefone">
<label for="mensagem">mensagem</label>
<textarea id="mensagem"></textarea>
<button class="enviar">enviar</button>
</form>
</main>
<footer>
</footer>
</body>
</html>
body {
background-image: url("fundo.jpeg");
background-repeat: no-repeat;
background-size: cover;
}
.informacao {
margin: 40px 100px;
}
#desenvolvedor {
margin: 0 20px;
}
h1 {
padding: 40px 200px 80px;
font-size: 70px;
}
img {
position: absolute;
top: 0px;
left: 200px;
margin: 100px 0px 0px;
width: 1000px;
background-size: 100px;
}
main {
width: 90%;
margin: 600px 50px;
}
.description {
font-family: Arial;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: rgba(0, 0, 0, 0.9)
}
.description .title-about::after {
content: "";
display: block;
width: 1.2em;
height: 0.1em;
margin: 10px auto;
background-color: #cd2c51;
}
.title-about {
font-size: 1.7em;
color: rgba(0, 0, 0, 0.8)
}
.content-about {
text-align: center;
line-height: 2em;
}
h3 {
text-align: center;
margin: 70px;
font-size: 30px;
position: relative;
top: 70px;
text-decoration: none;
border-bottom: 2px solid;
padding-bottom: 28px;
margin-bottom: 65px;
left: 32px;
}
input{
margin: 20px;
display: block;
position: relative;
top: auto;
left: 500px;
}
label{
display: block;
position: relative;
top: 42px;
left: 416px;
font-size: 23px;
}
.primeiro{
border: none;
border-bottom: 1px solid #ca5257;
position: relative;
top: auto;
left: 451px;
padding: 0px 105px;
}
.segundo {
border: none;
border-bottom: 1px solid #ca5257;
position: relative;
top: 5px;
left: 459px;
padding: 0px 102px;
}
.terceiro {
border: none;
border-bottom: 1px solid #ca5257;
position: relative;
top: auto;
left: 473px;
padding: 0px 97px;
}
textarea {
position: relative;
top: auto;
left: 500px;
padding: 0px 80px;
border: none;
border-bottom: 1px solid #ca5257;
margin: 13px 18px;
display: block;
}
.enviar {
width: 247px;
margin: 27px 500px;
padding: 12px 0 11px;
border: 1px solid #e63e3e;
border-radius: 29px;
font-size: 20px;
}
.enviar:hover {
cursor: pointer;
}
da uma olhada ai fazendo um favor!
Oi, Geovane, tudo bem?
Dentro da classe da tag h3, use a propriedade: width: 100px e o margin: 0 auto para centralizar o elemento ao centro.
Obrigado já tinha conseguido!