Jump to content

Search the Community

Showing results for tags 'html5'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Found 127 results

  1. esse é o link do meu site:https://xraros.000webhostapp.com/ o problema é que no arquivo css test.css no bloco de código: eu escrevi esse código: @media screen and (min-width: 800px) and (max-width: 848px){ .busca { width:200px; } .barra { background:url(../img/barra.png)no-repeat; } } escrevi esse código: .barra { background:url(../img/barra.png)no-repeat; } no index da pagina tem a div: <div class="barra"> </div> mais no site não carrega essa imagem. como eu carrego essa imagem via css dentro de um div?
  2. OI gente, gostaria de de ideias de como posso desenvolver um player que tenha mais de uma faixa... Algo semelhante a isso: https://www.karaoke-version.com/custombackingtrack/u2/beautiful-day.html Alguém tem alguma idéia de como fazer?
  3. estou há horas tentando utilizar o Carousel do Bootstrap para exibir produtos. Fiz sozinho não funcionou, então encontrei este código https://codepen.io/kreigd/pen/ybYNoN coloquei em um arquivo sozinho, separado do site que estou desenvolvendo e nem assim funciona. Fica assim: http://equipenovainfo.com.br/_portifolio/amanda/31_07_2019/carousel_prod.php Segue o código: <!doctype html> <html lang="pt-br"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Hello, world!</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script> $(document).ready(function() { $("#myCarousel").on("slide.bs.carousel", function(e) { var $e = $(e.relatedTarget); var idx = $e.index(); var itemsPerSlide = 3; var totalItems = $(".carousel-item").length; if (idx >= totalItems - (itemsPerSlide - 1)) { var it = itemsPerSlide - (totalItems - idx); for (var i = 0; i < it; i++) { // append slides to end if (e.direction == "left") { $(".carousel-item") .eq(i) .appendTo(".carousel-inner"); } else { $(".carousel-item") .eq(0) .appendTo($(this).find(".carousel-inner")); } } } }); }); </script> </head> <body> <div class="container-fluid"> <h1 class="text-center mb-3">Bootstrap Multi-Card Carousel</h1> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner row w-100 mx-auto"> <div class="carousel-item col-md-4 active"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f44242/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 1</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/418cf4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 2</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/3ed846/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 3</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/42ebf4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 4</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f49b41/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 5</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f4f141/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 6</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/8e41f4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 7</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> Preciso terminar esse trabalho, travei nisso. Me ajudará à pagar a faculdade e ganharei tempo para estudar.
  4. Webster Moitinho

    Sinal Sonoro ao receber a mensagem

    Criei um sistema de mensagens em que a notificação aparece como um "bullet" com a quantidade de mensagens não lidas sobre a logomarca do sistema. Todavia eu gostaria de que, se a quantidade de mensagens fosse maior que 0 (zero), o sistema emitisse um alarme sonoro. Meu código está assim: <?php //verifica se o numero de linhas é maior que 0 (zero) $num_rows = 2; if($num_rows > 0){ //toca o som de alerta echo "<script> play();</script>"; // <-- O elemento audio só vai ser criado daqui algumas linhas, // não tem como ele ser tocado ainda. } ?> <audio id="autoplay"> <source src="libraries/gopi.mp3" type="audio/mp3" /> seu navegador não suporta HTML5 </audio> <script type="text/javascript"> audio = document.getElementById('autoplay'); function play(){ audio.play(); } </script>
  5. Olá! Tenho um carousel em Bootstrap que se ajusta automaticamente à página, porém no modo mobile fica muito pequeno. O carousel está direto no <body>. Segue o código. O resultado pode ser visualizado em: http://equipenovainfo.com.br/_portifolio/br_informatica_tec/ <!-- CAROUSEL --> <div id="carousel_slide" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li class="active bg-primary" data-target="#carousel_slide" data-slide-to="0"></li> <li class="bg-primary" data-target="#carousel_slide" data-slide-to="1"></li> <li class="bg-primary" data-slide-to="#carousel_slide" data-target-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="img-fluid" src="_imagens/_slide/foto01.jpg" alt=""> <div class="carousel-caption text-dark d-none d-md-block"> <h2>Título da Descrição I</h2> <p class="lead">A descrição deste anúncio do banner aparece aqui!</p> </div> </div> <div class="carousel-item"> <img class="img-fluid" src="_imagens/_slide/foto02.jpg" alt=""> <div class="carousel-caption text-dark d-none d-md-block"> <h2>Título da Descrição II</h2> <p class="lead">A descrição deste anúncio do banner aparece aqui!</p> </div> </div> <div class="carousel-item"> <img class="img-fluid" src="_imagens/_slide/foto03.jpg" alt=""> <div class="carousel-caption text-dark d-none d-md-block"> <h2>Título da Descrição III</h2> <p class="lead">A descrição deste anúncio do banner aparece aqui!</p> </div> </div> </div> <a class="carousel-control-prev" href="#carousel_slide" role="button" data-slide="prev"> <span class="carousel-control-prev-icon"></span> <span class="sr-only">Anterior</span> </a> <a class="carousel-control-next" role="button" data-slide="next" href="#carousel_slide"> <span class="carousel-control-next-icon"></span> <span class="sr-only">Avançar</span> </a> </div>
  6. israel@iproduce.com.br

    Motion Designer

    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!
  7. 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>>>>>>>>
  8. Wanderson Moreira

    sistema de notificação chrome

    bom dia Estou tentando criar um sistema de notificação e quando utilizo ele em servidor local ele funciona, porem qnd tento acessar ele de outra maquina ele não funciona <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>Notificações</h1> <input type="button" value="Notificar!" onclick="minhaNotificao()"> <script> //Verifica e solicita se o usuario tem permissao para utilizar as notificações do Chrome document.addEventListener('DOMContentLoaded', function () { if (!Notification) { alert('Erro no sistema de notificação, navegador não suportado.'); return; } if (Notification.permission !== "granted") Notification.requestPermission(); }); function minhaNotificao() { if (Notification.permission !== "granted") { Notification.requestPermission(); } else { var notificacao = new Notification("Titulo da notificacao", { icon: 'go.jpg', //img body: 'Mensagem' }); notificacao.onclick = function () { window.open('http://google.com/'); //site }; } } minhaNotificao(); </script> </body> </html>
  9. Bom dia! Teria como alguém me ajudar? Sou bem iniciante nos códigos e acabou me surgindo uma duvida/problema a qual estou tentando resolver desde hoje cedo... Preciso criar um contêiner dentro de outro contêiner igual a imagem 1. Só que ele está ficando igual a imagem 2. Estou utilizando o bootstrap para tentar arrumar isso de uma forma que também traga a responsividade. Basicamente eu criei um container fluid e dentro dele tinha outro container, só que não estou conseguindo posicionar ambos corretamente!
  10. marcelodevico

    Data-filter

    Olá, preciso que o site já abra com o filtro "geradores" ativo, e não mostrando todo os conteúdos de todos os filtros. <div class="portfolio_filter portfolio_filter_2"> <ul> <li data-filter=".geradores" class="active"><a href=""><i class="fa fa-plug" aria-hidden="true"></i>GERADORES</a></li> <li data-filter=".solar"><a href=""><i class="fa fa-sun-o" aria-hidden="true"></i>ENERGIA SOLAR</a></li> <li data-filter=".obras"><a href=""><i class="fa fa-cubes" aria-hidden="true"></i>OBRAS CIVIS</a></li> <li data-filter=".eletricos"><a href=""><i class="fa fa-wrench" aria-hidden="true"></i>SRVIÇOS ELÉTRICOS</a></li> <li data-filter=".transformadores"><a href=""><i class="fa fa-bolt" aria-hidden="true"></i>TRANSFORMADORES</a></li> </ul> </div> o <class="active"> só está servindo para deixar ele marcado, como se estivesse ativo, mas o filtro não está abrindo ativo quando se inicializa o site. Apenas após clicar nele.
  11. Boa tarde! Estou batendo a cabeça numa configuração simples, porém que foge do meu conhecimento, andei pesquisando na internet, mas não encontrei uma solução que funcionasse na minha pagina. Preciso apenas configurar o pattern do input para receber dados tanto de email, quanto de cpf para simplificar meu sistema, limitei meu usuario a cadastrar apenas os numeros do CPF, porem como meu sistema permite que o usuario se logue pelo email ou pelo cpf, não conseguigo configurar o pattern do login eu gostaria que meu pattern permitisse apenas letras e numeros e FACULTATIVO o "@" e "." mas ai eu so estou conseguindo fazer sem o "@" e "." ou com "@" e "." esse facultativo que nao sei como colocar dentro do pattern. Existe essa possibilidade ou teria que ser por javascript mesmo? alguem me da uma luz!!!! o meu sonho seria um campo que conseguisse diferenciar se esta sendo preenchido como [caractere]@[caractere].[caractere] ou [3car].[3car].[3car]-[2ca], mas isso é muito dificil, estou errado? não tenho ideia se isso é possivel ou como poderia ser feito, esse foi o principal motivo de eu limitar o usuario a cadastrar somente numeros (sei que existe como fazer um "editar" na hora do POST, mas por enquanto meus estudos não chegaram ate ai) muito obrigado!!!
  12. Bruno Goedert Dalmolin

    Como Movimentar um Menu em HTML5 e CSS

    Fala devs Beleza? Estou com uma duvida em como eu movimento meu menu para o canto, pois ele fica travado no centro. Os dados são os seguintes: do HTML: <header> <ul id="Menu"> <li><a href="SmartAce-Home.html">Home</a></li> <li><a href="">Sobre</a></li> <li><a href="">Contato</a></li> </ul> </header> do CSS: @charset "UTF-8"; body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #112c38; } ul#Menu { text-align: center; margin: 0; padding: 0; display: flex; top: -10; } ul#Menu li{ list-style: none; margin: 0 20px; transition: 0.5s; } ul#Menu li a{ position: relative; text-decoration: none; padding: 5px; font-size: 18px; font-family: sans-serif; color: #fff; text-transform: uppercase; transition: 0.5s; } ul#Menu:hover li a { transform: scale(1.4); opacity: .2; filter: blur(5px); } ul#Menu li a:hover { transform: scale(2); opacity: 1; filter: blur(0); } ul#Menu li a:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ff497c; transition: transform 0.5s; transform-origin: right; transform: scaleX(0); z-index: -1; } ul#Menu li a:hover:before { transition: transform 0.5s; transform-origin: left; transform: scaleX(1); }
  13. Vamos supor que eu coloque uma logomarca no topo do meu site, e queira dar semântica à ela. Tudo bem se eu fizer dessa forma? Existe uma maneira mais simples? Basicamente criei um cabeçalho para minha logomarca, de forma a dar importância e contexto para que o "robo" do Google, por exemplo, tenha mais facilidade em interpretar o "conteúdo" da minha imagem e conseguir catalogá-la adequadamente em seu motor de buscas. span.td-visual-hidden { display: none; } <div class="td-header-logo"> <h1 class="td-logo"> <a href="#"> <img src="_images/defesa-evangelho.png" alt="Defesa do Evangelho" title="Defesa do Evangelho"/> <span class="td-visual-hidden">Defesa do evangelho</span> </a> </h1> </div> Desde já agradeço!
  14. Camila97

    Modal em JS

    Olá, estou tendo dificuldades em um site onde preciso desenvolver um modal ao clicar no botão X para excluir uma despesa, porém, o botão X foi criado no arquivo .js : //botão de excluir: let btn = document.createElement("button") btn.className = 'btn btn-danger' btn.innerHTML = '<i class="fas fa-times"></i>' btn.id = `id_despesa_${d.id}` btn.onclick = function(){ let id = this.id.replace('id_despesa_', ''); bd.remover(id) window.location.reload() } linha.insertCell(4).append(btn) console.log(d) Toda despesa criada, automaticamente é adicionado o botão X ao lado da despesa. Como poderia fazer aparecer um modal ao clicar nele, para saber se o usuário quer cancelar ou excluir a despesa?
  15. M4RC0S J0S3 S1LV4

    Como como fazer 3 input copiar 1

    Me desculpe, mas eu estou com um grande problema, acho que é fácil, mas para mim está sendo muito perturbador pois sou iniciante de JavaScript vamos lá. Eu queria saber como fazer 1 input preencher 2 input, tipo.. tem 3 input A e todos os input A forem preenchidos e no B a mesma coisa só muda que seja só o Input B. entendem? estou necessitando desta super ajuda.
  16. DinhoPHP

    Header ultrapassando Body

    Estou com o seguinte problema. Desenvolvi um site em flex box com width de 100% na Section. O problema é que o header com 100% fixed ultrapassa a section ficando mais larga que tudo na página no modo mobile mesmo utilizando break points. @media screen and (max-width: 984px){ header{ background-color: #1a1a1a; width: 100%; position: fixed; top: 0px; z-index: 999; display: flex !important; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space--around; line-height: 6; font-size: 0.8em; } }
  17. Prezados, Estou desenvolvendo uma aplicação web para gerenciamento de acesso ao almoxarifado do pequeno negócio de uma pessoa sem muitos recursos da comunidade aqui. Com conhecimentos de html5, css3 e um pouco de php, consegui fazer toda a parte de registros e a interface web de controle, no entanto, não entendo nadinha de javascript e "travei" no código para finalizar o projeto. Tenho esse script encontrado de fonte aberta na internet, mas não consigo adaptá-lo: <html lang="pt-br"> <head> <script type='text/javascript'> var led_controle = function(status) { var xmlhttp = new XMLHttpRequest(); var set_status = "http://192.168.1.35/?function=" + status; xmlhttp.open("GET", set_status); xmlhttp.send(); } // Acessa os botões e passa as nossas diretivas de ligar ou desligar o relé var led = function() { var on = document.querySelector(".on"); on.onclick = function() { led_controle("led13_on"); } var off = document.querySelector(".off"); off.onclick = function() { led_controle("led13_off"); } } window.onload = function() { // Chama a função led led(); } </script> </head> <body> <p><a class="btn on">ON</a></p> <p><a class="btn off">OFF</a></p> </body> </html> O código acima funciona perfeitamente. Ele aciona um sketch armazenado em um esp8266 e, através deste, aciona via relé de comando a porta do almoxarifado. O problema consiste que AO INVÉS do conteúdo do "body" acima, eu preciso capturar a ação do "button" dos forms contidos no "body" abaixo: <body> <form method="post" action="pagina.php"> <fieldset> <p class="center"> <input type="hidden" name="funcionario" value="entrada-almoxarifado"></input> <button class="btn" style="width: 250px;" type="submit" value="submit">entrar</button> </p> </fieldset> </form> <form method="post" action="pagina.php"> <fieldset> <p class="center"> <input type="hidden" name="funcionario" value="saida-almoxarifado"></input> <button class="btn" style="width: 250px;" type="submit" value="submit">sair</button> </p> </fieldset> </form> </body> </html> Já tentei várias e várias sugestões encontradas na internet, mas como não sei adaptar os códigos encontrados, não tem dado certo. Alguém poderia me explicar detalhadamente como modificar o script contido no head da minha página, parte por parte, para que o mesmo continue executando sua função só que capturando a ação do "button" do formulário? Agradeço de coração quem puder se dispor a ajudar. Sds, Mary
  18. Olá, Estou programando um newsletter e ele deveria se conectar com o banco de dados e enviar as informações para o mesmo, porém apenas se conecta. Ele não da nenhum erro, mas também não envia os dados para o banco de dados. Segue os códigos: HTML <section class="newsletter"> <h3> Newsletter </h3> <p> Receba todas as novidades </p> <form method="post" id="newsletter" name="cadastroNews" action="NewsCad.php"> <input type="text" name="nome" placeholder="Digite seu nome" required> <input type="email" name="email" placeholder="Digite seu email" required> <input type="submit" name="Enviar" value="Cadastrar"> </form> </section> Conexão com o banco de dados - Conexao.php <?php $host = '127.0.0.1:3306'; $user = 'root'; $password = 'bruxaria'; $database = 'quebrandotabus'; //Conectando ao banco de dados $conn = mysqli_connect($host, $user, $password, $database) or die(mysql_error()); ?> ENVIO DOS DADOS - NewsCad.php <?php include_once("Conexao.php"); $nome = filter_input(INPUT_POST, 'nome', FILTER_SANITIZE_STRING); $email = filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL); $result_usuario = "INSERT INTO newsletter (nome, email) VALUES ('$nome' , '$email')" or die(mysql_error()); $resultado_usuario = mysqli_query($conn , $result_usuario); ?> Vocês conseguem me ajudar? Por favor, preciso muito!
  19. COMO POSSO VISUALIZAR UM ARQUIVO PDF NUM SITE HTML5 OU PHP NUM DISPOSITIVO MÓVEL SEM USAR IMAGEM E SIM O PRÓPRIO PDF, POIS O MESMO SÓ ABRE SE BAIXAR.
  20. Olá, pessoas. To com um problema nesse exercício. Esse programa deve receber os itens de uma receita digitados por usuário e salvá-los dentro de um vetor, sempre verificando se o item digitado já não consta. Caso conste, deve exibir um alert( ) informando ao usuário que dado item já foi computado anteriormente, senão, deve gravar o item no vetor e repetir esse ciclo até a condição do primeiro for ser saciada. O problema é que quando o usuário digitar um valor que já existe no vetor ingredientes [ ] e o alert( ) do segundo for é exibido, após fechá-lo, o programa não dá continuidade, ou seja, no meu entender, deveria atribuir o valor false para variável verifica, com isso sair do segundo for, em seguida, ler a terceira condição: //Condicional decrementa a variável contador1, caso o item digitado seja repetido e após a primeira iteração. if (contador1 != 1 && verifica == false) { contador1--; verifica = true; } Abaixo deixo o código completo. <script> //Vetor que guarda os itens. var ingredientes = []; //Variável que guarda quantos itens serão adicionados no vetor ingredientes. var quantidade = parseInt(prompt("Quantos ingredientes você vai adicionar?")); //Variável de verificação. var verifica = true; //Laço para guardar os itens s no vetor. for (var contador1 = 1; contador1 <= quantidade; contador1++){ var item = prompt("Informe o "+contador1+"º item: "); /*Laço que verifica se o item digitado já existe ou não no vetor ingredientes. Caso exista, exibe alerta e muda o valor da variável de verificação para false.*/ for (var contador2 = 0; contador2 < ingredientes.length || verifica != true; contador2++){ if (item == ingredientes[contador2]) { alert("Item já adicionado!"); verifica = false; } } //Condicional que quarda o item digitado na primeira iteração. if (contador1 == 1 && verifica == true){ ingredientes.push(item); } //Condicional que guarda o item após a primeira iteração e caso ele não seja repetido. if (contador1 != 1 && verifica == true){ ingredientes.push(item); } //Condicional decrementa a variável contador1, caso o item digitado seja repetido e após a primeira iteração. if (contador1 != 1 && verifica == false) { contador1--; verifica = true; } } console.log(ingredientes); </script>
  21. zlDeath

    Ajuda - Mostrar somente o valor

    Ola boa tarde. Queria fazer uma parada que pegasse as informações da DB e mostrasse no site somente o valor, minha DB: Pegar o "nome_site" e mostrar o que tem no "valor" Porem não sei como fazer isso
  22. É possível eu utilizar uma expressão regular para que o usuário coloque o nome completo no input e não apenas o Primeiro nome através do pattern ? Como ficaria essa expressão regular ? <input pattern="" > vsf admin
  23. Eae pessoal tudo bem ? Seguinte estou aprendendo CSS, e fiz um menu um pouco animado. Ao passar a mouse sobre um Li ela mostra seus componentes com uma animação e delays diferentes. Meu problema é o seguinte, quando eu tiro o Mouse, os delays ainda acontecem deixando assim uma animação bem "Feia". Eu queria que ao tirar o mouse os itens voltassem ao mesmo tempo sem delay alguém pode me ajudar ? ( mais uma pergunta, estou aprendendo CSS3 e logo logo começo estudar JavaScript sabem me dizer se conseguria fazer animações como essa utilizando JavaScript mais facilmente ? ) Obrigado pela atenção o código esta abaixo <!doctype html> <html> <head> <meta charset="utf-8"> <title>Menu deslizante</title> <style> .container{ height: 500px; width: 200px; padding: 0px; overflow: hidden; } .menu{ width: 200px; font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana," sans-serif"; color:whitesmoke; font-size: 13pt; } .menu ul{ list-style: none; position: relative; padding: 0px; } .menu ul ul { padding: 0; position:absolute; transform: translateX(200px); } .menu ul li:hover ul{ position: relative; transition:2s; } .menu ul li:nth-child(1){ transition:0.25s; } .menu ul li:hover ul li:nth-child(1){ transform: translateX(-190px); } .menu ul li:nth-child(2){ transition:0.25s; transition-delay: 0.25s; } .menu ul li:hover ul li:nth-child(2){ transform: translateX(-190px); } .menu ul li:nth-child(3){ transition:0.25s; transition-delay: 0.5s; } .menu ul li:hover ul li:nth-child(3){ transform: translateX(-190px); } .menu li{ padding: 15px; cursor: pointer; background-color: rgba(188,27,30,1.00); border-bottom: rgba(229,79,82,1.00) solid 1px; } </style> </head> <body> <div class="container"> <nav class="menu"> <ul> <li>Home</li> <li>Galeria</li> <li>Shop <ul> <li>Cell Cases</li> <li>Notebook Acessories</li> <li>To your House</li> </ul> </li> <li>Contacts</li> <li>About us</li> </ul> </nav> </div> </body> </html>
  24. zeljunior

    Select PHP

    Pessoal boa noite. Não consigo trazer os usuários cadastrados no banco através desse select abaixo, alguém pode me ajudar? tr> <td align="left" bgcolor="#999999"> <font face="verdana" size="1"><b> AGENTE</b></font> </td> <td class="bar-search" align="left" bgcolor="#999999"> <? //PDO - Biblioteca de conexão a um banco de dados $dsn = "mysql:dbname=blog;host=localhost"; $dbuser = "root"; $dbpass = "081232"; try { $pdo = new PDO($dsn, $dbuser, $dbpass); $sql = "SELECT * FROM usuarios WHERE nivel='usuarios' ORDER BY nome ASC"; $sql = $pdo->query($sql); } catch (PDOException $e){ echo "Falhou: ".$e->getMessage(); } ?> <select > <option>Selecione...</option> <?php while ($row = mysql_fetch_assoc($sql)) {?> <option value="<?php echo $row['nome']; ?>"></option> <?php } ?> </select> </td> </tr>
  25. Estou tendo sérios problemas com acentuação no php. No ex: verdadeâ€... Alguém com esse problema? Poderiam me ajudar?
×

Important Information

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