Jump to content
Sign in to follow this  
Pushing Box Studios

Pushing Box Studios - Projeto Dungeon Crawler (Mobile)

Recommended Posts

Olá Masters, estou trazendo para vocês um jogo que a Pushing Box Studios vem produzindo com muito orgulho. O jogo é 100% nacional e conta com uma equipe de 5 colaboradores (3 artistas, 1 programador e 1 profissional de marketing). Pretendo sempre que possível, trazer novidades sobre o nosso projeto.

 

 

Sobre o jogo:

O jogo que está em desenvolvimento atualmente pela Pushing Box Studios tem como tema principal o estilo Dungeon Crawler. Ele será um jogo mobile com suporte a Android e IOS. Conta com 3 artistas entre concept, modelagem e pixel. Um programador de Unity e um agente do marketing (eu ^.^).

Vamos ao que interessa:

1- O jogo não se chamará Dungeon Crawler

O nome Dungeon Crawler é um estilo de jogo, algumas pessoas conhecem bem esse estilo e seu nome, mas para uma maioria que desconhece, devemos esclarecer o que se trata.

Dungeon Crawler é um estilo de jogo onde o personagem principal se encontra em Dungeons (cavernas, calabouços ou masmorras) que geralmente são locais semelhantes a grandes labirintos com vários monstros para se combater e diversos tesouros para se encontrar.

2- Por que demora tanto para se concluir?

Possuímos uma equipe pequena e prezamos pela qualidade do nosso trabalho. É válido lembrar que estamos em constante aprendizado, logo, melhorias consideradas fundamentais serão realizadas, o que causa incremento no escopo do projeto. Contudo, isso é interessante para o crescimento teórico e prático da empresa, assim como o valor agregado do produto final.

devblog.png?resize=655%2C2464Update 14/10/2015

Share this post


Link to post
Share on other sites

Atualização da semana: Desenvolvimento do cenário

Screenshot31.png?resize=660%2C371

O projeto contará com geração procedural de Dungeon, estamos trabalhando arduamente para conseguir cenários diversificados e chamativos. Queremos dar o máximo de diversão possível para aqueles que baixarem o jogo.

cradlestone_outside.png?resize=660%2C440



A escolha de cenário sempre é uma preocupação que temos, Victor Feitosa sempre gosta de fazer diversas opções para que possamos olhar e escolher os cenários desejados.

Artes da semana

cradlestone.png?resize=627%2C418

Sketch de algumas das torres que estão no projeto Dungeon Crawler – Victor Feitosa.

RoomConcept2.png?resize=660%2C467

RoomSConcept.png?resize=660%2C467

SKETCH do interior das salas do Projeto Dungeon Crawler – Lucas Rebelos s​

Share this post


Link to post
Share on other sites
Atualizações da semana




Estamos atualmente, elaborando novos cenários, para isso precisamos passar por seis etapas básicas


Primeira etapa – Elaboração do conceito do cenário, é importante definir como será o cenário, quais suas descrições minuciosas e porque o cenário precisa ser dessa maneira, isso implica em um texto descritivo que é elaborado pelo idealizador da ideia.


519591707.jpg?resize=507%2C338


Segunda etapa – Criação dos sketchs e concepts da área. Essa etapa é importante para que o modelador consiga reproduzir em 3d a ideia a partir de desenhos que geralmente são alterados até chegar em um ponto de concordância da descrição original. Sem ela, o modelador poderia se perder facilmente. Para reconstruir um modelo 3d, se não entrar em concordância com a descrição do cenário, toma bastante tempo e esforço da equipe.


rooms2-1.png?resize=660%2C467


Terceira etapa – Modelagem em 3d do cenário. Criam-se os modelos 3d dos objetos que compõe o cenário. Com o resultado da modelagem e posicionamento dos objetos, se alcança o senso de profundidade e dessa maneira pode-se ver a cena livremente. Nessa etapa o modelador usa os sketchs e concepts para ter o norte de como deverá ficar.


Cenario-01-Blender-Image.png?resize=660%


Quarta etapa – Texturas e materiais. Para implementar essa parte, é preciso entender que modelos 3d precisam ser texturizados para que tenham aspectos naturais. Por exemplo; caso você esteja com um modelo de rochas, você precisa criar a textura certa para colocar nele, dessa maneira os jogadores estarão mais convictos da representação dos objetos ali situados. Além disso o material fornece o comportamento do objeto diante a luz.


uv_checker-large.png?resize=660%2C496


Quinta etapa – Iluminação e Partículas. O mundo 3d não é tão real quando não se tem a iluminação adequada. Você precisa simular a luz, seja ela do sol, ou de alguma outra fonte, como um poste. Todas as luzes precisam estar bem posicionadas e emitindo as cores corretas para que se obtenha o resultado desejado. Para finalizar, efeitos de partículas dão um aspecto vivo ao cenário, simulando detalhes como: fogo, fumaça, poeira e etc.


maxresdefault-1.jpg?resize=660%2C371


Sexta etapa – Implementação. Uma vez concluída a construção do cenário, os programadores ficam responsáveis em fazer as interações das entidades do jogo (personagens e criaturas) com o cenário e seus mecanismos. Logo, programam-se colisões entre objetos, utilização de objetos, NPCs e seus comportamentos na cena.


Screenshot00.png?resize=660%2C373


Cenários sendo desenvolvidos:

cradlestone_final_1.png?resize=660%2C495


Entrada de uma das torres que se encontram no Dungeon Crawler. Cenário ainda em construção pelo Victor Feitosa.


rooms2.png?resize=660%2C467


Sala superior da primeira torre no projeto Dungeon Crawler. Cenário ainda em construção pelo Lucas Rebelo.


Sketch e concept artes da semana:

details.png?resize=660%2C467


Sketch dos possíveis baús que serão utilizados no Projeto Dungeon Crawler, criado pelo Lucas Rebelo.




tochas.png?resize=660%2C467


Sketch das possíveis tochas que serão utilizados no Projeto Dungeon Crawler, criado pelo Lucas Rebelo.



  • +1 1

Share this post


Link to post
Share on other sites

Esse design ficou muito massa.

 

Eu sei ótimos locais para vocês compartilharem esse projeto, e tenho umas sugestões para o CSS do site (o @media and screen em CSS, assim meter display otimizado para dispositivos mobile).

 

Boa sorte!

Share this post


Link to post
Share on other sites

ATUALIZAÇÃO DA SEMANA

 

Projeto Dungeon Crawler

Hoje estamos mostrando alguns dos monstros que terão no projeto Dungeon Crawler, todos estes foram desenhados pelo artista Lucas Rebelo. Essas referências serão atribuídas a monstros que serão pixelizados pelo Thiago Allan.

Cada monstro foi desenhado de 3 formas diferentes, uma delas será escolhida para estar no projeto, as demais poderão ser aproveitadas em outra parte do projeto.

3 opções do Golem de Pedra:

golem-de-pedra.png?resize=660%2C355

3 Opções de Ogro:

Ogro.png?resize=660%2C306

3 Opções de Zombie:

zombie.png?resize=634%2C398

 

É importante termos diversas opções para que possamos escolher da maneira mais proveitosa os próximos monstros do jogo.

Qual você escolheria?

Share this post


Link to post
Share on other sites

Na minha opinião:

 

Golem de pedra = 1 ou 3, na verdade, todos são ótimos;

 

Ogro: 1, porque é muito zoado!;

 

Zombie: 2 ou 3.

 

----

A gente não manja muito de CSS do mas dá certo! Quais locais você acha que deveríamos compartilhar o projeto?

 

Nós agradeceríamos as dicas rs.

 

atelier801.com/forums = Off topic (sessão)

new-game-plus.com

https://www.facebook.com/groups/jogosindie/ - Criadores de jogos Indie, Facebook (grupo).

Share this post


Link to post
Share on other sites

Obrigado pela sua opinião nós levaremos em consideração.

 

Na minha opinião:

 

Golem de pedra = 1 ou 3, na verdade, todos são ótimos;

 

Ogro: 1, porque é muito zoado!;

 

Zombie: 2 ou 3.

 

----

 

atelier801.com/forums = Off topic (sessão)

new-game-plus.com

https://www.facebook.com/groups/jogosindie/ - Criadores de jogos Indie, Facebook (grupo).

Share this post


Link to post
Share on other sites

Uau! Quero TESTAR!

 

Eu tive uma ideia too, quando o jogador derrubar um inimigo e existirem mais do que 2 inimigos na mesma localização do jogador, um dos inimigos poderiam levantar os derrubados e um outro ir atacar o jogador, do mesmo tipo, os inimigos mais avançados poderiam fazer técnicas com os mesmos, por exemplo: pegar um parceiro do lado para fazer de um bastão (girando ele para bater no jogador).

 

Espero que isso seja legal!

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
Sign in to follow this  

  • Similar Content

    • By alex2santos
      Meu site WordPress não está responsivo no celular, e não consigo resolver esse erro. Alguém pode me ajudar?
      http://moveiscomplemento.com/categoria-produto/beleza-e-saude/

    • By Everton C.F.
      Boa tarde Devs.

      Ja programo para Desktop usando Delphi e WEB com PHP, mas surgiu uma oportunidade de começar a desenvolver para MOBILE e ai me veio a dúvida de todo INICIANTE DEV MOBILE. O que usar???

      Muitos devem ter tido a duvida também na hora de escolher um framework para desenvolver APP´s híbridos para rodar no IOs e Android.. Qual framework usar!!!

      Ionic / PhoneGap / Xamarin / JQuery Mobile / React Native / Flutter ("será que esse é o caminho") ou há outro framework melhor que está sendo usado??? O que seria mais indicado já que estou iniciado, e gostaria de utilizar interface responsiva; conexão com banco de dados e disponibilizar o APP para PlayStore e AppStore.

      Agradeço a atenção de quem possa deixar comentário com sua experiência.
      Obrigado.
    • By Igor Monteiro
      Bom dia meus amigos tudo joia?
      Alguém ai sabe configurar o site para já abrir na versão desktop no celular?
      Meu CSS desconfigura todo quando abre pelo mobile e acabei de testar quando abro a versão do computador fica normal então gostaria de saber se da pra colocar algum código que faça isso automaticamente?
       
      Muito obrigado, abraços.
    • By rodbacana
      Boa noite senhores(a),
       
      estou iniciando agora com react native e firebase, estou tentando criar uma aplicação 
      onde você loga com e-mail e senha, logo após irá aparecer uma lista com as ações da bolsa de valor pra que você possa escolher uma delas.
      Quando clicar sobre qualquer uma, será exibido um gráfico com as oscilações, e o usuário poderá criar um alerta que quando a ação atingir uma valor(seja ele positivo ou negativo)
      o celular dispare uma alerta.
       
      A questão é: a tela de login e as validações, eu consegui fazer. Mas não faço a mínima idéia de como criar os gráficos baseados no consumo de uma api rest que eu tenho aqui.
       
      Alguém pode me ajudar ?
       
    • 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.