[Projeto] Desafio do Currículo - Projeto | HTML e CSS: cabeçalho, footer e variáveis CSS

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Victor de Melo Vieira

| 15.3k xp | 9 posts

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Código CSS:

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

*{ margin: 0; padding: 0; }

body{ box-sizing: border-box; background-color: #000000; color: #F6F6F6; }

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

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

.cabecalho__menu__link{ font-size: 24px; font-family: 'Montesserat', sans-serif; font-weight: 600; color: #13ff00; text-decoration: none; }

.titulo-destaque{ color: #13ff00; }

.imagem__victor { width: 615px; }

.apresentacao{ padding: 7% 15%; display: flex; align-items: flex-start; 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; }

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

.apresentacao__conteudo__texto__descricao { font-size: 20px; font-family: 'Montserrat', sans-serif; }

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

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

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

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

.rodape{ color: #000000; background-color: #13ff00; padding: 24px; text-align: center; font-size: 24px; font-family: 'Montserrat', sans-serif; font-weight: 400; }

2 respostas

por Victor de Melo Vieira

| 15.3k xp | 9 posts

06/04/2023

Código HTML:

Home Sobre mim Currículo

<main class="apresentacao">
    <section class="apresentacao__conteudo">
        <h1 class="apresentacao__conteudo__titulo">Currículo</h1>
        <p class="apresentacao__conteudo__texto">
            Profissional atuando há 1 ano e 6 meses na área da Construção Civil tendo passado por
            segmentos de vendas, marketing e também atuando de forma voluntária no movimento das
            empresas júniores. Atualmente estou em uma transição de carreira, estudando e me especilizando na área de desenvolvimento web com foco em Front-end
        </p>
        <h2 class="apresentacao__conteudo__titulo">Experiências</h2>
        <p class="apresentacao__conteudo__texto">
        <ul class="apresentacao__conteudo__texto">
            <li> Auxiliar de Engenharia Pleno | Consórcio Copasa-Ello (03/2021 - 08/2022) </li>
            <li> Diretor Comercial | Building Engenharia Jr. (04/2019 - 01/2021) </li>
            <li> Executivo de Vendas | I9 Life Global (06/2016 - 03/2019)</li>   
        </ul>
        </p>
        <h3 class="apresentacao__conteudo__titulo">Educação</h3>
        <div>
        <p class="apresentacao__conteudo__texto">
            <ul class="apresentacao__conteudo__texto">
                <li>2015 - 2022 | Graduação em Engenharia Civil | UFPa</li>
                <li>2021 - Cursando | Curso de Inglês | Minds English School</li>
                <li>2023 | Arquitetura de computadores | Alura</li>
                <li>2023 | HTML e CSS: Ambientes de desenvolvimento, estrutura e tags | Alura</li>
                <li>2023 | HTML  CSS: Classes, posicionamento e Flexbox | Alura</li>
                <li>2023 | Lógica de Programação: Laços e listas com JavaScript | Alura</li>
                <li>2023 | Lógica de Programação: Comece em lógica com o jogo Pong e JavaScript | Alura</li>
            </ul>
        </p>
        </div>
    </section>
    <img class="imagem__victor" src="./assest/Foto Victor Vieira.jpeg" alt="Foto Victor Vieira">
</main>

<footer>
    <p class="rodape">Desenvolvido por Victor Vieira</p>
</footer>

solução!

por Lorena Garcia

| 8260.5k xp | 12081 posts

Alura Scuba Team Suporte Educacional

06/04/2023

Olá Victor, tudo bem?

Parabéns pelo seu projeto de currículo em HTML e CSS! Você fez um ótimo trabalho, desde a estruturação HTML até a definição da estilização em CSS.

Muito obrigada por compartilhar com a gente o seu código e continue firme nos estudos, praticando sempre e documentando sua evolução.

Um abraço e bons estudos.

Mergulhe em programação