Jump to content
Diego Rinno

Preciso de Opiniões

Recommended Posts

Bom dia a todos(as)!

 

Estou finalizando um e-commerce que já venho mantendo há algum tempo pelo MercadoLivre mas agora resolvi fazer meu próprio site. Queria que olhassem e dessem sua opinião sincera do que está ruim e do que poderia melhorar, o que acham do layout de forma geral ou detalhada. Enfim, preciso de opiniões diversas pra saber se estou indo pelo caminho certo ou se excluo o site inteiro e refaço do zero, o que for necessário.

 

O site é www.rinnoshop.com. Ainda não está finalizado, quero opiniões mais relacionadas ao layout e navegabilidade, mas qualquer ideia é sempre bem-vinda também.

 

Agradeço a ajuda de quem puder e me desculpem se aqui não for a área certa pra esse tipo de coisa (se não for, por favor digam também).

 

Desde já agradeço a ajuda.

Share this post


Link to post
Share on other sites

Diego,

Vamos a alguns detalhes técnicos primeiro, ok? Veja os testes realizados com o seu site:

Vale levar todos os pontos em consideração. Realizei esses testes, pois no momento em que acessei seu site, presenciei uma certa lentidão ao carregar imagens e eventos JS.

/* Navbar */

Fiquei tentando clicar no logo para voltar a página inicial, mas percebi que existe um pequeno link ao lado. Seria preferível deixar na imagem, já que a grande maioria está acostumado com tal função. Vou detalhar por partes aqui embaixo.

  • Função return-to-index do logo não funcional (até que é de alguma importância).
  • Botão de busca bugado (diferente da altura do input). Isso presenciado no Firefox e Safari.

/* Slider */

  • Botões Anterior e Próximo fora do container do slider.

/* Produtos */

  • Excesso de sombras nas boxes (tente fazer um layout mais limpo).
  • Botões Comprar com borda nativa (sem estilo).

 

Dei umas olhadas nas páginas internas e etc e elas seguem o mesmo padrão. Tente reduzir um pouco a quantidade de sombras, radius e etc...

Percebi em algumas partes que o topo é roxo, o fundo é preto (imagem), uma parte é cinza escura, outra claro, outra mais escuro, ai vem botões laranjas, mais imagens e no fim das contas vira uma confusão de cores e conteúdo que atrapalha um pouco.

Outro ponto que também seria interessante dizer: Algumas transitions levam tempo demais para ocorrerem.

Abraços!

  • +1 2

Share this post


Link to post
Share on other sites

Agradeço as opiniões.

 

Quanto ao banner (que acredito estarmos falando do slide) ocupar a tela inteira, é esse mesmo o objetivo dele.

 

As questões mais técnicas, corrigi tudo que foi possível por agora, aumentou bastante a velocidade de acesso à página e tudo mais.

 

Sobre o excesso de sombras e radius, acredito que agora esteja realmente melhor. Facilitou a visualização, a tornou mais "leve", mais suave.

 

Corrigi também os botões do slider e adicionei a opção return to index no logo da loja. Isso é realmente útil. Eu removi e nem me lembro o motivo kkk. Enfim, o slider vai mudar, estou criando um novo, mais eficiente. Depois posto aqui pedindo sugestões também.

 

O botão "Comprar" é que eu ainda acho mais interessante estilizado, mas fiz algumas alterações e suavizei bastante ele, tirei as bordas e deixei só o fundo e a fonte estilizados.

 

Vou mexer na página de visualização de produto assim que chegar em casa também, remover um pouco das sombras e suavizar mais a visualização.

  • +1 1

Share this post


Link to post
Share on other sites

Diego,

Acabei de dar uma olhada no seu site e vi que realmente melhorou bastante. Carregou mais rápido, o layout está mais limpo, etc... Não vou elogiar muito e dizer que está 100% huashuahushuahsuahu.

Para construir um site cada vez melhor, é necessário visualizar muitas referências, extrair conteúdo (cores, logos, etc) de um site que tenha gostado (mas sem copiar 100%). O ideal é que você pegue essas inspirações, mescle e torne algo único. Vou deixar alguns links pra que você pegue algumas inspirações.

 

Em questão de cores, existem alguns sites também que disponibilizam algumas cores "tendência". Vou deixar alguns deles também aqui abaixo para que dê uma olhada e se inspire.

 

Agora vamos aos detalhes técnicos novamente. Veja como ficou a pontuação atual do seu site.

 

Boa sorte e abraços!

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 devsp
      Olá. Sou desenvolvedor e criei o site DevsChannel há quase 2 anos. Tenho acompanhado os relatórios do Google Analytics, e o site está com um engajamento muito baixo. Olhando a Análise de coorte, verifiquei que o número de pessoas que volta a acessar o site nas primeiras semanas após o primeiro acesso está muito abaixo da média, pelo que andei lendo em minhas pesquisas sobre o assunto.
       
      A DevsChannel é um site de tutoriais de programação. É um projeto pessoal meu, eu mesmo faço os tutoriais e não queria deixar o projeto morrer, porque faço com prazer. Só que ao mesmo tempo, é desmotivador ver um engajamento tão baixo. Se alguém puder dar uma olhada no site, e me dar um review sincero do que acha que pode estar contribuindo para a rejeição do site, eu agradeceria muito.
    • By jcvlanova
      Galera, dei uma olhada no Site https://www.fastly.com/ e percebi que a página é estruturada em tópicos circundados, divididos por uma espécie de caixas, boxes formados por linhas e curvas, alguém saberia me dizer como é possível fazer essas linhas curvas uma página html ???
    • By ViniciusRamoa
      Eu peguei um site já pronto em laravel, minha ideia era só pegar o site que o cara distribuiu e mudar layout aos poucos para se adaptar para mim, eu sei, digamos, o intermediário de css e básico de Php e html, e o que eu quero alterar é só o básico como: cores, background e etc, mas mesmo eu alterando os arquivos css ou até mesmo apagando todos os arquivos css, NADA muda no site, como se fosse inútil os arquivos css, mudar a aparência no laravel é diferente? Qual o método?
      Vale lembrar que possui vários arquivos .blade (index.blade, footer.blade etc), isso tem algo a ver? Obrigado
    • By ramonjba
      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. 
       


    • 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>>>>>>>>
×

Important Information

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