Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

não consigo deixar minha imagem com o mesmo angolo que a projeto do figma.

Criei essa Classe para poder adicionar minha foto, pois não queria que fosse a mesma do projeto figma da Joana Santos. porém estou com dificuldades em deixar o mesmo pocicionamento que o do projeto dela. gostaria de saber no que estou errando. file:///C:/Users/lilar/OneDrive/%C3%81rea%20de%20Trabalho/Projeto%20Code/index2.html

.apresentacao__lila {
position: absolute;
width: 467.71px;
height: 532px;
left: 1032px;
top: 253px;
border: 3px solid #22D4FD;
border-radius: 16px;

}

4 respostas

Olá, Lilandia.

Tudo bem?

Compartilha os códigos HTML e CSS completos aqui com a gente por gentileza, você pode copiar eles e colar aqui mesmo igual você fez com esse do CSS.

Sigo aguardando. Valeu.

<!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">
    <title>Portifolio</title>
    <link rel="stylesheet" href="./styles/style.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="index2.html">Home</a>
            <a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
            <a class="cabecalho__menu__link" href="curriculo.html">Currículo</a>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível<strong class="titulo-destaque"> com um Front-end de qualidade</strong></h1>
            <p class="apresentacao__conteudo__texto">Olá! Sou Lila Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
        <div class="apresentacao__links">
            <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
            <a  class="apresentacao__links__link" href="https://github.com/rafaballerini">
                <img src=".assets/github.png">
                Github
            </a>
            <a  class="apresentacao__links__link" href="https://linkedin.com/in/lilandia-ribeiro-9035ba141/">
                <img src=".assets/linkedin.png">
                LinkedIn
            </a>
            <a  class="apresentacao__links__link" href="https://twitch.tv/lilahyuuga">
                <img src=".assets/twitch.png">
                Twitch
            </a>    
        </div>
        </section>
        <img class="apresentacao__lila" src=".assets/foto.Lila.jpg" alt="Foto de Lila Santos sorrindo">
    </main>
        <footer class="rodape">
            <p> Desenvolvido por Lila.</p>
        </footer>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

*  {
    margin: 0;
    padding: 0;
}

body {
    /* height: 100vh; */
    box-sizing: border-box;
    background-color: #000000;
    color: #F6F6F6;
}

.cabecalho {
    padding: 2% 0% 0% 15%;
}

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

.cabecalho__menu__link {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #22D4FD;
    text-decoration: none;
}

.apresentacao {
    padding: 5% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    }

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

.apresentacao__conteudo__titulo {
    font-size: 36px;
    font-family: 'Krona One', sans-serif;
}

.titulo-destaque {
    color: #22D4FD;
}

.apresentacao__conteudo__texto {
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
}

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

.apresentacao__links__link {
    /* background-color: #22D4FD; */
    display: flex;
    justify-content: center;
    gap: 16px;
    border: 2px solid #22D4FD;
    width: 378px;
    text-align: center;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: #F6F6F6;
    font-family: 'Montserrat', sans-serif;
}

.apresentacao__links__link:hover {
    background-color: #272727;
}

.apresentacao__lila {
    position: absolute;
    width: 467.71px;
    height: 532px;
    left: 1032px;
    top: 253px;
    border: 3px solid #22D4FD;
    border-radius: 16px;
}

.apresentacao__links__subtitulo {
    font-family: 'Krona one', sans-serif;
    font-weight: 400;
    font-size: 24px;
}

.rodape {
    padding: 24px;
    color: #000000;
    background-color: #22D4FD;
    text-align: center;
    font-family: 'montserrat', sans-serif;
    font-weight: 400;
}


.apresentacao__conteudo__texto {
    text-decoration: none;
    color: #22D4FD;
}
solução!

Lilandia, boa noite! Não consegui observar erros na estrutura dos seus códigos HTML ou CSS. No entanto, você pode confirmar na pasta do seu projeto em qual pasta as imagens estão localizadas?

Pergunto pois no seu código HTML, você listou como .assets/. Você pode confirmar se o nome da pasta teria esse ponto final antes da palavra assets?

Caso de fato o nome da pasta seja esse, você pode enviar mais informações sobre o erro que você está encontrando?

Aguardo respostas! Continue com os estudos!