Jump to content
ramonjba

Collapsible Materialize - Layout

Recommended Posts

Olá pessoal. Estou desenvolvendo uma especie de monitoramento, estou utilizando o MATERIALIZE, desta forma, optei por não trabalhar com responsividade, pois preciso do máximo de informações possíveis na tela, seja desktop ou mobile, fazendo o ajuste de zoom se preciso. Fiquei cerca de dois anos sem programar, eu havia feito esse projeto para meu TCC, porém após finalizar, deixei parado e acabei perdendo. Com o tempo, algumas ideias em relação ao projeto também mudaram, e para apresentar a informações das `Torres de Internet`, utilizei o collapsible-header conforme imagem `projeto_monitor`, pois, ao clicar em cima do `equipamento`, ele apresenta informações relacionadas a ele. Estou tendo problemas para alinhar estes `collapsible-header ` pois preciso preencher toda a tela, sem deixar espaçamentos. Para isso, fiz uma classe CSS contendo: 

 

.row .col.quadroTorre1 {
    margin-top: -10%;
    margin-bottom: 10%;
}
.row .col.quadroTorre2 {    
    margin-top: -7.3%;
    margin-bottom: 10%;
}
.row .col.quadroTorre3 {
    margin-top: -30%;
    margin-bottom: 10%;
}
.row .col.quadroTorre4 {
    margin-top: -1.7%;  
    margin-bottom: 10%;
}

 

E fiz uma verificação no código, para ver qual o numero de equipamentos que a `Torre` que está acima tem. Porém, como podemos observar, na segunda linha funcionou preenchendo os espaços, mas pulando para a terceira linha, já possui uma lacuna em branco, onde deveria estar situado o elemento. Além disso, os elementos da segunda linha, acabam se sobrepondo, conforme imagem `projeto_sobrepor`. Como fiquei cerca de 2 anos sem programar, estou encontrando algumas dificuldades e empacando nelas. A parte de front-end é a que gera maior dificuldade. Se alguém puder me auxiliar, agradeço. 

 

Edit: Se alguém tiver dicas de como posso melhorar o preenchimento das lacunas em branco. 

 

projeto_monitor.jpg

projeto_sobrepor.jpg

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Alvaro_php
      Pessoal boa noite
      Estou começando no PHP e estou com uma dúvida para poder enviar uma confirmação de uma página para outra e não quero mandar pela URL, para não ficar visível ao usuário
      Tenho um captcha e nele estou fazendo uma comparação para poder jogar para uma outra página , caso o código esteja certo
      <?php session_start();
          if( $_SESSION['captcha'] == $_POST['captcha']){
          header("location: emitir_titulo1.php");
          }else{
              echo "<h1>Erro - Código digitado errado</h1>";
          }
      ?>
      Até ai tudo bem esta fazendo certinho, o que eu quero é que na minha emitir_titulo1.php eu consiga fazer uma identificação qqer, onde demonstre que o usuário passou pelo captcha e não jogou o caminho completo até a página emitir_titulo1
      Tentei abri a session no emitir_titulo1 porém não deu certo, pois ela vem em branco, e quando coloco o caminho inteiro da página ele abre normalmente
      Tentei usar o $_POST, más não tem como ou não sei enviar mesmo, pois estou chamando a página pelo header
       
       
      Então mudei e tentei criar um arquivo txt com a palavra confirmado
      <?php session_start();
          if( $_SESSION['captcha'] == $_POST['captcha']){
              $fp = fopen("seguranca.txt","a+");
              $escreve = fwrite($ft,"confirmado");
              fclose($ft);
              header ("location: emitir_titulo1.php");
          }else{
              echo "<h1>Erro - Código digitado errado</h1>";
          }
      ?>
       
      e na página emitir_titulo1.php coloquei
      <?php  
          $arquivo = "seguranca.txt";
          $ft=fopen($arquivo,"r");
          $conteudo=fread($ft,filesize($arquivo));
          fclose($ft);
          
          if ($conteudo == 'confirmado')
          {
              unlink("seguranca.txt");
          }else{
              header("location: verificacao.php");
          }
      ?>
       
      Quando a página para executar e digito o código de verificação do captcha, aparece a mensagem abaixo
      Warning: fwrite(): supplied argument is not a valid stream resource in caminhodomeuservidor\valida.php on line 5
      Warning: fclose(): supplied argument is not a valid stream resource in caminhodomeuservidor\valida.php on line 6
      Warning: Cannot modify header information - headers already sent by (output started at caminhodomeuservidor\valida.php:5) in caminhodomeuservidor\valida.php on line 7
       
      Más quando coloco o caminho completo da minha página emitir_titulo1.php, ele continua abrindo a página normalmente, e o arquivo gerado esta em branco
       
      Alguém pode me dar uma ajuda, estou o dia todo nisso, o bom é que pesquisei bastante coisa, porém não tenho muito tempo para finalizar
       
      Desde já agradeço a todos
    • By CharlieAldrin
      Estou tentando fazer um chat, e nele é necessário saber se um usuário continua na página do chat, para caso ele saia informar o outro usuário.
      Encontrei em alguns lugares como solução fazer um ajax conferindo se o usuário está "dando sinal de vida" de 10 em 10 segundos (por exemplo), porém não entendi como fazer isso e nem como colocar no código. Alguém pode me ajudar por favor? 
      Ou me informar se existe alguma forma melhor de conferir isso?
       
      Valeu desde já :) 
    • By Cesar Melo
      Olá. Gostaria de uma opinião sobre onde focar meus estudos para trabalhar com PHP.
      Atualmente tenho conhecimentos com a linguagem PHP, e os seguintes frameworks: Bootstrap e Jquery.
      Recentemente fiz um curso de Laravel+materialize e gostei muito desse framework. Meu primeiro contato com framework para backend e pretendo utilizar o Laravel daqui pra frente nos meus estudos.
       
      Minha questão é a seguinte, quero dar continuidade aos meus estudos para me qualificar para o mercado de trabalho, mas não sei exatamente os próximos cursos que vou estudar.
      Não sei se atualmente há uma combinação de frameworks mais utilizada ou requisitada no mercado de trabalho. Ex: Laravel+vue+bootstrap, ou laravel+angularjs+materialize, tipo isso.
       
      Dei uma pesquisada no google e youtube, e notei que não há muito conteúdo de cursos por exemplo de Laravel+angularjs.
      Procurando algumas vagas de emprego, notei que há grande procurar para profissionais com qualificação em Laravel, e tambem grande procura para profissionais com qualificação em AngularJs, porém vagas distintas. Acho que não vi nenhuma vaga que peça Laravel+AngularJs.
       
      Alguém aí pode me passar uma visão ou dar sua opinião sobre isso, para eu focar meus estudos? Alguém sabe o que andam usando bastante? Ou que seja indicado de trabalhar em conjunto com PHP?
       
      Ah, uma observação... atualmente meu foco são de projetos voltados para sistemas, admin, etc. Não tenho muito perfil para projetos de marketing ou que exijam um frontend "lindo". rsrs.
       
      Grato...
    • By ianluis
      Layout Responsivo Desalinhado: Estou criando um site de filmes e a cada momento que incluo algo o layout se estica para a direita ficando impossível de concertar sou novato e não sei onde estou errando me ajudem.
       
      Estou tentando criar um site de filmes responsivo mais o layout estar completamente desalinhado estirando a todo momento que incluo alguma  imagem para a direita me ajudem por favor.
       
       
      Codigo CSS abaixo:
       
      *{
          
        padding: 0px;
        margin: 0px;
      }
      a{
          text-decoration:none;
          color:#999;
      }
      body{
          font-family: arial;
          color:#eaeeef;
          background-color: #36454f; /*Fundo Escur0*/ 
          margin-left: -100px;
          margin-top: -16px;

      }
      .font400{
      font-size: 4em;

      }
      .font350{
      font-size: 3.5em;
      }     

      .font300 {
      font-size: 3em;
      }
      .font200 {
      font-size: 2em;
      }
      .font180 {
      font-size: 1.8em;
      }
      .font12{
          font-size:12px;
      }

      .font10{
          font-size:10px;
      }
      .font18{
          font-stretch: 18px;
      }
      .branca{
          color:#FFFFFF
      }

      .cinza {
          color: #CBCCCD;
      }
      .vermelho_1{
          color:#ff0000;
      }
      ul{
          list-style:none;
      }
      /*Imagem do Menu*/
      img{
          width:35px;
          margin-left: 100px;
          margin-top: 10px;
          
      }
      input[type="checkbox"]
          
      {
          display:none;
      }
      nav
      {
          background-color: rgba(16,16,16,.5);
          width:150px;
          height:100%;
          left: -150px;
          position: absolute;
          transition: all .5s;
          
          
      }
      input[type="checkbox"]:checked ~ nav
      {
          transform: translateX(150px);
      }
      ul{
          top:80px;
          position:absolute;
          width: 100%;
      }
      a{
          
          background: block;
          padding:10px 5px;
          color: white;
      }
      a:hover{
           background-color: rgba();
           color: black;
      }
      label{
          padding: 15px;
          position: absolute;
          z-index:1;
          /*icone*/
      }

      /* Formatação de chamada principal da imagem em destaque*/
      .chamada{
          background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://img.youtube.com/vi/NOEQ7wVKIew/maxresdefault.jpg);
          background-position: center center; /* Centraliza a imagem no centro da tela*/
          background-repeat: no-repeat;/* Não repete a imagem*/
          background-size: cover; /* Ocupa toda a tela sem distorcer a imagem*/
          background-attachment: fixed;
          height: 100vh; /*100% do view height*/
          display: flex; 
      }   
      .area_chamada {
          margin: auto;
          margin-bottom:150px;
          text-align: center;
      }
      h2 {
          margin: 0px;
      }
      .titulo{
           font-family: 'Open Sans', sans-serif;
           text-transform: uppercase;
           line-height: 1.1em;
           font-weight: 400;
           text-shadow: 2px 3px 0px rgba(0,0,0,.8);
           color: #CBCCCD;
           
           
      }
      .subtitulo{
          font-family: 'Open Sans', sans-serif;
          text-transform: uppercase;
          line-height: 1.1em;
          font-weight: 400;
          text-shadow: 2px 3px 0px rgba(0,0,0,.8);
          height: 80px;
      }
      .parte_superior{
          /*banner de 280px na largura e 120px*/
          width: 100vw;
          height: 0px;
          display: flex;
          align-items: center;
          margin-top: 17px;
          margin-left: 50px;

      }
      /*imagem do logo*/
      .logo> img {
           width:250px;
           margin-top: 0px ;
                margin: 160px;
           
      }
      .pesquisa {
       width:500px;
       height:40px;
       margin:200px auto;
       display: flex;
       margin-top: 80px;
       margin-left: 40px;
       border-bottom-width: 2px;
      }
      #texto {
       width:520px;
       height:50px;
       float:left;
       font-family:Arial, Helvetica, sans-serif ;
       font-size:18px;
       background: #151515;
       border: #151515;
       border-radius: 6px 0px 0px 6px;
       display: flex;
       color: white;
       justify-content: space-around;
       
      }
      #texto:focus {
       border: solid 2px #1f1f1f;

      }
      .btn {
       height:34px;
       width:17px;
       background:#ff0000;
       padding:6px 8px;
       cursor:pointer;
       display: flex;
       margin-top: -10px;
       border: solid 0px #ff0000;
       border-radius: 0px ;
       margin-left: 0px;
       
      }
      button{
          padding: 12px;
          border-width: 0px;
          border-radius: 0px 6px 6px 0px;
          height: 50px;
          background: #ff0000;
          width: 60px;
      }
         
         /*Move todo o Slide*/
      .miniaturas{
          
           height: 290px;
               width: 180px;
               display: flex;
               padding: 0px 2%;
               margin-top: -250px;
               margin-left: 90px;
               margin-top: -100px;
      }
      /*Move todo o menu do slide*/
      .horizontal{
             display: flex;
             justify-content: center ;
              margin-left: 70px;
             justify-content: space-around;
             width: 200px;
             color: dimgrey;
             margin-top: 450px;
              
      }
      .ativo{
          margin:0px;
          color:white;
      }
           
         .black_clover> img{
               
               height: 290px;
               width: 180px;
               display: flex;
               margin: 10px;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;
               }
      .black_clover > img:hover{
          opacity: 0.2;
      }

      .one_punch_man> img{
               height: 290px;
               width: 180px;
               display: flex;
               margin: 10px;
                position: relative;
               z-index: 1;
               transition: all 0.5s linear;
        }     
          .one_punch_man > img:hover{
          opacity: 0.2;
      }
      .Dororo> img{
          height: 290px;
               width: 180px;
               display: flex;
               margin: 10px;
                position: relative;
               z-index: 1;
               transition: all 0.5s linear;
        }     
          .Dororo > img:hover{
          opacity: 0.2;
      }
      .shingek_3>img{
            height: 290px;
               width: 180px;
               display: flex;
               margin: 10px;
                position: relative;
               z-index: 1;
               transition: all 0.5s linear;

        }     
          .shingek_3 > img:hover{
          opacity: 0.2;
      }
      .Mob>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin: 10px;
                position: relative;
               z-index: 1;
               transition: all 0.5s linear;

        }     
          .Mob > img:hover{
          opacity: 0.2;

      }
      .kimetsu_no_yaiba>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .Kimetsu_no_yaiba > img:hover{
          opacity: 0.2;  
      }
      .figuras {
          display: flex;
          margin-left: 50px;
          justify-content: space-between;
          padding: 4%;
          height: 290px;
          width: 180px;

          
          }
              figure {
                    margin: 0px;
                    display: flex;

      }
      figcaption{
          width: 180px;
          height: 290px;
          background-color: black;
          display: flex;
          min-height:290px;
          margin: 10px;
          margin-top: -300px;
          
      }

      .grana{
          display: flex;
      }
      .baner{
          padding-top:   100px;
          display: flex;
          
      }
      /*move o banner e a primeira coluna de animes*/
      .bittube>a>img{
          display: flex;
          width: 400px;
          margin: 0px 580px; 
          margin-top: 20px;

      }
      .posts{
          margin-top:  100px;
          padding: 0px -400px;
          display: flex;
          margin-left: 180px;
          

      }
      .primeira{
          display: flex;
      }

      .primeira > ul > li{
          display:inline-block;
          margin-top: 1220px;
          margin-left: 20px;
      }

      .One_Piece>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .One_Piece> img:hover{
          opacity: 0.2;  
      }
      .tate_no_yusha>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .tate_no_yusha> img:hover{
          opacity: 0.2;  

      }
      .naruto_shippuden>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .naruto_shippuden> img:hover{
          opacity: 0.2;  

      }
      .Nanatsu_no_taizai>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .Nanatsu_no_taizai> img:hover{
          opacity: 0.2;  

      }
      .dragon_ball_super>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .dragon_ball_super> img:hover{
          opacity: 0.2;  

      }
      .boku_no_hero_academia>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .boku_no_hero_academia> img:hover{
          opacity: 0.2;  
      }
       /*Move toda a segunda coluna de animes*/
      .coluna{
          margin-top:   50px ;
          margin-left: 180px;
          display: flex;
      }
      .segunda{
          display: flex;

      }

      .boruto>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .boruto> img:hover{
          opacity: 0.2;  

      }

      .isekai_maou>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .isekai_maou> img:hover{
          opacity: 0.2;  

      }

      .bleach>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .bleach> img:hover{
          opacity: 0.2;  

      }

      .fairy_tail>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .fairy_tail> img:hover{
          opacity: 0.2;  
      }

      .tensei_shitara>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .tensei_shitara> img:hover{
          opacity: 0.2;  
      }

      .Tokyo_Ghoul>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .Tokyo_Ghoul> img:hover{
          opacity: 0.2;  

      }
       /*Move toda a  coluna de séries*/
      .coluna_series{
          margin-top:   120px ;
          margin-left: 180px;
          display: flex;
      }
      .primeira_series{
          display: flex;

      }

      .primeira_series > ul > li{
          display:inline-block;
          margin-top: 2020px;
          margin-left: 20px;
      }

      .Atirador>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .Atirador> img:hover{
          opacity: 0.2;  
      }

      .Game_of_thrones>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .Game_of_thrones> img:hover{
          opacity: 0.2;  
      }

      .La_casa_de_papel>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .La_casa_de_papel> img:hover{
          opacity: 0.2;  
      }

      .lucifer>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .lucifer> img:hover{
          opacity: 0.2;  
      }

      .sons_of_anarchy>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .sons_of_anarchy> img:hover{
          opacity: 0.2;  
      }

      .vikings>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .vikings> img:hover{
          opacity: 0.2;  

      }
       /*Move toda a  coluna de séries*/
      .coluna_series2{
          margin-top:   50px ;
          margin-left: 180px;
          display: flex;
      }
      .segunda_series2{
          display: flex;

      }

      .segunda_series2 > ul > li{
          display:inline-block;
          margin-top: 2020px;
          margin-left: 20px;
      }

      .The_purge>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .The_purge> img:hover{
          opacity: 0.2;  
          }

      .titans>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .titans> img:hover{
          opacity: 0.2;  
          }

      .the_big_bang_theory>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .the_big_bang_theory> img:hover{
          opacity: 0.2;  
          }

      .o_último_guardião>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .o_último_guardião> img:hover{
          opacity: 0.2;  
          }

      .legends_of_tomorrow>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .legends_of_tomorrow> img:hover{
          opacity: 0.2;  
          }

      .chernobyl>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .chernobyl> img:hover{
          opacity: 0.2;  

      }
       /*Move toda a  coluna de séries*/
      .coluna_fimes{
          margin-top:   120px ;
          margin-left: 180px;
          display: flex;
      }
      .segunda_filmes{
          display: flex;

      }

      .segunda_filmes > ul > li{
          display:inline-block;
          margin-top: 2820px;
          margin-left: 20px;
      }

      .avangers_Age>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .avangers_Age> img:hover{
          opacity: 0.2;  
          }

      .capitan_marvel>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .capitan_marvel> img:hover{
          opacity: 0.2;  
      }

      .capitao_america>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .capitao_america> img:hover{
          opacity: 0.2;  
          }

      .guerra_civil>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .guerra_civil> img:hover{
          opacity: 0.2;  
          }
      .doutor_estranho>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .doutor_estranho> img:hover{
          opacity: 0.2;  
          }

      .hulk_o_inacreditavel>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .hulk_o_inacreditavel> img:hover{
          opacity: 0.2;  
          }
      .coluna_fimes1{
          margin-top:   50px ;
          margin-left: 180px;
          display: flex;
      }
      .segunda_filmes1{
          display: flex;

      }

      .segunda_filmes1> ul > li{
          display:inline-block;
          margin-top: 2820px;
          margin-left: 20px;
      }
      .iron_man>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .iron_man> img:hover{
          opacity: 0.2;  
          }
          .thor>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .thor> img:hover{
          opacity: 0.2;  
          }
          .a_lenda_do_golem>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .a_lenda_do_golem> img:hover{
          opacity: 0.2;  
          }
          .maligno>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .maligno> img:hover{
          opacity: 0.2;  
          }
          .as_trapaceiras>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .as_trapaceiras> img:hover{
          opacity: 0.2;  
          }
          .homem_de_ferro2>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .homem_de_ferro2> img:hover{
          opacity: 0.2;  
          }

          .rodape{
              padding: 25px;
              color: white
              font-size:1.5em;
              display: flex;
              padding-top:   3600px;
              padding-left: 350px;

          }
          .rodape li{
              margin-right:20px;
              padding-top: 50px;
              
          }
          .parceria{
              display: flex;
              padding-top:   3600px;
              padding-left: 350px;
              }
          .parceria li{
              margin:-20px 10px;
              display:flex;
       
       
       
      <<<<<<<<Codigo Html abaixo>>>>>>>>
    • By lukaizh
      Olá Galera,
       
      Estou iniciando um e-commerce pela Tray,e não entendo muito bem de css 
      eu gostaria de saber se tem como eu mudar o menu lateral esquerdo, para deixar ele na horizontal.
       
      e teria mais uma dúvida, se há alguma maneira de importar o site para o photoshop e depois pegar o css das camadas.
×

Important Information

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