2
respostas

CSS não aplica no segundo item

Estou tentando aplicar uma estilização em alguns elementos, porém o segundo elementa sempre ta bugando e não aplica o estilo. Sou iniciante e to praticando css e html, não consigo encontrar oq ta errado de jeito nenhum.

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>Aluguel de Empilhadeira - LocFran</title>
    <link rel="stylesheet" href="./CSS/reset.css">
    <link rel="stylesheet" href="./CSS/cabecalho.css">
    <link rel="stylesheet" href="./CSS/menu/menu-item.css">
    <link rel="stylesheet" href="./CSS/menu/menu.css">
    <link rel="stylesheet" href="./CSS/menu/menu-navegacao.css">
    <link rel="stylesheet" href="./CSS/menu/menu-logo.css">
    <link rel="stylesheet" href="./CSS/base.css">
    <link rel="stylesheet" href="./CSS/menu/menu-itens.css">
    <link rel="stylesheet" href="./CSS/menu/link-inicio.css">
    <link rel="stylesheet" href="./CSS/principal.css">
    <link rel="stylesheet" href="./CSS/principais/principal-servicos.css">
    <link rel="stylesheet" href="./CSS/principais/principal-titulo.css">
    <link rel="stylesheet" href="./CSS/servicos/servico-descricao.css">
    <link rel="stylesheet" href="./CSS/servicos/servico-imagem.css">
    <link rel="stylesheet" href="./CSS/servicos/servico-titulo.css">
    <link rel="stylesheet" href="./CSS/servicos/servico-conteudo.css">
    <link rel="stylesheet" href="./CSS/servicos/servico-ofertado.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;900&family=Montserrat:wght@300;400;700&family=Open+Sans:wght@300;400&display=swap" rel="stylesheet">
</head>
<body class="corpo">
    <header class="cabecalho">
        <section class="menu">
            <nav class="menu__navecacao">
                <a class="link__inicio" href="#">
                    <img src="./imagens/Logo-locfran.jpeg" alt="Imagem da Logo LocFran" class="menu__logo">
                    Loc Fran
                </a>
                <ul class="menu__itens">
                    <li class="menu__item"><a href="#" class="menu__link">início</a></li>
                    <li class="menu__item"><a href="#" class="menu__link">serviços</a></li>
                    <li class="menu__item"><a href="#" class="menu__link">sobre</a></li>
                    <li class="menu__item"><a href="#" class="menu__link">contato</a></li>
                </ul>
            </nav>

        </section>

    </header>
    <main class="principal">
        <section class="principal__servicos">
            <h2 class="servicos__titulo">Nossos Serviços</h2>
            <div class="servico-ofertado">
                <div class="servico__conteudo">
                    <div class="caixa__imagem"><img src="./imagens/empilhadeira1.png" alt="Imagem de uma empilhadeira" class="servico__imagem"></div>                   
                    <p class="servico__descricao">Trabalhamos com locação de empilhadeira para descarregamento com agilidade, com qualidade, responsabilidade e os melhores preços no mercado.</p>
                </div>
                <div class="servico__conteudo">
                    <div class="caixa__imagem"><img src="./imagens/conversa-cliente.jpg" alt="Conversa com o cliente" class="servico__imagem"></div>
                    <p class="servico__descricao">Buscamos sempre atender o cliente de acordo com a sua necessidade.</p>
                </div>
                <div class="servico__conteudo">
                    <div class="caixa__imagem"><img src="./imagens/paleteira1.png" alt="Imagem de uma paleteira" class="servico__imagem"></div>
                    <p class="servico__descricao">Dispomos para o serviço: locação de empilhadeira, translado em reboque, operador e gás, além de outras ferramentas se necessário, como: alongador de garfo, paleteira manual, entre outros.</p>
                </div>
            </div>


        </section>


    </main>

    <footer>

    </footer>

</body>
</html>
2 respostas

CSS

.servico__imagem{
    height: 300px;
    width: 400px;
}

.caixa__imagem{
    border-radius: 5px;
    box-shadow: 0 5px 5px #000000;
    height: 300px;
    margin-right: 1rem;
    width: 400px;
}

Olá Afrânio, tudo bem contigo?

Bom primeiramente eu gostaria de pedir minhas mais sinceras desculpas pela demora em obter um retorno!

Sobre o seu projeto, infelizmente eu não vou conseguir lhe ajudar no momento, pois eu não tenho acesso ao seu projeto completo, isso visto que eu não tenho acesso as imagens utilizadas por você e nem todos os arquivos .css que você utilizou no seu projeto e que eu posso ver que existem por conta dessa referencia deles na tag <head> do seu projeto:

    <link rel="stylesheet" href="./CSS/reset.css">
    <link rel="stylesheet" href="./CSS/cabecalho.css">
    <link rel="stylesheet" href="./CSS/menu/menu-item.css">
    <link rel="stylesheet" href="./CSS/menu/menu.css">
    <link rel="stylesheet" href="./CSS/menu/menu-navegacao.css">
    <link rel="stylesheet" href="./CSS/menu/menu-logo.css">
    <link rel="stylesheet" href="./CSS/base.css">
    <link rel="stylesheet" href="./CSS/menu/menu-itens.css">
    <link rel="stylesheet" href="./CSS/menu/link-inicio.css">
    <link rel="stylesheet" href="./CSS/principal.css">
    <link rel="stylesheet" href="./CSS/principais/principal-servicos.css">
    <link rel="stylesheet" href="./CSS/principais/principal-titulo.css">
    <link rel="stylesheet" href="./CSS/servicos/servico-descricao.css">
    <link rel="stylesheet" href="./CSS/servicos/servico-imagem.css">
    <link rel="stylesheet" href="./CSS/servicos/servico-titulo.css">
    <link rel="stylesheet" href="./CSS/servicos/servico-conteudo.css">
    <link rel="stylesheet" href="./CSS/servicos/servico-ofertado.css">

Então eu gostaria que se possível você colocasse o seu projeto completo com as imagens e arquivos css no GitHub para que eu tenha acesso a eles e testar aqui para poder lhe ajudar.

Se possível eu gostaria que você explicassem exatamente o que você quer que seja feito em seu projeto, para mim poder ter um direcionamento melhor e saber o que fazer.

Em suma era isso, caso precise estarei aqui.

Aguardo seu retorno e bons estudos!