[Projeto] Poluição no código - página currículo | HTML e CSS: cabeçalho, footer e variáveis CSS

3
respostas

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS

por Paula

| 6.6k xp | 4 posts

Fiz a página currículo, mas sinto que meu código ficou bem poluído, mesmo retirando os comentários.

HTML:

index.html

<!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>Currículo</title>
    <link rel="stylesheet" href="./styles/style.css">
</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="formation.html">Formação</a>
            <a class="cabecalho__menu__link" href="experience.html">Experiência</a>
        </nav>
    </header>
    
    <main class="apresentacao">
        <section class="apresentacao__imagem">
            <img class="apresentacao__imagem__foto" src="./assets/imagem.jpg" alt="Foto aleatória ilustrativa">
        </section>
        <section class="apresentacao__conteudo">
            <div class="apresentacao__conteudo__texto">
                <h1 class="apresentacao__conteudo__texto__titulo">Olá! Sejam bem-vindos!</h1>
                <p class="apresentacao__conteudo__texto__paragrafo">Eu sou <strong>Paula C. S. de Medeiros</strong>, engenheira mecânica em transição para o mundo da programação. Apaixonada por tecnologia, arte, línguas e pessoas, construo caminhos que unem lógica e criatividade.</p>
            </div>
            <div class="apresentacao__conteudo__links">
                <h3 class="apresentacao__links__subtitulo">Entre em contato:</h3>
                <a class="apresentacao__links__link" href="https://github.com/cacilhaspaula-dev">
                    <img src="./assets/github.png">
                    Github
                </a>
                <a class="apresentacao__links__link" href="https://www.linkedin.com/in/paulacacilhas/">
                    <img src="./assets/linkedin.webp">
                    LinkedIn
                </a>
                <a class="apresentacao__links__link" href="https://www.instagram.com/medeirospaulac/">
                    <img src="./assets/instagram.jpeg">
                    Instagram
                </a>
                <a class="apresentacao__links__link" href="mailto:cacilhaspaula@gmail.com">
                    <img src="./assets/gmail.jpg">
                    Gmail
                </a>
            </div>
        </section>
    </main>

    <footer class="rodape">
        <p>Desenvolvido por Paula Medeiros.</p>
    </footer>
</body>
</html>

3 respostas

por Paula

| 6.6k xp | 4 posts

1 semana atrás

about.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sobre mim</title>
    <link rel="stylesheet" href="./styles/style.css">
</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="formation.html">Formação</a>
            <a class="cabecalho__menu__link" href="experience.html">Experiência</a>
        </nav>
    </header>

    <main class="apresentacao_2">
        <section class="apresentacao__conteudo__2"> 
            <div class="apresentacao__conteudo__texto">
                <h1 class="apresentacao__conteudo__texto__titulo">Sobre mim:</h1>
                <p class="apresentacao__conteudo__texto__paragrafo">Lorem ipsum ...</p>
                <p class="apresentacao__conteudo__texto__paragrafo">Duis venenatis eros eget purus consectetur, eu viverra neque mattis. Cras condimentum, tortor suscipit faucibus lobortis, ipsum ante venenatis lectus, placerat condimentum leo libero a massa. Nullam dignissim odio fermentum imperdiet dapibus. Ut sit amet odio libero. Suspendisse potenti. Quisque mollis, libero eu viverra fermentum, nisl sapien blandit lacus, venenatis consectetur turpis nibh sit amet libero. Morbi condimentum justo massa, id pretium nisi elementum sed. Mauris hendrerit quam elit, non aliquet enim faucibus eu.</p>
            </div>
        </section>
        <section class="apresentacao__imagem__2">
            <div class="apresentacao__imagem__hobbies__bloco">
                <img class="apresentacao__imagem__foto__2" src="./assets/caminhada_natureza.jpg" alt="caminhada na natureza">
                <h5>Caminhadar na natureza</h5>
            </div>
            <div class="apresentacao__imagem__hobbies__bloco">
                <img class="apresentacao__imagem__foto__2" src="./assets/danca.jpg" alt="Dança">
                <h5>Dançar</h5>
            </div>
            <div class="apresentacao__imagem__hobbies__bloco">
                <img class="apresentacao__imagem__foto__2" src="./assets/musculacao.jpg" alt="musculacao">
                <h5>Fazer musculação</h5>
            </div>
            <div class="apresentacao__imagem__hobbies__bloco">
                <img class="apresentacao__imagem__foto__2" src="./assets/aprender.jpg" alt="aprender">
                <h5>Aprender</h5>
            </div>
            <div class="apresentacao__imagem__hobbies__bloco">
                <img class="apresentacao__imagem__foto__2" src="./assets/escrever.jpg" alt="escrever">
                <h5>Escrever</h5>
            </div>
            <div class="apresentacao__imagem__hobbies__bloco">
                <img class="apresentacao__imagem__foto__2" src="./assets/ler.jpg" alt="ler">
                <h5>Ler</h5>
            </div>
            <div class="apresentacao__imagem__hobbies__bloco">
                <img class="apresentacao__imagem__foto__2" src="./assets/musica.jpg" alt="música">
                <h5>Ouvir música</h5>
            </div>
            <div class="apresentacao__imagem__hobbies__bloco">
                <img class="apresentacao__imagem__foto__2" src="./assets/palavras_cruzadas.jpg" alt="palavras cruzadas">
                <h5>Fazer plavras cruzadas</h5>
            </div>
            <div class="apresentacao__imagem__hobbies__bloco">
                <img class="apresentacao__imagem__foto__2" src="./assets/planejar.jpg" alt="planejar">
                <h5>Planejar e organizar</h5>
            </div>
            <div class="apresentacao__imagem__hobbies__bloco">
                <img class="apresentacao__imagem__foto__2" src="./assets/quebra_cabeca.jpg" alt="quebra-cabeça">
                <h5>Jogar quebra-cabeça</h5>
            </div>
            <div class="apresentacao__imagem__hobbies__bloco">
                <img class="apresentacao__imagem__foto__2" src="./assets/sudoku.jpg" alt="sudoku">
                <h5>Jogar sudoku</h5>
            </div>
            <div class="apresentacao__imagem__hobbies__bloco">
                <img class="apresentacao__imagem__foto__2" src="./assets/xadrez.jpg" alt="xadrez">
                <h5>Jogar xadrez</h5>
            </div>
        </section>
    </main>

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

por Paula

| 6.6k xp | 4 posts

1 semana atrás

CSS:

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playwrite+PL:wght@100..400&display=swap');

:root{
    --cor-primaria: #ECDFCC;
    --cor-secondaria: #181C14;
    --cor-tercearia: #3C3D37;
    --cor-hover: #697565;
    --fonte-primaria: 'Krona One', sans-serif;
    --fonte-secondaria: 'Montserrat', sans-serif;
}

*{
    margin: 0;
    padding: 0;
}

.cabecalho{
    color: var(--cor-primaria);
    background-color: var(--cor-tercearia);
    padding: 15px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-family: var(--fonte-secondaria);
    font-size: 20px;
    font-weight: 400;
}

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

.cabecalho__menu__link {
   text-decoration: none; 
   color: var(--cor-primaria);
}

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

.titulo-destaque{
    color: var(--cor-tercearia);
}

.apresentacao{
    padding: 5% 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 0%;
}

.apresentacao_2{
    margin-left: 8%;
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
    margin-top: 0%;
    margin-bottom: 8%;
    gap: 10%;
}

.apresentacao__imagem{
    width: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.apresentacao__imagem__foto{
    width: 700px;
    height: 100%;
    border-radius: 5%;
}

.apresentacao__imagem__2{
    display: flex;
    flex-wrap: wrap;
    object-fit: cover;
    /* align-items: flex-start; */
    /* display: grid;
    grid-template-columns: 50%;
    grid-template-rows: 100%;  */
    column-gap: 50px;
    row-gap: 50px;
    width: 100%;
    height: 100%;
    border-radius: 5%;
    margin-top: 5%;
}

.apresentacao__imagem__hobbies__bloco {
    display: flex;
    flex-direction: column; /* itens empilhados verticalmente */
    align-items: center;    /* centralizar imagem e texto */
    text-align: center;     /* alinhar texto ao centro */
}

.apresentacao__imagem__hobbies__bloco h5 {
    font-family: var(--fonte-secondaria);
    color: var(--cor-secondaria);
    font-weight: 600;
}

.apresentacao__imagem__foto__2 {
    width: 150px;
    height: 150px;
    border-radius: 5%;
    object-fit: cover; /* para garantir a imagem não distorcida */
    margin-bottom: 8px; /* espaço entre imagem e texto */
}

.apresentacao__conteudo{
    width: 50%;
    display: flex;
    justify-content: flex-start;
    gap: 100px;
    margin-top: 5%;
}

.apresentacao__conteudo__2{
    width: 50%;
    display: flex;
    justify-content: flex-start;
    gap: 100px;
    margin-top: 5%;
}

.apresentacao__conteudo__texto__titulo{
    font-size: 30px;
    font-family: var(--fonte-primaria);
    margin-top: 2%;
}

.apresentacao__conteudo__texto__paragrafo{
    font-size: 20px;
    font-family: var(--fonte-secondaria);
    padding-top: 15px;
}

.apresentacao__conteudo__links{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin:auto;
}

.apresentacao__links__subtitulo{
    font-family: var(--fonte-primaria);
    font-weight: 400;
    font-size: 20px;
    color: var(--cor-secondaria);
}

.apresentacao__links__link{
    background-color: var(--cor-tercearia); 
    display: flex;
    align-items: center;
    gap: 8%;
    border: 2px solid var(--cor-secondaria);
    width: 200px;
    text-align: center;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 10px;
    text-decoration: none;
    color: var(--cor-primaria);
    font-family: var(--fonte-secondaria);
}

.apresentacao__links__link img {
    width: 24px; 
    height: auto;
    margin-left: 25px;
}

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

.rodape{
    color: var(--cor-primaria);
    background-color: var(--cor-tercearia);
    padding: 15px;
    text-align: center;
    font-family: var(--fonte-secondaria);
    font-size: 20px;
    font-weight: 400;
}

por Mike de Sousa

| 2077.1k xp | 4027 posts

Alura Scuba Team Suporte Educacional

6 dias atrás

Olá, Paula, como vai?

Esse tipo de sensação é comum quando o projeto ainda está nas fases iniciais e utilizamos apenas HTML e CSS. Uma boa forma de reduzir a impressão de “poluição” é observar padrões que se repetem no código e buscar formas de agrupá-los.

No CSS, por exemplo, é possível agrupar seletores que compartilham as mesmas propriedades, evitando repetições. Por exemplo, .apresentacao__conteudo e .apresentacao__conteudo__2 possuem as mesmas regras, então poderia unificá-las e apenas aplicar classes extras para ajustes específicos, quando e se necessário.

Espero ter ajudado.

Siga firme nos seus estudos e conte com o fórum sempre que precisar.

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado