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
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas
respostas
diminuir tamanho do underline!
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!
solução!
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!