Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.

Pesquisar na Comunidade

Mostrando resultados para as tags ''CSS''.



Mais opções de pesquisa

  • Pesquisar por Tags

    Digite tags separadas por vírgulas
  • Pesquisar por Autor

Tipo de Conteúdo


Categorias

  • Armazenamento
  • Áudio
  • Energia
  • Entrada
  • Feiras e Eventos
  • Gabinetes
  • Memória
  • Museu
  • Placas-mãe
  • Portáteis
  • Processadores
  • Programas
  • Rádio CdH
  • Redes
  • Refrigeração
  • Smartphones
  • Tablets
  • Vídeo
  • Outros

Categorias

  • Blog

Categorias

  • Armazenamento
  • Áudio
  • Câmeras
  • Computadores
  • Consoles
  • Eletrônicos
  • Energia
  • Entrada
  • Gabinetes
  • Impressão
  • Jogos
  • Memória
  • Placas-mãe
  • Portáteis
  • Processadores
  • Programas
  • Redes
  • Refrigeração
  • Smartphones
  • Tablets
  • Vídeo
  • Outros

Categorias

  • Livros disponíveis
  • Livros esgotados

Categorias

  • Cursos

Fóruns

  • Mensagens do Clube do Hardware
    • Regras gerais
    • Boletins do Clube do Hardware
    • Notícias da administração
  • Hardware
    • Recomendações de computadores
    • Placas de vídeo
    • Placas-mãe e chipsets
    • Processadores
    • Problemas de gargalo e desempenho
    • Memórias
    • Armazenamento
    • Refrigeração e superaquecimento
    • Fontes e energia
    • Gabinetes e casemods
    • Placas de som e áudio on-board
    • Periféricos
    • Mac
    • Overclock
    • Hardware - outros
  • Computação móvel
    • Notebooks
    • Tablets
    • Smartphones e apps
  • Redes e Internet
    • Redes e Internet
    • Hospedagem de sites e registro de domínios
  • Segurança da informação
    • Remoção de malware
    • Dúvidas sobre invasões e infecções
    • Programas de proteção
  • Programação e desenvolvimento
    • Java
    • C/C#/C++
    • Pascal/Delphi
    • .NET
    • Bancos de dados
    • Programação web
    • Programação - iniciantes
    • Programação de microcontroladores
    • Programação - outros
  • Software
    • Jogos
    • Pacotes de escritório
    • Computação distribuída (Folding@Home, Bitcoin etc.)
    • Virtualização
    • Design, animação e tratamento de imagens
    • Edição de áudio e vídeo
    • Programas
  • Sistemas Operacionais
    • Recomendação de sistemas operacionais
    • Windows
    • GNU/Linux, BSD, Unix-like e software livre
    • Mac OS
  • Eletrônicos
    • Equipamentos de som, home theaters e gravadores de mesa
    • Televisores e projetores
    • Câmeras e filmadoras
    • Players portáteis
    • Consoles (videogames)
    • GPS
    • Telefonia fixa
    • Eletrônica
    • Retrocomputação
  • Outros
    • Recomendações de serviços e lojas
    • Preços e promoções
    • Notícias
    • Bolsa de empregos, certificações e mercado de trabalho
    • "Causos"
    • Encontros de usuários
    • Feira do Rolo
  • Clube do Hardware
    • Comentários, elogios, críticas, sugestões e questões sobre o Clube do Hardware
    • Comentários de artigos
    • Fórum para testes de funcionalidades

Categorias

  • Hardware
  • Redes
  • Eletrônica
  • Sistemas operacionais

Encontrado 39 registros

  1. Sou iniciante e estou usando media queries,mais nn deu mt certo se alguém puder ajudar (código abaixo) <link type="text/css" rel="stylesheet" href="../geek c.css" media="screen and (color)"> <!--DESKTOP --> <link rel="stylesheet" href="cell.css" media="screen and (max-width: 720px) and (orientation: landscape)"><!--CELULAR VERTICAL --> <link rel="stylesheet" href="geek c.css" media="screen and (max-width: 1280px) and (orientation: portrait)"<!--CELULAR NA HORIZONTAL--> link do site(http://batcaverna.000webhostapp.com/HTML/Games-games.html)
  2. Boa tarde, estou aprofundando meus conhecimentos em desenvolvimento web, pois quero me candidatar a vagas de desenvolvimento web junior, estou com uma dúvida muito boba e a questão é desenvolvedores necessitam saber usar editores de foto (Photoshop, CorelDRAW) ? Agradeço desde já!
  3. Eu facilmente consigo deixar o texto dentro da imagem, sq n consigo fixar esse texto exatamente na parte inferior da imagem de um jeito que fique na parte inferior mesmo se for mobile.
  4. Estou tentando colocar inset na imagem através do css, só que não funciona primeiro pensei que era por causa que estava tentando fazer em um slide em js, mas mesmo quando separo uma imagem no meio do código o inset não funciona, já tentei colocar inset em uma 'div' separada e user z-index para q essa 'div' sobre ponha a imagem, também não funcionou... <?php $path = "upload/artigo/" ?> <div class="carousel carousel-slider center" data-indicators="true" style="margin-top: 30px;"> <?php $rs = $con->query("SELECT * FROM artigos ORDER BY titulo ASC"); while($linha = $rs->fetch(PDO::FETCH_OBJ)){ $image = $linha->image; $titulo = $linha->titulo; ?> <div class="carousel-item red white-text" style="width: 34%; height: 350px; min-height: 0;" href="#!"> <h2 class="" style="position: absolute; "><?=$titulo?></h2> <img class="slider-image" style="height: 350px; border-right: thin black solid; border-left: thin black solid; box-shadow: inset 0px -42px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD; -webkit-box-shadow: inset 0px -42px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD; -moz-box-shadow: inset 0px -42px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD; -o-box-shadow: inset 0px -42px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD; z-index: 99999;" src="<?=$path . $image?>"> </div> <?php } ?> </div>
  5. Pessoal, boa noite!! estou com um problema um pouco estranho do meu ponto de vista, estou montando um site para o negocio da familia, nada grande e bem simples. https://moreirasbuffet.com/ o problema e com o tamanho de algumas fontes na pagina, que na maioria dos pc fica bem configurado, mas quando visualizo o site em qualquer navegador no ubuntu, as fontes ficam maiores que deveriam fazendo o layout fica bagunçado. ja testei em varios pcs e com varios OS e varios navegadores, so acontece com o Ubuntu. Segue trecho do meu css q mais da problemas. .coluna_rodape { height: 100%; width: 330px; background-color: #F2F2F2; position: relative; float: left; margin-right: 5px; margin-left: 5px; border-radius: 5px; margin-top: 20px; } .coluna_rodape #citacao { font-family: "Palace script MT"; position: absolute; bottom: 20; text-align: center; font-size: 34px; /* FONT_SIZE ERROR */ padding-left: 10px; font-weight: bold; }
  6. Olá pessoal, estou com um erro ocorrendo em uma página, que acredito ser de sintaxe. Não fui eu quem programei a página, só estou tentando corrigir, pois o suporte deles é fraco. Acredito ser em Razor/MVC3, nem sei como descobri isso direito. O código é este abaixo: <nav id="nav-home-banner" class="banner"> <ul> @foreach (var ban in (List<Info>)ViewBag.Home.Banner) { string link = !string.IsNullOrWhiteSpace(ban.Subtitulo) ? "onclick=\"location='" + ban.Subtitulo + "';\"" : string.Empty; <li style="background: url('@Url.Content("~/Content/Uploads/Info/" + ban.Codigo + ".jpg")') no-repeat center 0px" title="@ban.Titulo" @Html.Raw(link)><a href="@Html.Raw(link)" class="absolute oxygen-light" title="Saiba mais">@Html.Raw(portugues ? "[ Saiba Mais ]" : "[ Aprender Más ]")</a></li> } </ul> </nav> O que acontece: No adm do site eu posso cadastrar as informações que aparecem neste banner rotativo e inserir o link, que se alterna conforme a imagem muda. Pois bem, se eu colocar um link ele simplesmente não funciona e vai para a página de erro404. O detalhe que me levou a pensar ser erro de sintaxe é que o caminho aponta para: www.meusite.com.br/onclick=\ Se eu deixo o campo de link em branco ele fica voltando para a home, sem erro, mas fica um banner praticamente inútil. Alguém sabe onde pode ser o erro? Eu não encontrei código similar para estudar. Agradeço desde já.
  7. Bom, quero mudar o título mas não estou conseguindo. Estou assistindo umas vídeo aulas, e parei em um ponto onde não consigo trocar a fonte do h1. Usei o método de pegar uma fonte externa do Google, e interna com a propriedade @font-face. Agora tentei passei o h1 para h2 e, o que estava como h2 para h3 e funcionou, alguém sabe me explicar, por favor? Aqui estão os códigos do HTML e do CSS: HTML: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"/> <title>Tudo sobre Google Glass</title> <link href="https://fonts.googleapis.com/css?family=Bubblegum+Sans" rel="stylesheet"> <link rel="stylesheet" href="_css/estilo.css"> </head> <body> <div id="interface"> <header id="cabecalho"> <hgroup> <h1>Google Glass</h1> <h2>A revolução do Google está chegando</h2> </hgroup> CSS: body{ background-color: #dddddd; color: rgba(0,0,0,1); } #cabecalho{ border-bottom: 1px #606060 solid; height: 150px; background: url(../_imagens/glass-logo-peq.jpg) no-repeat 0px 80px; } #cabecalho h2{ font-family: 'Bubblegum Sans', cursive; font-size: 30pt; color: #888888; font-size: 15pt; margin-top: 0px; padding: 0px; } #cabecalho h1{ font-family: 'Bubblegum Sans', cursive; margin-bottom: 0px; text-shadow: 1px 1px 1px rgba(0,0,0,0.6) padding: 0px; }
  8. Olá pessoal, tudo bem com vocês? Venho aqui pedir a ajuda com vocês sobre a utilização de um Multi Select disponível no seguinte endereço: http://wenzhixin.net.cn/p/multiple-select Pois bem, estou utilizando o Multi Select The Filter1 [Figura 01], porém eu preciso remover o botão de expandir ele, e deixá-lo sempre aberto, como no examplo da Figura 02, porém com os checkbox inclusos. Lembrando que os .JS e .CSS estão disponíveis no link acima. Figura 01: Figura 02:
  9. Olá, Boa Tarde. Estou com um problema. Sou nova com relação ao uso do framework bootstrap. Baixei a versão 3.3.7. Ao abrir o arquivo bootstrap.min.css no editor Atom, ele fica todo bagunçado e não consigo identificar as tags. Alguém sabe como arrumar o arquivo para ficar bem legível?
  10. Estou tendo problemas em alinhar o primeiro link do menu igual aos outros e também estou com um problema de alinhamento entre um campo de email e um botão da minha newsletter. Alguém poderia me ajudar a arrumar esses problemas. <!-- Topo do site --> <section class="topodosite"> <div class="logomarca"> <img src="_imagens/logomarcaempresa.jpg" alt="LogoMarcadaempresa"> </div> <nav class="menu"> <a href="#" id="botaomenu" class="btn-menu"><i class="faz fa-bars fa-lg"></i></a> <ul class="menunavegacaoprincipal"> <li><a href="">Home</a></li> <li><a href="">Empresa</a></li> <li><a href="">Serviços</a></li> <li><a href="">Blog</a></li> <li><a href="">Projeto</a></li> <li><a href=""><span>Nossos</span> Produtos</a></li> <li><a href="">Contato</a></li> </ul> </nav> </section> <!-- Newsletter do site --> <div class="newsletter"> <h1>Newsletter</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> <form action=""> <input type="email" placeholder="Digite seu email!"> <button type="submit"><i class="faz fa-paper-plane"></i></button> </form> </div> /* Código css visitando um aparelho que possua um laergura de 320px*/ /* Topo do site */ .topodosite{ width:100%; height:160px; margin:0 auto; background-color: #f8f8f8; display: flex; flex-direction: row; flex-wrap:wrap; justify-content: space-between; align-items: center; position: relative; } .logomarca{ width:60%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; float: left; margin-left: 20px; } /* Menu de navegação principal do topo do site*/ /*Mostra o botão de abrir e fechar o menu do mouse na menor versão de dispositivo possível*/ .btn-menu{ width:46px; height:46px; font-size: 1.2em; border: 1px solid rgba(0,0,0,0.50); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; margin-bottom: 4%; color: #45c4e9; background-color: rgba(255,255,255,1); margin-right: 20px; float: right; } .menunavegacaoprincipal{ width:100%; height:auto; display:none; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; position:absolute; top:160px; left:0; padding: 5% 5%; background-color:#f8f8f8; overflow: auto; z-index: 999; } .menunavegacaoprincipal li{ width:100%; height: auto; border:0.5px solid rgba(255,255,255,1); } .menunavegacaoprincipal li a{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; color: rgba(0,0,0,1); background-color:#45c4e9; padding: 3%; font-size: 1.7em; } .menunavegacaoprincipal li a:hover{ color:rgb(255,255,255); } /* Newsletter do site */ .newsletter{ width:100%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: center; align-content: center; } .newsletter h1{ width:100%; font-size:36px; } .newsletter form{ width:100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 10% 0; text-align: left; } .newsletter form input{ width:80%; height:46px; background-color: rgb(255,255,255); } .newsletter form button{ width:20%; height:46px; color:rgb(255,255,255); background-color: #45c4e9; border:none; font-size: 14px; } .newsletter form button:hover{ width:20%; height:46px; color:rgb(255,255,255); background-color: #424141; border:none; font-size: 14px; cursor: pointer; } @media only screen and (min-width: 1024px) { /* Topo do site */ .topodosite{ width:90%; height: 100px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; } .logomarca{ width:200px; margin-left: 10px; } .logomarca img{ width: 100%; } .menu{ height: 100%; } .menunavegacaoprincipal{ height:100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: none; align-items: center; } .menunavegacaoprincipal li { height: 100px; width: auto; } .menunavegacaoprincipal li:first-child { margin-left: 0; } .menunavegacaoprincipal li:last-child { margin-right:0; } .menunavegacaoprincipal li a{ width: auto; height: 100px; } .menunavegacaoprincipal li a:first-child{ margin: none; } }
  11. Eu comecei contruindo um site para celular utilizando um @media only screen and (max-device-width:320px){ } para smartphones. Quando fui desenvolver para Desktop ele continuou aplicando alguns dos efeitos do media queria acima, mesmo a resolução do dispositivo sendo maior. (Eu utilizei a ferramenta de desenvolvedor do Google Chhrome para testar a resolução da tela). Quando tentava adaptar o site para o Desketop alguns efeitos eram aplicados e outros não(ficou uma bagunça). Alguém poderia me ajudar? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Página Inicial do site</title> <!-- Estilo da página inicial do site --> <!--<link rel="stylesheet" href="_css/index.css">--> <link rel="stylesheet" href="_css/index.css"> <!-- Ícones usados no site --> <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> <!-- Biblioteca JS w3.js --> <script src="https://www.w3schools.com/lib/w3.js"></script> <!-- Biblioteca Jquery --> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> </head> <body> <!--================== CORPO DOCUMENTO HTML ==================--> <!-- ÂNCORA PARA TRAZER ATÉ O TOPO DA PÁGINA --> <a name="topo"></a> <!-- Div que conterá todas as partes do site --> <div id="layout"> <header class="header"> <p> <span><i class="far fa-envelope"></i></span>emaildaempresa@servidor.com </p> <p> <span><i class="faz fa-phone-volume"> </i></span>Telefone: (00) 0000-0000 </p> <p class="destaque"> Fique conectado conosco: <span class="icones_header"> <a href=""><i class="fab fa-twitter"></i></a> <a href=""><i class="fab fa-facebook-f"></i></a> <a href=""><i class="fab fa-google-plus-g"></i></a> <a href=""><i class="fab fa-linkedin-in"></i></a> </span> </p> </header> <section class="topodosite"> <div class="logomarca"> <h1>Logo Marca</h1> </div> <nav class="menu"> <a href="#" id="botaomenu" class="btn-menu"><i class="faz fa-bars fa-lg"></i></a> <ul id="imenu"> <li><a href="">Home</a></li> <li><a href="">Empresa</a></li> <li><a href="">Serviços</a></li> <li><a href="">Blog</a></li> <li><a href="">Projeto</a></li> <li><a href="">Nossos Produtos</a></li> <li><a href="">Contato</a></li> </ul> </nav> </section> <section class="slideimagens"> <img class="slide" src="https://cdn.pixabay.com/photo/2017/01/16/23/10/snow-leopard-1985510_1280.jpg" alt="Legenda da primeira imagem"> <img class="slide" src="https://cdn.pixabay.com/photo/2018/02/16/22/08/bird-3158784_1280.jpg" alt="Legenda da segundo imagem"> <img class="slide" src="https://cdn.pixabay.com/photo/2018/02/09/21/46/rose-3142529_1280.jpg" alt="Legenda da terceira imagem"> <div class="botoesslideshow"> <button class="esquerdo" onclick="meuslideshow.previous()"><</button> <button class="direito" onclick="meuslideshow.next()">></button> </div> <!-- Efeito de SlideShow com biblioteca w3.js--> <script> var meuslideshow = w3.slideshow(".slide", 0); </script> </section> <section class="conteudo"> <div class="mensagem-boas-vindas bg-white"> <article> <header> <h1>Bem-Vindos</h1> </header> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </article> </div> <!--Artigos Empresa--> <section class="artigos_empresa bg-white"> <article class="artigo"> <img src="https://cdn.pixabay.com/photo/2017/01/16/23/10/snow-leopard-1985510_1280.jpg" alt=""> <div> <a><h1>titulo1</h1></a> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </article> <article class="artigo"> <img src="https://cdn.pixabay.com/photo/2017/01/16/23/10/snow-leopard-1985510_1280.jpg" alt=""> <div> <h1>titulo2</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </article> <article class="artigo"> <img src="https://cdn.pixabay.com/photo/2017/01/16/23/10/snow-leopard-1985510_1280.jpg" alt=""> <div> <h1>titulo2</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </article> </section> </section> <!-- Área de slides dos serviços oferecidos pela empresa --> <section class="slideservicos"> <h1>Nossos Serviços <div class="controles_slide_servicos"> <button onclick="slideshowservicos.previous()"><</button> <button onclick="slideshowservicos.next()">></button> </div> </h1> <hr> <div class="servicos"> <article class="servico"> <header> <span><i class="far fa-chart-bar"></i></span> <h1>Nome Serviço</h1> </header> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <a href="">Leia Mais</a> </article> <article class="servico"> <header> <span><i class="fab fa-accusoft"></i> </span> <h1>Nome Serviço2</h1> </header> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <a href="">LEIA MAIS</a> </article> </div> <script> /* Efeito que cria o slide show com todos os elementos que possuem a classe .servico */ var slideshowservicos = w3.slideshow(".servico", ); </script> </div> </section> <section class="nossaempresa BGwhite"> <article> <h1>Sobre nossa empresa</h1> <img src="https://cdn.pixabay.com/photo/2018/03/06/21/09/easter-3204589_1280.jpg" alt=""> <h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <h3 class="diferente">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <a href="#" title="informações sobre a empresa"> READ MORE</a> <div class="vantagens_empresa"> <article class="vantagem"> <header> <span><i class="faz fa-rocket"></i></span> <h3>Muita Experiência</h3> </header> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </article> <article class="vantagem"> <header> <span><i class="faz fa-rocket"></i></span> <h3>Trabalhos Inovadores</h3> </header> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </article> <article class="vantagem"> <header> <span><i class="faz fa-rocket"></i></span> <h3>Empresa Certificada</h3> </header> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </article> </div> </article> </section> <!-- Informações de contato da empresa --> <section class="detalhesdecontato bg-black"> <div class="infocontato"> <h1>Detalhes de Contato</h1> <p class="cordiferente">Escolha uma das formas de contato abaixo e por favor entre em contato conosco.</p> <p><span><i class="faz fa-phone-volume"></i></span>Telefone: (00) 0000-0000</p> <p><span><i class="faz fa-at"></i></span>Email@servidor.com.br</p> <p><span><i class="faz fa-compass"></i></span>Rua, Cidade, pais</p> </div> <form action="#" method="POST" class="formulariocontatoprincipal"> <h1>Esclareça alguma dúvida conosco.</h1> <input type="text" placeholder="Nome*" required id="nomecliente"/> <input type="tel" id="numerotelefonecliente" placeholder="Telefone*" required/> <input type="email" placeholder="Email*" id="emailcliente" required/> <input type="text" placeholder="Assunto*" required id="escolhaassuntocliente" list="listaassuntos"/> <datalist id="listaassuntos"> <option value="Assunto1"></option> <option value="Assunto2"></option> <option value="Assunto3"></option> <option value="Assunto4"></option> <option value="Assunto5"></option> </datalist> <input type="submit" id="botaoenviarmensagem" value="Enviar Agora"/> </form> </section> <!-- úLTIMAS POSTAGENS DO BLOG--> <section class="ultimas_postagens_blog BGwhite"> <h1>últimas postagem do blog</h1> <div class="conteiner_ultimas_postagens_blog"> <article class="ultima_postagem_blog"> <header><img src="https://cdn.pixabay.com/photo/2018/01/31/09/42/people-3120717_1280.jpg" alt=""> <h5 class="data_postagem">17 Março</h5> </header> <div><h3>By Admin | Categoria</h3></div> <a href=""><h3>Título da postagem</h3></a> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <footer class="rodape_ultima_postagem_blog"> <a href="#" title="Leia mais...">Leia Mais</a> <a href="#" title="comentários da postagem"><span><i class="far fa-comments"></i></span>Comentários</a> </footer> </article> <article class="ultima_postagem_blog"> <header><img src="https://cdn.pixabay.com/photo/2018/01/31/09/42/people-3120717_1280.jpg" alt=""> <h5 class="data_postagem">17 Março</h5> </header> <div><h3>By Admin | Categoria</h3></div> <a href=""><h3>Título da postagem</h3></a> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <footer class="rodape_ultima_postagem_blog"> <a href="#" title="Leia mais...">Leia Mais</a> <a href="#" title="comentários da postagem"><span><i class="far fa-comments"></i></span>Comentários</a> </footer> </article> <article class="ultima_postagem_blog"> <header><img src="https://cdn.pixabay.com/photo/2018/01/31/09/42/people-3120717_1280.jpg" alt=""> <h5 class="data_postagem">17 Março</h5> </header> <div><h3>By Admin | Categoria</h3></div> <a href=""><h3>Título da postagem</h3></a> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <footer class="rodape_ultima_postagem_blog"> <a href="#" title="Leia mais...">Leia Mais</a> <a href="#" title="comentários da postagem"><span><i class="far fa-comments"></i></span>Comentários</a> </footer> </article> </div> </section> <!-- últimos projetos feitos pela empresa --> <section class="ultimos_projetos_empresa BGcinzaclaro"> <h1>últimos Projetos</h1> <div class="galeria_ultimos_projetos_empresa"> <a href=""><img src="https://cdn.pixabay.com/photo/2018/03/10/09/45/businessman-3213659_1280.jpg" alt=""></a> <a href=""><img src="https://cdn.pixabay.com/photo/2018/03/10/09/49/city-3213676_1280.jpg" alt=""></a> <a href=""><img src="https://cdn.pixabay.com/photo/2017/10/27/00/53/ghost-2892905_1280.jpg" alt=""></a> <a href=""><img src="https://cdn.pixabay.com/photo/2018/03/10/09/45/businessman-3213659_1280.jpg" alt=""></a> <a href=""><img src="https://cdn.pixabay.com/photo/2017/10/27/00/53/ghost-2892905_1280.jpg" alt=""></a> <a href=""><img src="https://cdn.pixabay.com/photo/2018/03/10/09/45/businessman-3213659_1280.jpg" alt=""></a> </div> <!-- Questões Frequentes sobre a empresa --> <section class="perguntasfrequentes BGcinzaclaro"> <h1>Perguntas Frequentes</h1> <hr> <div onclick="efeitosanfona(1);"> <h4 onclick="efeitosanfona(1);" ><span onclick="efeitosanfona(1);"><i class="faz fa-plus-circle"></i></span> Título Pergunta Frequ</h4> <div id="divalvo1"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </div> <div onclick="efeitosanfona(2);"> <h4 onclick="efeitosanfona(2);"><span onclick="efeitosanfona(2);" ><i class="faz fa-plus-circle"></i></span> Título Pergunta Frequ</h4> <div id="divalvo2"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </div> <div onclick="efeitosanfona(3);"> <h4 onclick="efeitosanfona(3);"><span onclick="efeitosanfona(3);"><i class="faz fa-plus-circle"></i></span> Título Pergunta Frequ</h4> <div id="divalvo3"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </div> <script> /* Efeito sanfona nas perguntas frequentes */ function efeitosanfona(FAQ){ switch(FAQ){ case 1: $("#divalvo1").toggle(); break; case 2: $("#divalvo2").toggle(); break; case 3: $("#divalvo3").toggle(); break; } </script> </section> </section> <section class="slide_parceiros"> <h1> Parceiros <div class="controles_slide_parceiros"> <button onclick="slideParceiros.previous()"><</button> <button onclick="slideParceiros.next()">></button> </div> </h1> <hr> <div class="banner_parceiro"> <a href="" class="parceiro_empresa"><img src="https://cdn.pixabay.com/photo/2018/03/13/02/43/eye-3221498_1280.jpg" alt="" class="bannerparceiro"></a> <a href="" class="parceiro_empresa"><img src="https://pixabay.com/pt/coruja-neve-coruja-da-neve-bird-3184032/" alt="" class="bannerparceiro"></a> <a href="" class="parceiro_empresa"><img src="https://cdn.pixabay.com/photo/2018/03/08/04/18/waters-3207802__480.jpg" alt="" class="bannerparceiro"></a> </div> <script> var slideParceiros = w3.slideshow(".bannerparceiro", 0); </script> </section> <!-- Rodape do site --> <footer class="rodapedosite"> <img src="" alt="LogoMarcaEmpresa"> <p>Um pouco sobre a experiência da empresa.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <div class="linksuteis"> <h1>Links úteis</h1> <ul> <li><span><i class="faz fa-angle-right"></i></span><a href="">Link1</a></li> <li><span><i class="faz fa-angle-right"></i></span><a href="">Link2</a></li> <li><span><i class="faz fa-angle-right"></i></span><a href="">Link3</a></li> <li><span><i class="faz fa-angle-right"></i></span><a href="">Link4</a></li> <li><span><i class="faz fa-angle-right"></i></span><a href="">Link5</a></li> <li><span><i class="faz fa-angle-right"></i></span><a href="">Link6</a></li> <li><span><i class="faz fa-angle-right"></i></span><a href="">Link7</a></li> <li><span><i class="faz fa-angle-right"></i></span><a href="">Link8</a></li> </ul> </div> <!-- Newsletter do site --> <div class="newsletter"> <h1>Newsletter</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> <form action=""> <input type="email" placeholder="Digite seu email!"> <button type="submit"><i class="faz fa-paper-plane"></i></button> </form> </div> <div class="redessociais"> <h1>Siga-nos:</h1> <ul class="menu_redes_sociais"> <li><a href=""><i class="fab fa-facebook-f"></i></a></li> <li><a href=""><i class="fab fa-twitter"></i></a></li> <li><a href=""><i class="fab fa-google-plus-g"></i></a></li> <li><a href=""><i class="fab fa-linkedin-in"></i></a></li> </ul> </div> <div class="menu_fim_rodape"> <p> Copyright &copy 2018 Todos os direitos Reservados</p> <ul> <li><a href="">Home</a></li> <li><a href="">Serviços</a></li> <li><a href="">Blog</a></li> <li><a href="">Produtos</a></li> <li><a href="">Contato</a></li> </ul> </div> </footer> </div> <script > /* Efeito de abrir e fechar menu do site */ var botaomenu = document.getElementById("botaomenu"); botaomenu.onclick = function(){ $("#imenu").toggle(); } </script> </body> @charset "UTF-8"; *{ margin:0; padding:0; outline: none; box-sizing: border-box; } h1{ font-size:36px; } h3{ font-size: 20px; } ul{ list-style: none; } a{ text-decoration: none; color:rgb(0,0,0); } body{ font-size: 16px; } .bg-white{ background-color: rgb(255,255,255); } .bg-black{ background-color: rgb(0,0,0); } #layout{ width:999px; height:auto; background-color: rgb(242,242,242); } /* Header do site*/ .header{ width:100%; height:50px; background-color: rgb(0,0,0); color:rgb(255,255,255); display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: center; } .header p{ width: auto; height:auto; } .header p span{ margin-right: 8px; } .header p:last-child span{ margin-right: 0; margin-left: 10px; } .header p:last-child span a{ color:white; margin-left: 10px; } .header p:last-child span a:first-child{ color:white; margin-left: 0; } .header p:last-child span a:hover{ color:#45c4e9; } /* Topo do site */ .topodosite{ width:90%; margin:0 auto; background-color: #f8f8f8; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; } .logomarca{ width:35%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; } /* Esconder o botão de abrir e fechar menu nessa versão */ .btn-menu{ display: none; } /* Estilizando e configurando menu do topo do site */ .menu { width:70%; height:100px; } .menu ul{ width:100%; height:100%; list-style: none; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: center; } .menu ul li { display: inline-block; border-bottom: 3px solid inherit; height:100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; } .menu ul li a{ width:auto; height: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; } .menu ul li a:hover{ border-bottom: 3px solid #45c4e9; transition: all 200ms ease-in 0; color: rgb(69, 193, 233); } /* EStilo para o slideshow abaixo do topo */ .slideimagens{ display: none; } /*===========Conteúdo do site===============*/ .conteudo{ width:100%; height:auto; padding: 0 5%; } /* Mensagem de boas-vindas do site */ .mensagem-boas-vindas{ width:100%; height:auto; text-align: center; padding: 4%; } /* Artigos do blog da empresa na página principal do site */ .artigos_empresa{ width:100%; height:auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: flex-start; padding: 0 5%; padding-bottom: 30%; } /*Configuração de cada artigo */ .artigo{ width:auto; height:auto; display: flex; flex-direction: row; flex-wrap: wrap; position: relative; margin-left: 4%; } .artigo img{ width:100%; height:195px; } .artigo div{ width:90%; background-color: rgb(255,255,255); border: 1px solid rgba(0,0,0, 0.20); border-top: 4px solid rgb(0,0,0); padding: 4%; text-align: center; position: absolute; top:160px; } .artigo:hover div{ border-top: 4px solid rgb(61,193,233); transition: border-top 200ms ease-in-out 0; } .artigo:hover h1{ color: rgb(61,193,233); transition: color 200ms ease-in-out 0; } .slideservicos{ display: none; } /*Informações sobre a empresa */ .nossaempresa{ width:100%; height:auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; } .nossaempresa article{ width:90%; margin:0 auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-content: center; } .nossaempresa article h1,img,h3,p,a{ margin:15px 0; } .nossaempresa h1{ width:100%; text-align: center; } .nossaempresa img{ width:100%; height:auto; } .nossaempresa article h3{ width:100%; text-align: left; } .nossaempresa article h3.diferente{ color: rgb(61,193, 233); } .nossaempresa article p{ width:100%; text-align: justify; line-height: 25px; } .nossaempresa article a{ width:193px; height:40px; background-color: #45c4e9; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; border-radius: 50px; padding: 3% 0; color: rgb(255,255,255); cursor: pointer; border: 3px solid rgb(61, 193, 233); } .nossaempresa article a:hover{ background-color: rgb(255,255,255); color: rgb(61,193,233); } /* VANTAGENS DA EMPRESA */ .vantagens_empresa{ width:100%; height:auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; margin: 15px 0; } .vantagem{ width: 25%; height:auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; margin-left: 3%; border: 1px solid rgba(0,0,0,0.20); padding: 2.5%; } .vantagem:first-child{ margin-left: 0; } .vantagem header{ width:100%; height:auto; display: flex; flex-direction: row; flex-wrap:nowrap; justify-content: space-between; align-items: center; } .vantagem header span{ font-size: 2em; margin: 0 10px; color:rgb(61,193,233); } .vantagem header h3{ width:80%; margin-left: 10px; font-size: 20px; } .vantagem p{ width:100%; height:auto; text-align: justify; } .vantagem:hover{ border: 1px solid rgba(61,193,233); } /* Detalhes de contato da empresa */ .detalhesdecontato{ width:100%; height:auto; padding: 5% 5%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; color:white; } .infocontato{ width:35%; height:auto; background-color: rgba(0,0,0, 0.80); padding:4%; } .infocontato h1{ } .infocontato p{ line-height: 25px; width:100%; } .cordiferente{ color:#848484; } .infocontato p span{ margin-right: 15px; color:rgb(61,193,233); } .formulariocontatoprincipal{ width:70%; height:auto; display:flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: center; } .formulariocontatoprincipal h1{ margin-bottom: 45px; } .formulariocontatoprincipal input[type="text"],input[type="email"],input[type="tel"]{ width:45%; margin-top: 35px; height:40px; padding:0 2.5%; border:1px solid rgba(230,230,230,0.40); background-color: rgb(0,0,0); color:rgb(255,255,255); font-weight: 700; } .formulariocontatoprincipal input:focus{ border: 1px solid rgb(61,193,233); } .formulariocontatoprincipal input[type="submit"]{ width:165px; height:auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; background-color: rgb(61,193,233); color:rgb(255,255,255); border: 3px solid #45c4e9; border-radius: 50px; cursor: pointer; padding:2.3%; font-size: 1em; font-weight: 700; margin-top: 25px; } .formulariocontatoprincipal input[type="submit"]:hover{ background-color:rgb(255,255,255); color: rgb(61,193,233); } /* Últimas postagens do blog na página principal*/ .ultimas_postagens_blog{ width:100%; height:auto; padding:0 5%; } .ultimas_postagens_blog h1{ width:100%; text-align: center; margin-bottom:25px; } .conteiner_ultimas_postagens_blog{ width:100%; height:auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; } .ultima_postagem_blog{ width:30%; border:1px solid rgba(0,0,0,0.20); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; text-align: justify; } .ultima_postagem_blog div{ width:100%; } .ultima_postagem_blog div h3{ width:100%; padding-left: 5%; color:rgb(0,0,0); } .ultima_postagem_blog a{ width:100%; padding-left:5%; } .ultima_postagem_blog a:hover h3{ color:rgb(61,193,233); } .ultima_postagem_blog p{ width:100%; padding:2% 5%; } .rodape_ultima_postagem_blog{ width:100%; height:auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: :space-around; align-items: center; } .rodape_ultima_postagem_blog a{ width: 50%; text-align: center; } .rodape_ultima_postagem_blog a:first-child:hover{ color:#45c4e9; } /* Últimos projetos realizados pela empresa */ .ultimos_projetos_empresa{ width:100%; height:auto; display: flex; flex-direction: row; flex-wrap: wrap; } .ultimos_projetos_empresa h1{ display: block; width:100%; text-align: left; } .galeria_ultimos_projetos_empresa{ width:100%; height:auto; display: flex; flex-direction: row; flex-wrap:wrap; justify-content: space-between; align-content: center; } .galeria_ultimos_projetos_empresa a{ width:30%; height:auto; } @media only screen and (max-width: 320px) { /*---- RESET---- */ *{ margin:0; padding:0; -webkit-box-sizing: border-box; box-sizing: border-box; } ul{ list-style: none; } a{ text-decoration: none; } h1{font-weight: 400; color:rgba(0,0,0,1);line-height: 40px;} h3{font-size: 20px; color:rgba(0,0,0,1); font-weight: 500;} body{ color:#848484; font-size: 16px; line-height: 26px; font-weight: 300; } /* Div que conterá todas as partes do site */ #layout{ width:100%; height: auto; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: justify; align-content: space-between; text-align: center; } /* Header do site */ .header { width:100%; height:auto; background-color: black; color:rgba(255,255,255,1); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; -ms-flex-wrap: wrap; flex-wrap: wrap; font-size: 1.2em; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; text-align: center; padding: 4% 2%; } .header div{ width: 100%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: distribute; justify-content: space-around; -ms-flex-line-pack: center; align-content: center; max-width: 100%; margin-top: 4%; } .header div span{ width:100%; font-size: 1em; } .header div p{ width:100%; } .header div p span{ margin-right: 7px; } .icones_header{ margin-left: 7px; margin-right: 0; } .icones_header a{ color: rgba(255,255,255,1); } /* Topo do site */ .topodosite{ width:100%; height:150px; background-color: rgba(230,230,230,1); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 2%; position: relative; } .logomarca { width:100%; height:80px; } .menu{ width:100%; height: 70px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow:auto; z-index: 999; } .btn-menu{ width:46px; height:46px; font-size: 1.2em; border: 1px solid rgba(0,0,0,0.50); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; margin-bottom: 4%; color: #45c4e9; background-color: rgba(255,255,255,1); margin-right: 2.5%; } .menu ul{ width:100%; height:auto; display:none; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; position:absolute; top:150px; left:0; padding: 5% 5%; background-color: rgba(230,230,230,1); } .menu ul li{ width:100%; height: auto; border:0.5px solid rgba(255,255,255,1); } .menu ul li a{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; color: rgba(0,0,0,1); background-color:#45c4e9; padding: 3%; font-size: 1.7em; } .menu ul li a:hover{ display: -webkit-box; display: -ms-flexbox; display: flex; color: rgba(255,255,255,1); cursor: pointer; } /* Slideshow onde aparecerá algumas imagens relacionada a empresa */ .slideimagens{ width:100%; height:213px; background-color:rgba(0, 0, 0, 1); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .slideimagens img{ width: 100%; height:100%; } .botoesslideshow{ position: absolute; width:100%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 4%; } .botoesslideshow button{ width: 40px; height:40px; border:2px solid rgba(255,255,255,1); background: rgba(201,201,201,0.75); font-size: 1.5em; color: rgba(255,255,255,1); outline: none; } .botoesslideshow button:hover{ border:2px solid #45c4e9; background: rgba(0,0,0,1); font-size: 1.5em; cursor: pointer; } /*Conteúdo do site */ .conteudo{ width:100%; height:auto; padding: 0 5%; } .mensagem-boas-vindas{ width:100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack:center; align-content:center; text-align: center; padding-top: 20 height:200px; max-width: 100%; margin-top: 65%; }%; } .mensagem-boas-vindas header{ width:100%; } .mensagem-boas-vindas header h1{ font-size: 32px; font-weight: 400; } .mensagem-boas-vindas p{ width:100%; font-size: 1.5em; margin-top: 10%; } .artigo{ width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; position: relative; margin-top: 15%; } .artigo img{ width: 100%; .artigo div{ width:90%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; text-align: center; border: 1px solid rgba(0,0,0,0.20); position: absolute; top:328px; background-color: rgba(255,255,255,1); padding: 4% 0; margin-top: 3px solid rgba(0,0,0,0.50); } .artigo h1{ width:100; margin: 0 0 10px; font-size: 36px; } .artgio p{ width:100%; margin: 0 0 10px; } /* Slides dos serviços oferecidos pela empresa */ .slideservicos{ width:100%; height: auto; margin-top: 40%; display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 20%; background-color: rgba(230,230,230,0.50); } .slideservicos h1{ width:100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size:36px; padding: 0 3%; } .controles_slide_servicos{ } .controles_slide_servicos a{ font-size: 22px; color:rgb(0,0,0); } .servicos{ width: 100%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; background-color: rgba(230,230,230,0.50); } .servico{ width:90%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; border: 1px solid rgba(0,0,0,0.50); margin-top: 15%; } .servico header{ width: 100%; height:159px; background-color: rgba(255,255,255,1); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; } .servico header span{ width: 100%; font-size: 3.5em; } .servico header h1{ } .servico p{ width:100%; height: auto; margin: 8% 0; line-height: 30px; } .servico a{ width:132px; height:45px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: rgba(0,0,0,1); border: 1px solid rgba(0,0,0,0.50); border-radius: 39px; margin-bottom:12%; margin-left: 25.5%; font-weight: 700; } /* Área sobre informações da empresa */ .nossaempresa{ width:100%; height:auto; background-color:rgba(255,255,255,1); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack:center; align-content:center; text-align: justify; margin: auto; padding: 20% 0; } .nossaempresa article{ width:90%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack:center; align-content:center; margin:auto; }.nossaempresa article h1{ font-size: 36px; font-weight: 400; text-align: center; width:100%; } .nossaempresa article img{ width:100%; height:auto; max-width: 100%; margin: 10% 0; } .nossaempresa article h3.diferente{ color: #45c4e9; } .nossaempresa article p{ color:#848484; line-height: 25px; } .nossaempresa article h1, img, h3, p{ margin: 5% 0; } .nossaempresa article a{ width:70%; height :50px; background-color: #45c4e9; color:rgb(255,255,255); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap:nowrap; flex-wrap:nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 20%; border-radius: 150px; border: 3px solid #45c4e9; position: relative; margin-right:30%; cursor: pointer; } .nossaempresa article a:hover{ background-color: rgb(255,255,255); color: #45c4e9; -webkit-transition: all 1s ease-in 0s; -o-transition: all 1s ease-in 0s; transition: all 1s ease-in 0s; } .vantagem{ width: 100%; height:auto; border: 1px solid rgba(0,0,0,0.20); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; padding: 0 5%; } .vantagem header{ width: 100%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align:center; -ms-flex-align:center; align-items:center; margin-top:5%; } .vantagem header span{ font-size:2em; color: #45c4e9; } .vantagem header h3{ width: 90%; text-align: center; } .vantagem:hover{ border: 1px solid #45c4e9 ; } /* Informações de contato da empresa */ .detalhesdecontato{ width:100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; background-color: rgba(0,0,0,1); padding: 20% 0; } .infocontato{ width:90%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; background-color: #2b2b2b; text-align: left; padding: 8%; } .infocontato h1{ color:rgb(255,255,255); font-size: 36px; width:100%; } .infocontato p{ width: 100%; color: rgb(255,255,255); } .infocontato p.cordiferente{ color:#848484; } .infocontato p span{ margin-right: 8%; } .formulariocontatoprincipal{ width: 90%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack:center; align-content:center; padding: 20% 0; } .formulariocontatoprincipal h1{ color: rgb(255,255,255); font-weight: 400; font-size: 36px; } .formulariocontatoprincipal input{ width: 100%; height:56px; background-color: rgb(0,0,0); border: 2px inset rgba(230,230,230,0.20); margin: 7% 0; outline: none; } .formulariocontatoprincipal input:focus{ border: 2px inset #45c4e9; } .formulariocontatoprincipal input[type="text"], input[type="email"], input[type="tel"]{ padding: 1% 5%; } .formulariocontatoprincipal input[type="submit"]{ width: 163px; height: auto; background-color: rgb(0,0,0); border: 2px solid #45c4e9; margin: 7% 0; border-radius: 50px; background-color: #45c4e9; font-size: 14px; font-weight:600; color:rgb(255,255,255); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap:nowrap; flex-wrap:nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 15px; float:left; } .formulariocontatoprincipal input[type="submit"]:hover{ background-color: rgba(255,255,255); color: #45c4e9; } .formulariocontatoprincipal input[list] option{ padding: 25%; } /* úLTIMAS POSTAGENS DO BLOG */ .ultimas_postagens_blog{ width:100%; height: auto; background-color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; margin:0; } .ultimas_postagens_blog h1{ font-size: 36px; font-weight: 400; width:100%; text-align: center; margin-top:20%; } .ultima_postagem_blog{ width:90%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: center; align-content: center; margin-top:30px; border: 1px solid rgba(0,0,0,0.10); } } .ultima_postagem_blog header{ width:100%; height: 172px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } .ultima_postagem_blog header img{ width:100%; height:172px; } .data_postagem{ width:61px; height:auto; background-color: #45c4e9; color: rgb(255,255,255); position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; text-align: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; top:10px; right:10px; padding: 2%; font-size: 16px; line-height:25px; font-weight: 300; } .ultima_postagem_blog div{ width:100%; height:auto; padding: 2%; margin: 10px 0; } .ultima_postagem_blog div h3{ width: 100%; height:auto; color:#848484; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; font-size: 16px; } .ultima_postagem_blog a{ width:100%; text-align: left; } .ultima_postagem_blog a h3{ color: #222222; width:100%; font-size: 22px; font-weight: 400; line-height: 26px; display: block; } .ultima_postagem_blog p{ width:100%; height:auto; color:#848484; margin: 3% 0; } /* Estilizando rodape da postagem */ .rodape_ultima_postagem_blog{ width:100%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-top: 1px solid rgba(0,0,0,0.20); border-bottom: 1px solid rgba(0,0,0,0.20); padding: 10px; } .rodape_ultima_postagem_blog a{ color:#222222; width:50%; text-align: center; } .rodape_ultima_postagem_blog a span{ margin-right: 7px; } /* ÚLTIMOS PROJETOS FEITOS PELA EMPRESA */ .ultimos_projetos_empresa{ width:100%; height:auto; display: block; background-color: #f7f7f7; padding: 20% 0; } .ultimos_projetos_empresa h1{ width:100%; text-align: center; font-size:36px; font-weight: 400; margin-bottom:20%; } .ultimos_projetos_empresa a{ width:90%; height:273px; display: block; } .ultimos_projetos_empresa a img{ width:100%; height:273px; max-width: 100%; max-height: 100%; margin: 1% 0; } /* Respostas de algumas perguntas frequentes feitas pelos clientes */ .perguntasfrequentes{ width:100%; height: 1200px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; background-color: #848484; } .perguntasfrequentes h1{ width:100%; color:red; } .perguntasfrequentes div{ width:90%; background-color: rgb(255,255,255); border-bottom: 1px solid #ededed; } .perguntasfrequentes div h4{ width:100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; font-size: 18px; padding:4%; } .perguntasfrequentes div h4:hover span{ color:#45c4e9; } .perguntasfrequentes div h4:hover{ color:#45c4e9; } .perguntasfrequentes div h4 span{ margin-right: 40px; font-size: 22px; } .perguntasfrequentes div div{ width: 100%; display:none; } .perguntasfrequentes div div p{ width:70%; float:right; margin-right:0px; color:#848484;; } /* Local onde ficará o slideshow com os banners dos Parceiros da empresa */ .slide_parceiros{ width:100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: center; align-content: center; } .slide_parceiros h1{ width:100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 5% 7%; font-size: 36px; font-weight: 400; } .controles_slide_parceiros{ width: 35%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } .controles_slide_parceiros button{ width:40px; height:40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap:nowrap; flex-wrap:nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border:1px solid rgba(0,0,0,0.50); background-color: rgb(255,255,255); color:#ababab; font-size: 20px; } /* Configurando e estilizando local onde aparecerá o banner dos parceiros da empresa */ .banner_parceiro{ width:100%; height:255px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; padding: 0 25%; } .banner_parceiro a{ width:215px; height:115px; display: block; text-align: center; position: relative; } .bannerparceiro{ width:215px; height:115px; position: relative; border: 1px solid rgba(0,0,0,0.20); } /* ===== Rodapé do site ========= */ .rodapedosite{ width: 100%; height:auto; background-color: rgb(0,0,0); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: row; flex-wrap: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: center; align-content: center; padding: 20% 5%; } .rodapedosite h1{ color: rgb(255,255,255); } /* Links úteis do site */ .linksuteis{ width:100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: center; align-content: center; padding: 15% 0; } .linksuteis h1{ width:100%; color:rgb(255,255,255); } .linksuteis ul{ padding: 10% 0; } .linksuteis ul li{ width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .linksuteis ul li span{ color:#848484; margin-right: 20%; } .linksuteis ul li a{ color: #848484; font-size: 16px; } .linksuteis ul li span:hover{ color:#45c4e9; margin-right: 20%; } .linksuteis ul li a:hover{ color:#45c4e9; cursor: pointer; } /* Newsletter do site */ .newsletter{ width:100%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: center; align-content: center; } .newsletter h1{ width:100%; font-size:36px; } .newsletter form{ width:100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 10% 0; text-align: left; } .newsletter form input{ width:80%; height:46px; background-color: rgb(255,255,255); } .newsletter form button{ width:20%; height:46px; color:rgb(255,255,255); background-color: #45c4e9; border:none; font-size: 14px; } .newsletter form button:hover{ width:20%; height:46px; color:rgb(255,255,255); background-color: #424141; border:none; font-size: 14px; cursor: pointer; } /* Redes Sociais da empresa */ .redessociais{ width:100%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: center; align-content: center; } .redessociais h1{ width:100%; font-size: 36px; padding:10% 0; } .menu_redes_sociais{ width:100%; height: auto; display: block; margin: 7% 0; } .menu_redes_sociais li{ display: inline-block; margin-left: 10px; height: auto; } .menu_redes_sociais li:first-child{ margin-left: 0; } .menu_redes_sociais li a{ width:40px; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap:nowrap; flex-wrap:nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border:2px solid #323232; border-radius: 50%; color: #999999; } .menu_redes_sociais a:hover{ background-color: #45c4e9; } /* Menu no fim do rodapé */ .menu_fim_rodape{ width:100%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; } .menu_fim_rodape p{ width:100%; font-size: 14px; font-weight:400; text-align: center; } .menu_fim_rodape ul{ } .menu_fim_rodape ul li{ display: inline-block; margin-left: 10px; } .menu_fim_rodape ul li:first-child{ margin-left: 0; } .menu_fim_rodape ul li a{ font-size: 15px; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; color: #999999; font-weight: 400; } .menu_fim_rodape ul li a:hover{ color:#45c4e9; } } Se algúem puder me ajudar, eu agradeço.
  12. Para pesquisa da faculdade, já procurei por empresas ou sites (conhecidos) que usam o framework css Semantic-UI, porém não encontrei nada sobre o assunto, se alguém souber de alguma, fico agradecida.
  13. estou com o seguinte problema: Todo o meu site é responsivo adaptado para mobille, porém uma parte de uma pagina não esta adptada. http://publiqueaki.com/entregas/store/menu/merchant/lanchonete-altas-horas link da pagina estou com duvida em como adaptar ela a dispositivos moveis
  14. Estou estudando o framework mencionado e tenho dificuldade de encontrar conteúdos que ensinem como usá-lo de forma customizada e consistente. Nesse sentido, cheguei a ler alguns livros, mas eles sempre abordam o assunto de forma rasa. Ainda assim, consegui aprender alguns princípios, como importar somente os partials necessários. No entanto, nem sempre eu uso todo código de um partial. Assim, sempre acaba sendo importado algum trecho desnecessário. Devido a isso, me pego questionando se isso é normal ou, mesmo, se estou usando todo o poder do Sass. Dado isso gostaria do esclarecimento de vocês, quanto ao seguinte: É comum "sobrar" CSS, importando um partial Bootstrap? Se sim: Então, devo usar alguma ferramenta como o UnCSS? Se não: O que posso estar fazendo errado? Conhecem algum conteúdo voltado a ensinar de forma ampla, como usar Bootstrap e seus partials?
  15. Pessoal, estou começando um projeto na plataforma Bootstrap, porém não tenho nenhum material, alguém tem algum pdf, ou site q ajude eu a fazer o projeto.
  16. Boa tarde galera. Gostaria de saber o que usar para desenvolver uma aplicação responsivo, que rode tanto na web ou em smartphone podendo ser apenas android mesmo, gostaria de saber quais linguagens e tecnologias para desenvolvimento completo, mas lembrando q de forma descomplicada, tudo isso para um cara que sabe apenas o básico de programação e banco de dados. Muito obrigado!
  17. Estou com um problema estranho... Meu CSS não responde corretamente, não sei exatamente como dizer, mas a página consegue chamar ele, faz alterações, mas não consigo mais alterar a página pelo CSS, ela continua com suas alterações antigas. Já conferi, e está chamando o CSS corretamente, se eu mudar o nome ou o link que chama ela da erro. O código está assim. Esse é a página "register-public". <?php require_once 'templates/header.php';?> <div class="content"> <div class="container"> <div class="row"> <?php require_once 'templates/message.php';?> <div class="col-xs-12 col-sm-5 col-md-5 col-lg-5"> <div id="registro-publico" class="row btn-c well"> <!-- DIV QUE ESTÁ SENDO ALTERADO PELO CSS !--> <form class="form-horizontal" role="form"> <!-- Conteúdo Aqui !--> </form> </div> </div> </div> </div> </div> <!-- /container --> <?php require_once 'templates/footer.php';?> Esse é o página CSS, "div-style". #registro-publico{ background: skyblue; width: 800px; /* largura */ height: 500px; /* altura */ } E no "header.php" ele está sendo chamado da seguinte forma. <link href="css/div-style.css" rel="stylesheet"> O CSS que está sendo aplicado na página é esse, e não deveria estar sendo: #registro-publico{ background: skyblue; color: blue; width: 800px; /* largura */ height: 500px; /* altura */ } Tirei a linha "color: blue", porém ela continua sendo aplicada na página(fonte/letras). Já mudei o nome do arquivo, o nome no link no "header.php" e o CSS não é chamado pra página, mas se eu mover o arquivo "div-style.css" para a área de trabalho, o CSS continua sendo aplicado(que no caso é o que tem a linha "color: blue"). Não consigo encontrar o problema.
  18. Olá pessoal e obrigado desde já... Estou com este problema da imagem abaixo. O INPUT TYPE="SUBMIT" , Está com as bordas arredondadas no navegador Safari no iPhone. nos outros navegadores esta normal. Como resolver? <div id="formulario"> <input type="text" name="user" id="user" maxlength="16" minlength="8" placeholder="usuario"><br> <input type="password" name="passplaca" id="baseplaca" maxlength="4" minlength="4" placeholder="senha"><br> <input type="submit" name="inputbtn" id="inputbtn" value="acessar"> </div> No css não coloquei codigo para as bordas arredondadas
  19. Bom dia, gostaria de uma ajuda. Passei bastante tempo tentando subir este menu para o canto porém não consigo achar o código para fazer isto.. Agradeço a quem conseguir ajudar Codigo CSS: body { background-image:url(https://png.pngtree.com/thumb_back/fw800/back_pic/00/04/62/325624a61782e94.jpg) ; background-repeat: repeat-x; } #Centro { text-align: center; font-size: 50px; color: lightblue; padding: 35px; } ul { list-style-type: none; margin: 0; padding: 0; width: 100px; background-color: #; text-align: center } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } li a.active { background-color: black; color: white; } li a:hover:not(.active) { background-color: #555; color: white; } Codigo HTML: <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <h1 id=Centro> Pedro's World </h1> <ul> <li><a class="active" href="#home">Inicio</a></li> <li><a href="#novidades">Novidades</a></li> <li><a href="#contact">Contato</a></li> <li><a href="#about">Sobre</a></li> </ul> </body> </html>
  20. Olá, estou fazendo um menu bootstrap no angular 2 com typescript, e estou com um problema de responsividade no menu, ele até fica responsivo, mas se eu clicar no celular em algum subnível, ele não abre, porém, se eu pressionar, ele abre mais ainda não completamente, segue o código do menu e do css. .glyphicon{ color: black; } .dropdown-submenu { position: relative; } .dropdown-submenu:hover > .dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px 6px; border-radius: 0 6px 6px 6px; } .dropdown-submenu:hover > .dropdown-menu { display: block; color: black; } .dropdown-submenu > a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #cccccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:link > a:after { border-left-color: #ffffff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left > .dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; } -----------HTML----------- <nav class="navbar navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"></a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav" data-in="fadeInDown" data-out="fadeOutUp"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <i class="glyphicon glyphicon-folder-open"></i>&nbsp; Cadastros Principais <span class="caret"></span> </a> <ul class="dropdown-menu"> <li class="dropdown-submenu"> <a href="#">Clientes</a> <ul class="dropdown-menu"> <li> <a [routerLink]="['/formcadcliente']">Cadastros de Clientes</a> </li> <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Solicita��o Limite</a> <ul class="dropdown-menu"> <li> <a [routerLink]="['/formcadastrasolicitacaolimite']">Cadastrar</a> </li> <li> <a [routerLink]="['/formpesquisasolicitacaolimite']">Pesquisar</a> </li> </ul> </li> <li class="dropdown-submenu"> <a class="dropdown-toggle" data-toggle="dropdown">Relat�rios</a> <ul class="dropdown-menu"> <li> <a [routerLink]="['/formlistcli']">Listagem de Clientes</a> </li> <li> <a [routerLink]="['/formrankcliente']">Ranking de Clientes</a> </li> <li> <a [routerLink]="['/formrelvendasbai']">Vendas por Bairro</a> </li> <li> <a [routerLink]="['/formrelvendascli']">Vendas por Clientes</a> </li> <li> <a [routerLink]="['/formrelequipamentos']">Relat�rio de Planejamento Di�rio</a> </li> </ul> </li> </ul> </li> <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Fornecedores</a> <ul class="dropdown-menu"> <li> <a [routerLink]="['/formlistclifor']">Listagem de Clientes sem Compras</a> </li> <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Relat�rios</a> <ul class="dropdown-menu"> <li> <a [routerLink]="['/formrelvendforn']">Resumo de Vendas por Fornecedor</a> </li> <li> <a [routerLink]="['/formrelfatforn']">Faturamento por Fornecedor</a> </li> <li> <a [routerLink]="['/formvendabonificacao']">Vendas X Bonifica��o</a> </li> </ul> </li> </ul> </li> <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Produtos</a> <ul class="dropdown-menu"> <li> <a [routerLink]="['/formrelprodnaovend']">Produtos N�o Vendidos</a> </li> <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Relat�rios</a> <ul class="dropdown-menu"> <li class="dropdown-submenu"> <a [routerLink]="['/formrelposprod']">Cobertura por Produto(Resumido por Rep.)</a> </li> </ul> </li> </ul> </li> <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Representantes</a> <ul class="dropdown-menu"> <li class="dropdown-submenu"> <a href="#">Relat�rios</a> <ul class="dropdown-menu"> <li> <a [routerLink]="['/formacampvisitacliente']">Acompanhamento das Visitas aos Clientes</a> </li> <li> <a [routerLink]="['/formrelvendaspositivacao']">Relat�rio de Vendas com Cobertura</a> </li> <li> <a [routerLink]="['/formrelpositivacaorep']">Relat�rio de Cobertura por Representante</a> </li> <li> <a [routerLink]="['/formrankrep']">Ranking de Representante</a> </li> </ul> </li> <li class="dropdown-submenu"> <a href="#">Comiss�o</a> <ul class="dropdown-menu"> <li> <a [routerLink]="['/formrelcomissao']">Anal�tico</a> </li> </ul> </li> </ul> </li> <!--<li role="separator" class="divider"></li>--> </ul> </li> </ul> </div> <!-- /.navbar-collapse --> <!-- /.container-fluid --> </nav>
  21. Boa noite pessoal. To começando em programação web aprendendo aqui e ali. Peguei uns exercícios na internet pra eu fazer aqui e ao escrever esse código abaixo: O HTML : <!--DOCTYPE html--> <html> <head> <meta charset="utf-8"> <title>Questão 02</title> <link rel"stylesheet" href="page2.css"> </head> <body> <hr> <h1>Mudanças de linha</h1> <p>"No mundo dos negócios todos são pagso com duas</br> moedas:Dinheiro e Experiência...Agarre a experiência</br> primeiro, o dinheira virá depois".--Harold Geenen</br></p> </br> <p>"Há homens que lutam um dia e são bons.</br> Há outros que lutam muitos dias e são melhores.</br> Mas há os que lutam todos os dias e estes são</br> imprescindiveis." </br> --Bertolt Brecht</P> </br> <hr> </body> </html> e este CSS: h1{ font-family:serif; font-size:36px; } P{ font-family:serif; font-size:28px; } hr{ display:block; margin-top:0.5em; margin-bottom:0.5em; margin-left:100px; margin-right:100px; border-style:inset; border-width:3px; color:blue; } Bom a linha adicionada deveria ficar apenas acima do texto centralizado no meio da página, no entanto a linha ficou continua de um lado ao outro da página. o que eu faço pra resolver tal problema? Ps: Li que não tem como formatar esta linha com HTML 5 e CSS3, mas não tenho confiança na fonte dessa info.
  22. Estou programando e treinando HTML nessa página, porém estou com uma dúvida no CSS porém nas class figure.foto-legenda figcaption e figure.foto-legenda:hover, a atributo opacity não estão funcionando, que funcionaria como um fade-in e fade-out. Como resolver isso? <!doctype html> <html lang="en"> <head> <meta charset="Ansi"> <style> p { text-align: center; } body{ background-color: #6513; color: rgba(0,0,0,0.5); /*meu ******/ } figure.foto-legenda{ border: 8px solid white; box-shadow: 1px 1px 4px black; position:relative; } figure.foto-legenda img{ width: 40%; height: 30%; } figure.foto-legenda figcaption{ opacity: 0%; position: absolute; top: 0px; background-color: rgba(0,0,0,.5); color: white; width:100%; height:100%; padding: 10px; box-sizing: border-box; transition: opacity 1s; } figure.foto-legenda:hover figcaption{ opacity: 1; } nav#menu{ display: block; } nav#menu li{ list-style:none; text-transform: uppercase; display: inline-block; background-color: #2156; color: white; padding: 10px; margin: 2px; top: -20px; left: 100px; } </style> <script src="script.js"> </script> <title>minha página</title> </head> <body> <script> alert("Bem vindo a jobs software"); </script> <div> <header> <nav id="menu"> <li>Inicio</li> <li>contatos</li> <li>Quem somos</li> <li>Metas da empresa</li> <li>projetos</li> </nav> </header> <hgroup> <h1> Bem vindo a Empreza Jobs software </h1> <h2> uma filial dos irmaos elmers </h2> <h3> leia o texto de boas vindas </h3> </hgroup> <figure class="foto-legenda"> <img src="https://blog.pmweb.com.br/wp-content/uploads/boas-vindas-email.jpg" width= 300> <figcaption> <h3> nossa mensagem de boas vindas </h3> <p> <h4> o melhor serviço em desenvolvimento de programas </h4> </p> </figcaption> </figure> <h2> <p> <i>O que é Lorem Ipsum?</i></h2> Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração ele<wbr>trô<wbr>nica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letra­set lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a programas de editoração eletrônica como Aldus PageMaker. </p> <h3> simbolos especiais </h3> € £ &dollar; ≥ √ <p> essa é a era de ouro da nova tecnologia. Logo logo serãp lançadas no espaço grandes naves para colonizar novos planetas. x<sup>2</sup>+14x+log<sub>3</sub>70 </p> </div> </body> </html>
  23. Boa Noite, Estou aprendendo CSS e parece que meu navegador não interpreta os meus arquivos CSS, também quando tentei usar arquivos JQuery nada funcionou. Ambos os arquivos HTML e CSS estão na mesma pasta (Curso de CSS). Cometi algum erro? Arquivo HTML: <html> <head> <title>Aula 1 - Curso de CSS</title> <style type= "text/css"> <link rel="stylesheet" type= "text/css" href="style.css"/> </head> <body> </body> </html> Arquivo CSS: body { background-color:#FF0000; }
  24. Boa noite pessoal, Estou "desenvolvendo" um site para um amigo meu, estou no primeiro ano de faculdade e este esta sendo meu primeiro contato com Html, baixei o layout via wget, alterei tudo que podia dentro do html, porém quando tento alterar algo no CSS não acontece nada, parece que não estou alterando o código, posso limpar todo o codigo e salvar, o site continua normal, agora se eu tirar o caminho do arquivo no link rel, ele para de funcionar... Não sei se compreenderam o problema, mas será de grande ajuda se alguem souber como resolver...
  25. Galera, tenho um código que estou usando o estilo "padding" só que o valor que coloco dentro do padding, tipo "padding: 0px 4px" mostra um estilo diferente em cada navegador. Tipo, no Firefox fica um quadrado, e no Chrome fica um retângulo (altura > largura), daí existe alguma condição do tipo (só exemplificando) "If (navegador = Firefox){padding: 0px 4px} If (navegador = Chrome){padding: 8px 2px}. Tipo nesse esquema (sei que não existe desse jeito, mas foi só pra ilustrar.)

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×