Desafio Currículo | HTML e CSS: cabeçalho, footer e variáveis CSS

2
respostas

por Paulo Cesar Conrado Júnior

| 13.3k xp | 4 posts

Postando a página do desafio do currículo. Tentei brincar um pouco com o Hover pra página não ficar tão estática.

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

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

* {
    margin: 0;
    padding: 0;
    
}

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

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

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

}

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

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

.titulo-destaque {
    color: #22D4FD;
}
.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:hover{
    padding: 5%;
    background-color: #F6F6F6;
    color: #000000;
    font-size: 28px;
    border-radius: 8px;
}

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

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

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

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

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

2 respostas

por Paulo Cesar Conrado Júnior

| 13.3k xp | 4 posts

27/11/2023

HTML da parte do currículo (Coloquei um hover nos menus também, pra aumentar a fonte quando passar o mouse):

<!DOCTYPE html>
<html lang="en">
<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="./style/style.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__links" href="./index.html">Home</a>
            <a class="cabecalho__menu__links"href="./about.html">Sobre mim</a>
            <a class="cabecalho__menu__links"href="./curriculo.html">Curriculo</a>
        </nav>
    </header>
    
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Currículo</h1>
            <p class="apresentacao__conteudo__texto">
                Boas experiências em suporte técnico remoto e presencial a usuário, instalação de programas em geral e troubleshooting no Windows. <br>
                Conhecimentos em redes, TCP/IP, DNS, DHCP, e etc. <br>
                Experiência em suporte técnico remoto com sistema ERP de Postos de Gasolina. <br>
                Boa comunicação, tanto oral quanto escrita. <br>
                Facilidade em relacionamento com colegas de trabalho e em socializar no ambiente de trabalho. <br>
                Facilidade em aprendizado em processos e habilidades novas. <br>
                Noção básica de inglês
                Começando estudos em programação na área de front-end. Já tive contato com programação na facudaldade de Redes de Computadores, então já entendo o básico <br>
                de HTML e CSS. <br>
                Pretendo me aprofundar na área de front-end e áudio visual.<br>
            </p>

            <h1 class="apresentacao__conteudo__titulo">Experiências</h1>
            <ul class="apresentacao__conteudo__texto">
                <li>Nexa Tecnologia - (Jul - 2023 / Atualmente) - Suporte Técnico N2</li>
                <li>Databoff Sistemas - (Mar - 2020 / Nov - 2022) - Analista de Suporte Técnico</li>
                <li>JDB Tecnologia - (Fev 2019 / Dez - 2019) - Técnico em Informática</li>
            </ul>

            <h1 class="apresentacao__conteudo__titulo">Estudos</h1>
            <ul class="apresentacao__conteudo__texto">
                <li>Uniftec - Redes de Comuputadores (incompleto) - 2016 a 2019</li>
                <li>Uniftec - Psicologia (Trancado) - 2021  a 2022</li>
            </ul>

        </section>

        <img src="./assets/img_curriculo.jpg" alt="Eu">
    </main>
    <footer class="rodape">
        <p>Desenvolvido por Alura.</p>
    </footer>
</body>
</html>

por RODRIGO SILVA HARDER

| 2302.6k xp | 4888 posts

Alura Scuba Team Monitor de Fórum Ops

27/11/2023

Oi, Paulo, tudo bem?

Parabéns pelo resultado na resolução do desafio, ficou ótimo!

Também agradeço por compartilhar seu código com os demais estudantes, com certeza vai ajudar nos estudos de todas as pessoas que estão aprendendo este mesmo assunto.

Continue mergulhando em tecnologia e se tiver dúvidas, conte com o fórum. Abraços!

Mergulhe em programação