Jump to content

Question

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

Share this post


Link to post
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

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 israel@iproduce.com.br
      Olá,
      Boa noite!
      Tenho algumas vagas para motion (basicamente banner de internet animado e vinhetas para redes sociais) para a cidade do Rio de Janeiro. As vagas são temporárias (6 meses), podendo ocorrer a efetivação nesse período. É necessário estar alocado no escritório no Rio.
      Conhecimento avançado em: Adobe Animate CC, Google Web Designer, After Effects.
      Além destes programas é um diferencial conhecer a linguagens: HTML5, CSS3 e Javascript.
      Tem interesse ou conhece alguém que esteja precisando? Então manda o seu portifólio e CV para no e-mail: freela@iproduce.com.br
      Boa sorte!
    • By Ewfc2005
      Gostaria de saber como eu devo fazer para alinhar 3 imagens lado a lado, sem fazer o site deixar de ser responsivo.
      que fique igual ao desse site
       
      https://ciesalon.com/
       
    • 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 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 Vinicius Bazan
      Bom dia, Boa tarde e Boa noite!
       
        Estava eu aqui brincando um pouco com JS para entender um pouco melhor essa linguagem, pois eu preciso fazer um relógio em uma pagina HTML e um contador que aumente seu número em +1 de tempos em tempos ( no caso eu estava testando em aumentar a cada 5 segundos, considerando que esse número não vai começar do 0, pois ele teria que pegar todos os segundos que já se passaram nesse dia e dividir por 5, assim seu resultado inteiro seria exibido).
        O relógio com bastante esforço e pesquisa eu consegui fazer e está funcionando, até aqui sem dificuldades, o real problema está no contador, eu fui testar sem colocar um setInterval só para ver se o número aparece na tela e... NADA!
       Então como eu não manjo de JS e tentei fazer a partir do que eu usei pra fazer o relógio eu devo ter errado feio em muita coisa.
       
      <!DOCTYPE html> <html> <head> <title>javascript</title> <meta charset="utf-8"> <script type="text/javascript"> function relogio() { var data = new Date(); var horas = data.getHours(); var minutos = data.getMinutes(); var segundos = data.getSeconds(); if (horas < 10) { horas = "0"+horas; } if (minutos < 10) { segundos = "0"+minutos; } if (segundos < 10) { segundos = "0"+segundos; } document.getElementById("relogio").innerHTML=horas+":"+minutos+":"+segundos; } window.setInterval("relogio()",1000); // Aqui começa a função que eu tentei fazer para o contador function contador() { var data = new Date(); var horas = data.getHours(); var minutos = data.getMinutes(); var segundos = data.getSeconds(); var cont = ((minutos + (horas * 60))*60) + segundos ; document.getElementById("contador").innerHTML= Math.floor(cont/5); } </script> <style type="text/css"> #relogio { font:bold 28pt arial; display: block; margin: 100px auto; padding: 30px; background-color: #FFFF00; width: 150px; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .5); } #contador { font:bold 28pt arial; display: block; margin: 100px auto; padding: 30px; background-color: #FFFF00; width: 150px; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .5); } </style> </head> <body onload="relogio();"> <div id="relogio"> </div> <hr> <div id="contador"> </div> </body> </html>  
       Se alguém puder me ajudar eu agradeço!
×

Important Information

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