Untitled

<!DOCTYPE html>
<html>
<head>

    <Title>Joker Clean</Title>

    </head>

<Body>


    <style>
        *{
        margin: 0;
        padding: 0;
        }

        .menu {
                width: 100;
                height: 50px;
                background-color: #222;
                font-family: "Comic Sans";
                position: relative}

        .menu ul{
            list-style: none;
            position: relative;}

        .menu ul li{
            width: 150px;
            float: left;
            border-bottom: 1px ;
            border-bottom-color: #ffff

        }
        Header{

            padding-top: 200px;


        }


        .menu a {
            padding: 15px;
            display: block;
            text-decoration: none;
            text-align: center;
            background-color: #222;
            color: #fff}
        .menu a:hover {
            background-color: #2db146;
            color: #555;


        }

        .menu ul ul{
            position: absolute;
            visibility: hidden;}

        .menu ul li:hover ul{
            visibility: visible;


        }

        .menu ul ul li{
            float: none;
            border-bottom: solid 1px #ccc;}

        header {text-align: center;
            background-image: url(Usina.jpg);
            background-position: center;
            padding-bottom: 200px;
             position: relative;}


        }


    </style>


    <nav class="menu">
       <ul>

        <li> <a href="#">Sobre</a></li>
    <li><a href="#">Produto</a>
        <ul>
           <li><a href="#">Apresentação</a></li>
             <li><a href="#">Composição</a></li>
             <li><a href="#">Indicação</a></li>
             <li><a href="#">Uso</a></li>
            </ul>
           </li>


           </ul>
       <ul>

         <Li> <a href="#">Contato</a></Li>

        </ul>
    </nav>

    <header>

    <h1> Joker Clean</h1>
        <p> Texto Apresentativo</p>
        <a href="#">Ver Mais</a>
        </header>
    <section>
        <h2>Sobre </h2>
         <p> Texto Apresentativo2 </p>
        <a href="#">Entre em contato</a>

    </section>

      <Section>
        <h2> Produto</h2>
          <img src="Joker.png" alt=Produto Joker>
    </Section>
    <Section>

        <h3> Apresentação</h3>
        <img src="seo-social-web-network-internet_232_icon-icons.com_61542.png">
        <p> Líqüido pouco viscoso, amarelo e transparente, com agradável aroma cítrico. Acondicionado em caixas de papelão contendo 4 bombonas de 5 litros ou em bombonas de 50 litros.</p>

        <h3> Composição </h3>
        <img src="1473947361.png">
        <p>Tensoativos não iônicos, trietileno tetramina,acetato de sódio e potássio, propileno glicol e conservante em meio aquoso.</p>

        <h3> Indicações </h3>
         <img src="limpeza.png">
       <p>JOKER pode ser usado conforme as instruções de uso sobre quaisquer superfícies laváveis.   Especialmente indicado na limpeza de vidros, azulejos, plásticos, pedras,cimento,borracha, mármore, cerâmicas, granilites,rodapés, peças sanitárias, paredes, superfícies pintadas, armários, enfim em praticamente todas as tarefas de limpeza em empresas, indústrias, hospitais, “Shoppings”, escritórios e restaurantes.</p>

        <h3> Uso </h3>
        <img src="android-hand_icon-icons.com_50519.png">
        <p>Aplicar JOKER puro ou diluído, sobre a superfície a ser limpa utilizando pano ou pulverizador, aguardar tempo para a atuação (de 10 segundos a 3 minutos) esfregar, se necessário, enxaguar com água ou pano umedecido. Deve ser usado puro ou em diluições menores na linha industrial, em limpeza mais leve pode ser diluído até 1:40.</p>
             </Section>
    <Section>

     <h2>Contato</h2>
<p>Entre em contato conosco</p>
    <img href="TELEFONE.png" alt=Telefone>
    <p> <a href="Tel:11941424942"> (11) 94142-4942</a></p>

    <p> Ou mande-nos um e-mail</p>
        <img href="da1f99_7ab5b21d06dd49359db71ced7ce5c323.png" alt=E-mail>
        <p> <a href="mailto:bimoralles@gmail.com"> bimoralles@gmail.com</a></p>

        <h4> Site Criado por Gabriel Moralles </h4>
        <p> Entre em contato</p>
    <p> <a href="mailto:bimoralles@gmail.com"> bimoralles@gmail.com</a></p>


    </Section>


    </Body>
</html>