Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Texto ao lado da imagem

por Nathalia Ferreira Ribeiro
| 57.9k xp | 25 posts

Olá, eu estou participando do #7DaysOfCode consegui fazer quase tudo. No entanto, nao estou conseguindo colocar os textos ao lado das imagens.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Linkedin</title>
    <link rel="stylesheet" href="style.css"> 
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <main>
        <section class="cabeçalho">
            <div class="descrição">
            <img class="capa" src="./assets/Imagem de capa.png">
            <img class="foto_perfil" src="https://github.com/SEU-USUARIO-DO-GITHUB.png">
               <div class="informações">  
               <div class="tudo">
            <h1 class="nome"> Nathalia Ferreira</h1>
            <h2 class="atributos">Desenvolvedora | HTML | CSS | Typescript | Node</h2>
            <p class="descrição"> Fala sobre #javascript, #frontend, #reactjs e #backend</p>
            <p class="localização"> Praia Grande, SP - Brasil. <a class="contato">Número para contato: (13) 99999-9999</a></p>
            <p class="seguidores"> 10 seguidores | 10 conexões</p>
            <div class="botoes"> 
                <button class="mensagem" >  Mensagem </button> 
                <button class="mais"> Mais </button>
            </div>
            </div>
                <div class="icones">
                    <div class="icones">
                        <p class="icone_1"><img src="./assets/Rectangle 5 (1).svg"> Empresa </p>
                        <p class="icone_2"> <img src="./assets/Rectangle 5.svg"> Instituição de ensino</p>
                   </div>
            </div>
        </div>
        </section>
    </main>
</body>

:root{
  --fundo-escuro: #000;
  --fundo:rgba(27, 34, 38, 1);
  --azul: rgba(112, 181, 249, 1);
  --branco: rgba(255, 255, 255, 0.9);
  --cinza: rgba(255, 255, 255, 0.6);
}
    
body{
    width: 1440px;
    height: 2139px;
    top: -261px;
    left: -871px;
    background: var(--fundo-escuro);
    font-family:'Roboto', sans-serif;
}
.cabeçalho{
    width: 780px;
    height: 468px;
    padding-top: 76px;
    padding-left: 154px;
}
.descrição{
    background-color: var(--fundo);
}
.capa{
    border-radius: 16px, 16px, 0px, 0px;
}
.foto_perfil{
    width: 160px;
    height: 160px;
    border-radius: 100px;
    margin-top: -110px;
    margin-left: 25px;
}
.icones{
    width: 190px;
    height: 72px;
}
.icone_1{
    padding-left: 150px;
    color: var(--branco);
    font-size: 14px;
    font-weight: 400;
}
.icone_2{
    padding-left: 150px;
    color: var(--branco);
    font-size: 14px;
    font-weight: 400;
}

.informações{
    display: flex;
}
.tudo{
    margin-left: 25px;
    margin-bottom: 25px;
}
.nome{
  color: var(--branco);
  font-size: 24px;
  font-weight: 600;
}
.atributos{
  color: var(--branco);
  font-size: 16px;
  font-weight: 600;
}
.descrição, .localização, .seguidores{
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--cinza);
}
.contato, .seguidores{
    color: var(--azul);
}
.mensagem{
    width: 128px;
    height: 32px;
    border-radius: 16px;
    background-color: var(--azul);
    color: var(--fundo);
    border: none;
}
.mais{
    width: 128px;
    height: 32px;
    border-radius: 16px;
    background-color: var(--fundo);
    color: var(--azul);
    border: solid 1px;
}
2 respostas
solução!
por Renan Cezar Wuicik
| 3166.9k xp | 6165 posts
Instrutor Suporte Educacional Start By Alura

Olá Nathalia! Tudo bem contigo?

Você pode só confirmar para mim se as imagens e textos que você deseja alinhar lado-a-lado são essas aqui:

<div class="icones">
    <div class="icones">
        <p class="icone_1"><img src="./assets/Rectangle 5 (1).svg"> Empresa </p>
        <p class="icone_2"> <img src="./assets/Rectangle 5.svg"> Instituição de ensino</p>
    </div>
</div>

No caso seria as imagens e os textos "Empresa" e "Instituição de ensino" que você deseja alinhas lado-a-lado correto? Se não for por favor me diga qual parte é para mim saber.

Agora se for essa parte mesmo, então, você precisa fazer algumas mudanças no código, sendo elas:

  1. Tirar as imagens de dentro da tag de parágrafo, ou colocar uma outra tag para estilizar as palavras. Eu vou optar pela segunda opção, pois no seu caso acho que fica mais fácil assim a manutenção. E aqui está o código html dessa parte (Ah e eu vou adicionar uma classe igualitária para as tags de parágrafo para estilizar elas à parte):
        <div class="icones">
       <div class="icones">
            <p class="icone_1 flex-container-icon">
                   <img src="./assets/Rectangle 5 (1).svg"/>
                   <span class="span-icones">Empresa</span>
            </p>
            <p class="icone_2 flex-container-icon">
                   <img src="./assets/Rectangle 5.svg"/>
                   <span class="span-icones">Instituição de ensino</span>
            </p>
        </div>
    </div>
  2. Agora já no CSS vamos adicionar na classe .flex-container-icon e transformar elas em flex contêineres, e estilizar elas bem:
        .flex-container-icon {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
  3. Com isso você já deve ter as imagens lado à lado, mas para dar uma estilizada extra vou colocar um espacinho e algumas estilizações extras para ajudar na responsividade tá, aqui o CSS para ti:
        .flex-container-icon {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: auto;
        height: auto;
    }

    .flex-container-icon img {
        width: 100%;
        height: auto;
        margin: auto 1rem;
    }
  4. Com isso você deve ter um resultado mais ou menos assim:

imagem exemplo do projeto no final

Eu não tinha as imagens, então eu substituí por umas fakes, mas só as que eu ia mexer, as outras eu não coloquei nada porquê não interferiam no resultado final de qualquer forma.

Em suma era isso, caso precise eu estarei por aqui.

Abraços e bons estudos.

por Nathalia Ferreira Ribeiro
| 57.9k xp | 25 posts

Desculpa, eu acabei esquecendo de dizer qual eram as imagens. Mas eram essas mesmo. Muuito obrigadaa!!!