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 AlexandrePrezzi
      Pessoal, estou com um problema em um menu (nav) que possui 2 níveis
      Peguei esse código "pronto" porém está com algo que não consigo entender
       
      O link do segundo nível quando clica não redireciona para a página desejada ,  porém se eu clicar e pedir para abrir em nova guia dai ele funciona..
       
      Vou colocar o código aqui (tentei deixar o mais simples possível,  com apenas os itens a serem testados)
       
      Fico no aguardo
      <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script> $(document).ready(function () { $('.navbar .dropdown-item').on('click', function (e) { var $el = $(this).children('.dropdown-toggle'); var $parent = $el.offsetParent(".dropdown-menu"); $(this).parent("li").toggleClass('open'); if (!$parent.parent().hasClass('navbar-nav')) { if ($parent.hasClass('show')) { $parent.removeClass('show'); $el.next().removeClass('show'); $el.next().css({"top": -999, "left": -999}); } else { $parent.parent().find('.show').removeClass('show'); $parent.addClass('show'); $el.next().addClass('show'); $el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4}); } e.preventDefault(); e.stopPropagation(); } }); $('.navbar .dropdown').on('hidden.bs.dropdown', function () { $(this).find('li.dropdown').removeClass('show open'); $(this).find('ul.dropdown-menu').removeClass('show open'); }); }); </script> <style> .navbar .dropdown-toggle, .navbar .dropdown-menu a { cursor: pointer; } .navbar .dropdown-item.active, .navbar .dropdown-item:active { color: inherit; text-decoration: none; background-color: inherit; } .navbar .dropdown-item:focus, .navbar .dropdown-item:hover { color: #16181b; text-decoration: none; background-color: #f8f9fa; } @media (min-width: 767px) { .navbar .dropdown-toggle:not(.nav-link)::after { display: inline-block; width: 0; height: 0; margin-left: .5em; vertical-align: 0; border-bottom: .3em solid transparent; border-top: .3em solid transparent; border-left: .3em solid; } } </style> </head> <body> <div class="navbar navbar-expand-md navbar-dark bg-dark mb-4" role="navigation"> <a class="navbar-brand" href="#">#####</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Testar</a> <ul class="dropdown-menu" aria-labelledby="dropdown1"> <li class="dropdown-item" ><a href="http://www.google.com">Google</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Submenu</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1"> <li class="dropdown-item"><a href="http://www.google.com">Google</a></li> </ul> </li> </ul> </li> </ul> </div> </div> </body> </html>  

    • By ernestovm
      Seguinte. Eu não, mas acho que TODOS os desenvolvedores estão no mato sem cachorro no que se refere a esse problemão, que é a atualização do site lá no browser do seu usuário/visitante. Seja no acesso pelo computador e, pior ainda, pelo celular.
      Quando altero o arquivo stylo.css ou alguma imagem o browser, principlmente o Google Chrome NÃO ATUALIZA. No computador, só atualiza se eu teclar CTRL+F5, mas se pensarmos no visitante não dá né? "Nivelando por baixo", imagine aquele visitante do seu site que não entende bulufas... Vou ter que colocar no site um aviso pra todo mundo apertar CTRL+F5 para atualizar a página? Quando? Sempre? Um INFERNO.
      E quanto ao acesso do visitante pelo celular? Pior ainda.
      Então estou à procura de uma solução transparente ao usuário. No que se refere às imagens, encontrei soluções razoáveis, mas quanto ao arquivo CSS, nada encontrei.
      Se alguém souber de alguma "mágica" que resolva esse problema, compartilhe. TODOS os demais desenvolvedores agradecem.
      Obrigado
       
    • By João Carlos de Jesus
      <html>    <head>    <link rel="stylesheet" href="https://gitlab.com/joaocarlosdejesus19/teste/-/raw/master/teste.css"/>   </head>    <body>      <div>          <h2> Olá </h2>      </div>    </body>  </html> Minha Dúvida é, porque o link estilo externo que chamei não funcionou? 
      Como Eu poderia resolver isso. 
    • By Sapinn
      Opa galera tudo firmesa? Então, tenho um codigo que faz uma barra aparecer toda vez que eu role a pagina até um certo ponto e tudo funciona normal. Eu gostaria de saber se tem como fazer uma transição nessa barra para ele ir aparecendo devagarzinho com a opacidade em 0 e vai subindo até chegar a 1 coisa de um 0.8s. Não sei como fazer ou se tem como fazer preciso de ajuda.
       
      Codigo js 
       
      window.onscroll = function(){
          var top = window.pageXOffset || document.documentElement.scrollTop
          var barra = document.querySelector(".barra");
          if(top > 900){
              barra.style.display = 'flex';
      //aqui tentei adicionar uma class direto do css para fazer o efeito transition mas sem sucesso.
              barra.classList.add('transition');
          }else{
             barra.style.display = 'none';
          }
      }
       
       
      Codigo css
      .barra{
          width: 100%;
          height: 70px;
          background-color: #090b13;
          display: none;
          justify-content: space-between;
          position: fixed;
          opacity: 0;
      }
      .transition{
          transition: 1s;
          opacity: 0.7;
          
      }
       
      codigo HTML
       
      <div class="barra" >
              <img src="assets/images/logo-nopad.svg" alt="">
              <button class="botao-assinatura-header">Assine Agora</button>
        </div>
       
       
×

Important Information

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