Dúvidas - Projeto

Oi, Stephanie, tudo bem?

O problema estava na estrutura HTML que você compartilhou que possuia algumas tags que poderiam ser suprimidas e algumas classes que você utilizou que também poderiam ser removidas do código. Além disso, você utilizou o position: fixed que fixa os elementos na tela, o que pode ter contribuído para que os elementos ficassem sobrepostos.

Com as correções o código ficou assim:

HTML

    <header class="cabeçalho">
        <img src="img/Vector.svg" class="cabecalho__estrela">
        <h3 class="cabeçalho__menu-titulo"> Stephanie Daravina </h3>
        <ul class="cabeçalho__lista">
            <li class="cabeçalho__item"><a href="#">Sobre mim</a></li>
            <li class="cabeçalho__item"><a href="#">Skills</a></li>
            <li class="cabeçalho__item"><a href="#">Hobbies</a></li>
            <li class="cabeçalho__item"><a href="#">Formações e Cursos</a></li>
            <li class="cabeçalho__item"><a href="#">Experiências</a></li>
            <li class="cabeçalho__item"><a href="#">Contato</a></li>
        </ul>
    </header>

    <section class="Sobre">
        <div class="container__sobre" id="#sobremim">
            <h2 class="sobre__titulo">Olá, meu nome é Stephanie e sou estudante de programação.</h2>
            <h3 class="sobre__texto">Estou realizando transição de carreira e estou me desenvolvendo como
                programadora fullstack.</h3>
            <div class="container__sobre-imagem">
                <img src="img/FOTO_ROSTO.jpeg" class="imagem__sobre">
            </div>
        </div>
    </section>

CSS:

.cabeçalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
}

.cabecalho__estrela {
    padding: 0.4em;
}

.cabeçalho__lista {
    display: flex;
    margin: 0 1em;
    width: 100vw;
    list-style-type: none;
}

.cabeçalho__item {
    padding: 2em;
    font-weight: 500;
}

a {
    text-decoration: none;
    color: var(--cinza);
    margin: 0;
    padding: 0;
}

.container__sobre {
    height: auto;
    margin-top: 1%;
    padding: 0;
    display: flex;
    align-items: center;
}

.imagem__sobre {
    width: 40%;
    padding-left: 50%;
}

.sobre__titulo {
    font-weight: 700;
    font-size: 50px;
    color: var(--cinza);
}

.sobre__texto {
    font-weight: 400;
    font-size: 22px;
    color: var(--cinza);
}

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

Olá Rodrigo,

Sua ajuda foi indispensável.

Consegue me ajudar com mais uma dúvida? Se possível, claro.

Estou com dificuldades na aplicação do flexbox, acredito que estou aplicando na classe incorreta, por mais que tenha feita todos os testes durante o dia. (sim, já estou 50% a frente do desafio :) compartilho o link quando estiver finalizado).

Gostaria de deixar o texto ao lado da foto mas isto só acontece se eu utilizo o "display:flex", porém se eu uso o "flex-direction: column" o texto fica embaixo da foto. Se utilizo o row, não altera em nada.

Segue código:

HTML

<section class="experiência"> 
            <h2 class="experiência__titulo" id="experiência">Experiências</h2>
        </section>
        <section class="container experiência__secundária"> 
                 <div class="experiência__projetos"> 
                    <img src="img/TS__BRASIL.PNG" class="experiência__imagem">
                <h2 class="experiência__item">Taylor Swift Brasil</h2>  
                 <p class="experiência__texto">Projeto Pessoal</p>
                 <div class="experiência__descrição">
                <span class="experiência__repo"><a href="https://github.com/sdaravina/Taylor-Swift"><button class="experiência__botão--repo">Repositório</button></a></span>
                 <span class="experiência__demo"><a href="https://taylor-swift-lovat.vercel.app/"><button class="experiência__botão--demo">Ver demo</button></a></span>
     </div>
    </div>
        </section>

CSS:

.experiência__projetos {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em;
}

.experiência__imagem {
    width: 40%;
}

.experiência__botão--demo {
    display: inline-block;
    align-items: center;
    font-weight: 400;
    padding: 0.7em;
    color: var(--fundo-skill);
    background-color: var(--azul-botão);
    border-color: transparent;
}

.experiência__botão--demo:hover {
    color: var(--azul-botão);
    background-color: transparent;
    border-color: var(--azul-botão);
}

.experiência__botão--repo {
    display: inline-block;
    align-items: center;
    font-weight: 400;
    padding: 0.7em;
    color: var(--azul-botão);
    background-color: transparent;
    border-color: var(--azul-botão);
    border-width: 0.1em;
}

.experiência__botão--repo:hover {
    color: var(--fundo-skill);
    background-color: var(--azul-botão);
}

.experiência__titulo {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    padding: 2em;
    font-family: var(--fonte-principal);
}

.experiência__item {
    padding: 1em;
    font-size: 22px;
    font-weight: 700;
    text-align: left;
}

.experiência__texto {
    padding: 1em;
    font-weight: 500;
    font-size: 15px;
    padding: 1em 0;
}

Agradeço pelo apoio.

Oi, Stephanie, como vai?

Pelo que entendi, você quer que as informações (título, descrição e botões) fiquem ao lado da imagem em uma mesma linha, e que essas mesmas informações fiquem em uma coluna, com o título acima, a descrição abaixo e os botões em outra linha.

Para isso, podemos criar uma <div>que vai separar todos esses elementos da imagem, adicionar a classe informacoes__projetos nessa <div> e aplicar o display:flex e o flex-direction:column.

O código ficaria assim:

<section class="experiência">
    <h2 class="experiência__titulo" id="experiência">Experiências</h2>
</section>
<section class="container experiência__secundária">
    <div class="experiência__projetos">
        <img src="https://www.cnnbrasil.com.br/wp-content/uploads/sites/12/2024/02/taylor-perfil-e1707217244144.jpeg?w=596"
            class="experiência__imagem">
        <div class="informacoes__projetos">
            <h2 class="experiência__item">Taylor Swift Brasil</h2>
            <p class="experiência__texto">Projeto Pessoal</p>
            <div class="experiência__descrição">
                <span class="experiência__repo"><a href="https://github.com/sdaravina/Taylor-Swift"><button
                            class="experiência__botão--repo">Repositório</button></a></span>
                <span class="experiência__demo"><a href="https://taylor-swift-lovat.vercel.app/"><button
                            class="experiência__botão--demo">Ver demo</button></a></span>
            </div>
        </div>
    </div>
</section>

.experiência__projetos {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em;
    gap:25px;
}

.informacoes__projetos{
    display:flex;
    flex-direction: column;
}

...RESTATE DO CÓDIGO

Espero ter ajudado. Caso tenha dúvidas, crie um novo tópico no fórum para que eu possa te ajudar de forma mais assertiva. Abraços!