Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

HTML testes com pagina alternativa

Boa tarde pessoal, usei os mesmos modelos da página da aula para criar uma página alternativa. O que vocês acham? Vou tentar já iniciar um formulário...Abraço a todos.. Segue o código.

<head>

    <meta charset="UTF-8">
    <title class="tit-princip-central">ASSM Serviços e Consultoria</title>
    <link rel="stylesheet" href="style.css">


</head>    

<body>
    <header>
        <h1 class="titulo-principal">ASSM SERVIÇOS E CONSULTORIA</h1>
    </header>    
    <img id="banner" src="banner.jpg">
    <div class="principal">

        <h2 class="titulo-centralizado">Sobre a ASSM Serviços e Consultoria</h2>

        <p>Localizada na cidade de São Paulo a <strong>ASSM Serviços e Consultoria</strong> traz para o mercado o que há de melhor serviços para otimização de processos de instalação eletrica residencial utilizando ferramentas que garantem otimização de materiais e de tempo na instalação. </p>

        <p>Fundada em 2018, a ASSM já é desempenhou papel importante na melhoria de processos de instalação eletrica em residências na cidade de São Paulo conquistando novos clientes a cada dia.</p>

        <p id="missao" ><em>Nossa missão é: <strong>"Proporcionar 100% de satisfação do cliente com 0% de perdas e 0% de Eventos de Segurança ou Qualidade aos nossos clientes".</strong></em></p>

        <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da prestação de serviço em instalação eletrica residêncial. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>

    </div>

    <div class="beneficios">

        <h3 class="titulo-centralizado">Beneficios</h3>

        <ul>
            <li class="itens"><strong><a href="produtos.html">Produtos</strong></li>
            <li class="itens"><strong>Serviços</strong></li> 
            <li class="itens"><strong>Contatos</strong></li>
            <li class="itens"><strong>Biblioteca Suporte</strong></li>
        </ul>

        <img src="electrician-1080573_1920.jpg" class="imagembeneficios">   
    </div>
</body>

head {

} .tit-princip-central { text-align: center; }

header { background: #CCCCCC; padding: 20px 0; }

}

body {

}

#banner { width:100%; height: 75%; }

.principal { background: #CCCCCC; padding: 30px; } .titulo-principal { padding-left: 20px; } .titulo-centralizado { text-align: center }

p { text-align: center; }

#missao { font-size:20px }

em strong { color: #FF0000; }

.itens { font-size:20px; font-style: italic;

}

.beneficios { background: #FFFFFFF; padding: 20px; }

ul { display: inline-block; vertical-align: top; width:20%; margin-right: 15%;

}

.imagembeneficios { width: 50%; height: 80%; }

</head>
<body>
    <header>
        <div class="caixa">                           
            <h1><img src="electrician-3946810_640.jpg"></h1>

            <nav>    
                 <ul> 
                     <li><a href="index.html">Home</a></li>
                     <li><a href="produtos.html">Produtos</a></li>
                     <li><a href="servicos.html">Serviços</a></li>
                     <li><a href="contatos.html">Contato</a></li>
                </ul>
            </nav>
        </div>    
    </header>

    <main>
        <ul class="produtos"> 
            <li>
                <h2>Instalações</h2>
                <img src="power-failure-7557626_640.png">
                <p class="detalhe-descricao">Dimensionamento, Projetos de Instalaçãoes eletricas.</p>
                <p class="detalhe">Orçamentos on line</p>    
            </li>
            <li>
                <h2>Desenvolvimento</h2>
                <img src="mobile-2795310_640.png">
                <p class="detalhe-descricao">Desenvolvimento aplicativos de controle de demanda eletrica</p>
                <p class="detalhe">Análise de falhas</p>    
            </li>
            <li>
                <h2>Retrofit</h2>
                <img src="brainstorming-6610965_640.png">
                <p class="detalhe-descricao">Modernização de paineis elétricos e redimensionamento componentes</p>
                <p class="detalhe">Economia de energia</p>    

            </li>
        </ul>
    </main>

    <footer>
        <img src="computer-3655479_640.png">
        <p class="copyright">&copy; Copyright ASSM Serviços e Consultoria - 2022
    </footer>
</body>    
1 resposta
solução!

Oi Antonio, tudo bem?

Muito legal que você está praticando enquanto faz o curso, essa parte é super importante para a consolidação do seu conhecimento :D

Obrigada por compartilhar com a gente o seu projeto! Indico que, quando terminar, você poste nas suas redes sociais e marque a Alura.

Continue os bons estudos.

Um abraço.