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

  1. danicarla

    Versão para impressão

    Olá pessoas, Estou tentando fazer uma versão de impressão usando CSS eu queria colocar um cabeçalho e um rodapé em todas as paginas, O problema é que o conteúdo vem do banco de dados, e dependendo do tamanho dos parágrafos em algumas vezes o texto acaba ficando em cima do cabeçalho ou do rodapé.. alguém tem alguma idéia de como posso fazer isso? Meu cód está assim: header {font-family:Arial;font-size: 22px;color: #000;text-align: center;} footer {font-family:Arial;font-size: 10px; color: #CD090C;text-align: center;} article {font-family:Arial;font-size: 14px; color: #000;text-align: justify;} @page {size: A4;margin: 11mm 17mm 17mm 17mm;} @media print { header {position: fixed;top: 0;} footer {position: fixed;bottom: 0;} article {position: relative;top:40px;} .content-block, p {top:40px;page-break-inside: avoid;} html, body {width: 210mm;height: 297mm;} } E no HTML <header>CABEÇALHO</header> <article>Conteudo.. texto.. etc..</article> <footer>Texto do Rodapé</footer>
  2. Boa tarde pessoal! Tenho a seguinte REGEX, . Ela serve para detectar se uma URL vem do Youtube ou do Vimeo, e possui os parâmetros necessários. (?:(?i)(?:https:|http:)?\/\/)?(?:(?i)(?:www\.youtube\.com\/(?:embed\/|watch\?v=)|youtu\.be\/|youtube\.googleapis\.com\/v\/)(?<YoutubeID>[a-z0-9-_]{11,12})|(?:vimeo\.com\/|player\.vimeo\.com\/video\/)(?<VimeoID>[0-9]+)) Ela é totalmente funcional no modelo PCRE (PHP). Testada aqui: https://regex101.com/r/PVdjg0/2 Utilizo estes matches pra testar: Porém, preciso utiliza-la em um campo HTML dentro do atributo pattern. Por isso, preciso convertê-la para o padrão do JS. Mas aí começam uma série de problemas. Se eu utilizo como está, recebo o seguinte erro: ? The preceding token is not quantifiable Testes que realizei: - Se eu escapar o (?i) desta maneira: (/?i), só são validadas entradas do Vimeo. - Se eu deixar sem o ?, mesma coisa. - Se eu retirar a condição (?i), fica case sensitive, e não posso utilizar, pois videos do Youtube tem o parâmetro URL muitas vezes com maisculos, minusculos... Alguém pode me ajudar?
  3. Olá pessoal. Então, tenho um site que não foi feito com Wordpress, ele esta pronto rodando mas o que queria era colocar um blog criado no Wordpress. Não manjo de Wordpress, todos os site eu faço na "unha", então sei que são coisas opostas, mas presumo que todos tem a mesma base, ou seja, PHP, Jquery, html e etc... E a opção de criar todo o site em Wordpress não rola, se alguém souber de algo poderia me dar algumas dicas. Grato.
  4. OLÁ, gostaria de pegar os valores desses input e enviar no formulario apenas por um unico input hidden, um input com id diferente. Meu codigo está assim, gostaria de saber se é isso mesmo ou o que falta. input class="gp_input_grid" id="cod1" name="cod1" autofocus onKeyUp="javascript:pulacampo('cod1','cod2')" maxlength="1" type="tel" value=""> input class="gp_input_grid" id="cod2" name="cod2" maxlength="1" onKeyUp="javascript:pulacampo('cod2','cod3')" type="tel" value="" input class="gp_input_grid" id="cod3" name="cod3" maxlength="1" onKeyUp="javascript:pulacampo('cod3','cod4')" type="tel" value=""> input class="gp_input_grid" id="cod4" name="cod4" maxlength="1" onKeyUp="javascript:pulacampo('cod4','cod5')" type="tel" value="" input class="gp_input_grid" id="cod5" name="cod5" maxlength="1" onKeyUp="javascript:pulacampo('cod5','cod6')" type="tel" value="" input class="gp_input_grid" id="cod6" name="cod6" maxlength="1" onKeyUp="javascript:pulacampo('cod6','pulou')" type="tel" value="" input type="hidden" name="dados" id="dados" value="<?=$_POST['cod1']; ?><?=$_POST['cod2']; ?><?=$_POST['cod3']; ?><?=$_POST['cod4']; ?>" GOSTARIA DE SABER SE É ISSO MESMO, OU O QUE FALTA.
  5. Boa tarde, pessoal!!! Estou com um pequeno problema com essa tag aí. O que acontece?? Fiz tudo certo no código e no css, porém ao atualizar a página, o vídeo aparece, mas não executa. Eis o código: <div class="box-esquerdo"> <video class="institucional" src="https://youtu.be/90uPbUirZ3I" controls="controls" autoplay="autoplay"></video> </div> Procurei em diversos tutoriais e falam pra atualizar o browser, porém já está atualizado e mesmo assim o erro continua. E no Edge (uso o Windows 10 64 bits), diz que a fonte é inválida. O que pode estar havendo?? Alguém pode me ajudar nessa??? Aguardo respostas!!! []'s
  6. Criei um formulário para envio dos pedidos, assim que o cliente colocar os dados e concluir a compra. Fiz a maior parte com requisições ajax, está tudo funcionando perfeitamente, e como certeza disso, após clicar em finalizar compra, o cliente é redirecionado para página '4d-thank-you.php', onde ele recebe a mensagem de que o pedido foi efetuado com sucesso. Mais eu quero adicionar mais um campo, para o cliente inserir o endereço, mais já tentei de todas as formas, efetuo todas modificações certinhas, e quando clico em Finalizar compra, o cliente não é mais redirecionado para a página '4d-thank-you.php', ou seja a requisição não está sendo feita com sucesso. Vou deixar abaixo os códigos que fazem o carrinho funcionar e a inserir os dados do formulário no Mysql, esse código está funcionando, porém, quando adiciono mais um campo ele para de funcionar, se puderem me ajudar preciso urgente para um projeto. Esse é o carrinho, e a parte onde o cliente coloca as informações para concluir o pedido. <?php // SHOPPING CART WILL BE STORED IN THE SESSION // $_SESSION['cart'][PRODUCT ID] = QUANTITY require __DIR__ . DIRECTORY_SEPARATOR . "lib" . DIRECTORY_SEPARATOR . "2a-config.php"; switch ($_POST['req']) { /* [INVALID REQUEST] */ default: echo "INVALID REQUEST"; break; /* [ADD ITEM TO CART] */ case "add": if (is_numeric($_SESSION['cart'][$_POST['product_id']])) { $_SESSION['cart'][$_POST['product_id']] ++; } else { $_SESSION['cart'][$_POST['product_id']] = 1; } echo "Produto adicionado ao carrinho"; break; /* [COUNT TOTAL NUMBER OF ITEMS] */ case "count": $total = 0; if (count($_SESSION['cart'])>0) { foreach ($_SESSION['cart'] as $id => $qty) { $total += $qty; } } echo $total; break; /* [SHOW CART] */ case "show": // Fetch products require PATH_LIB . "2b-lib-db.php"; require PATH_LIB . "4c-lib-cart.php"; $cartLib = new Cart(); $products = $cartLib->details(); // Cart contents in HTML $sub = 0; $total = 0; ?> <h1 style="font-family: 'Gotham Light;'" class="text-center text-info mt-2">Minhas compras&nbsp;<i class="fa fa-gift"></i></h1> <table id="cart-table"> <tr> <th>Remover</th> <th>Quantidade</th> <th>Nome do produto</th> <th>Preço</th> </tr> <?php if (count($_SESSION['cart'])>0) { foreach ($_SESSION['cart'] as $id => $qty) { $sub = $qty * $products[$id]['product_price']; $total += $sub; ?> <tr> <td> <a href="#" class="text-danger lead" onclick="cart.remove(<?= $id ?>);"> <i class="fa fa-trash"></i></a> </td> <td><input class="form-control" id='qty_<?= $id ?>' onchange='cart.change(<?= $id ?>);' type='number' value='<?= $qty ?>'/></td> <td><?= $products[$id]['product_name'] ?></td> <td><?= sprintf("$%0.2f", $sub) ?></td> </tr> <?php }} else { ?> <tr align="center" ><td colspan="3" align="center">&nbsp;Seu carrinho está vazio&nbsp;&nbsp;<button class="btn btn-success"><a style="color: white; text-decoration: none;" href="index.php">Continuar comprando</a></button></td></tr> <?php } ?> <tr> <td colspan="2"></td> <td><strong>Preço total</strong></td> <td><strong><?= sprintf("$%0.2f", $total) ?></strong></td> </tr> </table> <hr> <?php if (count($_SESSION['cart']) > 0) { ?> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg"><i class="fa fa-credit-card"></i>&nbsp;Finalizar Compra</button> <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <form class="p-2" onsubmit="return cart.checkout();"> <div class="form-row"> <div class="form-group col-md-6"> <label for="co_name">Nome completo</label> <input type="text" class="form-control" id="co_name" placeholder="Nome completo"> </div> <div class="form-group col-md-6"> <label for="co_email">Seu email</label> <input type="email" class="form-control" id="co_email" value="" disabled> </div> </div> <div class="form-group"> <label for="co_address">Rua, Sítio</label> <input type="text" class="form-control" id="co_address" placeholder="Digite a rua ou sítio onde mora"> </div> <div class="form-group"> <label for="inputAddress2">Bairro</label> <input type="text" class="form-control" id="inputAddress2" placeholder="Digite o bairro onde mora"> </div> <div class="form-row"> <div class="form-group col-md-4"> <label for="inputState">Município</label> <select id="inputState" class="form-control" disabled> <option>União dos Palmares</option> </select> </div> <div class="form-group col-md-2"> <label for="inputZip">Zip</label> <input type="text" class="form-control" id="inputZip"> </div> </div> <input type="submit" class="btn btn-info btn-block" value="checkout"> </form> </div> </div> </div> <!---- FIM FINALIZAR COMPRA E MAIS DUVIDAS -----> <?php } break; /* [CHANGE QTY] */ case "change": if ($_POST['qty'] == 0) { unset($_SESSION['cart'][$_POST['product_id']]); } else { $_SESSION['cart'][$_POST['product_id']] = $_POST['qty']; } echo "Ação realizada com sucesso"; break; /* [CHECKOUT] */ // @TODO // Beef up this section on your own! // There are no error & security checks in this simple example // You may also want to add more of your own checkout procedures here case "checkout": require PATH_LIB . "2b-lib-db.php"; require PATH_LIB . "4c-lib-cart.php"; $cartLib = new Cart(); if ($cartLib->checkout($_POST['name'], $_POST['email'])) { $_SESSION['cart'] = []; echo "OK"; } else { echo $cartLib->error; } break; /* [ALTERNATIVE CHECKOUT] */ // This version sends an email to the customer on successful checkout case "checkout-email": require PATH_LIB . "2b-lib-db.php"; require PATH_LIB . "4c-lib-cart.php"; $cartLib = new Cart(); if ($cartLib->checkout($_POST['name'], $_POST['email'])) { $_SESSION['cart'] = []; // @TODO // Format this email message as you see fit $order = $cartLib->get($cartLib->orderID); $to = $_POST['email']; $subject = "Order Received"; $message = ""; foreach ($order['items'] as $pid=>$p) { $message .= $p['product_name'] . " - " . $p['quantity'] . "<br>"; } $headers = implode("\r\n", [ 'MIME-Version: 1.0', 'Content-type: text/html; charset=utf-8', 'From: john@doe.com' ]); echo @mail($to, $subject, $message, $headers) ? "OK" : "ERROR sending email!" ; } else { echo $cartLib->error; } break; } ?> Aqui é feita a inserção do formulário no Mysql <?php class Cart extends DB { function details () { // details() : get details of items in cart // Empty if (count($_SESSION['cart'])==0) { return false; } // Get products in cart $sql = "SELECT * FROM `products` WHERE `product_id` IN ("; $sql .= str_repeat('?,', count($_SESSION['cart']) - 1) . '?'; $sql .= ")"; return $this->fetch($sql, array_keys($_SESSION['cart']), "product_id"); } function checkout ($name, $email) { // checkout() : checkout, create new order // PARAM $name : customer's name // $email : customer's email address // Init $this->start(); // Create the order entry first $pass = $this->exec( "INSERT INTO `orders` (`order_name`, `order_email`) VALUES (?, ?)", [$name, $email] ); // Insert the items if ($pass) { $this->orderID = $this->lastID; $sql = "INSERT INTO `orders_items` (`order_id`, `product_id`, `quantity`) VALUES "; $cond = []; foreach ($_SESSION['cart'] as $id=>$qty) { $sql .= "(?, ?, ?),"; array_push($cond, $this->orderID, $id, $qty); } $sql = substr($sql, 0, -1) . ";"; $pass = $this->exec($sql, $cond); } // Finalize $this->end($pass); return $pass; } function get ($id) { // get () : get order // PARAM $id : order ID $order = $this->fetch( "SELECT * FROM `orders` WHERE `order_id`=?", [$id] ); $order['items'] = $this->fetch( "SELECT * FROM `orders_items` LEFT JOIN `products` USING (`product_id`) WHERE `orders_items`.order_id=?", [$id], "product_id" ); return $order; } } ?> Esse é o script, que ajuda nas funcionalidades do Carrinho de compras. // @TODO - // There is literally little to no interface in this script. // Feedback meesage such as "item added to cart" uses raw Javascript alert // Bootstrap, jQuery, Angular, or vanilla CSS - Implement your own interface. var cart = { ajax : function (opt) { // ajax() : helper function, do AJAX request // PARAM opt.data : data to be sent, an object with key-value pairs // opt.url : target URL // opt.target : (optional) ID of HTML element, put server response in here if provided // opt.load : (optional) function to call when AJAX load is complete // DATA var data = null; if (opt.data) { data = new FormData(); for (var d in opt.data) { data.append(d, opt.data[d]); } } // AJAX var xhr = new XMLHttpRequest(); xhr.open('POST', opt.url, true); xhr.onload = function(){ if (xhr.status!=200) { console.log(xhr); alert("AJAX error. Server responded with error code " + xhr.status + " " + xhr.statusText); } else { if (opt.target) { document.getElementById(opt.target).innerHTML = this.response; } if (typeof opt.load == "function") { opt.load(this.response); } } }; xhr.send(data); }, add : function (id) { // add () : add item to cart // PARAM id : product ID cart.ajax({ url : "4b-ajax-cart.php", data : { req : "add", product_id : id }, load : function (res) { cart.count(); // @TODO alert(res); } }); }, count : function () { // count() : update items count cart.ajax({ url : "4b-ajax-cart.php", data : { req : "count", }, target : "page-cart-count" }); }, toggle : function (reload) { // toggle() : show/hide cart // PARAM reload : force cart reload? var pgPdt = document.getElementById("page-products"), pgCart = document.getElementById("page-cart"); if (reload || pgCart.classList.contains("ninja")) { cart.ajax({ url : "4b-ajax-cart.php", data : { req : "show", }, target : "page-cart", load : function () { pgPdt.classList.add("ninja"); pgCart.classList.remove("ninja"); } }); } else { pgPdt.classList.remove("ninja"); pgCart.classList.add("ninja"); } }, change : function (id) { // change() : change quantity var qty = document.getElementById("qty_"+id).value; cart.ajax({ url : "4b-ajax-cart.php", data : { req : "change", product_id : id, qty : qty }, load : function (res) { cart.count(); cart.toggle(1); // @TODO alert(res); } }); }, remove : function (id) { // remove() : remove item from cart document.getElementById("qty_"+id).value = 0; cart.change(id); }, checkout : function () { // checkout () : checkout cart.ajax({ url : "4b-ajax-cart.php", data : { req : "checkout", // @TODO // Change to checkout-email if you want an email to be sent on checkout // req : "checkout-email", name : document.getElementById("co_name").value, email : document.getElementById("co_email").value, }, load : function (res) { if (res=="OK") { window.location = "4d-thank-you.php"; } else { gen.nShow(res); } } }); return false; } }; window.addEventListener("load", cart.count);
  7. Pessoal Eu Recentemente estava fazendo um gerador de qr-code, e preciso criar um botão que quando a pessoa clique apareça para poder baixar/fazerdownload da imagem gerada, pode me ajuda? to preso nisso faz tempo, e se puderem podem Organizar o codigo para mim? <!DOCTYPE html> <html> <head> <title>QR-Code</title> <style type="text/css"> #qrcode { border: 1pt solid gray; display: inline-block; } </style> </head> <body> <center> <input type="text" name="qrtexto" id="qrtexto" onkeypress="gerarqr();" onkeyup="gerarqr();"><br> <br> <button onclick="gerarqr();" on>Gerar</button> <button onclick="limpar();" on>Limpar</button> </center> <br> <br> <center> <div id="qrcode"></div> </center> <br> <center> <button onclick="baixar();">Baixar (Em Breve)</button> </center> <script src="qrcode.min.js"></script> <script> qrcode.innerHTML="<img src='limpo.png'>"; function gerarqr(){ var qrcode=document.getElementById('qrcode'); qrcode.innerHTML=" "; var texto=document.getElementById("qrtexto").value; var qrcodee = new QRCode(qrcode, { text: texto, width: 300, height: 300, colorDark : "#000000", colorLight : "#ffffff", correctLevel : QRCode.CorrectLevel.H }); } function limpar(){ qrcode.innerHTML="<img src='limpo.png'>"; } function baixar() { } </script><br><br><br><br><br><br><br> <h6 align="center">Feito por Itz_Topz</h6> </body> </html>
  8. 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?
  9. 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?
  10. 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.
  11. 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>
  12. 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>
  13. 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!
  14. 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>>>>>>>>
  15. 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>
  16. 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!
  17. 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.
  18. 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!!!
  19. 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); }
  20. 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!
  21. 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?
  22. 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.
  23. 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; } }
  24. 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
  25. 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!
×

Important Information

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