bom minha imagem de fundo esta faltando na lateral direita da minha pagina! https://drive.google.com/file/d/1uffLrF1cckHe1GfDVGOg-dd6WohlqDwK/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!
bom minha imagem de fundo esta faltando na lateral direita da minha pagina! https://drive.google.com/file/d/1uffLrF1cckHe1GfDVGOg-dd6WohlqDwK/view?usp=sharing
tente ajustar como auto o background-size: * e alinhar o *background-position:
não deu não!
Geovane você pode postar o código aqui pra gente simular o erro??
Mas tente colocar o background-size: cover e o background-position: center para ver se muda :D (como não sei que erro pode estar ocorrendo no código esta pode ser uma solução das "mais comuns" heheh)
</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">email</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>
<input type="submit" value="enviar" class="enviar">
</form>
</main>
<footer>
</footer>
</body>body { background-image: url("fundo.jpeg"); background-repeat: no-repeat; background-size: cover; background-position: center; }
.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: 20px; } 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: solid red; position: relative; top: auto; left: 451px; padding: 0px 105px;
}
.segundo { border: none; border-bottom: solid red; position: relative; top: auto; left: 451px; padding: 0px 107px; }
.terceiro { border: none; border-bottom: solid red; position: relative; top: auto; left: 473px; padding: 0px 97px;}
textarea { position: relative; top: auto; left: 500px; padding: 0px 84px; border: none; border-bottom: solid red; margin: 20px; display: block;
} .enviar { width: 153px; margin: 43px 35px; padding: 96px; }
.enviar:hover { cursor: pointer;
}
Oi, Geovane, tudo bem?
A sua página está com um comportamento não tão legal, ela está scrolando para os lados, no sentido x., então, a imagem não consegui preencher algumas partes da página, já que você colocou a imagem de fundo para não repetir background-repeat: no-repeat;
Refatorando algumas coisas do seu código, agora, ela está com uma largura ajustada, sem scrollar para os lados e o form centralizado com o auxílio do display: flex;sem precisar das propriedadesposition, left, e display: block, ficando mais enxuto.
Vou deixar aqui o trecho que modifiquei:
form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
label {
top: 42px;
left: 416px;
font-size: 23px;
}
.primeiro {
border: none;
border-bottom: solid red;
padding: 0px 105px;
}
.segundo {
border: none;
border-bottom: solid red;
padding: 0px 107px;
}
.terceiro {
border: none;
border-bottom: solid red;
padding: 0px 97px;
}A propriedade left com valores muito altos na tentativa de centralizar, estava empurrando os elementos pro lado, deixando a largura da página muito grande e a imagem de fundo não conseguia acompanhar.
não deu certo olha como ficou! https://drive.google.com/file/d/1E57h8b8gmjFPmuAClIj9asnqi6rcP7As/view?usp=sharing
</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>
<h3>contato</h3>
<form>
<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>
<input class="enviar" type="submit" value="enviar">
</form>
</main>
<footer>
</footer>
</body>body { background-image: url("fundo.jpeg"); background-repeat: no-repeat; background-size: cover;
}
.informacao {
margin: 40px 100px;
} .informacao::after { content: " "; background-color: red; display: block; height: 2px; width: 16px; padding: 0 10px 0; margin: -7px -5px; }
#desenvolvedor { margin: 0 34px;
}
h1 { padding: 40px 200px 80px; font-size: 70px; text-decoration: underline;
}
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 70px; font-size: 32px; position: relative; top: 64px; text-decoration: none; border-bottom: 1px solid red; padding-bottom: 5px; margin-bottom: 56px; left: 496px; width: 93px;
} input{ margin: 20px; display: block; position: relative; top: auto; left: 500px;
} form { display: flex; flex-direction: column; justify-content: center; align-items: center; } label { top: 42px; left: 416px; font-size: 23px; } .primeiro { border: none; border-bottom: solid red; padding: 0px 105px; }
.segundo { border: none; border-bottom: solid red; padding: 0px 107px; }
.terceiro { border: none; border-bottom: solid red; 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: 32px 8px; padding: 12px 40px 12px; border: 1px solid #e63e3e; border-radius: 111px; font-size: 24px; }
.enviar:hover { cursor: pointer;
}
Chefe, beleza? Tente adicionar no seu código body do CSS background-position: center
body { background-image: url("fundo.jpeg"); background-repeat: no-repeat; background-size: cover; background-position: center;Para mim funcionou junto as configurações da Laís
não verdade cara o meu deu mais desalinho todo meu formulário, ai eu voltei tudo do jeito que tava, olha esse link: https://drive.google.com/file/d/1E57h8b8gmjFPmuAClIj9asnqi6rcP7As/view?usp=sharing
Oi, Geovane, tudo bem?
Segue o print de teste que fiz e passei anteriormente: https://imgur.com/a/PicDhjg
O código que utilizei para deixar o form centralizado e retirar a largura da página para evitar o scroll no sentido x:
body {
background-image: url("fundo.jpeg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.informacao {
margin: 40px 100px;
}
#desenvolvedor {
margin: 0 20px;
}
h1 {
font-size: 70px;
}
img {
position: absolute;
top: 0px;
left: 200px;
width: 100px;
background-size: 100px;
}
main {
width: 100%;
}
.title-about {
font-size: 1.7em;
color: rgba(0, 0, 0, 0.8);
}
.content-about {
text-align: center;
line-height: 2em;
}
form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
label {
top: 42px;
left: 416px;
font-size: 23px;
}
.primeiro {
border: none;
border-bottom: solid red;
padding: 0px 105px;
}
.segundo {
border: none;
border-bottom: solid red;
padding: 0px 107px;
}
.terceiro {
border: none;
border-bottom: solid red;
padding: 0px 97px;
}
textarea {
padding: 0px 80px;
border: none;
border-bottom: solid red;
}
.enviar {
margin: 27px 500px;
padding: 12px 0 11px;
border: 1px solid #e63e3e;
border-radius: 29px;
font-size: 20px;
}
.enviar:hover {
cursor: pointer;
}
Espero ter te ajudado!
na verdade ele teria que ficar assim, pra você entender!
https://drive.google.com/file/d/1vpNlxQlzEDmC2P-1eUP_icMFIzGrOzF7/view?usp=sharing
Oi, Geovane, tudo bem?
Eu fiz uma exemplo de como você pode adaptar para o formulário do seu site de acordo com o layout que foi passado, segue:
height: 20px;
width: 200px;
text-align: right;
clear: both;
float: left;
margin-top: 10px;
}
input {
height: 20px;
width: 300px;
border: none;
border-bottom: 1px solid #000;
float: left;
margin-left: 10px;
}
</style>
<form>
<div class="form-group">
<label for="nome">Nome:</label>
<input name="nome" type="text" id="nome" />
<label for="telefone">Telefone: </label>
<input name="telofene" type="tel" id="telefone" />
</div>
</form>Eu criei um fomulário com dois labels e dois inputs, nome e telefone. Na estilização, utilizei o float: left para que os elementos saíssem do seu fluxo padrão e fossem colocados à esquerda. Os demais estilos foram para dar largura, altura e respiros entre os elementos. Assim, input e label ficarão alinhados na mesma linha e empilhados um abaixo do outro ao mesmo tempo
Resultado do código acima: https://imgur.com/a/xuPGGs1
Nessa aula aqui, o professor explica mais sobre a propriedade float: https://cursos.alura.com.br/course/html5-css3-avancando-css/task/63319
E a documentação da propriedade: https://developer.mozilla.org/pt-BR/docs/Web/CSS/float
Mais a página ficou toda desalinhada!
Oi, Geovane, tudo bem?
Dentro do seu layout, você pode fazer assim:
Colocar o input dentro do escopo da label para label e input ficarem alinhadas.
<h3>contato</h3>
<label for="nome">
nome:
<input class="primeiro" type="text" id="nome" />
</label>
<label for="email">
e-mail
<input class="segundo" type="email" id="email" />
</label>
<label for="telefone">
telefone
<input class="terceiro" type="telefone" id="telefone" />
</label>E no css, você pode evitar as propriedade positions e paddings e margins com valores altos :
form,
label {
display: block;
padding: 10px;
}
form {
width: 270px;
margin: 10px;
margin: 0 auto;
}
label {
color: #FFF;
text-align: left;
color: #000000;
}
input {
display: inline-block;
padding-left: 10px;
}O teste com o seu código: https://imgur.com/a/3YhbRrU
Você pode adaptar para o seu layout com as cores, bordas e espaçamentos que deseja.