Entrar Ainda não tem acesso?
3
respostas

Dúvidas

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS, no capítulo Aplicando variáveis CSS e atividade Conclusão

por GLEICON FRANCISCO PEREIRA
| 27.3k xp | 8 posts

Fala galera! Tudo bem? Fiquei com algumas dúvidas.

1 - Não estou conseguindo alinhar os texto no modo justificado.

2 - Para estilizar uma seção específica de uma página sem afetar outra usando o mesmo CSS, é melhor criar uma nova classe ou usar a opção de ID, que não conheço bem, mas vi um comentário em um fórum.

3 - Os textos ficaram diferente no Chrome e no Edge, será que foi um código errado que eu coloquei?

Se for a caso dessas soluções estarem na próxima trilha, que é "HTML e CSS: trabalhando com responsividade e publicação de projetos", estou dando continuidade nessa parte.

EDGE Print da minha página do EDGECHROME Print da minha página no ChromeÍNDEX

<!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>Document</title>
    <link rel="stylesheet" href="./style/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="curriculo.html">Currículo</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 class="titulo-destaque"> com um Front-end de qualidade!</strong></h1>
                <p class="apresentacao__conteudo__texto">Olá! Sou Gleicon Pereira, desenvolvedor Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
                <div class="apresentacao__links">
                    <h2>Acesse minhas redes:</h2>
                    <a class="apresentacao__links__link" href="https://Instagram.com/gleicon.f7">
                        <img src="./assets/instagram.png">
                        Instagram
                    </a>
                    <a  class="apresentacao__links__link" href="https://linkedin.com/in/gleiconpereira/">
                        <img src="./assets/linkedin.png">
                        Linkedin
                    </a>
                    <a  class="apresentacao__links__link" href="https://twitch.tv/gfranchesco">
                        <img src="./assets/twitch.png">
                        Twitch
                    </a>
                </div>
            </section>
            <section class="apresentacao__imagem">            
                <img class= apresentacao__imagem src="./assets/G7.jpg" alt=" Gleicon">     
            </section> 
        </main>
        <footer class="rodape">
            <p>Desenvolvido por Alura.</p>
        </footer>        
</body>
</html>

Vou deixar os códigos restante nos comentários!

3 respostas
por GLEICON FRANCISCO PEREIRA
| 27.3k xp | 8 posts

CURRÍCULO (Em construção)

<!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>Document</title>
    <link rel="stylesheet" href="./style/style.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="index.html">Home</a>
        </nav>
    </header>    
        <main class="apresentacao">
            <section class="apresentacao__conteudo">
                <h1 class="apresentacao__conteudo__titulo">Currículo</h1>
                <p class="apresentacao__conteudo__texto">
                    Apresentação e informações principais
                </p>
                <h2 class="apresentacao__conteudo__titulo">Experiências</h2>
                <p class="apresentacao__conteudo__texto">
                <ul class="apresentacao__conteudo__texto">
                    <li> Empresa tal (2020 - 2021) - fazia isso e aquilo </li>
                    <li> Empresa tal (2021 - 2023) - fazia isso e aquilo </li>
                </ul>
                </p>
                <h2 class="apresentacao__conteudo__titulo">Estudos</h2>
                <div class="apresentacao__conteudo__texto">
                <ul class="apresentacao__conteudo__texto">
                    <li>Curso tal - Alura Cursos <a href="linkdocertificado">com certificado</a> </li>
                    <li>Curso tal - Alura Cursos <a href="linkdocertificado">com certificado</a></li>
                    <li>Curso tal - Alura Cursos <a href="linkdocertificado">com certificado</a></li>
                </ul>
                </div>    
            </section>
            <section class="apresentacao__imagem">            
                <img class= apresentacao__imagem src="./assets/G7.jpg" alt=" Gleicon">     
            </section> 
        </main> 
        <footer class="rodape">
            <p>Desenvolvido por Alura.</p>
        </footer>        
</body>
</html>

STYLE

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

:root {
    --cor-primaria: #025464;
    --cor-secundaria: #F6F6F6;
    --cor-terciaria: #E57C23;
    --cor-hover: #272727;

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

* {
    margin: 0;
    padding: 0;
}

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

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

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

.cabecalho__menu__link{
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--cor-terciaria);
    text-decoration: none;
}

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

.apresentacao {
    padding: 5% 15%;
    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: 30px;
    font-family: 'Krona One', sans-serif;
}


.apresentacao__conteudo__titulo:hover {
    background-color: rgba(77, 72, 66, 0.171);
}

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


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

}

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


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

.apresentacao__imagem{
    scale: 70%;
    border-radius: 10%;
    border: var(--cor-terciaria);
    box-shadow: var(--cor-secundaria);
}

.rodape {
    padding: 24px;
    color:var(--cor-primaria);
    background-color: var(--cor-terciaria);
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 400;
}
por GLEICON FRANCISCO PEREIRA
| 27.3k xp | 8 posts

ABOUT

<!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>Sobre mim</title>
    <link rel="stylesheet" href="./style/style.css">
</head>
    <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>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo>
            <h1 class="apresentacao__conteudo__titulo">Sobre mim</h1>
            <p>Sou formado em comunicação social, com enfase em Radio TV e Internet, e possuo uma pós graduação em Tecnologias de Aprendizagem pelo Senac. Recentemente, mergulhei no universo do design e da inteligência artificial, participando de cursos com designer Lucas Rosa e explorando plataformas como Midjourney e ChatGPT pela StartSe e outros profissionais. Uma das minhas paixões latentes sempre foi a programação. Esse ano, decidi finalmente transformar essa vontade em realidade e iniciei uma trilha de iniciação à programação na Alura. </p>
            <p>Uma das minhas paixões latentes sempre foi a programação. Esse ano, decidi finalmente transformar essa vontade em realidade e iniciei uma trilha de iniciação à programação na Alura. A música também é uma parte importante da minha vida. Comecei a tocar violino aos 9 anos, e fiz 5 anos de piano clássico. Outra atividade que me encanta é o xadrez. Em breve irei concluir um curso de instrutor, que está me ajudando a desenvolver um projeto de ensino de xadrez para alunos do Senac. </p>
        </section>
        <section class="apresentacao__imagem">            
            <img class= apresentacao__imagem src="./assets/G7.jpg" alt=" Gleicon">     
        </section> 
    </main>
    <footer class="rodape">
        <p>Desenvolvido por Alura.</p>
    </footer>
</body>
</html>

Desde já, muito obrigado galera!

por Nícolas Felipe Ferreira Souza
| 2641.5k xp | 8350 posts
Instrutor Monitor de Fórum

Olá, Gleicon! Como vai?

Para resolver o 1º problema, você deve substituir gap: 80px; por justify-content: space-around; em .cabecalho__menu. Então esse elemento ficará assim:

.cabecalho__menu {
    display: flex;
    justify-content: space-around;
}

No segundo caso, depende da sua pretensão, utilizar classe ou id é uma escolha que deve levar em consideração se o mesmo estilo daquele determinado elemento poderá futuramente ser utilizado em outro elemento, caso sim, utilize classes, caso contrário, você pode escolher entre classe e id.

E por fim, é comum que sites mudem quando utilizados em outros sistemas operacionais. Para evitar isso, um bom recurso é o famoso reset no CSS. Veja esse artigo para saber mais sobre o assunto.

Espero ter ajudado. Fico à disposição!

Abraço!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!