Arquivado
Este tópico foi arquivado e está fechado para novas respostas.
Paradigmas e planeamento na criação de designs
Por
codercss, em Desenvolvimento frontend
Recommended Posts
-
Conteúdo Similar
-
Por douglas79
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
-
Por holasoycael
Oi Pessoal!
Eu estou ultilizando um slide desenvolvido com css3. Vim pedir ajudar aos universitarios. Precisso personaliar este slide removendo a target e mantendo o efeito.
TARGET:
É natural pelo codigo css ao selecionar a tela no menu ele busque a target. É possivel buscar a targert sem aparecer na barra URL?
<!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!-- HTML 4 --> <meta charset="utf-8"/><!-- HTML5 --> <style type="text/css"> *{margin:0;outline:0;padding:0;text-align:left;list-style:none;border:none;vertical-align:baseline;outline:none;} /* *Styling */ html,body { width: 100%; height: 100%; position: relative; } body { overflow: hidden; } header { background: #fff; position: fixed; left: 0; top: 0; width:100%; height: 3.5rem; z-index: 10; } nav { width: 100%; padding-top: 0.5rem; } nav ul { list-style: none; width: inherit; margin: 0; } ul li:nth-child( 3n + 1), #main .panel:nth-child( 3n + 1) { background: rgb( 0, 180, 255 ); } ul li:nth-child( 3n + 2), #main .panel:nth-child( 3n + 2) { background: rgb( 255, 65, 180 ); } ul li:nth-child( 3n + 3), #main .panel:nth-child( 3n + 3) { background: rgb( 0, 255, 180 ); } ul li { display: inline-block; margin: 0 8px; margin: 0 0.5rem; padding: 5px 8px; padding: 0.3rem 0.5rem; border-radius: 2px; line-height: 1.5; } ul li a { color: #fff; text-decoration: none; } .panel { width: 100%; height: 500px; z-index:0; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); -webkit-transition: -webkit-transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel h1 { font-family: sans-serif; font-size: 64px; font-size: 4rem; color: #fff; position:relative; line-height: 200px; top: 33%; text-align: center; margin: 0; } /* *Scrolling */ a[ id= "tela1" ]:target ~ #main article.panel { -webkit-transform: translateY( 0px); transform: translateY( 0px ); } a[ id= "tela2" ]:target ~ #main article.panel { -webkit-transform: translateY( -500px ); transform: translateY( -500px ); } a[ id= "tela3" ]:target ~ #main article.panel { -webkit-transform: translateY( -1000px ); transform: translateY( -1000px ); } </style> </head> <body> <a id="tela1"></a> <a id="tela2"></a> <a id="tela3"></a> <header class="nav"> <nav> <ul> <li><a href="#tela1">Tela 1</a></li> <li><a href="#tela2">Tela 2</a></li> <li><a href="#tela3">Tela 3</a></li> </ul> </nav> </header> <section id="main"> <article class="panel" id="tela1"> <h1> Conteúdo 1</h1> </article> <article class="panel" id="tela2"> <h1> Conteúdo 2</h1> </article> <article class="panel" id="tela3"> <h1> Conteúdo 3</h1> </article> </section> </body> </html>
DEMO:
http://jsfiddle.net/ivanferrer/en0m7yk1/
-
Por BelleFisio
Olá! Bom dia!
Tenho uma imagem que fica responsiva na maioria dos navegadores, porém no internet explore ela não fica responsiva. No iexplore ela tbm sai da posição correta, então fiz um codigo especifico para o iexplore (o posicionamento ficou correto, porém a imagem não esta responsiva)
Teria alguma forma de corrigir isso?
O codigo esta assim:
<div class="conteudo"> <div id="cabeçalho"> <div class="logotipo"> <img src="arquivo/img/logotipo.png"> </div> </div> </div> O CSS:
.cabeçalho{width:90%;margin-left:auto;margin-right:auto;} .logotipo {width:100%;max-width:1000px;}} .logotipo img{width:100%!important;height:auto;max-width:180px;}
Obrigada
-
Por teuzero
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?
-
Por DinhoPHP
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.
-