Entrar Ainda não tem acesso?
3
respostas

como alinhar imagem com input?

Referente ao curso Flexbox: posicione elementos na tela, no capítulo Introdução ao flexbox e fazendo o cabeçalho e atividade Arrumando cabeçalho

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

Oi bom eu queria saber como eu fasso pra alinha minha imagem com os inputs? Igual isso! Insira aqui a descrição dessa imagem para ajudar na acessibilidade

3 respostas
por Geovane Ferreira Santana
| 204.9k xp | 669 posts
<!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 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="form">
                <label class="formulário" for="nome">Nome e Sobrenome</label>
                <input class="formulário" type="text" placeholder="Nome e sobrenome">
                <label class="formulário" for="e-mail">E-mail</label>
                <input class="formulário" type="email" placeholder="Exem:email@gmail.com">
                <label class="formulário" for="numero">Numero</label>
                <input class="formulário" type="tel" placeholder="Telefone">
                <label class="formulário" for="text">Assunto</label>
                <textarea class="formulário" name="" id="" cols="30" rows="10"></textarea>
                <button class="formulário">enviar</button>

            </div>
        </form>
        <img id="foto-formulario" class="formulário" src="formulário.jpg" alt="">

    </main>

</body>

</html>
por Geovane Ferreira Santana
| 204.9k xp | 669 posts
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: 20%;
}

#foto-formulario {
    width: 100px;
}

.espaço-titulo {
    margin-left: 40px;
}

.menu-link {
    margin-right: 20px;
    color: #BBBBBB;
    text-decoration: none;
    font-size: 210%;
}

.menu-link:hover {
    color: black;
}
por Tálison Miguel Amancio
| 122.1k xp | 90 posts

Ola amigo, o html vc deixa assim essa parte, e substitui o src da imagem:

    <form action="">
        <div class="box-form">
            <div class="form">
                <label class="formulário" for="nome">Nome e Sobrenome</label>
                <input class="formulário" type="text" placeholder="Nome e sobrenome">
                <label class="formulário" for="e-mail">E-mail</label>
                <input class="formulário" type="email" placeholder="Exem:email@gmail.com">
                <label class="formulário" for="numero">Numero</label>
                <input class="formulário" type="tel" placeholder="Telefone">
                <label class="formulário" for="text">Assunto</label>
                <textarea class="formulário" name="" id="" cols="30" rows="10"></textarea>
                <button class="formulário">enviar</button>
            </div>
            <div class="img-form">
                <img src="card.jpg" alt="">
            </div>
        </div>
    </form>

    já o css vc vai acrescentar isso, e se quiser alterar a largura dos elementos:

.box-form {

display: flex;

}

.form {

width: 50%;

}

.img-form {

width: 50%;

}