[Projeto] Desafio: crie uma página currículo! | HTML e CSS: cabeçalho, footer e variáveis CSS

Comecei hoje (02/06), mas ainda trabalharei na melhora do projeto.

Tentei editar as bordas da imagem, mas não consegui com o border-radius. Por a imagem estar em jpg faz diferença?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

<!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>curriculo</title>
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__link" href="index.html">Home</a>
            <a class="cabecalho__link" href="about.html">Sobre mim</a>
            <a class="cabecalho__link" href="curriculo.html">Curriculo</a>
        </nav>
    </header>

    <main>

        <section class="dados__pessoais">
            <h1>Jefferson Laurentino Abath</h1>
                <p>Dados pessoais</p>
                    <ul>
                        <li>Nacionalidade: Brasil</li>
                        <li>Idade: 38 anos</li>
                        <li>Celular: (84) 98841-3089</li>
                        <li>Endereço: Rua Francisco Duarte de Carvalho, 600, 
                            <br>São Gonçalo do Amarante</li>
                        <li>Email: jefflabath@hotmail.com</li>
                    </ul>
        </section>   

        <section class="objetivo__profissional">
            <h1>Objetivo profissional</h1>
                <p>Consultor Comercial, Supervisor Comercial</p>
        </section>

        <section class="formacao">
            <h1>Formação</h1>
                <p>Graduação</p>
                    <ul>
                        <li>Pós-Graduação: Especialização em Logistica e Cadeia de Suprimentos</li>
                        <li>Administração com ênfase em gestão de Negocios - UNP</li>
                        <li>Universidade Potiguar</li>
                        <li>Conclusão: Dez/2012</li>
                    </ul>
        </section>

        <section class="idioma">
            <h1>Idiomas</h1>
                <p>Ingles</p>
                    <ul>
                        <li>Nivel: Intermediario</li>
                    </ul>
        </section>

        <section class="historico__profissional">
            <h1>Historico Profissional</h1>
                <p>Grupo Petropolis</p>
                    <ul>
                        <li>Vendedor Externo</li>
                        <li>Periodo: Abril/2022 até o presente momento</li>
                        <li>Atividades desenvolvidas: Atendimento a PDV's, 
                            <br>ações de trade, aplicação de merchandising</li>
                    </ul>
        </section>
        <div class="foto_autor">
             <img src="assets/fotoJefferson.jpg" alt="Foto do autor" width="400px">

        </div>
    </main>

    <footer class="rodape">
        <p>Desenvolvido por Jefferson Abath.</p>
    </footer>
</body>
</html>

Oi Jefferson, tudo bem?

Espero que esteja gostando do curso e se divertindo com o desafio de criar uma página currículo!

Quanto à sua dúvida, o border-radius é uma propriedade do CSS que permite arredondar as bordas de um elemento. A princípio, não há diferença se a imagem estiver em formato JPG ou outro formato.

No entanto, é importante lembrar que o border-radius é aplicado diretamente na imagem, e não no elemento que a contém. Portanto, é necessário definir a imagem como um elemento e aplicar o border-radius nele. Por exemplo:

<img class="foto_autor" src="assets/fotoJefferson.jpg" alt="Foto do autor">

E no seu arquivo CSS, adicione a propriedade border-radius na classe .foto_autor:

.foto_autor {
  border-radius: 50px;
}

Dessa forma, a imagem será exibida com as bordas arredondadas. Você pode ver mais opções do border-radius aqui na documentação MDN.

Espero ter ajudado.

Um abraço e bons estudos.