4
respostas

Novas páginas criadas estão sem formatação

Olá! Estou com problemas ao criar novas páginas no projeto do curso. Quando eu crio, mesmo usando o mesmo arquivo .CSS que no index, a nova página fica toda desconfigurada em questão de alinhamento e tamanho de fonte. O que pode ser? Segue imagens do código e da página.

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 acessibilidadeOs códigos usados: "index":

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portifolio</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="aboutme.html">Sobre mim</a>
            <a class="cabecalho_menu_link" href="meucurriculo.html">Meu 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="destaque-titulo">com um Front-end de qualidade!</strong></h1>
            <p class="apresentacao_conteudo_texto">Olá! Sou Matheus Meletto, 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 class="apresentacao_links_subtitulo">Acesse minhas redes:</h2>
                    <a class="apresentacao_links_estilo" href="https://instagram.com/matheus_meletto">
                        <img src="./assets/instagram.png" alt="icone da rede social Instagram">
                        Instagram
                    </a>
                    <a class="apresentacao_links_estilo">
                        <img src="./assets/github.png" alt="icone da rede social GitHub">   
                        GitHub
                    </a>
                    <a class="apresentacao_links_estilo">
                        <img src="./assets/linkedin.png" alt="icone da rede social LinkedIn">
                        LinkedIn
                    </a>
                </div>    
        </section>
        <img src="./assets/imagem.png" alt="Imagem do Matheus Meletto fazendo um V com os dedos">
    </main>
    <footer class="rodape">
        <p>Desenvolvido por Alura</p>
    </footer>
</body>
</html>

"Sobre mim":

<!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="aboutme.html">Sobre mim</a>
            <a class="cabecalho_menu_link" href="meucurriculo.html">Meu currículo</a>
        </nav>
    </header>
    <main>
    </main>
    <footer class="rodape">
        <p>Desenvolvido por Alura</p>
    </footer>
</body>
</html

"Meu currículo", atividade proposta na aula 04.

4 respostas
</header>
    <main class="apresentacao">
        <section class="apresentacao_conteudo">
            <h1 class="apresentacao_conteudo_titulo">Meu Currículo:</h1>
            <h2 class="apresentacao_links_subtitulo">Dados Pessoais:</h2>
            <p class="apresentacao_conteudo_texto">Nome: Matheus Aparecido Meletto Fontes</p>
            <p class="apresentacao_conteudo_texto">Endereço: Avenida Paraná, 376, apto 2. Telêmaco Borba - Pr. Cep: 84261-060</p>
            <p class="apresentacao_conteudo_texto">Contato: (43) 99642-6584|(43) 98805-0572(recados)|e-mail: ma_meletto@hotmail.com</p>
            <h2 class="apresentacao_links_subtitulo">Apresentação:</h2>
            <p class="apresentacao_conteudo_texto">Atuei por 11 anos como Representante Comercial titular de uma região de 37 municípios no Paraná, liderando uma equipe de vendedores. Nesse tempo, além da experiência com vendas, adquiri vivência com condução de reuniões e treinamentos, tanto com vendedores como com clientes,
                desenvolvimento de planos de ação de desenvolvimento dos clientes, planejamento de ações e direcionamento de equipe para o atingimento de metas e análise de indicadores de desempenho.</p>
            <p class="apresentacao_conteudo_texto">Após esse período no ramo de vendas, iniciei a graduação em Engenharia de Software, com intenção de buscar novos ramos de atuação na minha carreira. Trabalho bem em equipe, sendo muito colaborativo e afeito ao feedback entre os membros, e consigo manter a calma e 
                o controle em situações de pressão frente a entregas relevantes. Busco sempre me aprofundar sobre os assuntos com os quais trabalho e difundir esse conhecimento entre os membros de minha equipe. Atualmente estou buscando maior desenvolvimento nos ramos da Engenharia de Software, como gestão de projetos ágeis, desenvolvimento e gestão de requisitos.</p>
            <h2 class="apresentacao_links_subtitulo">Formação:</h2>
            <p class="apresentacao_conteudo_texto">Tecnólogo em Automação Industrial;</p>
            <p class="apresentacao_conteudo_texto">Unopar - Universidade Norte do Paraná, Londrina - Pr.</p>
            <p class="apresentacao_conteudo_texto">Cursado entre jan/2008 e jul/2012. Não concluído.</p> 
            <p></p>
            <p class="apresentacao_conteudo_texto">Bacharelado em Engenharia de Software</p>
            <p class="apresentacao_conteudo_texto">Universidade Cesumar - Unicesumar, Telêmaco Borba - Pr.</p>
            <p class="apresentacao_conteudo_texto">Iniciado em jan/2020, previsão de conclusão em dez/2023.</p>
            <h2 class="apresentacao_links_subtitulo">Cursos Livres:</h2>
            <p class="apresentacao_conteudo_texto">Arquitetura de computadores: por trás de como seu programa funciona; Alura, 2023.</p>
            <p class="apresentacao_conteudo_texto">HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags; Alura, 2023.</p>
            <p class="apresentacao_conteudo_texto">HTML e CSS: Classes, posicionamento e Flexbox; Alura, 2023.</p>   
            <p class="apresentacao_conteudo_texto">Linux I: conhecendo e utilizando o terminal; Alura, 2023.</p>
            <p class="apresentacao_conteudo_texto">Lógica de programação: comece lógica com o jogo Pong e JavaScript; Alura, 2023.</p>
            <p class="apresentacao_conteudo_texto">Lógica de programação: Laços e listas com JavaScript; Alura, 2023.</p>
            <h2 class="apresentacao_links_subtitulo">Experiência:</h2>
            <h3 class="apresentacao_conteudo_texto">09/2009 - 08/2012: Auxiliar Administrativo, Confepar Agro-Industrial Coop. Central, Londrina-Pr.</h3>
            <p class="apresentacao_conteudo_texto">Excercício no setor de manutenção industral, auxiliando a implantar e manter o sistema de 
                manutenções preventivas, experiência que me agregou conhecimento em processos 
                industriais, controle de prazos e planejamento.</p>
            <h3 class="apresentacao_links_subtitulo">09/2012 - 06/2023: Representante Comercial Autônomo, Telêmaco Borba-Pr e região.</h3>            <p class="apresentacao_conteudo_texto">Prestação de serviços de representação comercial para Manfrim Industrial e Comercial Ltda 
               (Special Dog Company).</p>
           <p class="apresentacao_conteudo_texto">Além de atender e desenvolver uma região que compreendia 37 municípios, geri uma equipe 
               de vendedores e secretária. Organizava e conduzia reuniões individuais com os membros da 
               equipe, ministrava treinamento sobre os produtos e técnicas de vendas nos clientes, 
               interpretava os relatórios e indicadores para repassar para a equipe e desenvolver planos de 
               ação</p>   
       </section>
       <img class="apresentacao_imagem" src="./assets/minhaImagem.png" width="250" height="410" alt="Imagem do Matheus Meletto fazendo um V com os dedos">
    </main>

Código CSS:

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

*{
    margin: 0;
    padding: 0;
}
body{
    /* height: 100vh; */
    box-sizing: border-box;
    background-color: #000000;
    color: #f6f6f6;
}

.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: #22D4FD;
    text-decoration: none;

}

.a{
    font-weight: bold;
}
.apresentacao{
    padding: 5% 15%;
    justify-content: space-between;
    display: flex;
    align-items: center;
}

.destaque-titulo{
    color: #22D4FD;
}

.apresentacao_conteudo{
    width: 645px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.apresentacao_conteudo_titulo{
    font-size: 36px;
    font-family: 'Krona One', sans-serif;
    font-weight: 400;
}
.apresentacao_conteudo_texto{
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    text-align: justify;
}
.apresentacao_links{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.apresentacao_links_estilo{
    /* background-color: #22D4FD; */
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 378px;
    text-align: center;
    border-radius: 8px;
    border: 2px solid #22D4FD;
    font-size: 24px;
    padding: 21.5px 0;
    font-weight: 600;
    text-decoration: none;
    color: #F6F6F6;
    font-family: 'Montserrat', sans-serif;
}

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

.apresentacao_links_estilo:hover{
    background-color: #272727;
}

.apresentacao_imagem{
    display: flex;
    align-items:start;
}

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

Olá, Matheus! Tudo bem?

Pelo código que você compartilhou, não é possível observar o link no arquivo meucurriculo.html com o arquivo style.css que você disse que fez .

Te aconselho a verificar se o link para o CSS na tag <head> do arquivo meucurriculo.html está com o caminho correto, verifique se o arquivo HTML dessa página está na mesma pasta dos demais arquivos HTML.

Espero que isso ajude. Fico à disposição!

Abraço!

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

Está sim, Nícolas. Só não coube no post mesmo. E o problema não é apenas na página de currículo, mas na página "Sobre mim" também. Como dá pra ver pelas imagens do site gerado, até puxa algumas formatações como as cores de fundo e das letras, além das próprias letras, porém o alinhamento e tamanho não está puxando do arquivo CSS...