Jump to content
  • ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

  • Similar Content

    • By tomas.david100
      Boa tarde tenho a seguinte dúvida será possível utilizar um css só para o menu lateral e outro css para o body? Vou deixar uma imagen a seguir para se perceber melhor.
       

    • By astolpho
      eu gostaria de saber como posso "desativar" ou "ativar" uma class a partir do php, clicando o botão. 
       
       
       
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="utf-8">
          <meta name="vieport" content="width=device-widht, initial-scale=1.0">
          <meta http-equiv="X-UA-Comapatible" content="ie=edge">
          <title>Barra de Progesso Oficial</title>
          <style type="text/css">
              
              .container{
                  width: 100%;
              }
              .step-pog-bar{
                  margin-top: 20%;
                  counter-reset: step;
              }
              .step-pog-bar li{
                  list-style: none;
                  float: left;
                  width: 20%;
                  position: relative;
                  text-align: center;
              }
              .step-pog-bar li::before{
                  content: counter(step);
                  counter-increment: step;
                  width: 30px;
                  height: 30px;
                  line-height: 30px;
                  border: 2px solid #ddd;
                  display: block;
                  text-align: center;
                  margin: 0 auto 10px auto;
                  border-radius: 50%;
                  background-color: #fff;
              }
              .step-pog-bar li::after{
                  content: '';
                  position: absolute;
                  top: 15px;
                  left: -50%;
                  border: 2px solid #ddd;
                  width: 100%;
                  z-index: -1;
              }
              
              .step-pog-bar li:first-child::after{
                  content: none;
              }
              .step-pog-bar li.active{
                  color: chartreuse;
              }
              .step-pog-bar li.active::before{
                  border-color: chartreuse;
              }
              .step-pog-bar li.active + li::after{
                  border-color: chartreuse;
              }
              .btn{
                  margin-top: 100px;
                  position: absolute;
                  margin-left: 20%;
              }
              .btn_D{
                  margin-top: 100px;
                  position: absolute;
                  margin-left: 10%;
              }
       
          </style>
      </head>
      <body>
          <div class="btn">
              <input type="submit" value="ativar">
          </div>
          <div class="btn_D">
              <input type="submit" value="Desativar">
          </div>
          <div class="container">
              <ul class="step-pog-bar">
                  <li class="active">Canal Dentario</li>
                  <li class="active">Limpeza</li>
                  <li class="active">Clareamento</li>
                  <li class="active">Escovação</li>
                  <li>Conclusão</li>
              </ul>
          </div>
      </body>
      </html>
    • By devfelipemonteiro
      tegcommerce - plataforma de e-commerce open source
      https://tegcommerce.org
      https://github.com/tegcommerce
      https://t.me/tegcommerce
       
      objetivo
      do brasil para o mundo a maior plataforma de e-commerce open source
       
      skills necessários
      qualquer contribuição é bem vinda
       
      acesse nosso grupo do telegram: https://t.me/tegcommerce
       
      projetos similares
      wordpress e woocommerce
      drupal
      joomla
      magento

    • By rafalbino
      Fala pessoal! Tô com uma dúvida na versão mobile do meu menu.
      A versão desktop já está tudo ok, porém, quando acesso pelo mobile, ele aparece apenas um dos campos do menu e não ele totalmente.
       
      Segue o código:

      .menu{width: 100%;height: 50px;background-color: #fff; margin-top: -65px; }
      .menu ul{list-style: none;position: relative;float: right;}
      .menu ul li {width: 200px;float: left;}
      #menu2 {width: 130px;float: left;}
      #menu3 {width: 160px;float: left;}
      .menu ul li:last-child {width: 200px;float: left;}
      .menu i {vertical-align: middle; margin-right: 2px; margin-top: -4px;}
      .menu a{padding: 15px;display: block;text-decoration: none;text-align: center;background-color: #fff;color: #151e51; vertical-align: middle;  font-size: 16px;}
      .menu ul ul{position: absolute; margin-left: 50px; visibility: hidden; } /*Atacando a ul do submenu, escondendo os campos */
      .menu ul li:hover ul{visibility: visible;  }/*Atacando a ul do submenu, passando pela li interna, mostrando os campos ocultos*/
      .menu a:hover{background-color: #fff; font-weight: 500;}/*Alterando a cor da fonte quando o mouse passa por cima*/
      #primeiro{ border-radius: 7px 7px 0px 0px;}
      #ultimo{ border-radius: 0px 0px 7px 7px;}
      .menu ul ul li{float: none;width: 200px;  }/*Deixando as linhas do submenu na vertical*/
      .menu ul ul li:last-child {float: none; width: 200px;}/*Deixando as linhas do submenu na vertical*/
      .menu ul ul li a {background-color: #f1f1f1;border-radius: 0; text-align: left; margin-bottom: -20px; color: black;} /*Alterando a cor de fundo do submenu*/
      .menu ul ul li a:hover {background-color: #f1f1f1;color: black; } /*Alterando a cor de fundo do submenu*/
      .borda {border-radius: 0;}
      label[for="bt_menu"]{padding: 5px;background-color: #222;color: #fff;font-family: 'Arial';text-align: center;font-size: 30px;cursor: pointer;width: 50px;height: 50px; margin-top: -75px;}
      #bt_menu{display: none;}
      label[for="bt_menu"]{display: none;}
       
      Agora o código da versão mobile
       
      label[for="bt_menu"]{display: block;float: right; margin-top: -70px; background: #f35270;}
          #bt_menu:checked ~ .menu{margin-left: 0;}
          .menu{margin-top: 255px;margin-left: -110%;transition: all .9s;width: 100%; }
          .menu ul{float: none;}
          .menu ul li{width: 100%;float: none;}
          .menu ul li:last-child {width: 100%;float: none; margin-top: 55px;}    
          .menu ul ul{ /*Escondendo os subitens no modo mobile*/
              position: static;overflow: hidden;max-height: 0;transition: all .9s;}
          .menu ul li:hover ul{ /*mostrando os subitens no modo mobile*/
              height: auto;max-height: 900px;}
          .menu ul ul li{width: 100%}
          .menu ul ul li:last-child {width: 100%;}
       
       
    • By vmdev
      Bom dia!
      Eu tô com um probleminha aqui, espero que alguém consiga me ajudar.
      Eu tenho dois elementos: h1 e h2, eu fiz um script para efeito de digitação pra ambos, só que eu quero que o efeito de digitação do h2 seja iniciado somente quando o h1 for terminado, ou, depois de um tempo que eu selecionar. Tentei fazer dessa forma, mas não deu certo:
      <script>                                 function typeWrite (elemento) {                                 const textoArray = elemento.innerHTML.split('');                                 elemento.innerHTML = '';                                 textoArray.forEach((letra, i) => {                                  setTimeout(function() {                                      elemento.innerHTML += letra                                  }, 75 * i)                                                                  });                                                      }                          const titulo = document.querySelector('h1')                          typeWrite(titulo);                          </script>                          <script>                             var segundos = 4;                             setTimeout ( function typeWrite (elemento) {                             const textoArray = elemento.innerHTML.split('');                             elemento.innerHTML = '';                             textoArray.forEach((letra, i) => {                              setTimeout(function() {                                  elemento.innerHTML += letra                              }, 75 * i)                                                          });                                              }, segundos * 1000);                      const titulo2 = document.querySelector('h2')                      typeWrite(titulo2);                      </script>  
       
       Alguém pode ma falar qual é o erro? Obrigado!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.