Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Sprint 1 - Portfólio - O CSS não estiliza a página HTML

Boa noite

Preciso de ajuda para desvendar um enigma. Estou criando meu portfólio. Estruturei o HTML, porém o CSS não modifica absolutamente nada da página HTML. Alguém pode me ajudar?

Esta é o 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>Portfólio do Ricardo</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/flexbox.css">

</head>
<body>

    <div class="cabecalho">
        <h1>Portfólio de Ricardo Retondaro de Almeida </h1>
        <nav>
            <ul>
            <a class="cabecalhoPrincipal-nav-link" href="#">Home</a>
            <a class="cabecalhoPrincipal-nav-link" href="#">Perfil Profissional</a>
            <a class="cabecalhoPrincipal-nav-link" href="#">Onde Trabalhei</a>
            <a class="cabecalhoPrincipal-nav-link" href="#">Projetos</a>
            <a class="cabecalhoPrincipal-nav-link" href="#">Sobre Mim</a>
            <a class="cabecalhoPrincipal-nav-link" href="#">Fale Comigo</a>
            </ul>
        </nav>
            <a href="#"><img src="banner1.jpg" ></a>
    </div>

    <div class="perfilProfissional"><h2>Profissional com expressiva experiência
        adquirida em empresas nacionais e multinacionais de médio e grande porte do segmento 
        mecânico, automotivo,e mais recentemente em Construção e Montagem de projetos de 
        engenharia para o segmento de O&G e offshore.</h2>
    </div>

<section class="links">
    <div class="fotoPerfil"><img src="ricardo pic.jpg"></div>
        <h3>Redes Sociais Profissionais</h3>   
    <div class="linkRedeSocial">
    <img src="githubLogo.png"><a href ="https://github.com/Retondaro">Github</a></div>

    <img src="linkedin.png"><a href ="https://www.linkedin.com/in/qualidade-quality-ricardo-retondaro-de-almeida">Linkedin</a></div>
    </div>

    <div class="dadosPessoais"><h3>Dados Pessoais</h3>
        <li>Nome: Ricardo Retondaro de Almeida</li>
        <li>Idade: 62 anos</li>
        <li>Nacionalidade: Brasileira</li>
    <div class="Hobbies"><h3>Hobbies:</h3></div>
        <img src="ciclismo.png"></img>
        <img src="praia.png"></img>
        <img src="headphones_icon.png"></img>
    </div>

    <div class="ondeTrabalhei"><h3>Segmentos onde Trabalhei:</h3>
        <h3>Metalúrgico, Automotivo</h3>
            <img src="Pic Dresser.jpg"></img>
            <img src="Pic Cimo.jpg"></img>
            <img src="Pic Tuzzi.jpg"></img>
        <h3>Naval Offshore</h3>    
            <img src="Pic Halliburton.jpg"></img>
            <img src="Pic EAS.jpg"></img>
        <h3>Construção e Montagem</h3>     
            <img src="NDEL pic.png"></img>
            <img src="Pic GDK.jpg"></img>
            <img src="multitek.jpg"></img>
            <img src="Pic Tecnosonda.jpg"></img>
            <img src="Pic Engecampo.jpg"></img> 
    </div>

    <div class="projetos"><h3>Projetos:</h3>
        <li>Barracuda & Caratinga – Conversão e integração FPSO P43
                e integração do FPSO P-43</li>
        <li>Construção de 490 Km gasoduto de 28 pol. da Malha 
            Nordeste II</li>
        <li>Ampliação da estação de gás 
      </div>
</section>

<section class="sobreMim">Sobre mim:>

    <div class="cursos"><h3>Cursos:</h3>
        <a href ="https://www.linkedin.com/in/qualidade-quality-ricardo-retondaro-de-almeida"><h3>Veja relação em meu perfil Linkedin - seção Licenças e Certificações</a></h3>
    </div>

    <div class="softSkils"><h3>Soft Skills:</h3>
        <li>Liderança</li>
        <li>Trabalho em Equipe</li>
    </div>

    <div class="programacao"><h3>Experiência em Programação:</h3>
        <p><a href = https://github.com/Retondaro/Challenge-ONE---Logica-de-Programacao---Decodificador-de-Texto><h3>Encriptador/ Desencriptador de textos</p></a></h3>
    </div>

    <button class="contato-button">Entre em contato</button>
    <div class="entrEmContato"><h3>Entre em contato:</h3>
        <p>Nome</p>
        <p>E-mail</p>
        <p>Assunto</p>
        <p>Mensagem</p>
    </div>   
</section>


</body>
</html>

E este´é o CSS. Parei de desenvolver porque percebi que nada mudava

.perfilProfissional{
    text-align: center;
}
.cabecalho{
    text-align: center;
    color:blue;
    text-transform: uppercase ;
    position: relative;
    width: 940px;
    margin: 0 auto;
}
nav a{
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
}

Mais uma dúvida:

Eu tenho imagens jpg e png de vários tamanhos. Como faço para deixá-las todas em um mesmo tamanho? Seriam espécie de ícones das empresas onde trabalhei , onde estudei, hobbies e linguagens de programação.

Antecipadamente grato

2 respostas
solução!

Olá Ricardo, tudo bem? Para o problema do CSS não estilizar o HTML eu não percebi nada de errado no código, provavelmente o erro está na importação do CSS para o HTML, da uma conferida para ver se você importou corretamente o arquivo CSS dentro do head (verifica se o caminho de pastas está correto, ou se não tem algum erro de digitação ...), caso não resolva, seria legal você mandar prints do seu editor para que fique melhor visualizar toda a estrutura... Já em relação a segunda dúvida sobre as imagens, seria legal você criar uma pasta e colocar as imagens dentro dela, assim seu código irá ficar mais organizado e para importá-las, sobre o tamanho, seria legal atribuir classes às imagens por exemplo <img class='Qualquer nome' src = '...' alt='...' /> assim você consegue selecionar cada imagem de forma única para estiliza-las, mas caso queira deixar todas do mesmo tamanho, basta verificar em que section elas estão e colocar o tamanho usando o height e width. Por exemplo se a imagem estiver dentro do cabecalho usa no CSS: .cabecalho img { height: 100px; width: 100px; } *Os px são da sua escolha ...

Basicamente é isso espero ter resolvido suas dúvidas, qualquer coisa avisa se não resolver...

Resolvi! Em o conteúdo do href eu troquei para ".style.css", e aí o CSS voltou a funcionar. Agora o resto é ir ajustando. E a dica das diversas imagens eu vou testar. Funcionando fica mais fácil fazer os experimentos. Muito obrigado!