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

Desafio da pagina curriculo

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS, no capítulo Navegando entre páginas e atividade Desafio: crie uma página currículo!

por Joao pedro
| 62.9k xp | 28 posts

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

HTML - index

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./Style/style.css">
    <title>Portfolio</title>
</head>
<body>
    <header class="Cabecalho">
        <nav class="Cabecalho__menu">
            <a class="Cabecalho__menu__link" href="index.html">Home</a>
            <a class="Cabecalho__menu__link" href="About.html">Sobre mim</a>
            <a class="Cabecalho__menu__link" href="Curriculo.html">Curriculo</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>com um Front-end de qualidade!</strong></h1>
            <p class="apresentacao__conteudo__texto">Olá! Sou o João Pedro, futuro desenvolvedor front end. Prazer em conhecer vocês.</p>
            <div class="apresentacao__links">
                <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
                <a class="apresentacao__links__link" href="https://linkedin.com/in/joão-pedro-césario-994940237"><img src="./Assets/linkedin.png" alt="Logo do linkedin">Linkedin</a>
                <a class="apresentacao__links__link" href="https://github.com/Jpcnjp"> <img src="./Assets/github.png" alt="Logo do github">Github</a>
                <a class="apresentacao__links__link" href="https://www.instagram.com/jpe18/"> <img src="./Assets/instagram.png" alt="Logo do instagram">Instagram</a>
            </div>
        </section>
        <img class="Minha_foto" src="./Assets/Minha foto.jpg" alt="Foto do João Pedro">
    </main>
    <footer class="rodape">
        <p>Desenvolvido por João Pedro.</p>
    </footer>
</body>
</html>

Html - Sobre mim

<!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">
    <link rel="stylesheet" href="./Style/style.css">
    <title>Sobre mim</title>
</head>
<body>
    <header class="Cabecalho">
        <nav class="Cabecalho__menu">
            <a class="Cabecalho__menu__link" href="index.html">Home</a>
            <a class="Cabecalho__menu__link" href="About.html">Sobre mim</a>
            <a class="Cabecalho__menu__link" href="Curriculo.html">Curriculo</a>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Sobre mim</h1>
            <p class="apresentacao__conteudo__texto">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
            <p class="apresentacao__conteudo__texto">Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores ipsum delis forum birol parela maxime infena. Excepteur sint occaecat cupidatat non.</p>
        </section>
        <img class="Minha_foto" src="./Assets/Minha foto.jpg" alt="Foto do João Pedro">
    </main>
    <footer class="rodape">
        <p>Desenvolvido por João Pedro.</p>
    </footer>
</body>
</html>
3 respostas
por Joao pedro
| 62.9k xp | 28 posts
HTML - Curriculo

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./Style/style.css">
    <title>Curriculo</title>
</head>
<body>
    <header class="Cabecalho">
        <nav class="Cabecalho__menu">
            <a class="Cabecalho__menu__link" href="index.html">Home</a>
            <a class="Cabecalho__menu__link" href="About.html">Sobre mim</a>
            <a class="Cabecalho__menu__link" href="Curriculo.html">Curriculo</a>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Apresentação</h1>
            <p class="apresentacao__conteudo__texto">Olá, me chamo João Pedro ! Tenho 27 anos e estou iniciando meus estudos na area de tecnologia para poder conseguir no futuro migrar de carreira, pois no momento sou um profissinal da area de logistica.</p>
            <h2 class="apresentacao__conteudo__titulo">Experiências</h2>
                <ul class="apresentacao__conteudo__texto">
                    <li>Space distribuidora de veiculos, cargo : Estoquista (01/2018 até 02/2019) = Recebimento/expedição de peças de fabrica, arrumação do estoque, entrada de notas fiscais no sistema, venda de peças e entre outras funções...  </li>
                    <li>Annecy comercial de veiculos, cargo : Estoquista (06/2019 até 10/2021) = Recebimento/expedição de peças de fabrica, arrumação do estoque, entrada de notas fiscais no sistema, venda de peças e entre outras funções... </li>
                    <li>Panpharma distribuidora de medicamentos LTDA, cargo: Auxiliar de logistica (Emprego atual) = Organização do estoque, expedição de volumes, etiquetação de volumes, separação de medicamentos e entre outras funções...</li>
                </ul>
            <h2 class="apresentacao__conteudo__titulo">Estudos</h2>
                <ul class="apresentacao__conteudo__texto">
                    <li>HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags</li>
                    <li>HTML e CSS: Classes, posicionamento e Flexbox</li>
                    <li>HTML e CSS: cabeçalho, footer e variáveis CSS</li>
                </ul>
        </section>
        <img class="Minha_foto" src="./Assets/Minha foto.jpg" alt="Foto do João Pedro">
    </main>
    <footer class="rodape">
        <p>Desenvolvido por João Pedro.</p>
    </footer>
</body>
</html>
por Joao pedro
| 62.9k xp | 28 posts
CSS 

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

:root {
    --cor-primaria: #000000;
    --cor-secundaria: #F6F6F6;
    --cor-terciaria: #22d4fd;
    --cor-hover: #272727;

    --font-principal : 'Krona One' , sans-serif;
    --font-secundaria : 'Montserrat', sans-serif;
}

* {
    padding: 0;
    margin: 0;
}

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

.Cabecalho {
    padding: 2% 0% 0% 10%;
}

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

.Cabecalho__menu__link {
    text-decoration: none;
    color: var(--cor-terciaria);
    font-family: var(--font-secundaria);
    font-size: 24px;
    font-weight: 600;
}

.apresentacao {
    padding: 5% 10%;
    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: var(--font-principal);
}

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

.apresentacao__conteudo__texto {
    font-size: 24px;
    font-family: var(--font-secundaria);
    font-weight: 400;
}

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

.apresentacao__links__subtitulo {
    font-family: var(--font-principal);
    font-size: 24px;
}

.apresentacao__links__link {
    display: flex;
    justify-content: center;
    gap: 16px;
    border: 2px solid var(--cor-terciaria);
    width: 378px;
    text-align: center;
    border-radius: 8px;
    font-size: 24px;
    padding: 21.5px 0;
    text-decoration: none;
    color: var(--cor-secundaria);
    font-family: var(--font-secundaria);
    font-weight: 600;

}

.apresentacao__links__link:hover {
    background-color: var(--cor-hover);
}

.Minha_foto {
    height: 600px;
    width: 500px;
}

.rodape {
    font-family: var(--font-secundaria);
    font-weight: 400;
    font-size: 24px;
    background-color: var(--cor-terciaria);
    color: var(--cor-primaria);
    padding: 24px;
    text-align: center;
}
solução!
por Maria Eduarda Gonçalves Furlan
| 1939k xp | 6655 posts
Instrutor Monitora de Fórum | Alura

Oi João, tudo bem?

Obrigada por compartilhar seu desafio com a comunidade. Parabéns pelo esforço e dedicação, continue assim.

Se surgir qualquer dúvida, estou à disposição.

Abraços e bons estudos!