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

[Dúvida] Duvida sobre adicionar várias fotos ao lado.

Referente ao curso HTML e CSS: trabalhando com responsividade e publicação de projetos, no capítulo Repositório do GitHub e atividade Colocando o projeto no ar

por Rodrigo Moura Tavares
| 54.1k xp | 15 posts
Analista de atendimento

Estou tentando colocar outras imagens ao lado, porém está ficando um espaço muito distante do "sobre-mim" para foto. Alguém consegue me dar uma ídeia de um caminho ou o que estaria fazendo errado? Insira aqui a descrição dessa imagem para ajudar na acessibilidade 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="/css/style.css">
        <title>Professora Gisele</title>
    </head>
    <body>
    <header class="navegacao">   
        <nav class="navegacao__menu">
        <a class="navegacao__menu__conteudo" href="index.html">Inicio</a>
        <a class="navegacao__menu__conteudo" href="sobre-mim.html">Sobre mim</a>

    </nav>
    </header>


    <main class="apresentacao">
        <section class="apresentacao__conteudo">

        <h1 class="apresentacao__conteudo__titulo"><strong>Sobre mim</strong></h1>
        <p class="apresentacao__conteudo__descricao">Bacharel em Educação Física com uma vasta experiência em natação infantil e adulto, hidroginástina, mobilidade, alongamento,
            musculação, fitdance e ginásticas de academia (CORE, HIIT, GAP, Localizada). Uma profissional versátil, motivada
            pela satisfação em levar saúde e qualidade de vida para os alunos. Atualmente ministro aulas na rede <strong><a class="rede-cuca" href="https://juventude.fortaleza.ce.gov.br/rede-cuca" target="_blank">CUCA</a></strong> onde trabalho com crianças e idosos.</p>

            <h2 class="apresentacao__conteudo__titulo">Formação</h2>
        <ul>
            <li class="apresentacao__conteudo__descricao">Graduação - EDUCAÇÃO FÍSICA- BACHARELADO
                CENTRO (CE)/CENTRO UNIVERSITÁRIO ESTÁCIO DO CEARÁ
                Março de 2019 - Julho de 2023</li>
        </ul>
        <h2 class="apresentacao__conteudo__titulo">Certificações</h2>
        <ul class="apresentacao__conteudo__descricao">
            <li><strong>Pensar Educação Física CREF5: Agosto de 2020 - Não expira </strong>
                </br>
                Este certificado possui 12 horas de carga horária.</li></br>
            <li><strong>Programa de Monitoria do Centro Universitário Estácio do Ceará:Junho de 2020 - Dezembro de 2020</strong>
                </br>
                Auxiliava os alunos da disciplina fundamentos de bioquímica em suas dificuldades, por meio de revisões e materiais
                voltados para os assuntos tratados em sala de aula. Este certificado possui 120 horas de carga horária.
                </li>
            </br>
            <li><strong>Congresso Online - Ciência do Treinamento Físico:Junho de 2020 - Não expira</strong>
            </br>
                O presente curso possui carga horária de em 20 horas.
                </li>
            </br>
            <li><strong>Dança - Processo de Pesquisa Coreográfica para Intérpretes</strong>
                Junho de 2020 - Não expira
                Este certificado possui 21 horas/aula de carga horária</li>
            </br>
            
        </ul>
        </section>
        <section class="agrupar fotos">
        <img class="foto-vivi-sobremim" src="img/sobre-mim.jpeg" alt="Professora gisele passando instruções para crianças na piscina">
        <img class="foto-vivi-sobremim2" src="img/sobre-mim2.jpeg">


    </section>
    </main>
    <footer></footer>
        
    </body>
    </html>

Deixarei um comentário constando o css
3 respostas
por Rodrigo Moura Tavares
| 54.1k xp | 15 posts
Analista de atendimento

css:


 @import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');

:root{
    --cor-primaria:#254E70;
    --cor-secundaria:#8EE3EF;
    --cor-terciaria:#37718E;
    --cor-quaternaria:#AEF3E7;

    --fonte-primaria:  'Krona One', sans-serif;
    --fonte-secundaria: 'Montserrat', sans-serif;
}

*{
    padding:0;
    margin:0;
}
h1{
    font-size: 2.5rem;
}
body{

    box-sizing: border-box;
    color: var(--cor-primaria);
    background-color:var(--cor-secundaria);
  
   

}
strong{
    color:var(--cor-primaria);
}

.rede-cuca{
    font-style: italic;
    color: var(--cor-terciaria);
    text-decoration: none;
}
.rede-cuca:hover {
    color: var(--cor-primaria);
}

.navegacao{
    
   padding: 2% 0 2% 10%;

}
.navegacao__menu{
    display: flex;
    gap: 80px;
}

.navegacao__menu__conteudo{
    font-size:1.5rem;
    font-family: var(--fonte-secundaria);
    font-weight: 600;
    text-decoration: none;
    color: var(--cor-primaria);
}

.navegacao__menu__conteudo:hover{
   color: var(--cor-quaternaria);
}
.apresentacao{
    padding: 2% 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;

}


.apresentacao__conteudo{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 40px;
   
}

.apresentacao__conteudo__titulo{
    font-size: 2.25rem;

    font-family:var(--fonte-primaria);


}
.apresentacao__conteudo__descricao{
    font-size: 1.5rem;
    font-family: var(--fonte-secundaria);

}

.apresentacao_link{
    font-family: var(--fonte-primaria);
    font-size: 1.5rem;
    color: var(--cor-primaria);
}

.apresentacao__links{
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    align-items: center;
    gap: 30px;

}

.apresentacao__links__link{
    display: flex;
    justify-content: center;
    gap:16px;
    background-color:var(--cor-terciaria);
    width: 16rem;
    text-align: center;
    border-radius: 3em;
    text-decoration: none;
    color: #F3F3F3;
    border: 2px solid var(--cor-secundaria);
    border-radius: 1rem;
    font-weight: 600;
    font-size: 1.40rem;
    padding: 1.40rem;
    font-family: var(--fonte-secundaria);
}
#instagram-imagem{
    width: 1.80rem;
}
.apresentacao__links__link:hover{
    color:var(--cor-secundaria);
    background-color:var(--cor-quaternaria);
}



.foto-vivi{
width: 45%;
border-radius: 3em;
}
.foto-vivi-sobremim{
    width: auto;
    height: 31rem;
    border-radius: 3em;
   
}
.foto-vivi-sobremim2{
    width: auto;
    height:29rem ;
    border-radius: 3em;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}
@media (max-width:900px){
.apresentacao{
    display: flex;
    flex-direction: column-reverse;
    padding:5%;

}
.apresentacao__conteudo {
    width:auto;
}
.navegacao{
padding: 5%;



}
.navegacao__menu{
    display: flex;
    justify-content: center;
    
}
}

Imagem está ficando lá em baixo ao ponto de não aparecer no começo da página Insira aqui a descrição dessa imagem para ajudar na acessibilidade

solução!
por Victor Costa Santos
| 1908.3k xp | 3660 posts
Alura Scuba Team Monitor de ForumOps

Olá Rodrigo!

Não compreendi completamente o layout que você deseja para suas imagens, mas presumo que você queira uma imagem ao lado do seu texto e depois outra abaixo. Com base nisso, desenvolvi o seguinte resultado. Por favor, verifique se está de acordo com o que você imagina para o seu site: Foto do site, com as imagens em formato diferente

Utilizei de uma imagem do pexels(site de imagens) genérica para preencher a falta da foto utilizada por ti.

Para obter esse resultado facilmente ajustável, primeiro padronizei as classes de imagem no seu index.html, removendo a classe foto-vivi-sobremim. No entanto, é claro que a utilizei apenas para padronização. Caso seja necessário, a classe pode ser utilizada, mas é sempre bom manter um padrão visualmente.

O código css utilizado foi esse, que desde vai desde a class apresentação até antes do começo do @media:

.apresentacao{
    padding: 2% 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    align-items: flex-start;

}


.apresentacao__conteudo{
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 40px;
   
}

.apresentacao__conteudo__titulo{
    font-size: 2.25rem;

    font-family:var(--fonte-primaria);


}
.apresentacao__conteudo__descricao{
    font-size: 1.5rem;
    font-family: var(--fonte-secundaria);

}

.apresentacao_link{
    font-family: var(--fonte-primaria);
    font-size: 1.5rem;
    color: var(--cor-primaria);
}

.apresentacao__links{
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    align-items: center;
    gap: 30px;

}

.apresentacao__links__link{
    display: flex;
    justify-content: center;
    gap:16px;
    background-color:var(--cor-terciaria);
    width: 16rem;
    text-align: center;
    border-radius: 3em;
    text-decoration: none;
    color: #F3F3F3;
    border: 2px solid var(--cor-secundaria);
    border-radius: 1rem;
    font-weight: 600;
    font-size: 1.40rem;
    padding: 1.40rem;
    font-family: var(--fonte-secundaria);
}
#instagram-imagem{
    width: 1.80rem;
}
.apresentacao__links__link:hover{
    color:var(--cor-secundaria);
    background-color:var(--cor-quaternaria);
}

.agrupar_fotos{
  max-width: 50%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;

}
.foto-vivi-sobremim{
  display: flex;
  max-width:100%;
  border-radius: 3em;
}

Sinta-se à vontade para ajustar o tamanho e largura da imagem, e o tamanho de cada parte da tela da main.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Rodrigo Moura Tavares
| 54.1k xp | 15 posts
Analista de atendimento

Sem palavras mestre Victor! Era exatamente isso. Pelo visto estava precisando da luz "flex-start" haha. Muito bom, obrigado pela aprendizagem ! Vou dar continuidade no projeto.