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